From 93cdee65242a676e4feac63de5d39686810a8358 Mon Sep 17 00:00:00 2001
From: SilverD3 <mrboornesilver@gmail.com>
Date: Thu, 17 Oct 2024 09:45:00 +0100
Subject: [PATCH] feat:OH2-404 | supplier deletion

---
 .../accessories/admin/suppliers/Suppliers.tsx |  8 ++
 .../suppliersTable/SuppliersTable.tsx         | 76 ++++++++++++++-----
 src/resources/i18n/en.json                    |  5 +-
 src/state/suppliers/slice.ts                  | 17 ++++-
 src/state/suppliers/thunk.ts                  |  9 +++
 src/state/suppliers/types.ts                  |  2 +-
 6 files changed, 95 insertions(+), 22 deletions(-)

diff --git a/src/components/accessories/admin/suppliers/Suppliers.tsx b/src/components/accessories/admin/suppliers/Suppliers.tsx
index 4f7a7efef..98e97f246 100644
--- a/src/components/accessories/admin/suppliers/Suppliers.tsx
+++ b/src/components/accessories/admin/suppliers/Suppliers.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 
+import { useAppDispatch } from "libraries/hooks/redux";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
+import { deleteSupplier } from "state/suppliers";
 import { PATHS } from "../../../../consts";
 import { SupplierDTO } from "../../../../generated";
 import Button from "../../button/Button";
@@ -9,6 +11,7 @@ import SuppliersTable from "./suppliersTable";
 
 export const Suppliers = () => {
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   const handleEdit = (row: SupplierDTO) => {
@@ -17,9 +20,14 @@ export const Suppliers = () => {
     });
   };
 
+  const handleDelete = (row: SupplierDTO) => {
+    dispatch(deleteSupplier(row.supId));
+  };
+
   return (
     <SuppliersTable
       onEdit={handleEdit}
+      onDelete={handleDelete}
       headerActions={
         <Button
           onClick={() => {
diff --git a/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx b/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
index 0c367a5ab..5db097190 100644
--- a/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
+++ b/src/components/accessories/admin/suppliers/suppliersTable/SuppliersTable.tsx
@@ -1,22 +1,34 @@
 import { CircularProgress } from "@mui/material";
+import ConfirmationDialog from "components/accessories/confirmationDialog/ConfirmationDialog";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { SupplierDTO } from "../../../../../generated";
-import { getSuppliers } from "../../../../../state/suppliers";
+import {
+  deleteSupplierReset,
+  getSuppliers,
+} from "../../../../../state/suppliers";
 import InfoBox from "../../../infoBox/InfoBox";
 import Table from "../../../table/Table";
 import { TFilterField } from "../../../table/filter/types";
 import classes from "./SuppliersTable.module.scss";
 
+import checkIcon from "../../../../../assets/check-icon.png";
+
 interface IOwnProps {
   onEdit: (row: any) => void;
+  onDelete: (row: any) => void;
   headerActions?: ReactNode;
 }
 
-export const SuppliersTable = ({ onEdit, headerActions }: IOwnProps) => {
+export const SuppliersTable = ({
+  onEdit,
+  onDelete,
+  headerActions,
+}: IOwnProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const infoBoxRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     dispatch(getSuppliers());
@@ -44,6 +56,8 @@ export const SuppliersTable = ({ onEdit, headerActions }: IOwnProps) => {
     (state) => state.suppliers.supplierList
   );
 
+  const deleteSupplier = useAppSelector((state) => state.suppliers.delete);
+
   const formatDataToDisplay = (data: SupplierDTO[]) => {
     return data.map((item) => {
       return {
@@ -78,20 +92,48 @@ export const SuppliersTable = ({ onEdit, headerActions }: IOwnProps) => {
 
           case "SUCCESS":
             return (
-              <Table
-                rowData={formatDataToDisplay(data ?? [])}
-                tableHeader={header}
-                labelData={label}
-                columnsOrder={order}
-                rowsPerPage={10}
-                isCollapsabile={true}
-                onEdit={handleEdit}
-                filterColumns={filters}
-                showEmptyCell={false}
-                rowKey="name"
-                manualFilter={false}
-                headerActions={headerActions}
-              />
+              <>
+                <Table
+                  rowData={formatDataToDisplay(data ?? [])}
+                  tableHeader={header}
+                  labelData={label}
+                  columnsOrder={order}
+                  rowsPerPage={10}
+                  isCollapsabile={true}
+                  onEdit={handleEdit}
+                  onDelete={onDelete}
+                  filterColumns={filters}
+                  showEmptyCell={false}
+                  rowKey="name"
+                  manualFilter={false}
+                  headerActions={headerActions}
+                />
+                {deleteSupplier.isLoading && (
+                  <div ref={infoBoxRef} className="info-box-container">
+                    <InfoBox type="info" message={t("supplier.deleting")} />
+                  </div>
+                )}
+                {deleteSupplier.status === "FAIL" && (
+                  <div ref={infoBoxRef} className="info-box-container">
+                    <InfoBox
+                      type="error"
+                      message={deleteSupplier.error?.message || "unknown error"}
+                    />
+                  </div>
+                )}
+                <ConfirmationDialog
+                  isOpen={deleteSupplier.status === "SUCCESS"}
+                  title={t("supplier.deleted")}
+                  icon={checkIcon}
+                  info={t("supplier.deleteSuccess")}
+                  primaryButtonLabel="Ok"
+                  handlePrimaryButtonClick={() => {
+                    dispatch(getSuppliers());
+                    dispatch(deleteSupplierReset());
+                  }}
+                  handleSecondaryButtonClick={() => ({})}
+                />
+              </>
             );
           case "SUCCESS_EMPTY":
             return <InfoBox type="info" message={t("common.emptydata")} />;
diff --git a/src/resources/i18n/en.json b/src/resources/i18n/en.json
index f743ad2aa..ff21176c1 100644
--- a/src/resources/i18n/en.json
+++ b/src/resources/i18n/en.json
@@ -1032,7 +1032,10 @@
     "updated": "Supplier updated",
     "updateSuccess": "Supplier has been updated successfully!",
     "created": "Supplier created",
-    "createSuccess": "Supplier has been created successfully!"
+    "createSuccess": "Supplier has been created successfully!",
+    "deleted": "Supplier deleted",
+    "deleting": "Deleting supplier...",
+    "deleteSuccess": "Supplier has been deleted successfully!"
   },
   "ward": {
     "code": "Code",
diff --git a/src/state/suppliers/slice.ts b/src/state/suppliers/slice.ts
index 80fc69a65..8f8b8cb94 100644
--- a/src/state/suppliers/slice.ts
+++ b/src/state/suppliers/slice.ts
@@ -1,8 +1,8 @@
 import { createSlice } from "@reduxjs/toolkit";
+import { isEmpty } from "lodash";
+import { ApiResponse } from "state/types";
 import { initial } from "./initial";
 import * as thunks from "./thunk";
-import { ApiResponse } from "state/types";
-import { isEmpty } from "lodash";
 
 export const supplierSlice = createSlice({
   name: "suppliers",
@@ -26,7 +26,8 @@ export const supplierSlice = createSlice({
       })
       .addCase(thunks.getSuppliers.fulfilled, (state, action) => {
         state.supplierList = isEmpty(action.payload)
-          ? ApiResponse.empty() : ApiResponse.value(action.payload);
+          ? ApiResponse.empty()
+          : ApiResponse.value(action.payload);
       })
       .addCase(thunks.getSuppliers.rejected, (state, action) => {
         state.supplierList = ApiResponse.error(action.payload);
@@ -50,6 +51,16 @@ export const supplierSlice = createSlice({
       })
       .addCase(thunks.updateSupplier.rejected, (state, action) => {
         state.update = ApiResponse.error(action.payload);
+      })
+      // Delete Supplier
+      .addCase(thunks.deleteSupplier.pending, (state) => {
+        state.delete = ApiResponse.loading();
+      })
+      .addCase(thunks.deleteSupplier.fulfilled, (state, action) => {
+        state.delete = ApiResponse.value(action.payload);
+      })
+      .addCase(thunks.deleteSupplier.rejected, (state, action) => {
+        state.delete = ApiResponse.error(action.payload);
       }),
 });
 
diff --git a/src/state/suppliers/thunk.ts b/src/state/suppliers/thunk.ts
index 03a3e228a..98a634ca9 100644
--- a/src/state/suppliers/thunk.ts
+++ b/src/state/suppliers/thunk.ts
@@ -30,3 +30,12 @@ export const updateSupplier = createAsyncThunk(
       .toPromise()
       .catch((error) => thunkApi.rejectWithValue(error.response))
 );
+
+export const deleteSupplier = createAsyncThunk(
+  "suppliers/deleteSupplier",
+  async (id: number, thunkApi) =>
+    api
+      .deleteSupplier({ id })
+      .toPromise()
+      .catch((error) => thunkApi.rejectWithValue(error.response))
+);
diff --git a/src/state/suppliers/types.ts b/src/state/suppliers/types.ts
index bc9e2ae7a..e894bf571 100644
--- a/src/state/suppliers/types.ts
+++ b/src/state/suppliers/types.ts
@@ -5,5 +5,5 @@ export type ISupplierState = {
   supplierList: ApiResponse<Array<SupplierDTO>>;
   create: ApiResponse<SupplierDTO>;
   update: ApiResponse<SupplierDTO>;
-  delete: ApiResponse<boolean>;
+  delete: ApiResponse<void>;
 };