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

Adding placeholder and adding in TagInput a background color.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-17 15:44:03 +05:30
parent 679ae95b8c
commit 6598ec9f73
3 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@ import Label from "../common/Label";
const ManageContact = ({ contactId, closeModal }) => {
// fetch master data
const { buckets, loading: bucketsLoaging } = useBuckets();
const { data:projects, loading: projectLoading } = useProjects();
const { data: projects, loading: projectLoading } = useProjects();
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { organizationList } = useOrganization();
@ -205,12 +205,12 @@ const ManageContact = ({ contactId, closeModal }) => {
<Label htmlFor={"organization"} required>
Organization
</Label>
<InputSuggestions
organizationList={organizationList}
value={watch("organization") || ""}
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
error={errors.organization?.message}
/>
<InputSuggestions
organizationList={organizationList}
value={watch("organization") || ""}
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
error={errors.organization?.message}
/>
</div>
</div>
@ -408,6 +408,7 @@ const ManageContact = ({ contactId, closeModal }) => {
label="Tags"
options={contactTags}
isRequired={true}
placeholder="Enter Tag"
/>
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
@ -482,7 +483,7 @@ const ManageContact = ({ contactId, closeModal }) => {
<button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
{isPending ? "Please Wait..." : "Submit"}
</button>
</div>
</form>
</FormProvider>

2
src/components/ServiceProject/ManageJob.jsx
View File

@ -108,6 +108,7 @@ const ManageJob = ({ Job }) => {
type="text"
{...register("title")}
className="form-control form-control"
placeholder="Enter Title"
/>
</div>
@ -144,6 +145,7 @@ const ManageJob = ({ Job }) => {
options={JobTags?.data}
name="tags"
label="Tag"
placeholder="Enter Tag"
required
/>
</div>

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

@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
import React, { useEffect, useState } from "react";
import Label from "./Label";
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required=false, options = [] }) => {
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
const { setValue, watch } = useFormContext();
const tags = watch(name) || [];
const [input, setInput] = useState("");
@ -33,29 +33,29 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required=false,
}
};
const handleChange = (e) => {
const val = e.target.value;
setInput(val);
const handleChange = (e) => {
const val = e.target.value;
setInput(val);
if (val) {
setSuggestions(
options
.filter((opt) => {
const label = typeof opt === "string" ? opt : opt.name;
return (
label.toLowerCase().includes(val.toLowerCase()) &&
!tags.some((t) => t.name === label)
);
})
.map((opt) => ({
name: typeof opt === "string" ? opt : opt.name,
isActive: true,
}))
);
} else {
setSuggestions([]);
}
};
if (val) {
setSuggestions(
options
.filter((opt) => {
const label = typeof opt === "string" ? opt : opt.name;
return (
label.toLowerCase().includes(val.toLowerCase()) &&
!tags.some((t) => t.name === label)
);
})
.map((opt) => ({
name: typeof opt === "string" ? opt : opt.name,
isActive: true,
}))
);
} else {
setSuggestions([]);
}
};
const handleSuggestionClick = (sugg) => {
handleAdd(sugg);
@ -105,6 +105,9 @@ const handleChange = (e) => {
outline: "none",
flex: 1,
minWidth: "120px",
backgroundColor: "white",
color: "black"
}}
/>
</div>