changed label of employee to "Reimburse By"
This commit is contained in:
parent
6b640ee682
commit
a056561773
@ -488,7 +488,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
<label className="form-label">Employeee </label>
|
<label className="form-label">Reimburse By </label>
|
||||||
<EmployeeSearchInput
|
<EmployeeSearchInput
|
||||||
control={control}
|
control={control}
|
||||||
name="reimburseById"
|
name="reimburseById"
|
||||||
|
|||||||
@ -2,11 +2,12 @@ import { useState, useEffect } from "react";
|
|||||||
import { useEmployeesName } from "../../hooks/useEmployees";
|
import { useEmployeesName } from "../../hooks/useEmployees";
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
import { useDebounce } from "../../utils/appUtils";
|
||||||
import { useController } from "react-hook-form";
|
import { useController } from "react-hook-form";
|
||||||
|
import Avatar from "./Avatar";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const EmployeeSearchInput = ({ control, name, projectId }) => {
|
const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
|
||||||
const {
|
const {
|
||||||
field: { onChange, value, ref },
|
field: { onChange, value, ref },
|
||||||
fieldState: { error },
|
fieldState: { error },
|
||||||
@ -40,7 +41,7 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
|
|||||||
type="text"
|
type="text"
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={`form-control form-control-sm`}
|
className={`form-control form-control-sm`}
|
||||||
placeholder="Search employee..."
|
placeholder={placeholder}
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearch(e.target.value);
|
setSearch(e.target.value);
|
||||||
@ -54,7 +55,7 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
|
|||||||
|
|
||||||
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
|
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
|
||||||
<ul
|
<ul
|
||||||
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none"
|
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
|
||||||
style={{ maxHeight: 200, overflowY: "auto" }}
|
style={{ maxHeight: 200, overflowY: "auto" }}
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
@ -64,14 +65,24 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
|
|||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
employees?.data?.map((emp) => (
|
employees?.data?.map((emp) => (
|
||||||
<li
|
<li
|
||||||
key={emp.id}
|
key={emp.id}
|
||||||
className="list-group-item list-group-item-action"
|
className="list-group-item list-group-item-action py-1 px-1"
|
||||||
style={{ cursor: "pointer" }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={() => handleSelect(emp)}
|
onClick={() => handleSelect(emp)}
|
||||||
>
|
>
|
||||||
{emp.firstName} {emp.lastName}
|
<div className="d-flex align-items-center px-0">
|
||||||
</li>
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0 me-2"
|
||||||
|
firstName={emp.firstName}
|
||||||
|
lastName={emp.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-muted">
|
||||||
|
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user