Merge pull request #156 from kimthu09/anhthu

fix: loading
kimthu09 · Jan 16, 2024 · b378b25 · b378b25
2 parents c152449 + 3bf09db
commit b378b25
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 20 deletions.
diff --git a/frontend/app/supplier/[supplierId]/detail-layout.tsx b/frontend/app/supplier/[supplierId]/detail-layout.tsx
@@ -15,7 +15,6 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import getSupplier from "@/lib/supplier/getSupplier";
-import Loading from "@/components/loading";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -29,6 +28,8 @@ import { useCurrentUser } from "@/hooks/use-user";
 import { includesRoles } from "@/lib/utils";
 import NoRole from "@/components/no-role";
 import { useLoading } from "@/hooks/loading-context";
+import { Skeleton } from "@/components/ui/skeleton";
+import DropdownSkeleton from "@/components/skeleton/dropdown-skeleton";
 const FormSchema = z.object({
   quantity: z.coerce.number().gte(1, "Giá trị phải lớn hơn 0"), // Force it to be a number
 });
@@ -87,7 +88,66 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
   const { currentUser } = useCurrentUser();
   if (isError) return <div>Failed to load</div>;
   else if (isLoading) {
-    return <Loading />;
+    return (
+      <div className="col items-center">
+        <div className="col xl:w-4/5 w-full xl:px-0 md:px-8 px-0">
+          <div className="flex justify-between">
+            <Skeleton className="h-10 w-20" />
+            <Skeleton className="h-10 w-28" />
+          </div>
+
+          <Card>
+            <CardContent className="p-6 flex flex-col gap-4">
+              <div className="flex gap-4 lg:flex-row flex-col">
+                <div className="flex-1">
+                  <DropdownSkeleton />
+                </div>
+                <div className="flex-1">
+                  <DropdownSkeleton />
+                </div>
+              </div>
+              <div className="flex gap-4 lg:flex-row flex-col">
+                <div className="flex-1">
+                  <DropdownSkeleton />
+                </div>
+                <div className="flex-1">
+                  <DropdownSkeleton />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6 flex flex-col gap-4 relative">
+              <Tabs
+                defaultValue={tab}
+                onValueChange={onTabChange}
+                className="flex flex-col gap-4"
+              >
+                <TabsList className="inline-flex w-full  h-9 items-center text-muted-foreground justify-start rounded-none bg-transparent p-0">
+                  <TabsTrigger className="tab___trigger" value="import">
+                    Lịch sử nhập hàng
+                  </TabsTrigger>
+                  <TabsTrigger className="tab___trigger" value="debt">
+                    Công nợ
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="import">
+                  <ImportTable supplierId={params.supplierId}></ImportTable>
+                </TabsContent>
+                <TabsContent value="debt">
+                  <DebtTable
+                    supplierId={params.supplierId}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                  />
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
   } else
     return (
       <div className="col items-center">

diff --git a/frontend/components/book-manage/create-title-dialog.tsx b/frontend/components/book-manage/create-title-dialog.tsx
@@ -24,6 +24,7 @@ import { FaPlus } from "react-icons/fa";
 import getAllAuthorList from "@/lib/book/getAllAuthorList";
 import getAllCategoryList from "@/lib/book/getAllCategoryList";
 import { useLoading } from "@/hooks/loading-context";
+import DropdownSkeleton from "../skeleton/dropdown-skeleton";
 
 const FormSchema = z.object({
   idBook: z.string().max(12, "Tối đa 12 ký tự"),
@@ -132,7 +133,7 @@ const CreateTitleDialog = ({
         <DialogTrigger asChild>{children}</DialogTrigger>
         {!categories || !authors ? (
           <DialogContent>
-            <Loading />
+            <DropdownSkeleton />
           </DialogContent>
         ) : (
           <DialogContent className="p-0 bg-white">

diff --git a/frontend/components/book-manage/table.tsx b/frontend/components/book-manage/table.tsx
@@ -69,10 +69,9 @@ import changeBookStatus from "@/lib/book/changeBookStatus";
 import { FaPen } from "react-icons/fa";
 import Link from "next/link";
 import { useCurrentUser } from "@/hooks/use-user";
-import Loading from "../loading";
 import { includesRoles } from "@/lib/utils";
-import NoRole from "../no-role";
 import { useLoading } from "@/hooks/loading-context";
+import TableSkeleton from "../skeleton/table-skeleton";
 
 const columns: ColumnDef<Book>[] = [
   {
@@ -415,7 +414,40 @@ export function BookTable({
   };
   const { currentUser } = useCurrentUser();
   if (!currentUser) {
-    return <Loading></Loading>;
+    return (
+      <TableSkeleton
+        isHasExtensionAction={true}
+        isHasFilter={true}
+        isHasSearch={true}
+        isHasChooseVisibleRow={true}
+        isHasCheckBox={true}
+        isHasPaging={true}
+        numberRow={5}
+        cells={[
+          {
+            percent: 1,
+          },
+          {
+            percent: 5,
+          },
+          {
+            percent: 1,
+          },
+          {
+            percent: 1,
+          },
+          {
+            percent: 1,
+          },
+          {
+            percent: 1,
+          },
+          {
+            percent: 1,
+          },
+        ]}
+      />
+    );
   } else
     return (
       <div className="w-full">

diff --git a/frontend/components/skeleton/create-title-skeleton.tsx b/frontend/components/skeleton/create-title-skeleton.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import DropdownSkeleton from "./dropdown-skeleton";
+
+const CreateTitleSkeleton = () => {
+  return (
+    <div className="col items-center px-6">
+      <div className="w-full py-6 pt-0">
+        <div className="flex flex-col gap-4">
+          <div className="flex-col flex gap-5">
+            <div className="basis-1/3">
+              <DropdownSkeleton />
+            </div>
+            <div className="flex-1">
+              <DropdownSkeleton />
+            </div>
+
+            <DropdownSkeleton />
+            <DropdownSkeleton />
+
+            <div className="flex-1">
+              <DropdownSkeleton />
+            </div>
+          </div>
+          <div className="flex gap-4 py-4  justify-end">
+            <DropdownSkeleton />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTitleSkeleton;
diff --git a/frontend/components/stock-manage/book-insert.tsx b/frontend/components/stock-manage/book-insert.tsx
@@ -16,12 +16,10 @@ import { z } from "zod";
 import { FormSchema } from "@/app/stockmanage/import/add/page";
 import { BookProps } from "@/types";
 import { toVND } from "@/lib/utils";
-import { toast } from "../ui/use-toast";
-import Loading from "../loading";
-import { getApiKey } from "@/lib/auth/action";
+
 import { AutoComplete } from "../ui/autocomplete";
-import getAllBookList from "@/lib/book/getAllBookList";
 import getAllBookForSale from "@/lib/book/getAllBookForSale";
+import DropdownSkeleton from "../skeleton/dropdown-skeleton";
 const Total = ({
   control,
 }: {
@@ -92,7 +90,7 @@ const BookInsert = ({
   if (isError) {
     return "Failed to fetch";
   } else if (isLoading || !data) {
-    return <Loading />;
+    return <DropdownSkeleton />;
   } else {
     return (
       <div className="flex flex-col">

diff --git a/frontend/components/stock-manage/check-insert.tsx b/frontend/components/stock-manage/check-insert.tsx
@@ -11,17 +11,12 @@ import {
 
 import { AiOutlineClose } from "react-icons/ai";
 import { CiBoxes } from "react-icons/ci";
-import { IoMdInformationCircleOutline } from "react-icons/io";
 import { z } from "zod";
 import { BookProps } from "@/types";
-import { toVND } from "@/lib/utils";
-import { toast } from "../ui/use-toast";
-import Loading from "../loading";
-import { getApiKey } from "@/lib/auth/action";
 import { AutoComplete } from "../ui/autocomplete";
-import getAllBookList from "@/lib/book/getAllBookList";
 import getAllBookForSale from "@/lib/book/getAllBookForSale";
 import { FormSchema } from "@/app/stockmanage/check/add/page";
+import DropdownSkeleton from "../skeleton/dropdown-skeleton";
 
 const Final = ({
   control,
@@ -75,7 +70,7 @@ const CheckInsert = ({
   if (isError) {
     return "Failed to fetch";
   } else if (isLoading || !data) {
-    return <Loading />;
+    return <DropdownSkeleton />;
   } else {
     return (
       <div className="flex flex-col">

diff --git a/frontend/components/supplier-manage/debt-table.tsx b/frontend/components/supplier-manage/debt-table.tsx
@@ -246,7 +246,7 @@ export function DebtTable({
         isHasChooseVisibleRow={false}
         isHasCheckBox={false}
         isHasPaging={true}
-        numberRow={5}
+        numberRow={4}
         cells={[
           {
             percent: 1,

diff --git a/frontend/components/supplier-manage/import-table.tsx b/frontend/components/supplier-manage/import-table.tsx
@@ -222,7 +222,7 @@ export function ImportTable({ supplierId }: { supplierId: string }) {
         isHasChooseVisibleRow={false}
         isHasCheckBox={false}
         isHasPaging={true}
-        numberRow={5}
+        numberRow={4}
         cells={[
           {
             percent: 1,