assign to project and Tenant flow is integrated with api
This commit is contained in:
parent
005fdb3490
commit
f6d864d42e
@ -15,7 +15,7 @@ import {
|
||||
} from "../../hooks/useOrganization";
|
||||
|
||||
const AssignOrg = ({ setStep }) => {
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
|
||||
const { isOpen, orgData, startStep, onOpen, flowType, prevStep,onClose } =
|
||||
useOrganizationModal();
|
||||
const selectedProject = useSelectedProject();
|
||||
const { data: masterService, isLoading: isMasterserviceLoading } =
|
||||
@ -24,9 +24,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
useProjectAssignedServices(selectedProject);
|
||||
const { data: orgType, isLoading: orgLoading } = useOrganizationType();
|
||||
|
||||
const { mutate: AssignToProject, isPending } = useAssignOrgToProject(
|
||||
() => {}
|
||||
);
|
||||
const { mutate: AssignToProject, isPending } = useAssignOrgToProject(()=>onClose());
|
||||
|
||||
const mergedServices = useMemo(() => {
|
||||
if (!masterService || !projectServices) return [];
|
||||
@ -61,6 +59,15 @@ const AssignOrg = ({ setStep }) => {
|
||||
const handleEdit = () => {
|
||||
onOpen({ startStep: 4 , orgData:orgData});
|
||||
};
|
||||
const handleBack =()=>{
|
||||
if(prevStep == 1 && flowType == "assign"){
|
||||
onOpen({ startStep: prevStep })
|
||||
}else if(prevStep == 1 && flowType == "assign"){
|
||||
onOpen({ startStep: 1 })
|
||||
}else{
|
||||
onOpen({ startStep: 2 })
|
||||
}
|
||||
}
|
||||
if (isMasterserviceLoading || isLoading)
|
||||
return <div className="text-center">Loading....</div>;
|
||||
return (
|
||||
@ -186,7 +193,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
onClick={() => onOpen({ startStep: prevStep })}
|
||||
onClick={ handleBack}
|
||||
disabled={isPending}
|
||||
>
|
||||
<i className="bx bx-left-arrow-alt"></i> Back
|
||||
|
@ -16,7 +16,7 @@ import SelectMultiple from "../common/SelectMultiple";
|
||||
|
||||
const ManagOrg = () => {
|
||||
const { data: service, isLoading } = useGlobalServices();
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
|
||||
const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
|
||||
useOrganizationModal();
|
||||
|
||||
const method = useForm({
|
||||
@ -32,13 +32,15 @@ const ManagOrg = () => {
|
||||
} = method;
|
||||
|
||||
// Create & Update mutations
|
||||
const { mutate: createOrganization, isPending: isCreating } = useCreateOrganization(() => {
|
||||
const { mutate: createOrganization, isPending: isCreating } =
|
||||
useCreateOrganization(() => {
|
||||
reset(defaultOrganizationValues);
|
||||
onOpen({ startStep: 1 });
|
||||
onClose();
|
||||
});
|
||||
|
||||
const { mutate: updateOrganization, isPending: isUpdating } = useUpdateOrganization(() => {
|
||||
const { mutate: updateOrganization, isPending: isUpdating } =
|
||||
useUpdateOrganization(() => {
|
||||
reset(defaultOrganizationValues);
|
||||
onOpen({ startStep: 1 });
|
||||
onClose();
|
||||
@ -47,13 +49,13 @@ const ManagOrg = () => {
|
||||
// Prefill form if editing
|
||||
useEffect(() => {
|
||||
if (orgData) {
|
||||
console.log(orgData)
|
||||
console.log(orgData);
|
||||
reset({
|
||||
name: orgData.name || "",
|
||||
contactPerson: orgData.contactPerson || "",
|
||||
contactNumber: orgData.contactNumber || "",
|
||||
email: orgData.email || "",
|
||||
serviceIds: orgData.services?.map(s => s.id) || [],
|
||||
serviceIds: orgData.services?.map((s) => s.id) || [],
|
||||
address: orgData.address || "",
|
||||
});
|
||||
}
|
||||
@ -66,32 +68,75 @@ const ManagOrg = () => {
|
||||
createOrganization(payload);
|
||||
}
|
||||
};
|
||||
const handleBack = () => {
|
||||
if (flowType === "edit") {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (flowType === "assign") {
|
||||
if (prevStep === 1) {
|
||||
onOpen({ startStep: 1 });
|
||||
} else {
|
||||
onOpen({ startStep: prevStep ?? 2 });
|
||||
}
|
||||
return;
|
||||
}
|
||||
onOpen({ startStep: 2 });
|
||||
};
|
||||
return (
|
||||
<FormProvider {...method}>
|
||||
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="name" required>Organization Name</Label>
|
||||
<input className="form-control form-control-sm" {...register("name")} />
|
||||
{errors.name && <span className="danger-text">{errors.name.message}</span>}
|
||||
<Label htmlFor="name" required>
|
||||
Organization Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="danger-text">{errors.name.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="contactPerson" required>Contact Person</Label>
|
||||
<input className="form-control form-control-sm" {...register("contactPerson")} />
|
||||
{errors.contactPerson && <span className="danger-text">{errors.contactPerson.message}</span>}
|
||||
<Label htmlFor="contactPerson" required>
|
||||
Contact Person
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactPerson")}
|
||||
/>
|
||||
{errors.contactPerson && (
|
||||
<span className="danger-text">{errors.contactPerson.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
||||
<input className="form-control form-control-sm" {...register("contactNumber")} />
|
||||
{errors.contactNumber && <span className="danger-text">{errors.contactNumber.message}</span>}
|
||||
<Label htmlFor="contactNumber" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactNumber")}
|
||||
/>
|
||||
{errors.contactNumber && (
|
||||
<span className="danger-text">{errors.contactNumber.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="email" required>Email Address</Label>
|
||||
<input className="form-control form-control-sm" {...register("email")} />
|
||||
{errors.email && <span className="danger-text">{errors.email.message}</span>}
|
||||
<Label htmlFor="email" required>
|
||||
Email Address
|
||||
</Label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
{...register("email")}
|
||||
/>
|
||||
{errors.email && (
|
||||
<span className="danger-text">{errors.email.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
@ -102,26 +147,38 @@ const ManagOrg = () => {
|
||||
valueKey="id"
|
||||
options={service?.data || []}
|
||||
/>
|
||||
{errors.serviceIds && <span className="danger-text">{errors.serviceIds.message}</span>}
|
||||
{errors.serviceIds && (
|
||||
<span className="danger-text">{errors.serviceIds.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="address" required>Address</Label>
|
||||
<Label htmlFor="address" required>
|
||||
Address
|
||||
</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("address")}
|
||||
rows={2}
|
||||
/>
|
||||
{errors.address && <span className="danger-text">{errors.address.message}</span>}
|
||||
{errors.address && (
|
||||
<span className="danger-text">{errors.address.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between gap-2 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={() => onOpen({ startStep: prevStep })}
|
||||
onClick={handleBack}
|
||||
>
|
||||
← --Back
|
||||
{flowType === "edit" ? (
|
||||
"Close"
|
||||
) : (
|
||||
<>
|
||||
<i className="bx bx-chevron-left"></i>Back
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
@ -129,7 +186,11 @@ const ManagOrg = () => {
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isCreating || isUpdating || isLoading}
|
||||
>
|
||||
{isCreating || isUpdating ? "Please Wait..." : orgData ? "Update" : "Submit"}
|
||||
{isCreating || isUpdating
|
||||
? "Please Wait..."
|
||||
: orgData
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -138,5 +199,4 @@ const ManagOrg = () => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default ManagOrg;
|
||||
|
@ -1,193 +0,0 @@
|
||||
const ManageOrganization1 = ({
|
||||
projectOrganizations = [],
|
||||
organizationId = null,
|
||||
}) => {
|
||||
const [step, setStep] = useState(1); // default = scenario decision
|
||||
const orgModal = useOrganizationModal();
|
||||
const { data: services, isLoading } = useServices();
|
||||
|
||||
const method = useForm({
|
||||
resolver: zodResolver(organizationSchema),
|
||||
defaultValues: defaultOrganizationValues,
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = method;
|
||||
|
||||
const { mutate: CreateOrganization, isPending } = useCreateOrganization(
|
||||
() => {
|
||||
reset(defaultOrganizationValues);
|
||||
orgModal.onClose();
|
||||
setStep(1); // reset to first step
|
||||
}
|
||||
);
|
||||
|
||||
// 🔹 Decide first step when modal opens
|
||||
useEffect(() => {
|
||||
if (orgModal.isOpen) {
|
||||
if (organizationId) {
|
||||
setStep(3); // update flow → show org details directly
|
||||
} else if (projectOrganizations && projectOrganizations.length > 0) {
|
||||
setStep(1); // Scenario 1 → from current tenant list
|
||||
} else {
|
||||
setStep(2); // Scenario 2 → search with SPRID
|
||||
}
|
||||
}
|
||||
}, [orgModal.isOpen, organizationId, projectOrganizations]);
|
||||
|
||||
const onSubmit = (OrgPayload) => {
|
||||
CreateOrganization(OrgPayload);
|
||||
};
|
||||
|
||||
const RenderTitle = useMemo(() => {
|
||||
if (organizationId) return "Update Organization";
|
||||
if (step === 1) return "Add Organization"; // current tenant
|
||||
if (step === 2) return "Find Organization"; // search with SPRID
|
||||
if (step === 3) return "Organization Details";
|
||||
if (step === 4) return "Create Organization";
|
||||
return "Manage Organization";
|
||||
}, [step, organizationId]);
|
||||
|
||||
const contentBody = (
|
||||
<div>
|
||||
{/* ---------- STEP 1: From Current Tenant Organizations ---------- */}
|
||||
{step === 1 && (
|
||||
<div className="d-block">
|
||||
<div className="list-group mt-3">
|
||||
{projectOrganizations.map((org, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="list-group-item list-group-item-action cursor-pointer"
|
||||
onClick={() => setStep(3)}
|
||||
>
|
||||
<i className="bx bx-building-house me-2"></i>
|
||||
{org}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between text-secondary mt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
onClick={() => setStep(2)} // jump to SPRID search
|
||||
>
|
||||
<i className="bx bx-search-alt"></i> Find with SPRID
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-secondary"
|
||||
onClick={() => setStep(4)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Add New Organization
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- STEP 2: Search by Service Provider ID ---------- */}
|
||||
{step === 2 && (
|
||||
<div className="d-block">
|
||||
<div className="text-start mb-1">
|
||||
<Label className="text-secondary">Enter Service Provider ID</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="SPR - ID"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Example SPR results */}
|
||||
<div className="list-group mt-3">
|
||||
<div
|
||||
className="list-group-item list-group-item-action cursor-pointer"
|
||||
onClick={() => setStep(3)}
|
||||
>
|
||||
<i className="bx bx-building-house me-2"></i>
|
||||
Sample Organization (SPRID)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between gap-2 mt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
onClick={() => setStep(1)}
|
||||
>
|
||||
<i className="bx bx-left-arrow-alt"></i> Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-secondary"
|
||||
onClick={() => setStep(4)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Add New Organization
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- STEP 3: Organization Details ---------- */}
|
||||
{step === 3 && (
|
||||
<div>
|
||||
<p className="text-muted small">
|
||||
Show organization details here (from SPR or tenant list). User
|
||||
selects services and clicks Add.
|
||||
</p>
|
||||
<div className="mb-2">
|
||||
<Label>Services Offered</Label>
|
||||
<ul className="list-group">
|
||||
<li className="list-group-item">
|
||||
<input type="checkbox" className="form-check-input me-2" />
|
||||
Service 1
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<input type="checkbox" className="form-check-input me-2" />
|
||||
Service 2
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={() => setStep(1)}
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
<button type="button" className="btn btn-sm btn-primary">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---------- STEP 4: Create New Organization ---------- */}
|
||||
{step === 4 && (
|
||||
<FormProvider {...method}>
|
||||
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* same form as your code, unchanged */}
|
||||
{/* ... */}
|
||||
</form>
|
||||
</FormProvider>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={orgModal.isOpen}
|
||||
onClose={orgModal.onClose}
|
||||
title={RenderTitle}
|
||||
body={contentBody}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageOrganization;
|
@ -1,40 +1,61 @@
|
||||
import { useOrganizationModal } from "../../hooks/useOrganization";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useOrganizationModal,
|
||||
useOrganizationsList,
|
||||
} from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Label from "../common/Label";
|
||||
import Pagination from "../common/Pagination";
|
||||
|
||||
const OrgPicker = ({
|
||||
title,
|
||||
placeholder,
|
||||
orgs = [],
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
}) => {
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
|
||||
const OrgPicker = ({ title }) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { data, isLoading } = useOrganizationsList(
|
||||
ITEMS_PER_PAGE-10,
|
||||
1,
|
||||
true,
|
||||
null,
|
||||
searchText
|
||||
);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
const { isOpen, orgData, startStep, onOpen, flowType, prevStep } =
|
||||
useOrganizationModal();
|
||||
|
||||
const handleBack = () => {
|
||||
if (startStep === prevStep) {
|
||||
onOpen({ startStep: 2,prevStep:1 });
|
||||
if (prevStep == 1 && flowType == "assign") {
|
||||
onOpen({ startStep: prevStep });
|
||||
} else if (prevStep == 1 && flowType == "assign") {
|
||||
onOpen({ startStep: 1 });
|
||||
} else {
|
||||
onOpen({ startStep: 2 });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="d-block">
|
||||
<div className="text-start mb-1">
|
||||
<Label className="text-secondary">{title}1</Label>
|
||||
<Label className="text-secondary">{title}</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue?.(e.target.value)}
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText?.(e.target.value)}
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder={placeholder}
|
||||
placeholder="Enter Organization Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ---- Organization list ---- */}
|
||||
{isLoading ? (
|
||||
<div>Loading....</div>
|
||||
) : data && data?.data?.length > 0 ? (
|
||||
<div className="py-2 text-tiny text-center">
|
||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||
{orgs?.map((org) => (
|
||||
{data?.data?.map((org) => (
|
||||
<div
|
||||
key={org.id}
|
||||
className="list-group-item list-group-item-action d-flex align-items-center cursor-pointer border-0 hover-overlay border-bottom rounded-none pb-1 shadow-1-strong rounded"
|
||||
@ -50,8 +71,8 @@ const OrgPicker = ({
|
||||
</div>
|
||||
<div className="add-btn">
|
||||
<button
|
||||
className="btn btn-primary btn-xs"
|
||||
onClick={onOpen.bind(null, { startStep: 3, orgData: org })}
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
>
|
||||
select
|
||||
</button>
|
||||
@ -60,6 +81,16 @@ const OrgPicker = ({
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="d-flex text-end">
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{startStep !== 2 && (
|
||||
@ -69,7 +100,7 @@ const OrgPicker = ({
|
||||
<span
|
||||
className="text-mutes cursor-pointer text-decoration-underline"
|
||||
onClick={() => {
|
||||
onOpen({ startStep: 2, });
|
||||
onOpen({ startStep: 2 });
|
||||
}}
|
||||
>
|
||||
SPRID
|
||||
@ -78,16 +109,22 @@ const OrgPicker = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>Not found Organization</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* ---- Footer buttons ---- */}
|
||||
<div
|
||||
className={`d-flex justify-content-end
|
||||
text-secondary mt-3`}
|
||||
>
|
||||
{startStep > 1 && prevStep < startStep && (
|
||||
{flowType == "default" && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={handleBack}
|
||||
>
|
||||
<i className="bx bx-left-arrow-alt"></i> Back
|
||||
@ -96,7 +133,7 @@ const OrgPicker = ({
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-secondary"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => onOpen({ startStep: 4 })}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useAssignOrgToTenant,
|
||||
useOrganizationBySPRID,
|
||||
useOrganizationModal,
|
||||
} from "../../hooks/useOrganization";
|
||||
@ -13,7 +14,7 @@ import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
||||
// Zod schema: only allow exactly 4 digits
|
||||
|
||||
const OrgPicker2 = ({ title, placeholder }) => {
|
||||
const { startStep, prevStep, onOpen } = useOrganizationModal();
|
||||
const {onClose, startStep, flowType, onOpen,prevStep } = useOrganizationModal();
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -33,8 +34,20 @@ const OrgPicker2 = ({ title, placeholder }) => {
|
||||
const onSubmit = (formdata) => {
|
||||
setSPRID(formdata.spridSearchText);
|
||||
};
|
||||
console.log(data)
|
||||
const SP = watch("spridSearchText")
|
||||
|
||||
const {mutate:AssignToTenant,isPending} = useAssignOrgToTenant(()=>{
|
||||
onClose()
|
||||
})
|
||||
const handleOrg=(orgId)=>{
|
||||
if(flowType == "default"){
|
||||
AssignToTenant(orgId)
|
||||
}else{
|
||||
debugger
|
||||
onOpen({ startStep: 3, orgData: org })
|
||||
}
|
||||
|
||||
}
|
||||
const SP = watch("spridSearchText");
|
||||
return (
|
||||
<div className="d-block">
|
||||
<form
|
||||
@ -45,7 +58,6 @@ const SP = watch("spridSearchText")
|
||||
<Label className="text-secondary">{title}</Label>
|
||||
<input
|
||||
type="search"
|
||||
|
||||
{...register("spridSearchText")}
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder={placeholder || "Enter Service Provider ID"}
|
||||
@ -71,10 +83,10 @@ const SP = watch("spridSearchText")
|
||||
{/* ---- Organization list ---- */}
|
||||
{isLoading ? (
|
||||
<OrgCardSkeleton />
|
||||
) : data && data.length > 0 ? (
|
||||
) : data && data?.data.length > 0 ? (
|
||||
<div className="py-2 text-tiny text-center">
|
||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||
{data.map((org) => (
|
||||
{data.data.map((org) => (
|
||||
<div
|
||||
key={org.id}
|
||||
className="list-group-item list-group-item-action d-flex align-items-center cursor-pointer border-0 hover-overlay shadow-1-strong rounded"
|
||||
@ -92,9 +104,9 @@ const SP = watch("spridSearchText")
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
onClick={()=>handleOrg(org.id)}
|
||||
>
|
||||
select
|
||||
{isPending ? "Please Wait..." : flowType === "assign" ? "Select":`Add`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,31 +125,33 @@ const SP = watch("spridSearchText")
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{/* ---- Footer buttons ---- */}
|
||||
{/* ---- Footer buttons ---- */}
|
||||
<div className="d-flex justify-content-between text-secondary mt-3">
|
||||
{startStep > 1 && prevStep !== startStep && (
|
||||
<div
|
||||
className={`d-flex ${
|
||||
flowType !== "default"
|
||||
? "justify-content-between"
|
||||
: "justify-content-end"
|
||||
} text-secondary mt-3`}
|
||||
>
|
||||
{flowType !== "default" && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
onClick={() => onOpen({ startStep: prevStep })}
|
||||
>
|
||||
<i className="bx bx-left-arrow-alt"></i> Back
|
||||
<i className='bx bx-chevron-left'></i> Back
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-secondary"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => onOpen({ startStep: 4 })}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Add New Organization
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -26,12 +26,7 @@ const OrganizationModal = () => {
|
||||
const { data: masterService, isLoading } = useServices();
|
||||
const [searchText, setSearchText] = useState();
|
||||
const [SPRID, setSPRID] = useState("");
|
||||
const { data: orgList, isLoading: orgLoading } = useOrganizationsList(
|
||||
20,
|
||||
1,
|
||||
true,
|
||||
searchText
|
||||
);
|
||||
|
||||
|
||||
const [Organization, setOrganization] = useState({});
|
||||
|
||||
@ -86,11 +81,7 @@ const OrganizationModal = () => {
|
||||
{startStep === 1 && (
|
||||
<OrgPicker
|
||||
title="Find Organization"
|
||||
placeholder="Enter Organization"
|
||||
orgs={orgList}
|
||||
projectOrganizations={orgData}
|
||||
searchValue={SPRID}
|
||||
setSearchValue={setSPRID}
|
||||
|
||||
|
||||
/>
|
||||
)}
|
||||
|
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import React, { useState } from "react";
|
||||
import { useOrganizationModal, useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
|
||||
const OrganizationsList = ({searchText}) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const searchString = useDebounce(searchText,500)
|
||||
const {
|
||||
data = [],
|
||||
@ -13,6 +15,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
isError,
|
||||
error,
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
|
||||
const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal();
|
||||
|
||||
const organizationsColumns = [
|
||||
{
|
||||
@ -81,6 +84,11 @@ const OrganizationsList = ({searchText}) => {
|
||||
},
|
||||
];
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
if (isFetching && !isFetching) return <div>Loading...</div>;
|
||||
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
|
||||
|
||||
@ -106,8 +114,8 @@ const OrganizationsList = ({searchText}) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.length > 0 ? (
|
||||
data.map((org) => (
|
||||
{data?.data?.length > 0 ? (
|
||||
data?.data?.map((org) => (
|
||||
<tr key={org.id}>
|
||||
{organizationsColumns.map((col) => (
|
||||
<td
|
||||
@ -122,7 +130,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
<td className="sticky-action-column ">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i className="bx bx-show text-primary cursor-pointer" ></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer"></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
|
||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
</td>
|
||||
@ -140,6 +148,13 @@ const OrganizationsList = ({searchText}) => {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@ import { useOrganizationModal } from "../../hooks/useOrganization";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const ProjectOrganizations = () => {
|
||||
const {onOpen,startStep} = useOrganizationModal();
|
||||
const {onOpen,startStep,flowType} = useOrganizationModal();
|
||||
const selectedProject = useSelectedProject()
|
||||
return (
|
||||
<div className="card">
|
||||
@ -12,7 +12,7 @@ const ProjectOrganizations = () => {
|
||||
<button
|
||||
type="button"
|
||||
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
|
||||
onClick={() => onOpen({startStep:1})}
|
||||
onClick={() => onOpen({startStep:1,flowType:"assign"})}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Add Organization
|
||||
|
@ -10,7 +10,7 @@ import showToast from "../services/toastService";
|
||||
|
||||
export const useOrganizationModal = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { isOpen, orgData, startStep, prevStep } = useSelector(
|
||||
const { isOpen, orgData, startStep, prevStep, flowType } = useSelector(
|
||||
(state) => state.localVariables.OrganizationModal
|
||||
);
|
||||
|
||||
@ -19,14 +19,15 @@ export const useOrganizationModal = () => {
|
||||
orgData,
|
||||
startStep,
|
||||
prevStep,
|
||||
flowType,
|
||||
onOpen: (options = {}) =>
|
||||
dispatch(
|
||||
openOrgModal({
|
||||
isOpen: true,
|
||||
orgData: options.orgData ?? orgData ?? null,
|
||||
startStep: options.startStep ?? startStep ?? 1,
|
||||
// only override prevStep if explicitly passed
|
||||
prevStep: options.prevStep ?? prevStep ?? 1,
|
||||
flowType: options.flowType ?? flowType ?? "default",
|
||||
})
|
||||
),
|
||||
onClose: () => dispatch(closeOrgModal()),
|
||||
@ -36,6 +37,7 @@ export const useOrganizationModal = () => {
|
||||
|
||||
|
||||
|
||||
|
||||
export const useOrganizationBySPRID =(sprid)=>{
|
||||
return useQuery({
|
||||
queryKey:["organization by",sprid],
|
||||
@ -100,7 +102,7 @@ export const useCreateOrganization = (onSuccessCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useAssignOrgToProject=()=>{
|
||||
export const useAssignOrgToProject=(onSuccessCallback)=>{
|
||||
const useClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (payload) =>
|
||||
@ -120,7 +122,26 @@ export const useAssignOrgToProject=()=>{
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export const useAssignOrgToTenant =(onSuccessCallback)=>{
|
||||
const useClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (payload) =>
|
||||
await OrganizationRepository.assignOrganizationToTenanat(payload),
|
||||
onSuccess: (_, variables) => {
|
||||
useClient.invalidateQueries({ queryKey: ["organizationList"] });
|
||||
showToast("Organization added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.response.data.message ||
|
||||
error.message ||
|
||||
"Something went wrong please try again !",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
export const useUpdateOrganization=()=>{
|
||||
const useClient = useQueryClient();
|
||||
return useMutation({
|
||||
|
@ -4,7 +4,7 @@ import { useOrganizationModal } from "../../hooks/useOrganization";
|
||||
import OrganizationsList from "../../components/Organization/OrganizationsList";
|
||||
|
||||
const OrganizationPage = () => {
|
||||
const { isOpen, orgData, startStep, onOpen, } =
|
||||
const { isOpen, orgData, startStep, onOpen, flowType } =
|
||||
useOrganizationModal();
|
||||
const [searchText,setSearchText] = useState("")
|
||||
|
||||
@ -34,7 +34,7 @@ const OrganizationPage = () => {
|
||||
type="button"
|
||||
className="p-1 me-1 m-sm-0 bg-primary rounded-circle"
|
||||
title="Add New Organization"
|
||||
onClick={()=>onOpen({ startStep: 1, })}
|
||||
onClick={()=>onOpen({ startStep: 2,flowType:"default" })}
|
||||
>
|
||||
<i className="bx bx-plus fs-4 text-white"></i>
|
||||
</button>
|
||||
|
@ -12,7 +12,9 @@ const OrganizationRepository = {
|
||||
|
||||
getOrganizationBySPRID :(sprid)=>api.get(`/api/Organization/list?sprid=${sprid}`),
|
||||
|
||||
assignOrganizationToProject:(data)=>api.post(`/api/Organization/assign/project`,data)
|
||||
assignOrganizationToProject:(data)=>api.post(`/api/Organization/assign/project`,data),
|
||||
|
||||
assignOrganizationToTenanat:(organizationId)=>api.post(`/api/Organization/assign/tenant/${organizationId}`)
|
||||
};
|
||||
|
||||
export default OrganizationRepository;
|
||||
|
@ -17,6 +17,7 @@ const localVariablesSlice = createSlice({
|
||||
orgData: null,
|
||||
prevStep:null,
|
||||
startStep: 1,
|
||||
flowType: "default",
|
||||
}
|
||||
|
||||
},
|
||||
@ -49,6 +50,7 @@ state.OrganizationModal.isOpen = true;
|
||||
}
|
||||
|
||||
state.OrganizationModal.startStep = action.payload?.startStep || 1;
|
||||
state.OrganizationModal.flowType = action.payload?.flowType || "default";
|
||||
},
|
||||
closeOrgModal: (state) => {
|
||||
state.OrganizationModal.isOpen = false;
|
||||
|
Loading…
x
Reference in New Issue
Block a user