79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import TeamEmployeeList from "./TeamEmployeeList";
|
|
import { useOrganization } from "../../../hooks/useDirectory";
|
|
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
|
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
|
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
|
|
import SelectField from "../../common/Forms/SelectField";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
const TeamAssignToProject = ({ closeModal }) => {
|
|
const [searchText, setSearchText] = useState("");
|
|
const [selectedOrg, setSelectedOrg] = useState(null);
|
|
const project = useSelectedProject();
|
|
const { data, isLoading, isError, error } =
|
|
useProjectAssignedOrganizationsName(project);
|
|
const { control, watch, formState: { errors } } = useForm({
|
|
defaultValues: { organizationId: "" },
|
|
});
|
|
return (
|
|
<div className="container">
|
|
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
|
|
<h5 className="mb-4">Assign Employee To Project</h5>
|
|
|
|
<div className="row align-items-center gx-5 text-start">
|
|
<div className="col-12 col-md-6 mb-2">
|
|
<AppFormController
|
|
name="organizationId"
|
|
control={control}
|
|
rules={{ required: "Organization is required" }}
|
|
render={({ field }) => (
|
|
<SelectField
|
|
label="Select Organization"
|
|
options={data ?? []}
|
|
placeholder="Choose an Organization"
|
|
required
|
|
labelKey="name"
|
|
valueKey="id"
|
|
value={field.value}
|
|
onChange={field.onChange}
|
|
isLoading={isLoading}
|
|
className="m-0 w-100"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.organizationId && (
|
|
<small className="danger-text">{errors.organizationId.message}</small>
|
|
)}
|
|
</div>
|
|
<div className="col-12 col-md-6 mt-n5">
|
|
<div className="d-flex flex-column">
|
|
<label htmlFor="search" className="form-label mb-1">
|
|
Search Employee
|
|
</label>
|
|
<input
|
|
id="search"
|
|
type="search"
|
|
className="form-control w-100"
|
|
placeholder="Search..."
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div >
|
|
<TeamEmployeeList
|
|
organizationId={selectedOrg}
|
|
searchTerm={searchText}
|
|
closeModal={closeModal}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamAssignToProject;
|