initialli refactoring directory
This commit is contained in:
parent
42b6802419
commit
6a472b39ef
14
src/components/Directory/AssignedBucket.jsx
Normal file
14
src/components/Directory/AssignedBucket.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import EmployeeList from "./EmployeeList";
|
||||
|
||||
const AssignedBucket = ({ employees, selectedBucket, onChange }) => {
|
||||
if (!selectedBucket) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-1">
|
||||
<EmployeeList employees={employees} onChange={onChange} bucket={selectedBucket} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignedBucket;
|
||||
44
src/components/Directory/BucketForm.jsx
Normal file
44
src/components/Directory/BucketForm.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { bucketScheam } from "./DirectorySchema";
|
||||
|
||||
const BucketForm = ({ onSubmit, selectedBucket, onCancel, isSubmitting }) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(bucketScheam),
|
||||
defaultValues: {
|
||||
name: selectedBucket?.name || "",
|
||||
description: selectedBucket?.description || "",
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="bucketName" className="form-label">Bucket Name</label>
|
||||
<input id="bucketName" className="form-control form-control-sm" {...register("name")} />
|
||||
{errors.name && <small className="danger-text">{errors.name.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="bucketDescription" className="form-label">Bucket Description</label>
|
||||
<textarea id="bucketDescription" className="form-control form-control-sm" rows="3" {...register("description")} />
|
||||
{errors.description && <small className="danger-text">{errors.description.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 d-flex justify-content-center gap-3">
|
||||
<button type="button" onClick={onCancel} className="btn btn-sm btn-secondary" disabled={isSubmitting}>Cancel</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Please wait..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default BucketForm;
|
||||
36
src/components/Directory/BucketList.jsx
Normal file
36
src/components/Directory/BucketList.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
|
||||
const BucketList = ({ buckets, searchTerm, onEdit, onDelete, loading }) => {
|
||||
const filteredBuckets = buckets.filter(bucket =>
|
||||
bucket.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) return <p className="text-center">Loading...</p>;
|
||||
if (filteredBuckets.length === 0) return <p className="text-center">No buckets found.</p>;
|
||||
|
||||
return (
|
||||
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
|
||||
{filteredBuckets.map(bucket => (
|
||||
<div className="col" key={bucket.id}>
|
||||
<div className="card h-100">
|
||||
<div className="card-body p-4">
|
||||
<h6 className="card-title d-flex justify-content-between">
|
||||
<span>{bucket.name}</span>
|
||||
<div className="d-flex gap-2">
|
||||
<i className="bx bx-edit bx-sm text-primary cursor-pointer" onClick={() => onEdit(bucket)}></i>
|
||||
<i className="bx bx-trash bx-sm text-danger cursor-pointer" onClick={() => onDelete(bucket.id)}></i>
|
||||
</div>
|
||||
</h6>
|
||||
<h6 className="card-subtitle mb-2 text-muted">Contacts: {bucket.numberOfContacts || 0}</h6>
|
||||
<p className="card-text" title={bucket.description}>
|
||||
{bucket.description || "No description available."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BucketList;
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useSortableData } from "../../hooks/useSortableData";
|
||||
import Avatar from "../common/Avatar";
|
||||
|
||||
const EmployeeList = ({ employees, onChange, bucket }) => {
|
||||
const [employeefiltered, setEmployeeFilter] = useState([]);
|
||||
const [employeeStatusList, setEmployeeStatusList] = useState([]);
|
||||
@ -69,6 +70,8 @@ const EmployeeList = ({ employees, onChange, bucket }) => {
|
||||
`${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
|
||||
return fullName.includes(searchTerm.toLowerCase());
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex justify-content-between align-items-center mt-2">
|
||||
|
||||
@ -9,8 +9,8 @@ const NotesCardViewDirectory = ({
|
||||
searchText,
|
||||
filterAppliedNotes,
|
||||
}) => {
|
||||
|
||||
const projectId = useSelectedProject();
|
||||
|
||||
const [allNotes, setAllNotes] = useState([]);
|
||||
const [filteredNotes, setFilteredNotes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@ -29,7 +29,7 @@ const NotesCardViewDirectory = ({
|
||||
const fetchNotes = async (projId) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await DirectoryRepository.GetNotes(1000, 1, projId); // ✅ pass projectId
|
||||
const response = await DirectoryRepository.GetNotes(1000, 1, projId);
|
||||
const fetchedNotes = response.data?.data || [];
|
||||
setAllNotes(fetchedNotes);
|
||||
setNotesForFilter(fetchedNotes)
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { DirectoryRepository } from "../repositories/DirectoryRepository";
|
||||
import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const useDirectory = (isActive,prefernceContacts) => {
|
||||
const [contacts, setContacts] = useState([]);
|
||||
@ -210,3 +211,22 @@ export const useDesignation = () => {
|
||||
|
||||
return { designationList, loading, error };
|
||||
};
|
||||
|
||||
// ------------------------------Query--------------------------------------------
|
||||
|
||||
export const useBucketList =()=>{
|
||||
return useQuery({
|
||||
queryKey:["bucketList"],
|
||||
queryFn:async()=>{
|
||||
const resp = await DirectoryRepository.GetBucktes();
|
||||
return resp.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const useDirectoryNotes=(pageSize, pageNumber, filter, searchString)=>{
|
||||
return useQuery({
|
||||
queryKey:["directoryNotes",pageSize, pageNumber, filter, searchString],
|
||||
queryFn:async()=> await DirectoryRepository.GetBucktes(pageSize, pageNumber, filter, searchString),
|
||||
})
|
||||
}
|
||||
23
src/pages/Directory/ContactsPage.jsx
Normal file
23
src/pages/Directory/ContactsPage.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useFab } from '../../Context/FabContext';
|
||||
|
||||
const ContactsPage = () => {
|
||||
const {setOffcanvasContent,setShowTrigger} = useFab()
|
||||
useEffect(() => {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Contacts Filters",
|
||||
<div>hlleo</div>
|
||||
);
|
||||
|
||||
return () => {
|
||||
setShowTrigger(false);
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<div>ContactsPage</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactsPage
|
||||
@ -489,4 +489,5 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Directory;
|
||||
export default Directory;
|
||||
|
||||
|
||||
187
src/pages/Directory/DirectoryPage.jsx
Normal file
187
src/pages/Directory/DirectoryPage.jsx
Normal file
@ -0,0 +1,187 @@
|
||||
import {
|
||||
useState,
|
||||
Suspense,
|
||||
lazy,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
} from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import { useBucketList, useBuckets } from "../../hooks/useDirectory";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManageBucket from "../../components/Directory/ManageBucket";
|
||||
|
||||
const NotesPage = lazy(() => import("./NotesPage"));
|
||||
const ContactsPage = lazy(() => import("./ContactsPage"));
|
||||
|
||||
export const DirectoryContext = createContext();
|
||||
export const useDirectoryContext = () => {
|
||||
const context = useContext(DirectoryContext);
|
||||
|
||||
if (!context) {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<p>Your Action is out of context</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
export default function DirectoryPage({ IsPage = true }) {
|
||||
const [activeTab, setActiveTab] = useState("notes");
|
||||
const { setActions } = useFab();
|
||||
const [isOpenBucket, setOpenBucket] = useState(false);
|
||||
|
||||
const { data, isLoading, isError, error } = useBucketList();
|
||||
|
||||
const handleTabClick = (tab, e) => {
|
||||
e.preventDefault();
|
||||
setActiveTab(tab);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const actions = [];
|
||||
|
||||
if (IsPage) {
|
||||
actions.push({
|
||||
label: "Manage Bucket",
|
||||
icon: "fa-solid fa-bucket fs-5",
|
||||
color: "primary",
|
||||
onClick: () => setOpenBucket(true),
|
||||
});
|
||||
}
|
||||
if (data?.length > 0) {
|
||||
actions.push({
|
||||
label: "New Contact",
|
||||
icon: "bx bx-plus-circle",
|
||||
color: "warning",
|
||||
// onClick: ()=>setOpenBucket(true),
|
||||
});
|
||||
}
|
||||
|
||||
setActions(actions);
|
||||
|
||||
return () => setActions([]);
|
||||
}, [IsPage, data]);
|
||||
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
return (
|
||||
<>
|
||||
<DirectoryContext.Provider>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Directory", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="card">
|
||||
<div className="nav-align-top mb-1">
|
||||
<ul className="nav nav-tabs">
|
||||
<li className="nav-item cursor-pointer">
|
||||
<a
|
||||
className={`nav-link ${
|
||||
activeTab === "notes" ? "active" : ""
|
||||
} fs-6`}
|
||||
onClick={(e) => handleTabClick("notes", e)}
|
||||
>
|
||||
<i className="bx bx-note bx-sm me-1_5"></i>
|
||||
<span className="d-none d-md-inline ">Notes</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item cursor-pointer">
|
||||
<a
|
||||
className={`nav-link ${
|
||||
activeTab === "contacts" ? "active" : ""
|
||||
} fs-6`}
|
||||
onClick={(e) => handleTabClick("contacts", e)}
|
||||
>
|
||||
<i className="bx bxs-contact bx-sm me-1_5"></i>
|
||||
<span className="d-none d-md-inline">Contacts</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-1">
|
||||
<div className="d-flex align-items-center justify-content-between px-2">
|
||||
<div>
|
||||
{activeTab === "notes" && (
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search notes..."
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === "contacts" && (
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search contacts..."
|
||||
/>
|
||||
<button className="btn btn-xs btn-outline-secondary">
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
<button className="btn btn-xs btn-outline-secondary">
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-sm btn-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-download"></i> Export
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a className="dropdown-item">Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item">Another action</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="text-center py-5">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{activeTab === "notes" && <NotesPage />}
|
||||
{activeTab === "contacts" && <ContactsPage />}
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{isOpenBucket && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={isOpenBucket}
|
||||
closeModal={() => setOpenBucket(false)}
|
||||
>
|
||||
<ManageBucket closeModal={() => setOpenBucket(false)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
</div>
|
||||
</DirectoryContext.Provider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/pages/Directory/NotesPage.jsx
Normal file
26
src/pages/Directory/NotesPage.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useFab } from '../../Context/FabContext';
|
||||
|
||||
const NotesPage = () => {
|
||||
|
||||
const {setOffcanvasContent,setShowTrigger} = useFab()
|
||||
useEffect(() => {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Notes Filters",
|
||||
<div>hlleo</div>
|
||||
);
|
||||
|
||||
return () => {
|
||||
setShowTrigger(false);
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<div className='container'>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotesPage
|
||||
@ -34,8 +34,10 @@ export const DirectoryRepository = {
|
||||
DeleteNote: (id, isActive) =>
|
||||
api.delete(`/api/directory/note/${id}?active=${isActive}`),
|
||||
|
||||
GetNotes: (pageSize, pageNumber, projectId) =>
|
||||
api.get(
|
||||
`/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}&projectId=${projectId}`
|
||||
),
|
||||
GetNotes: (pageSize, pageNumber, filter, searchString) => {
|
||||
const payloadJsonString = JSON.stringify(filter);
|
||||
return api.get(
|
||||
`/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@ -44,6 +44,7 @@ import ExpensePage from "../pages/Expense/ExpensePage";
|
||||
import TenantDetails from "../pages/Tenant/TenantDetails";
|
||||
import SelfTenantDetails from "../pages/Tenant/SelfTenantDetails";
|
||||
import SuperTenantDetails from "../pages/Tenant/SuperTenantDetails";
|
||||
import DirectoryPage from "../pages/Directory/DirectoryPage";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
@ -75,7 +76,7 @@ const router = createBrowserRouter(
|
||||
{ path: "/employee/:employeeId", element: <EmployeeProfile /> },
|
||||
// { path: "/employee/manage", element: <ManageEmp /> },
|
||||
// {path: "/employee/manage/:employeeId", element: <ManageEmp />},
|
||||
{ path: "/directory", element: <Directory /> },
|
||||
{ path: "/directory", element: <DirectoryPage /> },
|
||||
{ path: "/inventory", element: <Inventory /> },
|
||||
{ path: "/activities/attendance", element: <AttendancePage /> },
|
||||
{ path: "/activities/records/:projectId?", element: <DailyTask /> },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user