Business Service Table
Anis
javascript
5 months ago
5.9 kB
4
Indexable
'use client'; import Table from '@/app/(admin)/root/_components/Table'; import Button from '@/components/Formik/Button'; import StatusIndicator from '@/components/shared/StatusIndicator'; import { useDeleteBusinessServiceMutation, useGetBusinessServicesQuery, useUpdateBusinessServiceStatusMutation, useUpdateSortingBusinessServiceMutation, } from '@/features/super-admin/businessServiceApi'; import { IQueryType } from '@/types'; import { convertDateByOffset } from '@/utils/getFormatDate'; import { useEffect, useState } from 'react'; import toast from 'react-hot-toast'; import { HiOutlinePencil } from 'react-icons/hi'; import { HiPlus } from 'react-icons/hi2'; import { ImBin } from 'react-icons/im'; import DeleteConfirmModal from '../../../_components/DeleteConfirmModal'; import SwitchButton from '../../../_components/SwitchButton'; import CreateUpdateModel from './CreateUpdateModel'; function capitalizeWords(input: string): string { return input .split(' ') .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(' '); } export default function BusinessServiceTable({ offset }: { offset: number }) { const [formData, setFormData] = useState({}); const [createState, setCreateState] = useState(false); const [deleteState, setDeleteState] = useState(false); const [deleteId, setDeleteId] = useState(null); const [deleteSubmitting, setDeleteSubmitting] = useState(false); const [query, setQuery] = useState<IQueryType>({ pageIndex: 0, pageSize: 20, search: null }); const searchQuery = query.search ? { search: query.search } : {}; const { data, isLoading, isFetching } = useGetBusinessServicesQuery({ page: query.pageIndex + 1, limit: query.pageSize, ...searchQuery, }); const [deleteBusinessService, { isSuccess, isError }] = useDeleteBusinessServiceMutation(); const [updateStatus] = useUpdateBusinessServiceStatusMutation(); const [sort] = useUpdateSortingBusinessServiceMutation(); const handleDelete = async (rowData: any) => { setDeleteState(true); setDeleteId(rowData._id); }; useEffect(() => { if (isError) { setDeleteSubmitting(false); toast.error('Something went wrong. Please try again!'); setDeleteState(false); setDeleteId(null); } if (isSuccess) { setDeleteSubmitting(false); toast.success('Business service deleted successfully!'); setDeleteState(false); setDeleteId(null); } }, [isSuccess, isError]); const structure = [ { header: 'Name', accessorKey: 'name', enableSorting: false, Cell: ({ row }: any) => ( <div> <p>{capitalizeWords(row?.original?.name)}</p> </div> ), }, { header: 'Status', accessorKey: 'status', enableSorting: false, Cell: ({ row }: any) => <SwitchButton updateStatus={updateStatus} id={row?.original?._id} status={row?.original?.status} />, mantineTableHeadCellProps: { align: 'center', }, mantineTableBodyCellProps: { align: 'center', }, }, { header: 'Created At', accessorKey: 'createdAt', enableSorting: false, Cell: ({ row }: any) => ( <div> <p>{convertDateByOffset(row?.original?.createdAt, offset)}</p> </div> ), }, { header: 'Actions', Cell: ({ row }: any) => ( <div className="flex items-center justify-center gap-2"> <Button tooltip="Edit" color="warning" preIcon={<HiOutlinePencil className="text-base" />} onClick={() => { setFormData({ ...row.original, name: capitalizeWords(row?.original?.name), }); setCreateState(true); }} /> <Button tooltip="Delete" onClick={() => handleDelete(row.original)} color="danger" preIcon={<ImBin className="text-base" />} /> </div> ), mantineTableHeadCellProps: { align: 'center', }, mantineTableBodyCellProps: { align: 'center', }, }, ]; return ( <> <CreateUpdateModel setFormData={setFormData} formData={formData} modalState={createState} setModalState={setCreateState} /> <div className="mb-5 flex flex-col justify-between gap-y-3 md:flex-row md:gap-0"> <StatusIndicator /> <div> <Button className="w-full" color="primary" onClick={() => setCreateState(true)} text="Add New Business Service" preIcon={<HiPlus className="text-base" />} /> </div> </div> <Table isFetching={isFetching} isLoading={isLoading} enableRowNumbers response={ isLoading ? { data: [], pagination: { totalDocuments: 0, }, } : { data: data?.data.docs || [], pagination: { totalDocuments: data?.data.totalDocs || 0, }, } } structure={structure} setQuery={setQuery} query={query} enableDnD={true} sort={sort} sortContext="business-service" enableRowActions={false} searchPlaceHolder="Search by Service Name" /> <DeleteConfirmModal deleteId={deleteId} deleteHandler={deleteBusinessService} modalState={deleteState} setModalState={setDeleteState} isSubmitting={deleteSubmitting} setIsSubmitting={setDeleteSubmitting} /> </> ); }
Editor is loading...
Leave a Comment