mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-137): enhance RecordingTable to support recording deletion with user feedback and refresh functionality
This commit is contained in:
@@ -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',
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user