update: add some skeleton loading

kimthu09 · Jan 14, 2024 · 906e026 · 906e026
1 parent 1882857
commit 906e026
Show file tree

Hide file tree

Showing 36 changed files with 930 additions and 145 deletions.
diff --git a/backend/module/supplier/suppliermodel/req_create_supplier.go b/backend/module/supplier/suppliermodel/req_create_supplier.go
@@ -27,7 +27,7 @@ func (data *ReqCreateSupplier) Validate() *common.AppError {
 	if !common.ValidatePhone(data.Phone) {
 		return ErrSupplierPhoneInvalid
 	}
-	if common.ValidateNotPositiveNumber(data.Debt) {
+	if common.ValidateNegativeNumber(data.Debt) {
 		return ErrSupplierInitDebtInvalid
 	}
 	return nil

diff --git a/frontend/app/setting/detail-layout.tsx b/frontend/app/setting/detail-layout.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
 import { phoneRegex, required } from "@/constants";
 import { useLoading } from "@/hooks/loading-context";
@@ -13,6 +14,7 @@ import { useCurrentUser } from "@/hooks/use-user";
 import updateShop from "@/lib/shop-general/updateShop";
 import { isAdmin } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+
 import { useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -101,7 +103,45 @@ const DetailLayout = () => {
     handleReset();
   }, [shop]);
   if (!shop) {
-    return <Loading />;
+    return (
+      <div className="col items-center">
+        <div className="col xl:w-3/5 w-full xl:px-0 md:px-8 px-0">
+          <div className="flex justify-between">
+            <h1 className="xl:text-3xl text-2xl">Thiết lập cửa hàng</h1>
+          </div>
+          <Card>
+            <CardContent className="p-6 flex flex-col gap-4">
+              <div className="flex gap-4  flex-col">
+                <div className="flex gap-4 lg:flex-row flex-col">
+                  <div className="basis-2/3">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                  <div className="basis-1/3">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                </div>
+                <div className="flex gap-4 lg:flex-row flex-col">
+                  <div className="basis-2/3">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                  <div className="basis-1/3">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                </div>
+                <div className="flex gap-4 lg:flex-row flex-col">
+                  <div className="basis-1/2">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                  <div className="basis-1/2">
+                    <Skeleton className="h-6 w-full" />
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
   } else
     return (
       <div className="col items-center">

diff --git a/frontend/app/staff/role/add/page.tsx b/frontend/app/staff/role/add/page.tsx
@@ -143,7 +143,27 @@ const AddRole = () => {
             <Card>
               <CardContent className="p-6">
                 {!roleFunctions ? (
-                  <Loading />
+                  <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 flex-row justify-between">
+                        <h1 className="font-medium text-xxl self-start flex-1">
+                          Chi tiết phân quyền
+                        </h1>
+                      </div>
+                      <div className="flex flex-col gap-4">
+                        <Card>
+                          <CardContent className="p-6">
+                            <DropdownSkeleton />
+                          </CardContent>
+                        </Card>
+                        <Card>
+                          <CardContent className="p-6">
+                            <FeatureSkeleton />
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </div>
                 ) : (
                   <div className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-2 grid-cols-1 gap-y-6 gap-x-4">
                     {Array.from(

diff --git a/frontend/app/stockmanage/check/[checkId]/page.tsx b/frontend/app/stockmanage/check/[checkId]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import Loading from "@/components/loading";
 import NoRole from "@/components/no-role";
+import InventoryCheckNoteDetailSkeleton from "@/components/skeleton/inventory-check-note-detail-skeleton";
 import { CheckDetailTable } from "@/components/stock-manage/check-detail-table";
 import {
   ExportCheckNoteDetail,
@@ -20,7 +21,7 @@ const CheckDetail = ({ params }: { params: { checkId: string } }) => {
   const { currentUser } = useCurrentUser();
   if (isError) return <div>Failed to load</div>;
   else if (!currentUser || isLoading) {
-    return <Loading />;
+    return <InventoryCheckNoteDetailSkeleton />;
   } else if (
     currentUser &&
     !includesRoles({
@@ -35,7 +36,7 @@ const CheckDetail = ({ params }: { params: { checkId: string } }) => {
         <div className="shadow-sm bg-white flex flex-col gap-6 md:px-8 px-4 pb-6">
           <div className="flex justify-between gap-6 font-bold text-lg border-b flex-1 py-2 pt-6">
             <div className="flex gap-4">
-              <span className="font-light">Mã phiếu nhập</span>
+              <span className="font-light">Mã phiếu kiểm kho</span>
               <span>{data.id}</span>
             </div>
             <div className="flex gap-2 flex-nowrap">

diff --git a/frontend/app/stockmanage/check/add/page.tsx b/frontend/app/stockmanage/check/add/page.tsx
@@ -22,6 +22,7 @@ import NoRole from "@/components/no-role";
 import ImportSheet from "@/components/book-manage/import-sheet";
 import getAllBookForSale from "@/lib/book/getAllBookForSale";
 import { useLoading } from "@/hooks/loading-context";
+import ImportNoteAddSkeleton from "@/components/skeleton/import-note-add-skeleton";
 
 export const FormSchema = z.object({
   id: z.string().max(12, "Tối đa 12 ký tự"),
@@ -167,7 +168,7 @@ const AddNote = () => {
   };
   const { currentUser } = useCurrentUser();
   if (!currentUser) {
-    return <Loading />;
+    return <ImportNoteAddSkeleton />;
   } else if (
     currentUser &&
     !includesRoles({

diff --git a/frontend/app/stockmanage/import/[importId]/page.tsx b/frontend/app/stockmanage/import/[importId]/page.tsx
@@ -2,6 +2,7 @@
 import ConfirmDialog from "@/components/confirm-dialog";
 import Loading from "@/components/loading";
 import NoRole from "@/components/no-role";
+import ImportNoteDetailSkeleton from "@/components/skeleton/import-note-detail-skeleton";
 import { ExportImportNoteDetail } from "@/components/stock-manage/excel-import-detail";
 import { ImportDetailTable } from "@/components/stock-manage/import-detail-table";
 import { Button } from "@/components/ui/button";
@@ -56,7 +57,7 @@ const ImportDetail = ({ params }: { params: { importId: string } }) => {
     });
   if (isError) return <div>Failed to load</div>;
   else if (!currentUser || isLoading) {
-    return <Loading />;
+    return <ImportNoteDetailSkeleton/>;
   } else if (
     currentUser &&
     !includesRoles({

diff --git a/frontend/app/stockmanage/import/add/page.tsx b/frontend/app/stockmanage/import/add/page.tsx
@@ -24,6 +24,7 @@ import NoRole from "@/components/no-role";
 import ImportSheet from "@/components/book-manage/import-sheet";
 import getAllBookForSale from "@/lib/book/getAllBookForSale";
 import { useLoading } from "@/hooks/loading-context";
+import InventoryCheckNoteAddSkeleton from "@/components/skeleton/inventory-check-note-add-skeleton";
 
 export const FormSchema = z.object({
   id: z.string().max(12, "Tối đa 12 ký tự"),
@@ -127,7 +128,7 @@ const AddNote = () => {
 
   const { currentUser } = useCurrentUser();
   if (!currentUser) {
-    return <Loading />;
+    return <InventoryCheckNoteAddSkeleton />;
   } else if (
     currentUser &&
     !includesRoles({

diff --git a/frontend/components/book-manage/author-table.tsx b/frontend/components/book-manage/author-table.tsx
@@ -38,6 +38,7 @@ import { FaPen } from "react-icons/fa";
 import { useSWRConfig } from "swr";
 import { endPoint } from "@/constants";
 import { includesRoles } from "@/lib/utils";
+import TableSkeleton from "../skeleton/table-skeleton";
 
 export const columns: ColumnDef<Author>[] = [
   {
@@ -125,7 +126,25 @@ export function AuthorTable({
   };
   if (isError) return <div>Failed to load</div>;
   if (isLoading) {
-    return <Loading />;
+    return (
+      <TableSkeleton
+        isHasExtensionAction={false}
+        isHasFilter={false}
+        isHasSearch={true}
+        isHasChooseVisibleRow={false}
+        isHasCheckBox={false}
+        isHasPaging={true}
+        numberRow={5}
+        cells={[
+          {
+            percent: 5,
+          },
+          {
+            percent: 1,
+          },
+        ]}
+      ></TableSkeleton>
+    );
   } else
     return (
       <div className="w-full">

diff --git a/frontend/components/book-manage/category-list.tsx b/frontend/components/book-manage/category-list.tsx
@@ -22,6 +22,7 @@ import CreateCategory from "./create-category";
 import { FaPlus } from "react-icons/fa";
 import { useCurrentUser } from "@/hooks/use-user";
 import getAllCategoryList from "@/lib/book/getAllCategoryList";
+import ListSkeleton from "../skeleton/list_skeleton";
 
 const CategoryList = ({
   checkedCategory,
@@ -40,7 +41,7 @@ const CategoryList = ({
   const { currentUser } = useCurrentUser();
   if (isError) return <div>Failed to load</div>;
   if (isLoading) {
-    return <Loading />;
+    return <ListSkeleton numberRow={5} />;
   } else
     return (
       <div className="flex flex-col">

diff --git a/frontend/components/book-manage/category-table.tsx b/frontend/components/book-manage/category-table.tsx
@@ -38,6 +38,7 @@ import EditCategory from "./edit-category";
 import { useSWRConfig } from "swr";
 import { endPoint } from "@/constants";
 import { includesRoles } from "@/lib/utils";
+import TableSkeleton from "../skeleton/table-skeleton";
 
 export const columns: ColumnDef<Category>[] = [
   {
@@ -120,7 +121,25 @@ export function CategoryTable({
   };
   if (isError) return <div>Failed to load</div>;
   if (isLoading) {
-    return <Loading />;
+    return (
+      <TableSkeleton
+        isHasExtensionAction={false}
+        isHasFilter={false}
+        isHasSearch={true}
+        isHasChooseVisibleRow={false}
+        isHasCheckBox={false}
+        isHasPaging={true}
+        numberRow={5}
+        cells={[
+          {
+            percent: 5,
+          },
+          {
+            percent: 1,
+          },
+        ]}
+      ></TableSkeleton>
+    );
   } else
     return (
       <div className="w-full">

diff --git a/frontend/components/book-manage/publisher-list.tsx b/frontend/components/book-manage/publisher-list.tsx
@@ -20,6 +20,7 @@ import CreatePublisher from "./create-publisher";
 import { FaPlus } from "react-icons/fa";
 import getAllPublisherList from "@/lib/book/getAllPublisherList";
 import { useCurrentUser } from "@/hooks/use-user";
+import ListSkeleton from "../skeleton/list_skeleton";
 
 const PublisherList = ({
   publisherId,
@@ -37,7 +38,7 @@ const PublisherList = ({
 
   if (isError) return <div>Failed to load</div>;
   if (!publishers) {
-    <Loading />;
+    <ListSkeleton numberRow={5} />;
   } else
     return (
       <div className="flex gap-1">

diff --git a/frontend/components/book-manage/publisher-table.tsx b/frontend/components/book-manage/publisher-table.tsx
@@ -38,6 +38,7 @@ import { FaPen } from "react-icons/fa";
 import { useSWRConfig } from "swr";
 import { endPoint } from "@/constants";
 import { includesRoles } from "@/lib/utils";
+import TableSkeleton from "../skeleton/table-skeleton";
 
 export const columns: ColumnDef<Publisher>[] = [
   {
@@ -121,7 +122,25 @@ export function PublisherTable({
   };
   if (isError) return <div>Failed to load</div>;
   if (isLoading) {
-    return <Loading />;
+    return (
+      <TableSkeleton
+        isHasExtensionAction={false}
+        isHasFilter={false}
+        isHasSearch={true}
+        isHasChooseVisibleRow={false}
+        isHasCheckBox={false}
+        isHasPaging={true}
+        numberRow={5}
+        cells={[
+          {
+            percent: 5,
+          },
+          {
+            percent: 1,
+          },
+        ]}
+      ></TableSkeleton>
+    );
   } else
     return (
       <div className="w-full">

diff --git a/frontend/components/book-manage/title-table.tsx b/frontend/components/book-manage/title-table.tsx
@@ -55,6 +55,7 @@ import { getFilterString } from "@/app/product/title/table-layout";
 import TitleEditInline from "./title-edit-inline";
 import { includesRoles } from "@/lib/utils";
 import { useCurrentUser } from "@/hooks/use-user";
+import TableSkeleton from "../skeleton/table-skeleton";
 
 export const columns: ColumnDef<BookTitle>[] = [
   {
@@ -173,7 +174,28 @@ export function TitleTable() {
 
   if (isError) return <div>Failed to load</div>;
   else if (isLoading) {
-    return <Loading />;
+    return (
+      <TableSkeleton
+        isHasExtensionAction={false}
+        isHasFilter={true}
+        isHasSearch={true}
+        isHasChooseVisibleRow={false}
+        isHasCheckBox={false}
+        isHasPaging={true}
+        numberRow={5}
+        cells={[
+          {
+            percent: 1,
+          },
+          {
+            percent: 5,
+          },
+          {
+            percent: 1,
+          },
+        ]}
+      ></TableSkeleton>
+    );
   } else {
     return (
       <div className="flex flex-col">
@@ -205,7 +227,7 @@ export function TitleTable() {
                   >
                     <div className="space-y-2">
                       <p className="text-sm text-muted-foreground">
-                        Hiển thị phiếu nhập theo
+                        Hiển thị đầu sách theo
                       </p>
                     </div>
                     <div className="flex flex-col gap-4">