imp: change payslip status

BigSillyTiger · Apr 16, 2024 · d1aa8a3 · d1aa8a3
1 parent 0922d7d
commit d1aa8a3
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 8 deletions.
diff --git a/src/apis/api_payslip.ts b/src/apis/api_payslip.ts
@@ -1,6 +1,10 @@
 import { Tbonus, Tpayslip } from "@/configs/schema/payslipSchema";
 import apis from "./axios";
-import { PAYSLIP_SINGLE_INSERT, PAYSLIP_SINGLE_DEL } from "./req_list";
+import {
+    PAYSLIP_SINGLE_INSERT,
+    PAYSLIP_SINGLE_DEL,
+    PAYSLIP_STATUS_UPDATE,
+} from "./req_list";
 
 export const psSingleInsert = async (
     bonus: Partial<Tbonus>,
@@ -24,7 +28,6 @@ export const psSingleInsert = async (
 
 export const psSingleDel = async (psid: string) => {
     try {
-        console.log("-> del payslip: ", psid);
         const response = await apis.post(PAYSLIP_SINGLE_DEL, {
             psid,
         });
@@ -38,3 +41,20 @@ export const psSingleDel = async (psid: string) => {
         };
     }
 };
+
+export const psStatusUpdate = async (psid: string, status: string) => {
+    try {
+        const response = await apis.put(PAYSLIP_STATUS_UPDATE, {
+            psid,
+            status,
+        });
+        return response.data;
+    } catch (error) {
+        console.log("-> ps status update error: ", error);
+        return {
+            status: 400,
+            msg: "failed in ps status update",
+            data: "",
+        };
+    }
+};
diff --git a/src/apis/req_list.ts b/src/apis/req_list.ts
@@ -69,5 +69,6 @@ export const PAYSLIP_SINGLE_INSERT = "/payslip/single-insert";
 export const PAYSLIP_SINGLE_UPDATE = "/payslip/single-update";
 export const PAYSLIP_SINGLE_DEL = "/payslip/single-del";
 export const PAYSLIP_SINGLE_ARCHIVE = "/payslip/single-archive";
+export const PAYSLIP_STATUS_UPDATE = "/payslip/status-update";
 export const PAYSLIP_ALL = "/payslip/all";
 export const PAYSLIP_ALL_W_UID = "/payslip/all_w_uid";
diff --git a/src/components/table/defaultTable.tsx b/src/components/table/defaultTable.tsx
@@ -25,6 +25,7 @@ import WLStatusBtn from "./tableBtn/WLStatusBtn";
 import { Tclient } from "@/configs/schema/clientSchema";
 import PSDelBtn from "./tableBtn/PSDelBtn";
 import { Tpayslip } from "@/configs/schema/payslipSchema";
+import PSStatusBtn from "./tableBtn/PSStatusBtn";
 
 type Tprops<T> = {
     data: T[];
@@ -234,6 +235,21 @@ const PTable = <T extends object>({
                                       />
                                   </td>
                               );
+                          } else if (cell.column.id === "psStatus") {
+                              return (
+                                  <td
+                                      key={cell.id}
+                                      className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
+                                  >
+                                      <PSStatusBtn
+                                          mLabel={flexRender(
+                                              cell.column.columnDef.cell,
+                                              cell.getContext()
+                                          )}
+                                          data={row.original as Tpayslip}
+                                      />
+                                  </td>
+                              );
                           } else if (cell.column.id === "startTime") {
                               return (
                                   <td

diff --git a/src/components/table/tableBtn/PSStatusBtn.tsx b/src/components/table/tableBtn/PSStatusBtn.tsx
@@ -0,0 +1,82 @@
+import { Fragment } from "react";
+import type { FC, ReactNode } from "react";
+import { useSubmit } from "react-router-dom";
+import { Menu, Transition } from "@headlessui/react";
+import { useRouterStore } from "@/configs/zustore";
+import { capFirstLetter, genAction } from "@/lib/literals";
+import { BG_SLATE, statusColor } from "@/configs/utils/color";
+import { PS_STATUS_TABLE } from "@/configs/utils/setting";
+import { Tpayslip } from "@/configs/schema/payslipSchema";
+
+type Tprops = {
+    mLabel: ReactNode | string;
+    data: Tpayslip;
+};
+
+/**
+ * @description this menu btn group component is highly designed for worklog status change usage
+ * @param param0
+ * @returns
+ */
+const PSStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
+    const submit = useSubmit();
+    const currentRouter = useRouterStore((state) => state.currentRouter);
+
+    const handleClick = async (psid: string, status: string) => {
+        submit(
+            { req: "psStatus", psid, status },
+            {
+                method: "PUT",
+                action: genAction(currentRouter),
+            }
+        );
+    };
+
+    const menuContent = (() => {
+        return PS_STATUS_TABLE.map((item, index) => {
+            if (item.toLocaleLowerCase() === data.status.toLocaleLowerCase())
+                return;
+            return (
+                <div className="p-1" key={index}>
+                    <Menu.Item as={Fragment}>
+                        {({ active }) => (
+                            <button
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    handleClick(data.psid, item);
+                                }}
+                                className={`group flex w-full items-center rounded-md px-2 py-2 text-sm text-bold ${statusColor[item].text} ${
+                                    active ? statusColor[item].bg : BG_SLATE
+                                }`}
+                            >
+                                {capFirstLetter(item)}
+                            </button>
+                        )}
+                    </Menu.Item>
+                </div>
+            );
+        }).filter((item) => item !== null && item !== undefined);
+    })();
+
+    return (
+        <Menu as="div" className="relative">
+            {/* <Menu as="div" className="relative"> */}
+            <Menu.Button>{mLabel}</Menu.Button>
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="absolute right-0 z-10 w-32 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+                    {menuContent}
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    );
+};
+
+export default PSStatusBtn;
diff --git a/src/components/table/tableBtn/WLStatusBtn.tsx b/src/components/table/tableBtn/WLStatusBtn.tsx
@@ -61,12 +61,8 @@ const WLStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
         }).filter((item) => item !== null && item !== undefined);
     })();
 
-    const onclick = () => {
-        console.log("_> onclick: ", mLabel);
-    };
-
     return (
-        <Menu as="div" className="relative" onClick={onclick}>
+        <Menu as="div" className="relative">
             {/* <Menu as="div" className="relative"> */}
             <Menu.Button>{mLabel}</Menu.Button>
             <Transition

diff --git a/src/configs/columnDefs/defPayslip.tsx b/src/configs/columnDefs/defPayslip.tsx
@@ -1,6 +1,8 @@
 import i18n from "@/configs/i18n";
 import { ColumnDef, CellContext } from "@tanstack/react-table";
 import { Tpayslip } from "../schema/payslipSchema";
+import Badge from "@/components/Badge";
+import { TstatusColor } from "../types";
 
 const payslipColumns: ColumnDef<Tpayslip>[] = [
     {
@@ -32,10 +34,11 @@ const payslipColumns: ColumnDef<Tpayslip>[] = [
         },
     },
     {
+        id: "psStatus",
         header: i18n.t("label.status"),
         accessorKey: "status",
         cell: (info: CellContext<Tpayslip, unknown>) => {
-            return <span>{info.getValue<string>()}</span>;
+            return <Badge value={info.getValue() as TstatusColor} />;
         },
     },
     {

diff --git a/src/configs/types.ts b/src/configs/types.ts
@@ -35,6 +35,7 @@ export enum RES_STATUS {
     SUC_DELETE_WORKLOG = 209,
     SUC_INSERT_PAYSLIP = 210,
     SUC_DEL_PAYSLIP = 211,
+    SUC_UPDATE_PAYSLIP = 212,
     //
     FAILED = 400,
     FAILED_DUP = 401,
@@ -47,6 +48,7 @@ export enum RES_STATUS {
     FAILED_DEL_WORKLOG = 408,
     FAILED_INSERT_PAYSLIP = 409,
     FAILED_DEL_PAYSLIP = 410,
+    FAILED_UPDATE_PAYSLIP = 411,
 }
 
 export type TisConflict =

diff --git a/src/configs/utils/setting.ts b/src/configs/utils/setting.ts
@@ -36,3 +36,5 @@ export const WL_STATUS_TABLE = [
     //"unpaid",
     //"completed",
 ] as const;
+
+export const PS_STATUS_TABLE = ["pending", "completed"] as const;
diff --git a/src/routerAccFns/actions/staffAction.ts b/src/routerAccFns/actions/staffAction.ts
@@ -80,6 +80,11 @@ export const staffAction = async ({
             data.get("uid") as string,
             data.get("password") as string
         );
+    } else if ("PUT" === request.method && data.get("req") === "psStatus") {
+        return await API_PAYSLIP.psStatusUpdate(
+            data.get("psid") as string,
+            data.get("status") as string
+        );
     } else {
         return {
             status: 400,