143 lines
4.6 KiB
JavaScript
143 lines
4.6 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { FormProvider, useForm } from "react-hook-form";
|
|
import {
|
|
useCreateOrganization,
|
|
useOrganizationModal,
|
|
useUpdateOrganization,
|
|
} from "../../hooks/useOrganization";
|
|
import {
|
|
defaultOrganizationValues,
|
|
organizationSchema,
|
|
} from "./OrganizationSchema";
|
|
import Label from "../common/Label";
|
|
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import SelectMultiple from "../common/SelectMultiple";
|
|
|
|
const ManagOrg = () => {
|
|
const { data: service, isLoading } = useGlobalServices();
|
|
const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
|
|
useOrganizationModal();
|
|
|
|
const method = useForm({
|
|
resolver: zodResolver(organizationSchema),
|
|
defaultValues: defaultOrganizationValues,
|
|
});
|
|
|
|
const {
|
|
handleSubmit,
|
|
register,
|
|
reset,
|
|
formState: { errors },
|
|
} = method;
|
|
|
|
// Create & Update mutations
|
|
const { mutate: createOrganization, isPending: isCreating } = useCreateOrganization(() => {
|
|
reset(defaultOrganizationValues);
|
|
onOpen({ startStep: 1 });
|
|
onClose();
|
|
});
|
|
|
|
const { mutate: updateOrganization, isPending: isUpdating } = useUpdateOrganization(() => {
|
|
reset(defaultOrganizationValues);
|
|
onOpen({ startStep: 1 });
|
|
onClose();
|
|
});
|
|
|
|
// Prefill form if editing
|
|
useEffect(() => {
|
|
if (orgData) {
|
|
console.log(orgData)
|
|
reset({
|
|
name: orgData.name || "",
|
|
contactPerson: orgData.contactPerson || "",
|
|
contactNumber: orgData.contactNumber || "",
|
|
email: orgData.email || "",
|
|
serviceIds: orgData.services?.map(s => s.id) || [],
|
|
address: orgData.address || "",
|
|
});
|
|
}
|
|
}, [orgData, reset]);
|
|
|
|
const onSubmit = (payload) => {
|
|
if (orgData?.id) {
|
|
updateOrganization({ id: orgData.id, ...payload });
|
|
} else {
|
|
createOrganization(payload);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FormProvider {...method}>
|
|
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="name" required>Organization Name</Label>
|
|
<input className="form-control form-control-sm" {...register("name")} />
|
|
{errors.name && <span className="danger-text">{errors.name.message}</span>}
|
|
</div>
|
|
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="contactPerson" required>Contact Person</Label>
|
|
<input className="form-control form-control-sm" {...register("contactPerson")} />
|
|
{errors.contactPerson && <span className="danger-text">{errors.contactPerson.message}</span>}
|
|
</div>
|
|
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
|
<input className="form-control form-control-sm" {...register("contactNumber")} />
|
|
{errors.contactNumber && <span className="danger-text">{errors.contactNumber.message}</span>}
|
|
</div>
|
|
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="email" required>Email Address</Label>
|
|
<input className="form-control form-control-sm" {...register("email")} />
|
|
{errors.email && <span className="danger-text">{errors.email.message}</span>}
|
|
</div>
|
|
|
|
<div className="mb-1 text-start">
|
|
<SelectMultiple
|
|
name="serviceIds"
|
|
label="Services"
|
|
required
|
|
valueKey="id"
|
|
options={service?.data || []}
|
|
/>
|
|
{errors.serviceIds && <span className="danger-text">{errors.serviceIds.message}</span>}
|
|
</div>
|
|
|
|
<div className="mb-1 text-start">
|
|
<Label htmlFor="address" required>Address</Label>
|
|
<textarea
|
|
className="form-control form-control-sm"
|
|
{...register("address")}
|
|
rows={2}
|
|
/>
|
|
{errors.address && <span className="danger-text">{errors.address.message}</span>}
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-between gap-2 my-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-outline-secondary"
|
|
onClick={() => onOpen({ startStep: prevStep })}
|
|
>
|
|
← --Back
|
|
</button>
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="btn btn-sm btn-primary"
|
|
disabled={isCreating || isUpdating || isLoading}
|
|
>
|
|
{isCreating || isUpdating ? "Please Wait..." : orgData ? "Update" : "Submit"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
};
|
|
|
|
|
|
export default ManagOrg;
|