From 93e7c3b206f03017fba868a83af4e7cd10e717e7 Mon Sep 17 00:00:00 2001 From: Alihaghighattalab Date: Sun, 18 Aug 2024 13:40:45 +0330 Subject: [PATCH] complete loading table - design pagination - --- src/components/common/loading.tsx | 16 ++++++++++++ src/components/common/table.tsx | 26 +++++++++++++------ src/components/installation-reports/index.tsx | 5 ++-- .../bank-card-skeleton.tsx | 9 +++++++ .../management-bank-accounts/index.tsx | 9 +++---- src/components/score/index.tsx | 4 +-- src/components/transactions/index.tsx | 4 +-- 7 files changed, 51 insertions(+), 22 deletions(-) create mode 100644 src/components/common/loading.tsx create mode 100644 src/components/management-bank-accounts/bank-card-skeleton.tsx diff --git a/src/components/common/loading.tsx b/src/components/common/loading.tsx new file mode 100644 index 0000000..a76b759 --- /dev/null +++ b/src/components/common/loading.tsx @@ -0,0 +1,16 @@ +export const Loading = () => { + return ( +
+ + + + + +
+ ) +} \ No newline at end of file diff --git a/src/components/common/table.tsx b/src/components/common/table.tsx index a04a386..0257365 100644 --- a/src/components/common/table.tsx +++ b/src/components/common/table.tsx @@ -1,18 +1,20 @@ -import { flexRender, getCoreRowModel, SortingState, useReactTable } from "@tanstack/react-table" -import { ArrowDown2, ArrowUp2, SearchNormal1 } from "iconsax-react" +import { flexRender, getCoreRowModel, getPaginationRowModel, SortingState, useReactTable } from "@tanstack/react-table" +import { ArrowDown2, ArrowLeft2, ArrowRight2, ArrowUp2, SearchNormal1 } from "iconsax-react" import { FC } from "react" import { Input } from "./input" import { ComboBox } from "./combo-box" +import { Loading } from "./loading" type Props = { columns: any data: any sorting: SortingState, setSorting: React.Dispatch>, - tableStatus?: string | number + tableStatus?: string | number, + isLoading?: boolean } -export const Table: FC = ({ columns, data, setSorting, sorting, tableStatus }) => { +export const Table: FC = ({ columns, data, setSorting, sorting, tableStatus, isLoading = false }) => { const table = useReactTable({ data: data ? data : [], @@ -27,6 +29,7 @@ export const Table: FC = ({ columns, data, setSorting, sorting, tableStat sorting }, onSortingChange: setSorting, + getPaginationRowModel: getPaginationRowModel() }) return ( @@ -39,7 +42,7 @@ export const Table: FC = ({ columns, data, setSorting, sorting, tableStat -
+
{table.getHeaderGroups().map((headerGroup: any, index: number) => ( @@ -55,7 +58,7 @@ export const Table: FC = ({ columns, data, setSorting, sorting, tableStat ))} - + {!isLoading && {table.getRowModel().rows.map((row: any, index: number) => ( {row.getVisibleCells().map((cell: any, index: number) => ( @@ -65,9 +68,16 @@ export const Table: FC = ({ columns, data, setSorting, sorting, tableStat ))} ))} - + }
- {tableStatus &&
امتیاز من: {tableStatus}
} + {isLoading ? : <> +
+ table.getCanNextPage() && table.nextPage()} /> +

1-{table.getPageCount()}

+ table.getCanPreviousPage() && table.previousPage()} /> +
+ {tableStatus &&
امتیاز من: {tableStatus}
} + }
); diff --git a/src/components/installation-reports/index.tsx b/src/components/installation-reports/index.tsx index 3b2f744..7f6e044 100644 --- a/src/components/installation-reports/index.tsx +++ b/src/components/installation-reports/index.tsx @@ -15,9 +15,8 @@ export const InstallationReports = () => { useEffect(() => { console.log("data =>", data) }, [data]) - - if (isLoading) return

LODING .....

+ return ( - +
) } \ No newline at end of file diff --git a/src/components/management-bank-accounts/bank-card-skeleton.tsx b/src/components/management-bank-accounts/bank-card-skeleton.tsx new file mode 100644 index 0000000..b702c5d --- /dev/null +++ b/src/components/management-bank-accounts/bank-card-skeleton.tsx @@ -0,0 +1,9 @@ +import { Loading } from "../common/loading" + +export const ManagementBankCardSkeleton = () => { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/management-bank-accounts/index.tsx b/src/components/management-bank-accounts/index.tsx index 227a353..e8973ee 100644 --- a/src/components/management-bank-accounts/index.tsx +++ b/src/components/management-bank-accounts/index.tsx @@ -6,6 +6,7 @@ import { DeleteCardDialog } from "./delete-card" import { useQuery } from "@tanstack/react-query" import { getUserCardsList } from "../../services/api/bank-card" import { BankCart } from "./bank-cart" +import { ManagementBankCardSkeleton } from "./bank-card-skeleton" export const ManagementBankAccounts = () => { const [selectedCard, setSelectedCard] = useState(null) @@ -15,17 +16,15 @@ export const ManagementBankAccounts = () => { }) const [showDialog, setShowDialog] = useState(false) const handleCloseDialog = () => setShowDialog(false) - const handleOpenDialog = () => setShowDialog(true) + const handleOpenDialog = () => !isLoading && setShowDialog(true) const [showDeleteDialog, setShowDeleteDialog] = useState(false) - const handleOpenDeleteDialog = () => setShowDeleteDialog(true) + const handleOpenDeleteDialog = () => !isLoading && setShowDeleteDialog(true) const handleCloseDeleteDialog = () => setShowDeleteDialog(false) - - if (isLoading) return

LOADING...

return ( <>
- {data?.data?.cardBank?.map((item: CardBank) => )} + {!isLoading ? data?.data?.cardBank?.map((item: CardBank) => ) : }
diff --git a/src/components/score/index.tsx b/src/components/score/index.tsx index 2c3606f..a719abb 100644 --- a/src/components/score/index.tsx +++ b/src/components/score/index.tsx @@ -16,9 +16,7 @@ export const Score = () => { console.log("data =>", data) }, [data]) - if (isLoading) return

LOADING ...

- return ( -
+
) } \ No newline at end of file diff --git a/src/components/transactions/index.tsx b/src/components/transactions/index.tsx index 0d6c7fe..9261f68 100644 --- a/src/components/transactions/index.tsx +++ b/src/components/transactions/index.tsx @@ -16,9 +16,7 @@ export const Transactions = () => { useEffect(() => { console.log("data=>", data) }, [data]) - - if (isLoading) return

LOADING ....

return ( -
+
) } \ No newline at end of file