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

Enhance EditActivity Component to Select Service and Activity Group

Browse Source
This commit is contained in:
ashutosh.nehete 2025-06-27 17:07:02 +05:30
parent 2177684b53
commit b46d0776d6
1 changed files with 295 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

404
src/components/master/EditActivity.jsx
View File

@ -2,28 +2,38 @@ import React, { useEffect, useState } from "react";
import { useForm, useFieldArray } from "react-hook-form"; import { useForm, useFieldArray } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import {MasterRespository} from "../../repositories/MastersRepository"; import { MasterRespository } from "../../repositories/MastersRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import {getCachedData,cacheData} from "../../slices/apiDataManager"; import { getCachedData, cacheData } from "../../slices/apiDataManager";
const schema = z.object({ const schema = z.object({
activityName: z.string().min(1, { message: "Activity name is required" }), activityName: z.string().min(1, { message: "Activity name is required" }),
unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }), unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
serviceId: z.string().min(1, { message: "A service selection is required." }),
actitvityGroupId: z
.string()
.min(1, { message: "A activity group selection is required." }),
checkList: z checkList: z
.array( .array(
z.object({ z.object({
id: z.any().default(null), id: z.any().default(null),
description: z.string().min(1, { message: "Checklist item cannot be empty" }), description: z
.string()
.min(1, { message: "Checklist item cannot be empty" }),
isMandatory: z.boolean().default(false), isMandatory: z.boolean().default(false),
}) })
) )
.optional(), .optional(),
}); });
const UpdateActivity = ({ activityData, onClose }) => { const UpdateActivity = ({ activityData, onClose }) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [services, setServices] = useState(getCachedData("Services"));
const [selectedService, setSelectedService] = useState(null);
const [activityGroups, setActivityGroups] = useState(
getCachedData("Activity Group")
);
const [activityGroupList, setActivityGroupList] = useState(null);
const { const {
register, register,
@ -35,26 +45,80 @@ const UpdateActivity = ({ activityData, onClose }) => {
clearErrors, clearErrors,
getValues, getValues,
formState: { errors }, formState: { errors },
watch,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
id:activityData.id, id: activityData.id,
activityName: activityData.activityName, serviceId: activityData.serviceId || "",
unitOfMeasurement: activityData.unitOfMeasurement, actitvityGroupId: activityData.actitvityGroupId || "",
checkLists: activityData.checkLists || [], activityName: activityData.activityName,
unitOfMeasurement: activityData.unitOfMeasurement,
checkLists: activityData.checkLists || [],
}, },
}); });
const { fields: checkListItems, append, remove } = useFieldArray({ const selectedServiceId = watch("serviceId");
const [selectedActitvityGroupId, setSelectedActitvityGroupId] = useState(
watch("actitvityGroupId")
);
const {
fields: checkListItems,
append,
remove,
} = useFieldArray({
control, control,
name: "checkList", name: "checkList",
}); });
// Load initial data // Load initial data
useEffect(() => { useEffect(() => {
if (!services) {
MasterRespository.getServices().then((res) => {
setServices(res?.data);
cacheData("Services", res?.data);
});
}
if (!activityGroups) {
MasterRespository.getActivityGroups().then((res) => {
setActivityGroups(res?.data);
const selectedActivityGroups = res?.data.filter(
(item) => item.serviceId == selectedServiceId
);
setActivityGroupList(selectedActivityGroups);
cacheData("Activity Group", res?.data);
const isExist = selectedActivityGroups.some(
(item) => item.id === String(watch("actitvityGroupId"))
);
if (!isExist) {
reset((prev) => ({
...prev,
actitvityGroupId: "",
}));
}
});
} else {
const selectedActivityGroups = activityGroups.filter(
(item) => item.serviceId == selectedServiceId
);
setActivityGroupList(selectedActivityGroups);
const isExist = selectedActivityGroups.some(
(item) => item.id === String(watch("actitvityGroupId"))
);
if (!isExist) {
reset((prev) => ({
...prev,
actitvityGroupId: "",
}));
}
}
if (activityData) { if (activityData) {
reset( { reset({
id:activityData.id, id: activityData.id,
serviceId: activityData.serviceId || "",
actitvityGroupId: activityData.actitvityGroupId || "",
activityName: activityData.activityName, activityName: activityData.activityName,
unitOfMeasurement: activityData.unitOfMeasurement, unitOfMeasurement: activityData.unitOfMeasurement,
checkList: activityData.checkLists || [], checkList: activityData.checkLists || [],
@ -62,42 +126,66 @@ const UpdateActivity = ({ activityData, onClose }) => {
} }
}, [activityData]); }, [activityData]);
const handleServicesChange = (e) => {
const { value } = e.target;
const service = services.find((b) => b.id === String(value));
const selectedActivityGroups = activityGroups.filter(
(ag) => ag.serviceId == service.id
);
setSelectedService(service.id);
setActivityGroupList(selectedActivityGroups);
reset((prev) => ({
...prev,
serviceId: String(value),
}));
};
const handleActivityGroupsChange = (e) => {
const { value } = e.target;
setValue("actitvityGroupId", String(value));
// reset((prev) => ({
// ...prev,
// actitvityGroupId: String(value),
// }));
setSelectedActitvityGroupId(String(value));
};
const handleChecklistChange = (index, value) => { const handleChecklistChange = (index, value) => {
setValue(`checkList.${index}`, value); setValue(`checkList.${index}`, value);
}; };
// Submit handler // Submit handler
const onSubmit = async(data) => { const onSubmit = async (data) => {
setIsLoading(true); setIsLoading(true);
const Activity = {...data, id:activityData.id} const Activity = { ...data, id: activityData.id };
try try {
{ const response = await MasterRespository.updateActivity(
const response = await MasterRespository.updateActivity( activityData?.id, Activity ); activityData?.id,
Activity
);
const updatedActivity = response.data; const updatedActivity = response.data;
const cachedData = getCachedData("Activity") const cachedData = getCachedData("Activity");
if (cachedData) { if (cachedData) {
const updatedActivities = cachedData.map((activity) => const updatedActivities = cachedData.map((activity) =>
activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity activity.id === updatedActivity.id
? { ...activity, ...updatedActivity }
: activity
); );
cacheData( "Activity", updatedActivities ); cacheData("Activity", updatedActivities);
onClose() onClose();
} }
setIsLoading( false ) setIsLoading(false);
showToast("Activity Successfully Updated", "success"); showToast("Activity Successfully Updated", "success");
} catch ( err ) } catch (err) {
{ setIsLoading(false);
setIsLoading( false )
showToast("error.message", "error"); showToast("error.message", "error");
} }
}; };
// Add new checklist item // Add new checklist item
const addChecklistItem = () => { const addChecklistItem = () => {
const values = getValues("checkList"); const values = getValues("checkList");
@ -122,12 +210,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
remove(index); remove(index);
}; };
// for tooltip
// for tooltip useEffect(() => {
useEffect(() => { const tooltipTriggerList = Array.from(
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')); document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el)); );
}, []); tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
@ -135,11 +224,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
<div className="row"> <div className="row">
{/* Activity Name */} {/* Activity Name */}
<div className="col-md-6"> <div className="col-md-6">
<label className="form-label">Activity Name</label> <label className="form-label">Activity Name</label>
<input <input
type="text" type="text"
{...register("activityName")} {...register("activityName")}
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`} className={`form-control form-control-sm ${
errors.activityName ? "is-invalid" : ""
}`}
/> />
{errors.activityName && ( {errors.activityName && (
<div className="text-danger">{errors.activityName.message}</div> <div className="text-danger">{errors.activityName.message}</div>
@ -148,93 +239,188 @@ const UpdateActivity = ({ activityData, onClose }) => {
{/* Unit of Measurement */} {/* Unit of Measurement */}
<div className="col-md-6"> <div className="col-md-6">
<label className="form-label">Measurement</label> <label className="form-label">Measurement</label>
<input <input
type="text" type="text"
{...register("unitOfMeasurement")} {...register("unitOfMeasurement")}
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`} className={`form-control form-control-sm ${
errors.unitOfMeasurement ? "is-invalid" : ""
}`}
/> />
{errors.unitOfMeasurement && ( {errors.unitOfMeasurement && (
<div className="text-danger">{errors.unitOfMeasurement.message}</div> <div className="text-danger">
{errors.unitOfMeasurement.message}
</div>
)}
</div>
{/* Services */}
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="serviceId">
Select Service
</label>
{activityData.serviceId != null ? (
<select
id="serviceId"
className="form-select form-select-sm"
{...register("serviceId")}
onChange={handleServicesChange}
disabled
>
<option value="">Select Service</option>
<option value={selectedServiceId}>
{activityData.servicesName}
</option>
{services?.filter((service) => service?.name).length === 0 && (
<option disabled>No service found</option>
)}
</select>
) : (
<select
id="serviceId"
className="form-select form-select-sm"
{...register("serviceId")}
onChange={handleServicesChange}
>
<option value="">Select Service</option>
{services
?.filter((service) => service?.name)
?.sort((a, b) => a.name?.localeCompare(b.name))
?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
{services?.filter((service) => service?.name).length === 0 && (
<option disabled>No service found</option>
)}
</select>
)}
{errors.serviceId && (
<p className="danger-text">{errors.serviceId.message}</p>
)}
</div>
{/* Actitvity Group */}
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="actitvityGroupId">
Select Activity Group
</label>
<select
id="actitvityGroupId"
className="form-select form-select-sm"
{...register("actitvityGroupId")}
onChange={handleActivityGroupsChange}
value={selectedActitvityGroupId}
>
<option value="">
Select Activty Group
</option>
{activityGroupList
?.filter((activityGroup) => activityGroup?.name)
?.sort((a, b) => a.name?.localeCompare(b.name))
?.map((activityGroup) => (
<option key={activityGroup.id} value={activityGroup.id}>
{activityGroup.name}
</option>
))}
{activityGroupList?.filter((activityGroup) => activityGroup?.name)
.length === 0 && (
<option disabled>No activity group found</option>
)}
</select>
{errors.actitvityGroupId && (
<p className="danger-text">{errors.actitvityGroupId.message}</p>
)} )}
</div> </div>
{/* Checklist */} {/* Checklist */}
<div className="col-md-12 text-start mt-1"> <div className="col-md-12 text-start mt-1">
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p> <p className="py-1 my-0">
{checkListItems.length > 0 ? "Check List" : "Add Check List"}
</p>
{checkListItems.length > 0 && ( {checkListItems.length > 0 && (
<table className="table mt-1 border-0"> <table className="table mt-1 border-0">
<thead className="py-0 my-0 table-border-top-0"> <thead className="py-0 my-0 table-border-top-0">
<tr className="py-1"> <tr className="py-1">
<th colSpan={2} className="py-1"> <th colSpan={2} className="py-1">
<small>Name</small> <small>Name</small>
</th> </th>
<th colSpan={2} className="py-1 text-center"> <th colSpan={2} className="py-1 text-center">
<small>Is Mandatory</small> <small>Is Mandatory</small>
</th> </th>
<th className="text-center py-1">Action</th> <th className="text-center py-1">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{checkListItems.map((item, index) => ( {checkListItems.map((item, index) => (
<tr key={item.id} className="border-top-0"> <tr key={item.id} className="border-top-0">
<td colSpan={2} className=" border-0"> <td colSpan={2} className=" border-0">
<input <input
className="d-none" className="d-none"
{...register(`checkList.${index}.id`)} {...register(`checkList.${index}.id`)}
></input> ></input>
<input <input
{...register(`checkList.${index}.description`)} {...register(`checkList.${index}.description`)}
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder={`Checklist item ${index + 1}`} placeholder={`Checklist item ${index + 1}`}
onChange={(e) => onChange={(e) =>
handleChecklistChange(index, e.target.value) handleChecklistChange(index, e.target.value)
} }
/> />
{errors.checkList?.[index]?.description && ( {errors.checkList?.[index]?.description && (
<small <small
style={{ fontSize: "10px" }} style={{ fontSize: "10px" }}
className="danger-text" className="danger-text"
> >
{errors.checkList[index]?.description?.message} {errors.checkList[index]?.description?.message}
</small> </small>
)} )}
</td> </td>
<td colSpan={2} className="text-center border-0"> <td colSpan={2} className="text-center border-0">
<input <input
className="form-check-input" className="form-check-input"
type="checkbox" type="checkbox"
{...register(`checkList.${index}.isMandatory`)} {...register(`checkList.${index}.isMandatory`)}
defaultChecked={item.isMandatory} defaultChecked={item.isMandatory}
/> />
</td> </td>
<td className="text-center border-0"> <td className="text-center border-0">
<button <button
type="button" type="button"
onClick={() => removeChecklistItem(index)} onClick={() => removeChecklistItem(index)}
className="btn btn-xs btn-icon btn-text-secondary" className="btn btn-xs btn-icon btn-text-secondary"
>
> <i
<i className="bx bxs-minus-circle text-danger"data-bs-toggle="tooltip" className="bx bxs-minus-circle text-danger"
title="Add Check" data-bs-toggle="tooltip"
data-bs-original-title="Add check" ></i> title="Add Check"
</button> data-bs-original-title="Add check"
</td> ></i>
</tr> </button>
))} </td>
</tbody> </tr>
</table> ))}
</tbody>
</table>
)} )}
<button <button
type="button" type="button"
className="btn btn-xs btn-primary mt-2" className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem} onClick={addChecklistItem}
> >
<i class="bx bx-plus-circle" data-bs-toggle="tooltip" <i
title="Add Check" className="bx bx-plus-circle"
data-bs-original-title="Add check" ></i> data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check"
></i>
</button> </button>
</div> </div>