[dev]add product

src/pages/BrandsDetail.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import SearchBar from '../components/SearchBar';
 import { Alert, Button, Form, Modal } from 'react-bootstrap';
-import { Folders, Hash, LinkIcon, Plus, Users } from 'lucide-react';
+import { Folders, Hash, LinkIcon, Plus, Users, X } from 'lucide-react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useParams } from 'react-router-dom';
 import CampaignList from '../components/CampaignList';
@@ -18,6 +18,7 @@ import ProductDetail from '../components/ProductDetail';
 import { CAMPAIGN_SERVICES, CREATOR_CATEGORIES, CREATOR_LEVELS, CREATOR_TYPES, GMV_RANGES } from '../lib/constant';
 import RangeSlider from '../components/RangeSlider';
 import SpinningComponent from '../components/Spinning';
+import { setNotificationBarMessage } from '../store/slices/notificationBarSlice';
 
 export default function BrandsDetail() {
     const { id } = useParams();
@@ -26,6 +27,7 @@ export default function BrandsDetail() {
     const { selectedBrand } = useSelector((state) => state.brands);
     const [showProductDetail, setShowProductDetail] = useState(false);
     const [showAddCampaignModal, setShowAddCampaignModal] = useState(false);
+    const [showAddProductModal, setShowAddProductModal] = useState(false);
 
     useEffect(() => {
         if (id) {
@@ -52,7 +54,7 @@ export default function BrandsDetail() {
                         </Button>
                     )}
                     {activeTab === 'products' && (
-                        <Button>
+                        <Button onClick={() => setShowAddProductModal(true)}>
                             <Plus />
                             Add Product
                         </Button>
@@ -149,6 +151,7 @@ export default function BrandsDetail() {
                     </>
                 )}
                 <AddCampaignModal show={showAddCampaignModal} onHide={() => setShowAddCampaignModal(false)} />
+                <AddProductModal show={showAddProductModal} onHide={() => setShowAddProductModal(false)} />
             </React.Fragment>
         )
     );
@@ -218,7 +221,7 @@ export function AddCampaignModal({ show, onHide }) {
     };
 
     return (
-        <Modal show={show} onHide={handleClose} >
+        <Modal show={show} onHide={handleClose}>
             <Modal.Header>
                 <Modal.Title>Add Campaign</Modal.Title>
             </Modal.Header>
@@ -368,3 +371,111 @@ export function AddCampaignModal({ show, onHide }) {
         </Modal>
     );
 }
+
+export function AddProductModal({ show, onHide }) {
+    const dispatch = useDispatch();
+    const [productIds, setProductIds] = useState({
+        0: '',
+    });
+
+    const addProduct = () => {
+        const newIndex = Object.keys(productIds).length;
+        console.log(newIndex);
+        
+        setProductIds((prev) => ({
+            ...prev,
+            [newIndex]: '',
+        }));
+    };
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setProductIds((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const handleClose = () => {
+        setProductIds([]);
+        onHide();
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        dispatch(
+            setNotificationBarMessage({
+                message: '这个接口是哪一个？',
+                variant: 'info',
+            })
+        );
+        const form = document.getElementById('addProductForm');
+        if (form.checkValidity() === false) {
+            e.preventDefault();
+            e.stopPropagation();
+            setValidated(true);
+            return;
+        }
+        console.log(productIds);
+    };
+
+    const removeProduct = (index) => {
+        if (Object.keys(productIds).length === 1) {
+            return;
+        }
+        setProductIds((prev) => {
+            const updated = { ...prev };
+            delete updated[index];
+            return updated;
+        });
+    };
+
+    useEffect(() => {
+        if (show) {
+            setProductIds({
+                0: '',
+            });
+        }
+    }, [show]);
+
+    return (
+        <Modal show={show} onHide={handleClose}>
+            <Modal.Header>
+                <Modal.Title>Add Product</Modal.Title>
+            </Modal.Header>
+            <Form id='addProductForm' onSubmit={handleSubmit}>
+                <Modal.Body>
+                    {Object.entries(productIds).map(([index, productId]) => (
+                        <Form.Group key={Number(index)}>
+                            <Form.Label>Product {Number(index) + 1} PID</Form.Label>
+                            <div className='d-flex flex-row align-items-center justify-content-between'>
+                                <Form.Control
+                                    type='text'
+                                    name={index}
+                                    value={productId}
+                                    onChange={handleChange}
+                                    placeholder='Enter Product ID'
+                                    required
+                                />
+                                <Button variant='link' className='border-0' onClick={() => removeProduct(index)}>
+                                    <X />
+                                </Button>
+                            </div>
+                        </Form.Group>
+                    ))}
+                    <Button variant='outline-primary' className='mt-3' onClick={addProduct}>
+                        Add Product
+                    </Button>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant='outline-primary' className='border-0' onClick={onHide}>
+                        Cancel
+                    </Button>
+                    <Button variant='primary' type='submit'>
+                        Submit
+                    </Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>
+    );
+}

src/styles/Brands.scss

@@ -411,3 +411,12 @@
         }
     }
 }
+
+#addProductForm {
+    .modal-body {
+        width: 400px;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1rem;
+    }
+}