111 lines
3.2 KiB
JavaScript
111 lines
3.2 KiB
JavaScript
import { useOrganizationModal } from "../../hooks/useOrganization";
|
|
import Label from "../common/Label";
|
|
|
|
const OrgPicker = ({
|
|
title,
|
|
placeholder,
|
|
orgs = [],
|
|
searchValue,
|
|
setSearchValue,
|
|
}) => {
|
|
const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
|
|
useOrganizationModal();
|
|
|
|
const handleBack = () => {
|
|
if (startStep === prevStep) {
|
|
onOpen({ startStep: 2,prevStep:1 });
|
|
} else {
|
|
onOpen({ startStep: 2 });
|
|
}
|
|
};
|
|
return (
|
|
<div className="d-block">
|
|
<div className="text-start mb-1">
|
|
<Label className="text-secondary">{title}1</Label>
|
|
<input
|
|
type="text"
|
|
value={searchValue}
|
|
onChange={(e) => setSearchValue?.(e.target.value)}
|
|
className="form-control form-control-sm w-auto"
|
|
placeholder={placeholder}
|
|
/>
|
|
</div>
|
|
|
|
{/* ---- Organization list ---- */}
|
|
<div className="py-2 text-tiny text-center">
|
|
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
|
{orgs?.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"
|
|
>
|
|
<div className="d-flex align-items-center justify-content-center me-3">
|
|
<i className="bx bx-building-house bx-md text-primary"></i>
|
|
</div>
|
|
|
|
<div className="w-100">
|
|
<div className="d-flex justify-content-between cursor-pointer">
|
|
<div className="user-info text-start">
|
|
<h6 className="mb-1 fw-normal">{org.name}</h6>
|
|
</div>
|
|
<div className="add-btn">
|
|
<button
|
|
className="btn btn-primary btn-xs"
|
|
onClick={onOpen.bind(null, { startStep: 3, orgData: org })}
|
|
>
|
|
select
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{startStep !== 2 && (
|
|
<div className="mt-4">
|
|
<p className="text-secondary">
|
|
Don't have required organization, Please find using{" "}
|
|
<span
|
|
className="text-mutes cursor-pointer text-decoration-underline"
|
|
onClick={() => {
|
|
onOpen({ startStep: 2, });
|
|
}}
|
|
>
|
|
SPRID
|
|
</span>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ---- Footer buttons ---- */}
|
|
<div
|
|
className={`d-flex justify-content-end
|
|
text-secondary mt-3`}
|
|
>
|
|
{startStep > 1 && prevStep < startStep && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-outline-secondary"
|
|
onClick={handleBack}
|
|
>
|
|
<i className="bx bx-left-arrow-alt"></i> Back
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-secondary"
|
|
onClick={() => onOpen({ startStep: 4 })}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Add New Organization
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrgPicker;
|