InActiving documents

src/components/Documents/DocumentsList.jsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { useDocumentListByEntityId } from "../../hooks/useDocument";
+import {
+  useActiveInActiveDocument,
+  useDocumentListByEntityId,
+} from "../../hooks/useDocument";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Avatar from "../common/Avatar";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
@@ -8,6 +11,7 @@ import { useDebounce } from "../../utils/appUtils";
 import { DocumentTableSkeleton } from "./DocumentSkeleton";
 import { getDocuementsStatus, useDocumentContext } from "./Documents";
 import Pagination from "../common/Pagination";
+import ConfirmModal from "../common/ConfirmModal";
 
 const DocumentsList = ({
   Document_Entity,
@@ -17,6 +21,8 @@ const DocumentsList = ({
   setIsRefetching,
   setRefetchFn,
 }) => {
+  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState(null);
   const debouncedSearch = useDebounce(searchText, 500);
   const [currentPage, setCurrentPage] = useState(1);
   const { data, isError, isLoading, error, refetch, isFetching } =
@@ -40,7 +46,7 @@ const DocumentsList = ({
   }, [isFetching, setIsRefetching]);
 
   const { setManageDoc, setViewDoc } = useDocumentContext();
-
+  const { mutate: ActiveInActive, isPending } = useActiveInActiveDocument();
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
@@ -59,6 +65,18 @@ const DocumentsList = ({
   if (isSearchEmpty) return <div>No results found for "{debouncedSearch}"</div>;
   if (isFilterEmpty) return <div>No documents match your filter.</div>;
 
+  const handleDelete = () => {
+    debugger;
+    ActiveInActive(
+      { documentId: deletingId, isActive: false },
+      {
+        onSettled: () => {
+          setDeletingId(null);
+          setIsDeleteModalOpen(false);
+        },
+      }
+    );
+  };
   const DocumentColumns = [
     {
       key: "name",
@@ -113,59 +131,92 @@ const DocumentsList = ({
   ];
 
   return (
-    <div className="table-responsive">
+    <>
-      <table className="table border-top dataTable text-nowrap">
+      {IsDeleteModalOpen && (
-        <thead>
+        <div
-          <tr className="shadow-sm">
+          className={`modal fade show`}
-            {DocumentColumns.map((col) => (
+          tabIndex="-1"
-              <th key={col.key} className={`sorting ${col.align}`}>
+          role="dialog"
-                {col.label}
+          style={{
-              </th>
+            display: "block",
-            ))}
+            backgroundColor: "rgba(0,0,0,0.5)",
-            <th className="sticky-action-column bg-white text-center">
+          }}
-              Action
+          aria-hidden="false"
-            </th>
+        >
-          </tr>
+          <ConfirmModal
-        </thead>
+            type="delete"
-        <tbody className="text-start">
+            header="Delete Document"
-          {data?.data?.map((doc) => (
+            message="Are you sure you want delete?"
-            <tr key={doc.id}>
+            onSubmit={handleDelete}
-              {DocumentColumns.map((col) => (
+            onClose={() => setIsDeleteModalOpen(false)}
-                <td key={col.key} className={`sorting ${col.align}`}>
+            loading={isPending}
-                  {col.customRender ? col.customRender(doc) : col.getValue(doc)}
+            paramData={deletingId}
-                </td>
+          />
-              ))}
+        </div>
-              <td className="text-center">
-                <div className="d-flex justify-content-center gap-2">
-                  <i
-                    className="bx bx-show text-primary cursor-pointer"
-                    onClick={() =>
-                      setViewDoc({ document: doc?.id, isOpen: true })
-                    }
-                  ></i>
-
-                  <i
-                    className="bx bx-edit text-secondary cursor-pointer"
-                    onClick={() =>
-                      setManageDoc({ document: doc?.id, isOpen: true })
-                    }
-                  ></i>
-
-                  <i className="bx bx-trash text-danger cursor-pointer"></i>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {data?.data?.length > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={data?.totalPages}
-          onPageChange={paginate}
-        />
       )}
-    </div>
+
+      <div className="table-responsive">
+        <table className="table border-top dataTable text-nowrap">
+          <thead>
+            <tr className="shadow-sm">
+              {DocumentColumns.map((col) => (
+                <th key={col.key} className={`sorting ${col.align}`}>
+                  {col.label}
+                </th>
+              ))}
+              <th className="sticky-action-column bg-white text-center">
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tbody className="text-start">
+            {data?.data?.map((doc) => (
+              <tr key={doc.id}>
+                {DocumentColumns.map((col) => (
+                  <td key={col.key} className={`sorting ${col.align}`}>
+                    {col.customRender
+                      ? col.customRender(doc)
+                      : col.getValue(doc)}
+                  </td>
+                ))}
+                <td className="text-center">
+                  <div className="d-flex justify-content-center gap-2">
+                    <i
+                      className="bx bx-show text-primary cursor-pointer"
+                      onClick={() =>
+                        setViewDoc({ document: doc?.id, isOpen: true })
+                      }
+                    ></i>
+
+                    <i
+                      className="bx bx-edit text-secondary cursor-pointer"
+                      onClick={() =>
+                        setManageDoc({ document: doc?.id, isOpen: true })
+                      }
+                    ></i>
+
+                    <i
+                      className="bx bx-trash text-danger cursor-pointer"
+                      onClick={() => {
+                        setIsDeleteModalOpen(true);
+                        setDeletingId(doc?.id);
+                      }}
+                    ></i>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data?.totalPages}
+            onPageChange={paginate}
+          />
+        )}
+      </div>
+    </>
   );
 };
 

src/components/Documents/ViewDocument.jsx

@@ -40,7 +40,10 @@ const ViewDocument = () => {
   };
 
   if (isLoading) return <DocumentDetailsSkeleton />;
-  if (isError) return <div>{error.message}</div>;
+  if (isError) return <div>
+    <p>{error?.response?.data?.message || error?.message}</p>
+    <p className="danger-text">{error?.response?.status}</p>
+  </div>;
   return (
     <div className="p-1">
       <p className="fw-bold fs-6">Document Details</p>

src/hooks/useDocument.js

@@ -164,5 +164,28 @@ export const useVerifyDocument = ()=>{
       );
     },
 
+  })
+}
+
+export const useActiveInActiveDocument = ()=>{
+    const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn:async({documentId,isActive}) => await DocumentRepository.deleteDocument(documentId,isActive),
+    onSuccess: (data, variables) => {
+     queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
+      showToast(
+        data.response.data.message ||
+          "Document Successfully Verified !",
+        "success"
+      );
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong please try again !",
+        "error"
+      );
+    },
+
   })
 }

src/repositories/DocumentRepository.jsx

@@ -18,7 +18,7 @@ export const DocumentRepository = {
 
    verifyDocument:(id,isVerify)=>api.post(`/api/Document/verify/${id}/?isVerify=${isVerify}`),
 
-   deleteDocument:(id)=>api.delete(`/api/Document/delete/${id}`)
+   deleteDocument:(id,isActive)=>api.delete(`/api/Document/delete/${id}/?isActive=${isActive}`)
 
 
 }