admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add cards in project list and diectory list views

Browse Source
This commit is contained in:
Vikas Nale 2025-06-20 14:33:51 +05:30 committed by Kartik sharma
parent 21e7ca2157
commit 38374caab3
5 changed files with 278 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/css/default.css
View File

@ -213,3 +213,8 @@
.ql-editor { .ql-editor {
max-height: 200px; max-height: 200px;
} }
/* Remove Table Header Top Line */
thead tr {
border-top: 1px solid white;
}

126
src/pages/Directory/Directory.jsx
View File

@ -326,26 +326,29 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</GlobalModel> </GlobalModel>
)} )}
<div className="card p-2 card-minHeight"> <div className="card p-0 mb-2 ">
<DirectoryPageHeader <div className="card-body p-1 pb-0">
searchText={searchText} <DirectoryPageHeader
setSearchText={setSearchText} searchText={searchText}
setIsActive={setIsActive} setSearchText={setSearchText}
listView={listView} setIsActive={setIsActive}
setListView={setListView} listView={listView}
filteredBuckets={filteredBuckets} setListView={setListView}
tempSelectedBucketIds={tempSelectedBucketIds} filteredBuckets={filteredBuckets}
handleTempBucketChange={handleTempBucketChange} tempSelectedBucketIds={tempSelectedBucketIds}
filteredCategories={filteredCategories} handleTempBucketChange={handleTempBucketChange}
tempSelectedCategoryIds={tempSelectedCategoryIds} filteredCategories={filteredCategories}
handleTempCategoryChange={handleTempCategoryChange} tempSelectedCategoryIds={tempSelectedCategoryIds}
clearFilter={clearFilter} handleTempCategoryChange={handleTempCategoryChange}
applyFilter={applyFilter} clearFilter={clearFilter}
loading={loading} applyFilter={applyFilter}
IsActive={IsActive} loading={loading}
setOpenBucketModal={setOpenBucketModal} IsActive={IsActive}
/> setOpenBucketModal={setOpenBucketModal}
/>
</div>
</div>
<div className="card-minHeight">
{/* Messages when listView is false */} {/* Messages when listView is false */}
{!listView && ( {!listView && (
<div className="d-flex flex-column justify-content-center align-items-center text-center "> <div className="d-flex flex-column justify-content-center align-items-center text-center ">
@ -360,48 +363,55 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
)} )}
{/* Table view (listView === true) */} {/* Table view (listView === true) */}
{listView ? ( {listView ? (
<DirectoryListTableHeader> <div className="card cursor-pointer mt-5">
{loading && ( <div className="card-body p-2 pb-1">
<tr> <DirectoryListTableHeader>
<td colSpan={10}> {loading && (
{" "} <tr>
<p className="mt-10">Loading...</p>{" "} <td colSpan={10}>
</td> {" "}
</tr> <p className="mt-10">Loading...</p>{" "}
)} </td>
</tr>
)}
{!loading && contacts?.length === 0 && ( {!loading && contacts?.length === 0 && (
<tr> <tr>
<td colSpan={10}> <td colSpan={10}>
<p className="mt-10">No contact found</p> <p className="mt-10">No contact found</p>
</td> </td>
</tr> </tr>
)} )}
{!loading && currentItems.length === 0 && contacts?.length > 0 && ( {!loading &&
<tr> currentItems.length === 0 &&
<td colSpan={10}> contacts?.length > 0 && (
<p className="mt-10">No matching contact found</p> <tr>
</td> <td colSpan={10}>
</tr> <p className="mt-10">No matching contact found</p>
)} </td>
</tr>
)}
{!loading && {!loading &&
currentItems.map((contact) => ( currentItems.map((contact) => (
<ListViewDirectory <ListViewDirectory
key={contact.id} key={contact.id}
IsActive={IsActive} IsActive={IsActive}
contact={contact} contact={contact}
setSelectedContact={setSelectedContact} setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal} setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact} setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote} setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact} IsDeleted={setDeleteContact}
restore={handleDeleteContact} restore={handleDeleteContact}
/> />
))} ))}
</DirectoryListTableHeader> </DirectoryListTableHeader>
</div>
</div>
) : ( ) : (
<div className="row mt-5"> <div className="row mt-5">
{!loading && {!loading &&

8
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -32,16 +32,16 @@ const DirectoryPageHeader = ({
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 "> <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
<input <input
type="search" type="search"
className="form-control me-2" className="form-control"
placeholder="Search Contact..." placeholder="Search Contact..."
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} onChange={(e) => setSearchText(e.target.value)}
style={{ width: "200px" }} style={{ width: "200px" }}
/> />
<div className="d-flex gap-2 "> <div className="d-flex gap-2">
<button <button
type="button" type="button"
className={`btn btn-xs ${ className={`btn btn-sm p-1 ${
!listView ? "btn-primary" : "btn-outline-primary" !listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(false)} onClick={() => setListView(false)}
@ -55,7 +55,7 @@ const DirectoryPageHeader = ({
</button> </button>
<button <button
type="button" type="button"
className={`btn btn-xs ${ className={`btn btn-sm p-1 ${
listView ? "btn-primary" : "btn-outline-primary" listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(true)} onClick={() => setListView(true)}

389
src/pages/project/ProjectList.jsx
View File

@ -125,6 +125,7 @@ const ProjectList = () => {
indexOfLastItem indexOfLastItem
); );
const totalPages = Math.ceil(filteredProjects.length / itemsPerPage); const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
useEffect(() => { useEffect(() => {
const tooltipTriggerList = Array.from( const tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]') document.querySelectorAll('[data-bs-toggle="tooltip"]')
@ -201,212 +202,220 @@ const ProjectList = () => {
{ label: "Projects", link: null }, { label: "Projects", link: null },
]} ]}
/> />
<div className="card cursor-pointer mb-5">
<div className="card-body p-2 pb-1">
<div className="d-flex flex-wrap justify-content-between align-items-start">
<div className="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search projects..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
/>
</div>
<div className="d-flex flex-wrap justify-content-between align-items-start mb-4"> <div className="d-flex gap-2 mb-2">
<div className="d-flex flex-wrap align-items-start"> <button
<div className="flex-grow-1 me-2 mb-2"> type="button"
<input className={`btn btn-sm p-1 ${
type="search" !listView ? "btn-primary" : "btn-outline-primary"
className="form-control form-control-sm" }`}
placeholder="Search projects..." onClick={() => setListView(false)}
value={searchTerm} data-bs-toggle="tooltip"
onChange={(e) => { data-bs-custom-class="tooltip"
setSearchTerm(e.target.value); title="Card View"
setCurrentPage(1); >
}} <i className="bx bx-grid-alt fs-5"></i>
/> </button>
<button
type="button"
className={`btn btn-sm p-1 ${
listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul fs-5"></i>
</button>
</div>
<div className="dropdown ms-3 mt-1">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="fa-solid fa-filter fs-4"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
</div>
<div>
<button
type="button"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip"
title="Add New Project"
className={`p-1 me-2 bg-primary rounded-circle ${
!HasManageProject && "d-none"
}`}
onClick={handleShow}
>
<i className="bx bx-plus fs-4 text-white"></i>
</button>
</div>
</div> </div>
<div className="d-flex gap-2 mb-2">
<button
type="button"
className={`btn btn-sm ${
!listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(false)}
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip"
title="Card View"
>
<i className="bx bx-grid-alt bx-sm"></i>
</button>
<button
type="button"
className={`btn btn-sm ${
listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip"
title="List View"
>
<i className="bx bx-list-ul bx-sm"></i>
</button>
</div>
<div className="dropdown ms-3">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-filter bx-lg"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
</div>
</div>
<div>
<button
type="button"
className={`btn btn-sm btn-primary ${
!HasManageProject && "d-none"
}`}
onClick={handleShow}
>
<i className="bx bx-plus-circle me-2"></i>
Create New Project
</button>
</div> </div>
</div> </div>
{loading && <p className="text-center">Loading...</p>} {loading && <p className="text-center">Loading...</p>}
{!loading && filteredProjects.length === 0 && !listView && ( {!loading && filteredProjects.length === 0 && !listView && (
<p className="text-center text-muted">No projects found.</p> <p className="text-center text-muted">No projects found.</p>
)} )}
<div className="row"> {listView ? (
{listView ? ( <div className="card cursor-pointer">
<div className="table-responsive text-nowrap py-2 "> <div className="card-body p-2">
<table className="table px-2"> <div className="table-responsive text-nowrap py-2 ">
<thead> <table className="table m-3">
<tr> <thead>
<th className="text-start" colSpan={5}>
Project Name
</th>
<th className="mx-2 text-start">Contact Person</th>
<th className="mx-2">START DATE</th>
<th className="mx-2">DEADLINE</th>
<th className="mx-2">Task</th>
<th className="mx-2">Progress</th>
<th className="mx-2">
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Status <i className="bx bx-filter bx-sm"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">
{label}
</label>
</div>
</li>
))}
</ul>
</div>
</th>
<th
className={`mx-2 ${
HasManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
Action
</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{currentItems.length === 0 ? (
<tr> <tr>
<td colSpan="12" className="text-center py-4"> <th className="text-start" colSpan={5}>
No projects found Project Name
</td> </th>
<th className="mx-2 text-start">Contact Person</th>
<th className="mx-2">START DATE</th>
<th className="mx-2">DEADLINE</th>
<th className="mx-2">Task</th>
<th className="mx-2">Progress</th>
<th className="mx-2">
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Status <i className="bx bx-filter bx-sm"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
{
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
label: "Active",
},
{
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
label: "On Hold",
},
{
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
label: "Inactive",
},
{
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
label: "Completed",
},
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">
{label}
</label>
</div>
</li>
))}
</ul>
</div>
</th>
<th
className={`mx-2 ${
HasManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
Action
</th>
</tr> </tr>
) : ( </thead>
currentItems.map((project) => ( <tbody className="table-border-bottom-0 overflow-auto ">
<ProjectListView {currentItems.length === 0 ? (
key={project.id} <tr>
projectData={project} <td colSpan="12" className="text-center py-4">
recall={sortingProject} No projects found
/> </td>
)) </tr>
)} ) : (
</tbody> currentItems.map((project) => (
</table> <ProjectListView
</div> key={project.id}
) : ( projectData={project}
currentItems.map((project) => ( recall={sortingProject}
/>
))
)}
</tbody>
</table>
</div>{" "}
</div>{" "}
</div>
) : (
<div className="row">
{currentItems.map((project) => (
<ProjectCard <ProjectCard
key={project.id} key={project.id}
projectData={project} projectData={project}
recall={sortingProject} recall={sortingProject}
/> />
)) ))}
)} </div>
</div> )}
{!loading && totalPages > 1 && ( {!loading && totalPages > 1 && (
<nav> <nav>

4
src/pages/project/ProjectListView.jsx
View File

@ -110,14 +110,14 @@ const ProjectListView = ({ projectData, recall }) => {
<tr className="py-8"> <tr className="py-8">
<td className="text-start" colSpan={5}> <td className="text-start" colSpan={5}>
<strong <span
className="text-primary cursor-pointer" className="text-primary cursor-pointer"
onClick={() => navigate(`/projects/${projectInfo.id}`)} onClick={() => navigate(`/projects/${projectInfo.id}`)}
> >
{projectInfo.shortName {projectInfo.shortName
? `${projectInfo.name} (${projectInfo.shortName})` ? `${projectInfo.name} (${projectInfo.shortName})`
: projectInfo.name} : projectInfo.name}
</strong> </span>
</td> </td>
<td className="text-start small">{projectInfo.contactPerson}</td> <td className="text-start small">{projectInfo.contactPerson}</td>
<td className="small text-center"> <td className="small text-center">