added CreateActivity and EditActivity components.
This commit is contained in:
Pramod Mahajan
parent
6df20de749
commit
5f094aa2e6
@ -1,26 +1,30 @@
|
||||
import React,{useState,useEffect} from 'react'
|
||||
import {useFieldArray, useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import {zodResolver} from '@hookform/resolvers/zod';
|
||||
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';
|
||||
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 = ({onClose}) =>
|
||||
{
|
||||
.array(
|
||||
z.object({
|
||||
check: z.string().min(1, { message: "Checklist item cannot be empty" }),
|
||||
isMandatory: z.boolean().default(false),
|
||||
id: z.any().default(0),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
|
||||
const CreateActivity = ({ onClose }) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [ isLoading, setIsLoading ] = useState( false )
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -34,147 +38,197 @@ const CreateActivity = ({onClose}) =>
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
activityName: '',
|
||||
unitOfMeasurement: '',
|
||||
activityName: "",
|
||||
unitOfMeasurement: "",
|
||||
checkList: [],
|
||||
},
|
||||
});
|
||||
|
||||
// Setting up field array for checkList (dynamic fields)
|
||||
|
||||
const {
|
||||
fields: checkListItems,
|
||||
append,
|
||||
remove,
|
||||
} = useFieldArray({
|
||||
control,
|
||||
name: 'checkList',
|
||||
name: "checkList",
|
||||
});
|
||||
|
||||
// Form submission handler
|
||||
const onSubmit = ( data ) =>
|
||||
{
|
||||
console.log(data)
|
||||
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");
|
||||
const onSubmit = (data) => {
|
||||
console.log(data);
|
||||
setIsLoading(true);
|
||||
|
||||
onClose()
|
||||
}).catch((error)=>{
|
||||
showToast(error.message, "error");
|
||||
setIsLoading(false)
|
||||
})
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
// 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.',
|
||||
const addChecklistItem = () => {
|
||||
const values = getValues("checkList");
|
||||
const lastIndex = checkListItems.length - 1;
|
||||
if (
|
||||
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;
|
||||
}
|
||||
|
||||
clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled.
|
||||
append(''); // Add a new empty checklist input
|
||||
clearErrors(`checkList.${lastIndex}.check`);
|
||||
append({
|
||||
id: 0,
|
||||
check: "",
|
||||
isMandatory: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const removeChecklistItem = (index) => {
|
||||
remove(index);
|
||||
remove(index);
|
||||
};
|
||||
|
||||
// Handle checklist item input change
|
||||
|
||||
const handleChecklistChange = (index, value) => {
|
||||
setValue(`checkList.${index}`, value);
|
||||
setValue(`checkList.${index}`, value);
|
||||
};
|
||||
|
||||
const handleClose = () =>
|
||||
{
|
||||
reset()
|
||||
onClose()
|
||||
}
|
||||
const handleClose = () => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<label className="form-label">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>
|
||||
<h6>Create Activity</h6>
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<label className="form-label">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">
|
||||
<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 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 className="col-md-6 text-start">
|
||||
{/* Dynamic checklist items */}
|
||||
{checkListItems.map((item, index) => (
|
||||
<div key={item.id} className=" align-items-center my-1">
|
||||
<div className='d-flex align-items-center gap-2'>
|
||||
<input
|
||||
{...register(`checkList.${index}`)}
|
||||
className="form-control form-control-sm"
|
||||
placeholder={`Checklist item ${index + 1}`}
|
||||
onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeChecklistItem(index)} // Remove button
|
||||
className="btn btn-xs btn-icon btn-text-secondary"
|
||||
>
|
||||
<span class='icon-base bx bx bx-x'></span>
|
||||
</button>
|
||||
</div>
|
||||
{errors.checkList?.[index] && (
|
||||
<p className="danger-text">{errors.checkList[index]?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{/* Add new checklist item */}
|
||||
<button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}>
|
||||
+ Add Checklist Item
|
||||
</button>
|
||||
</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}.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>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-center mt-3">
|
||||
<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"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="col-12 text-center mt-3">
|
||||
<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"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateActivity
|
||||
export default CreateActivity;
|
||||
|
||||
@ -1,23 +1,28 @@
|
||||
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 axios from 'axios';
|
||||
import showToast from '../../services/toastService';
|
||||
import {cacheData, getCachedData} from '../../slices/apiDataManager';
|
||||
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 showToast from "../../services/toastService";
|
||||
import {getCachedData,cacheData} from "../../slices/apiDataManager";
|
||||
|
||||
|
||||
// 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" }))
|
||||
.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(),
|
||||
} );
|
||||
});
|
||||
|
||||
let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOlsiOGFmNjFlNDgtYzRkMy00MTYzLWI4NjAtMmEyZWNiNjQ3NDZiIiwiYjUxMzcwOWEtYmZiZS00OTM1LTlmNWMtOGVjN2IwMzFjNTFlIl0sInN1YiI6InZpa2FzQG1hcmNvYWlvdC5jb20iLCJUZW5hbnRJZCI6IjIiLCJleHAiOjE3NDQzNzQyNzAsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTI0NiJ9.reQlePmwDpBL-_mcGOrWwADLJrxmUse5Gd7A-OgDi9s"
|
||||
const EditActivity = ({activityData,onClose}) => {
|
||||
|
||||
const UpdateActivity = ({ activityData, onClose }) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const {
|
||||
@ -25,166 +30,212 @@ const EditActivity = ({activityData,onClose}) => {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
clearErrors,
|
||||
setError,
|
||||
getValues,
|
||||
reset,
|
||||
setError,
|
||||
clearErrors,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
activityName: '',
|
||||
unitOfMeasurement: '',
|
||||
checkList: [],
|
||||
id:activityData.id,
|
||||
activityName: activityData.activityName,
|
||||
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,
|
||||
name: 'checkList',
|
||||
name: "checkList",
|
||||
});
|
||||
|
||||
// Pre-populating the form with initial data when component mounts or initialData changes
|
||||
// Load initial data
|
||||
useEffect(() => {
|
||||
if (activityData) {
|
||||
reset({
|
||||
reset( {
|
||||
id:activityData.id,
|
||||
activityName: activityData.activityName,
|
||||
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)
|
||||
setIsLoading(true)
|
||||
MasterRespository.updateActivity(activityData?.id,data).then((resp)=>{
|
||||
setIsLoading(false)
|
||||
const cachedData = getCachedData("Activity");
|
||||
if (cachedData) {
|
||||
const updatedData = cachedData.map((activity) =>
|
||||
activity.id === activityData?.id
|
||||
? {
|
||||
...activity,
|
||||
activityName: resp.data.activityName,
|
||||
unitOfMeasurement: resp.data.unitOfMeasurement,
|
||||
}
|
||||
: activity
|
||||
);
|
||||
|
||||
cacheData("Activity", updatedData);
|
||||
}
|
||||
showToast("Activity Added successfully.", "success");
|
||||
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()
|
||||
}).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 values = getValues('checkList');
|
||||
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.',
|
||||
if (
|
||||
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;
|
||||
}
|
||||
|
||||
clearErrors(`checkList.${lastIndex}`); // Clear the error if the input is filled.
|
||||
append(''); // Add a new empty checklist input
|
||||
clearErrors(`checkList.${lastIndex}.check`);
|
||||
append({ id: 0, check: "", isMandatory: false });
|
||||
};
|
||||
|
||||
// Remove a checklist item
|
||||
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 (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h6>Update Activity</h6>
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<label className="form-label">Activity</label>
|
||||
{/* Activity Name */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Activity Name</label>
|
||||
<input
|
||||
type="text"
|
||||
{...register('activityName')}
|
||||
className={`form-control form-control-sm ${errors.activityName ? 'is-invalid' : ''}`}
|
||||
{...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">
|
||||
<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>
|
||||
{errors.activityName && (
|
||||
<div className="text-danger">{errors.activityName.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 text-start">
|
||||
{/* Dynamic checklist items */}
|
||||
{checkListItems.map((item, index) => (
|
||||
<div key={item.id} className="d-flex align-items-center gap-2 my-1">
|
||||
<input
|
||||
{...register(`checkList.${index}`)}
|
||||
className="form-control form-control-sm"
|
||||
placeholder={`Checklist item ${index + 1}`}
|
||||
onChange={(e) => handleChecklistChange(index, e.target.value)} // Handle input change
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeChecklistItem(index)} // Remove button
|
||||
className="btn btn-xs btn-icon btn-text-secondary"
|
||||
>
|
||||
<span className="icon-base bx bx-x"/>
|
||||
</button>
|
||||
{errors.checkList?.[index] && (
|
||||
<p className="danger-text">{errors.checkList[index]?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{/* Add new checklist item */}
|
||||
<button type="button" className="btn btn-sm btn-primary mt-2" onClick={addChecklistItem}>
|
||||
+ Add Checklist Item
|
||||
{/* Unit of Measurement */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Measurement</label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("unitOfMeasurement")}
|
||||
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.unitOfMeasurement && (
|
||||
<div className="text-danger">{errors.unitOfMeasurement.message}</div>
|
||||
)}
|
||||
</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>
|
||||
{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>
|
||||
{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>
|
||||
</div>
|
||||
|
||||
{/* Submit / Cancel */}
|
||||
<div className="col-12 text-center mt-3">
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3">
|
||||
Submit
|
||||
{isLoading ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={handleCLose}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -194,4 +245,4 @@ const EditActivity = ({activityData,onClose}) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EditActivity;
|
||||
export default UpdateActivity;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user