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

initially contactfilter added

Browse Source
This commit is contained in:
pramod mahajan 2025-09-09 12:09:03 +05:30
parent 1abed1de3a
commit b91487712d
10 changed files with 710 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Directory/DirectorySchema.js
View File

@ -63,4 +63,18 @@ bucketIds: z.array(z.string()).nonempty({ message: "At least one bucket is requi
export const bucketScheam = z.object( {
name: z.string().min( 1, {message: "Name is required"} ),
description:z.string().min(1,{message:"Description is required"})
})
})
export const defaultContactValue = {
name: "",
organization: "",
contactCategoryId: null,
address: "",
description: "",
designation: "",
projectIds: [],
contactEmails: [],
contactPhones: [],
tags: [],
bucketIds: [],
}

100
src/components/Directory/ManageBucket.jsx
View File

@ -7,7 +7,7 @@ import showToast from "../../services/toastService";
import Directory from "../../pages/Directory/Directory";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import { useBuckets } from "../../hooks/useDirectory";
import { useBuckets, useCreateBucket, useUpdateBucket } from "../../hooks/useDirectory";
import EmployeeList from "./EmployeeList";
import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
import { useSortableData } from "../../hooks/useSortableData";
@ -37,6 +37,11 @@ const ManageBucket = () => {
key: (e) => `${e.name}`,
direction: "asc",
});
const { mutate: handleCreatedBucket, isPending: creatingBucket } =
useCreateBucket();
const {mutate:UpdateBucket,isPending:updatingBucket} = useUpdateBucket()
const getSortIcon = () => {
if (!sortConfig) return null;
return sortConfig.direction === "asc" ? (
@ -74,7 +79,7 @@ const ManageBucket = () => {
};
if (selected_bucket) {
const payload = { ...data, id: selected_bucket.id };
const BucketPayload = { ...data, id: selected_bucket.id };
response = await DirectoryRepository.UpdateBuckets(
selected_bucket.id,
@ -128,14 +133,19 @@ const ManageBucket = () => {
setBucketList(updatedData);
showToast("Bucket Updated Successfully", "success");
UpdateBucket({bucketId:selected_bucket.id,BucketPayload:BucketPayload})
} else {
response = await DirectoryRepository.CreateBuckets(data);
// response = await DirectoryRepository.CreateBuckets(data);
const updatedBuckets = [...cache_buckets, response?.data];
cacheData("buckets", updatedBuckets);
setBucketList(updatedBuckets);
showToast("Bucket Created Successfully", "success");
// const updatedBuckets = [...cache_buckets, response?.data];
// cacheData("buckets", updatedBuckets);
// setBucketList(updatedBuckets);
// showToast("Bucket Created Successfully", "success");
const BucketPayload = data;
handleCreatedBucket(BucketPayload);
}
handleBack();
@ -237,8 +247,9 @@ const ManageBucket = () => {
onChange={(e) => setSearchTerm(e.target.value)}
/>
<i
className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
}`}
className={`bx bx-refresh cursor-pointer fs-4 ${
loading ? "spin" : ""
}`}
title="Refresh"
onClick={() => refetch()}
/>
@ -247,8 +258,9 @@ const ManageBucket = () => {
<button
type="button"
className={`btn btn-sm btn-primary ms-auto ${action_bucket ? "d-none" : ""
}`}
className={`btn btn-sm btn-primary ms-auto ${
action_bucket ? "d-none" : ""
}`}
onClick={() => {
setAction_bucket(true);
select_bucket(null);
@ -285,16 +297,18 @@ const ManageBucket = () => {
</div>
)}
{!loading && buckets.length > 0 && sortedBucktesList.length === 0 && (
<div className="col-12">
<div
className="d-flex justify-content-center align-items-center py-5 w-100"
style={{ marginLeft: "250px" }}
>
No matching buckets found.
{!loading &&
buckets.length > 0 &&
sortedBucktesList.length === 0 && (
<div className="col-12">
<div
className="d-flex justify-content-center align-items-center py-5 w-100"
style={{ marginLeft: "250px" }}
>
No matching buckets found.
</div>
</div>
</div>
)}
)}
{!loading &&
sortedBucktesList.map((bucket) => (
<div className="col" key={bucket.id}>
@ -305,29 +319,29 @@ const ManageBucket = () => {
{(DirManager ||
DirAdmin ||
bucket?.createdBy?.id ===
profile?.employeeInfo?.id) && (
<div className="d-flex gap-2">
<i
className="bx bx-edit bx-sm text-primary cursor-pointer"
onClick={() => {
select_bucket(bucket);
setAction_bucket(true);
const initialSelectedEmployees = employeesList
.filter((emp) =>
bucket.employeeIds?.includes(
emp.employeeId
)
profile?.employeeInfo?.id) && (
<div className="d-flex gap-2">
<i
className="bx bx-edit bx-sm text-primary cursor-pointer"
onClick={() => {
select_bucket(bucket);
setAction_bucket(true);
const initialSelectedEmployees = employeesList
.filter((emp) =>
bucket.employeeIds?.includes(
emp.employeeId
)
.map((emp) => ({ ...emp, isActive: true }));
setSelectEmployee(initialSelectedEmployees);
}}
></i>
<i
className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
onClick={() => setDeleteBucket(bucket?.id)}
></i>
</div>
)}
)
.map((emp) => ({ ...emp, isActive: true }));
setSelectEmployee(initialSelectedEmployees);
}}
></i>
<i
className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
onClick={() => setDeleteBucket(bucket?.id)}
></i>
</div>
)}
</h6>
<h6 className="card-subtitle mb-2 text-muted text-start">
Contacts:{" "}

471
src/components/Directory/ManageContact.jsx Normal file
View File

@ -0,0 +1,471 @@
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,
useCreateContact,
useDesignation,
useOrganization,
} from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
import InputSuggestions from "../common/InputSuggestion";
import Label from "../common/Label";
const ManageContact = ({ 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 { organizationList, loading: orgLoading } = useOrganization();
const { designationList, loading: designloading } = useDesignation();
const { contactTags, loading: Tagloading } = useContactTags();
const [IsSubmitting, setSubmitting] = useState(false);
const [showSuggestions, setShowSuggestions] = useState(false);
const [filteredDesignationList, setFilteredDesignationList] = useState([]);
const dispatch = useDispatch();
const methods = useForm({
resolver: zodResolver(ContactSchema),
defaultValues: defaultContactValue,
});
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" });
useEffect(() => {
if (emailFields.length === 0) {
appendEmail({ label: "Work", emailAddress: "" });
}
if (phoneFields.length === 0) {
appendPhone({ label: "Office", phoneNumber: "" });
}
}, [emailFields.length, phoneFields.length]);
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");
// handle logic when input of desgination is changed
const handleDesignationChange = (e) => {
const val = e.target.value;
const matches = designationList.filter((org) =>
org.toLowerCase().includes(val.toLowerCase())
);
setFilteredDesignationList(matches);
setShowSuggestions(true);
setTimeout(() => setShowSuggestions(false), 5000);
};
const handleSelectDesignation = (val) => {
setShowSuggestions(false);
setValue("designation", val);
};
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 {mutate:CreateContact,isPending} = useCreateContact(()=> handleClosed())
const onSubmit = (data) => {
const contactPayload = {
...data,
contactEmails: (data.contactEmails || []).filter(
(e) => e.emailAddress?.trim() !== ""
),
contactPhones: (data.contactPhones || []).filter(
(p) => p.phoneNumber?.trim() !== ""
),
};
CreateContact(contactPayload)
};
const orgValue = watch("organization");
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 text-start">
<Label htmlFor={"name"} required>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 htmlFor={"Organization"} required>Organization</Label>
<InputSuggestions
organizationList={organizationList}
value={getValues("organization") || ""}
onChange={(val) => setValue("organization", val)}
error={errors.organization?.message}
/>
</div>
</div>
<div className="row mt-1">
<div className="col-md-6 text-start">
<Label htmlFor={"Designation"} required>Designation</Label>
<input
className="form-control form-control-sm"
{...register("designation")}
onChange={handleDesignationChange}
/>
{showSuggestions && filteredDesignationList.length > 0 && (
<ul
className="list-group shadow-sm position-absolute bg-white border w-50 zindex-tooltip"
style={{
maxHeight: "180px",
overflowY: "auto",
marginTop: "2px",
zIndex: 1000,
borderRadius: "0px",
}}
>
{filteredDesignationList.map((designation) => (
<li
key={designation}
className="list-group-item list-group-item-action border-none "
style={{
cursor: "pointer",
padding: "5px 12px",
fontSize: "14px",
transition: "background-color 0.2s",
}}
onMouseDown={() => handleSelectDesignation(designation)}
onMouseEnter={(e) =>
(e.currentTarget.style.backgroundColor = "#f8f9fa")
}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor = "transparent")
}
>
{designation}
</li>
))}
</ul>
)}
{errors.designation && (
<small className="danger-text">
{errors.designation.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 ? (
<i
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
onClick={handleAddEmail}
/>
) : (
<i
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
onClick={() => removeEmail(index)}
/>
)}
</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 ? (
<i
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
onClick={handleAddPhone}
/>
) : (
<i
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
onClick={() => removePhone(index)}
/>
)}
</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} isRequired={true} />
{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 Bucket</label>
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
{bucketsLoaging && <p>Loading...</p>}
{buckets?.map((item) => (
<li
key={item.id}
className="list-inline-item flex-shrink-0 me-6 mb-1"
>
<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="danger-text mt-0">
{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-end gap-3 py-2">
<button className="btn btn-sm btn-primary" type="submit">
{isPending ? "Please Wait..." : "Submit"}
</button>
<button
className="btn btn-sm btn-secondary"
type="button"
onClick={handleClosed}
>
Cancel
</button>
</div>
</form>
</FormProvider>
);
};
export default ManageContact;

27
src/components/Directory/ManageDirectory.jsx
View File

@ -40,7 +40,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
const { designationList, loading: designloading } = useDesignation();
const { contactTags, loading: Tagloading } = useContactTags();
const [IsSubmitting, setSubmitting] = useState(false);
const [showSuggestions,setShowSuggestions] = useState(false);
const [showSuggestions, setShowSuggestions] = useState(false);
const [filteredDesignationList, setFilteredDesignationList] = useState([]);
const dispatch = useDispatch();
@ -132,7 +132,6 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
setValue("designation", val);
};
const toggleBucketId = (id) => {
const updated = watchBucketIds?.includes(id)
? watchBucketIds.filter((val) => val !== id)
@ -277,23 +276,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
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 ms-1 cursor-pointer text-primary"
onClick={handleAddEmail}
/>
) : (
// <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 ms-1 cursor-pointer text-primary"
onClick={() => removeEmail(index)}
@ -341,23 +328,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
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 ms-1 cursor-pointer text-primary"
onClick={handleAddPhone}
/>
) : (
// <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 ms-1 cursor-pointer text-danager"
onClick={() => removePhone(index)}

77
src/components/common/TagInput.jsx
View File

@ -1,11 +1,13 @@
import { useFormContext, useWatch } from "react-hook-form";
import React, { useEffect, useState } from "react";
import Label from "./Label";
const TagInput = ({
label = "Tags",
name = "tags",
placeholder = "Start typing to add... like employee, manager",
color = "#e9ecef",
isRequired = false,
options = [],
}) => {
const [tags, setTags] = useState([]);
@ -14,15 +16,14 @@ const TagInput = ({
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(() => {
if (
Array.isArray(watchedTags) &&
JSON.stringify(tags) !== JSON.stringify(watchedTags)
) {
setTags(watchedTags);
}
}, [JSON.stringify(watchedTags)]);
useEffect(() => {
if (input.trim() === "") {
@ -60,7 +61,7 @@ useEffect(() => {
};
const handleInputKeyDown = (e) => {
if ((e.key === "Enter" || e.key === " ")&& input.trim() !== "") {
if ((e.key === "Enter" || e.key === " ") && input.trim() !== "") {
e.preventDefault();
const existing = options.find(
(opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
@ -78,26 +79,31 @@ useEffect(() => {
}
};
const handleInputKey = (e) => {
const key = e.key?.toLowerCase();
if ((key === "enter" || key === " " || e.code === "Space") && 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 ((key === "backspace" || e.code === "Backspace") && input === "") {
setTags((prev) => prev.slice(0, -1));
}
};
const key = e.key?.toLowerCase();
if (
(key === "enter" || key === " " || e.code === "Space") &&
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 (
(key === "backspace" || e.code === "Backspace") &&
input === ""
) {
setTags((prev) => prev.slice(0, -1));
}
};
const handleSuggestionClick = (suggestion) => {
addTag(suggestion);
@ -108,9 +114,9 @@ useEffect(() => {
return (
<>
<label htmlFor={name} className="form-label">
<Label htmlFor={name} required={isRequired}>
{label}
</label>
</Label>
<div
className="form-control form-control-sm p-1"
@ -143,7 +149,7 @@ useEffect(() => {
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleInputKeyDown}
onKeyUp={handleInputKey}
onKeyUp={handleInputKey}
placeholder={placeholder}
style={{
border: "none",
@ -161,7 +167,9 @@ useEffect(() => {
zIndex: 1000,
maxHeight: "150px",
overflowY: "auto",
boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
borderRadius: "3px",
border: "1px solid #ddd",
}}
>
{suggestions.map((sugg, i) => (
@ -169,8 +177,7 @@ useEffect(() => {
key={i}
className="dropdown-item p-1 hoverBox"
onClick={() => handleSuggestionClick(sugg)}
style={{cursor: "pointer", fontSize: "0.875rem"}}
style={{ cursor: "pointer", fontSize: "0.875rem" }}
>
{sugg.name}
</li>

82
src/hooks/useDirectory.js
View File

@ -239,6 +239,49 @@ export const useDirectoryNotes = (
),
});
};
const cleanFilter = (filter) => {
const cleaned = { ...filter };
["bucketIds", "categories"].forEach((key) => {
if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
delete cleaned[key];
}
});
return cleaned;
};
export const useContactList = (
isActive,
projectId,
pageSize,
pageNumber,
filter,
searchString
) => {
return useQuery({
queryKey: [
"contacts",
isActive,
projectId,
pageSize,
pageNumber,
JSON.stringify(filter),
searchString,
],
queryFn: async () => {
const cleanedFilter = cleanFilter(filter);
const resp = await DirectoryRepository.GetContacts(
isActive,
projectId,
pageSize,
pageNumber,
cleanedFilter,
searchString
);
return resp.data; // returning only the data
},
});
};
// ---------------------------Mutation------------------------------------------------------------------
@ -322,3 +365,42 @@ export const useDeleteBucket = (onSuccessCallBack) => {
});
};
export const useCreateContact = ()=>{
const queryClient = useQueryClient();
return useMutation({
mutationFn:async(contactPayload) => await DirectoryRepository.CreateContact(contactPayload),
onSuccess: (_, variables) => {
// queryClient.invalidateQueries({queryKey: ["bucketList"]})
showToast("Contact created Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.response.data.message ||
"Something went wrong.Please try again later.",
"error"
);
}
})
}
export const useUpdateContact =()=>{
const queryClient = useQueryClient();
return useMutation({
mutationFn:async({conatctId,contactPayload})=> await DirectoryRepository.UpdateContact(conatctId,contactPayload),
onSuccess: (_, variables) => {
// queryClient.invalidateQueries({queryKey: ["bucketList"]})
showToast("Contact updated Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.response.data.message ||
"Something went wrong.Please try again later.",
"error"
);
}
})
}

41
src/pages/Directory/ContactsPage.jsx
View File

@ -1,23 +1,24 @@
import React, { useEffect } from 'react'
import { useFab } from '../../Context/FabContext';
import React, { useEffect } from "react";
import { useFab } from "../../Context/FabContext";
import { useContactList } from "../../hooks/useDirectory";
const ContactsPage = () => {
const {setOffcanvasContent,setShowTrigger} = useFab()
useEffect(() => {
setShowTrigger(true);
setOffcanvasContent(
"Contacts Filters",
<div>hlleo</div>
);
return () => {
setShowTrigger(false);
setOffcanvasContent("", null);
};
}, []);
return (
<div>ContactsPage</div>
)
}
export default ContactsPage
const {data,isError,isLoading,error} = useContactList()
const { setOffcanvasContent, setShowTrigger } = useFab();
useEffect(() => {
setShowTrigger(true);
setOffcanvasContent("Contacts Filters", <div>hlleo</div>);
return () => {
setShowTrigger(false);
setOffcanvasContent("", null);
};
}, []);
if(isError) return <div>{error.message}</div>
if(isLoading) return <div>Loading...</div>
return <div className="container"></div>;
};
export default ContactsPage;

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

@ -41,7 +41,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
// const [selectedOrgs, setSelectedOrgs] = useState([]);
// ✅ Changed to an array for multiple selections
const [selectedNoteNames, setSelectedNoteNames] = useState([]);
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);

10
src/pages/Directory/DirectoryPage.jsx
View File

@ -12,6 +12,7 @@ import { useBucketList, useBuckets } from "../../hooks/useDirectory";
import GlobalModel from "../../components/common/GlobalModel";
import ManageBucket from "../../components/Directory/ManageBucket";
import ManageBucket1 from "../../components/Directory/ManageBucket1";
import ManageContact from "../../components/Directory/ManageContact";
const NotesPage = lazy(() => import("./NotesPage"));
const ContactsPage = lazy(() => import("./ContactsPage"));
@ -33,6 +34,7 @@ export default function DirectoryPage({ IsPage = true }) {
const [activeTab, setActiveTab] = useState("notes");
const { setActions } = useFab();
const [isOpenBucket, setOpenBucket] = useState(false);
const [isManageContact,setManageContact] = useState(false)
const { data, isLoading, isError, error } = useBucketList();
@ -57,7 +59,7 @@ export default function DirectoryPage({ IsPage = true }) {
label: "New Contact",
icon: "bx bx-plus-circle",
color: "warning",
// onClick: ()=>setOpenBucket(true),
onClick: ()=>setManageContact(true),
});
}
@ -181,6 +183,12 @@ export default function DirectoryPage({ IsPage = true }) {
<ManageBucket1 closeModal={() => setOpenBucket(false)} />
</GlobalModel>
)}
{isManageContact && (
<GlobalModel size="lg" isOpen={isManageContact} closeModal={()=>setManageContact(false)}>
<ManageContact closeModal={()=>setManageContact(false)}/>
</GlobalModel>
)}
</div>
</DirectoryContext.Provider>
</>

12
src/repositories/DirectoryRepository.jsx
View File

@ -13,6 +13,18 @@ export const DirectoryRepository = {
return api.get(`/api/Directory?${params.toString()}`);
},
GetContact: (isActive, projectId, pageSize, pageNumber, filter, searchString) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(
`/api/directory/notes?active=${isActive}` +
(projectId ? `&projectId=${projectId}` : "") +
`&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${encodeURIComponent(payloadJsonString)}&searchString=${encodeURIComponent(searchString)}`
);
},
GetContactFilter:()=>api.get("directory/contact/filter"),
CreateContact: (data) => api.post("/api/directory", data),
UpdateContact: (id, data) => api.put(`/api/directory/${id}`, data),
DeleteContact: (id, isActive) =>