Merge pull request 'Cancel button not closing All fields popup in masters' (#362) from Kartik_Bug#979 into Issues_Aug_2W
Reviewed-on: #362 Merged
This commit is contained in:
commit
d9456db01e
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect,useCallback } from "react";
|
import React, { useState, useEffect, useCallback } 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";
|
||||||
@ -7,7 +7,7 @@ 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";
|
||||||
import {useCreateActivity} from "../../hooks/masterHook/useMaster";
|
import { useCreateActivity } from "../../hooks/masterHook/useMaster";
|
||||||
|
|
||||||
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" }),
|
||||||
@ -24,74 +24,74 @@ const schema = z.object({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const CreateActivity = ({ onClose }) => {
|
const CreateActivity = ({ onClose }) => {
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
control,
|
control,
|
||||||
setValue,
|
setValue,
|
||||||
clearErrors,
|
clearErrors,
|
||||||
setError,
|
setError,
|
||||||
getValues,
|
getValues,
|
||||||
reset,
|
reset,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
activityName: "",
|
activityName: "",
|
||||||
unitOfMeasurement: "",
|
unitOfMeasurement: "",
|
||||||
checkList: [],
|
checkList: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
fields: checkListItems,
|
fields: checkListItems,
|
||||||
append,
|
append,
|
||||||
remove,
|
remove,
|
||||||
} = useFieldArray({
|
} = useFieldArray({
|
||||||
control,
|
control,
|
||||||
name: "checkList",
|
name: "checkList",
|
||||||
});
|
});
|
||||||
|
|
||||||
const addChecklistItem = useCallback(() => {
|
const addChecklistItem = useCallback(() => {
|
||||||
const values = getValues("checkList");
|
const values = getValues("checkList");
|
||||||
const lastIndex = checkListItems.length - 1;
|
const lastIndex = checkListItems.length - 1;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
checkListItems.length > 0 &&
|
checkListItems.length > 0 &&
|
||||||
(!values?.[lastIndex] || values[lastIndex].description.trim() === "")
|
(!values?.[lastIndex] || values[lastIndex].description.trim() === "")
|
||||||
) {
|
) {
|
||||||
setError(`checkList.${lastIndex}.description`, {
|
setError(`checkList.${lastIndex}.description`, {
|
||||||
type: "manual",
|
type: "manual",
|
||||||
message: "Please fill this checklist item before adding another.",
|
message: "Please fill this checklist item before adding another.",
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
clearErrors(`checkList.${lastIndex}.description`);
|
clearErrors(`checkList.${lastIndex}.description`);
|
||||||
append({ id: null, description: "", isMandatory: false });
|
append({ id: null, description: "", isMandatory: false });
|
||||||
}, [checkListItems, getValues, append, setError, clearErrors]);
|
}, [checkListItems, getValues, append, setError, clearErrors]);
|
||||||
|
|
||||||
const removeChecklistItem = useCallback((index) => {
|
const removeChecklistItem = useCallback((index) => {
|
||||||
remove(index);
|
remove(index);
|
||||||
}, [remove]);
|
}, [remove]);
|
||||||
|
|
||||||
const handleChecklistChange = useCallback((index, value) => {
|
const handleChecklistChange = useCallback((index, value) => {
|
||||||
setValue(`checkList.${index}`, value);
|
setValue(`checkList.${index}`, value);
|
||||||
}, [setValue]);
|
}, [setValue]);
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
createActivity(formData);
|
createActivity(formData);
|
||||||
};
|
};
|
||||||
// const onSubmit = (data) => {
|
// const onSubmit = (data) => {
|
||||||
// setIsLoading(true);
|
// setIsLoading(true);
|
||||||
|
|
||||||
// MasterRespository.createActivity(data)
|
// MasterRespository.createActivity(data)
|
||||||
// .then( ( resp ) =>
|
// .then( ( resp ) =>
|
||||||
// {
|
// {
|
||||||
|
|
||||||
// const cachedData = getCachedData("Activity");
|
// const cachedData = getCachedData("Activity");
|
||||||
// const updatedData = [ ...cachedData, resp?.data ];
|
// const updatedData = [ ...cachedData, resp?.data ];
|
||||||
// cacheData("Activity", updatedData);
|
// cacheData("Activity", updatedData);
|
||||||
@ -104,15 +104,15 @@ const onSubmit = (formData) => {
|
|||||||
// setIsLoading(false);
|
// setIsLoading(false);
|
||||||
// });
|
// });
|
||||||
// };
|
// };
|
||||||
const handleClose = useCallback(() => {
|
const handleClose = useCallback(() => {
|
||||||
reset();
|
reset();
|
||||||
onClose();
|
onClose();
|
||||||
}, [reset, onClose]);
|
}, [reset, onClose]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
@ -123,9 +123,8 @@ useEffect(() => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("activityName")}
|
{...register("activityName")}
|
||||||
className={`form-control form-control-sm ${
|
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
|
||||||
errors.activityName ? "is-invalid" : ""
|
}`}
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.activityName && (
|
{errors.activityName && (
|
||||||
<p className="danger-text">{errors.activityName.message}</p>
|
<p className="danger-text">{errors.activityName.message}</p>
|
||||||
@ -137,9 +136,8 @@ useEffect(() => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("unitOfMeasurement")}
|
{...register("unitOfMeasurement")}
|
||||||
className={`form-control form-control-sm ${
|
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
|
||||||
errors.unitOfMeasurement ? "is-invalid" : ""
|
}`}
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.unitOfMeasurement && (
|
{errors.unitOfMeasurement && (
|
||||||
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
||||||
@ -147,68 +145,68 @@ useEffect(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-12 text-start mt-1">
|
<div className="col-md-12 text-start mt-1">
|
||||||
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
|
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
|
||||||
{checkListItems.length > 0 && (
|
{checkListItems.length > 0 && (
|
||||||
<table className="table mt-1 border-0">
|
<table className="table mt-1 border-0">
|
||||||
<thead className="py-0 my-0 table-border-top-0">
|
<thead className="py-0 my-0 table-border-top-0">
|
||||||
<tr className="py-1">
|
<tr className="py-1">
|
||||||
<th colSpan={2} className="py-1">
|
<th colSpan={2} className="py-1">
|
||||||
<small>Name</small>
|
<small>Name</small>
|
||||||
</th>
|
</th>
|
||||||
<th colSpan={2} className="py-1 text-center">
|
<th colSpan={2} className="py-1 text-center">
|
||||||
<small>Is Mandatory</small>
|
<small>Is Mandatory</small>
|
||||||
</th>
|
</th>
|
||||||
<th className="text-center py-1">Action</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>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody className="table-border-bottom-0 ">
|
||||||
</table>
|
{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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -216,8 +214,8 @@ useEffect(() => {
|
|||||||
onClick={addChecklistItem}
|
onClick={addChecklistItem}
|
||||||
>
|
>
|
||||||
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
|
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
|
||||||
title="Add Check"
|
title="Add Check"
|
||||||
data-bs-original-title="Add check" ></i>
|
data-bs-original-title="Add check" ></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -226,12 +224,13 @@ useEffect(() => {
|
|||||||
{isLoading ? "Please Wait" : "Submit"}
|
{isLoading ? "Please Wait" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="button" // ✅ change to button
|
||||||
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>
|
||||||
|
@ -1,43 +1,43 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm } from 'react-hook-form';
|
import { 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';
|
||||||
import {useCreateContactCategory} from '../../hooks/masterHook/useMaster';
|
import { useCreateContactCategory } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Category name is required" }),
|
name: z.string().min(1, { message: "Category name is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const CreateContactCategory = ({onClose}) => {
|
const CreateContactCategory = ({ onClose }) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
reset,
|
reset,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: "",
|
name: "",
|
||||||
description: "",
|
description: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(0);
|
const [descriptionLength, setDescriptionLength] = useState(0);
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
|
const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
const onSubmit = (payload) => {
|
||||||
createContactCategory(payload);
|
createContactCategory(payload);
|
||||||
};
|
};
|
||||||
// const onSubmit = (data) => {
|
// const onSubmit = (data) => {
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// MasterRespository.createContactCategory(data).then((resp)=>{
|
// MasterRespository.createContactCategory(data).then((resp)=>{
|
||||||
@ -54,27 +54,27 @@ const onSubmit = (payload) => {
|
|||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// })
|
// })
|
||||||
// };
|
// };
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
reset({ name: "", description: "" });
|
reset({ name: "", description: "" });
|
||||||
setDescriptionLength(0);
|
setDescriptionLength(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => resetForm();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => resetForm();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Category Name</label>
|
<label className="form-label">Category Name</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -87,28 +87,31 @@ useEffect(() => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button" // ✅ not reset
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // clear inputs
|
||||||
|
onClose?.(); // close modal from parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,42 +1,42 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm } from 'react-hook-form';
|
import { 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';
|
||||||
import {useCreateContactTag} from '../../hooks/masterHook/useMaster';
|
import { useCreateContactTag } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Tag name is required" }),
|
name: z.string().min(1, { message: "Tag name is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const CreateContactTag = ({onClose}) => {
|
const CreateContactTag = ({ onClose }) => {
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
reset,
|
reset,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: "",
|
name: "",
|
||||||
description: "",
|
description: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(0);
|
const [descriptionLength, setDescriptionLength] = useState(0);
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
|
const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
const onSubmit = (payload) => {
|
||||||
createContactTag(payload);
|
createContactTag(payload);
|
||||||
};
|
};
|
||||||
// const onSubmit = (data) => {
|
// const onSubmit = (data) => {
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// MasterRespository.createContactTag(data).then((resp)=>{
|
// MasterRespository.createContactTag(data).then((resp)=>{
|
||||||
@ -54,27 +54,27 @@ const onSubmit = (payload) => {
|
|||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// })
|
// })
|
||||||
// };
|
// };
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
reset({ name: "", description: "" });
|
reset({ name: "", description: "" });
|
||||||
setDescriptionLength(0);
|
setDescriptionLength(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => resetForm();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => resetForm();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Tag Name</label>
|
<label className="form-label">Tag Name</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -87,28 +87,31 @@ useEffect(() => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button" // ✅ not reset
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // clear inputs
|
||||||
|
onClose?.(); // close modal from parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,21 +1,21 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm } from 'react-hook-form';
|
import { 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';
|
||||||
import {useCreateJobRole} from '../../hooks/masterHook/useMaster';
|
import { useCreateJobRole } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
role: z.string().min(1, { message: "Role is required" }),
|
role: z.string().min(1, { message: "Role is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const CreateJobRole = ({onClose}) => {
|
const CreateJobRole = ({ onClose }) => {
|
||||||
|
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
const [descriptionLength, setDescriptionLength] = useState(0);
|
const [descriptionLength, setDescriptionLength] = useState(0);
|
||||||
@ -39,34 +39,34 @@ const CreateJobRole = ({onClose}) => {
|
|||||||
setDescriptionLength(0);
|
setDescriptionLength(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const { mutate: createJobRole, isPending:isLoading } = useCreateJobRole(() => {
|
const { mutate: createJobRole, isPending: isLoading } = useCreateJobRole(() => {
|
||||||
onClose?.();
|
onClose?.();
|
||||||
} );
|
});
|
||||||
|
|
||||||
|
|
||||||
// const onSubmit = (data) => {
|
// const onSubmit = (data) => {
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// const result = {
|
// const result = {
|
||||||
// name: data.role,
|
// name: data.role,
|
||||||
// description: data.description,
|
// description: data.description,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// 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()
|
// MasterRespository.createJobRole(result).then((resp)=>{
|
||||||
// }).catch((error)=>{
|
// setIsLoading(false)
|
||||||
// showToast(error.message, "error");
|
// resetForm()
|
||||||
// setIsLoading(false)
|
// 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 onSubmit = (data) => {
|
const onSubmit = (data) => {
|
||||||
const payload = {
|
const payload = {
|
||||||
name: data.role,
|
name: data.role,
|
||||||
@ -87,20 +87,20 @@ const CreateJobRole = ({onClose}) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* <div className="col-12 col-md-12">
|
{/* <div className="col-12 col-md-12">
|
||||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
|
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Role</label>
|
<label className="form-label">Role</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("role")}
|
{...register("role")}
|
||||||
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.role && <p className="text-danger">{errors.role.message}</p>}
|
{errors.role && <p className="text-danger">{errors.role.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -113,28 +113,31 @@ const CreateJobRole = ({onClose}) => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button" // ✅ change from reset → button
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // optional: clears form
|
||||||
|
onClose?.(); // ✅ close modal via parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -233,13 +233,13 @@ const CreateRole = ({ modalType, onClose }) => {
|
|||||||
{isLoading ? "Please Wait..." : "Submit"}
|
{isLoading ? "Please Wait..." : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary"
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={onClose}
|
||||||
aria-label="Close"
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
|
@ -1,96 +1,96 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm } from 'react-hook-form';
|
import { 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';
|
||||||
import {useCreateWorkCategory} from '../../hooks/masterHook/useMaster';
|
import { useCreateWorkCategory } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Category name is required" }),
|
name: z.string().min(1, { message: "Category name is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const CreateWorkCategory = ({onClose}) => {
|
const CreateWorkCategory = ({ onClose }) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
reset,
|
reset,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: "",
|
name: "",
|
||||||
description: "",
|
description: "",
|
||||||
},
|
},
|
||||||
});
|
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(0);
|
|
||||||
const maxDescriptionLength = 255;
|
|
||||||
|
|
||||||
const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
|
|
||||||
resetForm();
|
|
||||||
onClose?.();
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
|
||||||
createWorkCategory(payload)
|
|
||||||
};
|
|
||||||
|
|
||||||
// const onSubmit = (data) => {
|
|
||||||
// setIsLoading(true)
|
|
||||||
|
|
||||||
|
|
||||||
// MasterRespository.createWorkCategory(data).then((resp)=>{
|
|
||||||
// setIsLoading(false)
|
|
||||||
// resetForm()
|
|
||||||
// const cachedData = getCachedData("Work Category");
|
|
||||||
// const updatedData = [...cachedData, resp?.data];
|
|
||||||
// cacheData("Work Category", updatedData);
|
|
||||||
// showToast("Work Category Added successfully.", "success");
|
|
||||||
|
|
||||||
// onClose()
|
|
||||||
// }).catch((error)=>{
|
|
||||||
// showToast(error?.response?.data?.message, "error");
|
|
||||||
// setIsLoading(false)
|
|
||||||
// })
|
|
||||||
|
|
||||||
|
|
||||||
// };
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
reset({
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
});
|
});
|
||||||
setDescriptionLength(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
const [descriptionLength, setDescriptionLength] = useState(0);
|
||||||
return () => resetForm();
|
const maxDescriptionLength = 255;
|
||||||
}, []);
|
|
||||||
|
const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
|
||||||
|
resetForm();
|
||||||
|
onClose?.();
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (payload) => {
|
||||||
|
createWorkCategory(payload)
|
||||||
|
};
|
||||||
|
|
||||||
|
// const onSubmit = (data) => {
|
||||||
|
// setIsLoading(true)
|
||||||
|
|
||||||
|
|
||||||
|
// MasterRespository.createWorkCategory(data).then((resp)=>{
|
||||||
|
// setIsLoading(false)
|
||||||
|
// resetForm()
|
||||||
|
// const cachedData = getCachedData("Work Category");
|
||||||
|
// const updatedData = [...cachedData, resp?.data];
|
||||||
|
// cacheData("Work Category", updatedData);
|
||||||
|
// showToast("Work Category Added successfully.", "success");
|
||||||
|
|
||||||
|
// onClose()
|
||||||
|
// }).catch((error)=>{
|
||||||
|
// showToast(error?.response?.data?.message, "error");
|
||||||
|
// setIsLoading(false)
|
||||||
|
// })
|
||||||
|
|
||||||
|
|
||||||
|
// };
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
reset({
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
});
|
||||||
|
setDescriptionLength(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => resetForm();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{/* <div className="col-12 col-md-12">
|
||||||
|
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>
|
<label className="form-label">Category Name</label>
|
||||||
|
<input type="text"
|
||||||
|
{...register("name")}
|
||||||
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
|
/>
|
||||||
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 col-md-12">
|
||||||
<div className="col-12 col-md-12">
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<label className="form-label">Category Name</label>
|
|
||||||
<input type="text"
|
|
||||||
{...register("name")}
|
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
|
||||||
/>
|
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -103,28 +103,30 @@ useEffect(() => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button" // ✅ not reset
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // clear inputs
|
||||||
|
onClose?.(); // close modal from parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,13 +34,15 @@ const DeleteMaster = ({ master, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="button" // ✅ not reset
|
||||||
className="btn btn-label-secondary"
|
className="btn btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
onClose?.(); // properly close modal
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -241,7 +241,7 @@ useEffect(() => {
|
|||||||
{isLoading ? "Please Wait" : "Submit"}
|
{isLoading ? "Please Wait" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button" // ✅ change to button
|
||||||
className="btn btn-sm btn-label-secondary"
|
className="btn btn-sm btn-label-secondary"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
>
|
>
|
||||||
|
@ -1,49 +1,49 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm } from 'react-hook-form';
|
import { 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';
|
||||||
import {useUpdateContactCategory} from '../../hooks/masterHook/useMaster';
|
import { useUpdateContactCategory } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Category name is required" }),
|
name: z.string().min(1, { message: "Category name is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const EditContactCategory= ({data,onClose}) => {
|
const EditContactCategory = ({ data, onClose }) => {
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
reset,
|
reset,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: data?.name || "",
|
name: data?.name || "",
|
||||||
description: data?.description || "",
|
description: data?.description || "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
|
const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
const payload = {
|
const payload = {
|
||||||
id: data?.id,
|
id: data?.id,
|
||||||
name: formData.name,
|
name: formData.name,
|
||||||
description: formData.description,
|
description: formData.description,
|
||||||
|
};
|
||||||
|
|
||||||
|
updateContactCategory({ id: data?.id, payload });
|
||||||
};
|
};
|
||||||
|
// const onSubmit = (formdata) => {
|
||||||
updateContactCategory({id:data?.id,payload});
|
|
||||||
};
|
|
||||||
// const onSubmit = (formdata) => {
|
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// const result = {
|
// const result = {
|
||||||
// id:data?.id,
|
// id:data?.id,
|
||||||
@ -51,8 +51,8 @@ const onSubmit = (formData) => {
|
|||||||
// description: formdata.description,
|
// description: formdata.description,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// MasterRespository.updateContactCategory(data?.id,result).then((resp)=>{
|
// MasterRespository.updateContactCategory(data?.id,result).then((resp)=>{
|
||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// showToast("Contact Category Updated successfully.", "success");
|
// showToast("Contact Category Updated successfully.", "success");
|
||||||
@ -70,30 +70,30 @@ const onSubmit = (formData) => {
|
|||||||
// showToast(error?.response?.data?.message, "error")
|
// showToast(error?.response?.data?.message, "error")
|
||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// })
|
// })
|
||||||
|
|
||||||
// };
|
// };
|
||||||
|
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
reset({ name: "", description: "" });
|
reset({ name: "", description: "" });
|
||||||
setDescriptionLength(0);
|
setDescriptionLength(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => resetForm();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => resetForm();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Category Name</label>
|
<label className="form-label">Category Name</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -106,28 +106,30 @@ useEffect(() => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button"
|
type="button" // ✅ not reset
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // clear inputs
|
||||||
|
onClose?.(); // close modal from parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,49 +1,49 @@
|
|||||||
import React,{useState,useEffect} from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import {useForm} from 'react-hook-form';
|
import { 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';
|
||||||
import {useUpdateContactTag} from '../../hooks/masterHook/useMaster';
|
import { useUpdateContactTag } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Tag name is required" }),
|
name: z.string().min(1, { message: "Tag name is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const EditContactTag= ({data,onClose}) => {
|
const EditContactTag = ({ data, onClose }) => {
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
reset
|
reset
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
name: data?.name || "",
|
name: data?.name || "",
|
||||||
description: data?.description || "",
|
description: data?.description || "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
|
const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
const payload = {
|
const payload = {
|
||||||
id: data?.id,
|
id: data?.id,
|
||||||
name: formData.name,
|
name: formData.name,
|
||||||
description: formData.description,
|
description: formData.description,
|
||||||
};
|
};
|
||||||
debugger
|
debugger
|
||||||
updateContactTag({ id: data?.id, payload} );
|
updateContactTag({ id: data?.id, payload });
|
||||||
}
|
}
|
||||||
// const onSubmit = (formdata) => {
|
// const onSubmit = (formdata) => {
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// const result = {
|
// const result = {
|
||||||
// id:data?.id,
|
// id:data?.id,
|
||||||
@ -51,8 +51,8 @@ const onSubmit = (formData) => {
|
|||||||
// description: formdata.description,
|
// description: formdata.description,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
|
// MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
|
||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// showToast("Contact Tag Updated successfully.", "success");
|
// showToast("Contact Tag Updated successfully.", "success");
|
||||||
@ -70,30 +70,30 @@ const onSubmit = (formData) => {
|
|||||||
// showToast(error?.response?.data?.message, "error")
|
// showToast(error?.response?.data?.message, "error")
|
||||||
// setIsLoading(false)
|
// setIsLoading(false)
|
||||||
// })
|
// })
|
||||||
|
|
||||||
// };
|
// };
|
||||||
|
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
reset({ name: "", description: "" });
|
reset({ name: "", description: "" });
|
||||||
setDescriptionLength(0);
|
setDescriptionLength(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => resetForm();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => resetForm();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Tag Name</label>
|
<label className="form-label">Tag Name</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -106,28 +106,30 @@ useEffect(() => {
|
|||||||
<div className="text-end small text-muted">
|
<div className="text-end small text-muted">
|
||||||
{maxDescriptionLength - descriptionLength} characters left
|
{maxDescriptionLength - descriptionLength} characters left
|
||||||
</div>
|
</div>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button"
|
type="button" // ✅ not reset
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={() => {
|
||||||
aria-label="Close"
|
resetForm(); // clear inputs
|
||||||
|
onClose?.(); // close modal from parent
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,24 +1,24 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm ,Controller} from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
import { set, z } from 'zod';
|
import { set, 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 { cacheData,getCachedData } from '../../slices/apiDataManager';
|
import { cacheData, getCachedData } from '../../slices/apiDataManager';
|
||||||
import showToast from '../../services/toastService';
|
import showToast from '../../services/toastService';
|
||||||
import {useUpdateJobRole} from '../../hooks/masterHook/useMaster';
|
import { useUpdateJobRole } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
role: z.string().min(1, { message: "Role is required" }),
|
role: z.string().min(1, { message: "Role is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const EditJobRole = ({data,onClose}) => {
|
const EditJobRole = ({ data, onClose }) => {
|
||||||
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
||||||
const maxDescriptionLength = 255;
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -35,38 +35,38 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { mutate: updateJobRole, isPendin:isLoading } = useUpdateJobRole(() => {
|
const { mutate: updateJobRole, isPendin: isLoading } = useUpdateJobRole(() => {
|
||||||
onClose?.();
|
onClose?.();
|
||||||
});
|
});
|
||||||
// const onSubmit = (formdata) => {
|
// const onSubmit = (formdata) => {
|
||||||
// setIsLoading(true)
|
// setIsLoading(true)
|
||||||
// const result = {
|
// const result = {
|
||||||
// id:data?.id,
|
// id:data?.id,
|
||||||
// name: formdata?.role,
|
// name: formdata?.role,
|
||||||
// description: formdata.description,
|
// description: formdata.description,
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
|
|
||||||
// setIsLoading(false)
|
|
||||||
// showToast("JobRole Update successfully.", "success");
|
|
||||||
// const cachedData = getCachedData("Job Role");
|
|
||||||
// if (cachedData) {
|
|
||||||
|
|
||||||
// const updatedData = cachedData.map((role) =>
|
|
||||||
// role.id === data?.id ? { ...role, ...resp.data } : role
|
|
||||||
// );
|
|
||||||
// cacheData("Job Role", updatedData);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// onClose()
|
// MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
|
||||||
// }).catch((error)=>{
|
// setIsLoading(false)
|
||||||
// showToast(error.message, "error")
|
// showToast("JobRole Update successfully.", "success");
|
||||||
// setIsLoading(false)
|
// const cachedData = getCachedData("Job Role");
|
||||||
// })
|
// if (cachedData) {
|
||||||
|
|
||||||
// };
|
// const updatedData = cachedData.map((role) =>
|
||||||
|
// role.id === data?.id ? { ...role, ...resp.data } : role
|
||||||
|
// );
|
||||||
|
// cacheData("Job Role", updatedData);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onClose()
|
||||||
|
// }).catch((error)=>{
|
||||||
|
// showToast(error.message, "error")
|
||||||
|
// setIsLoading(false)
|
||||||
|
// })
|
||||||
|
|
||||||
|
// };
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
const onSubmit = (formData) => {
|
||||||
updateJobRole({
|
updateJobRole({
|
||||||
@ -93,22 +93,22 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
|
|||||||
});
|
});
|
||||||
return () => sub.unsubscribe();
|
return () => sub.unsubscribe();
|
||||||
}, [watch]);
|
}, [watch]);
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* <div className="col-12 col-md-12">
|
{/* <div className="col-12 col-md-12">
|
||||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
|
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Role</label>
|
<label className="form-label">Role</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("role")}
|
{...register("role")}
|
||||||
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.role ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.role && <p className="text-danger">{errors.role.message}</p>}
|
{errors.role && <p className="text-danger">{errors.role.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -125,25 +125,25 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
|
|||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary"
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={onClose} // 👈 This will now close the popup
|
||||||
aria-label="Close"
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -190,87 +190,87 @@ const EditMaster = ({ master, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
{/* Scrollable Container with Border */}
|
{/* Scrollable Container with Border */}
|
||||||
<div
|
<div
|
||||||
className="border rounded p-3"
|
className="border rounded p-3"
|
||||||
style={{
|
style={{
|
||||||
maxHeight: "350px",
|
maxHeight: "350px",
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
overflowX: "hidden", // Prevent horizontal scrollbar
|
overflowX: "hidden", // Prevent horizontal scrollbar
|
||||||
paddingRight: "10px",
|
paddingRight: "10px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{masterFeatures.map((feature, featureIndex) => (
|
{masterFeatures.map((feature, featureIndex) => (
|
||||||
<div key={feature.id} className="mb-3">
|
<div key={feature.id} className="mb-3">
|
||||||
{/* Feature Group Title */}
|
{/* Feature Group Title */}
|
||||||
<div className="fw-semibold mb-2">{feature.name}</div>
|
<div className="fw-semibold mb-2">{feature.name}</div>
|
||||||
|
|
||||||
{/* Permissions Grid */}
|
{/* Permissions Grid */}
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{feature.featurePermissions.map((perm, permIndex) => {
|
{feature.featurePermissions.map((perm, permIndex) => {
|
||||||
const refIndex = featureIndex * 10 + permIndex;
|
const refIndex = featureIndex * 10 + permIndex;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={perm.id}
|
key={perm.id}
|
||||||
className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
|
className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="form-check-label d-flex align-items-center"
|
|
||||||
htmlFor={perm.id}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input me-2"
|
|
||||||
id={perm.id}
|
|
||||||
{...register(`permissions.${perm.id}`, {
|
|
||||||
value: initialPermissions[perm.id] || false,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
{perm.name}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{/* Info Icon */}
|
|
||||||
<div style={{ display: "flex", alignItems: "center" }}>
|
|
||||||
<div
|
|
||||||
ref={(el) => (popoverRefs.current[refIndex] = el)}
|
|
||||||
tabIndex="0"
|
|
||||||
className="d-flex align-items-center justify-content-center"
|
|
||||||
data-bs-toggle="popover"
|
|
||||||
data-bs-trigger="focus"
|
|
||||||
data-bs-placement="right"
|
|
||||||
data-bs-html="true"
|
|
||||||
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
|
||||||
>
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="13"
|
|
||||||
height="13"
|
|
||||||
fill="currentColor"
|
|
||||||
className="bi bi-info-circle"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
>
|
||||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
<label
|
||||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
className="form-check-label d-flex align-items-center"
|
||||||
</svg>
|
htmlFor={perm.id}
|
||||||
</div>
|
>
|
||||||
</div>
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input me-2"
|
||||||
|
id={perm.id}
|
||||||
|
{...register(`permissions.${perm.id}`, {
|
||||||
|
value: initialPermissions[perm.id] || false,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
{perm.name}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* Info Icon */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center" }}>
|
||||||
|
<div
|
||||||
|
ref={(el) => (popoverRefs.current[refIndex] = el)}
|
||||||
|
tabIndex="0"
|
||||||
|
className="d-flex align-items-center justify-content-center"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-trigger="focus"
|
||||||
|
data-bs-placement="right"
|
||||||
|
data-bs-html="true"
|
||||||
|
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
||||||
|
>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="13"
|
||||||
|
height="13"
|
||||||
|
fill="currentColor"
|
||||||
|
className="bi bi-info-circle"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||||
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
<hr className="my-2" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr className="my-2" />
|
{/* Error Display */}
|
||||||
|
{errors.permissions && (
|
||||||
|
<p className="text-danger">{errors.permissions.message}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Error Display */}
|
|
||||||
{errors.permissions && (
|
|
||||||
<p className="text-danger">{errors.permissions.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -280,11 +280,11 @@ const EditMaster = ({ master, onClose }) => {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary"
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={onClose}
|
||||||
aria-label="Close"
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
@ -1,103 +1,103 @@
|
|||||||
import React, { useEffect,useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useForm ,Controller} from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
import { set, z } from 'zod';
|
import { set, 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 { cacheData,getCachedData } from '../../slices/apiDataManager';
|
import { cacheData, getCachedData } from '../../slices/apiDataManager';
|
||||||
import showToast from '../../services/toastService';
|
import showToast from '../../services/toastService';
|
||||||
import {useUpdateWorkCategory} from '../../hooks/masterHook/useMaster';
|
import { useUpdateWorkCategory } from '../../hooks/masterHook/useMaster';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(1, { message: "Work Category is required" }),
|
name: z.string().min(1, { message: "Work Category is required" }),
|
||||||
description: z.string().min(1, { message: "Description is required" })
|
description: z.string().min(1, { message: "Description is required" })
|
||||||
.max(255, { message: "Description cannot exceed 255 characters" }),
|
.max(255, { message: "Description cannot exceed 255 characters" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const EditWorkCategory = ({data,onClose}) => {
|
const EditWorkCategory = ({ data, onClose }) => {
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
reset,
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(schema),
|
|
||||||
defaultValues: {
|
|
||||||
name: data?.name || "",
|
|
||||||
description: data?.description || "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
const {
|
||||||
const maxDescriptionLength = 255;
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
reset,
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: {
|
||||||
|
name: data?.name || "",
|
||||||
|
description: data?.description || "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
|
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
|
||||||
|
const maxDescriptionLength = 255;
|
||||||
|
|
||||||
const onSubmit = (formdata) => {
|
const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
|
||||||
const payload = {
|
|
||||||
id: data?.id,
|
const onSubmit = (formdata) => {
|
||||||
name: formdata.name,
|
const payload = {
|
||||||
description: formdata.description,
|
id: data?.id,
|
||||||
|
name: formdata.name,
|
||||||
|
description: formdata.description,
|
||||||
|
};
|
||||||
|
|
||||||
|
updateWorkCategory({ id: data?.id, payload });
|
||||||
};
|
};
|
||||||
|
|
||||||
updateWorkCategory({id:data?.id,payload});
|
// const onSubmit = (formdata) => {
|
||||||
};
|
// setIsLoading(true)
|
||||||
|
// const result = {
|
||||||
// const onSubmit = (formdata) => {
|
// id:data?.id,
|
||||||
// setIsLoading(true)
|
// name: formdata?.name,
|
||||||
// const result = {
|
// description: formdata.description,
|
||||||
// id:data?.id,
|
// };
|
||||||
// name: formdata?.name,
|
|
||||||
// description: formdata.description,
|
|
||||||
// };
|
|
||||||
|
// MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
|
||||||
|
// setIsLoading(false)
|
||||||
|
// showToast("Work Category Update successfully.", "success");
|
||||||
// MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
|
// const cachedData = getCachedData("Work Category");
|
||||||
// setIsLoading(false)
|
// if (cachedData) {
|
||||||
// showToast("Work Category Update successfully.", "success");
|
|
||||||
// const cachedData = getCachedData("Work Category");
|
// const updatedData = cachedData.map((category) =>
|
||||||
// if (cachedData) {
|
// category.id === data?.id ? { ...category, ...resp.data } : category
|
||||||
|
// );
|
||||||
// const updatedData = cachedData.map((category) =>
|
// cacheData("Work Category", updatedData);
|
||||||
// category.id === data?.id ? { ...category, ...resp.data } : category
|
// }
|
||||||
// );
|
|
||||||
// cacheData("Work Category", updatedData);
|
// onClose()
|
||||||
// }
|
// }).catch((error)=>{
|
||||||
|
// showToast(error?.response?.data?.message, "error")
|
||||||
// onClose()
|
// setIsLoading(false)
|
||||||
// }).catch((error)=>{
|
// })
|
||||||
// showToast(error?.response?.data?.message, "error")
|
|
||||||
// setIsLoading(false)
|
// };
|
||||||
// })
|
useEffect(() => {
|
||||||
|
reset({
|
||||||
// };
|
name: data?.name || "",
|
||||||
useEffect(() => {
|
description: data?.description || "",
|
||||||
reset({
|
});
|
||||||
name: data?.name || "",
|
setDescriptionLength(data?.description?.length || 0);
|
||||||
description: data?.description || "",
|
}, [data, reset]);
|
||||||
});
|
|
||||||
setDescriptionLength(data?.description?.length || 0);
|
|
||||||
}, [data, reset]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (<>
|
return (<>
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label">Category Name</label>
|
<label className="form-label">Category Name</label>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
|
||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12">
|
<div className="col-12 col-md-12">
|
||||||
<label className="form-label" htmlFor="description">Description</label>
|
<label className="form-label" htmlFor="description">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
@ -114,25 +114,25 @@ useEffect(() => {
|
|||||||
<p className="text-danger">{errors.description.message}</p>
|
<p className="text-danger">{errors.description.message}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
<div className="col-12 text-center">
|
||||||
<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="button"
|
||||||
className="btn btn-sm btn-label-secondary"
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={onClose}
|
||||||
aria-label="Close"
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,31 +17,31 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
|
|||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(ExpnseSchema),
|
resolver: zodResolver(ExpnseSchema),
|
||||||
defaultValues: { name: "", description: "" },
|
defaultValues: { name: "", description: "" },
|
||||||
});
|
});
|
||||||
|
|
||||||
const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
|
const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
|
||||||
onClose?.()
|
onClose?.()
|
||||||
);
|
);
|
||||||
const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.())
|
const { mutate: UpdatePaymentMode, isPending: Updating } = useUpdatePaymentMode(() => onClose?.())
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
const onSubmit = (payload) => {
|
||||||
if(data){
|
if (data) {
|
||||||
UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
|
UpdatePaymentMode({ id: data.id, payload: { ...payload, id: data.id } })
|
||||||
}else(
|
} else (
|
||||||
CreatePaymentMode(payload)
|
CreatePaymentMode(payload)
|
||||||
)
|
)
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
if(data){
|
if (data) {
|
||||||
reset({
|
reset({
|
||||||
name:data.name ?? "",
|
name: data.name ?? "",
|
||||||
description:data.description ?? ""
|
description: data.description ?? ""
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},[data])
|
}, [data])
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -76,17 +76,17 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
|
|||||||
className="btn btn-sm btn-primary me-3"
|
className="btn btn-sm btn-primary me-3"
|
||||||
disabled={isPending || Updating}
|
disabled={isPending || Updating}
|
||||||
>
|
>
|
||||||
{isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
|
{isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary "
|
className="btn btn-sm btn-label-secondary"
|
||||||
data-bs-dismiss="modal"
|
onClick={onClose} // ✅ call onClose here
|
||||||
aria-label="Close"
|
|
||||||
disabled={isPending || Updating}
|
disabled={isPending || Updating}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
@ -122,14 +122,17 @@ const MasterPage = () => {
|
|||||||
onChange={(e) => dispatch(changeMaster(e.target.value))}
|
onChange={(e) => dispatch(changeMaster(e.target.value))}
|
||||||
name="DataTables_Table_0_length"
|
name="DataTables_Table_0_length"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
className="form-select form-select-sm"
|
className="form-select py-1 px-2"
|
||||||
|
style={{ fontSize: "0.875rem", height: "32px", width: "150px" }}
|
||||||
value={selectedMaster}
|
value={selectedMaster}
|
||||||
>
|
>
|
||||||
{isLoading && (<option value={null}>Loading...</option>)}
|
{isLoading && <option value="">Loading...</option>}
|
||||||
{(!isLoading && data) && data?.map((item) => (
|
{!isLoading &&
|
||||||
|
data?.map((item) => (
|
||||||
<option key={item.id} value={item.name}>{item.name}</option>
|
<option key={item.id} value={item.name}>
|
||||||
))}
|
{item.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user