Compare commits
51 Commits
2922cca22d
...
f2b1eee5ad
| Author | SHA1 | Date | |
|---|---|---|---|
|
f2b1eee5ad | ||
|
|
9bc436e776 | ||
|
|
c70208c467 | ||
|
|
2f05c4ba6a | ||
| b71dd7f0f5 | |||
|
|
99e0cd94d4 | ||
|
|
27fafb4f05 | ||
|
|
978165d3de | ||
|
|
b9a7d4977c | ||
|
|
65aa8990a3 | ||
|
|
9509b0b8da | ||
|
|
7e16701b0d | ||
|
|
1e079a89eb | ||
|
|
aba02f64c0 | ||
|
|
c43c668fb8 | ||
|
|
353238fd60 | ||
|
|
b2e1fbcf95 | ||
|
|
b296dec542 | ||
|
|
3efeea55e0 | ||
|
|
126a84b5cc | ||
|
|
7613f36624 | ||
|
|
1cac05ddcb | ||
|
|
49d38f553a | ||
|
|
b65be72809 | ||
|
|
e9903ee2f6 | ||
| b489c094b3 | |||
|
|
28e409ff99 | ||
|
|
b6a0fb54ac | ||
|
|
61ce554e05 | ||
|
|
d956bfd3cc | ||
|
|
71b9a3602b | ||
|
|
68999401e5 | ||
|
|
a837b16a7d | ||
|
|
d716a5ffac | ||
|
|
5f33826e61 | ||
|
|
8e06991bd3 | ||
|
|
79ad15d572 | ||
|
|
4d6171e1ed | ||
|
|
28a4f63d10 | ||
|
|
c2ead3cd0f | ||
|
|
b33fad1b17 | ||
|
|
5ccdf33c35 | ||
| 431a541a89 | |||
|
|
745673b3f3 | ||
|
|
cfa8571079 | ||
|
|
c7b5a0ba7d | ||
|
|
a1ee9dac38 | ||
|
|
085f45210e | ||
|
|
7cfe04de2e | ||
|
|
1c1a1da8a0 | ||
| 9a0482071a |
@ -5,6 +5,7 @@ import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
|
||||
const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
@ -32,7 +33,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredData,
|
||||
10
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -8,6 +8,7 @@ import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
@ -70,7 +71,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
10
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
101
src/components/Directory/CardViewDirectory.jsx
Normal file
101
src/components/Directory/CardViewDirectory.jsx
Normal file
@ -0,0 +1,101 @@
|
||||
import React from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
|
||||
const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
|
||||
return (
|
||||
<div class="card text-start border-1">
|
||||
<div class="card-body d-flex justify-content-between px-1 py-2">
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={
|
||||
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
||||
}
|
||||
lastName={
|
||||
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
||||
}
|
||||
/>{" "}
|
||||
<p className="m-0">{contact.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="dropdown z-2 ">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||
<li onClick={() =>
|
||||
{
|
||||
setSelectedContact(contact)
|
||||
setIsOpenModal(true)
|
||||
}}>
|
||||
<a className="dropdown-item px-2 py-0">
|
||||
<i className="bx bx-pencil bx-xs me-2"></i>
|
||||
<span className="align-left small-text">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item px-2 py-0">
|
||||
<i className="bx bx-trash bx-xs me-2"></i>
|
||||
<span className="align-left small-text">Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-start px-1 py-1">
|
||||
<hr className="my-0" />
|
||||
{contact.contactEmails[0] && (
|
||||
<ul className="list-inline my-1 ">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-envelope bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactEmails[0]?.emailAddress}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{contact.contactPhones[0] && (
|
||||
<ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-phone bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactPhones[0]?.phoneNumber}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-building bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.organization}
|
||||
</li>
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-merge bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactCategory.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardViewDirectory;
|
||||
57
src/components/Directory/DirectorySchema.js
Normal file
57
src/components/Directory/DirectorySchema.js
Normal file
@ -0,0 +1,57 @@
|
||||
import { z } from "zod";
|
||||
export const ContactSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
organization: z.string().min(1, "Organization name is required"),
|
||||
contactCategoryId: z.string().nullable().optional(),
|
||||
address: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
projectIds: z.array(z.string()).min(1, "Project is required"),
|
||||
contactEmails: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
emailAddress: z.string().email("Invalid email").or(z.literal("")),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
|
||||
contactPhones: z
|
||||
.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
phoneNumber: z
|
||||
.string()
|
||||
.min(6, "Invalid Number")
|
||||
.max(13, "Invalid Number")
|
||||
.regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
|
||||
})
|
||||
)
|
||||
.optional()
|
||||
.default([]),
|
||||
|
||||
tags: z
|
||||
.array(
|
||||
z.object({
|
||||
id: z.string().nullable(),
|
||||
name: z.string(),
|
||||
})
|
||||
)
|
||||
.min(1, { message: "At least one tag is required" }),
|
||||
bucketIds: z.array(z.string()).optional(),
|
||||
})
|
||||
|
||||
.refine((data) => {
|
||||
const hasValidEmail = (data.contactEmails || []).some(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
);
|
||||
const hasValidPhone = (data.contactPhones || []).some(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
);
|
||||
|
||||
return hasValidEmail || hasValidPhone;
|
||||
}, {
|
||||
message: "At least one contact (email or phone) is required",
|
||||
path: ["contactPhone"],
|
||||
});
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import Avatar from '../common/Avatar';
|
||||
|
||||
const getEmailIcon = (type) => {
|
||||
switch (type) {
|
||||
@ -23,13 +24,25 @@ const getPhoneIcon = (type) => {
|
||||
}
|
||||
};
|
||||
|
||||
const ListViewDirectory = ({ contact }) => {
|
||||
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
|
||||
return (
|
||||
<tr key={contact.id} >
|
||||
<td className="text-start">{`${contact.name}`}</td>
|
||||
<tr >
|
||||
<td className="text-start" style={{width: '18%'}} colSpan={2}>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
|
||||
lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
|
||||
/>
|
||||
|
||||
<span >{contact?.name || ""}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
|
||||
{/* Emails */}
|
||||
<td colSpan="2">
|
||||
<td >
|
||||
<div className="d-flex flex-column align-items-start px-1">
|
||||
{contact.contactEmails?.map((email, index) => (
|
||||
<span key={email.id}>
|
||||
@ -40,7 +53,6 @@ const ListViewDirectory = ({ contact }) => {
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Phones */}
|
||||
<td>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{contact.contactPhones?.map((phone, index) => (
|
||||
@ -52,21 +64,23 @@ const ListViewDirectory = ({ contact }) => {
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Organization */}
|
||||
<td className="text-start">{contact.organization}</td>
|
||||
|
||||
{/* Tags */}
|
||||
<td className="text-start text-wrap">{contact.organization}</td>
|
||||
|
||||
|
||||
<td>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{contact.tags?.map((tag, index) => (
|
||||
<span key={index} className="badge bg-light text-dark mb-1">{tag}</span>
|
||||
))}
|
||||
<span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Actions */}
|
||||
<td className="align-middle text-center ">
|
||||
<i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
|
||||
<td className="align-middle text-center ">
|
||||
<i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
|
||||
{
|
||||
setSelectedContact( contact )
|
||||
setIsOpenModal(true)
|
||||
}}></i>
|
||||
<i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -1,40 +1,54 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm, useFieldArray, FormProvider } from "react-hook-form";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useForm,
|
||||
useFieldArray,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
} 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(),
|
||||
});
|
||||
import IconButton from "../common/IconButton";
|
||||
import useMaster, {
|
||||
useContactCategory,
|
||||
useContactTags,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { useBuckets } from "../../hooks/useDirectory";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import {ContactSchema} from "./DirectorySchema";
|
||||
|
||||
|
||||
|
||||
const ManageDirectory = () => {
|
||||
const ManageDirectory = ({ submitContact, onCLosed }) => {
|
||||
const selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
const [TagsData, setTagsData] = useState([]);
|
||||
const { data, loading } = useMaster();
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { contactTags, loading: Tagloading } = useContactTags();
|
||||
const [IsSubmitting, setSubmitting] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(directorySchema),
|
||||
resolver: zodResolver(ContactSchema),
|
||||
defaultValues: {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
name: "",
|
||||
organization: "",
|
||||
type: "",
|
||||
contactCategoryId: null,
|
||||
address: "",
|
||||
description: "",
|
||||
email: [""],
|
||||
phone: [""],
|
||||
projectIds: [],
|
||||
contactEmails: [],
|
||||
contactPhones: [],
|
||||
tags: [],
|
||||
bucketIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
@ -44,6 +58,9 @@ const ManageDirectory = () => {
|
||||
control,
|
||||
getValues,
|
||||
trigger,
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
@ -51,160 +68,361 @@ const ManageDirectory = () => {
|
||||
fields: emailFields,
|
||||
append: appendEmail,
|
||||
remove: removeEmail,
|
||||
} = useFieldArray({ control, name: "email" });
|
||||
} = useFieldArray({ control, name: "contactEmails" });
|
||||
|
||||
const {
|
||||
fields: phoneFields,
|
||||
append: appendPhone,
|
||||
remove: removePhone,
|
||||
} = useFieldArray({ control, name: "phone" });
|
||||
} = useFieldArray({ control, name: "contactPhones" });
|
||||
|
||||
useEffect(() => {
|
||||
if (emailFields.length === 0) appendEmail("");
|
||||
if (phoneFields.length === 0) appendPhone("");
|
||||
}, [emailFields.length, phoneFields.length]);
|
||||
useEffect(() => {
|
||||
if (emailFields.length === 0) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
if (phoneFields.length === 0) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
}, [emailFields.length, phoneFields.length]);
|
||||
|
||||
const onSubmit = (data) => {
|
||||
// console.log("Submitted:\n" + JSON.stringify(data, null, 2));
|
||||
};
|
||||
|
||||
const handleAddEmail = async () => {
|
||||
const emails = getValues("email");
|
||||
const emails = getValues("contactEmails");
|
||||
const lastIndex = emails.length - 1;
|
||||
const valid = await trigger(`email.${lastIndex}`);
|
||||
if (valid) appendEmail("");
|
||||
const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
|
||||
if (valid) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPhone = async () => {
|
||||
const phones = getValues("phone");
|
||||
const phones = getValues("contactPhones");
|
||||
const lastIndex = phones.length - 1;
|
||||
const valid = await trigger(`phone.${lastIndex}`);
|
||||
if (valid) appendPhone("");
|
||||
const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
|
||||
if (valid) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const watchBucketIds = watch("bucketIds");
|
||||
|
||||
const toggleBucketId = (id) => {
|
||||
const updated = watchBucketIds?.includes(id)
|
||||
? watchBucketIds.filter((val) => val !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
const handleCheckboxChange = (id) => {
|
||||
const updated = watchBucketIds.includes(id)
|
||||
? watchBucketIds.filter((i) => i !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const onSubmit = ( data ) =>
|
||||
{
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || []).filter(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
),
|
||||
contactPhones: (data.contactPhones || []).filter(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
submitContact(cleaned, reset, setSubmitting);
|
||||
};
|
||||
|
||||
const handleClosed = () => {
|
||||
onCLosed();
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<h6 className="m-0 fw-18"> Create New Contact</h6>
|
||||
</div>
|
||||
<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 className="col-md-6 text-start">
|
||||
<label className="form-label">Name</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<small className="danger-text">{errors.name.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 className="col-md-6 text-start">
|
||||
<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>
|
||||
|
||||
<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="row mt-1">
|
||||
<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}
|
||||
{emailFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddEmail}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1 p-0"
|
||||
onClick={() => removeEmail(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactEmails?.[index]?.emailAddress && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].emailAddress.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{errors.email?.[index] && (
|
||||
<small className="danger-text ms-2">
|
||||
{errors.email[index]?.message}
|
||||
</small>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Business">Business</option>
|
||||
</select>
|
||||
{errors.phone?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactPhones[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddPhone}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removePhone(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactPhones?.[index]?.phoneNumber && (
|
||||
<small className="danger-text">
|
||||
{errors.contactPhones[index].phoneNumber.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.contactPhone?.message && (
|
||||
<div className="danger-text">{errors.contactPhone.message}</div>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
|
||||
</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 className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<TagInput name="tags" label="Tags" />
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
label="Select Projects"
|
||||
options={projects}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
IsLoading={projectLoading}
|
||||
/>
|
||||
{errors.projectIds && (
|
||||
<small className="danger-text">
|
||||
{errors.projectIds.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="col-12 text-start">
|
||||
<TagInput name="tags" label="Tags" options={contactTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">
|
||||
{errors.tags.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Label</label>
|
||||
|
||||
<ul
|
||||
className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
|
||||
style={{ maxHeight: "80px" }}
|
||||
>
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="list-inline-item flex-shrink-0 me-6 mb-2"
|
||||
>
|
||||
<div className="form-check ">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id={`item-${item.id}`}
|
||||
checked={watchBucketIds.includes(item.id)}
|
||||
onChange={() => handleCheckboxChange(item.id)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`item-${item.id}`}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{errors.BucketIds && (
|
||||
<small className="text-danger">{errors.BucketIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea className="form-control form-control-sm" rows="2" {...register("address")} />
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
{...register("address")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="col-12 text-start">
|
||||
<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>}
|
||||
<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 className="d-flex justify-content-center gap-1 py-2">
|
||||
<button className="btn btn-sm btn-primary" type="submit">
|
||||
{IsSubmitting ? "Please Wait..." : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
type="button"
|
||||
onClick={handleClosed}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
464
src/components/Directory/UpdateContact.jsx
Normal file
464
src/components/Directory/UpdateContact.jsx
Normal file
@ -0,0 +1,464 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useForm,
|
||||
useFieldArray,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
} from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import TagInput from "../common/TagInput";
|
||||
import IconButton from "../common/IconButton";
|
||||
import useMaster, {
|
||||
useContactCategory,
|
||||
useContactTags,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { useBuckets } from "../../hooks/useDirectory";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { ContactSchema } from "./DirectorySchema";
|
||||
|
||||
const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
|
||||
const selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
const [TagsData, setTagsData] = useState([]);
|
||||
const { data, loading } = useMaster();
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { contactTags, loading: Tagloading } = useContactTags();
|
||||
const [ IsSubmitting, setSubmitting ] = useState( false );
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(ContactSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
organization: "",
|
||||
contactCategoryId: null,
|
||||
address: "",
|
||||
description: "",
|
||||
projectIds: [],
|
||||
contactEmails: [],
|
||||
contactPhones: [],
|
||||
tags: [],
|
||||
bucketIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
getValues,
|
||||
trigger,
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const {
|
||||
fields: emailFields,
|
||||
append: appendEmail,
|
||||
remove: removeEmail,
|
||||
} = useFieldArray({ control, name: "contactEmails" });
|
||||
|
||||
const {
|
||||
fields: phoneFields,
|
||||
append: appendPhone,
|
||||
remove: removePhone,
|
||||
} = useFieldArray({ control, name: "contactPhones" });
|
||||
|
||||
const handleAddEmail = async () => {
|
||||
const emails = getValues("contactEmails");
|
||||
const lastIndex = emails.length - 1;
|
||||
const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
|
||||
if (valid) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPhone = async () => {
|
||||
const phones = getValues("contactPhones");
|
||||
const lastIndex = phones.length - 1;
|
||||
const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
|
||||
if (valid) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const watchBucketIds = watch("bucketIds");
|
||||
|
||||
const toggleBucketId = (id) => {
|
||||
const updated = watchBucketIds?.includes(id)
|
||||
? watchBucketIds.filter((val) => val !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
const handleCheckboxChange = (id) => {
|
||||
const updated = watchBucketIds.includes(id)
|
||||
? watchBucketIds.filter((i) => i !== id)
|
||||
: [...watchBucketIds, id];
|
||||
|
||||
setValue("bucketIds", updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || [])
|
||||
.filter((e) => e.emailAddress?.trim() !== "")
|
||||
.map((email, index) => {
|
||||
const existingEmail = existingContact.contactEmails?.[index];
|
||||
return existingEmail
|
||||
? { ...email, id: existingEmail.id }
|
||||
: email;
|
||||
}),
|
||||
contactPhones: (data.contactPhones || [])
|
||||
.filter((p) => p.phoneNumber?.trim() !== "")
|
||||
.map((phone, index) => {
|
||||
const existingPhone = existingContact.contactPhones?.[index];
|
||||
return existingPhone
|
||||
? { ...phone, id: existingPhone.id }
|
||||
: phone;
|
||||
}),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
await submitContact({ ...cleaned, id: existingContact.id });
|
||||
|
||||
setSubmitting(false);
|
||||
|
||||
};
|
||||
|
||||
const handleClosed = () => {
|
||||
onCLosed();
|
||||
};
|
||||
useEffect(() => {
|
||||
const isValidContact =
|
||||
existingContact &&
|
||||
typeof existingContact === "object" &&
|
||||
!Array.isArray(existingContact);
|
||||
|
||||
if (!isInitialized &&isValidContact && TagsData) {
|
||||
reset({
|
||||
name: existingContact.name || "",
|
||||
organization: existingContact.organization || "",
|
||||
contactEmails: existingContact.contactEmails || [],
|
||||
contactPhones: existingContact.contactPhones || [],
|
||||
contactCategoryId: existingContact.contactCategory?.id || null,
|
||||
address: existingContact.address || "",
|
||||
description: existingContact.description || "",
|
||||
projectIds: existingContact.projectIds || null,
|
||||
tags: existingContact.tags || [],
|
||||
bucketIds: existingContact.bucketIds || [],
|
||||
} );
|
||||
|
||||
if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
|
||||
appendPhone({ label: "Office", phoneNumber: "" });
|
||||
}
|
||||
|
||||
if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
|
||||
appendEmail({ label: "Work", emailAddress: "" });
|
||||
}
|
||||
setIsInitialized(true)
|
||||
}
|
||||
|
||||
// return()=> reset()
|
||||
}, [ existingContact, buckets, projects ] );
|
||||
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<h6 className="m-0 fw-18"> Update Contact</h6>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Name</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<small className="danger-text">{errors.name.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 text-start">
|
||||
<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>
|
||||
<div className="row mt-1">
|
||||
<div className="col-md-6">
|
||||
{emailFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{index === emailFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddEmail}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1 p-0"
|
||||
onClick={() => removeEmail(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactEmails?.[index]?.emailAddress && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].emailAddress.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Business">Business</option>
|
||||
</select>
|
||||
{errors.phone?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.ContactPhones[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
{index === phoneFields.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-1"
|
||||
onClick={handleAddPhone}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-danger ms-1"
|
||||
onClick={() => removePhone(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.contactPhones?.[index]?.phoneNumber && (
|
||||
<small className="danger-text">
|
||||
{errors.contactPhones[index].phoneNumber.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.contactPhone?.message && (
|
||||
<div className="danger-text">{errors.contactPhone.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
label="Select Projects"
|
||||
options={projects}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
IsLoading={projectLoading}
|
||||
/>
|
||||
{errors.projectIds && (
|
||||
<small className="danger-text">{errors.projectIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<TagInput name="tags" label="Tags" options={contactTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Label</label>
|
||||
|
||||
<ul
|
||||
className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
|
||||
style={{ maxHeight: "80px" }}
|
||||
>
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className="list-inline-item flex-shrink-0 me-6 mb-2"
|
||||
>
|
||||
<div className="form-check ">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id={`item-${item.id}`}
|
||||
checked={watchBucketIds.includes(item.id)}
|
||||
onChange={() => handleCheckboxChange(item.id)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`item-${item.id}`}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{errors.BucketIds && (
|
||||
<small className="text-danger">{errors.BucketIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
{...register("address")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<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-center gap-1 py-2">
|
||||
<button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
|
||||
{IsSubmitting ? "Please Wait..." : "Update"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
type="button"
|
||||
onClick={handleClosed}
|
||||
disabled={IsSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateContact;
|
||||
@ -12,28 +12,40 @@ const GlobalModel = ({
|
||||
}) => {
|
||||
const modalRef = useRef(null); // Reference to the modal element
|
||||
|
||||
useEffect(() => {
|
||||
const modalElement = modalRef.current;
|
||||
const modalInstance = new window.bootstrap.Modal(modalElement);
|
||||
useEffect(() => {
|
||||
const modalElement = modalRef.current;
|
||||
const modalInstance = new window.bootstrap.Modal(modalElement, {
|
||||
backdrop: false,
|
||||
});
|
||||
|
||||
// Show modal if isOpen is true
|
||||
if (isOpen) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
if (isOpen) {
|
||||
modalInstance.show();
|
||||
} else {
|
||||
modalInstance.hide();
|
||||
}
|
||||
|
||||
// Handle modal hide event to invoke the closeModal function
|
||||
const handleHideModal = () => {
|
||||
closeModal(); // Close the modal via React state
|
||||
};
|
||||
const handleHideModal = () => {
|
||||
closeModal();
|
||||
|
||||
// ✅ FIX: Remove any lingering body classes/styles
|
||||
document.body.classList.remove('modal-open');
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.paddingRight = '';
|
||||
};
|
||||
|
||||
modalElement.addEventListener('hidden.bs.modal', handleHideModal);
|
||||
|
||||
return () => {
|
||||
modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
|
||||
|
||||
// Also clean up just in case component unmounts
|
||||
document.body.classList.remove('modal-open');
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.paddingRight = '';
|
||||
};
|
||||
}, [isOpen, closeModal]);
|
||||
|
||||
modalElement.addEventListener('hidden.bs.modal', handleHideModal);
|
||||
|
||||
return () => {
|
||||
modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
|
||||
};
|
||||
}, [isOpen, closeModal]);
|
||||
|
||||
// Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
|
||||
const modalSizeClass = size ? `modal-${size}` : ''; // Default is empty if no size is specified
|
||||
|
||||
158
src/components/common/MultiSelectDropdown.css
Normal file
158
src/components/common/MultiSelectDropdown.css
Normal file
@ -0,0 +1,158 @@
|
||||
/* Container for the multi-select dropdown */
|
||||
.multi-select-dropdown-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Header of the dropdown */
|
||||
.multi-select-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header .placeholder-style {
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header .placeholder-style-selected {
|
||||
/* color: #0d6efd; */
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
.multi-select-dropdown-arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Dropdown options */
|
||||
.multi-select-dropdown-options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.multi-select-dropdown-search {
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-search-input {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Select All checkbox */
|
||||
.multi-select-dropdown-select-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-select-all .custom-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-select-all-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Options in dropdown */
|
||||
.multi-select-dropdown-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option.selected {
|
||||
background-color: #dbe7ff;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-option input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Custom checkbox */
|
||||
.custom-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.custom-checkbox:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.multi-select-dropdown-Not-found{
|
||||
text-align: center;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.multi-select-dropdown-Not-found:hover {
|
||||
background: #e2dfdf;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 767px) {
|
||||
.multi-select-dropdown-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-header {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.multi-select-dropdown-options {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
125
src/components/common/SelectMultiple.jsx
Normal file
125
src/components/common/SelectMultiple.jsx
Normal file
@ -0,0 +1,125 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import './MultiSelectDropdown.css';
|
||||
|
||||
const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = 'Select options',
|
||||
labelKey = 'name',
|
||||
valueKey = 'id',
|
||||
placeholder = 'Please select...',
|
||||
IsLoading = false
|
||||
}) => {
|
||||
const { setValue, watch } = useFormContext();
|
||||
const selectedValues = watch(name) || [];
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleCheckboxChange = (value) => {
|
||||
const updated = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
: [...selectedValues, value];
|
||||
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = options.filter((item) =>
|
||||
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
selectedValues.length > 0
|
||||
? 'placeholder-style-selected'
|
||||
: 'placeholder-style'
|
||||
}
|
||||
>
|
||||
<div className="selected-badges-container">
|
||||
{selectedValues.length > 0 ? (
|
||||
selectedValues.map((val) => {
|
||||
const found = options.find((opt) => opt[valueKey] === val);
|
||||
return (
|
||||
<span key={val} className="badge badge-selected-item mx-1">
|
||||
{found ? found[labelKey] : ''}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className="placeholder-text">{placeholder}</span>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
<i className="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
|
||||
{isOpen && (
|
||||
<div className="multi-select-dropdown-options">
|
||||
<div className="multi-select-dropdown-search">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = item[labelKey];
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="custom-checkbox form-check-input"
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(valueVal)}
|
||||
/>
|
||||
<label className="text-secondary">{labelVal}</label>
|
||||
</div>
|
||||
);
|
||||
} )}
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
<div className='multi-select-dropdown-Not-found'>
|
||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
||||
</div>
|
||||
)}
|
||||
{IsLoading && filteredOptions.length === 0 && (
|
||||
<div className='multi-select-dropdown-Not-found'>
|
||||
<label className="text-muted">Loading...</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectMultiple;
|
||||
@ -1,32 +1,85 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { useFormContext, useWatch } from "react-hook-form";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const TagInput = ({
|
||||
label = "Tags",
|
||||
name = "tags",
|
||||
placeholder = "Enter ... ",
|
||||
placeholder = "Start typing to add... like employee, manager",
|
||||
color = "#e9ecef",
|
||||
options = [],
|
||||
}) => {
|
||||
const [tags, setTags] = useState([]);
|
||||
const [input, setInput] = useState("");
|
||||
const { setValue } = useFormContext();
|
||||
const [suggestions, setSuggestions] = useState([]);
|
||||
const { setValue, trigger, control } = useFormContext();
|
||||
const watchedTags = useWatch({ control, name });
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
Array.isArray(watchedTags) &&
|
||||
JSON.stringify(tags) !== JSON.stringify(watchedTags)
|
||||
) {
|
||||
setTags(watchedTags);
|
||||
}
|
||||
}, [JSON.stringify(watchedTags)]);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(name, tags); // sync to form when tags change
|
||||
}, [tags, name, setValue]);
|
||||
if (input.trim() === "") {
|
||||
setSuggestions([]);
|
||||
} else {
|
||||
const filtered = options?.filter(
|
||||
(opt) =>
|
||||
opt?.name?.toLowerCase()?.includes(input.toLowerCase()) &&
|
||||
!tags?.some((tag) => tag.name === opt.name)
|
||||
);
|
||||
setSuggestions(filtered);
|
||||
}
|
||||
}, [input, options, tags]);
|
||||
|
||||
const addTag = (e) => {
|
||||
e.preventDefault();
|
||||
const trimmed = input.trim();
|
||||
if (trimmed !== "" && !tags.includes(trimmed)) {
|
||||
setTags([...tags, trimmed]);
|
||||
const addTag = async (tagObj) => {
|
||||
if (!tags.some((tag) => tag.name === tagObj.name)) {
|
||||
const cleanedTag = {
|
||||
id: tagObj.id ?? null,
|
||||
name: tagObj.name,
|
||||
};
|
||||
const newTags = [...tags, cleanedTag];
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true });
|
||||
await trigger(name);
|
||||
setInput("");
|
||||
setSuggestions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (removeIndex) => {
|
||||
const updated = tags.filter((_, i) => i !== removeIndex);
|
||||
setTags(updated);
|
||||
const removeTag = (indexToRemove) => {
|
||||
const newTags = tags.filter((_, i) => i !== indexToRemove);
|
||||
setTags(newTags);
|
||||
setValue(name, newTags, { shouldValidate: true });
|
||||
trigger(name);
|
||||
};
|
||||
|
||||
const handleInputKeyDown = (e) => {
|
||||
if (e.key === "Enter" && input.trim() !== "") {
|
||||
e.preventDefault();
|
||||
const existing = options.find(
|
||||
(opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
|
||||
);
|
||||
const newTag = existing
|
||||
? existing
|
||||
: {
|
||||
id: null,
|
||||
name: input.trim(),
|
||||
description: input.trim(),
|
||||
};
|
||||
addTag(newTag);
|
||||
} else if (e.key === "Backspace" && input === "") {
|
||||
setTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion) => {
|
||||
addTag(suggestion);
|
||||
};
|
||||
|
||||
const backgroundColor = color || "#f8f9fa";
|
||||
@ -34,35 +87,76 @@ const TagInput = ({
|
||||
|
||||
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"
|
||||
<label htmlFor={name} className="form-label">
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<div
|
||||
className="form-control form-control-sm p-1"
|
||||
style={{ minHeight: "38px", position: "relative" }}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center gap-1">
|
||||
{tags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
color: iconColor,
|
||||
backgroundColor,
|
||||
padding: "2px 6px",
|
||||
borderRadius: "2px",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{tag.name}
|
||||
<i
|
||||
className="bx bx-x bx-xs ms-1"
|
||||
onClick={() => removeTag(index)}
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
placeholder={placeholder}
|
||||
style={{
|
||||
color: iconColor,
|
||||
backgroundColor,
|
||||
padding: "2px 3px",
|
||||
borderRadius: "2px"
|
||||
border: "none",
|
||||
outline: "none",
|
||||
flex: 1,
|
||||
minWidth: "120px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{suggestions.length > 0 && (
|
||||
<ul
|
||||
className="list-group position-absolute mt-1 bg-white w-50 shadow-sm "
|
||||
style={{
|
||||
zIndex: 1000,
|
||||
maxHeight: "150px",
|
||||
overflowY: "auto",
|
||||
boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
|
||||
}}
|
||||
>
|
||||
{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" }}
|
||||
/>
|
||||
{suggestions.map((sugg, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="dropdown-item p-1 hoverBox"
|
||||
onClick={() => handleSuggestionClick(sugg)}
|
||||
style={{cursor: "pointer", fontSize: "0.875rem"}}
|
||||
|
||||
>
|
||||
{sugg.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagInput;
|
||||
|
||||
@ -41,7 +41,6 @@ const CreateContactTag = ({onClose}) => {
|
||||
const updatedData = [...cachedData, resp?.data];
|
||||
cacheData("Contact Tag", updatedData);
|
||||
showToast("Contact Tag Added successfully.", "success");
|
||||
console.log(getCachedData("Contact Tag"))
|
||||
onClose()
|
||||
}).catch((error)=>{
|
||||
showToast(error?.response?.data?.message, "error");
|
||||
|
||||
126
src/components/master/EditContactTag.jsx
Normal file
126
src/components/master/EditContactTag.jsx
Normal file
@ -0,0 +1,126 @@
|
||||
import React, { useEffect,useState } from 'react'
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { MasterRespository } from '../../repositories/MastersRepository';
|
||||
import { clearApiCacheKey } from '../../slices/apiCacheSlice';
|
||||
import { getCachedData,cacheData } from '../../slices/apiDataManager';
|
||||
import showToast from '../../services/toastService';
|
||||
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, { message: "Tag name is required" }),
|
||||
description: z.string().min(1, { message: "Description is required" })
|
||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||
});
|
||||
|
||||
const EditContactTag= ({data,onClose}) => {
|
||||
|
||||
const[isLoading,setIsLoading] = useState(false)
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },reset
|
||||
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
name: data?.name || "",
|
||||
description:data?.description || "",
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (formdata) => {
|
||||
setIsLoading(true)
|
||||
const result = {
|
||||
id:data?.id,
|
||||
name: formdata?.name,
|
||||
description: formdata.description,
|
||||
};
|
||||
|
||||
|
||||
|
||||
MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
|
||||
setIsLoading(false)
|
||||
showToast("Contact Tag Updated successfully.", "success");
|
||||
const cachedData = getCachedData("Contact Tag");
|
||||
if (cachedData) {
|
||||
|
||||
const updatedData = cachedData.map((category) =>
|
||||
category.id === data?.id ? { ...category, ...resp.data } : category
|
||||
);
|
||||
cacheData("Contact Tag", updatedData);
|
||||
}
|
||||
|
||||
onClose()
|
||||
}).catch((error)=>{
|
||||
showToast(error?.response?.data?.message, "error")
|
||||
setIsLoading(false)
|
||||
})
|
||||
|
||||
};
|
||||
const resetForm = () => {
|
||||
reset({
|
||||
name: "",
|
||||
description: ""
|
||||
});
|
||||
setDescriptionLength(0);
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
return ()=>resetForm()
|
||||
},[])
|
||||
|
||||
const [descriptionLength, setDescriptionLength] = useState(0);
|
||||
const maxDescriptionLength = 255;
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Tag Name</label>
|
||||
<input type="text"
|
||||
{...register("name")}
|
||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||
/>
|
||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label" htmlFor="description">Description</label>
|
||||
<textarea
|
||||
rows="3"
|
||||
{...register("description")}
|
||||
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
|
||||
onChange={(e) => {
|
||||
setDescriptionLength(e.target.value.length);
|
||||
register("description").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end small text-muted">
|
||||
{maxDescriptionLength - descriptionLength} characters left
|
||||
</div>
|
||||
{errors.description && (
|
||||
<p className="text-danger">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-center">
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3">
|
||||
{isLoading? "Please Wait...":"Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary "
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditContactTag;
|
||||
@ -15,6 +15,7 @@ import CreateWorkCategory from "./CreateWorkCategory";
|
||||
import EditWorkCategory from "./EditWorkCategory";
|
||||
import CreateCategory from "./CreateContactCategory";
|
||||
import CreateContactTag from "./CreateContactTag";
|
||||
import EditContactTag from "./EditContactTag";
|
||||
|
||||
|
||||
const MasterModal = ({ modaldata, closeModal }) => {
|
||||
@ -135,6 +136,9 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
||||
{modaldata.modalType === "Contact Tag" && (
|
||||
<CreateContactTag data={modaldata.item} onClose={closeModal} />
|
||||
)}
|
||||
{modaldata.modalType === "Edit-Contact Tag" && (
|
||||
<EditContactTag data={modaldata.item} onClose={closeModal} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -157,4 +157,67 @@ export const useActivitiesMaster = () =>
|
||||
}, [] )
|
||||
|
||||
return {categories,categoryLoading,categoryError}
|
||||
}
|
||||
}
|
||||
|
||||
export const useContactCategory = () =>
|
||||
{
|
||||
const [ contactCategory, setContactCategory ] = useState( [] )
|
||||
const [ loading, setLoading ] = useState( false )
|
||||
const [ Error, setError ] = useState()
|
||||
|
||||
const fetchConatctCategory = async() =>
|
||||
{
|
||||
const cache_Category = getCachedData( "Contact Category" );
|
||||
if ( !cache_Category )
|
||||
{
|
||||
try
|
||||
{
|
||||
let resp = await MasterRespository.getContactCategory();
|
||||
setContactCategory( resp.data );
|
||||
cacheData("Contact Category",resp.data)
|
||||
} catch ( error )
|
||||
{
|
||||
setError(error)
|
||||
}
|
||||
} else
|
||||
{
|
||||
setContactCategory(cache_Category)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect( () =>
|
||||
{
|
||||
fetchConatctCategory()
|
||||
}, [] )
|
||||
return { contactCategory,loading,Error}
|
||||
}
|
||||
export const useContactTags = () => {
|
||||
const [contactTags, setContactTags] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchContactTag = async () => {
|
||||
const cache_Tags = getCachedData("Contact Tag");
|
||||
|
||||
if (!cache_Tags) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const resp = await MasterRespository.getContactTag();
|
||||
setContactTags(resp.data);
|
||||
cacheData("Contact Tag", resp.data);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
setContactTags(cache_Tags);
|
||||
}
|
||||
};
|
||||
|
||||
fetchContactTag();
|
||||
}, []);
|
||||
|
||||
return { contactTags, loading, error };
|
||||
};
|
||||
@ -1,38 +1,63 @@
|
||||
import {useState} from "react"
|
||||
import {DirectoryRepository} from "../repositories/DirectoryRepository";
|
||||
import {cacheData, getCachedData} from "../slices/apiDataManager";
|
||||
import { useEffect, useState } from "react";
|
||||
import { DirectoryRepository } from "../repositories/DirectoryRepository";
|
||||
import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
|
||||
export const useDirectory = () =>
|
||||
{
|
||||
const [ contacts, setContacts ] = useState( [] )
|
||||
const [ loading, setLoading ] = useState( false )
|
||||
const [ error, setError ] = useState();
|
||||
export const useDirectory = () => {
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
|
||||
|
||||
|
||||
const fetch = async() =>
|
||||
{
|
||||
const cache_contacts = getCachedData( "contacts" );
|
||||
if ( !cache_contacts )
|
||||
{
|
||||
setLoading(true)
|
||||
try
|
||||
{
|
||||
const response = await DirectoryRepository.GetContacts();
|
||||
setContacts( response.data )
|
||||
cacheData("contacts",response.data)
|
||||
} catch ( error )
|
||||
{
|
||||
setError( error );
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetch = async () => {
|
||||
const cache_contacts = getCachedData("contacts");
|
||||
if (!cache_contacts) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await DirectoryRepository.GetContacts();
|
||||
setContacts(response.data);
|
||||
cacheData("contacts", response.data);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
setContacts(cache_contacts);
|
||||
}
|
||||
};
|
||||
|
||||
useState( () =>
|
||||
{
|
||||
fetch()
|
||||
}, [] )
|
||||
return {contacts,loading,error}
|
||||
}
|
||||
useState(() => {
|
||||
fetch();
|
||||
}, []);
|
||||
return { contacts, loading, error };
|
||||
};
|
||||
|
||||
export const useBuckets = () => {
|
||||
const [buckets, setBuckets] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const fetchBuckets = async () => {
|
||||
const cacheBuckets = getCachedData("buckets");
|
||||
if (!cacheBuckets) {
|
||||
setLoading( true );
|
||||
try {
|
||||
const resp = await DirectoryRepository.GetBucktes();
|
||||
setBuckets(resp.data);
|
||||
cacheData( "buckets", resp.data );
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error?.response?.data?.message || error?.message || "Something went wrong";
|
||||
setError(msg);
|
||||
}
|
||||
} else {
|
||||
setBuckets(cacheBuckets);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchBuckets();
|
||||
}, []);
|
||||
|
||||
return { buckets, loading, error };
|
||||
};
|
||||
|
||||
@ -164,4 +164,7 @@ padding: 1px !important;
|
||||
|
||||
.accordion-button:not(.collapsed) .toggle-icon {
|
||||
content: "\f146"; /* minus-circle */
|
||||
}
|
||||
.hoverBox:hover{
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
@ -1,18 +1,102 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useMemo, 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";
|
||||
import ListViewDirectory from "../../components/Directory/ListViewDirectory";
|
||||
import {useDirectory} from "../../hooks/useDirectory";
|
||||
|
||||
import { useDirectory } from "../../hooks/useDirectory";
|
||||
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import showToast from "../../services/toastService";
|
||||
import UpdateContact from "../../components/Directory/UpdateContact";
|
||||
import CardViewDirectory from "../../components/Directory/CardViewDirectory";
|
||||
import { useContactCategory } from "../../hooks/masterHook/useMaster";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
|
||||
const Directory = () => {
|
||||
const [isOpenModal, setIsOpenModal] = useState(false);
|
||||
const closedModel = () => setIsOpenModal( false );
|
||||
|
||||
const {contacts} = useDirectory();
|
||||
console.log(contacts)
|
||||
const [selectedContact, setSelectedContact] = useState(null);
|
||||
const [ContatList, setContactList] = useState([]);
|
||||
const [contactCategories, setContactCategories] = useState([]);
|
||||
const [ searchText, setSearchText ] = useState( "" );
|
||||
const [listView, setListView] = useState(true);
|
||||
|
||||
const { contacts, loading } = useDirectory();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const submitContact = async (data) => {
|
||||
try {
|
||||
let response;
|
||||
let updatedContacts;
|
||||
const contacts_cache = getCachedData("contacts") || [];
|
||||
|
||||
if (selectedContact) {
|
||||
response = await DirectoryRepository.UpdateContact(data.id, data);
|
||||
updatedContacts = contacts_cache.map((contact) =>
|
||||
contact.id === data.id ? response.data : contact
|
||||
);
|
||||
showToast("Contact updated successfully", "success");
|
||||
setIsOpenModal(false);
|
||||
setSelectedContact(null);
|
||||
} else {
|
||||
response = await DirectoryRepository.CreateContact(data);
|
||||
updatedContacts = [...contacts_cache, response.data];
|
||||
showToast("Contact created successfully", "success");
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
|
||||
setContactList(updatedContacts);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
"Error occurred during API call!";
|
||||
showToast(msg, "error");
|
||||
}
|
||||
};
|
||||
|
||||
const closedModel = () => {
|
||||
setIsOpenModal(false);
|
||||
setSelectedContact(null);
|
||||
};
|
||||
useEffect(() => {
|
||||
setContactList(contacts);
|
||||
}, [contacts]);
|
||||
|
||||
const [selectedCategoryIds, setSelectedCategoryIds] = useState(
|
||||
contactCategory.map((category) => category.id)
|
||||
);
|
||||
|
||||
const usedCategoryIds = [
|
||||
...new Set(contacts.map((c) => c.contactCategory?.id)),
|
||||
];
|
||||
const filteredCategories = contactCategory.filter((category) =>
|
||||
usedCategoryIds.includes(category.id)
|
||||
);
|
||||
const handleCategoryChange = (id) => {
|
||||
setSelectedCategoryIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
const filteredContacts = useMemo(() => {
|
||||
return ContatList
|
||||
.filter((c) => {
|
||||
const matchesSearch =
|
||||
c.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
c.organization.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesCategory =
|
||||
selectedCategoryIds.length === 0 ||
|
||||
selectedCategoryIds.includes(c.contactCategory?.id);
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [ContatList, searchText, selectedCategoryIds]);
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredContacts,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<Breadcrumb
|
||||
@ -22,35 +106,112 @@ const Directory = () => {
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
|
||||
<ManageDirectory />
|
||||
</GlobalModel>
|
||||
|
||||
{isOpenModal && (
|
||||
<GlobalModel
|
||||
isOpen={isOpenModal}
|
||||
closeModal={() => setIsOpenModal(false)}
|
||||
size="lg"
|
||||
>
|
||||
{selectedContact ? (
|
||||
<UpdateContact
|
||||
existingContact={selectedContact}
|
||||
submitContact={submitContact}
|
||||
onCLosed={closedModel}
|
||||
/>
|
||||
) : (
|
||||
<ManageDirectory
|
||||
submitContact={submitContact}
|
||||
onCLosed={closedModel}
|
||||
/>
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="card p-2">
|
||||
<div className="row mx-0 px-0">
|
||||
<div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
|
||||
<div className="row mx-0 px-0 align-items-center">
|
||||
<div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center ">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control form-control-sm me-2"
|
||||
placeholder="Search Contact..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
<div className="d-flex gap-2 ">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs ${
|
||||
!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-xs ${
|
||||
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">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-filter bx-lg ms-1"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
<p className="small-text">Apply Filter</p>
|
||||
{filteredCategories.map(({ id, name }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`cat-${id}`}
|
||||
checked={selectedCategoryIds.includes(id)}
|
||||
onChange={() => handleCategoryChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{name}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
|
||||
|
||||
<div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary `}
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={() => setIsOpenModal(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
New Contact
|
||||
<span className="d-sm-block d-none"> New Contact</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap py-2 ">
|
||||
{
|
||||
listView ? (
|
||||
<div className="table-responsive text-nowrap py-2 ">
|
||||
<table className="table px-2">
|
||||
<thead >
|
||||
<tr>
|
||||
<th>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
<IconButton
|
||||
size={12}
|
||||
@ -61,8 +222,8 @@ const Directory = () => {
|
||||
<span>Name</span>
|
||||
</div>
|
||||
</th>
|
||||
<th colSpan="2" className="px-2 text-center">
|
||||
<div className="d-flex text-center align-items-center gap-1 justify-content-center">
|
||||
<th className="px-2 text-start">
|
||||
<div className="d-flex text-center align-items-center gap-1 justify-content-start">
|
||||
<IconButton
|
||||
size={12}
|
||||
iconClass="bx bx-envelope"
|
||||
@ -93,40 +254,7 @@ const Directory = () => {
|
||||
<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"
|
||||
>
|
||||
Category <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">Category</th>
|
||||
<th
|
||||
// className={`mx-2 ${
|
||||
// HasManageProject ? "d-sm-table-cell" : "d-none"
|
||||
@ -137,12 +265,90 @@ const Directory = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 overflow-auto ">
|
||||
{contacts.map((contact) => (
|
||||
<ListViewDirectory contact={contact} />
|
||||
))}
|
||||
{loading && ContatList.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading && contacts.length == 0 && ContatList.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>No Contact Found</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<ListViewDirectory
|
||||
key={contact.id}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{currentItems.map((contact, index) => (
|
||||
<div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
|
||||
<CardViewDirectory contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{!loading && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_MASTER } from "../../utils/constants";
|
||||
import { ITEMS_PER_PAGE, MANAGE_MASTER } from "../../utils/constants";
|
||||
import showToast from "../../services/toastService";
|
||||
|
||||
const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
@ -21,7 +21,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
const safeData = Array.isArray(data) ? data : [];
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(20);
|
||||
const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
||||
|
||||
const sortKeys = {
|
||||
"Application Role": "role",
|
||||
|
||||
@ -9,7 +9,7 @@ import showToast from "../../services/toastService";
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
|
||||
import ProjectListView from "./ProjectListView";
|
||||
|
||||
const ProjectList = () => {
|
||||
@ -25,7 +25,7 @@ const ProjectList = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(10);
|
||||
const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedStatuses, setSelectedStatuses] = useState([
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import {api} from "../utils/axiosClient";
|
||||
|
||||
export const DirectoryRepository = {
|
||||
GetContacts: () => api.get('/api/directory'),
|
||||
GetContacts: () => api.get( '/api/directory' ),
|
||||
CreateContact: ( data ) => api.post( '/api/directory', data ),
|
||||
UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
|
||||
|
||||
GetBucktes:()=>api.get(`/api/Directory/buckets`)
|
||||
}
|
||||
@ -54,6 +54,6 @@ export const MasterRespository = {
|
||||
|
||||
getContactTag: () => api.get( `/api/master/contact-tags` ),
|
||||
createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
|
||||
updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/${ id }`, data )
|
||||
updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data )
|
||||
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
export const THRESH_HOLD = 48; // hours
|
||||
export const DURATION_TIME = 10; // minutes
|
||||
export const ITEMS_PER_PAGE = 20;
|
||||
|
||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user