feat(FE-137): enhance RecordingTable to support recording deletion with user feedback and refresh functionality

This commit is contained in:
rstubryan
2025-10-24 13:32:46 +07:00
parent d2c485fdf0
commit 7a6a35568f
@@ -19,6 +19,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import { type CellContext } from '@tanstack/react-table'; import { type CellContext } from '@tanstack/react-table';
import { type Recording } from '@/types/api/production/recording'; import { type Recording } from '@/types/api/production/recording';
import { RecordingApi } from '@/services/api/production'; import { RecordingApi } from '@/services/api/production';
import toast from 'react-hot-toast';
const RowOptionsMenu = ({ const RowOptionsMenu = ({
type = 'dropdown', type = 'dropdown',
@@ -82,7 +83,7 @@ const RecordingTable = () => {
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({}); const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const [, setSelectedRecording] = useState<Recording | undefined>(undefined); const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false); const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false); const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -94,6 +95,7 @@ const RecordingTable = () => {
const { const {
data: recordings, data: recordings,
isLoading, isLoading,
mutate: refreshRecordings,
} = useSWR( } = useSWR(
`${RecordingApi.basePath}?page=${page}&limit=${pageSize}`, `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
RecordingApi.getAllFetcher RecordingApi.getAllFetcher
@@ -154,10 +156,13 @@ const RecordingTable = () => {
const singleDeleteHandler = async () => { const singleDeleteHandler = async () => {
setIsDeleteLoading(true); setIsDeleteLoading(true);
setTimeout(() => {
setIsDeleteLoading(false); await RecordingApi.delete(selectedRecording?.id as number);
singleDeleteModal.closeModal(); refreshRecordings();
}, 1000);
singleDeleteModal.closeModal();
toast.success('Successfully delete Recording!');
setIsDeleteLoading(false);
}; };
return ( return (
@@ -338,10 +343,6 @@ const RecordingTable = () => {
header: 'Ketepatan Waktu', header: 'Ketepatan Waktu',
cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat', cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
}, },
{
header: 'Status Perubahan',
cell: (props) => 'Tidak ada perubahan',
},
{ {
header: 'Tanggal Submit', header: 'Tanggal Submit',
cell: (props) => cell: (props) =>
@@ -417,7 +418,7 @@ const RecordingTable = () => {
<ConfirmationModal <ConfirmationModal
ref={singleDeleteModal.ref} ref={singleDeleteModal.ref}
type='error' type='error'
text={`Apakah anda yakin ingin menghapus data Recording ini?`} text={`Apakah anda yakin ingin menghapus data Recording ini (ID: ${selectedRecording?.id})?`}
secondaryButton={{ secondaryButton={{
text: 'Tidak', text: 'Tidak',
}} }}