imported projectLisComponent
This commit is contained in:
parent
1cdfb47c39
commit
b4d2fd86f7
@ -7,31 +7,29 @@ import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDispatch } from "react-redux";
|
||||
import showToast from "../../services/toastService";
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission"
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import ProjectListView from "./ProjectListView";
|
||||
|
||||
const ProjectList = () =>
|
||||
{
|
||||
|
||||
|
||||
const ProjectList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [listView, setListView] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const { projects, loading, error, refetch } = useProjects();
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT )
|
||||
const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const [HasManageProject, setHasManageProject] = useState(
|
||||
HasManageProjectPermission
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(6);
|
||||
|
||||
|
||||
const handleShow = () => setShowModal(true);
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && Array.isArray(projects)) {
|
||||
// Step 1: Group projects by statusId
|
||||
@ -56,32 +54,31 @@ const ProjectList = () =>
|
||||
|
||||
setProjectList(sortedGrouped); // final sorted flat list
|
||||
}
|
||||
|
||||
}, [projects, loginUser?.projects, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loginUser) {
|
||||
setHasManageProject(HasManageProjectPermission);
|
||||
} else {
|
||||
setHasManageProject(false); }
|
||||
setHasManageProject(false);
|
||||
}
|
||||
}, [loginUser, HasManageProjectPermission]);
|
||||
|
||||
|
||||
|
||||
const handleSubmitForm = (newProject) => {
|
||||
ProjectRepository.manageProject(newProject)
|
||||
.then( ( response ) =>
|
||||
{
|
||||
|
||||
.then((response) => {
|
||||
const cachedProjects_list = getCachedData("projectslist") || [];
|
||||
|
||||
const updated_Projects_list = [...cachedProjects_list, response.data];
|
||||
|
||||
cacheData("projectslist", updated_Projects_list);
|
||||
setProjectList((prevProjectList) => [...prevProjectList, response.data]);
|
||||
setProjectList((prevProjectList) => [
|
||||
...prevProjectList,
|
||||
response.data,
|
||||
]);
|
||||
|
||||
showToast("Project Created successfully.", "success");
|
||||
setShowModal(false)
|
||||
setShowModal(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
closeModal();
|
||||
@ -107,15 +104,13 @@ const ProjectList = () =>
|
||||
? Math.ceil(projectList.length / itemsPerPage)
|
||||
: 0;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`modal fade ${showModal ? 'show' : ''}`}
|
||||
className={`modal fade ${showModal ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? 'block' : 'none' }}
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<ManageProjectInfo
|
||||
@ -133,16 +128,51 @@ const ProjectList = () =>
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="row">
|
||||
<div
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
{/* <div
|
||||
className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${
|
||||
!error && !projects ? "text-center" : "text-end"
|
||||
}`}
|
||||
>
|
||||
{" "}
|
||||
|
||||
|
||||
</div> */}
|
||||
|
||||
<div>
|
||||
<div
|
||||
id="DataTables_Table_0_filter"
|
||||
className="dataTables_filter d-flex justify-content-start"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search"
|
||||
aria-controls="DataTables_Table_0"
|
||||
></input>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`}
|
||||
className={`btn btn-icon btn-sm ms-2 p-0 ${ listView ? "btn-secondary" : "btn-label-secondary" }`}
|
||||
onClick={()=>setListView(!listView)}
|
||||
>
|
||||
<span class="bx bx-list-ul"></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-icon btn-sm ms-2 p-0 ${ listView ? "btn-label-secondary" : "btn-secondary" }`}
|
||||
onClick={()=>setListView(!listView)}
|
||||
>
|
||||
<span class="bx bx-grid-alt"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${
|
||||
!HasManageProject && "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#create-project-model"
|
||||
onClick={handleShow}
|
||||
@ -175,8 +205,8 @@ const ProjectList = () =>
|
||||
<div className="row">
|
||||
{loading && <p className="text-center">Loading...</p>}
|
||||
|
||||
|
||||
{currentItems &&
|
||||
{listView ? <ProjectListView/> :
|
||||
currentItems &&
|
||||
currentItems.map((item) => (
|
||||
<ProjectCard projectData={item} key={item.id}></ProjectCard>
|
||||
))}
|
||||
@ -186,9 +216,7 @@ const ProjectList = () =>
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
|
Loading…
x
Reference in New Issue
Block a user