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

added CreateActivity and EditActivity components.

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-15 00:36:20 +05:30
parent 6df20de749
commit 5f094aa2e6
2 changed files with 353 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

304
src/components/master/CreateActivity.jsx
View File

@ -1,26 +1,30 @@
import React,{useState,useEffect} from 'react' import React, { useState, useEffect } from "react";
import {useFieldArray, useForm } from 'react-hook-form'; import { useFieldArray, useForm } from "react-hook-form";
import { z } from 'zod'; import { z } from "zod";
import {zodResolver} from '@hookform/resolvers/zod'; import { zodResolver } from "@hookform/resolvers/zod";
import { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from "../../repositories/MastersRepository";
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from "../../slices/apiDataManager";
import showToast from '../../services/toastService'; import showToast from "../../services/toastService";
const schema = z.object({ const schema = z.object({
activityName: z.string().min(1, { message: "Role is required" }), activityName: z.string().min(1, { message: "Role is required" }),
unitOfMeasurement: z.string().min(1, { message: "Description is required" }), unitOfMeasurement: z.string().min(1, { message: "Description is required" }),
checkList: z checkList: z
.array(z.string().min(1, { message: "Checklist item cannot be empty" })) .array(
.optional(), z.object({
}); check: z.string().min(1, { message: "Checklist item cannot be empty" }),
isMandatory: z.boolean().default(false),
const CreateActivity = ({onClose}) => id: z.any().default(0),
{ })
)
.optional(),
});
const CreateActivity = ({ onClose }) => {
const [isLoading, setIsLoading] = useState(false);
const [ isLoading, setIsLoading ] = useState( false )
const { const {
register, register,
handleSubmit, handleSubmit,
@ -34,147 +38,197 @@ const CreateActivity = ({onClose}) =>
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
activityName: '', activityName: "",
unitOfMeasurement: '', unitOfMeasurement: "",
checkList: [], checkList: [],
}, },
}); });
// Setting up field array for checkList (dynamic fields)
const { const {
fields: checkListItems, fields: checkListItems,
append, append,
remove, remove,
} = useFieldArray({ } = useFieldArray({
control, control,
name: 'checkList', name: "checkList",
}); });
// Form submission handler // Form submission handler
const onSubmit = ( data ) => const onSubmit = (data) => {
{ console.log(data);
console.log(data) setIsLoading(true);
setIsLoading(true)
MasterRespository.updateActivity(data).then((resp)=>{
setIsLoading(false)
const cachedData = getCachedData("Activity");
const updatedData = [...cachedData, resp?.data];
cacheData("Activity", updatedData);
showToast("Activity Added successfully.", "success");
onClose() MasterRespository.createActivity(data)
}).catch((error)=>{ .then( ( resp ) =>
showToast(error.message, "error"); {
setIsLoading(false)
}) 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);
});
}; };
// Add a new checklist item
const addChecklistItem = () => {
const values = getValues('checkList');
const lastIndex = checkListItems.length - 1;
const addChecklistItem = () => {
if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) { const values = getValues("checkList");
setError(`checkList.${lastIndex}`, { const lastIndex = checkListItems.length - 1;
type: 'manual', if (
message: 'Please fill this checklist item before adding another.', checkListItems.length > 0 &&
(!values?.[lastIndex] || values[lastIndex].check.trim() === "")
) {
setError(`checkList.${lastIndex}.check`, {
type: "manual",
message: "Please fill this checklist item before adding another.",
}); });
return; return;
} }
clearErrors(`checkList.${lastIndex}.check`);
clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled. append({
append(''); // Add a new empty checklist input id: 0,
check: "",
isMandatory: false,
});
}; };
const removeChecklistItem = (index) => { const removeChecklistItem = (index) => {
remove(index); remove(index);
}; };
// Handle checklist item input change
const handleChecklistChange = (index, value) => { const handleChecklistChange = (index, value) => {
setValue(`checkList.${index}`, value); setValue(`checkList.${index}`, value);
}; };
const handleClose = () => const handleClose = () => {
{ reset();
reset() onClose();
onClose() };
}
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="row"> <h6>Create Activity</h6>
<div className="col-6"> <div className="row">
<label className="form-label">Activity</label> <div className="col-6">
<input <label className="form-label">Activity</label>
type="text" <input
{...register('activityName')} type="text"
className={`form-control form-control-sm ${errors.activityName ? 'is-invalid' : ''}`} {...register("activityName")}
/> className={`form-control form-control-sm ${
{errors.activityName && <p className="danger-text">{errors.activityName.message}</p>} errors.activityName ? "is-invalid" : ""
</div> }`}
/>
{errors.activityName && (
<p className="danger-text">{errors.activityName.message}</p>
)}
</div>
<div className="col-6"> <div className="col-6">
<label className="form-label">Measurement</label> <label className="form-label">Measurement</label>
<input <input
type="text" type="text"
{...register('unitOfMeasurement')} {...register("unitOfMeasurement")}
className={`form-control form-control-sm ${errors.unitOfMeasurement ? 'is-invalid' : ''}`} className={`form-control form-control-sm ${
/> errors.unitOfMeasurement ? "is-invalid" : ""
{errors.unitOfMeasurement && ( }`}
<p className="danger-text">{errors.unitOfMeasurement.message}</p> />
)} {errors.unitOfMeasurement && (
</div> <p className="danger-text">{errors.unitOfMeasurement.message}</p>
)}
</div>
<div className="col-md-6 text-start"> <div className="col-md-12 text-start mt-1">
{/* Dynamic checklist items */} <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
{checkListItems.map((item, index) => ( {checkListItems.length > 0 && (
<div key={item.id} className=" align-items-center my-1"> <table className="table mt-1 border-0">
<div className='d-flex align-items-center gap-2'> <thead className="py-0 my-0 table-border-top-0">
<input <tr className="py-1">
{...register(`checkList.${index}`)} <th colSpan={2} className="py-1">
className="form-control form-control-sm" <small>Name</small>
placeholder={`Checklist item ${index + 1}`} </th>
onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change <th colSpan={2} className="py-1 text-center">
/> <small>Is Mandatory</small>
<button </th>
type="button" <th className="text-center py-1">Action</th>
onClick={() => removeChecklistItem(index)} // Remove button </tr>
className="btn btn-xs btn-icon btn-text-secondary" </thead>
> <tbody className="table-border-bottom-0 ">
<span class='icon-base bx bx bx-x'></span> {checkListItems.map((item, index) => (
</button> <tr key={index} className="border-top-0">
</div> <td colSpan={2} className="border-top-0 border-0">
{errors.checkList?.[index] && ( <input
<p className="danger-text">{errors.checkList[index]?.message}</p> className="d-none"
)} {...register(`checkList.${index}.id`)}
</div> ></input>
))} <input
{/* Add new checklist item */} {...register(`checkList.${index}.check`)}
<button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}> className="form-control form-control-sm"
+ Add Checklist Item placeholder={`Checklist item ${index + 1}`}
</button> onChange={(e) =>
</div> handleChecklistChange(index, e.target.value)
}
/>
{errors.checkList?.[index]?.check && (
<small
style={{ fontSize: "10px" }}
className="danger-text"
>
{errors.checkList[index]?.check?.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 class="bx bxs-minus-circle text-danger"></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
<button
type="button"
className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem}
>
<i class="bx bx-plus-circle"></i>
</button>
</div>
<div className="col-12 text-center mt-3"> <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">
{isLoading ? "Please Wait" : "Submit"} {isLoading ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="reset" type="reset"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
onClick={handleClose} onClick={handleClose}
> >
Cancel Cancel
</button> </button>
</div>
</div> </div>
</div> </form>
</form> );
) };
}
export default CreateActivity export default CreateActivity;

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

@ -1,23 +1,28 @@
import React, { useState, useEffect } from 'react'; import React, { useEffect, useState } from "react";
import { useFieldArray, useForm } from 'react-hook-form'; import { useForm, useFieldArray } from "react-hook-form";
import { z } from 'zod'; import { z } from "zod";
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from "@hookform/resolvers/zod";
import {MasterRespository} from '../../repositories/MastersRepository'; import {MasterRespository} from "../../repositories/MastersRepository";
import axios from 'axios'; import showToast from "../../services/toastService";
import showToast from '../../services/toastService'; import {getCachedData,cacheData} from "../../slices/apiDataManager";
import {cacheData, getCachedData} from '../../slices/apiDataManager';
// Zod Schema for validation
const schema = z.object({ const schema = z.object({
activityName: z.string().min(1, { message: "Activity name is required" }), activityName: z.string().min(1, { message: "Activity name is required" }),
unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }), unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
checkList: z checkList: z
.array(z.string().min(1, { message: "Checklist item cannot be empty" })) .array(
z.object({
id: z.any().default(0),
check: z.string().min(1, { message: "Checklist item cannot be empty" }),
isMandatory: z.boolean().default(false),
})
)
.optional(), .optional(),
} ); });
let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOlsiOGFmNjFlNDgtYzRkMy00MTYzLWI4NjAtMmEyZWNiNjQ3NDZiIiwiYjUxMzcwOWEtYmZiZS00OTM1LTlmNWMtOGVjN2IwMzFjNTFlIl0sInN1YiI6InZpa2FzQG1hcmNvYWlvdC5jb20iLCJUZW5hbnRJZCI6IjIiLCJleHAiOjE3NDQzNzQyNzAsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiJ9.reQlePmwDpBL-_mcGOrWwADLJrxmUse5Gd7A-OgDi9s"
const EditActivity = ({activityData,onClose}) => { const UpdateActivity = ({ activityData, onClose }) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { const {
@ -25,166 +30,212 @@ const EditActivity = ({activityData,onClose}) => {
handleSubmit, handleSubmit,
control, control,
setValue, setValue,
clearErrors,
setError,
getValues,
reset, reset,
setError,
clearErrors,
getValues,
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
activityName: '', id:activityData.id,
unitOfMeasurement: '', activityName: activityData.activityName,
checkList: [], unitOfMeasurement: activityData.unitOfMeasurement,
checkLists: activityData.checkLists || [],
}, },
}); });
// Setting up field array for checkList (dynamic fields) const { fields: checkListItems, append, remove } = useFieldArray({
const {
fields: checkListItems,
append,
remove,
} = useFieldArray({
control, control,
name: 'checkList', name: "checkList",
}); });
// Pre-populating the form with initial data when component mounts or initialData changes // Load initial data
useEffect(() => { useEffect(() => {
if (activityData) { if (activityData) {
reset({ reset( {
id:activityData.id,
activityName: activityData.activityName, activityName: activityData.activityName,
unitOfMeasurement: activityData.unitOfMeasurement, unitOfMeasurement: activityData.unitOfMeasurement,
checkList: activityData.checkList || [], checkList: activityData.checkLists || [],
}); });
} }
}, [activityData, reset]); }, [activityData]);
// Form submission handler
const onSubmit = async( data ) => const handleChecklistChange = (index, value) => {
setValue(`checkList.${index}`, value);
};
// Submit handler
const onSubmit = async(data) => {
setIsLoading(true);
const Activity = {...data, id:activityData.id}
try
{ {
console.log(data) const response = await MasterRespository.updateActivity( activityData?.id, Activity );
setIsLoading(true) const updatedActivity = response.data;
MasterRespository.updateActivity(activityData?.id,data).then((resp)=>{ const cachedData = getCachedData("Activity")
setIsLoading(false)
const cachedData = getCachedData("Activity"); if (cachedData) {
if (cachedData) { const updatedActivities = cachedData.map((activity) =>
const updatedData = cachedData.map((activity) => activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
activity.id === activityData?.id );
? {
...activity, cacheData( "Activity", updatedActivities );
activityName: resp.data.activityName,
unitOfMeasurement: resp.data.unitOfMeasurement,
}
: activity
);
cacheData("Activity", updatedData);
}
showToast("Activity Added successfully.", "success");
onClose() onClose()
}).catch((error)=>{ }
showToast(error.message, "error"); setIsLoading( false )
setIsLoading(false) showToast("Activity Successfully Updated", "success");
}) } catch ( err )
{
setIsLoading( false )
};
// Add a new checklist item showToast("error.message", "error");
console.log(err)
}
};
// Add new checklist item
const addChecklistItem = () => { const addChecklistItem = () => {
const values = getValues('checkList'); const values = getValues("checkList");
const lastIndex = checkListItems.length - 1; const lastIndex = checkListItems.length - 1;
// Prevent adding new input if the last one is empty if (
if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) { checkListItems.length > 0 &&
setError(`checkList.${lastIndex}`, { (!values?.[lastIndex] || values[lastIndex].check.trim() === "")
type: 'manual', ) {
message: 'Please fill this checklist item before adding another.', setError(`checkList.${lastIndex}.check`, {
type: "manual",
message: "Please fill this checklist item before adding another.",
}); });
return; return;
} }
clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled. clearErrors(`checkList.${lastIndex}.check`);
append(''); // Add a new empty checklist input append({ id: 0, check: "", isMandatory: false });
}; };
// Remove a checklist item
const removeChecklistItem = (index) => { const removeChecklistItem = (index) => {
remove(index); // Remove the checklist item from the field array remove(index);
}; };
// Handle checklist item input change
const handleChecklistChange = (index, value) => {
setValue(`checkList.${index}`, value); // Update the value of the checklist item
};
const handleCLose = () =>
{
() => reset()
onClose()
}
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<h6>Update Activity</h6>
<div className="row"> <div className="row">
<div className="col-6"> {/* Activity Name */}
<label className="form-label">Activity</label> <div className="col-md-6">
<label className="form-label">Activity Name</label>
<input <input
type="text" type="text"
{...register('activityName')} {...register("activityName")}
className={`form-control form-control-sm ${errors.activityName ? 'is-invalid' : ''}`} className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
/> />
{errors.activityName && <p className="danger-text">{errors.activityName.message}</p>} {errors.activityName && (
</div> <div className="text-danger">{errors.activityName.message}</div>
<div className="col-6">
<label className="form-label">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>
<div className="col-md-6 text-start"> {/* Unit of Measurement */}
{/* Dynamic checklist items */} <div className="col-md-6">
{checkListItems.map((item, index) => ( <label className="form-label">Measurement</label>
<div key={item.id} className="d-flex align-items-center gap-2 my-1"> <input
<input type="text"
{...register(`checkList.${index}`)} {...register("unitOfMeasurement")}
className="form-control form-control-sm" className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
placeholder={`Checklist item ${index + 1}`} />
onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change {errors.unitOfMeasurement && (
/> <div className="text-danger">{errors.unitOfMeasurement.message}</div>
<button )}
type="button" </div>
onClick={() => removeChecklistItem(index)} // Remove button
className="btn btn-xs btn-icon btn-text-secondary" {/* Checklist */}
> <div className="col-md-12 text-start mt-1">
<span className="icon-base bx bx-x"/> <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
</button> {checkListItems.length > 0 && (
{errors.checkList?.[index] && ( <table className="table mt-1 border-0">
<p className="danger-text">{errors.checkList[index]?.message}</p> <thead className="py-0 my-0 table-border-top-0">
)} <tr className="py-1">
</div> <th colSpan={2} className="py-1">
))} <small>Name</small>
{/* Add new checklist item */} </th>
<button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}> <th colSpan={2} className="py-1 text-center">
+ Add Checklist Item <small>Is Mandatory</small>
</th>
<th className="text-center py-1">Action</th>
</tr>
</thead>
<tbody>
{checkListItems.map((item, index) => (
<tr key={item.id} className="border-top-0">
<td colSpan={2} className=" border-0">
<input
className="d-none"
{...register(`checkList.${index}.id`)}
></input>
<input
{...register(`checkList.${index}.check`)}
className="form-control form-control-sm"
placeholder={`Checklist item ${index + 1}`}
onChange={(e) =>
handleChecklistChange(index, e.target.value)
}
/>
{errors.checkList?.[index]?.check && (
<small
style={{ fontSize: "10px" }}
className="danger-text"
>
{errors.checkList[index]?.check?.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 class="bx bxs-minus-circle text-danger"></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
<button
type="button"
className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem}
>
<i class="bx bx-plus-circle"></i>
</button> </button>
</div> </div>
{/* Submit / Cancel */}
<div className="col-12 text-center mt-3"> <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">
Submit {isLoading ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="reset" type="reset"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
onClick={handleCLose} onClick={onClose}
> >
Cancel Cancel
</button> </button>
@ -194,4 +245,4 @@ const EditActivity = ({activityData,onClose}) => {
); );
}; };
export default EditActivity; export default UpdateActivity;