Pages Product

src/pages/Product/Product.js

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Select, Tabs } from "antd";
-import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Input, Row, Select, Tabs, Upload } from "antd";
+import {
+  FilterOutlined,
+  PlusSquareOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -13,14 +17,17 @@ const { Option } = Select;
 
 export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
+  const [uploadProduct, setUpload] = useState(true);
   const store = useStore();
 
   useEffect(() => {
     const init = async () => {
       try {
         setIsLoading(true);
+        await store.supplier.getData();
         await store.product.getDataCategories();
         await store.product.getData();
+        //await store.supplier.data;
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -30,12 +37,6 @@ export const Product = observer(() => {
     init();
   }, []);
 
-  const handleChangeTabPane = async (key) => {
-    store.product.filterCategory = key;
-    // console.log(key);
-    await store.product.getData();
-  };
-
   const routeData = [
     {
       route: LINKS.HOME,
@@ -46,7 +47,7 @@ export const Product = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Product</span>,
     },
   ];
-
+ 
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -72,28 +73,31 @@ export const Product = observer(() => {
             </Button>
           </Col>
         </Row>
-
         <Row>
-          <Col span={24}>
+          <Col span={20}>
             <Select
               placeholder="Choose Supplier"
-              onChange={(val) => console.log(val, "SELECTED")}
+              onChange={(val) => {
+                val ? setUpload(false) : setUpload(true);
+              }}
               style={{ marginBottom: "20px", width: "100%" }}
             >
-              <Option value={1}>Hemm</Option>
-              <Option value={2}>Huam</Option>
+              {store.supplier.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
             </Select>
           </Col>
+          <Col style={{ marginLeft: "10px" }}>
+            <Upload>
+              <Button disabled={uploadProduct} icon={<UploadOutlined />}>
+                Upload Product
+              </Button>
+            </Upload>
+          </Col>
         </Row>
-
-        {/* <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
-          {store.product.dataCategories.map((item, idx) => (
-            <TabPane tab={item.name} key={item.id}> */}
-        {/* <ProductComponent category={item.name} /> */}
         <ProductComponent />
-        {/* </TabPane>
-          ))}
-        </Tabs> */}
       </Card>
     </div>
   );