Skip to content

Commit

Permalink
reconstructure: await/defer orders/staff/setting/worklogs page
Browse files Browse the repository at this point in the history
  • Loading branch information
BigSillyTiger committed Apr 17, 2024
1 parent f365b9d commit 8d4d706
Show file tree
Hide file tree
Showing 23 changed files with 576 additions and 582 deletions.
3 changes: 1 addition & 2 deletions src/apis/api_staff.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import { Tstaff, TstaffForm } from "@/configs/schema/staffSchema";

export const staffAll = async (): Promise<Tresponse> => {
try {
const response = await apis.get(STAFF_ALL);
return response.data;
return await apis.get(STAFF_ALL).then((res) => res.data);
} catch (err: unknown) {
console.log("-> retrieve all staff error: ", err);
return {
Expand Down
2 changes: 1 addition & 1 deletion src/components/table/tableBtn/PSDisplayBtn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ type Tprops = {
const PSDisplayBtn: FC<Tprops> = ({ payslip }) => {
const [, setModalOpen] = useAtom(atModalOpen);
const allStaff = useStaffStore((state) => state.allStaff);
const [, setStaff] = useAtom(atStaff);
const [, setStaff] = useAtom(atStaff); // single staff
const allStaffWL = useStaffWLStore((state) => state.allStaffWL);
const setPayslip = usePayslipStore((state) => state.setPayslip);
const allBonus = usePayslipStore((state) => state.allBonus);
Expand Down
1 change: 0 additions & 1 deletion src/configs/zustore/payslipStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export const payslipStore = createStore<Tstate & Taction>((set) => ({
deduction: [],
allBonus: [],
resetAll: () => {
console.log("--> reset all called");
set((state) => ({
...state,
dayRange: { from: undefined, to: undefined },
Expand Down
22 changes: 7 additions & 15 deletions src/pages/client/MainContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,12 @@ const MainContent: FC = () => {
work_logs: [],
};

setClient(client[0]);
setCompany(company);
setLogo(logo);

// condition setState should be in useEffect
useEffect(() => {
setClient(client[0]);
setCompany(company);
setLogo(logo);
if (uniData) {
setUniData(uniData);
setServiceDesc({
Expand All @@ -82,18 +84,8 @@ const MainContent: FC = () => {
netto: uniData?.services[0].unit_price as number,
});
}
}, [
setClient,
setCompany,
setLogo,
client,
company,
logo,
setUniData,
uniData,
setServiceDesc,
clientOrder,
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [clientOrder, uniData]);

return (
<div className="px-4 sm:px-6 lg:px-8 top-0 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6 ">
Expand Down
30 changes: 20 additions & 10 deletions src/pages/dashboard/MainContent.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
import { TwlTableRow } from "@/configs/schema/workSchema";
import type { FC } from "react";
import { useEffect } from "react";
import DutyCard from "./DutyCard";
import { useTodayWLStore } from "@/configs/zustore/todayWLStore";
import { useAsyncValue } from "react-router-dom";
import { dateFormat, hmsTohm } from "@/lib/time";

type Tprops = {
todayWLs: TwlTableRow[];
};
const MainContent: FC = () => {
const [todayWls] = useAsyncValue() as [TwlTableRow[]];

const setTodayWorklogs = useTodayWLStore((state) => state.setWorklogs);

const MainContent: FC<Tprops> = ({ todayWLs }) => {
const setWorklogs = useTodayWLStore((state) => state.setWorklogs);
const newTodayWLs = todayWls.map((wl: TwlTableRow) => {
return {
...wl,
// convert the date format stored in mysql: yyyy-mm-dd to au: dd-mm-yyyy
// this format is related to date searching in the table
wl_date: dateFormat(wl.wl_date, "au"),
s_time: hmsTohm(wl.s_time as string),
e_time: hmsTohm(wl.e_time as string),
b_time: hmsTohm(wl.b_time as string),
b_hour: hmsTohm(wl.b_hour as string),
};
});

useEffect(() => {
setWorklogs(todayWLs);
}, [todayWLs, setWorklogs]);
setTodayWorklogs(newTodayWLs);

return (
<div className="grid grid-cols-12 gap-x-2">
<div
className={`grid grid-cols-1 w-screen h-[40dvh] sm:w-[50vw] sm:h-[50dvh] lg:w-[30vw] lg:h-[50dvh] gap-y-2 px-2 overflow-y-auto overflow-x-hidden`}
>
<DutyCard worklogs={todayWLs} />
<DutyCard worklogs={newTodayWLs} />
</div>
</div>
);
Expand Down
21 changes: 1 addition & 20 deletions src/pages/dashboard/dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import type { FC } from "react";
import { Suspense, useEffect } from "react";
import { Await, useActionData, useLoaderData } from "react-router-dom";
import SpinningEle from "@/components/loadingEle/SpinningEle";
import { TwlTableRow } from "@/configs/schema/workSchema";
import MTimeTracker from "@/pageComponents/modals/mTimeTracker";
import { RES_STATUS } from "@/configs/types";
import { atModalOpen } from "@/configs/atoms";
import { useAtom } from "jotai";
import { mOpenOps } from "@/configs/utils/modal";
import { toastError, toastSuccess } from "@/lib/toaster";
import { useTranslation } from "react-i18next";
import { dateFormat, hmsTohm } from "@/lib/time";
import ErrorTips from "@/components/ErrorTips";
import MainContent from "./MainContent";

Expand Down Expand Up @@ -50,24 +48,7 @@ const Dashboard: FC = () => {
<div className="mx-2 px-0">
<Suspense fallback={<SpinningEle />}>
<Await resolve={allPromise} errorElement={<ErrorTips />}>
{(result) => {
const [todayWLs] = result;
const today = !todayWLs.data
? []
: todayWLs.data.map((wl: TwlTableRow) => {
return {
...wl,
// convert the date format stored in mysql: yyyy-mm-dd to au: dd-mm-yyyy
// this format is related to date searching in the table
wl_date: dateFormat(wl.wl_date, "au"),
s_time: hmsTohm(wl.s_time as string),
e_time: hmsTohm(wl.e_time as string),
b_time: hmsTohm(wl.b_time as string),
b_hour: hmsTohm(wl.b_hour as string),
};
});
return <MainContent todayWLs={today} />;
}}
<MainContent />
</Await>
</Suspense>

Expand Down
118 changes: 118 additions & 0 deletions src/pages/orders/MainContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import type { FC } from "react";
import { useMemo } from "react";
import Card from "@/components/card";
import { PTable } from "@/components/table";
import SubTable from "./SubTable";
import { useTranslation } from "react-i18next";
import { Torder } from "@/configs/schema/orderSchema";
import { Tunivers } from "@/configs/types";
import { Tcompany } from "@/configs/schema/settingSchema";
import { TstaffWPayslip } from "@/configs/schema/staffSchema";
import { useAtom } from "jotai";
import {
atAllStaff,
atCompany,
atLogo,
atOrder,
atSUData,
} from "@/configs/atoms";
import { useAsyncValue } from "react-router-dom";
import { hmsTohm } from "@/lib/time";
import orderColumns from "@/configs/columnDefs/defOrders";

const MainContent: FC = () => {
const { t } = useTranslation();
const [, setClientOrder] = useAtom(atOrder);
const [, setAllStaff] = useAtom(atAllStaff);
const [, setUniData] = useAtom(atSUData);
const [, setCompany] = useAtom(atCompany);
const [, setLogo] = useAtom(atLogo);

const [orders, staff, uniData, company, logo] = useAsyncValue() as [
Torder[],
TstaffWPayslip[],
Tunivers,
Tcompany,
string,
];

const newOrders = useMemo(() => {
return orders.map((item) => {
return {
...item,
order_services: item.order_services
.sort((a, b) => a.ranking - b.ranking)
.map((desc) => {
return {
...desc,
taxable: Boolean(desc.taxable),
};
}),
work_logs: item.work_logs.map((wl) => {
return {
...wl,
assigned_work: wl.assigned_work.map((aw) => {
return {
...aw,
s_time: hmsTohm(aw.s_time as string),
e_time: hmsTohm(aw.e_time as string),
b_hour: hmsTohm(aw.b_hour as string),
};
}),
};
}),
};
});
}, [orders]);

setAllStaff(staff);
setCompany(company);
setLogo(logo);
setUniData(uniData);

return (
<div className="px-4 sm:px-6 lg:px-8 top-0">
{/* header area */}

{/* table */}
{newOrders ? (
<Card className="mt-8">
<PTable
search={true}
hFilter={true}
data={newOrders}
columns={orderColumns}
menuOptions={{
assign: true,
edit: true,
del: true,
pay: true,
quotation: true,
invoice: true,
}}
setData={setClientOrder}
getRowCanExpand={(row) => {
if (row.original.order_services.length > 0) {
return true;
}
return false;
}}
expandContent={SubTable}
cnSearch="my-3"
cnTable={`h-[70dvh]`}
cnHead="sticky z-10 bg-indigo-300"
cnTh="py-3"
/>
</Card>
) : (
<Card className="mt-8">
<span className="m-5 p-5 text-center h-15">
{t("label.noContent")}
</span>
</Card>
)}
</div>
);
};

export default MainContent;
Loading

0 comments on commit 8d4d706

Please sign in to comment.