Changes in UI for Masters component.

This commit is contained in:
Kartik Sharma 2025-09-05 12:00:26 +05:30
parent 8f8cbf27ef
commit e39355c6fd
14 changed files with 63 additions and 73 deletions

View File

@ -223,11 +223,14 @@ const CreateActivity = ({ onClose }) => {
<div className="col-12 text-end mt-3">
<button
type="button" // change to button
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={handleClose}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait" : "Submit"}
</button>
</div>
</div>

View File

@ -6,7 +6,7 @@ import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService';
import {useCreateContactCategory} from '../../hooks/masterHook/useMaster';
import { useCreateContactCategory } from '../../hooks/masterHook/useMaster';
import Label from '../common/Label';
@ -66,16 +66,16 @@ const CreateContactCategory = ({ onClose }) => {
return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="form-label">Category Name</label>
<div className="col-12 col-md-12 text-start">
<Label className="form-label" required>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>
<div className="col-12 col-md-12 text-start">
<Label className="form-label" htmlFor="description" required>Description</Label>
<textarea
rows="3"
{...register("description")}
@ -93,13 +93,11 @@ const CreateContactCategory = ({ onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // not reset
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // clear inputs
onClose?.(); // close modal from parent
@ -107,7 +105,9 @@ const CreateContactCategory = ({ onClose }) => {
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>
</form>

View File

@ -93,13 +93,11 @@ const CreateContactTag = ({ onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // not reset
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // clear inputs
onClose?.(); // close modal from parent
@ -107,6 +105,9 @@ const CreateContactTag = ({ onClose }) => {
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>

View File

@ -119,13 +119,11 @@ const CreateJobRole = ({ onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // change from reset button
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // optional: clears form
onClose?.(); // close modal via parent
@ -133,6 +131,9 @@ const CreateJobRole = ({ onClose }) => {
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>

View File

@ -229,17 +229,18 @@ const CreateRole = ({ modalType, onClose }) => {
{masterFeatures && (
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>
)}

View File

@ -109,13 +109,11 @@ const CreateWorkCategory = ({ onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // not reset
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // clear inputs
onClose?.(); // close modal from parent

View File

@ -240,7 +240,7 @@ const UpdateActivity = ({ activityData, onClose }) => {
<div className="col-12 text-end mt-3">
<button
type="button" // change to button
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose}
>
Cancel

View File

@ -112,13 +112,11 @@ const EditContactCategory = ({ data, onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // not reset
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // clear inputs
onClose?.(); // close modal from parent

View File

@ -112,13 +112,11 @@ const EditContactTag = ({ data, onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button" // not reset
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={() => {
resetForm(); // clear inputs
onClose?.(); // close modal from parent

View File

@ -128,13 +128,11 @@ const EditJobRole = ({ data, onClose }) => {
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-end mt-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose} // 👈 This will now close the popup
>
Cancel

View File

@ -276,14 +276,17 @@ const EditMaster = ({ master, onClose }) => {
<div className="col-12 text-end">
<div className="col-12 text-end mt-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
data-bs-dismiss="modal"
aria-label="Close"
onClick={onClose}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary"> {isLoading ? "Please Wait..." : "Submit"}</button>
</div>

View File

@ -116,17 +116,18 @@ const EditWorkCategory = ({ data, onClose }) => {
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
</button>
<div className="col-12 text-center mt-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary">
{isLoading ? "Please Wait..." : "Submit"}
</button>
</div>

View File

@ -71,35 +71,23 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
)}
</div>
<div className="col-12 text-center">
<button
type="submit"
className="btn btn-sm btn-primary me-3"
disabled={isPending || Updating}
>
{isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
</button>
<div className="col-12 text-end">
<div className="col-12 text-end mt-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
onClick={onClose} // call onClose here
type="reset"
className="btn btn-sm btn-label-secondary me-3"
data-bs-dismiss="modal"
aria-label="Close"
onClick={onClose} // call onClose here
disabled={isPending || Updating}
>
Cancel
</button>
<button
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending || Updating}
>
{isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
{isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
</button>
</div>
</form>
);

View File

@ -123,7 +123,7 @@ const MasterPage = () => {
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select py-1 px-2"
style={{ fontSize: "0.875rem", height: "32px", width: "150px" }}
style={{ fontSize: "0.875rem", height: "32px", width: "170px" }}
value={selectedMaster}
>
{isLoading && <option value="">Loading...</option>}