Add support to delete location

cypress/e2e/facility_spec/locations.cy.ts

@@ -159,6 +159,25 @@ describe("Location Management Section", () => {
     assetPagination.navigateToPreviousPage();
   });
 
+  it("Delete location", () => {
+    cy.awaitUrl("/facility");
+    cy.get("a").contains("Dummy Facility 2").click().wait(1000);
+    cy.get("button").contains("Manage Facility").click().wait(100);
+    cy.get("div[id=location-management]").click().wait(1000);
+
+    // create new location
+    cy.get("button[id=add-new-location]").click().wait(1000);
+    cy.get("input[id=name]").type("Test Location");
+    cy.get("div[id=location-type]").click();
+    cy.get("li[id=location-type-option-OTHER]").click();
+    cy.get("button[id=submit]").click().wait(1000);
+
+    // delete location
+    cy.get("button[id=delete-location-button]").click().wait(1000);
+    cy.get("button[id=submit]").click();
+    cy.contains("Location Test Location deleted successfully").should("exist");
+  });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });

src/Components/Facility/LocationManagement.tsx

@@ -1,4 +1,4 @@
-import { lazy } from "react";
+import { lazy, useState } from "react";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -7,20 +7,51 @@ import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { LocationModel } from "./models";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import request from "../../Utils/request/request";
+import * as Notification from "../../Utils/Notifications.js";
+import ConfirmDialog from "../Common/ConfirmDialog";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
 interface Props {
   facilityId: string;
 }
 
+interface LocationProps extends LocationModel {
+  setShowDeletePopup: any;
+}
+
 export default function LocationManagement({ facilityId }: Props) {
+  const [showDeletePopup, setShowDeletePopup] = useState({
+    open: false,
+    name: "",
+    id: "",
+  });
+
+  const deleteAssetLocation = async () => {
+    const res: any = await request(routes.deleteFacilityAssetLocation, {
+      pathParams: {
+        facility_external_id: facilityId,
+        external_id: showDeletePopup.id,
+      },
+    });
+    if (res?.res?.status === 204) {
+      Notification.Success({
+        msg: `Location ${showDeletePopup.name} deleted successully`,
+      });
+      PaginatedList.Refresh;
+    } else {
+      Notification.Error({ msg: "Something went wrong!" });
+    }
+    setShowDeletePopup({ ...showDeletePopup, open: false });
+  };
+
   return (
     <PaginatedList
       route={routes.listFacilityAssetLocation}
       pathParams={{ facility_external_id: facilityId }}
     >
-      {() => (
+      {({ refetch }) => (
         <Page
           title="Location Management"
           backUrl={`/facility/${facilityId}`}
@@ -55,13 +86,30 @@ export default function LocationManagement({ facilityId }: Props) {
               <Loading />
             </PaginatedList.WhenLoading>
             <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
-              {(item) => <Location {...item} />}
+              {(item) => (
+                <Location setShowDeletePopup={setShowDeletePopup} {...item} />
+              )}
             </PaginatedList.Items>
           </div>
 
           <div className="flex w-full items-center justify-center">
             <PaginatedList.Paginator hideIfSinglePage />
           </div>
+
+          <ConfirmDialog
+            title="Delete Location"
+            description="Are you sure you want to delete this location?"
+            action="Confirm"
+            variant="danger"
+            show={showDeletePopup.open}
+            onClose={() =>
+              setShowDeletePopup({ ...showDeletePopup, open: false })
+            }
+            onConfirm={async () => {
+              await deleteAssetLocation();
+              refetch();
+            }}
+          />
         </Page>
       )}
     </PaginatedList>
@@ -76,7 +124,8 @@ const Location = ({
   created_date,
   modified_date,
   id,
-}: LocationModel) => (
+  setShowDeletePopup,
+}: LocationProps) => (
   <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
     <div className="flex-1">
       <div className="flex w-full items-center justify-between gap-2">
@@ -96,16 +145,6 @@ const Location = ({
             </p>
           </div>
         </div>
-        <ButtonV2
-          id="edit-location-button"
-          variant="secondary"
-          border
-          href={`location/${id}/update`}
-          authorizeFor={NonReadOnlyUsers}
-        >
-          <CareIcon className="care-l-pen text-lg" />
-          Edit
-        </ButtonV2>
       </div>
       <p
         className="mt-3 break-all text-sm font-medium text-gray-700"
@@ -134,6 +173,34 @@ const Location = ({
       <CareIcon className="care-l-bed text-lg" />
       Manage Beds
     </ButtonV2>
+    <div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
+      <div className="w-full md:w-1/2">
+        <ButtonV2
+          id="edit-location-button"
+          variant="secondary"
+          border
+          className="w-full"
+          href={`location/${id}/update`}
+          authorizeFor={NonReadOnlyUsers}
+        >
+          <CareIcon className="care-l-pen text-lg" />
+          Edit
+        </ButtonV2>
+      </div>
+      <div className="w-full md:w-1/2">
+        <ButtonV2
+          id="delete-location-button"
+          variant="secondary"
+          border
+          className="w-full"
+          onClick={() => setShowDeletePopup({ open: true, name: name, id: id })}
+          authorizeFor={NonReadOnlyUsers}
+        >
+          <CareIcon className="care-l-trash text-lg" />
+          Delete
+        </ButtonV2>
+      </div>
+    </div>
 
     <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
       <RecordMeta time={created_date} prefix="Created:" />

src/Redux/api.tsx

@@ -353,6 +353,13 @@ const routes = {
     path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/",
     method: "PATCH",
   },
+  deleteFacilityAssetLocation: {
+    path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/",
+    method: "DELETE",
+    TRes: Type<null | {
+      detail?: string;
+    }>(),
+  },
 
   // Asset bed
   listAssetBeds: {