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

Adding color in Select Bucket at Create contact.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-09 11:02:50 +05:30
parent a6dfc7b7b0
commit a0257c1252
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Directory/ManageContact.jsx
View File

@ -21,6 +21,7 @@ import InputSuggestions from "../common/InputSuggestion";
import Label from "../common/Label"; import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm"; import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField"; import SelectField from "../common/Forms/SelectField";
import { BUCKET_BG_CLASSES } from "../../utils/constants";
const ManageContact = ({ contactId, closeModal }) => { const ManageContact = ({ contactId, closeModal }) => {
// fetch master data // fetch master data
@ -180,6 +181,7 @@ const ManageContact = ({ contactId, closeModal }) => {
}; };
const isPending = updating || creating; const isPending = updating || creating;
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}> <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
@ -467,13 +469,14 @@ const ManageContact = ({ contactId, closeModal }) => {
> >
{bucketsLoaging && <p>Loading...</p>} {bucketsLoaging && <p>Loading...</p>}
{buckets?.map((item) => ( {buckets?.map((item, index) => (
<div <div
key={item.id} key={item.id}
className="card p-3 shadow-sm flex-shrink-0" className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES [index % BUCKET_BG_CLASSES.length]}`}
onClick={() => handleCheckboxChange(item.id)} onClick={() => handleCheckboxChange(item.id)}
> >
<div className="form-check">
<div className="form-check m-0">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@ -481,14 +484,17 @@ const ManageContact = ({ contactId, closeModal }) => {
checked={watchBucketIds.includes(item.id)} checked={watchBucketIds.includes(item.id)}
onChange={() => handleCheckboxChange(item.id)} onChange={() => handleCheckboxChange(item.id)}
/> />
<label className="form-check-label ms-2" htmlFor={`item-${item.id}`}> <label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
{item.name} {item.name}
</label> </label>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div>
<div className="text-start mt-3 mb-3">
{errors.bucketIds && ( {errors.bucketIds && (
<small className="danger-text">{errors.bucketIds.message}</small> <small className="danger-text">{errors.bucketIds.message}</small>
)} )}

13
src/utils/constants.jsx
View File

@ -258,3 +258,16 @@ export const JOBS_STATUS_IDS = [
label: "On Hold", label: "On Hold",
}, },
]; ];
export const BUCKET_BG_CLASSES = [
"bg-label-primary bg-opacity-10",
"bg-label-secondary bg-opacity-10",
"bg-label-success bg-opacity-10",
"bg-label-info bg-opacity-10",
"bg-label-warning bg-opacity-10",
"bg-label-danger bg-opacity-10",
"bg-label-dark bg-opacity-10",
"bg-label-primary bg-opacity-25",
"bg-label-success bg-opacity-25",
"bg-label-info bg-opacity-25",
];