From 55b9420b6cf0addf9a13406a2004a92cdb5fb603 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Fri, 11 Apr 2025 15:13:08 +0530 Subject: [PATCH] Activity master component made and is reday for api integration. --- src/components/master/CreateActivity.jsx | 205 +++++++++++++++++++++++ src/components/master/EditActivity.jsx | 175 +++++++++++++++++++ src/components/master/MasterModal.jsx | 89 +++++----- src/pages/master/MasterPage.jsx | 2 - src/repositories/MastersRepository.jsx | 4 +- 5 files changed, 432 insertions(+), 43 deletions(-) create mode 100644 src/components/master/CreateActivity.jsx create mode 100644 src/components/master/EditActivity.jsx diff --git a/src/components/master/CreateActivity.jsx b/src/components/master/CreateActivity.jsx new file mode 100644 index 00000000..bb207b53 --- /dev/null +++ b/src/components/master/CreateActivity.jsx @@ -0,0 +1,205 @@ +import React,{useState,useEffect} from 'react' +import {useFieldArray, 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({ + activityName: z.string().min(1, { message: "Role is required" }), + unitOfMeasurement: z.string().min(1, { message: "Description is required" }), + checkList: z + .array(z.string().min(1, { message: "Checklist item cannot be empty" })) + .optional(), + }); + +const CreateActivity = () => +{ + + const [ isLoading, setIsLoading ] = useState( false ) + + // const { + // register, + // handleSubmit, + // formState: { errors },reset + // } = useForm({ + // resolver: zodResolver(schema), + // defaultValues: { + // activityName: "", + // unitOfMeasurement: "", + // checkList: [''] + // }, + // }); + + // const onSubmit = (data) => { + // setIsLoading(true) + // const result = { + // name: data.activityName, + // description: data.unitOfMeasurement, + // }; + // console.log( result ) + // reset() + // MasterRespository.createJobRole(result).then((resp)=>{ + // setIsLoading(false) + // resetForm() + // const cachedData = getCachedData("Job Role"); + // const updatedData = [...cachedData, resp?.data]; + // cacheData("Job Role", updatedData); + // showToast("JobRole Added successfully.", "success"); + + // onClose() + // }).catch((error)=>{ + // showToast(error.message, "error"); + // setIsLoading(false) + // }) + + + // }; + // const resetForm =()=>{ + // reset({ + // activityName:"", + // unitOfMeasurement:"" + // }) + // } + + // useEffect(()=>{ + // return ()=>resetForm() + // }, [] ) + + const { + register, + handleSubmit, + control, + setValue, + clearErrors, + setError, + getValues, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + activityName: '', + unitOfMeasurement: '', + checkList: [], + }, + }); + + // Setting up field array for checkList (dynamic fields) + const { + fields: checkListItems, + append, + remove, + } = useFieldArray({ + control, + name: 'checkList', + }); + + // Form submission handler + const onSubmit = (data) => { + console.log('Submitted:', data); + }; + + // Add a new checklist item + const addChecklistItem = () => { + const values = getValues('checkList'); + const lastIndex = checkListItems.length - 1; + + + if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) { + setError(`checkList.${lastIndex}`, { + type: 'manual', + message: 'Please fill this checklist item before adding another.', + }); + return; + } + + clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled. + append(''); // Add a new empty checklist input + }; + + + const removeChecklistItem = (index) => { + remove(index); + }; + + // Handle checklist item input change + const handleChecklistChange = (index, value) => { + setValue(`checkList.${index}`, value); + }; + return ( +
+
+
+ + + {errors.activityName &&

{errors.activityName.message}

} +
+ +
+ + + {errors.unitOfMeasurement && ( +

{errors.unitOfMeasurement.message}

+ )} +
+ +
+ {/* Dynamic checklist items */} + {checkListItems.map((item, index) => ( +
+
+ handleChecklistChange(index, e.target.value)} // Handle input change + /> + +
+ {errors.checkList?.[index] && ( +

{errors.checkList[index]?.message}

+ )} +
+ ))} + {/* Add new checklist item */} + +
+ +
+ + +
+
+
+ ) +} + +export default CreateActivity \ No newline at end of file diff --git a/src/components/master/EditActivity.jsx b/src/components/master/EditActivity.jsx new file mode 100644 index 00000000..6f9ea49d --- /dev/null +++ b/src/components/master/EditActivity.jsx @@ -0,0 +1,175 @@ +import React, { useState, useEffect } from 'react'; +import { useFieldArray, useForm } from 'react-hook-form'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; + +// Zod Schema for validation +const schema = z.object({ + activityName: z.string().min(1, { message: "Activity name is required" }), + unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }), + checkList: z + .array(z.string().min(1, { message: "Checklist item cannot be empty" })) + .optional(), +} ); + +// for demo data +let initialData = { + activityName: "Item", + unitOfMeasurement: "Item-2", + checkList: [ + 'item 3', + 'Item 4' + ] +} +const EditActivity = ({onClose}) => { + const [isLoading, setIsLoading] = useState(false); + + const { + register, + handleSubmit, + control, + setValue, + clearErrors, + setError, + getValues, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + activityName: '', + unitOfMeasurement: '', + checkList: [], + }, + }); + + // Setting up field array for checkList (dynamic fields) + const { + fields: checkListItems, + append, + remove, + } = useFieldArray({ + control, + name: 'checkList', + }); + + // Pre-populating the form with initial data when component mounts or initialData changes + useEffect(() => { + if (initialData) { + reset({ + activityName: initialData.activityName, + unitOfMeasurement: initialData.unitOfMeasurement, + checkList: initialData.checkList || [], + }); + } + }, [initialData, reset]); + + // Form submission handler + const onSubmit = (data) => { + console.log('Submitted:', data); + }; + + // Add a new checklist item + const addChecklistItem = () => { + const values = getValues('checkList'); + const lastIndex = checkListItems.length - 1; + + // Prevent adding new input if the last one is empty + if (checkListItems.length > 0 && (!values?.[lastIndex] || values[lastIndex].trim() === '')) { + setError(`checkList.${lastIndex}`, { + type: 'manual', + message: 'Please fill this checklist item before adding another.', + }); + return; + } + + clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled. + append(''); // Add a new empty checklist input + }; + + // Remove a checklist item + const removeChecklistItem = (index) => { + remove(index); // Remove the checklist item from the field array + }; + + // 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 ( +
+
+
+ + + {errors.activityName &&

{errors.activityName.message}

} +
+ +
+ + + {errors.unitOfMeasurement && ( +

{errors.unitOfMeasurement.message}

+ )} +
+ +
+ {/* Dynamic checklist items */} + {checkListItems.map((item, index) => ( +
+ handleChecklistChange(index, e.target.value)} // Handle input change + /> + + {errors.checkList?.[index] && ( +

{errors.checkList[index]?.message}

+ )} +
+ ))} + {/* Add new checklist item */} + +
+ +
+ + +
+
+
+ ); +}; + +export default EditActivity; diff --git a/src/components/master/MasterModal.jsx b/src/components/master/MasterModal.jsx index dacd16a9..ef976fbe 100644 --- a/src/components/master/MasterModal.jsx +++ b/src/components/master/MasterModal.jsx @@ -5,53 +5,62 @@ import DeleteMaster from "./DeleteMaster"; import EditRole from "./EditRole"; import CreateJobRole from "./CreateJobRole"; import EditJobRole from "./EditJobRole"; +import CreateActivity from "./CreateActivity"; +import EditActivity from "./EditActivity"; -const MasterModal = ({ modaldata ,closeModal}) => { - +const MasterModal = ({ modaldata, closeModal }) => { return ( - -