Merge pull request 'pramod_Task#105' (#52) from pramod_Task#105 into Issues_April_4W
Reviewed-on: #52
This commit is contained in:
commit
162c91c1aa
214
src/components/Directory/ManageDirectory.jsx
Normal file
214
src/components/Directory/ManageDirectory.jsx
Normal file
@ -0,0 +1,214 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm, useFieldArray, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import TagInput from "../common/TagInput";
|
||||
import { z } from "zod";
|
||||
|
||||
export const directorySchema = z.object({
|
||||
firstName: z.string().min(1, "First Name is required"),
|
||||
lastName: z.string().min(1, "Last Name is required"),
|
||||
organization: z.string().min(1, "Organization name is required"),
|
||||
type: z.string().min(1, "Type is required"),
|
||||
address: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
email: z
|
||||
.array(z.string().email("Invalid email"))
|
||||
.nonempty("At least one email required"),
|
||||
phone: z
|
||||
.array(z.string().regex(/^\d{10}$/, "Phone must be 10 digits"))
|
||||
.nonempty("At least one phone number is required"),
|
||||
tags: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
|
||||
|
||||
const ManageDirectory = () => {
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(directorySchema),
|
||||
defaultValues: {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
organization: "",
|
||||
type: "",
|
||||
address: "",
|
||||
description: "",
|
||||
email: [""],
|
||||
phone: [""],
|
||||
tags: [],
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
getValues,
|
||||
trigger,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const {
|
||||
fields: emailFields,
|
||||
append: appendEmail,
|
||||
remove: removeEmail,
|
||||
} = useFieldArray({ control, name: "email" });
|
||||
|
||||
const {
|
||||
fields: phoneFields,
|
||||
append: appendPhone,
|
||||
remove: removePhone,
|
||||
} = useFieldArray({ control, name: "phone" });
|
||||
|
||||
useEffect(() => {
|
||||
if (emailFields.length === 0) appendEmail("");
|
||||
if (phoneFields.length === 0) appendPhone("");
|
||||
}, [emailFields.length, phoneFields.length]);
|
||||
|
||||
const onSubmit = (data) => {
|
||||
console.log("Submitted:\n" + JSON.stringify(data, null, 2));
|
||||
};
|
||||
|
||||
const handleAddEmail = async () => {
|
||||
const emails = getValues("email");
|
||||
const lastIndex = emails.length - 1;
|
||||
const valid = await trigger(`email.${lastIndex}`);
|
||||
if (valid) appendEmail("");
|
||||
};
|
||||
|
||||
const handleAddPhone = async () => {
|
||||
const phones = getValues("phone");
|
||||
const lastIndex = phones.length - 1;
|
||||
const valid = await trigger(`phone.${lastIndex}`);
|
||||
if (valid) appendPhone("");
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">First Name</label>
|
||||
<input className="form-control form-control-sm" {...register("firstName")} />
|
||||
{errors.firstName && <small className="danger-text">{errors.firstName.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Last Name</label>
|
||||
<input className="form-control form-control-sm" {...register("lastName")} />
|
||||
{errors.lastName && <small className="danger-text">{errors.lastName.message}</small>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Organization</label>
|
||||
<input className="form-control form-control-sm" {...register("organization")} />
|
||||
{errors.organization && <small className="danger-text">{errors.organization.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Email</label>
|
||||
{emailFields.map((field, index) => (<>
|
||||
<div key={field.id} className="d-flex align-items-center mb-1">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`email.${index}`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddEmail}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removeEmail(index)}
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.email?.[index] && (
|
||||
<small className="danger-text ms-2">
|
||||
{errors.email[index]?.message}
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Phone</label>
|
||||
{phoneFields.map((field, index) => (<>
|
||||
<div key={field.id} className="d-flex align-items-center mb-1">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`phone.${index}`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddPhone}
|
||||
>
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removePhone(index)} // Remove the phone field
|
||||
>
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.phone?.[ index ] && <small className="danger-text ms-2">{errors.phone[ index ]?.message}</small>}
|
||||
</>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Type</label>
|
||||
<input className="form-control form-control-sm" {...register("type")} />
|
||||
{errors.type && <small className="danger-text">{errors.type.message}</small>}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<TagInput name="tags" label="Tags" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea className="form-control form-control-sm" rows="2" {...register("address")} />
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Description</label>
|
||||
<textarea className="form-control form-control-sm" rows="2" {...register("description")} />
|
||||
{errors.description && <small className="danger-text">{errors.description.message}</small>}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-evenly py-2">
|
||||
<button className="btn btn-sm btn-primary" type="submit">Submit</button>
|
||||
<button className="btn btn-sm btn-secondary" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageDirectory;
|
||||
@ -18,7 +18,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("profile");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> Profile
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> <span className="d-none d-md-inline">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -30,7 +30,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("teams");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i> Teams
|
||||
<i className="bx bx-group bx-sm me-1_5"></i><span className="d-none d-md-inline" > Teams</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
|
||||
@ -42,7 +42,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("infra");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
|
||||
<i className="bx bx-grid-alt bx-sm me-1_5"></i> <span className="d-none d-md-inline">Infrastructure</span>
|
||||
</a>
|
||||
</li>
|
||||
{/* <li className="nav-item">
|
||||
@ -70,7 +70,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("imagegallary");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -82,7 +82,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
onPillClick("directory");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> Directory
|
||||
<i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Directory</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
45
src/components/common/IconButton.jsx
Normal file
45
src/components/common/IconButton.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
|
||||
// Light background mapping for Bootstrap theme colors
|
||||
const lightBackgrounds = {
|
||||
primary: "#e3f2fd",
|
||||
secondary: "#E9EEF4",
|
||||
success: "#e6f4ea",
|
||||
danger: "#fdecea",
|
||||
warning: "#fff3cd",
|
||||
info: "#e0f7fa",
|
||||
dark: "#e9ecef",
|
||||
};
|
||||
|
||||
const IconButton = ({
|
||||
iconClass, // icon class string like 'bx bx-user'
|
||||
color = "primary",
|
||||
onClick,
|
||||
size = 20,
|
||||
radius=null,
|
||||
style = {},
|
||||
...rest
|
||||
}) => {
|
||||
const backgroundColor = lightBackgrounds[color] || "#f8f9fa";
|
||||
const iconColor = `var(--bs-${color})`;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`border-0 ${radius ? `rounded-${rounded}` : 'rounded'} d-flex align-items-center justify-content-center`}
|
||||
style={{
|
||||
backgroundColor,
|
||||
color: iconColor,
|
||||
padding: "0.4rem",
|
||||
margin:'0rem 0.2rem',
|
||||
...style,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
<i className={iconClass} style={{ fontSize: size, color: iconColor }}></i>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconButton;
|
||||
68
src/components/common/TagInput.jsx
Normal file
68
src/components/common/TagInput.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
const TagInput = ({
|
||||
label = "Tags",
|
||||
name = "tags",
|
||||
placeholder = "Enter ... ",
|
||||
color = "#e9ecef",
|
||||
}) => {
|
||||
const [tags, setTags] = useState([]);
|
||||
const [input, setInput] = useState("");
|
||||
const { setValue } = useFormContext();
|
||||
|
||||
useEffect(() => {
|
||||
setValue(name, tags); // sync to form when tags change
|
||||
}, [tags, name, setValue]);
|
||||
|
||||
const addTag = (e) => {
|
||||
e.preventDefault();
|
||||
const trimmed = input.trim();
|
||||
if (trimmed !== "" && !tags.includes(trimmed)) {
|
||||
setTags([...tags, trimmed]);
|
||||
setInput("");
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (removeIndex) => {
|
||||
const updated = tags.filter((_, i) => i !== removeIndex);
|
||||
setTags(updated);
|
||||
};
|
||||
|
||||
const backgroundColor = color || "#f8f9fa";
|
||||
const iconColor = `var(--bs-${color})`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<label htmlFor={name} className="form-label">{label}</label>
|
||||
<div className="form-control form-control-sm d-flex justify-content-start flex-wrap gap-1" style={{ minHeight: "12px" }}>
|
||||
{tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
color: iconColor,
|
||||
backgroundColor,
|
||||
padding: "2px 3px",
|
||||
borderRadius: "2px"
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
<i className="bx bx-x bx-xs ms-1" onClick={() => removeTag(i)}></i>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
type="text"
|
||||
className="border-0 flex-grow-1"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => (e.key === "Enter" ? addTag(e) : null)}
|
||||
placeholder={placeholder}
|
||||
style={{ outline: "none", minWidth: "120px" }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagInput;
|
||||
@ -24,6 +24,11 @@
|
||||
"available": true,
|
||||
"link": "/employees"
|
||||
},
|
||||
{
|
||||
"text": "Directory",
|
||||
"available": true,
|
||||
"link": "/directory"
|
||||
},
|
||||
{
|
||||
"text": "Project Status",
|
||||
"available": true,
|
||||
|
||||
@ -100,3 +100,23 @@ button:focus-visible {
|
||||
.checkbox-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px; /* Width of the scrollbar */
|
||||
height: 6px; /* Height of the scrollbar (for horizontal scrollbar) */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1; /* Background of the scrollbar track */
|
||||
border-radius: 2px; /* Rounded corners for the track */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #888; /* Color of the scrollbar thumb */
|
||||
border-radius: 10px; /* Rounded corners for the thumb */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #555; /* Color of the thumb on hover */
|
||||
}
|
||||
|
||||
140
src/pages/Directory/Directory.jsx
Normal file
140
src/pages/Directory/Directory.jsx
Normal file
@ -0,0 +1,140 @@
|
||||
import React, { useState } from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import IconButton from "../../components/common/IconButton";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManageDirectory from "../../components/Directory/ManageDirectory";
|
||||
|
||||
const Directory = () => {
|
||||
const [isOpenModal, setIsOpenModal] = useState(false);
|
||||
const closedModel = () => setIsOpenModal(false);
|
||||
|
||||
return (
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Directory", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
|
||||
<ManageDirectory />
|
||||
</GlobalModel>
|
||||
|
||||
<div className="row">
|
||||
<div className="row mx-0 px-0">
|
||||
<div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary `}
|
||||
onClick={() => setIsOpenModal(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
New Contact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap py-2 ">
|
||||
<table className="table px-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" colSpan="2">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-2">
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
<IconButton
|
||||
size={12}
|
||||
iconClass="bx bx-envelope"
|
||||
color="primary"
|
||||
onClick={() => alert("User icon clicked")}
|
||||
/>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
</th>
|
||||
<th className="mx-2">
|
||||
<div className="d-flex align-items-center m-0 p-0 gap-1">
|
||||
<IconButton
|
||||
size={12}
|
||||
iconClass="bx bx-phone"
|
||||
color="warning"
|
||||
onClick={() => alert("User icon clicked")}
|
||||
/>
|
||||
<span>Phone</span>
|
||||
</div>
|
||||
</th>
|
||||
<th className="mx-2">
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
<IconButton
|
||||
size={12}
|
||||
iconClass="bx bxs-grid-alt"
|
||||
color="info"
|
||||
/>
|
||||
<span>Organization</span>
|
||||
</div>
|
||||
</th>
|
||||
<th className="mx-2">
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Type <i className="bx bx-filter bx-sm"></i>
|
||||
</a>
|
||||
{/* <ul className="dropdown-menu p-2 text-capitalize">
|
||||
{[
|
||||
{ id: 1, label: "Active" },
|
||||
{ id: 2, label: "On Hold" },
|
||||
{ id: 3, label: "Inactive" },
|
||||
{ id: 4, 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 ">
|
||||
<tr>
|
||||
<td colSpan="12" className="text-center py-4">
|
||||
No projects found
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Directory;
|
||||
@ -231,7 +231,7 @@ const ProjectList = () => {
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Status <i className="bx bx-filter"></i>
|
||||
Status <i className="bx bx-filter bx-sm"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{[
|
||||
|
||||
@ -35,6 +35,7 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
|
||||
|
||||
// Protected Route Wrapper
|
||||
import ProtectedRoute from "./ProtectedRoute";
|
||||
import Directory from "../pages/Directory/Directory";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
@ -63,6 +64,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: "/inventory", element: <Inventory /> },
|
||||
{ path: "/activities/attendance", element: <AttendancePage /> },
|
||||
{ path: "/activities/records/:projectId?", element: <DailyTask /> },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user