Adding dropdown across all places.
This commit is contained in:
parent
48ff718da4
commit
72b533226a
@ -144,31 +144,42 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
name="id"
|
||||
control={control}
|
||||
rules={{ required: "Floor is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Floor"
|
||||
options={[
|
||||
{ id: "0", name: "Add New Floor" },
|
||||
...(selectedBuilding?.floors
|
||||
?.filter((f) => f.floorName)
|
||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
|
||||
]}
|
||||
value={field.value || ""}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
handleFloorChange?.(value);
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!selectedBuilding?.floors || selectedBuilding.floors.length === 0
|
||||
? "No floors found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
render={({ field }) => {
|
||||
// Prepare options
|
||||
const floorOptions = [
|
||||
{ id: "0", name: "Add New Floor" },
|
||||
...(selectedBuilding?.floors
|
||||
?.filter((f) => f.floorName)
|
||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
|
||||
];
|
||||
|
||||
return (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Floor"
|
||||
options={floorOptions}
|
||||
value={field.value || "0"} // default to "0"
|
||||
onChange={(val) => {
|
||||
field.onChange(val); // update react-hook-form
|
||||
|
||||
if (val === "0") {
|
||||
setValue("floorName", ""); // clear for new floor
|
||||
} else {
|
||||
const floor = selectedBuilding?.floors?.find(f => f.id === val);
|
||||
setValue("floorName", floor?.floorName || "");
|
||||
}
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!selectedBuilding?.floors || selectedBuilding.floors.length === 0
|
||||
? "No floors found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
{errors.id && (
|
||||
|
||||
@ -8,10 +8,12 @@ import {
|
||||
useGroups,
|
||||
useWorkCategoriesMaster,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import showToast from "../../../services/toastService";
|
||||
import Label from "../../common/Label";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const taskSchema = z.object({
|
||||
buildingID: z.string().min(1, "Building is required"),
|
||||
@ -76,19 +78,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
setValue("activityID", "");
|
||||
};
|
||||
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(taskSchema),
|
||||
const methods = useForm({
|
||||
defaultValues: defaultModel,
|
||||
resolver: zodResolver(taskSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [activityData, setActivityData] = useState([]);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
@ -112,10 +108,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
const { mutate: CreateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) => {
|
||||
showToast(response?.message, "success");
|
||||
setValue("activityID",""),
|
||||
setValue("plannedWork",0),
|
||||
setValue("completedWork",0)
|
||||
setValue("comment","")
|
||||
setValue("activityID", ""),
|
||||
setValue("plannedWork", 0),
|
||||
setValue("completedWork", 0)
|
||||
setValue("comment", "")
|
||||
},
|
||||
});
|
||||
useEffect(() => {
|
||||
@ -148,224 +144,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Task</h5>
|
||||
</div>
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("buildingID")}
|
||||
>
|
||||
<option value="">Select Building</option>
|
||||
{project
|
||||
?.filter((b) => b?.buildingName)
|
||||
?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
|
||||
?.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingID && (
|
||||
<p className="danger-text">{errors.buildingID.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedBuilding && (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Task</h5>
|
||||
</div>
|
||||
{/* Select Building */}
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>Select Floor</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("floorId")}
|
||||
>
|
||||
<option value="">Select Floor</option>
|
||||
{selectedBuilding.floors
|
||||
?.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
?.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.floorId && (
|
||||
<p className="danger-text">{errors.floorId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Work Area Selection */}
|
||||
{selectedFloor && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Work Area</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workAreaId")}
|
||||
>
|
||||
<option value="">Select Work Area</option>
|
||||
{selectedFloor.workAreas
|
||||
?.sort((a, b) => a.areaName.localeCompare(b.areaName))
|
||||
?.map((w) => (
|
||||
<option key={w.id} value={w.id}>
|
||||
{w.areaName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workAreaId && (
|
||||
<p className="danger-text">{errors.workAreaId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Services Selection */}
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Service</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("serviceId")}
|
||||
value={selectedService}
|
||||
// onChange={handleServiceChange}
|
||||
onChange={(e) => {
|
||||
handleServiceChange(e);
|
||||
setValue("serviceId", e.target.value);
|
||||
}}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{servicesLoading && <option>Loading...</option>}
|
||||
{assignedServices?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity Group (Organization) Selection */}
|
||||
{selectedService && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Activity Group</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("activityGroupId")}
|
||||
value={selectedGroup}
|
||||
onChange={handleGroupChange}
|
||||
>
|
||||
<option value="">Select Group</option>
|
||||
{groupsLoading && <option>Loading...</option>}
|
||||
{groups?.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Activity Selection */}
|
||||
{selectedGroup && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Activity</Label>
|
||||
<select className="form-select form-select-sm" {...register("activityID")}>
|
||||
<option value="">Select Activity</option>
|
||||
{activitiesLoading && <option>Loading...</option>}
|
||||
{activities?.map((a) => (
|
||||
<option key={a.id} value={a.id}>{a.activityName}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchActivityId && (
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Work Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workCategoryId")}
|
||||
>
|
||||
{categoryData.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<p className="danger-text">{errors.workCategoryId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedActivity && selectedCategory && (
|
||||
<>
|
||||
<div className="col-5 text-start">
|
||||
<Label className="form-label" required>Planned Work</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("plannedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.plannedWork && (
|
||||
<p className="danger-text">{errors.plannedWork.message}</p>
|
||||
<AppFormController
|
||||
name="buildingID"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Building"
|
||||
options={project ?? []}
|
||||
placeholder="Select Building"
|
||||
required
|
||||
labelKey="buildingName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("floorId", "");
|
||||
setValue("workAreaId", "");
|
||||
setSelectedService("");
|
||||
setSelectedGroup("");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Completed Work</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("completedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.completedWork && (
|
||||
<p className="danger-text">{errors.completedWork.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-2 text-start">
|
||||
<label className="form-label">Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
disabled
|
||||
value={selectedActivity?.unitOfMeasurement || ""}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedActivity && selectedCategory && (
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Comment</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows="2"
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<p className="danger-text">{errors.comment.message}</p>
|
||||
{errors.buildingID && (
|
||||
<small className="danger-text">{errors.buildingID.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
// disabled={isSubmitting}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Add Task"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Select Floor */}
|
||||
{selectedBuilding && (
|
||||
<div className="col-6 text-start">
|
||||
<AppFormController
|
||||
name="floorId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Floor"
|
||||
options={selectedBuilding?.floors ?? []}
|
||||
placeholder={
|
||||
selectedBuilding?.floors?.length > 0
|
||||
? "Select Floor"
|
||||
: "No Floor Found"
|
||||
}
|
||||
required
|
||||
labelKey="floorName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("workAreaId", "");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.floorId && (
|
||||
<small className="danger-text">{errors.floorId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Work Area */}
|
||||
{selectedFloor && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="workAreaId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Area"
|
||||
options={selectedFloor?.workAreas ?? []}
|
||||
placeholder="Select Work Area"
|
||||
required
|
||||
labelKey="areaName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedService("");
|
||||
setSelectedGroup("");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.workAreaId && (
|
||||
<small className="danger-text">{errors.workAreaId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Service */}
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Service"
|
||||
options={assignedServices ?? []}
|
||||
placeholder="Select Service"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedService(value);
|
||||
setSelectedGroup("");
|
||||
setValue("activityGroupId", "");
|
||||
setValue("activityID", "");
|
||||
}}
|
||||
isLoading={servicesLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.serviceId && (
|
||||
<small className="danger-text">{errors.serviceId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Activity Group */}
|
||||
{selectedService && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="activityGroupId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Activity Group"
|
||||
options={groups ?? []}
|
||||
placeholder="Select Activity Group"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedGroup(value);
|
||||
setValue("activityID", "");
|
||||
}}
|
||||
isLoading={groupsLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.activityGroupId && (
|
||||
<small className="danger-text">{errors.activityGroupId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Select Activity */}
|
||||
{selectedGroup && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="activityID"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Activity"
|
||||
options={activities ?? []}
|
||||
placeholder="Select Activity"
|
||||
required
|
||||
labelKey="activityName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={activitiesLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.activityID && (
|
||||
<small className="danger-text">{errors.activityID.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchActivityId && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="workCategoryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Category"
|
||||
options={categoryData ?? []}
|
||||
placeholder="Select Work Category"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.workCategoryId && (
|
||||
<small className="danger-text">{errors.workCategoryId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedActivity && selectedCategory && (
|
||||
<>
|
||||
<div className="col-5 text-start">
|
||||
<Label className="form-label" required>Planned Work</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control "
|
||||
{...register("plannedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.plannedWork && (
|
||||
<p className="danger-text">{errors.plannedWork.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Completed Work</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control "
|
||||
{...register("completedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.completedWork && (
|
||||
<p className="danger-text">{errors.completedWork.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-2 text-start">
|
||||
<label className="form-label">Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
disabled
|
||||
value={selectedActivity?.unitOfMeasurement || ""}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedActivity && selectedCategory && (
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Comment</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows="2"
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<p className="danger-text">{errors.comment.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
// disabled={isSubmitting}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Add Task"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import { useSelector } from "react-redux";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const workAreaSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
@ -26,19 +28,14 @@ const defaultModel = {
|
||||
const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
const [selectedFloor, setSelectedFloor] = useState(null);
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId)
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm({
|
||||
resolver: zodResolver(workAreaSchema),
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const methods = useForm({
|
||||
defaultValues: defaultModel,
|
||||
resolver: zodResolver(workAreaSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
|
||||
const watchBuildingId = watch("buildingId");
|
||||
const watchFloorId = watch("floorId");
|
||||
const watchWorkAreaId = watch("id");
|
||||
@ -104,99 +101,122 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Work Area</h5>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 text-start">
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
{...register("buildingId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
<option value="0">Select Building</option>
|
||||
{project?.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingId && (
|
||||
<p className="danger-text">{errors.buildingId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{watchBuildingId !== "0" && (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Work Area</h5>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 text-start">
|
||||
<Label className="form-label" required>Select Floor</Label>
|
||||
<select
|
||||
{...register("floorId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
<option value="0">
|
||||
{selectedBuilding?.floor?.length > 0
|
||||
? "NO Floor Found"
|
||||
: "Select Floor"}
|
||||
</option>
|
||||
<AppFormController
|
||||
name="buildingId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Building"
|
||||
options={project ?? []}
|
||||
placeholder="Select Building"
|
||||
required
|
||||
labelKey="buildingName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{selectedBuilding?.floors?.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.floorId && (
|
||||
<p className="danger-text">{errors.floorId.message}</p>
|
||||
{errors.buildingId && (
|
||||
<small className="danger-text">{errors.buildingId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{watchFloorId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Work Area</label>
|
||||
<select
|
||||
{...register("id")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleWrokAreaChange}
|
||||
>
|
||||
<option value="0">Create New Work Area</option>
|
||||
{selectedFloor?.workAreas?.length > 0 &&
|
||||
selectedFloor?.workAreas?.map((w) => (
|
||||
<option key={w.id} value={w.id}>
|
||||
{w.areaName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchWorkAreaId === "0"
|
||||
? "Enter Work Area Name"
|
||||
: "Edit Work Area Name"}
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Work Area"
|
||||
{...register("areaName")}
|
||||
|
||||
{watchBuildingId !== "0" && (
|
||||
<div className="col-12 col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="floorId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Floor"
|
||||
options={selectedBuilding?.floors ?? []}
|
||||
placeholder={
|
||||
selectedBuilding?.floors?.length > 0
|
||||
? "Select Floor"
|
||||
: "No Floor Found"
|
||||
}
|
||||
required
|
||||
labelKey="floorName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("areaName", ""); // reset Work Area name when floor changes
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.areaName && (
|
||||
<p className="danger-text">{errors.areaName.message}</p>
|
||||
{errors.floorId && (
|
||||
<small className="danger-text">{errors.floorId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{watchFloorId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Area"
|
||||
options={selectedFloor?.workAreas ?? []}
|
||||
placeholder="Create New Work Area"
|
||||
required={false}
|
||||
labelKey="areaName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
handleWrokAreaChange({ target: { value } }); // preserve your existing handler
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchWorkAreaId === "0"
|
||||
? "Enter Work Area Name"
|
||||
: "Edit Work Area Name"}
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Work Area"
|
||||
{...register("areaName")}
|
||||
/>
|
||||
{errors.areaName && (
|
||||
<p className="danger-text">{errors.areaName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -30,6 +30,9 @@ import { useParams } from "react-router-dom";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { setService } from "../../slices/globalVariablesSlice";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const projectId = useSelectedProject();
|
||||
@ -52,6 +55,12 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(projectId);
|
||||
|
||||
const { control } = useForm({
|
||||
defaultValues: {
|
||||
serviceId: selectedService || "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setProject(projectInfra);
|
||||
}, [data, projects_Details]);
|
||||
@ -60,6 +69,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
setProject(response);
|
||||
};
|
||||
|
||||
const handleServiceChange = (serviceId) => {
|
||||
dispatch(setService(serviceId));
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModalBuilding && (
|
||||
@ -115,37 +129,39 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
<div className="align-items-center">
|
||||
<div className="row ">
|
||||
<div
|
||||
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{!servicesLoading &&
|
||||
assignedServices?.length > 0 &&
|
||||
(assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={(e) => dispatch(setService(e.target.value))}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
))}
|
||||
<div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
|
||||
<div className="ms-4 mt-n1">
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Service"
|
||||
options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]}
|
||||
placeholder="Choose a Service"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(val) => {
|
||||
field.onChange(val);
|
||||
handleServiceChange(val);
|
||||
}}
|
||||
isLoading={servicesLoading}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons Section (aligned to right) */}
|
||||
<div className="col-md-8 col-12 text-end mb-1">
|
||||
<div className="col-md-8 col-12 text-end mt-4">
|
||||
{ManageInfra && (
|
||||
<>
|
||||
<button
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user