fix: unit list preset and table menu

BigSillyTiger · Nov 23, 2024 · 6a2aac8 · 6a2aac8
1 parent 5560be2
commit 6a2aac8
Show file tree

Hide file tree

Showing 31 changed files with 310 additions and 228 deletions.
diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -2,8 +2,13 @@ import axios from "axios";
 
 const apis = axios.create({
     withCredentials: true,
+    baseURL:
+        window.location.hostname !== "localhost"
+            ? `https://tool.srclandscaping.com.au`
+            : `http://localhost:8080`,
+    timeout: 40000, // 40 seconds
     //baseURL: `http://localhost:8080`,
-    baseURL: `https://tool.srclandscaping.com.au`,
+    //baseURL: `https://tool.srclandscaping.com.au`,
 });
 
 export default apis;
diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx
@@ -42,7 +42,9 @@ const ComboBox = <T,>({
                     <Combobox.Input
                         className="outline-none h-9 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-2"
                         displayValue={(option: T) => String(option[opKey])}
-                        onChange={(event) => setQuery(event.target.value)}
+                        onChange={(event) => {
+                            setQuery(event.target.value);
+                        }}
                     />
                     <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
                         <ChevronUpDownIcon

diff --git a/src/components/EmptyTips.tsx b/src/components/EmptyTips.tsx
@@ -0,0 +1,13 @@
+import type { FC, ComponentPropsWithoutRef } from "react";
+
+type Tprops = ComponentPropsWithoutRef<"div">;
+
+const EmptyTips: FC<Tprops> = ({ children }) => {
+    return (
+        <div className="text-slate-500 text-xl font-medium text-center">
+            {children}
+        </div>
+    );
+};
+
+export default EmptyTips;
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
@@ -0,0 +1,13 @@
+import type { FC, ComponentPropsWithoutRef } from "react";
+
+type Tprops = ComponentPropsWithoutRef<"div">;
+
+const PageWrapper: FC<Tprops> = ({ children, className }) => {
+    return (
+        <div className={`cps-container border-0 py-2 ${className}`}>
+            {children}
+        </div>
+    );
+};
+
+export default PageWrapper;
diff --git a/src/components/table/CTHead.tsx b/src/components/table/CTHead.tsx
@@ -33,7 +33,9 @@ const CTHead = <T extends object>({
                         )}
                         {sortingIcon(header.column.getIsSorted())}
                     </button>
-                    {hFilter && header.column.getCanFilter() ? (
+                    {hFilter &&
+                    header.column.getCanFilter() &&
+                    !header.id.toLocaleLowerCase().includes("index") ? (
                         <div className="mr-3">
                             <HeaderFilterFaceted column={header.column} />
                         </div>

diff --git a/src/components/table/DefaultTable.tsx b/src/components/table/DefaultTable.tsx
@@ -197,10 +197,10 @@ const PTable = <T extends object>({
                       )}
               </Fragment>
           ))
-        : "";
+        : null;
 
     return (
-        <div className="container flex flex-col">
+        <div className="flex flex-col">
             <div className="flex flex-col sm:flex-row my-2 gap-y-2">
                 {/* search bar */}
 

diff --git a/src/components/table/HeaderFilter/HeaderFilterFaceted.tsx b/src/components/table/HeaderFilter/HeaderFilterFaceted.tsx
@@ -31,7 +31,7 @@ const HeaderFilterFaceted = <T extends object>({ column }: Tprops<T>) => {
         case "select":
             return <SelectFilter column={column} values={sortedUniqueValues} />;
 
-        // text(fuzzy) search
+        // text(fuzzy) search by default
         default:
             return (
                 <TextFilter

diff --git a/src/components/table/tableBtn/MenuBtn.tsx b/src/components/table/tableBtn/MenuBtn.tsx
@@ -62,11 +62,8 @@ const MenuBtn = <T,>({
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className="outline-none ring-0 cursor-pointer">
-                <EllipsisVerticalIcon
-                    className="size-8 text-indigo-500"
-                    aria-hidden="true"
-                />
+            <DropdownMenuTrigger className="outline-none ring-0 cursor-pointer text-indigo-500 hover:text-slate-50 hover:bg-indigo-400 p-1 rounded transition-all duration-300">
+                <EllipsisVerticalIcon className="size-8" aria-hidden="true" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>{menuContent}</DropdownMenuContent>
         </DropdownMenu>

diff --git a/src/configs/columnDefs/defUniList.tsx b/src/configs/columnDefs/defUniList.tsx
@@ -10,6 +10,7 @@ export const serviceListColDefs = [
         },
     },
     {
+        id: "id_index",
         header: i18n.t("label.id"),
         accessorKey: "id",
         cell: (info: Cell<{ id: number }, number>) => {
@@ -51,6 +52,7 @@ export const unitListColDefs = [
         },
     },
     {
+        id: "id_index",
         header: i18n.t("label.id"),
         accessorKey: "id",
         cell: (info: Cell<{ id: number }, number>) => {

diff --git a/src/configs/utils/modal.ts b/src/configs/utils/modal.ts
@@ -14,6 +14,11 @@ export const mOpenOps = {
     invoice: "Invoice",
     quotation: "Quotation",
     assign: "JobAssign",
+    // for preset unit / service
+    addPS: "AddPS",
+    editPS: "EditPS",
+    addPU: "AddPU",
+    editPU: "EditPU",
 };
 
 /**

diff --git a/src/index.css b/src/index.css
@@ -106,3 +106,8 @@
         margin: 0;
     }
 }
+
+.cps-container {
+    @apply mx-1;
+    @apply h-full;
+}
diff --git a/src/pageComponents/layout/MainLayout.tsx b/src/pageComponents/layout/MainLayout.tsx
@@ -53,7 +53,7 @@ const MainLayout = () => {
 
             {/* view area */}
             <main
-                className={`relative py-5 w-screen left-0 lg:left-[5dvw] lg:w-[95dvw] h-[93dvh] overflow-y-auto`}
+                className={`relative w-screen left-0 lg:left-[5dvw] lg:w-[95dvw] h-[93dvh] overflow-y-auto`}
             >
                 <Outlet />
             </main>

diff --git a/src/pageComponents/modals/mOrderForm/Form/AppendNewService.tsx b/src/pageComponents/modals/mOrderForm/Form/AppendNewService.tsx
@@ -36,6 +36,8 @@ const AppendNewService: FC<Tprops> = ({ append }) => {
             } as Partial<Tservice>;
         }
 
+        console.log("-------> input service value: ", service);
+
         setServiceDesc({
             ranking: 0,
             fk_oid: clientOrder.oid,

diff --git a/src/pageComponents/modals/mUniForm.tsx b/src/pageComponents/modals/mUniForm.tsx
@@ -47,6 +47,17 @@ const MUniForm: FC<Tprops> = memo(({ unitList, serviceList }) => {
         trigger,
     } = useForm<Tservice | Tunit>({ resolver: zodResolver(schema) });
 
+    const UnitList = () => (
+        <datalist id="unit_list">
+            {unitList?.length &&
+                unitList.map((item) => (
+                    <option key={item.id} value={item.unit_name}>
+                        {item.unit_name}
+                    </option>
+                ))}
+        </datalist>
+    );
+
     useEffect(() => {
         if (isServiceType(uniData)) {
             setService(uniData.service);
@@ -150,13 +161,15 @@ const MUniForm: FC<Tprops> = memo(({ unitList, serviceList }) => {
                                 name="unit"
                                 id="unit"
                                 required
+                                list="unit_list"
                                 className="outline-none h-9 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-2"
                                 value={unit}
                                 onChange={(e) => {
                                     e.preventDefault();
                                     setUnit(e.target.value);
                                 }}
                             />
+                            <UnitList />
                         </div>
                     </div>
                     <div className="sm:col-span-3">

diff --git a/src/pages/client/Client.tsx b/src/pages/client/Client.tsx
@@ -16,6 +16,7 @@ import { mOpenOps } from "@/configs/utils/modal";
 import { MpdfMaker } from "@/pageComponents/modals";
 import ErrorTips from "@/components/ErrorTips";
 import MainContent from "./MainContent";
+import PageWrapper from "@/components/PageWrapper";
 
 const Client: FC = () => {
     const { t } = useTranslation();
@@ -76,13 +77,13 @@ const Client: FC = () => {
 
     return (
         <>
-            <div className="container border-0">
+            <PageWrapper>
                 <Suspense fallback={<LoadingPage />}>
                     <Await resolve={allPromise} errorElement={<ErrorTips />}>
                         <MainContent />
                     </Await>
                 </Suspense>
-            </div>
+            </PageWrapper>
 
             <MOrderDel />
             <MOrderForm />

diff --git a/src/pages/client/MainContent.tsx b/src/pages/client/MainContent.tsx
@@ -131,7 +131,10 @@ const MainContent: FC = () => {
     }, [client[0], clientOrder, uniData, company, logo]);
 
     return (
-        <div className="px-4 sm:px-6 lg:px-8 top-0 flex flex-col gap-y-4">
+        <div
+            className="w-full h-full px-4 sm:px-6 lg:px-8 top-0 
+            flex flex-col gap-3"
+        >
             <div className="flex flex-col sm:flex-row gap-x-4 w-full justify-evenly">
                 <ClientInfoCard
                     client={client[0]}
@@ -153,7 +156,7 @@ const MainContent: FC = () => {
                     {t("btn.newOrder")}
                 </Nbtn>
             </div>
-            <Card className="col-span-6">
+            <Card className="grow">
                 {/* order table */}
                 {newOrders.length > 0 ? (
                     <PTable
@@ -176,7 +179,7 @@ const MainContent: FC = () => {
                         }}
                         expandContent={SubTable}
                         cnSearch="my-3"
-                        cnTable={`h-[55dvh]`}
+                        cnTable={`h-full`}
                         cnHead="sticky z-10 bg-indigo-300"
                         cnTh="py-3"
                     />

diff --git a/src/pages/clients/Clients.tsx b/src/pages/clients/Clients.tsx
@@ -12,6 +12,7 @@ import { RES_STATUS } from "@/configs/types";
 import MainContent from "./MainContent";
 import ErrorTips from "@/components/ErrorTips";
 import { mOpenOps } from "@/configs/utils/modal";
+import PageWrapper from "@/components/PageWrapper";
 
 const Clients: FC = () => {
     const { allPromise } = useLoaderData() as {
@@ -70,21 +71,23 @@ const Clients: FC = () => {
     }, [actionData, client.cid, setClient, setInfoConflict, setModalOpen, t]);
 
     return (
-        <div className="container border-0">
-            <Suspense fallback={<LoadingPage />}>
-                <Await resolve={allPromise} errorElement={<ErrorTips />}>
-                    {(result) => {
-                        const [clientList] = result;
-                        return <MainContent clients={clientList.data} />;
-                    }}
-                </Await>
-            </Suspense>
+        <>
+            <PageWrapper>
+                <Suspense fallback={<LoadingPage />}>
+                    <Await resolve={allPromise} errorElement={<ErrorTips />}>
+                        {(result) => {
+                            const [clientList] = result;
+                            return <MainContent clients={clientList.data} />;
+                        }}
+                    </Await>
+                </Suspense>
+            </PageWrapper>
 
             {/* Modal for add new client, and this modal can not be insert into Await*/}
             {/* otherwise, the animation would get lost*/}
             <MClientDel />
             <MClientForm />
-        </div>
+        </>
     );
 };
 

diff --git a/src/pages/clients/MainContent.tsx b/src/pages/clients/MainContent.tsx
@@ -8,6 +8,7 @@ import { useAtom } from "jotai";
 import { RESET } from "jotai/utils";
 import useClientColumnsDef from "@/configs/columnDefs/defClients";
 import { Nbtn } from "@/components/btns";
+import EmptyTips from "@/components/EmptyTips";
 
 type Tprops = {
     clients: Tclient[] | null;
@@ -26,44 +27,42 @@ const MainContent: FC<Tprops> = ({ clients }) => {
     };
 
     return (
-        <>
-            <div className="px-4 sm:px-6 lg:px-8 top-0">
-                {/* header area */}
-                <div className="flex justify-end">
-                    <Nbtn
-                        type="button"
-                        className="w-full sm:w-[25dvw] md:w-[30dvw] text-wrap"
-                        onClick={handleAddNew}
-                    >
-                        {t("btn.addClient")}
-                    </Nbtn>
-                </div>
+        <div
+            className="w-full h-full px-4 sm:px-6 lg:px-8 top-0 
+            flex flex-col gap-3"
+        >
+            {/* header area */}
+            <div className="flex justify-end">
+                <Nbtn
+                    type="button"
+                    className="w-full sm:w-[25dvw] md:w-[30dvw] text-wrap"
+                    onClick={handleAddNew}
+                >
+                    {t("btn.addClient")}
+                </Nbtn>
+            </div>
+
+            {/* table */}
 
-                {/* table */}
+            <Card className="grow">
                 {clients && clients.length ? (
-                    <Card className="mt-8">
-                        <PTable
-                            search={true}
-                            hFilter={true}
-                            data={clients}
-                            columns={clientColumns}
-                            menuOptions={{ edit: true, del: true }}
-                            setData={setClient}
-                            cnSearch="my-3"
-                            cnTable={`h-[65dvh]`}
-                            cnHead="sticky z-10 bg-indigo-300"
-                            cnTh="py-3"
-                        />
-                    </Card>
+                    <PTable
+                        search={true}
+                        hFilter={true}
+                        data={clients}
+                        columns={clientColumns}
+                        menuOptions={{ edit: true, del: true }}
+                        setData={setClient}
+                        cnSearch="my-3"
+                        cnTable={`h-[65dvh]`}
+                        cnHead="sticky z-10 bg-indigo-300"
+                        cnTh="py-3"
+                    />
                 ) : (
-                    <Card className="mt-8">
-                        <span className="m-5 p-5  text-center h-15">
-                            {t("tips.noClient")}
-                        </span>
-                    </Card>
+                    <EmptyTips>{t("tips.noClient")}</EmptyTips>
                 )}
-            </div>
-        </>
+            </Card>
+        </div>
     );
 };
 

diff --git a/src/pages/dashboard/MainContent.tsx b/src/pages/dashboard/MainContent.tsx
@@ -61,19 +61,21 @@ const MainContent: FC = () => {
     }, [newTodayWLs]);
 
     return (
-        <div className="flex flex-col gap-4 px-4 sm:px-6 lg:px-8 top-0">
-            <div className="h-screen lg:h-[45dvh] flex flex-col md:flex-row px-2 gap-4">
+        <div
+            className="w-full h-full px-4 sm:px-6 lg:px-8 top-0 
+            flex flex-col gap-3"
+        >
+            <div className="h-screen lg:h-[41dvh] flex flex-col md:flex-row px-2 gap-4">
                 <DutyCard
                     worklogs={newTodayWLs}
-                    className={
-                        "h-[100dvh] lg:h-[45dvh] md:w-full lg:w-[40dvw] xl:w-[30dvw]"
-                    }
+                    className={`h-full 
+                        w-full lg:w-[40dvw] xl:w-[30dvw]`}
                 />
 
-                <OrderArrangement className="h-[100dvh] lg:h-[45dvh] md:w-full " />
+                <OrderArrangement className="h-full w-full " />
             </div>
             {currentAdmin.role === ROLES.manager && (
-                <div className="px-2">
+                <div className="px-2 grow">
                     <ChartCard />
                 </div>
             )}