Merge pull request 'Adding Activity-Group in Create Task popup.' (#431) from Kartik_Task_InfraMask#1266 into Organization_Management

Reviewed-on: #431
merged
This commit is contained in:
pramod.mahajan 2025-09-25 09:00:46 +00:00
commit 58837cef0c
3 changed files with 115 additions and 58 deletions

View File

@ -32,9 +32,8 @@ const EditActivityModal = ({
building, building,
floor, floor,
onClose, onClose,
} ) => }) => {
{
const { activities, loading: loadingActivities } = useActivitiesMaster(); const { activities, loading: loadingActivities } = useActivitiesMaster();
const { categories, loading: loadingCategories } = useWorkCategoriesMaster(); const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
const [selectedActivity, setSelectedActivity] = useState(null); const [selectedActivity, setSelectedActivity] = useState(null);
@ -57,13 +56,12 @@ const EditActivityModal = ({
comment: "", comment: "",
}, },
}); });
const { mutate: UpdateTask, isPending } = useManageTask({ const { mutate: UpdateTask, isPending } = useManageTask({
onSuccessCallback: (response) => onSuccessCallback: (response) => {
{ showToast(response?.message, "success")
showToast( response?.message, "success" ) onClose()
onClose() }
} });
} );
@ -82,34 +80,33 @@ const { mutate: UpdateTask, isPending } = useManageTask({
[categories] [categories]
); );
useEffect(() => { useEffect(() => {
if (!workItem) return; if (!workItem) return;
console.log(workItem) console.log(workItem)
reset({ reset({
activityID: String( activityID: String(
workItem?.workItem?.activityId || workItem?.activityMaster?.id workItem?.workItem?.activityId || workItem?.activityMaster?.id
), ),
workCategoryId: String( workCategoryId: String(
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
), ),
plannedWork: plannedWork:
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0, workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
completedWork: completedWork:
workItem?.workItem?.completedWork || workItem?.completedWork || 0, workItem?.workItem?.completedWork || workItem?.completedWork || 0,
comment: workItem?.workItem?.description || workItem?.description || "", comment: workItem?.workItem?.description || workItem?.description || "",
}); });
}, [workItem?.id,selectedActivity]); }, [workItem?.id, selectedActivity]);
useEffect(() => { useEffect(() => {
const selected = activities?.find((a) => a.id === activityID); const selected = activities?.find((a) => a.id === activityID);
setSelectedActivity( selected || null ); setSelectedActivity(selected || null);
}, [activityID, activities]); }, [activityID, activities]);
const onSubmitForm = (data) => const onSubmitForm = (data) => {
{ const payload = {
const payload = {
...data, ...data,
id: workItem?.workItem?.id ?? workItem?.id, id: workItem?.workItem?.id ?? workItem?.id,
buildingID: building?.id, buildingID: building?.id,
@ -125,9 +122,9 @@ useEffect(() => {
buildingId: building?.id, buildingId: building?.id,
floorId: floor?.id, floorId: floor?.id,
workAreaId: workArea?.id, workAreaId: workArea?.id,
previousCompletedWork:completedTask previousCompletedWork: completedTask
}); });
} }
return ( return (
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}> <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
<div className="text-center mb-1"> <div className="text-center mb-1">
@ -162,14 +159,26 @@ useEffect(() => {
disabled disabled
/> />
</div> </div>
<div className="col-12 text-start">
<label className="form-label">Select Service</label>
<input
className="form-control form-control-sm"
value={
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
}
disabled
/>
</div>
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className="form-label">Select Activity</label> <label className="form-label">Select Activity</label>
<select <select
{...register("activityID")} {...register("activityID")}
className="form-select form-select-sm" className="form-select form-select-sm"
disabled
> >
<option disabled>Select Activity</option> <option >Select Activity</option>
{loadingActivities ? ( {loadingActivities ? (
<option>Loading...</option> <option>Loading...</option>
) : ( ) : (
@ -264,7 +273,7 @@ useEffect(() => {
disabled={isPending} disabled={isPending}
> >
{isPending ? "Please Wait..." : "Edit Task"} {isPending ? "Please Wait..." : "Edit Task"}
</button> </button>
</div> </div>
</form> </form>
); );

View File

@ -3,10 +3,12 @@ import { useForm } 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 { import {
useActivitiesByGroups,
useActivitiesMaster, useActivitiesMaster,
useGroups,
useWorkCategoriesMaster, useWorkCategoriesMaster,
} from "../../../hooks/masterHook/useMaster"; } from "../../../hooks/masterHook/useMaster";
import { useManageTask, useProjectAssignedServices } from "../../../hooks/useProjects"; import { useManageTask, useProjectAssignedOrganizations, useProjectAssignedServices } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
import Label from "../../common/Label"; import Label from "../../common/Label";
import { useSelectedProject } from "../../../slices/apiDataManager"; import { useSelectedProject } from "../../../slices/apiDataManager";
@ -15,6 +17,8 @@ const taskSchema = z.object({
buildingID: z.string().min(1, "Building is required"), buildingID: z.string().min(1, "Building is required"),
floorId: z.string().min(1, "Floor is required"), floorId: z.string().min(1, "Floor is required"),
workAreaId: z.string().min(1, "Work Area is required"), workAreaId: z.string().min(1, "Work Area is required"),
serviceId: z.string().min(1, "Service is required"),
activityGroupId: z.string().min(1, "Activity Group is required"),
activityID: z.string().min(1, "Activity is required"), activityID: z.string().min(1, "Activity is required"),
workCategoryId: z.string().min(1, "Work Category is required"), workCategoryId: z.string().min(1, "Work Category is required"),
plannedWork: z.number().min(1, "Planned Work must be greater than 0"), plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
@ -27,6 +31,8 @@ const defaultModel = {
buildingID: "", buildingID: "",
floorId: "", floorId: "",
workAreaId: "", workAreaId: "",
serviceId: "",
activityGroupId: "",
activityID: "", activityID: "",
workCategoryId: "", workCategoryId: "",
plannedWork: 0, plannedWork: 0,
@ -35,18 +41,42 @@ const defaultModel = {
}; };
const TaskModel = ({ project, onSubmit, onClose }) => { const TaskModel = ({ project, onSubmit, onClose }) => {
const { activities, loading: activityLoading } = useActivitiesMaster(); // const { activities, loading: activityLoading } = useActivitiesMaster();
const { categories, categoryLoading } = useWorkCategoriesMaster(); const { categories, categoryLoading } = useWorkCategoriesMaster();
const projectId = useSelectedProject(); const projectId = useSelectedProject();
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId); const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizations(projectId);
const [selectedService, setSelectedService] = useState(""); const [selectedService, setSelectedService] = useState("");
const [selectedGroup, setSelectedGroup] = useState("");
const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
const groups = groupsResponse?.data ?? [];
const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
const activities = activitiesResponse?.data ?? [];
// Fetch Assigned Organizations (Activity Groups)
const [selectedOrg, setSelectedOrg] = useState("");
const handleServiceChange = (e) => { const handleServiceChange = (e) => {
setSelectedService(e.target.value); const value = e.target.value;
setSelectedService(value);
setSelectedGroup("");
setValue("activityGroupId", "");
setValue("activityID", "");
}; };
const handleGroupChange = (e) => {
const value = e.target.value;
setSelectedGroup(value);
setValue("activityGroupId", value);
setValue("activityID", "");
};
const { const {
register, register,
handleSubmit, handleSubmit,
@ -188,15 +218,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
{/* Services Selection */} {/* Services Selection */}
{selectedWorkArea && ( {selectedWorkArea && (
<div className="col-12 text-start"> <div className="col-12 text-start">
<Label className="form-label">Select Services</Label> <Label className="form-label" required>Select Service</Label>
<select <select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm" className="form-select form-select-sm"
aria-label="Select Service" {...register("serviceId")}
value={selectedService} value={selectedService}
onChange={handleServiceChange} // onChange={handleServiceChange}
onChange={(e) => {
handleServiceChange(e);
setValue("serviceId", e.target.value);
}}
> >
<option value="">Select Service</option>
{servicesLoading && <option>Loading...</option>} {servicesLoading && <option>Loading...</option>}
{assignedServices?.map((service) => ( {assignedServices?.map((service) => (
<option key={service.id} value={service.id}> <option key={service.id} value={service.id}>
@ -204,34 +237,45 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
</option> </option>
))} ))}
</select> </select>
{errors.buildingID && (
<p className="danger-text">{errors.buildingID.message}</p>
)}
</div> </div>
)} )}
{/* Activity Selection */} {/* Activity Group (Organization) Selection */}
{selectedWorkArea && ( {selectedService && (
<div className="col-12 text-start"> <div className="col-12 text-start">
<Label className="form-label" required>Select Activity</Label> <Label className="form-label" required>Select Activity Group</Label>
<select <select
className="form-select form-select-sm" className="form-select form-select-sm"
{...register("activityID")} {...register("activityGroupId")}
value={selectedGroup}
onChange={handleGroupChange}
> >
<option value="">Select Activity</option> <option value="">Select Group</option>
{activityData.map((a) => ( {groupsLoading && <option>Loading...</option>}
<option key={a.id} value={a.id}> {groups?.map((g) => (
{a.activityName} <option key={g.id} value={g.id}>{g.name}</option>
</option>
))} ))}
</select> </select>
{errors.activityID && ( {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
<p className="danger-text">{errors.activityID.message}</p>
)}
</div> </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>
)}
{selectedWorkArea && ( {selectedWorkArea && (
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className="form-label">Select Work Category</label> <label className="form-label">Select Work Category</label>

View File

@ -103,8 +103,12 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
mutationFn: async (payload) => mutationFn: async (payload) =>
await OrganizationRepository.assignOrganizationToProject(payload), await OrganizationRepository.assignOrganizationToProject(payload),
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
const {projectId} = variables
useClient.invalidateQueries({ useClient.invalidateQueries({
queryKey: ["projectAssignedOrganiztions"], queryKey: ["projectAssignedOrganiztions"],
});
useClient.invalidateQueries({
queryKey: ["projectAssignedOrganization", projectId],
}); });
showToast("Organization successfully", "success"); showToast("Organization successfully", "success");
if (onSuccessCallback) onSuccessCallback(); if (onSuccessCallback) onSuccessCallback();