Refactor delete schedule action in ShowSchedules component

- Replaced the delete button with a DialogAction component for improved user interaction.
- Added confirmation dialog for deleting schedules, enhancing user experience and preventing accidental deletions.
- Updated success and error notifications for better feedback upon schedule deletion.
This commit is contained in:
Mauricio Siu
2025-05-02 16:07:46 -06:00
parent d7daa6d8e0
commit ef02ba22b5

View File

@@ -26,6 +26,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { DialogAction } from "@/components/shared/dialog-action";
interface Props { interface Props {
applicationId: string; applicationId: string;
@@ -161,32 +162,36 @@ export const ShowSchedules = ({ applicationId }: Props) => {
applicationId={applicationId} applicationId={applicationId}
/> />
<Button <DialogAction
variant="ghost" title="Delete Schedule"
size="sm" description="Are you sure you want to delete this schedule?"
className="text-destructive hover:text-destructive" type="destructive"
isLoading={isDeleting}
onClick={async () => { onClick={async () => {
await deleteSchedule({ await deleteSchedule({
scheduleId: schedule.scheduleId, scheduleId: schedule.scheduleId,
}) })
.then(() => { .then(() => {
utils.schedule.list.invalidate({
applicationId,
});
toast.success( toast.success(
"Schedule deleted successfully", "Schedule deleted successfully",
); );
}) })
.catch((error) => { .catch(() => {
toast.error( toast.error("Error deleting schedule");
error instanceof Error
? error.message
: "Error deleting schedule",
);
}); });
}} }}
> >
<Trash2 className="w-4 h-4" /> <Button
<span className="sr-only">Delete</span> variant="ghost"
</Button> size="icon"
className="group hover:bg-red-500/10 "
isLoading={isDeleting}
>
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button>
</DialogAction>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>