Implementing the Update api for branches.
This commit is contained in:
parent
d3c006279c
commit
d167c57ab0
@ -21,6 +21,15 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
error: requestError,
|
||||
} = useBranchDetails(BranchToEdit);
|
||||
|
||||
const [contacts, setContacts] = React.useState([
|
||||
{
|
||||
contactPerson: "",
|
||||
designation: "",
|
||||
contactEmails: [""],
|
||||
contactNumbers: [""]
|
||||
}
|
||||
]);
|
||||
|
||||
const { projectId } = useParams();
|
||||
const schema = BranchSchema();
|
||||
const {
|
||||
@ -49,14 +58,22 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
reset({
|
||||
branchName: data.branchName || "",
|
||||
projectId: data.project?.id || projectId || "",
|
||||
contactInformation: data.contactInformation || "",
|
||||
address: data.address || "",
|
||||
branchType: data.branchType || "",
|
||||
googleMapUrl: data.googleMapUrl || "",
|
||||
});
|
||||
|
||||
if (data.contactInformation) {
|
||||
try {
|
||||
setContacts(JSON.parse(data.contactInformation));
|
||||
} catch {
|
||||
setContacts([]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
|
||||
const { mutate: CreateServiceBranch, isPending: createPending } =
|
||||
useCreateBranch(() => {
|
||||
handleClose();
|
||||
@ -65,19 +82,23 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
handleClose()
|
||||
);
|
||||
|
||||
const onSubmit = (fromdata) => {
|
||||
const onSubmit = (formdata) => {
|
||||
let payload = {
|
||||
...fromdata,
|
||||
...data,
|
||||
...formdata,
|
||||
projectId,
|
||||
contactInformation: JSON.stringify(contacts), // ← important
|
||||
};
|
||||
|
||||
if (BranchToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
ServiceBranchUpdate({ id: data.id, payload: editPayload });
|
||||
ServiceBranchUpdate({ id: data.id, payload });
|
||||
} else {
|
||||
CreateServiceBranch(payload);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<h5 className="m-0">
|
||||
@ -100,26 +121,6 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.branchName.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="contactInformation" className="form-label" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
id="contactInformation"
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactInformation")}
|
||||
/>
|
||||
{errors.contactInformation && (
|
||||
<small className="danger-text">
|
||||
{errors.contactInformation.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="branchType" className="form-label" required>
|
||||
Branch Type
|
||||
@ -134,8 +135,13 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
<small className="danger-text">{errors.branchType.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="googleMapUrl" className="form-label" required>
|
||||
<Label htmlFor="googleMapUrl" className="form-label">
|
||||
Google Map URL
|
||||
</Label>
|
||||
<input
|
||||
@ -152,6 +158,169 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-12">
|
||||
<Label className="form-label" required>Contact Persons</Label>
|
||||
|
||||
{contacts.map((item, index) => (
|
||||
<div key={index} className="border rounded p-2 mb-3">
|
||||
|
||||
{/* Contact Person + Designation */}
|
||||
<div className="row mb-2">
|
||||
<div className="col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Contact Person"
|
||||
className="form-control form-control-sm"
|
||||
value={item.contactPerson}
|
||||
onChange={(e) => {
|
||||
const list = [...contacts];
|
||||
list[index].contactPerson = e.target.value;
|
||||
setContacts(list);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Designation"
|
||||
className="form-control form-control-sm"
|
||||
value={item.designation}
|
||||
onChange={(e) => {
|
||||
const list = [...contacts];
|
||||
list[index].designation = e.target.value;
|
||||
setContacts(list);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Remove entire contact */}
|
||||
<div className="col-md-2 d-flex align-items-center">
|
||||
<i
|
||||
className="bx bx-trash text-danger cursor-pointer"
|
||||
onClick={() =>
|
||||
setContacts(contacts.filter((_, i) => i !== index))
|
||||
}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Numbers Section */}
|
||||
<Label className="form-label">Contact Numbers</Label>
|
||||
|
||||
{item.contactNumbers.map((num, numIndex) => (
|
||||
<div key={numIndex} className="d-flex gap-2 mb-2 align-items-center">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Number"
|
||||
className="form-control form-control-sm"
|
||||
maxLength={10}
|
||||
value={num}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, ""); // remove non-digit characters
|
||||
const list = [...contacts];
|
||||
list[index].contactNumbers[numIndex] = value;
|
||||
setContacts(list);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Show PLUS only on last row */}
|
||||
{numIndex === item.contactNumbers.length - 1 ? (
|
||||
<i
|
||||
className="bx bx-plus-circle text-primary cursor-pointer fs-5"
|
||||
onClick={() => {
|
||||
const list = [...contacts];
|
||||
list[index].contactNumbers.push("");
|
||||
setContacts(list);
|
||||
}}
|
||||
></i>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-minus-circle text-danger cursor-pointer fs-5"
|
||||
onClick={() => {
|
||||
const list = [...contacts];
|
||||
list[index].contactNumbers.splice(numIndex, 1);
|
||||
setContacts(list);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Emails Section */}
|
||||
<Label className="form-label">Contact Emails</Label>
|
||||
|
||||
{item.contactEmails.map((email, emailIndex) => (
|
||||
<div key={emailIndex} className="d-flex gap-2 mb-2 align-items-center">
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="form-control form-control-sm"
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
const list = [...contacts];
|
||||
list[index].contactEmails[emailIndex] = e.target.value;
|
||||
setContacts(list);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Show PLUS only on the last row */}
|
||||
{emailIndex === item.contactEmails.length - 1 ? (
|
||||
<i
|
||||
className="bx bx-plus-circle text-primary cursor-pointer fs-5"
|
||||
onClick={() => {
|
||||
const list = [...contacts];
|
||||
list[index].contactEmails.push("");
|
||||
setContacts(list);
|
||||
}}
|
||||
></i>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-minus-circle text-danger cursor-pointer fs-5"
|
||||
onClick={() => {
|
||||
const list = [...contacts];
|
||||
list[index].contactEmails.splice(emailIndex, 1);
|
||||
setContacts(list);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-2"
|
||||
onClick={() =>
|
||||
setContacts([
|
||||
...contacts,
|
||||
{
|
||||
contactPerson: "",
|
||||
designation: "",
|
||||
contactEmails: [""], // ← important
|
||||
contactNumbers: [""], // ← important
|
||||
},
|
||||
])
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus"></i> Add Contact
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
|
||||
<div className="col-12">
|
||||
|
||||
@ -138,11 +138,7 @@ export const BranchSchema = () =>
|
||||
.trim()
|
||||
.min(1, { message: "Branch Name is required" }),
|
||||
|
||||
contactInformation: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, { message: "Contact Information is required" }),
|
||||
|
||||
contactInformation: z.string().optional(),
|
||||
address: z
|
||||
.string()
|
||||
.trim()
|
||||
@ -155,8 +151,6 @@ export const BranchSchema = () =>
|
||||
|
||||
googleMapUrl: z
|
||||
.string()
|
||||
.trim()
|
||||
.url({ message: "Enter a valid Google Map URL" }),
|
||||
});
|
||||
|
||||
export const defaultBranches = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user