Removing create and Edit activity component.
This commit is contained in:
parent
b044b88c49
commit
2dbf08e330
@ -1,235 +0,0 @@
|
|||||||
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 { MasterRespository } from "../../repositories/MastersRepository";
|
|
||||||
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
|
||||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
|
||||||
import showToast from "../../services/toastService";
|
|
||||||
import { useCreateActivity } 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 CreateActivity = ({ activity = null, whichGroup = null, close }) => {
|
|
||||||
const maxDescriptionLength = 255;
|
|
||||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
|
||||||
|
|
||||||
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) => {
|
|
||||||
createActivity(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
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();
|
|
||||||
}, [reset, onClose]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
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">
|
|
||||||
<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-sm btn-label-secondary me-3"
|
|
||||||
onClick={handleClose}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn btn-sm btn-primary">
|
|
||||||
{isLoading ? "Please Wait" : "Submit"}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CreateActivity;
|
|
||||||
@ -1,231 +0,0 @@
|
|||||||
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";
|
|
||||||
import { 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: "Measurement is required" }),
|
|
||||||
checkList: z
|
|
||||||
.array(
|
|
||||||
z.object({
|
|
||||||
id: z.any().default(null),
|
|
||||||
description: z.string().min(1, { message: "Checklist item cannot be empty" }),
|
|
||||||
isMandatory: z.boolean().default(false),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const UpdateActivity = ({ activity = null, whichService = null, close }) => {
|
|
||||||
const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
control,
|
|
||||||
setValue,
|
|
||||||
reset,
|
|
||||||
setError,
|
|
||||||
clearErrors,
|
|
||||||
getValues,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(schema),
|
|
||||||
defaultValues: {
|
|
||||||
id: activity?.id,
|
|
||||||
activityName: activity?.activityName,
|
|
||||||
unitOfMeasurement: activity?.unitOfMeasurement,
|
|
||||||
checkList: activity?.checkLists || [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const { fields: checkListItems, append, remove } = useFieldArray({
|
|
||||||
control,
|
|
||||||
name: "checkList",
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (activity) {
|
|
||||||
reset({
|
|
||||||
id: activity.id,
|
|
||||||
activityName: activity.activityName,
|
|
||||||
unitOfMeasurement: activity.unitOfMeasurement,
|
|
||||||
checkList: activity.checkLists || [],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [activity, reset]);
|
|
||||||
|
|
||||||
const addChecklistItem = () => {
|
|
||||||
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 });
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeChecklistItem = (index) => {
|
|
||||||
remove(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChecklistChange = (index, value) => {
|
|
||||||
setValue(`checkList.${index}`, value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
const payload = { ...formData, id: activity.id };
|
|
||||||
updateActivity({ id: activity.id, payload });
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
||||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="row">
|
|
||||||
{/* Activity Name */}
|
|
||||||
<div className="col-md-6 text-start">
|
|
||||||
<Label className="form-label" required>Activity Name</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("activityName")}
|
|
||||||
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.activityName && (
|
|
||||||
<div className="text-danger">{errors.activityName.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Unit of Measurement */}
|
|
||||||
<div className="col-md-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 && (
|
|
||||||
<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}.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="Add Check"
|
|
||||||
data-bs-original-title="Add 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>
|
|
||||||
|
|
||||||
{/* Submit / Cancel */}
|
|
||||||
<div className="col-12 text-end mt-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn btn-sm btn-primary">
|
|
||||||
{isLoading ? "Please Wait" : "Submit"}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UpdateActivity;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user