feat:update push

src/components/page/consultation/MainPageConsultation/MainPageConsultation.tsx

@@ -27,8 +27,8 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import React, { useMemo, useState } from "react";
 
-import PopupUpdateConsultation from "../PopupUpdateConsultation";
-import PopupCreateConsultation from "../PopupCreateConsultation";
+import { PATH } from "@/constant/config";
+import Pagination from "@/components/customs/custom-pagination";
 
 const MainPageConsultation = () => {
   const router = useRouter();
@@ -49,10 +49,6 @@ const MainPageConsultation = () => {
 
   const _keyword = searchParams.get("_keyword");
 
-  const _create = searchParams.get("_create");
-
-  const _update = searchParams.get("_update");
-
   /* =========================
         STATE
   ========================= */
@@ -112,6 +108,9 @@ const MainPageConsultation = () => {
         UPDATE QUERY
   ========================= */
 
+  const page = _page ? Number(_page) : 1;
+  const pageSize = _pageSize ? Number(_pageSize) : 10;
+
   const updateQuery = (key: string, value: string | number) => {
     const params = new URLSearchParams(searchParams.toString());
 
@@ -130,45 +129,21 @@ const MainPageConsultation = () => {
     router.push(queryString ? `?${queryString}` : pathname);
   };
 
-  /* =========================
-        CREATE POPUP
-  ========================= */
-
-  const handleOpenCreate = () => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    params.set("_create", "true");
-
-    router.push(`?${params.toString()}`);
-  };
-
-  /* =========================
-        UPDATE POPUP
-  ========================= */
-
-  const handleOpenUpdate = (item: ConsultationItem) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    params.set("_update", item.id);
-
-    router.push(`?${params.toString()}`);
-  };
-
   /* =========================
         CLOSE POPUP
   ========================= */
 
-  const handleClosePopup = () => {
-    const params = new URLSearchParams(searchParams.toString());
+  // const handleClosePopup = () => {
+  //   const params = new URLSearchParams(searchParams.toString());
 
-    params.delete("_create");
+  //   params.delete("_create");
 
-    params.delete("_update");
+  //   params.delete("_update");
 
-    const queryString = params.toString();
+  //   const queryString = params.toString();
 
-    router.push(queryString ? `?${queryString}` : pathname);
-  };
+  //   router.push(queryString ? `?${queryString}` : pathname);
+  // };
 
   /* =========================
         DIALOG
@@ -268,9 +243,10 @@ const MainPageConsultation = () => {
           variant="midnightBlue"
           fullWidth={false}
           icon={<ClipboardPlus />}
-          onClick={handleOpenCreate}
+          // onClick={handleOpenCreate}
+          href="/consultation/create"
         >
-          Thêm mới
+          Tạo phiên khám
         </CustomButton>
       </div>
 
@@ -310,6 +286,13 @@ const MainPageConsultation = () => {
                 </Link>
               ),
             },
+            {
+              title: "TÊN BỆNH NHÂN",
+
+              render: (item: ConsultationItem) => (
+                <span>{item.patientName}</span>
+              ),
+            },
 
             {
               title: "MÃ PHIÊN KHÁM",
@@ -365,24 +348,30 @@ const MainPageConsultation = () => {
                   stateActive={item.status}
                   listState={[
                     {
-                      state: 1,
-                      text: "Đang khám",
+                      state: TYPE_STATUS.Draft,
+                      text: "Đang chờ",
                       textColor: "#000",
                       backgroundColor: "#FFE4C4",
                     },
 
                     {
-                      state: 2,
-                      text: "Hoàn thành",
-                      textColor: "#fff",
-                      backgroundColor: "#22c55e",
+                      state: TYPE_STATUS.InProgress,
+                      text: "Đang thực hiện",
+                      textColor: "#000",
+                      backgroundColor: "#ff3300",
                     },
 
                     {
-                      state: 3,
+                      state: TYPE_STATUS.Completed,
+                      text: "Hoàn thành",
+                      textColor: "#000",
+                      backgroundColor: "#3d69eb",
+                    },
+                    {
+                      state: TYPE_STATUS.Cancelled,
                       text: "Đã hủy",
-                      textColor: "#fff",
-                      backgroundColor: "#ef4444",
+                      textColor: "#000",
+                      backgroundColor: "#cccc",
                     },
                   ]}
                 />
@@ -408,7 +397,7 @@ const MainPageConsultation = () => {
                       size="sm"
                       disabled={isDisabled}
                       icon={<Pencil className="text-blue-400" />}
-                      onClick={() => handleOpenUpdate(item)}
+                      href={`/consultation/update?_id=${item?.id}`}
                     />
 
                     {/* CANCEL */}
@@ -437,6 +426,14 @@ const MainPageConsultation = () => {
           ]}
         />
       </DataWrapper>
+      <Pagination
+        total={consultationData.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
 
       {/* CANCEL DIALOG */}
       <CustomDialog
@@ -461,19 +458,6 @@ const MainPageConsultation = () => {
         titleCancel="Đóng"
         titleSubmit="Xác nhận"
       />
-
-      {/* CREATE */}
-      <CustomPopup open={!!_create} onClose={handleClosePopup}>
-        <PopupCreateConsultation onClose={handleClosePopup} />
-      </CustomPopup>
-
-      {/* UPDATE */}
-      <CustomPopup open={!!_update} onClose={handleClosePopup}>
-        <PopupUpdateConsultation
-          id={_update || ""}
-          onClose={handleClosePopup}
-        />
-      </CustomPopup>
     </div>
   );
 };