diff --git a/src/pages/Facility/settings/locations/LocationList.tsx b/src/pages/Facility/settings/locations/LocationList.tsx index 6b53b98a49b..66a02b5e08e 100644 --- a/src/pages/Facility/settings/locations/LocationList.tsx +++ b/src/pages/Facility/settings/locations/LocationList.tsx @@ -1,7 +1,6 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { toast } from "sonner"; import CareIcon from "@/CAREUI/icons/CareIcon"; @@ -9,11 +8,9 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; -import ConfirmDialog from "@/components/Common/ConfirmDialog"; import Pagination from "@/components/Common/Pagination"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; -import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; import { LocationList as LocationListType } from "@/types/location/location"; import locationApi from "@/types/location/locationApi"; @@ -29,12 +26,10 @@ export default function LocationList({ facilityId }: Props) { const { t } = useTranslation(); const [page, setPage] = useState(1); const [searchQuery, setSearchQuery] = useState(""); - const [openDeleteDialog, setOpenDeleteDialog] = useState(false); const [selectedLocation, setSelectedLocation] = useState(null); const [isSheetOpen, setIsSheetOpen] = useState(false); const limit = 12; - const queryClient = useQueryClient(); const { data, isLoading } = useQuery({ queryKey: ["locations", facilityId, page, limit, searchQuery], @@ -58,41 +53,6 @@ export default function LocationList({ facilityId }: Props) { setSelectedLocation(location); setIsSheetOpen(true); }; - const { mutate: removeLocation } = useMutation({ - mutationFn: ({ - facilityId, - locationId, - }: { - facilityId: string; - locationId: string; - }) => - mutate(locationApi.delete, { - pathParams: { facility_id: facilityId, id: locationId }, - })({ facilityId, locationId }), - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: ["locations", facilityId, page, limit, searchQuery], - }); - toast.success("Location removed successfully"); - }, - onError: (error) => { - const errorData = error.cause as { errors: { msg: string }[] }; - errorData.errors.forEach((er) => { - toast.error(er.msg); - }); - }, - }); - - const handleDeleteLocation = (location: LocationListType) => { - setSelectedLocation(location); - setOpenDeleteDialog(true); - }; - const confirmDelete = () => { - if (!selectedLocation) return; - removeLocation({ facilityId, locationId: selectedLocation.id }); - setOpenDeleteDialog(false); - setSelectedLocation(null); - }; const handleSheetClose = () => { setIsSheetOpen(false); @@ -101,20 +61,6 @@ export default function LocationList({ facilityId }: Props) { return (
- - {t("are_you_sure_want_to_delete", { name: selectedLocation?.name })} - - } - action="Delete" - variant="destructive" - show={openDeleteDialog} - onClose={() => setOpenDeleteDialog(false)} - onConfirm={confirmDelete} - cancelLabel={t("cancel")} - />

{t("locations")}

@@ -149,7 +95,7 @@ export default function LocationList({ facilityId }: Props) { key={location.id} location={location} onEdit={handleEditLocation} - onDelete={handleDeleteLocation} + facilityId={facilityId} /> )) ) : ( diff --git a/src/pages/Facility/settings/locations/LocationView.tsx b/src/pages/Facility/settings/locations/LocationView.tsx index 86a83526301..fa8fb50a674 100644 --- a/src/pages/Facility/settings/locations/LocationView.tsx +++ b/src/pages/Facility/settings/locations/LocationView.tsx @@ -1,8 +1,7 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; import { Link } from "raviger"; import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { toast } from "sonner"; import CareIcon from "@/CAREUI/icons/CareIcon"; @@ -18,13 +17,11 @@ import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; -import ConfirmDialog from "@/components/Common/ConfirmDialog"; import Page from "@/components/Common/Page"; import Pagination from "@/components/Common/Pagination"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; import LinkDepartmentsSheet from "@/components/Patient/LinkDepartmentsSheet"; -import mutate from "@/Utils/request/mutate"; import query from "@/Utils/request/query"; import { LocationList, getLocationFormLabel } from "@/types/location/location"; import locationApi from "@/types/location/locationApi"; @@ -43,7 +40,6 @@ export default function LocationView({ id, facilityId }: Props) { const [page, setPage] = useState(1); const [searchQuery, setSearchQuery] = useState(""); - const [openDeleteDialog, setOpenDeleteDialog] = useState(false); const [selectedLocation, setSelectedLocation] = useState( null, ); @@ -96,47 +92,6 @@ export default function LocationView({ id, facilityId }: Props) { setIsSheetOpen(false); setSelectedLocation(null); }; - const { mutate: removeLocation } = useMutation({ - mutationFn: ({ - facilityId, - locationId, - }: { - facilityId: string; - locationId: string; - }) => - mutate(locationApi.delete, { - pathParams: { facility_id: facilityId, id: locationId }, - })({ facilityId, locationId }), - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [ - "locations", - facilityId, - id, - "children", - { page, limit, searchQuery }, - ], - }); - toast.success("Location removed successfully"); - }, - onError: (error) => { - const errorData = error.cause as { errors: { msg: string }[] }; - errorData.errors.forEach((er) => { - toast.error(er.msg); - }); - }, - }); - - const handleDeleteLocation = (location: LocationList) => { - setSelectedLocation(location); - setOpenDeleteDialog(true); - }; - const confirmDelete = () => { - if (!selectedLocation) return; - removeLocation({ facilityId, locationId: selectedLocation.id }); - setOpenDeleteDialog(false); - setSelectedLocation(null); - }; if (!location) return ( @@ -160,20 +115,6 @@ export default function LocationView({ id, facilityId }: Props) { return ( <> - - {t("are_you_sure_want_to_delete", { name: selectedLocation?.name })} - - } - action="Delete" - variant="destructive" - show={openDeleteDialog} - onClose={() => setOpenDeleteDialog(false)} - onConfirm={confirmDelete} - cancelLabel={t("cancel")} - /> @@ -275,7 +216,7 @@ export default function LocationView({ id, facilityId }: Props) { key={childLocation.id} location={childLocation} onEdit={handleEditLocation} - onDelete={handleDeleteLocation} + facilityId={facilityId} /> )) ) : ( diff --git a/src/pages/Facility/settings/locations/components/LocationCard.tsx b/src/pages/Facility/settings/locations/components/LocationCard.tsx index 6d69c34d4bf..b53deb051ad 100644 --- a/src/pages/Facility/settings/locations/components/LocationCard.tsx +++ b/src/pages/Facility/settings/locations/components/LocationCard.tsx @@ -1,3 +1,4 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; import { Bed, Building, @@ -14,26 +15,58 @@ import { } from "lucide-react"; import { Link } from "raviger"; import { useTranslation } from "react-i18next"; +import { toast } from "sonner"; import { cn } from "@/lib/utils"; import CareIcon from "@/CAREUI/icons/CareIcon"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; +import { Button, buttonVariants } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; +import mutate from "@/Utils/request/mutate"; import { LocationList, getLocationFormLabel } from "@/types/location/location"; +import locationApi from "@/types/location/locationApi"; interface Props { location: LocationList; onEdit?: (location: LocationList) => void; - onDelete?: (location: LocationList) => void; className?: string; + facilityId?: string; } -export function LocationCard({ location, onEdit, onDelete, className }: Props) { +export function LocationCard({ + location, + onEdit, + className, + facilityId, +}: Props) { const { t } = useTranslation(); + const queryClient = useQueryClient(); + + const { mutate: removeLocation } = useMutation({ + mutationFn: mutate(locationApi.delete, { + pathParams: { facility_id: facilityId, id: location.id }, + }), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["locations", facilityId], + }); + toast.success("Location removed successfully"); + }, + }); const getLocationTypeIcon = (form: string) => { switch (form.toLowerCase()) { @@ -131,9 +164,43 @@ export function LocationCard({ location, onEdit, onDelete, className }: Props) {
- + + + + + + + + {t("remove")} {location.name} + + + {t("are_you_sure_want_to_delete", { + name: location.name, + })} + + + + {t("cancel")} + + removeLocation({ + pathParams: { + facility_id: facilityId, + id: location.id, + }, + }) + } + className={cn(buttonVariants({ variant: "destructive" }))} + > + {t("remove")} + + + +