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;
}

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

@ -326,7 +326,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</GlobalModel> </GlobalModel>
)} )}
<div className="card p-2 card-minHeight"> <div className="card p-0 mb-2 ">
<div className="card-body p-1 pb-0">
<DirectoryPageHeader <DirectoryPageHeader
searchText={searchText} searchText={searchText}
setSearchText={setSearchText} setSearchText={setSearchText}
@ -345,7 +346,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
IsActive={IsActive} IsActive={IsActive}
setOpenBucketModal={setOpenBucketModal} 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,7 +363,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
)} )}
{/* Table view (listView === true) */} {/* Table view (listView === true) */}
{listView ? ( {listView ? (
<div className="card cursor-pointer mt-5">
<div className="card-body p-2 pb-1">
<DirectoryListTableHeader> <DirectoryListTableHeader>
{loading && ( {loading && (
<tr> <tr>
@ -379,7 +385,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
</tr> </tr>
)} )}
{!loading && currentItems.length === 0 && contacts?.length > 0 && ( {!loading &&
currentItems.length === 0 &&
contacts?.length > 0 && (
<tr> <tr>
<td colSpan={10}> <td colSpan={10}>
<p className="mt-10">No matching contact found</p> <p className="mt-10">No matching contact found</p>
@ -402,6 +410,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
/> />
))} ))}
</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)}

53
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,8 +202,9 @@ const ProjectList = () => {
{ label: "Projects", link: null }, { label: "Projects", link: null },
]} ]}
/> />
<div className="card cursor-pointer mb-5">
<div className="d-flex flex-wrap justify-content-between align-items-start mb-4"> <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="d-flex flex-wrap align-items-start">
<div className="flex-grow-1 me-2 mb-2"> <div className="flex-grow-1 me-2 mb-2">
<input <input
@ -220,41 +222,39 @@ const ProjectList = () => {
<div className="d-flex gap-2 mb-2"> <div className="d-flex gap-2 mb-2">
<button <button
type="button" type="button"
className={`btn btn-sm ${ className={`btn btn-sm p-1 ${
!listView ? "btn-primary" : "btn-outline-primary" !listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(false)} onClick={() => setListView(false)}
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="Card View" title="Card View"
> >
<i className="bx bx-grid-alt bx-sm"></i> <i className="bx bx-grid-alt fs-5"></i>
</button> </button>
<button <button
type="button" type="button"
className={`btn btn-sm ${ className={`btn btn-sm p-1 ${
listView ? "btn-primary" : "btn-outline-primary" listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(true)} onClick={() => setListView(true)}
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="List View" title="List View"
> >
<i className="bx bx-list-ul bx-sm"></i> <i className="bx bx-list-ul fs-5"></i>
</button> </button>
</div> </div>
<div className="dropdown ms-3"> <div className="dropdown ms-3 mt-1">
<a <a
className="dropdown-toggle hide-arrow cursor-pointer" className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
data-bs-custom-class="tooltip"
title="Filter"
> >
<i className="bx bx-filter bx-lg"></i> <i className="fa-solid fa-filter fs-4"></i>
</a> </a>
<ul className="dropdown-menu p-2 text-capitalize"> <ul className="dropdown-menu p-2 text-capitalize">
{[ {[
@ -294,26 +294,32 @@ const ProjectList = () => {
<div> <div>
<button <button
type="button" type="button"
className={`btn btn-sm btn-primary ${ 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" !HasManageProject && "d-none"
}`} }`}
onClick={handleShow} onClick={handleShow}
> >
<i className="bx bx-plus-circle me-2"></i> <i className="bx bx-plus fs-4 text-white"></i>
Create New Project
</button> </button>
</div> </div>
</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="card-body p-2">
<div className="table-responsive text-nowrap py-2 "> <div className="table-responsive text-nowrap py-2 ">
<table className="table px-2"> <table className="table m-3">
<thead> <thead>
<tr> <tr>
<th className="text-start" colSpan={5}> <th className="text-start" colSpan={5}>
@ -396,17 +402,20 @@ const ProjectList = () => {
)} )}
</tbody> </tbody>
</table> </table>
</div>{" "}
</div>{" "}
</div> </div>
) : ( ) : (
currentItems.map((project) => ( <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">