Activity_Hierarchy #216

Closed
ashutosh.nehete wants to merge 21 commits from Activity_Hierarchy into main
11 changed files with 1219 additions and 236 deletions

View File

@ -10,11 +10,19 @@ import showToast from "../../services/toastService";
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" }),
unitOfMeasurement: z
.string()
.min(1, { message: "Unit of 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
.array(
z.object({
description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
description: z
.string()
.min(1, { message: "description list item cannot be empty" }),
isMandatory: z.boolean().default(false),
id: z.any().default(null),
})
@ -24,6 +32,12 @@ const schema = z.object({
const CreateActivity = ({ onClose }) => {
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 {
register,
@ -41,10 +55,11 @@ const CreateActivity = ({ onClose }) => {
activityName: "",
unitOfMeasurement: "",
checkList: [],
serviceId: "",
actitvityGroupId: "",
},
});
const {
fields: checkListItems,
append,
@ -59,15 +74,21 @@ const CreateActivity = ({ onClose }) => {
setIsLoading(true);
MasterRespository.createActivity(data)
.then( ( resp ) =>
{
.then((resp) => {
const cachedData = getCachedData("Activity");
const updatedData = [ ...cachedData, resp?.data ];
const updatedData = [...cachedData, resp?.data];
cacheData("Activity", updatedData);
showToast("Activity Successfully Added.", "success");
setIsLoading(false);
handleClose()
reset({
activityName: "",
unitOfMeasurement: "",
checkList: [],
serviceId: "",
actitvityGroupId: "",
});
setSelectedService(null)
// handleClose();
})
.catch((error) => {
showToast(error.message, "error");
@ -75,7 +96,6 @@ const CreateActivity = ({ onClose }) => {
});
};
const addChecklistItem = () => {
const values = getValues("checkList");
const lastIndex = checkListItems.length - 1;
@ -97,11 +117,33 @@ const CreateActivity = ({ onClose }) => {
});
};
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;
const service = services.find((b) => b.id === String(value));
reset((prev) => ({
...prev,
actitvityGroupId: String(value),
}));
};
const removeChecklistItem = (index) => {
remove(index);
};
const handleChecklistChange = (index, value) => {
setValue(`checkList.${index}`, value);
};
@ -111,17 +153,64 @@ const CreateActivity = ({ onClose }) => {
onClose();
};
// for tooltip
useEffect(() => {
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
if (!services) {
MasterRespository.getServices().then((res) => {
setServices(res?.data);
cacheData("Services", res?.data);
});
}
if (!activityGroups) {
MasterRespository.getActivityGroups().then((res) => {
setActivityGroups(res?.data);
cacheData("Activity Group", res?.data);
});
}
const tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h6>Create Activity</h6> */}
<div className="row">
{/* Services */}
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="serviceId">
Select Service
</label>
<select
id="serviceId"
className="form-select form-select-sm"
{...register("serviceId")}
onChange={handleServicesChange}
>
<option value="" disabled>
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>
{selectedService && (
<>
{/* Actitvity Name */}
<div className="col-6">
<label className="form-label">Activity</label>
<input
@ -135,9 +224,9 @@ const CreateActivity = ({ onClose }) => {
<p className="danger-text">{errors.activityName.message}</p>
)}
</div>
{/* Unit of Mesurement */}
<div className="col-6">
<label className="form-label">Measurement</label>
<label className="form-label">Unit of Measurement</label>
<input
type="text"
{...register("unitOfMeasurement")}
@ -146,12 +235,50 @@ const CreateActivity = ({ onClose }) => {
}`}
/>
{errors.unitOfMeasurement && (
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
<p className="danger-text">
{errors.unitOfMeasurement.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}
>
<option value="" disabled>
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 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 && (
<table className="table mt-1 border-0">
<thead className="py-0 my-0 table-border-top-0">
@ -204,9 +331,12 @@ const CreateActivity = ({ onClose }) => {
onClick={() => removeChecklistItem(index)}
className="btn btn-xs btn-icon btn-text-secondary"
>
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
<i
className="bx bxs-minus-circle text-danger"
data-bs-toggle="tooltip"
title="Remove Check"
data-bs-original-title="Remove check"></i>
data-bs-original-title="Remove check"
></i>
</button>
</td>
</tr>
@ -219,24 +349,34 @@ const CreateActivity = ({ onClose }) => {
className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem}
>
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
<i
className="bx bx-plus-circle"
data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check" ></i>
data-bs-original-title="Add check"
></i>
</button>
</div>
<div className="col-12 text-center mt-3">
<button type="submit" className="btn btn-sm btn-primary me-3">
<button
type="submit"
className="btn btn-sm btn-primary me-3"
disabled={isLoading || selectedService == null}
>
{isLoading ? "Please Wait" : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
onClick={handleClose}
disabled={isLoading || selectedService == null}
>
Cancel
</button>
</div>
</>
)}
</div>
</form>
);

View File

@ -0,0 +1,174 @@
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { MasterRespository } from "../../repositories/MastersRepository";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { getCachedData, cacheData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
const schema = z.object({
name: z.string().min(1, { message: "Service Name is required" }),
description: z
.string()
.min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
serviceId: z.string().min(1, { message: "A service selection is required." }),
});
const CreateActivityGroup = ({ onClose }) => {
const [isLoading, setIsLoading] = useState(false);
const [services, setServices] = useState(getCachedData("Services"));
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: "",
description: "",
serviceId: "",
},
});
const handleServicesChange = (e) => {
const { value } = e.target;
const service = services.find((b) => b.id === String(value));
reset((prev) => ({
...prev,
serviceId: String(value),
}));
};
const onSubmit = (data) => {
setIsLoading(true);
const result = {
name: data.name,
description: data.description,
serviceId: data.serviceId,
};
MasterRespository.createActivityGroup(result)
.then((resp) => {
setIsLoading(false);
resetForm();
const cachedData = getCachedData("Activity Group");
const updatedData = [...cachedData, resp?.data];
cacheData("Activity Group", updatedData);
showToast("Activity Group Added successfully.", "success");
onClose();
})
.catch((error) => {
showToast(error.message, "error");
setIsLoading(false);
});
};
const resetForm = () => {
reset({
name: "",
description: "",
serviceId: "",
});
setDescriptionLength(0);
};
useEffect(() => {
if (!services) {
MasterRespository.getServices().then((res) => {
setServices(res?.data);
cacheData("Services", res?.data);
});
}
return () => resetForm();
}, []);
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
return (
<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
</div> */}
<div className="col-12 col-md-12">
<label className="form-label">Activity Group Name</label>
<input
type="text"
{...register("name")}
className={`form-control ${errors.name ? "is-invalids" : ""}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="serviceId">
Select Service
</label>
<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 services found</option>
)}
</select>
{errors.serviceId && (
<p className="danger-text">{errors.serviceId.message}</p>
)}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">
Description
</label>
<textarea
rows="3"
{...register("description")}
className={`form-control ${
errors.description ? "is-invalids" : ""
}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary "
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
</form>
</>
);
};
export default CreateActivityGroup;

View File

@ -0,0 +1,123 @@
import React, { useEffect,useState } from 'react'
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService';
const schema = z.object({
name: z.string().min(1, { message: "Service Name is required" }),
description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
});
const CreateServices = ({onClose}) => {
const[isLoading,setIsLoading] = useState(false)
const {
register,
handleSubmit,
formState: { errors },reset
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: "",
description: "",
},
});
const onSubmit = (data) => {
setIsLoading(true)
const result = {
name: data.name,
description: data.description,
};
MasterRespository.createService(result).then((resp)=>{
setIsLoading(false)
resetForm()
const cachedData = getCachedData("Services");
const updatedData = [...cachedData, resp?.data];
cacheData("Services", updatedData);
showToast("Service Added successfully.", "success");
onClose()
}).catch((error)=>{
showToast(error.message, "error");
setIsLoading(false)
})
};
const resetForm = () => {
reset({
name: "",
description: ""
});
setDescriptionLength(0);
}
useEffect(()=>{
return ()=>resetForm()
},[])
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
</div> */}
<div className="col-12 col-md-12">
<label className="form-label">Service Name</label>
<input type="text"
{...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary "
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
</form>
</>
)
}
export default CreateServices;

View File

@ -2,28 +2,38 @@ import React, { useEffect, useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {MasterRespository} from "../../repositories/MastersRepository";
import { MasterRespository } from "../../repositories/MastersRepository";
import showToast from "../../services/toastService";
import {getCachedData,cacheData} from "../../slices/apiDataManager";
import { getCachedData, cacheData } from "../../slices/apiDataManager";
const schema = z.object({
activityName: z.string().min(1, { message: "Activity name 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
.array(
z.object({
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),
})
)
.optional(),
});
const UpdateActivity = ({ activityData, onClose }) => {
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 {
register,
@ -35,26 +45,80 @@ const UpdateActivity = ({ activityData, onClose }) => {
clearErrors,
getValues,
formState: { errors },
watch,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
id:activityData.id,
id: activityData.id,
serviceId: activityData.serviceId || "",
actitvityGroupId: activityData.actitvityGroupId || "",
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,
name: "checkList",
});
// Load initial data
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) {
reset( {
id:activityData.id,
reset({
id: activityData.id,
serviceId: activityData.serviceId || "",
actitvityGroupId: activityData.actitvityGroupId || "",
activityName: activityData.activityName,
unitOfMeasurement: activityData.unitOfMeasurement,
checkList: activityData.checkLists || [],
@ -62,42 +126,66 @@ const UpdateActivity = ({ activityData, onClose }) => {
}
}, [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) => {
setValue(`checkList.${index}`, value);
};
// Submit handler
const onSubmit = async(data) => {
const onSubmit = async (data) => {
setIsLoading(true);
const Activity = {...data, id:activityData.id}
try
{
const response = await MasterRespository.updateActivity( activityData?.id, Activity );
const Activity = { ...data, id: activityData.id };
try {
const response = await MasterRespository.updateActivity(
activityData?.id,
Activity
);
const updatedActivity = response.data;
const cachedData = getCachedData("Activity")
const cachedData = getCachedData("Activity");
if (cachedData) {
const updatedActivities = cachedData.map((activity) =>
activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
activity.id === updatedActivity.id
? { ...activity, ...updatedActivity }
: activity
);
cacheData( "Activity", updatedActivities );
onClose()
cacheData("Activity", updatedActivities);
onClose();
}
setIsLoading( false )
setIsLoading(false);
showToast("Activity Successfully Updated", "success");
} catch ( err )
{
setIsLoading( false )
} catch (err) {
setIsLoading(false);
showToast("error.message", "error");
}
};
// Add new checklist item
const addChecklistItem = () => {
const values = getValues("checkList");
@ -122,10 +210,11 @@ const UpdateActivity = ({ activityData, onClose }) => {
remove(index);
};
// for tooltip
useEffect(() => {
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipTriggerList = Array.from(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
@ -139,7 +228,9 @@ const UpdateActivity = ({ activityData, onClose }) => {
<input
type="text"
{...register("activityName")}
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
className={`form-control form-control-sm ${
errors.activityName ? "is-invalid" : ""
}`}
/>
{errors.activityName && (
<div className="text-danger">{errors.activityName.message}</div>
@ -152,16 +243,107 @@ const UpdateActivity = ({ activityData, onClose }) => {
<input
type="text"
{...register("unitOfMeasurement")}
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
className={`form-control form-control-sm ${
errors.unitOfMeasurement ? "is-invalid" : ""
}`}
/>
{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>
{/* Checklist */}
<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 && (
<table className="table mt-1 border-0">
<thead className="py-0 my-0 table-border-top-0">
@ -213,11 +395,13 @@ const UpdateActivity = ({ activityData, onClose }) => {
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"
<i
className="bx bxs-minus-circle text-danger"
data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check" ></i>
data-bs-original-title="Add check"
></i>
</button>
</td>
</tr>
@ -226,15 +410,17 @@ const UpdateActivity = ({ activityData, onClose }) => {
</table>
)}
<button
type="button"
className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem}
>
<i class="bx bx-plus-circle" data-bs-toggle="tooltip"
<i
className="bx bx-plus-circle"
data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check" ></i>
data-bs-original-title="Add check"
></i>
</button>
</div>

View File

@ -0,0 +1,187 @@
import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { set, z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { MasterRespository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
const schema = z.object({
name: z.string().min(1, { message: "Service Name is required" }),
description: z
.string()
.min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
serviceId: z.string().min(1, { message: "A service selection is required." }),
});
const EditActivityGroup = ({ data, onClose }) => {
const [isLoading, setIsLoading] = useState(false);
const [services, setServices] = useState(getCachedData("Services"));
const [formData, setFormData] = useState({
name: data?.name || "",
description: data?.description || "",
serviceId: data.serviceId || "",
});
const {
register,
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: data?.name || "",
description: data?.description || "",
serviceId: data.serviceId || "",
},
});
const selectedServiceId = watch("serviceId");
const selectedName = watch("name");
const selectedDescription = watch("description");
// const handleServicesChange = (e) => {
// const { value } = e.target;
// const service = services.find((b) => b.id === String(value));
// reset((prev) => ({
// ...prev,
// serviceId: String(value),
// }));
// };
const onSubmit = (formdata) => {
setIsLoading(true);
const result = {
id: data?.id,
name: formdata?.name,
description: formdata.description,
serviceId: formdata?.serviceId,
};
MasterRespository.updateActivityGroup(data?.id, result)
.then((resp) => {
setIsLoading(false);
showToast("Activity Group Update successfully.", "success");
const cachedData = getCachedData("Activity Group");
if (cachedData) {
const updatedData = cachedData.map((service) =>
service.id === data?.id ? { ...service, ...resp.data } : service
);
cacheData("Activity Group", updatedData);
}
onClose();
})
.catch((error) => {
showToast(error.message, "error");
setIsLoading(false);
});
};
useEffect(() => {
if (!services) {
MasterRespository.getServices().then((res) => {
setServices(res?.data);
cacheData("Services", res?.data);
});
}
reset({
name: data?.name,
description: data?.description,
serviceId: data?.serviceId,
});
setDescriptionLength(data?.description?.length || 0);
}, [data, reset]);
const [descriptionLength, setDescriptionLength] = useState(
data?.description?.length || 0
);
const maxDescriptionLength = 255;
return (
<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
</div> */}
<div className="col-12 col-md-12">
<label className="form-label">Service Name</label>
<input
type="text"
{...register("name")}
value={selectedName}
className={`form-control ${errors.name ? "is-invalids" : ""}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label">Select Service</label>
<select
id="serviceId"
className="form-select form-select-sm"
{...register("serviceId")}
value={selectedServiceId}
// onChange={handleServicesChange}
disabled
>
{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>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">
Description
</label>
<textarea
rows="3"
{...register("description")}
value={selectedDescription}
className={`form-control ${
errors.description ? "is-invalids" : ""
}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
</form>
</>
);
};
export default EditActivityGroup;

View File

@ -0,0 +1,135 @@
import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { set, z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { MasterRespository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
const schema = z.object({
name: z.string().min(1, { message: "Service Name is required" }),
description: z
.string()
.min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }),
});
const EditServices = ({ data, onClose }) => {
const [isLoading, setIsLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: data?.name || "",
description: data?.description || "",
},
});
const selectedName = watch("name")
const selectedDescription = watch("description")
const onSubmit = (formdata) => {
setIsLoading(true);
const result = {
id: data?.id,
name: formdata?.name,
description: formdata.description,
};
MasterRespository.updateService(data?.id, result)
.then((resp) => {
setIsLoading(false);
showToast("Service Update successfully.", "success");
const cachedData = getCachedData("Services");
if (cachedData) {
const updatedData = cachedData.map((service) =>
service.id === data?.id ? { ...service, ...resp.data } : service
);
cacheData("Services", updatedData);
}
onClose();
})
.catch((error) => {
showToast(error.message, "error");
setIsLoading(false);
});
};
useEffect(() => {
reset({
name: data?.name,
description: data?.description,
});
setDescriptionLength(data?.description?.length || 0);
}, [data, reset]);
const [descriptionLength, setDescriptionLength] = useState(
data?.description?.length || 0
);
const maxDescriptionLength = 255;
return (
<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
</div> */}
<div className="col-12 col-md-12">
<label className="form-label">Service Name</label>
<input
type="text"
{...register("name")}
value={selectedName}
className={`form-control ${errors.name ? "is-invalids" : ""}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">
Description
</label>
<textarea
rows="3"
{...register("description")}
value={selectedDescription}
className={`form-control ${
errors.description ? "is-invalids" : ""
}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
>
Cancel
</button>
</div>
</form>
</>
);
};
export default EditServices;

View File

@ -17,6 +17,10 @@ import CreateCategory from "./CreateContactCategory";
import CreateContactTag from "./CreateContactTag";
import EditContactCategory from "./EditContactCategory";
import EditContactTag from "./EditContactTag";
import CreateServices from "./CreateServices";
import EditServices from "./EditServices";
import CreateActivityGroup from "./CreateActivityGroup";
import EditActivityGroup from "./EditActivityGroup";
const MasterModal = ({ modaldata, closeModal }) => {
@ -118,6 +122,18 @@ const MasterModal = ({ modaldata, closeModal }) => {
{modaldata.modalType === "Edit-Job Role" && (
<EditJobRole data={modaldata.item} onClose={closeModal} />
)}
{modaldata.modalType === "Services" && (
<CreateServices onClose={closeModal} />
)}
{modaldata.modalType === "Edit-Services" && (
<EditServices data={modaldata.item} onClose={closeModal} />
)}
{modaldata.modalType === "Activity Group" && (
<CreateActivityGroup onClose={closeModal} />
)}
{modaldata.modalType === "Edit-Activity Group" && (
<EditActivityGroup data={modaldata.item} onClose={closeModal} />
)}
{modaldata.modalType === "Activity" && (
<CreateActivity onClose={closeModal} />
)}

View File

@ -1,5 +1,5 @@
// it important ------
export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"},{id:5,name:"Contact Category"},{id:6,name:"Contact Tag"}]
export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Services"}, {id: 4, name: "Activity Group"}, {id: 5, name: "Activity"},{id: 6, name:"Work Category"},{id:7,name:"Contact Category"},{id:8,name:"Contact Tag"}]
// -------------------
export const dailyTask = [

View File

@ -43,6 +43,14 @@ const useMaster = (isMa) => {
response = await MasterRespository.getJobRole();
response = response.data
break;
case "Services":
response = await MasterRespository.getServices();
response = response.data
break;
case "Activity Group":
response = await MasterRespository.getActivityGroups();
response = response.data
break;
case "Activity":
response = await MasterRespository.getActivites();
response = response.data

View File

@ -16,6 +16,11 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
"tenantId",
"checkLists",
"isSystem",
"isActive",
"serviceId",
"servicesName",
"actitvityGroupId",
"activityGroupName"
];
const safeData = Array.isArray(data) ? data : [];

View File

@ -30,15 +30,24 @@ export const MasterRespository = {
getJobRole :()=>api.get("/api/roles/jobrole"),
updateJobRole: ( id, data ) => api.put( `/api/roles/jobrole/${ id }`, data ),
getServices: () => api.get("api/master/services"),
createService: (data) => api.post("api/master/service", data),
updateService: (id, data) => api.put(`api/master/service/${id}`, data),
getActivityGroups: () => api.get("api/master/activity-groups"),
createActivityGroup: (data) => api.post("api/master/activity-group", data),
updateActivityGroup: (id, data) => api.put(`api/master/activity-group/${id}`, data),
getActivites: () => api.get( 'api/master/activities' ),
createActivity: (data) => api.post( 'api/master/activity',data ),
updateActivity:(id,data) =>api.post(`api/master/activity/edit/${id}`,data),
updateActivity:(id,data) =>api.put(`api/master/activity/${id}`,data),
getIndustries: () => api.get( 'api/master/industries' ),
// delete
"Job Role": ( id ) => api.delete( `/api/roles/jobrole/${ id }` ),
"Activity": ( id ) => api.delete( `/api/master/activity/delete/${ id }` ),
"Services": (id) => api.delete(`/api/master/service/${id}`),
"Activity Group": (id) => api.delete(`/api/master/activity-group/${id}`),
"Activity": ( id ) => api.delete( `/api/master/activity/${ id }` ),
"Application Role":(id)=>api.delete(`/api/roles/${id}`),
"Work Category": ( id ) => api.delete( `api/master/work-category/${ id }` ),
"Contact Category": ( id ) => api.delete( `/api/master/contact-category` ),