integrated service group wise activity operation delete,edit and create
This commit is contained in:
parent
772a3e2829
commit
d975664023
@ -1,194 +1,194 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import LineChart from "../Charts/LineChart";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
||||
import ApexChart from "../Charts/Circlechart";
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import LineChart from "../Charts/LineChart";
|
||||
// import { useProjects } from "../../hooks/useProjects";
|
||||
// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
||||
// import ApexChart from "../Charts/Circlechart";
|
||||
|
||||
const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
||||
// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
||||
|
||||
const Activity = () => {
|
||||
const { projects } = useProjects();
|
||||
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||
const [selectedDate, setSelectedDate] = useState(today);
|
||||
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||
const initialProjectId = storedProjectId || "all";
|
||||
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||
const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
// const Activity = () => {
|
||||
// const { projects } = useProjects();
|
||||
// const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||
// const [selectedDate, setSelectedDate] = useState(today);
|
||||
// const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||
// const initialProjectId = storedProjectId || "all";
|
||||
// const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||
// const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
||||
// const [activeTab, setActiveTab] = useState("all");
|
||||
|
||||
const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
||||
useDashboard_ActivityData(selectedDate, selectedProjectId);
|
||||
// const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
||||
// useDashboard_ActivityData(selectedDate, selectedProjectId);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedProjectId === "all") {
|
||||
setDisplayedProjectName("All Projects");
|
||||
} else if (projects) {
|
||||
const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||
setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
||||
} else {
|
||||
setDisplayedProjectName("Select Project");
|
||||
}
|
||||
// useEffect(() => {
|
||||
// if (selectedProjectId === "all") {
|
||||
// setDisplayedProjectName("All Projects");
|
||||
// } else if (projects) {
|
||||
// const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||
// setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
||||
// } else {
|
||||
// setDisplayedProjectName("Select Project");
|
||||
// }
|
||||
|
||||
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||
}, [selectedProjectId, projects]);
|
||||
// localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||
// }, [selectedProjectId, projects]);
|
||||
|
||||
const handleProjectSelect = (projectId) => {
|
||||
setSelectedProjectId(projectId);
|
||||
};
|
||||
// const handleProjectSelect = (projectId) => {
|
||||
// setSelectedProjectId(projectId);
|
||||
// };
|
||||
|
||||
const handleDateChange = (e) => {
|
||||
setSelectedDate(e.target.value);
|
||||
};
|
||||
// const handleDateChange = (e) => {
|
||||
// setSelectedDate(e.target.value);
|
||||
// };
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Activity</h5>
|
||||
<p className="card-subtitle">Activity Progress Chart</p>
|
||||
</div>
|
||||
// return (
|
||||
// <div className="card h-100">
|
||||
// <div className="card-header">
|
||||
// <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
||||
// <div className="card-title mb-0 text-start">
|
||||
// <h5 className="mb-1">Activity</h5>
|
||||
// <p className="card-subtitle text-primary">Activity Progress Chart</p>
|
||||
// </div>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayedProjectName}
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
{projects?.map((project) => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => handleProjectSelect(project.id)}
|
||||
>
|
||||
{project.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// <div className="btn-group">
|
||||
// <button
|
||||
// className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
// type="button"
|
||||
// data-bs-toggle="dropdown"
|
||||
// aria-expanded="false"
|
||||
// >
|
||||
// {displayedProjectName}
|
||||
// </button>
|
||||
// <ul className="dropdown-menu">
|
||||
// <li>
|
||||
// <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
||||
// All Projects
|
||||
// </button>
|
||||
// </li>
|
||||
// {projects?.map((project) => (
|
||||
// <li key={project.id}>
|
||||
// <button
|
||||
// className="dropdown-item"
|
||||
// onClick={() => handleProjectSelect(project.id)}
|
||||
// >
|
||||
// {project.name}
|
||||
// </button>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
{/* ✅ Date Picker Aligned Left with Padding */}
|
||||
<div className="d-flex justify-content-start ps-3 mb-3">
|
||||
<div style={{ width: "150px" }}>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={selectedDate}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
// {/* ✅ Date Picker Aligned Left with Padding */}
|
||||
// <div className="d-flex justify-content-start ps-3 mb-3">
|
||||
// <div style={{ width: "150px" }}>
|
||||
// <input
|
||||
// type="date"
|
||||
// className="form-control"
|
||||
// value={selectedDate}
|
||||
// onChange={handleDateChange}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs " role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("all")}
|
||||
data-bs-toggle="tab"
|
||||
>
|
||||
Summary
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("logs")}
|
||||
data-bs-toggle="tab"
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
// {/* Tabs */}
|
||||
// <ul className="nav nav-tabs " role="tablist">
|
||||
// <li className="nav-item">
|
||||
// <button
|
||||
// type="button"
|
||||
// className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
||||
// onClick={() => setActiveTab("all")}
|
||||
// data-bs-toggle="tab"
|
||||
// >
|
||||
// Summary
|
||||
// </button>
|
||||
// </li>
|
||||
// <li className="nav-item">
|
||||
// <button
|
||||
// type="button"
|
||||
// className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
||||
// onClick={() => setActiveTab("logs")}
|
||||
// data-bs-toggle="tab"
|
||||
// >
|
||||
// Details
|
||||
// </button>
|
||||
// </li>
|
||||
// </ul>
|
||||
|
||||
<div className="card-body">
|
||||
{activeTab === "all" && (
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
{isLoading ? (
|
||||
<p>Loading activity data...</p>
|
||||
) : isError ? (
|
||||
<p>No data available.</p>
|
||||
) : (
|
||||
ActivityData && (
|
||||
<>
|
||||
<h5 className="fw-bold mb-0 text-start w-80">
|
||||
<i className="bx bx-task text-info"></i> Allocated Task
|
||||
</h5>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Completed / Assigned</small>
|
||||
<div style={{ maxWidth: "180px" }}>
|
||||
<ApexChart />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
// <div className="card-body">
|
||||
// {activeTab === "all" && (
|
||||
// <div className="row justify-content-between">
|
||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
// {isLoading ? (
|
||||
// <p>Loading activity data...</p>
|
||||
// ) : isError ? (
|
||||
// <p>No data available.</p>
|
||||
// ) : (
|
||||
// ActivityData && (
|
||||
// <>
|
||||
// <h5 className="fw-bold mb-0 text-start w-80">
|
||||
// <i className="bx bx-task text-info"></i> Allocated Task
|
||||
// </h5>
|
||||
// <h4 className="mb-0 fw-bold">
|
||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
// </h4>
|
||||
// <small className="text-muted">Completed / Assigned</small>
|
||||
// <div style={{ maxWidth: "180px" }}>
|
||||
// <ApexChart />
|
||||
// </div>
|
||||
// </>
|
||||
// )
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
{!isLoading && !isError && ActivityData && (
|
||||
<>
|
||||
<h5 className="fw-bold mb-0 text-start w-110">
|
||||
<i className="bx bx-task text-info"></i> Activities
|
||||
</h5>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted ">Pending / Assigned</small>
|
||||
<div style={{ maxWidth: "180px" }}>
|
||||
<ApexChart />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
// {!isLoading && !isError && ActivityData && (
|
||||
// <>
|
||||
// <h5 className="fw-bold mb-0 text-start w-110">
|
||||
// <i className="bx bx-task text-info"></i> Activities
|
||||
// </h5>
|
||||
// <h4 className="mb-0 fw-bold">
|
||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
// </h4>
|
||||
// <small className="text-muted ">Pending / Assigned</small>
|
||||
// <div style={{ maxWidth: "180px" }}>
|
||||
// <ApexChart />
|
||||
// </div>
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
|
||||
{activeTab === "logs" && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity / Location</th>
|
||||
<th>Assigned / Completed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[{
|
||||
activity: "Code Review / Remote",
|
||||
assignedToday: 3,
|
||||
completed: 2
|
||||
}].map((log, index) => (
|
||||
<tr key={index}>
|
||||
<td>{log.activity}</td>
|
||||
<td>{log.assignedToday} / {log.completed}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// {activeTab === "logs" && (
|
||||
// <div className="table-responsive">
|
||||
// <table className="table table-bordered table-hover">
|
||||
// <thead>
|
||||
// <tr>
|
||||
// <th>Activity / Location</th>
|
||||
// <th>Assigned / Completed</th>
|
||||
// </tr>
|
||||
// </thead>
|
||||
// <tbody>
|
||||
// {[{
|
||||
// activity: "Code Review / Remote",
|
||||
// assignedToday: 3,
|
||||
// completed: 2
|
||||
// }].map((log, index) => (
|
||||
// <tr key={index}>
|
||||
// <td>{log.activity}</td>
|
||||
// <td>{log.assignedToday} / {log.completed}</td>
|
||||
// </tr>
|
||||
// ))}
|
||||
// </tbody>
|
||||
// </table>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default Activity;
|
||||
// export default Activity;
|
||||
|
||||
@ -24,7 +24,7 @@ const schema = z.object({
|
||||
.optional(),
|
||||
});
|
||||
|
||||
const CreateActivity = ({ onClose }) => {
|
||||
const CreateActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
const maxDescriptionLength = 255;
|
||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
||||
|
||||
@ -86,25 +86,19 @@ const CreateActivity = ({ onClose }) => {
|
||||
const onSubmit = (formData) => {
|
||||
createActivity(formData);
|
||||
};
|
||||
// const onSubmit = (data) => {
|
||||
// setIsLoading(true);
|
||||
|
||||
// MasterRespository.createActivity(data)
|
||||
// .then( ( resp ) =>
|
||||
// {
|
||||
|
||||
// const cachedData = getCachedData("Activity");
|
||||
// const updatedData = [ ...cachedData, resp?.data ];
|
||||
// cacheData("Activity", updatedData);
|
||||
// showToast("Activity Successfully Added.", "success");
|
||||
// setIsLoading(false);
|
||||
// handleClose()
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// showToast(error.message, "error");
|
||||
// setIsLoading(false);
|
||||
// });
|
||||
// };
|
||||
|
||||
useEffect(()=>{
|
||||
if (activity) {
|
||||
reset({
|
||||
activityName: activity.activityName || '',
|
||||
unitOfMeasurement: activity.unitOfMeasurement || '',
|
||||
checkList: activity.checkList?.map((check) => ({
|
||||
description: check.description || '',
|
||||
isMandatory: check.isMandatory || false,
|
||||
})) || [{ description: '', isMandatory: false }],
|
||||
});
|
||||
}
|
||||
},[activity,reset])
|
||||
const handleClose = useCallback(() => {
|
||||
reset();
|
||||
onClose();
|
||||
|
||||
@ -24,7 +24,7 @@ const schema = z.object({
|
||||
});
|
||||
|
||||
|
||||
const UpdateActivity = ({ activityData, onClose }) => {
|
||||
const UpdateActivity = ({ activity = null, whichService = null, close }) => {
|
||||
const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
|
||||
|
||||
const {
|
||||
@ -40,10 +40,10 @@ const UpdateActivity = ({ activityData, onClose }) => {
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
id: activityData?.id,
|
||||
activityName: activityData?.activityName,
|
||||
unitOfMeasurement: activityData?.unitOfMeasurement,
|
||||
checkList: activityData?.checkLists || [],
|
||||
id: activity?.id,
|
||||
activityName: activity?.activityName,
|
||||
unitOfMeasurement: activity?.unitOfMeasurement,
|
||||
checkList: activity?.checkLists || [],
|
||||
},
|
||||
});
|
||||
|
||||
@ -53,15 +53,15 @@ const UpdateActivity = ({ activityData, onClose }) => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (activityData) {
|
||||
if (activity) {
|
||||
reset({
|
||||
id: activityData.id,
|
||||
activityName: activityData.activityName,
|
||||
unitOfMeasurement: activityData.unitOfMeasurement,
|
||||
checkList: activityData.checkLists || [],
|
||||
id: activity.id,
|
||||
activityName: activity.activityName,
|
||||
unitOfMeasurement: activity.unitOfMeasurement,
|
||||
checkList: activity.checkLists || [],
|
||||
});
|
||||
}
|
||||
}, [activityData, reset]);
|
||||
}, [activity, reset]);
|
||||
|
||||
const addChecklistItem = () => {
|
||||
const values = getValues("checkList");
|
||||
@ -91,36 +91,10 @@ const UpdateActivity = ({ activityData, onClose }) => {
|
||||
};
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const payload = { ...formData, id: activityData.id };
|
||||
updateActivity({ id: activityData.id, payload });
|
||||
const payload = { ...formData, id: activity.id };
|
||||
updateActivity({ id: activity.id, payload });
|
||||
};
|
||||
// const onSubmit = async(data) => {
|
||||
// setIsLoading(true);
|
||||
|
||||
// const Activity = {...data, id:activityData.id}
|
||||
// try
|
||||
// {
|
||||
// const response = await MasterRespository.updateActivity( activityData?.id, Activity );
|
||||
// const updatedActivity = response.data;
|
||||
// const cachedData = getCachedData("Activity")
|
||||
|
||||
// if (cachedData) {
|
||||
// const updatedActivities = cachedData.map((activity) =>
|
||||
// activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
|
||||
// );
|
||||
|
||||
// cacheData( "Activity", updatedActivities );
|
||||
// onClose()
|
||||
// }
|
||||
// setIsLoading( false )
|
||||
// showToast("Activity Successfully Updated", "success");
|
||||
// } catch ( err )
|
||||
// {
|
||||
// setIsLoading( false )
|
||||
|
||||
// showToast("error.message", "error");
|
||||
// }
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
@ -129,7 +103,6 @@ const UpdateActivity = ({ activityData, onClose }) => {
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* <h6>Update Activity</h6> */}
|
||||
<div className="row">
|
||||
{/* Activity Name */}
|
||||
<div className="col-md-6 text-start">
|
||||
|
||||
274
src/components/master/Services/ManageActivity.jsx
Normal file
274
src/components/master/Services/ManageActivity.jsx
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import {
|
||||
useCreateActivity,
|
||||
useUpdateActivity,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import Label from "../../common/Label";
|
||||
|
||||
const schema = z.object({
|
||||
activityName: z.string().min(1, { message: "Activity Name is required" }),
|
||||
unitOfMeasurement: z
|
||||
.string()
|
||||
.min(1, { message: "Unit of Measurement is required" }),
|
||||
checkList: z
|
||||
.array(
|
||||
z.object({
|
||||
description: z
|
||||
.string()
|
||||
.min(1, { message: "descriptionlist item cannot be empty" }),
|
||||
isMandatory: z.boolean().default(false),
|
||||
id: z.any().default(null),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
|
||||
const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
const maxDescriptionLength = 255;
|
||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(
|
||||
() => close?.()
|
||||
);
|
||||
const { mutate: UpdateActivity, isPending: isUpdating } = useUpdateActivity(
|
||||
() => close?.()
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
clearErrors,
|
||||
setError,
|
||||
getValues,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
activityName: "",
|
||||
unitOfMeasurement: "",
|
||||
checkList: [],
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
fields: checkListItems,
|
||||
append,
|
||||
remove,
|
||||
} = useFieldArray({
|
||||
control,
|
||||
name: "checkList",
|
||||
});
|
||||
|
||||
const addChecklistItem = useCallback(() => {
|
||||
const values = getValues("checkList");
|
||||
const lastIndex = checkListItems.length - 1;
|
||||
|
||||
if (
|
||||
checkListItems.length > 0 &&
|
||||
(!values?.[lastIndex] || values[lastIndex].description.trim() === "")
|
||||
) {
|
||||
setError(`checkList.${lastIndex}.description`, {
|
||||
type: "manual",
|
||||
message: "Please fill this checklist item before adding another.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
clearErrors(`checkList.${lastIndex}.description`);
|
||||
append({ id: null, description: "", isMandatory: false });
|
||||
}, [checkListItems, getValues, append, setError, clearErrors]);
|
||||
|
||||
const removeChecklistItem = useCallback(
|
||||
(index) => {
|
||||
remove(index);
|
||||
},
|
||||
[remove]
|
||||
);
|
||||
|
||||
const handleChecklistChange = useCallback(
|
||||
(index, value) => {
|
||||
setValue(`checkList.${index}`, value);
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
let payload = {
|
||||
...formData,
|
||||
activityGroupId: whichGroup,
|
||||
};
|
||||
if (activity) {
|
||||
UpdateActivity({ id: activity.id, payload: payload });
|
||||
} else {
|
||||
createActivity(payload);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activity) {
|
||||
reset({
|
||||
activityName: activity.activityName || "",
|
||||
unitOfMeasurement: activity.unitOfMeasurement || "",
|
||||
checkList: activity.checkLists?.map((check) => ({
|
||||
id: check.id || null, // Use the ID provided in the checklist
|
||||
description: check.description || "",
|
||||
isMandatory: check.isMandatory || false,
|
||||
})) || [{ description: "", isMandatory: false }], // Default to an empty checklist item
|
||||
});
|
||||
}
|
||||
}, [activity, reset]);
|
||||
const handleClose = useCallback(() => {
|
||||
reset();
|
||||
close();
|
||||
}, [reset, close]);
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
let isPending = isLoading || isUpdating;
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* <h6>Create Activity</h6> */}
|
||||
<div className="row">
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
Activity
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("activityName")}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.activityName ? "is-invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.activityName && (
|
||||
<p className="danger-text">{errors.activityName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
Measurement
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("unitOfMeasurement")}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.unitOfMeasurement ? "is-invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.unitOfMeasurement && (
|
||||
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 text-start mt-1">
|
||||
<p className="py-1 my-0">
|
||||
{checkListItems.length > 0 ? "Check List" : "Add Check List"}
|
||||
</p>
|
||||
{checkListItems.length > 0 && (
|
||||
<table className="table mt-1 border-0">
|
||||
<thead className="py-0 my-0 table-border-top-0">
|
||||
<tr className="py-1">
|
||||
<th colSpan={2} className="py-1">
|
||||
<small>Name</small>
|
||||
</th>
|
||||
<th colSpan={2} className="py-1 text-center">
|
||||
<small>Is Mandatory</small>
|
||||
</th>
|
||||
<th className="text-center py-1">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 ">
|
||||
{checkListItems.map((item, index) => (
|
||||
<tr key={index} className="border-top-0">
|
||||
<td colSpan={2} className="border-top-0 border-0">
|
||||
<input
|
||||
className="d-none"
|
||||
{...register(`checkList.${index}.id`)}
|
||||
></input>
|
||||
<input
|
||||
{...register(`checkList.${index}.description`)}
|
||||
className="form-control form-control-sm"
|
||||
placeholder={`Checklist item ${index + 1}`}
|
||||
onChange={(e) =>
|
||||
handleChecklistChange(index, e.target.value)
|
||||
}
|
||||
/>
|
||||
{errors.checkList?.[index]?.description && (
|
||||
<small
|
||||
style={{ fontSize: "10px" }}
|
||||
className="danger-text"
|
||||
>
|
||||
{errors.checkList[index]?.description?.message}
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td colSpan={2} className="text-center border-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
{...register(`checkList.${index}.isMandatory`)}
|
||||
defaultChecked={item.isMandatory}
|
||||
/>
|
||||
</td>
|
||||
<td className="text-center border-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeChecklistItem(index)}
|
||||
className="btn btn-xs btn-icon btn-text-secondary"
|
||||
>
|
||||
<i
|
||||
className="bx bxs-minus-circle text-danger"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Remove Check"
|
||||
data-bs-original-title="Remove check"
|
||||
></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary mt-2"
|
||||
onClick={addChecklistItem}
|
||||
>
|
||||
<i
|
||||
className="bx bx-plus-circle"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Add Check"
|
||||
data-bs-original-title="Add check"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-3">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-xs btn-label-secondary me-3"
|
||||
onClick={handleClose}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-xs btn-primary">
|
||||
{isPending ? "Please Wait" : activity ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageActivity;
|
||||
@ -1,24 +1,57 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useCreateActivityGroup } from "../../../hooks/masterHook/useMaster";
|
||||
import {
|
||||
useCreateActivityGroup,
|
||||
useUpdateActivityGroup,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ActivityGroupSchema } from "./ServicesSchema";
|
||||
import Label from "../../common/Label";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const ManageGroup = ({ group = null, close }) => {
|
||||
const ManageGroup = ({ group = null, whichService = null, close }) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(ActivityGroupSchema),
|
||||
defaultValues: { name: "", description: "" },
|
||||
});
|
||||
const { mutate: createGroup, isPending } = useCreateActivityGroup();
|
||||
const { mutate: createGroup, isPending: isCreating } = useCreateActivityGroup(
|
||||
() => close()
|
||||
);
|
||||
const { mutate: UpdateGroup, isPending: isUpdating } = useUpdateActivityGroup(
|
||||
() => close()
|
||||
);
|
||||
|
||||
const onSubmit = (payload) => {
|
||||
console.log(payload);
|
||||
// createGroup
|
||||
useEffect(() => {
|
||||
if (group) {
|
||||
reset({
|
||||
name: group.name || " ",
|
||||
description: group.description || "",
|
||||
});
|
||||
}
|
||||
}, [group, reset]);
|
||||
const onSubmit = (formdata) => {
|
||||
if (group) {
|
||||
let payload = {
|
||||
...formdata,
|
||||
serviceId: whichService,
|
||||
id: group.id,
|
||||
};
|
||||
UpdateGroup({ id: group.id, payload: payload });
|
||||
} else {
|
||||
let payload = {
|
||||
...formdata,
|
||||
serviceId: whichService,
|
||||
};
|
||||
|
||||
createGroup(payload);
|
||||
}
|
||||
};
|
||||
|
||||
let isPending = isCreating || isUpdating;
|
||||
return (
|
||||
<form className="row px-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12 text-start">
|
||||
@ -28,9 +61,13 @@ const ManageGroup = ({ group = null, close }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("name")}
|
||||
className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""}`}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.name ? "is-invalids" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.name && <p className="danger-text m-0">{errors.name.message}</p>}
|
||||
{errors.name && (
|
||||
<p className="danger-text m-0">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-12 text-start mb-2">
|
||||
<Label className="form-label" htmlFor="description" required>
|
||||
@ -39,7 +76,9 @@ const ManageGroup = ({ group = null, close }) => {
|
||||
<textarea
|
||||
rows="3"
|
||||
{...register("description")}
|
||||
className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""}`}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.description ? "is-invalids" : ""
|
||||
}`}
|
||||
></textarea>
|
||||
|
||||
{errors.description && (
|
||||
@ -49,7 +88,7 @@ const ManageGroup = ({ group = null, close }) => {
|
||||
|
||||
<div className="col-12 text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
className="btn btn-xs btn-label-secondary me-3"
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
onClick={close}
|
||||
@ -58,7 +97,7 @@ const ManageGroup = ({ group = null, close }) => {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
className="btn btn-xs btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : group ? "Update" : "Submit"}
|
||||
@ -68,4 +107,4 @@ const ManageGroup = ({ group = null, close }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageGroup;
|
||||
export default ManageGroup;
|
||||
|
||||
@ -4,40 +4,57 @@ import {
|
||||
useGroups,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import ManageGroup from "./ManageGroup";
|
||||
|
||||
import ManageActivity from "./ManageActivity";
|
||||
import { useMasterContext } from "../../../pages/master/MasterPage";
|
||||
const ServiceGroups = ({ service }) => {
|
||||
const [openService, setOpenService] = useState(true);
|
||||
const [activeGroupId, setActiveGroupId] = useState(null); // track selected group
|
||||
const [isManageGroup,setManageGroup] = useState({isOpen:false,group:true})
|
||||
const {setDeleletingServiceItem} =useMasterContext()
|
||||
const [isManageGroup, setManageGroup] = useState({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: null,
|
||||
});
|
||||
const [isManageActivity, setManageActivity] = useState({
|
||||
isOpen: false,
|
||||
activity: null, // activity is either a single activity for editing or null for creating new activity
|
||||
groupId: null, // groupId for managing activities in specific groups
|
||||
});
|
||||
|
||||
const { data: groups, isLoading } = useGroups(service?.id);
|
||||
// Fetch groups and activities data
|
||||
const { data: groups, isLoading } = useGroups(service?.id); // Fetch groups for the service
|
||||
const { data: activities, isLoading: actLoading } =
|
||||
useActivitiesByGroups(activeGroupId);
|
||||
useActivitiesByGroups(activeGroupId); // Fetch activities based on activeGroupId
|
||||
|
||||
if (isLoading) return <div>Loading groups...</div>;
|
||||
if (isLoading) return <div>Loading groups...</div>; // Show loading state while groups are being fetched
|
||||
|
||||
// Handle toggling of group to view activities
|
||||
const toggleGroup = (groupId) => {
|
||||
setActiveGroupId((prev) => (prev === groupId ? null : groupId)); // If the same group is clicked again, close it
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<div className="w-100 my-2">
|
||||
|
||||
<p className="fs-5 fw-semibold">Manage Service</p>
|
||||
<div className="accordion" id="accordionExample">
|
||||
<div className="accordion-item active shadow-none">
|
||||
{/* Service Header */}
|
||||
<div className="d-flex justify-content-between text-start accordion-header ga">
|
||||
<p className="m-0 fw-bold fs-6 ">{service.name}</p>
|
||||
<span
|
||||
onClick={() => setOpenService(!openService)}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#accordionOne"
|
||||
aria-expanded={openService}
|
||||
aria-controls="accordionOne"
|
||||
<div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
|
||||
<p className="m-0 fw-bold fs-6">{service.name}</p>
|
||||
<button
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={() =>
|
||||
setManageGroup({
|
||||
isOpen: true,
|
||||
group: null, // No group selected, for creating a new group
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i
|
||||
className={`bx ${
|
||||
openService ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
></i>
|
||||
</span>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add Group
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Groups Section */}
|
||||
@ -49,80 +66,197 @@ const ServiceGroups = ({ service }) => {
|
||||
aria-labelledby="headingOne"
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
<div className="accordion-body text-start m-0 p-0">
|
||||
<div className="dropdown-divider border"></div>
|
||||
{groups?.data?.map((group) => {
|
||||
const isOpen = activeGroupId === group.id;
|
||||
{/* Show ManageGroup for creating a new group */}
|
||||
{isManageGroup.isOpen && isManageGroup.group === null ? (
|
||||
<ManageGroup
|
||||
group={null} // Indicating new group creation
|
||||
whichService={isManageGroup.serviceId}
|
||||
close={() =>
|
||||
setManageGroup({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="accordion-body text-start m-0 p-0">
|
||||
<div className="dropdown-divider border"></div>
|
||||
|
||||
return (
|
||||
<div
|
||||
className="accordion-item shadow-none m-0 py-2 px-2"
|
||||
key={group.id}
|
||||
>
|
||||
<div className="d-flex justify-content-between text-start accordion-header">
|
||||
<p className="m-0 fw-bold ">{group.name}</p>
|
||||
<div className="d-flex flex-row gap-3">
|
||||
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i className="bx bx-plus-circle text-primary cursor-pointer" onClick={()=>setManageGroup({isOpen:true,group:null})}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer"></i>
|
||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
<span
|
||||
onClick={
|
||||
() => setActiveGroupId(isOpen ? null : group.id)
|
||||
}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#accordionGroup${group.id}`}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`accordionGroup${group.id}`}
|
||||
>
|
||||
<i
|
||||
className={`bx bx-lg ${
|
||||
isOpen ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
></i>
|
||||
</span></div>
|
||||
</div>
|
||||
{isManageGroup.isOpen ? <ManageGroup group={ManageGroup.group} close={()=>setManageGroup({isOpen:false,group:null})}/> : (
|
||||
<div
|
||||
id={`accordionGroup${group.id}`}
|
||||
className={`accordion-collapse collapse ${
|
||||
isOpen ? "show" : ""
|
||||
}`}
|
||||
aria-labelledby={group.id}
|
||||
data-bs-parent="#accordionOne"
|
||||
{groups?.data?.map((group) => {
|
||||
const isOpen = activeGroupId === group.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="accordion-item shadow-none m-0 py-2 px-2"
|
||||
key={group.id}
|
||||
>
|
||||
<div className="accordion-body">
|
||||
{isOpen && actLoading && <p>Loading activities...</p>}
|
||||
{isOpen && activities?.data?.length > 0 ? (
|
||||
<ul class="list-group list-group-flush">
|
||||
{activities.data.map((activity) => (
|
||||
<div className="d-flex justify-content-between py-2">
|
||||
<li className="list-group-item border-0">
|
||||
{activity.name}
|
||||
</li>{" "}
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i class="bx bx-sm bx-plus-circle text-primary cursor-pointer"></i>
|
||||
<i class="bx bx-sm bx-edit text-secondary cursor-pointer"></i>
|
||||
<i class="bx bx-sm bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
isOpen && <p>No activities found</p>
|
||||
)}
|
||||
<div className="d-flex justify-content-between text-start accordion-header">
|
||||
{/* Show group toggle button only if ManageGroup is not open */}
|
||||
<div className="d-flex gap-4 align-items-center">
|
||||
{!isManageGroup.isOpen && (
|
||||
<span
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#accordionGroup${group.id}`}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`accordionGroup${group.id}`}
|
||||
>
|
||||
<i
|
||||
className={`bx bx-lg ${
|
||||
isOpen ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<p className="m-0 fw-bold ">{group.name}</p>
|
||||
</div>
|
||||
<div className="d-flex flex-row gap-3">
|
||||
<div className="d-flex flex-row gap-2">
|
||||
{/* Create New Activity */}
|
||||
<i
|
||||
className="bx bx-plus-circle text-primary cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"Opening new activity for group:",
|
||||
group.id
|
||||
);
|
||||
setManageActivity({
|
||||
isOpen: true,
|
||||
activity: null, // Indicating new activity creation
|
||||
groupId: group.id, // Set the groupId for the new activity
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Edit Group */}
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageGroup({
|
||||
isOpen: true,
|
||||
group: group, // Group selected for Editing
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{/* Delete Group */}
|
||||
<i className="bx bx-trash text-danger cursor-pointer" onClick={()=>setDeleletingServiceItem({isOpen:true,ItemId:group.id,whichItem:"group"})} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Only show ManageGroup for the specific group if it's open */}
|
||||
{isManageGroup.isOpen &&
|
||||
isManageGroup.group?.id === group.id ? (
|
||||
<ManageGroup
|
||||
group={group} // For editing
|
||||
whichService={isManageGroup.serviceId}
|
||||
close={() =>
|
||||
setManageGroup({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : isManageActivity.isOpen &&
|
||||
isManageActivity.groupId === group.id ? (
|
||||
<ManageActivity
|
||||
activity={isManageActivity.activity} // Pass the activity object for editing
|
||||
whichGroup={group.id} // Set groupId for creating/editing activity
|
||||
close={() => {
|
||||
setManageActivity({
|
||||
isOpen: false,
|
||||
activity: null,
|
||||
groupId: null,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
id={`accordionGroup${group.id}`}
|
||||
className={`accordion-collapse collapse ${
|
||||
isOpen ? "show" : ""
|
||||
}`}
|
||||
aria-labelledby={group.id}
|
||||
data-bs-parent="#accordionOne"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
{isOpen && actLoading && (
|
||||
<p className="text-center m-0">
|
||||
Loading activities...
|
||||
</p>
|
||||
)}
|
||||
|
||||
{isOpen && activities?.data?.length > 0 ? (
|
||||
<div className="row border-top-2">
|
||||
{/* Header Row */}
|
||||
<div className="col-12 d-flex justify-content-between py-2 border-bottom">
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Activity Name
|
||||
</span>
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Unit of Measurement
|
||||
</span>
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Action
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Map through activities */}
|
||||
{activities.data.map((activity) => (
|
||||
<div
|
||||
className="col-12 d-flex justify-content-between py-2 "
|
||||
key={activity.id}
|
||||
>
|
||||
{/* Activity Name Column */}
|
||||
<div className="col d-flex justify-content-start">
|
||||
<span>{activity.activityName}</span>
|
||||
</div>
|
||||
|
||||
{/* Unit of Measurement Column */}
|
||||
<div className="col d-flex justify-content-start">
|
||||
<span>{activity.unitOfMeasurement}</span>
|
||||
</div>
|
||||
|
||||
{/* Action Column */}
|
||||
<div className="col-auto d-flex gap-3 justify-content-end">
|
||||
{/* Edit Activity */}
|
||||
<i
|
||||
className="bx bx-sm bx-edit text-secondary cursor-pointer"
|
||||
onClick={() => {
|
||||
setManageActivity({
|
||||
isOpen: true,
|
||||
activity: activity, // Pass the specific activity for editing
|
||||
groupId: group.id, // Set groupId for the specific activity
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Delete Activity */}
|
||||
<i
|
||||
className="bx bx-sm bx-trash text-danger cursor-pointer"
|
||||
onClick={() => setDeleletingServiceItem({isOpen:true,ItemId:activity.id,whichItem:"activity"})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
isOpen && (
|
||||
<p className="text-center m-0">
|
||||
No activities found
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) }
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,16 +18,20 @@ export const useServices = () => {
|
||||
};
|
||||
|
||||
export const useGroups = (serviceId) => {
|
||||
return useQuery({
|
||||
queryFn: ["groups", serviceId],
|
||||
return useQuery({
|
||||
queryKey: ["groups", serviceId],
|
||||
queryFn: async () => await MasterRespository.getActivityGrops(serviceId),
|
||||
})
|
||||
enabled: !!serviceId,
|
||||
});
|
||||
};
|
||||
export const useActivitiesByGroups = (groupId) => {
|
||||
return useQuery({
|
||||
queryFn: ["activties", groupId],
|
||||
queryFn: async () => await MasterRespository.getActivityGrops(groupId),
|
||||
})
|
||||
return useQuery({
|
||||
queryKey: ["activties", groupId],
|
||||
queryFn: async () => await MasterRespository.getActivitesByGroup(groupId),
|
||||
|
||||
enabled: !!groupId,
|
||||
|
||||
});
|
||||
};
|
||||
export const useGlobalServices = () => {
|
||||
return useQuery({
|
||||
@ -46,8 +50,6 @@ export const useMasterMenu = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const useActivitiesMaster = () => {
|
||||
const {
|
||||
data: activities = [],
|
||||
@ -446,47 +448,7 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
// Activity------------------------------
|
||||
export const useCreateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const resp = await MasterRespository.createActivity(payload);
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["masterData", "Activity"] });
|
||||
showToast("Activity added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await MasterRespository.updateActivity(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["masterData", "Activity"],
|
||||
});
|
||||
showToast("Activity updated successfully.", "success");
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
//-----Create work Category-------------------------------
|
||||
export const useCreateWorkCategory = (onSuccessCallback) => {
|
||||
@ -785,20 +747,23 @@ export const useUpdateService = (onSuccessCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateActivityGroup =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
export const useCreateActivityGroup = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const response = await MasterRespository.createActivityGroup(payload)
|
||||
const response = await MasterRespository.createActivityGroup(payload);
|
||||
return response;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["masterData", "Services"],
|
||||
queryKey: ["groups"],
|
||||
});
|
||||
|
||||
showToast(data.message || "Activity Group created successfully.", "success");
|
||||
showToast(
|
||||
data.message || "Activity Group created successfully.",
|
||||
"success"
|
||||
);
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
@ -806,7 +771,73 @@ export const useCreateActivityGroup =()=>{
|
||||
showToast(error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
export const useUpdateActivityGroup = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({id,payload}) => {
|
||||
const response = await MasterRespository.updateActivityGrop(id,payload);
|
||||
return response;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["groups"],
|
||||
});
|
||||
|
||||
showToast(
|
||||
data.message || "Activity Group Updated successfully.",
|
||||
"success"
|
||||
);
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
// Activity------------------------------
|
||||
export const useCreateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const resp = await MasterRespository.createActivity(payload);
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["activties"] });
|
||||
showToast("Activity added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await MasterRespository.updateActivity(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["activties"],
|
||||
});
|
||||
showToast("Activity updated successfully.", "success");
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// -------------------Expense Status----------------------------------
|
||||
export const useCreateExpenseStatus = (onSuccessCallback) => {
|
||||
@ -969,3 +1000,48 @@ export const useDeleteMasterItem = () => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const useDeleteServiceGroup =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id)=>await MasterRespository.deleteActivityGroup(id),
|
||||
onSuccess: ({_,variable}) => {
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["groups"] });
|
||||
|
||||
showToast(`Group deleted successfully.`, "success");
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
const message =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
"Error occurred during deletion";
|
||||
showToast(message, "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
export const useDeleteActivity =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id)=>await MasterRespository.deleteActivity(id),
|
||||
onSuccess: ({_,variable}) => {
|
||||
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["activties"] });
|
||||
|
||||
showToast(`Acivity deleted successfully.`, "success");
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
const message =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
"Error occurred during deletion";
|
||||
showToast(message, "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import React, { useState, useMemo, useEffect, createContext, useContext } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
@ -6,7 +6,9 @@ import MasterModal from "../../components/master/MasterModal";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import MasterTable from "./MasterTable";
|
||||
import useMaster, {
|
||||
useDeleteActivity,
|
||||
useDeleteMasterItem,
|
||||
useDeleteServiceGroup,
|
||||
useMasterMenu,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
@ -14,6 +16,16 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_MASTER } from "../../utils/constants";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
|
||||
|
||||
export const MasterContext = createContext();
|
||||
export const useMasterContext = () => {
|
||||
const context = useContext(MasterContext);
|
||||
if (!context) {
|
||||
throw new Error("useMasterContext must be used within an MasterProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
const MasterPage = () => {
|
||||
const dispatch = useDispatch();
|
||||
const queryClient = useQueryClient();
|
||||
@ -34,6 +46,9 @@ const MasterPage = () => {
|
||||
isError: isMasterError,
|
||||
} = useMaster();
|
||||
const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
|
||||
const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
|
||||
const {mutate:DeleteSericeGroup,isPending:deletingGroup} =useDeleteServiceGroup()
|
||||
const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
|
||||
|
||||
const [modalConfig, setModalConfig] = useState(null);
|
||||
const [deleteData, setDeleteData] = useState(null);
|
||||
@ -73,6 +88,18 @@ const MasterPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const handleDeleteServiceItem =()=>{
|
||||
if(!isDeleletingServiceItem.ItemId) return
|
||||
if(isDeleletingServiceItem.whichItem == "activiy"){
|
||||
DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
|
||||
}else{
|
||||
DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (menuErrorFlag || isMasterError)
|
||||
return (
|
||||
<div className="d-flex flex-column align-items-center justify-content-center py-5">
|
||||
@ -87,7 +114,7 @@ const MasterPage = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MasterContext.Provider value={{setDeleletingServiceItem}}>
|
||||
{modalConfig && (
|
||||
<GlobalModel
|
||||
size={
|
||||
@ -106,6 +133,7 @@ const MasterPage = () => {
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
@ -116,6 +144,16 @@ const MasterPage = () => {
|
||||
onSubmit={handleDeleteSubmit}
|
||||
onClose={() => setDeleteData(null)}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header={`Delete ${isDeleletingServiceItem?.whichItem}`}
|
||||
message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
|
||||
isOpen={!!isDeleletingServiceItem?.isOpen}
|
||||
loading={deletingActivity}
|
||||
onSubmit={handleDeleteServiceItem}
|
||||
onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
|
||||
/>
|
||||
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
@ -185,7 +223,7 @@ const MasterPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</MasterContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -32,11 +32,11 @@ export const MasterRespository = {
|
||||
getActivites: () => api.get("api/master/activities"),
|
||||
createActivity: (data) => api.post("api/master/activity", data),
|
||||
|
||||
//Services
|
||||
//Services
|
||||
getService: () => api.get("api/master/service/list"),
|
||||
createService: (data) => api.post("api/master/service/create", data),
|
||||
updateService: (id, data) => api.put(`api/master/service/edit/${id}`, data),
|
||||
"Services": (id) => api.delete(`/api/master/service/delete/${id}`),
|
||||
Services: (id) => api.delete(`/api/master/service/delete/${id}`),
|
||||
|
||||
updateActivity: (id, data) =>
|
||||
api.post(`api/master/activity/edit/${id}`, data),
|
||||
@ -114,15 +114,20 @@ export const MasterRespository = {
|
||||
updateDocumentType: (id, data) =>
|
||||
api.put(`/api/Master/document-type/edit/${id}`, data),
|
||||
|
||||
getGlobalServices: () => api.get("/api/Master/global-service/list"),
|
||||
getMasterServices: () => api.get("/api/Master/service/list"),
|
||||
getActivityGrops: (serviceId) =>
|
||||
api.get(`/api/Master/activity-group/list?serviceId=${serviceId}`),
|
||||
createActivityGroup: (data) =>
|
||||
api.post(`/api/Master/activity-group/create`, data),
|
||||
updateActivityGrop: (serviceId, data) =>
|
||||
api.put(`/api/Master/activity-group/edit/${serviceId}`, data),
|
||||
getActivitesByGroup: (activityGroupId) =>
|
||||
api.get(`api/master/activities?activityGroupId=${activityGroupId}`),
|
||||
deleteActivityGroup:(id)=>api.delete(`/api/Master/activity-group/delete/${id}`),
|
||||
|
||||
|
||||
getGlobalServices:()=>api.get("/api/Master/global-service/list"),
|
||||
getMasterServices:()=>api.get("/api/Master/service/list"),
|
||||
getActivityGrops:(serviceId)=>api.get(`/api/Master/activity-group/list?serviceId=${serviceId}`),
|
||||
createActivityGroup:(data)=>api.post(`/api/Master/activity-group/create`),
|
||||
getActivitesByGroup: (serviceId) => api.get(`api/master/activities/activityGroupId=${activityGroupId}`),
|
||||
deleteActivity:(id)=>api.delete(`/api/Master/activity/delete/${id}`),
|
||||
|
||||
|
||||
|
||||
getOrganizationType:()=>api.get('/api/Master/organization-type/list')
|
||||
getOrganizationType: () => api.get("/api/Master/organization-type/list"),
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user