feat: add separated column in date and add pagination on price history on product detail

src/component/ProductComponent.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
 import {
   Button,
   Col,
@@ -15,19 +15,19 @@ import {
   Tag,
   Typography,
 } from "antd";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
+import {useHistory} from "react-router-dom";
-import { useStore } from "../utils/useStore";
+import {useStore} from "../utils/useStore";
-import { LINKS } from "../routes/app";
+import {LINKS} from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
+import {ModalLoaderContext} from "../utils/modal";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -109,10 +109,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
             onClick={async () => {
-              await store.product.getDetail(record.product_id);
-              await store.product.getDetailProduct(record.product_id);
               history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
-              //console.log(record.product_id);
             }}
           >
             Detail

src/pages/Product/ProductDetail.js

@@ -1,19 +1,18 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect} from "react";
-import { Button, Card, Col, Row, Table, Typography } from "antd";
+import {Card, Col, Row, Table, Typography} from "antd";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
+import {LINKS} from "../../routes/app";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { FilterOutlined } from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
-import { format, parseISO } from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
-import { ModalLoaderContext } from "../../utils/modal";
+import {useParams} from "react-router-dom";
-import { useParams } from "react-router-dom";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductDetail = observer(() => {
   const store = useStore();
-  const { id } = useParams();
+  const {id} = useParams();
   const modalLoader = useContext(ModalLoaderContext);
 
   const routeData = [
@@ -35,21 +34,18 @@ export const ProductDetail = observer(() => {
     (async () => {
       modalLoader.setLoading(true);
       await Promise.allSettled([
-        //store.authentication.getProfile(),
+        store.product.getPriceHistoryByProduct(id),
-        store.product.getDetail(id),
         store.product.getDetailProduct(id),
       ]);
       modalLoader.setLoading(false);
     })();
   }, []);
 
-  //console.log(id)
   const columns = [
     {
       title: "Markup Price",
       dataIndex: "mark_up_price",
       key: "mark_up_price",
-      width: "20%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -60,7 +56,6 @@ export const ProductDetail = observer(() => {
       title: "Price",
       dataIndex: "price",
       key: "price",
-      width: "50%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -68,12 +63,22 @@ export const ProductDetail = observer(() => {
         }).format(text),
     },
     {
-      title: "Transaction Date",
+      title: "Tanggal Berlaku",
       dataIndex: "startDate",
       key: "startDate",
-      render: (text, record) => {
+      render: (text) => {
         return (
-          <Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</Text>
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
+        );
+      },
+    },
+    {
+      title: "Tanggal Berakhir",
+      dataIndex: "endDate",
+      key: "endDate",
+      render: (text) => {
+        return (
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}</Text>
         );
       },
     },
@@ -105,47 +110,25 @@ export const ProductDetail = observer(() => {
                 <Text strong>Kode</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.product.dataDetailProduct.code}</Text>
+                <Text>{store.product?.dataDetailProduct?.code}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Nama Produk</Text>
               </Col>
               <Col span={10}>
-                <Text>{store.product.dataDetailProduct.name}</Text>
+                <Text>{store.product?.dataDetailProduct?.name}</Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Harga Beli</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                  }).format(store.product.dataDetailProduct.basePrice)}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Harga Jual</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                  }).format(store.product.dataDetailProduct.price)}
-                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Supplier</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.product.dataDetailProduct.supplier.name}</Text>
+                <Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.product.dataDetailProduct.status}</Text>
+                <Text>{store.product?.dataDetailProduct?.status}</Text>
               </Col>
             </Row>
           </Col>
@@ -174,9 +157,24 @@ export const ProductDetail = observer(() => {
                 Filter
               </Button> */}
               <Table
-                columns={columns}
+                  columns={columns}
-                dataSource={store.product.dataDetail}
+                  dataSource={store.product.dataPriceHistory}
-                bordered
+                  bordered
+                  pagination={{
+                    pageSize: store.product.pageSizePriceHistory,
+                    total: store.product.totalDataPriceHistory,
+                    current: store.product.pagePriceHistory + 1,
+                    showSizeChanger: true,
+                    simple: false,
+                  }}
+                  onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.product.pageSizePriceHistory = page.pageSize;
+                    store.product.pagePriceHistory = pageNumber - 1;
+                    modalLoader.setLoading(true);
+                    await store.product.getPriceHistoryByProduct(id);
+                    modalLoader.setLoading(false);
+                  }}
               />
             </div>
           </Col>

src/store/product.js

@@ -13,7 +13,7 @@ export class Product {
     uploadBtnProduct = false;
 
     pageCategories = 0;
-    pageSizeCategories = 10
+    pageSizeCategories = 100;
     dataCategories = [];
     total_dataCategories = 0;
 
@@ -22,11 +22,13 @@ export class Product {
     dataSubCategories = [];
     total_dataSubCategories = 0;
     filterCategory = null;
-    dataDetail=[]
-    dataDetailProduct=[]
 
-    pageGetDetail=0
+    dataPriceHistory = [];
-    supplier=null
+    totalDataPriceHistory = 0;
+    pagePriceHistory = 0;
+    pageSizePriceHistory = 10
+
+    dataDetailProduct = {};
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -72,22 +74,21 @@ export class Product {
             console.error(e);
         }
     }
-    async getDetail(id) {
+
+    async getPriceHistoryByProduct(id) {
         try {
-            const response = await http.get(`/product/price-history/${id}?page=${this.pageGetDetail}&supplier=${this.supplier}`);
+            const response = await http.get(`/product/price-history/${id}?page=${this.pagePriceHistory}&pageSize${this.pageSizePriceHistory}`);
-            //console.log(response,' Detail')
+            this.dataPriceHistory = response.body.data
-            this.dataDetail = response.body.data
+            this.totalDataPriceHistory = response?.body?.count ?? 0
-            this.total_data = response?.body?.count ?? 0
         } catch (e) {
             console.error(e);
         }
     }
+
     async getDetailProduct(id) {
         try {
             const response = await http.get(`/product/${id}`);
-            //console.log(response,' Detail Product')
             this.dataDetailProduct = response.body.data
-            this.total_data = response?.body?.count ?? 0
         } catch (e) {
             console.error(e);
         }