feat: remodel product page

src/pages/Product/Product.js

@@ -1,33 +1,32 @@
-import React, { useEffect, useState } from "react";
-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";
-import { ProductComponent } from "../../component/ProductComponent";
-import { LINKS } from "../../routes/app";
+import React, {useEffect, useState} from "react";
+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";
+import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
 
-const { TabPane } = Tabs;
-const { Search } = Input;
-const { Option } = Select;
+const {TabPane} = Tabs;
+const {Search} = Input;
+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 Promise.allSettled([
+          store.supplier.getData(),
+          store.product.getDataCategories(),
+          store.product.getDataSubCategories(),
+          store.category.getData(),
+          store.category.getDataSubCategories(),
+        ]);
         await store.product.getData();
-        //await store.supplier.data;
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -47,57 +46,45 @@ export const Product = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Product</span>,
     },
   ];
- 
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{ marginBottom: 20 }}>
+        <Row style={{marginBottom: 20}}>
           <Col span={12}>
-            {/* <Button>
-              <FilterOutlined />
+            <Button onClick={() => {
+              store.product.visibleModalFilterProduct = true
+            }}>
+              <FilterOutlined/>
               Filter
-            </Button> */}
-          </Col>
-          <Col span={12} style={{ textAlign: "right" }}>
-            <Search
-              placeholder="input search text"
-              style={{
-                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-              }}
-            />
-            <Button onClick={() => (store.product.visibleModalProduct = true)}>
-              <PlusSquareOutlined /> New
             </Button>
           </Col>
-        </Row>
-        <Row>
-          <Col span={20}>
-            <Select
-              placeholder="Choose Supplier"
-              onChange={(val) => {
-                val ? setUpload(false) : setUpload(true);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-            >
-              {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
+          <Col span={12}>
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <Search
+                  placeholder="input search text"
+                  style={{
+                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                    marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                  }}
+              />
+              <Upload>
+                <Button disabled={store.product.uploadBtnProduct} style={{
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                }} icon={<UploadOutlined/>}>
+                  Upload Product
+                </Button>
+              </Upload>
+              <Button onClick={() => (store.product.visibleModalProduct = true)}>
+                <PlusSquareOutlined/> New
               </Button>
-            </Upload>
+            </div>
           </Col>
         </Row>
-        <ProductComponent />
+        <ProductComponent/>
       </Card>
     </div>
   );