diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx index ea7967a8..f2031037 100644 --- a/src/components/pages/flock/recording/RecordingTable.tsx +++ b/src/components/pages/flock/recording/RecordingTable.tsx @@ -176,10 +176,16 @@ const RecordingTable = () => { const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [sorting, setSorting] = useState([]); + const [selectedRecordings, setSelectedRecordings] = useState([]); const [, setSelectedRecording] = useState(undefined); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false); + const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false); - const deleteModal = useModal(); + const singleDeleteModal = useModal(); + const bulkDeleteModal = useModal(); + const bulkApproveModal = useModal(); + const bulkRejectModal = useModal(); const searchChangeHandler = useCallback( (e: React.ChangeEvent) => { @@ -198,14 +204,6 @@ const RecordingTable = () => { [] ); - const confirmationModalDeleteClickHandler = async () => { - setIsDeleteLoading(true); - setTimeout(() => { - setIsDeleteLoading(false); - deleteModal.closeModal(); - }, 1000); - }; - const paginatedData = useMemo(() => { const filteredData = dummyRecordings.filter( (recording) => @@ -217,6 +215,53 @@ const RecordingTable = () => { return filteredData.slice(start, start + pageSize); }, [page, pageSize, search]); + const bulkApproveHandler = async () => { + setIsBulkApproveLoading(true); + console.log( + 'Approved recordings:', + paginatedData.filter((_, idx) => selectedRecordings.includes(idx)) + ); + setTimeout(() => { + setIsBulkApproveLoading(false); + setSelectedRecordings([]); + bulkApproveModal.closeModal(); + }, 1000); + }; + + const bulkRejectHandler = async () => { + setIsBulkRejectLoading(true); + console.log( + 'Rejected recordings:', + paginatedData.filter((_, idx) => selectedRecordings.includes(idx)) + ); + setTimeout(() => { + setIsBulkRejectLoading(false); + setSelectedRecordings([]); + bulkRejectModal.closeModal(); + }, 1000); + }; + + const singleDeleteHandler = async () => { + setIsDeleteLoading(true); + setTimeout(() => { + setIsDeleteLoading(false); + singleDeleteModal.closeModal(); + }, 1000); + }; + + const bulkDeleteHandler = async () => { + setIsDeleteLoading(true); + console.log( + 'Deleted recordings:', + paginatedData.filter((_, idx) => selectedRecordings.includes(idx)) + ); + setTimeout(() => { + setIsDeleteLoading(false); + setSelectedRecordings([]); + bulkDeleteModal.closeModal(); + }, 1000); + }; + return (
@@ -238,9 +283,143 @@ const RecordingTable = () => { />
+ {/* Bulk action buttons */} +
+ {selectedRecordings.length > 0 && ( +
+ + + +
+ )} + + + + + + +
+ ( + 0 && + table + .getRowModel() + .rows.every((row) => selectedRecordings.includes(row.index)) + } + onChange={(e) => { + if (e.target.checked) { + setSelectedRecordings( + table.getRowModel().rows.map((row) => row.index) + ); + } else { + setSelectedRecordings([]); + } + }} + /> + ), + cell: ({ row }) => ( + { + if (e.target.checked) { + setSelectedRecordings([...selectedRecordings, row.index]); + } else { + setSelectedRecordings( + selectedRecordings.filter((i) => i !== row.index) + ); + } + }} + /> + ), + }, { header: '#', cell: (props) => pageSize * (page - 1) + props.row.index + 1, @@ -286,7 +465,7 @@ const RecordingTable = () => { const deleteClickHandler = () => { setSelectedRecording(props.row.original); - deleteModal.openModal(); + singleDeleteModal.openModal(); }; return ( @@ -338,7 +517,7 @@ const RecordingTable = () => { /> { text: 'Ya', color: 'error', isLoading: isDeleteLoading, - onClick: confirmationModalDeleteClickHandler, + onClick: singleDeleteHandler, }} />