InActiving documents
This commit is contained in:
parent
11be36b67a
commit
528d3b756c
@ -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">
|
||||
<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"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data?.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade show`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header="Delete Document"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleDelete}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isPending}
|
||||
paramData={deletingId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
);
|
||||
},
|
||||
|
||||
})
|
||||
}
|
||||
@ -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}`)
|
||||
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user