diff --git a/public/locale/en.json b/public/locale/en.json index 7a455f5a214..94db79cee10 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -386,6 +386,7 @@ "archived_files": "Archived Files", "are_non_editable_fields": "are non-editable fields", "are_you_still_watching": "Are you still watching?", + "are_you_sure": "Are you sure?", "are_you_sure_want_to_delete": "Are you sure you want to delete {{name}}?", "are_you_sure_want_to_delete_this_record": "Are you sure want to delete this record?", "are_you_sure_want_to_remove": "Are you sure you want to remove {{name}} from the patient? This action cannot be undone", @@ -2075,6 +2076,7 @@ "third_party_software_licenses": "Third Party Software Licenses", "this_action_is_irreversible": "This action is irreversible. Once a file is archived it cannot be unarchived.", "this_file_has_been_archived": "This file has been archived and cannot be unarchived.", + "this_will_permanently_remove_the_template": "This will permanently remove the template and cannot be undone", "time": "Time", "time_slot": "Time Slot", "title": "Title", diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx index 3d1ea1cd215..2bc2c159db5 100644 --- a/src/components/ui/alert-dialog.tsx +++ b/src/components/ui/alert-dialog.tsx @@ -1,4 +1,5 @@ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; +import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; @@ -97,13 +98,27 @@ const AlertDialogDescription = React.forwardRef< AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName; +const alertVariants = cva("mt-2 sm:mt-0", { + variants: { + variant: { + default: "bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50", + destructive: + "bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90", + }, + }, + defaultVariants: { + variant: "default", + }, +}); + const AlertDialogAction = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, ...props }, ref) => ( )); diff --git a/src/pages/Scheduling/ScheduleExceptions.tsx b/src/pages/Scheduling/ScheduleExceptions.tsx index 7480c49a323..85b76c0bf1c 100644 --- a/src/pages/Scheduling/ScheduleExceptions.tsx +++ b/src/pages/Scheduling/ScheduleExceptions.tsx @@ -1,5 +1,6 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { format, parseISO } from "date-fns"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; @@ -8,6 +9,18 @@ import { cn } from "@/lib/utils"; import ColoredIndicator from "@/CAREUI/display/ColoredIndicator"; import CareIcon from "@/CAREUI/icons/CareIcon"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import Loading from "@/components/Common/Loading"; @@ -63,6 +76,7 @@ const ScheduleExceptionItem = ( ) => { const { t } = useTranslation(); const queryClient = useQueryClient(); + const [open, setOpen] = useState(false); const { mutate: deleteException, isPending } = useMutation({ mutationFn: mutate(scheduleApis.exceptions.delete, { @@ -112,15 +126,39 @@ const ScheduleExceptionItem = ( - + + + + + + + {t("are_you_sure")} + + + {t("warning")} + + {t("this_will_permanently_remove_the_template")} + + + + + + {t("cancel")} + { + deleteException(); + setOpen(false); + }} + > + {t("confirm")} + + + + {/* TODO: Add this information */} {/*
diff --git a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx index d4081a965fe..288c7882116 100644 --- a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx +++ b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx @@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { isAfter, isBefore, parse } from "date-fns"; import { ArrowRightIcon } from "lucide-react"; import { useQueryParams } from "raviger"; +import { useState } from "react"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { Trans } from "react-i18next"; @@ -15,6 +16,18 @@ import WeekdayCheckbox, { DayOfWeek, } from "@/CAREUI/interactive/WeekdayCheckbox"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { DatePicker } from "@/components/ui/date-picker"; import { @@ -235,6 +248,9 @@ export default function CreateScheduleTemplateSheet({ ); }; + const [openDialog, setOpenDialog] = useState(false); + const [removeIndex, setRemoveIndex] = useState(null); + return (
- + + + + + + + {t("are_you_sure")} + + + + {t("warning")} + + {t( + "this_will_permanently_remove_the_template", + )} + + + + + + {t("cancel")} + { + const availabilities = + form.getValues("availabilities"); + if (removeIndex !== null) { + availabilities.splice(removeIndex, 1); + form.setValue( + "availabilities", + availabilities, + ); + } + setOpenDialog(false); + }} + > + {t("confirm")} + + + +
diff --git a/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx index 5cdd6790bcb..8be3fd33c3e 100644 --- a/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx +++ b/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx @@ -15,6 +15,18 @@ import WeekdayCheckbox, { DayOfWeek, } from "@/CAREUI/interactive/WeekdayCheckbox"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { DatePicker } from "@/components/ui/date-picker"; import { @@ -126,6 +138,7 @@ const ScheduleTemplateEditor = ({ }) => { const { t } = useTranslation(); const queryClient = useQueryClient(); + const [isDialogOpen, setDialogOpen] = useState(false); const templateFormSchema = z .object({ @@ -250,16 +263,44 @@ const ScheduleTemplateEditor = ({
- + + + + + + + {t("are_you_sure")} + + + {t("warning")} + + {t("this_will_permanently_remove_the_template")} + + + + + + {t("cancel")} + { + deleteTemplate(); + setDialogOpen(false); + }} + > + {t("confirm")} + + + +
- + + + + + + + {t("are_you_sure")} + + + {t("warning")} + + {t("this_will_permanently_remove_the_template")} + + + + + + {t("cancel")} + { + deleteAvailability(); + setOpenDialog(false); + }} + > + {t("confirm")} + + + +