Adding Dropdown in Employee.
This commit is contained in:
parent
dbf4f5e9c8
commit
0e75a3e1c9
@ -17,6 +17,8 @@ import {
|
||||
import showToast from "../../services/toastService";
|
||||
import { useDocumentContext } from "./Documents";
|
||||
import { isPending } from "@reduxjs/toolkit";
|
||||
import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const toBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
control,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
|
||||
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
|
||||
() => {
|
||||
showToast("Document Uploaded Successfully", "success");
|
||||
@ -231,66 +236,74 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
|
||||
const isPending = isUploading || isUpdating;
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<div className="p-2">
|
||||
<p className="fw-bold fs-6">Upload New Document</p>
|
||||
<h5 className="">Upload New Document</h5>
|
||||
<FormProvider key={documentTypeId} {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
||||
{/* Category */}
|
||||
<div className="mb-2">
|
||||
<Label htmlFor="documentCategoryId" required>Document Category</Label>
|
||||
<select
|
||||
{...register("documentCategoryId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
{isLoading && (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="documentCategoryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Document Category"
|
||||
options={DocumentCategories ?? []}
|
||||
placeholder="Select Category"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
{!isLoading && <option value="">Select Category</option>}
|
||||
{DocumentCategories?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.documentCategoryId && (
|
||||
<div className="danger-text">
|
||||
<small className="danger-text">
|
||||
{errors.documentCategoryId.message}
|
||||
</div>
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Type */}
|
||||
{categoryId && (
|
||||
<div className="mb-2">
|
||||
<Label htmlFor="documentTypeId" required>Document Type</Label>
|
||||
<select
|
||||
{...register("documentTypeId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
{isTypeLoading && (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="documentTypeId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Document Type"
|
||||
options={DocumentTypes ?? []}
|
||||
placeholder="Select Document Type"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isTypeLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
{DocumentTypes?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.documentTypeId && (
|
||||
<div className="danger-text">
|
||||
<small className="danger-text">
|
||||
{errors.documentTypeId.message}
|
||||
</div>
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
{/* Document ID */}
|
||||
<div className="mb-2">
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="documentId"
|
||||
required={selectedType?.isMandatory ?? false}
|
||||
@ -299,7 +312,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("documentId")}
|
||||
/>
|
||||
{errors.documentId && (
|
||||
@ -314,7 +327,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -325,7 +338,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
|
||||
|
||||
{/* Upload */}
|
||||
<div className="row my-2">
|
||||
<div className="row my-4">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="attachment" required>Upload Document</Label>
|
||||
|
||||
@ -384,7 +397,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<div className="mb-4">
|
||||
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
@ -392,7 +405,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-2">
|
||||
<div className="mb-4">
|
||||
<Label htmlFor="description" required>Description</Label>
|
||||
<textarea
|
||||
rows="2"
|
||||
@ -425,6 +438,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -517,39 +517,35 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Official Designation
|
||||
</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select"
|
||||
{...register("jobRoleId")}
|
||||
id="jobRoleId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Role
|
||||
</option>
|
||||
{[...job_role]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item.id}>
|
||||
{item?.name}{" "}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-sm-4 text-start">
|
||||
<AppFormController
|
||||
name="jobRoleId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Official Designation"
|
||||
required
|
||||
options={[...job_role].sort((a, b) =>
|
||||
a?.name?.localeCompare(b?.name)
|
||||
)}
|
||||
placeholder="Select Role"
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.jobRoleId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.jobRoleId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
|
||||
<div className="col-sm-4 mt-n1">
|
||||
<Label className="form-text text-start" required>
|
||||
Emergency Contact Person
|
||||
</Label>
|
||||
@ -570,7 +566,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="col-sm-4 mt-n1">
|
||||
<Label className="form-text text-start" required>
|
||||
Emergency Phone Number
|
||||
</Label>
|
||||
|
||||
@ -10,6 +10,8 @@ import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import showToast from "../../services/toastService";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
export const ProjectPermissionSchema = z.object({
|
||||
employeeId: z.string().min(1, "Employee is required"),
|
||||
@ -115,35 +117,42 @@ const hasChanges =
|
||||
<form className="row" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-between align-items-end gap-2 mb-3">
|
||||
<div className="text-start d-flex align-items-center gap-2">
|
||||
<div className="d-block">
|
||||
{/* <div className="d-block">
|
||||
<label className="form-label">Select Employee</label>
|
||||
</div>
|
||||
<div className="d-block">
|
||||
{" "}
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("employeeId")}
|
||||
disabled={isPending}
|
||||
>
|
||||
{loading ? (
|
||||
<option value="">Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">-- Select Employee --</option>
|
||||
{[...employees]
|
||||
</div> */}
|
||||
|
||||
<div className="d-block flex-grow-1">
|
||||
<AppFormController
|
||||
name="employeeId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Employee"
|
||||
options={
|
||||
employees
|
||||
?.sort((a, b) =>
|
||||
`${a?.firstName} ${a?.firstName}`?.localeCompare(
|
||||
`${a?.firstName} ${a?.lastName}`.localeCompare(
|
||||
`${b?.firstName} ${b?.lastName}`
|
||||
)
|
||||
)
|
||||
?.map((emp) => (
|
||||
<option key={emp.id} value={emp.id}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
?.map((emp) => ({
|
||||
id: emp.id,
|
||||
name: `${emp.firstName} ${emp.lastName}`,
|
||||
})) ?? []
|
||||
}
|
||||
placeholder="-- Select Employee --"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={loading}
|
||||
disabled={isPending}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.employeeId && (
|
||||
<div className="d-block text-danger small">
|
||||
{errors.employeeId.message}
|
||||
@ -152,6 +161,7 @@ const hasChanges =
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-3 text-end">
|
||||
{hasChanges && (
|
||||
<button
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user