added small ui changed like table b-padding, button size and fixd delete activity and group

This commit is contained in:
pramod.mahajan 2025-09-24 12:49:00 +05:30
parent 52e12426af
commit 4e315aafcf
13 changed files with 106 additions and 83 deletions

View File

@ -248,7 +248,7 @@ const AssignOrg = ({ setStep }) => {
? "Please wait..."
: flowType === "default"
? "Assign Organization"
: "Add"}
: "Assign Project"}
</button>
</div>
</form>

View File

@ -84,10 +84,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
height={50}
/>
</div>
<div
className="d-flex flex-column p-0 m-0 cursor-pointer"
onClick={() => onOpen({ startStep: 3, orgData: org })}
>
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
<span className="fs-6 fw-semibold">{org.name}</span>
<div className="d-flex gap-2">
<small
@ -102,6 +99,16 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
<small className="text-small fw-semibold">Address:</small>
<div className="d-flex text-wrap">{org.address}</div>
</div>
<div className="m-0 p-0">
{" "}
<button
type="submit"
className="btn btn-sm btn-primary"
onClick={() => onOpen({ startStep: 3, orgData: org })}
>
Select
</button>
</div>
</div>
</div>
))}

View File

@ -85,7 +85,7 @@ const OrgPickerfromTenant = ({ title }) => {
{isLoading ? (
<div>Loading....</div>
) : data && data?.data?.length > 0 ? (
<div className="dataTables_wrapper no-footer pb-2">
<div className="dataTables_wrapper no-footer pb-5">
<table className="table dataTable text-nowrap">
<thead>
<tr className="table_header_border">
@ -99,28 +99,41 @@ const OrgPickerfromTenant = ({ title }) => {
</th>
</tr>
</thead>
<tbody>
{Array.isArray(data.data) && data.data.length > 0
? data.data.map((row, i) => (
<tr key={i}>
{contactList.map((col) => (
<td key={col.key} className={col.align}>
{col.getValue(row)}
</td>
))}
<td className="sticky-action-column bg-white">
<button
className="btn btn-sm btn-primary"
onClick={() => onOpen({ startStep: 3, orgData: row })}
>
Select
</button>
</td>
</tr>
))
: null}
</tbody>
</table>
<div
className="scrollable-tbody overflow-y-auto"
style={{ maxHeight: "350px", overflowY: "auto" }}
>
<table className="table dataTable text-nowrap mb-0">
<tbody>
{Array.isArray(data.data) && data.data.length > 0
? data.data.map((row, i) => (
<tr key={i}>
{contactList.map((col) => (
<td key={col.key} className={col.align}>
{col.getValue(row)}
</td>
))}
<td className="sticky-action-column p-0 bg-white">
<div className="p-1">
<button
type="submit"
className="btn btn-sm btn-primary"
onClick={() =>
onOpen({ startStep: 3, orgData: row })
}
>
Select
</button>
</div>
</td>
</tr>
))
: null}
</tbody>
</table>
</div>
</div>
) : null}
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">

View File

@ -60,7 +60,7 @@ const OrganizationModal = () => {
if (startStep === 1) {
return orgData && orgData !== null
? "Add Organization"
: "Choose Organization1";
: "Choose Organization";
}
if (startStep === 2) {

View File

@ -93,7 +93,7 @@ const OrganizationsList = ({searchText}) => {
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
return (
<div className="card px-0 px-sm-4">
<div className="card px-0 px-sm-4 pb-12 pt-5">
<div className="card-datatable table-responsive" id="horizontal-example">
<div className="dataTables_wrapper no-footer px-2">
<table className="table border-top dataTable text-nowrap">

View File

@ -7,7 +7,7 @@ const ProjectAssignedOrgs = () => {
const { data, isLoading, isError, error } =
useProjectAssignedOrganizations(selectedProject);
const contactList = [
const orgList = [
{
key: "name",
label: "Organization Name",
@ -23,6 +23,16 @@ const ProjectAssignedOrgs = () => {
</div>
),
align: "text-start",
},
{
key: "service",
label: "Service Name",
getValue: (org) => (
<div className="d-flex gap-2 py-1 ">
N/A
</div>
),
align: "text-start",
},
{
key: "sprid",
@ -61,7 +71,7 @@ const ProjectAssignedOrgs = () => {
<table className="table dataTable text-nowrap">
<thead>
<tr className="table_header_border">
{contactList.map((col) => (
{orgList.map((col) => (
<th key={col.key} className={col.align}>
{col.label}
</th>
@ -72,7 +82,7 @@ const ProjectAssignedOrgs = () => {
{Array.isArray(data) && data.length > 0 ? (
data.map((row, i) => (
<tr key={i}>
{contactList.map((col) => (
{orgList.map((col) => (
<td key={col.key} className={col.align}>
{col.getValue(row)}
</td>
@ -82,7 +92,7 @@ const ProjectAssignedOrgs = () => {
) : (
<tr style={{ height: "200px" }}>
<td
colSpan={contactList.length}
colSpan={orgList.length}
className="text-center align-middle"
>
Not Assigned yet

View File

@ -7,12 +7,12 @@ const ProjectOrganizations = () => {
const { onOpen, startStep, flowType } = useOrganizationModal();
const selectedProject = useSelectedProject();
return (
<div className="card">
<div className="card pb-10" >
<div className="card-header">
<div className="d-flex justify-content-end px-2">
<button
type="button"
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
>
<i className="bx bx-plus-circle me-2"></i>

View File

@ -135,7 +135,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
}, []);
let isPending = isLoading || isUpdating;
return (
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)} className="px-7">
{/* <h6>Create Activity</h6> */}
<div className="row">
<div className="col-6 text-start">
@ -171,13 +171,19 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
</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">
<label className="py-1 form-label my-0">
Add Check List <i
className="bx bx-plus-circle text-primary cursor-pointer"
data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check"
onClick={addChecklistItem}
></i>
</label>
{checkListItems.length > 0 ? (
<table className="table mt-1 border-none">
<thead className="py-0 my-0 border-none ">
<tr className="py-1 border-secondary ">
<th colSpan={2} className="py-1">
<small>Name</small>
</th>
@ -187,10 +193,10 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
<th className="text-center py-1">Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 ">
<tbody className="table-border-bottom-0 border-secondary ">
{checkListItems.map((item, index) => (
<tr key={index} className="border-top-0">
<td colSpan={2} className="border-top-0 border-0">
<tr key={index}>
<td colSpan={2} className="border-none" >
<input
className="d-none"
{...register(`checkList.${index}.id`)}
@ -212,7 +218,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
</small>
)}
</td>
<td colSpan={2} className="text-center border-0">
<td colSpan={2} className="text-center border-none">
<input
className="form-check-input"
type="checkbox"
@ -220,7 +226,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
defaultChecked={item.isMandatory}
/>
</td>
<td className="text-center border-0">
<td className="text-center border-none">
<button
type="button"
onClick={() => removeChecklistItem(index)}
@ -238,31 +244,20 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
))}
</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 className="d-flex justify-content-center my-0"><p className="text-secondary m-0">Not Yet Added</p> </div>)}
</div>
<div className="col-12 text-end mt-3">
<button
type="reset"
className="btn btn-xs btn-label-secondary me-3"
className="btn btn-sm btn-label-secondary me-3"
onClick={handleClose}
disabled={isPending}
>
Cancel
</button>
<button type="submit" className="btn btn-xs btn-primary">
<button type="submit" className="btn btn-sm btn-primary">
{isPending ? "Please Wait" : activity ? "Update" : "Submit"}
</button>
</div>

View File

@ -53,7 +53,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
let isPending = isCreating || isUpdating;
return (
<form className="row px-2" onSubmit={handleSubmit(onSubmit)}>
<form className="row px-12" onSubmit={handleSubmit(onSubmit)} cl>
<div className="col-12 col-md-12 text-start">
<Label className="form-label" required>
Group Name

View File

@ -44,7 +44,7 @@ const ServiceGroups = ({ service }) => {
<div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
<p className="m-0 fw-bold fs-6">{service.name}</p>
<button
className="btn btn-xs btn-primary"
className="btn btn-sm btn-primary"
onClick={() =>
setManageGroup({
isOpen: true,
@ -93,7 +93,7 @@ const ServiceGroups = ({ service }) => {
>
<div className="d-flex justify-content-between text-start accordion-header">
{/* Show group toggle button only if ManageGroup is not open */}
<div className="d-flex gap-4 align-items-center">
<div className="d-flex gap-1 align-items-center">
{!isManageGroup.isOpen && (
<span
onClick={() => toggleGroup(group.id)}
@ -118,10 +118,6 @@ const ServiceGroups = ({ service }) => {
<i
className="bx bx-plus-circle text-primary cursor-pointer"
onClick={() => {
console.log(
"Opening new activity for group:",
group.id
);
setManageActivity({
isOpen: true,
activity: null, // Indicating new activity creation
@ -182,7 +178,7 @@ const ServiceGroups = ({ service }) => {
aria-labelledby={group.id}
data-bs-parent="#accordionOne"
>
<div className="accordion-body">
<div className="accordion-body ">
{isOpen && actLoading && (
<p className="text-center m-0">
Loading activities...
@ -192,7 +188,7 @@ const ServiceGroups = ({ service }) => {
{isOpen && activities?.data?.length > 0 ? (
<div className="row border-top-2">
{/* Header Row */}
<div className="col-12 d-flex justify-content-between py-2 border-bottom">
<div className="col-12 d-flex justify-content-between py-2 border-bottom px-4">
<span className="fw-semibold text-uppercase">
Activity Name
</span>

View File

@ -719,7 +719,7 @@ export const useCreateService = (onSuccessCallback) => {
},
onError: (error) => {
debugger;
showToast(error.message || "Something went wrong", "error");
showToast( error?.response?.data?.message || error?.message || "Something went wrong", "error");
},
});
};
@ -742,7 +742,7 @@ export const useUpdateService = (onSuccessCallback) => {
if (onSuccessCallback) onSuccessCallback(data);
},
onError: (error) => {
showToast(error?.message || "Something went wrong", "error");
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
},
});
};
@ -759,16 +759,16 @@ export const useCreateActivityGroup = (onSuccessCallback) => {
queryClient.invalidateQueries({
queryKey: ["groups"],
});
showToast(
data.message || "Activity Group created successfully.",
debugger
showToast( data?.message ||
data?.response?.data?.message || "Activity Group created successfully.",
"success"
);
if (onSuccessCallback) onSuccessCallback(data);
},
onError: (error) => {
showToast(error?.message || "Something went wrong", "error");
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
},
});
};
@ -786,7 +786,8 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
});
showToast(
data.message || "Activity Group Updated successfully.",
data?.message ||
data?.response?.data?.message|| "Activity Group Updated successfully.",
"success"
);
@ -812,7 +813,7 @@ export const useCreateActivity = (onSuccessCallback) => {
if (onSuccessCallback) onSuccessCallback(data);
},
onError: (error) => {
showToast(error.message || "Something went wrong", "error");
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
},
});
};
@ -834,7 +835,7 @@ export const useUpdateActivity = (onSuccessCallback) => {
if (onSuccessCallback) onSuccessCallback(data);
},
onError: (error) => {
showToast(error.message || "Something went wrong", "error");
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
},
});
};

View File

@ -32,7 +32,7 @@ const OrganizationPage = () => {
<div className="col-6 text-end mt-2 mt-sm-0">
<button
type="button"
className="p-1 me-1 m-sm-0 bg-primary rounded-circle"
className="p-1 me-1 m-sm-0 bg-primary rounded-circle"
title="Add New Organization"
onClick={()=>onOpen({ startStep: 2,flowType:"default" })}
>

View File

@ -91,7 +91,8 @@ const MasterPage = () => {
const handleDeleteServiceItem =()=>{
if(!isDeleletingServiceItem.ItemId) return
if(isDeleletingServiceItem.whichItem == "activiy"){
debugger
if(isDeleletingServiceItem.whichItem === "activity"){
DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
}else{
DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})