diff --git a/src/components/HOC/EmptyListWrapper.tsx b/src/components/HOC/EmptyListWrapper.tsx index 76e421f..d0cf95b 100644 --- a/src/components/HOC/EmptyListWrapper.tsx +++ b/src/components/HOC/EmptyListWrapper.tsx @@ -6,6 +6,7 @@ interface EmptyListWrapperProps { emptyMessage: string; columns: string[]; children: ReactNode; + isLoading?: boolean; } function EmptyListWrapper({ @@ -13,7 +14,12 @@ function EmptyListWrapper({ emptyMessage, columns, children, + isLoading = false, }: EmptyListWrapperProps) { + if (isLoading) { + return null; + } + if (!list.length) { return ( diff --git a/src/components/Tables/admins/index.tsx b/src/components/Tables/admins/index.tsx index ccff704..2f18c14 100644 --- a/src/components/Tables/admins/index.tsx +++ b/src/components/Tables/admins/index.tsx @@ -17,6 +17,7 @@ import { import TableSkeleton from "@/components/ui/TableSkeleton"; import { AdminStatus } from "@/constants/enums"; import { _TooltipDefaultParams } from "@/constants/tooltip"; +import { getPaginatedRowNumber } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import AdminListFilters from "./AdminListFilters"; import ChangeStatusModalContent from "./ChangeStatusModalContent"; @@ -77,7 +78,7 @@ const AdminsTable = () => { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ index })} {item?.full_name} diff --git a/src/components/Tables/cms/index.tsx b/src/components/Tables/cms/index.tsx index 7106f6c..0bce796 100644 --- a/src/components/Tables/cms/index.tsx +++ b/src/components/Tables/cms/index.tsx @@ -7,7 +7,7 @@ import Modal from "@/components/ui/modal"; import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { unixToDate } from "@/utils/shared"; +import { getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import { TableHeader, TableRow } from "../../ui/table"; import CmsListFilters from "./CmsListFilters"; @@ -60,7 +60,11 @@ const CmsTable = () => { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ + index, + page: data?.meta?.page, + limit: data?.meta?.limit, + })} {item.key} diff --git a/src/components/Tables/companies/company-categories/index.tsx b/src/components/Tables/companies/company-categories/index.tsx index ab426af..e0f9da4 100644 --- a/src/components/Tables/companies/company-categories/index.tsx +++ b/src/components/Tables/companies/company-categories/index.tsx @@ -14,7 +14,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { unixToDate } from "@/utils/shared"; +import { getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import { Skeleton } from "../../../ui/skeleton"; import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter"; @@ -83,7 +83,9 @@ const CompanyCategoriesTable = () => { key={category.id} className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + + {getPaginatedRowNumber({ index })} + {category.name} {category.description} diff --git a/src/components/Tables/companies/index.tsx b/src/components/Tables/companies/index.tsx index bff0ceb..a4ab677 100644 --- a/src/components/Tables/companies/index.tsx +++ b/src/components/Tables/companies/index.tsx @@ -17,7 +17,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { formatPhoneNumber } from "@/utils/shared"; +import { formatPhoneNumber, getPaginatedRowNumber } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import { useCompanyListPresenter } from "./useCompanyListPresenter"; import ListHeader from "@/components/ui/ListHeader"; @@ -81,7 +81,7 @@ const CompaniesTable = () => { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ index })} {company.name} diff --git a/src/components/Tables/contact-us/index.tsx b/src/components/Tables/contact-us/index.tsx index c4d111f..df95508 100644 --- a/src/components/Tables/contact-us/index.tsx +++ b/src/components/Tables/contact-us/index.tsx @@ -12,7 +12,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { unixToDate } from "@/utils/shared"; +import { getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import { useContactUsListPresenter } from "./useContactUsListPresenter"; @@ -58,7 +58,7 @@ const ContactUsTable = () => { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ index })} {item?.full_name} diff --git a/src/components/Tables/customers/index.tsx b/src/components/Tables/customers/index.tsx index 59b7504..875126b 100644 --- a/src/components/Tables/customers/index.tsx +++ b/src/components/Tables/customers/index.tsx @@ -3,6 +3,7 @@ import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons"; import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; import { Building } from "@/components/Layouts/sidebar/icons"; import ConfirmationModal from "@/components/ui/ConfirmationModal"; +import IsVisible from "@/components/ui/IsVisible"; import ListHeader from "@/components/ui/ListHeader"; import Modal from "@/components/ui/modal"; import Pagination from "@/components/ui/pagination"; @@ -17,7 +18,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { unixToDate } from "@/utils/shared"; +import { getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { toast } from "react-toastify"; import { Tooltip } from "react-tooltip"; import AssignToCompanyModalContent from "./AssignToCompanyModalContent"; @@ -52,7 +53,9 @@ const CustomersTable = () => { isMutating, setParams, assignCompanyCompaniesQuery, + shouldShowPagination, } = useCustomerListPresenter(); + return (
{ list={allCustomers ?? []} columns={columns} emptyMessage="No Customers were found" + isLoading={isPending} > {allCustomers?.map((customer, index) => ( - {index + 1} + + {getPaginatedRowNumber({ + index, + page: metadata?.page, + limit: metadata?.limit, + })} + {customer?.full_name} {customer?.email} @@ -174,17 +184,19 @@ const CustomersTable = () => { - { - setParams((currentParams) => ({ - ...currentParams, - offset: e.selected * (metadata?.limit ?? 10), - limit: metadata?.limit ?? 10, - })); - }} - /> + + { + setParams((currentParams) => ({ + ...currentParams, + offset: e.selected * (metadata?.limit ?? 10), + limit: metadata?.limit ?? 10, + })); + }} + /> + setIsFilterModalOpen(false)} diff --git a/src/components/Tables/customers/useCustomerListPresenter.ts b/src/components/Tables/customers/useCustomerListPresenter.ts index 9aec49d..44ca45d 100644 --- a/src/components/Tables/customers/useCustomerListPresenter.ts +++ b/src/components/Tables/customers/useCustomerListPresenter.ts @@ -82,6 +82,9 @@ const useCustomerListPresenter = () => { }; const customers = data?.data?.customers ?? []; + const shouldShowPagination = + !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10; + return { allCustomers: customers, metadata: data?.meta, @@ -109,6 +112,7 @@ const useCustomerListPresenter = () => { isMutating, setParams, assignCompanyCompaniesQuery, + shouldShowPagination, }; }; diff --git a/src/components/Tables/feedback-table/index.tsx b/src/components/Tables/feedback-table/index.tsx index 291c8b0..3196ce8 100644 --- a/src/components/Tables/feedback-table/index.tsx +++ b/src/components/Tables/feedback-table/index.tsx @@ -10,7 +10,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { cn } from "@/lib/utils"; -import { capitalize, unixToDate } from "@/utils/shared"; +import { capitalize, getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { ShowcaseSection } from "@/components/Layouts/showcase-section"; import useFeedbackTablePresenter from "./useFeedbackTablePresenter"; @@ -60,7 +60,7 @@ const FeedbackTable = ({ id, paramKey }: IProps) => { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ index })} {item.feedback_type} diff --git a/src/components/Tables/inquiries/index.tsx b/src/components/Tables/inquiries/index.tsx index db79e9a..b7f9c52 100644 --- a/src/components/Tables/inquiries/index.tsx +++ b/src/components/Tables/inquiries/index.tsx @@ -2,6 +2,7 @@ import { PencilSquareIcon, TrashIcon } from "@/assets/icons"; import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; import ConfirmationModal from "@/components/ui/ConfirmationModal"; +import IsVisible from "@/components/ui/IsVisible"; import ListHeader from "@/components/ui/ListHeader"; import Modal from "@/components/ui/modal"; import Pagination from "@/components/ui/pagination"; @@ -16,7 +17,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { formatPhoneNumber, unixToDate } from "@/utils/shared"; +import { formatPhoneNumber, getPaginatedRowNumber, unixToDate } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import ChangeStatusForm from "./ChangeStatusForm"; import InquiriesListFilters from "./InquiriesListFilters"; @@ -45,7 +46,9 @@ const InquiriesTable = () => { setFilterValue, isMutating, setParams, + shouldShowPagination, } = useInquiriesListPresenter(); + return (
{ columns={columns} list={inquiries ?? []} emptyMessage="No Inquiries were found" + isLoading={isPending} > {inquiries?.map((inquiry, index) => ( - {index + 1} + {getPaginatedRowNumber({ + index, + page: allInquiries?.meta?.page, + limit: allInquiries?.meta?.limit, + })} {inquiry?.company_name} @@ -146,19 +154,21 @@ const InquiriesTable = () => { watch={watch} /> - { - setParams((currentParams) => ({ - ...currentParams, - offset: e.selected * (allInquiries?.meta?.limit ?? 10), - limit: allInquiries?.meta?.limit ?? 10, - })); - }} - /> + + { + setParams((currentParams) => ({ + ...currentParams, + offset: e.selected * (allInquiries?.meta?.limit ?? 10), + limit: allInquiries?.meta?.limit ?? 10, + })); + }} + /> + setIsChangeStatusModalOpen(false)} diff --git a/src/components/Tables/inquiries/useInquiriesListPresenter.ts b/src/components/Tables/inquiries/useInquiriesListPresenter.ts index ca3849d..6cfbe53 100644 --- a/src/components/Tables/inquiries/useInquiriesListPresenter.ts +++ b/src/components/Tables/inquiries/useInquiriesListPresenter.ts @@ -52,6 +52,8 @@ const useInquiriesListPresenter = () => { }, [searchParams, filterFormReset]); const { data, isPending } = useGetInquiries(params); + const shouldShowPagination = + !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10; const { mutate } = useDeleteInquiry(() => setIsDeleteModalOpen(false)); const { mutate: changeStatus } = useChangeInquiryStatus(() => setIsChangeStatusModalOpen(false)); @@ -100,6 +102,7 @@ const useInquiriesListPresenter = () => { setFilterValue, isMutating, setParams, + shouldShowPagination, }; }; diff --git a/src/components/Tables/notification-history/index.tsx b/src/components/Tables/notification-history/index.tsx index a996a4f..1a1ff8f 100644 --- a/src/components/Tables/notification-history/index.tsx +++ b/src/components/Tables/notification-history/index.tsx @@ -2,6 +2,7 @@ import { EyeIcon } from "@/assets/icons"; import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import IsVisible from "@/components/ui/IsVisible"; import Pagination from "@/components/ui/pagination"; import Status from "@/components/ui/Status"; import { @@ -14,7 +15,7 @@ import { } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; -import { truncateString, unixToDate } from "@/utils/shared"; +import { getPaginatedRowNumber, truncateString, unixToDate } from "@/utils/shared"; import { Tooltip } from "react-tooltip"; import Boolean from "@/components/ui/Boolean"; @@ -40,6 +41,7 @@ const NotificationHistoryTable = () => { watch, search, isMutating, + shouldShowPagination, } = useNotificationHistoryTablePresenter(); return ( @@ -65,10 +67,17 @@ const NotificationHistoryTable = () => { list={notificationHistory ?? []} columns={columns} emptyMessage="No notifications were found" + isLoading={isLoading} > {(notificationHistory ?? []).map((item, index) => ( - {index + 1} + + {getPaginatedRowNumber({ + index, + page: metadata?.page, + limit: metadata?.limit, + })} + {item.title} {item.event_type} @@ -117,17 +126,19 @@ const NotificationHistoryTable = () => { - { - setParams((currentParams) => ({ - ...currentParams, - offset: e.selected * (metadata?.limit ?? 10), - limit: metadata?.limit ?? 10, - })); - }} - /> + + { + setParams((currentParams) => ({ + ...currentParams, + offset: e.selected * (metadata?.limit ?? 10), + limit: metadata?.limit ?? 10, + })); + }} + /> + { ...apiDefaultParams, }); const { data, isLoading } = useGetNotificationHistoryQuery(params); + const shouldShowPagination = + !isLoading && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10; const isMutating = useIsMutating(); const columns: string[] = [ "row", @@ -54,6 +56,7 @@ const useNotificationHistoryTablePresenter = () => { setIsFilterModalOpen, isMutating, search, + shouldShowPagination, }; }; diff --git a/src/components/Tables/tenders/index.tsx b/src/components/Tables/tenders/index.tsx index 08c83f4..7815902 100644 --- a/src/components/Tables/tenders/index.tsx +++ b/src/components/Tables/tenders/index.tsx @@ -15,12 +15,14 @@ import useTenderListPresenter from "./useTenderListPresenter"; import { ExclamationIcon, EyeIcon } from "@/assets/icons"; +import IsVisible from "@/components/ui/IsVisible"; import ListHeader from "@/components/ui/ListHeader"; import Modal from "@/components/ui/modal"; import Pagination from "@/components/ui/pagination"; import TableSkeleton from "@/components/ui/TableSkeleton"; import { _TooltipDefaultParams } from "@/constants/tooltip"; import { cn } from "@/lib/utils"; +import { getPaginatedRowNumber } from "@/utils/shared"; import Link from "next/link"; import TenderListFilters from "./TenderListFilters"; const TendersTable = () => { @@ -39,6 +41,7 @@ const TendersTable = () => { watch, setFilterValue, isMutating, + shouldShowPagination, } = useTenderListPresenter(); return ( @@ -64,6 +67,7 @@ const TendersTable = () => { list={allTenders?.data.tenders ?? []} columns={columns} emptyMessage="No tenders were found" + isLoading={isPending} > {(allTenders?.data.tenders ?? []).map((item, index) => ( { className="odd:bg-gray-2 dark:odd:bg-gray-7" > - {index + 1} + {getPaginatedRowNumber({ + index, + page: allTenders?.meta?.page, + limit: allTenders?.meta?.limit, + })} {item.title} @@ -145,17 +153,19 @@ const TendersTable = () => { watch={watch} /> - { - setParams((currentParams) => ({ - ...currentParams, - offset: e.selected * (allTenders?.meta?.limit ?? 10), - limit: allTenders?.meta?.limit ?? 10, - })); - }} - /> + + { + setParams((currentParams) => ({ + ...currentParams, + offset: e.selected * (allTenders?.meta?.limit ?? 10), + limit: allTenders?.meta?.limit ?? 10, + })); + }} + /> +
); }; diff --git a/src/components/Tables/tenders/useTenderListPresenter.ts b/src/components/Tables/tenders/useTenderListPresenter.ts index ef1d7e2..29a7b03 100644 --- a/src/components/Tables/tenders/useTenderListPresenter.ts +++ b/src/components/Tables/tenders/useTenderListPresenter.ts @@ -43,6 +43,8 @@ const useTenderListPresenter = () => { }, [searchParams, filterFormReset]); const { data, error, isPending } = useTendersQuery(params); + const shouldShowPagination = + !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10; const search = (data: any) => { const newParams = { ...params, ...data, offset: 0 }; @@ -82,6 +84,7 @@ const useTenderListPresenter = () => { watch, setFilterValue, isMutating, + shouldShowPagination, }; }; diff --git a/src/utils/shared.ts b/src/utils/shared.ts index 5495435..36e87d5 100644 --- a/src/utils/shared.ts +++ b/src/utils/shared.ts @@ -110,4 +110,19 @@ export const deleteEmptyKeys = (obj: Record) => { } return newObj; }; -export const isValidAlpha2CountryCode = (code: string) => /^[A-Za-z]{2}$/.test(code); \ No newline at end of file +export const isValidAlpha2CountryCode = (code: string) => /^[A-Za-z]{2}$/.test(code); + +export const getPaginatedRowNumber = ({ + index, + page = 1, + limit = 10, +}: { + index: number; + page?: number; + limit?: number; +}) => { + const safePage = page > 0 ? page : 1; + const safeLimit = limit > 0 ? limit : 10; + + return (safePage - 1) * safeLimit + index + 1; +}; \ No newline at end of file