Do not close the modal after creating an activity.
This commit is contained in:
parent
ff16baf0e2
commit
a5e7766a2f
@ -80,7 +80,15 @@ const CreateActivity = ({ onClose }) => {
|
|||||||
cacheData("Activity", updatedData);
|
cacheData("Activity", updatedData);
|
||||||
showToast("Activity Successfully Added.", "success");
|
showToast("Activity Successfully Added.", "success");
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
handleClose();
|
reset({
|
||||||
|
activityName: "",
|
||||||
|
unitOfMeasurement: "",
|
||||||
|
checkList: [],
|
||||||
|
serviceId: "",
|
||||||
|
actitvityGroupId: "",
|
||||||
|
});
|
||||||
|
setSelectedService(null)
|
||||||
|
// handleClose();
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
showToast(error.message, "error");
|
showToast(error.message, "error");
|
||||||
@ -168,34 +176,6 @@ const CreateActivity = ({ onClose }) => {
|
|||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* <h6>Create Activity</h6> */}
|
{/* <h6>Create Activity</h6> */}
|
||||||
<div className="row">
|
<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>
|
|
||||||
|
|
||||||
{/* Services */}
|
{/* Services */}
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="serviceId">
|
<label className="form-label" htmlFor="serviceId">
|
||||||
@ -228,141 +208,175 @@ const CreateActivity = ({ onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actitvity Group */}
|
|
||||||
{selectedService && (
|
{selectedService && (
|
||||||
<div className="col-12 col-md-12">
|
<>
|
||||||
<label className="form-label" htmlFor="actitvityGroupId">
|
{/* Actitvity Name */}
|
||||||
Select Activity Group
|
<div className="col-6">
|
||||||
</label>
|
<label className="form-label">Activity</label>
|
||||||
<select
|
<input
|
||||||
id="actitvityGroupId"
|
type="text"
|
||||||
className="form-select form-select-sm"
|
{...register("activityName")}
|
||||||
{...register("actitvityGroupId")}
|
className={`form-control form-control-sm ${
|
||||||
onChange={handleActivityGroupsChange}
|
errors.activityName ? "is-invalid" : ""
|
||||||
>
|
}`}
|
||||||
<option value="" disabled>
|
/>
|
||||||
Select Activty Group
|
{errors.activityName && (
|
||||||
</option>
|
<p className="danger-text">{errors.activityName.message}</p>
|
||||||
{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>
|
</div>
|
||||||
{errors.actitvityGroupId && (
|
{/* Unit of Mesurement */}
|
||||||
<p className="danger-text">{errors.actitvityGroupId.message}</p>
|
<div className="col-6">
|
||||||
)}
|
<label className="form-label">Unit of Measurement</label>
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
{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-center mt-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 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-center mt-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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user