57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import { Select, Tag } from "antd";
|
|
import React, { useEffect, useState, forwardRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
const { Option } = Select;
|
|
//To be used as a form element only.
|
|
|
|
const EmployeeSearchSelect = (
|
|
{ value, onChange, options, onSelect, onBlur },
|
|
ref
|
|
) => {
|
|
const [option, setOption] = useState(value);
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
if (onChange) {
|
|
onChange(option);
|
|
}
|
|
}, [option, onChange]);
|
|
|
|
return (
|
|
<Select
|
|
showSearch
|
|
value={option}
|
|
style={{
|
|
width: 400,
|
|
}}
|
|
onChange={setOption}
|
|
optionFilterProp='search'
|
|
onSelect={onSelect}
|
|
onBlur={onBlur}>
|
|
{options
|
|
? options.map((o) => (
|
|
<Option
|
|
key={o.id}
|
|
value={o.id}
|
|
search={`${o.employee_number} ${o.first_name} ${o.last_name}`}
|
|
discount={o.discount}>
|
|
<div style={{ display: "flex" }}>
|
|
{`${o.employee_number} ${o.first_name} ${o.last_name}`}
|
|
<Tag color='blue'>{o.cost_center}</Tag>
|
|
<Tag color='red'>
|
|
<CurrencyFormatter>{o.base_rate}</CurrencyFormatter>
|
|
</Tag>
|
|
<Tag color='green'>
|
|
{o.flat_rate
|
|
? t("timetickets.labels.flat_rate")
|
|
: t("timetickets.labels.straight_time")}
|
|
</Tag>
|
|
</div>
|
|
</Option>
|
|
))
|
|
: null}
|
|
</Select>
|
|
);
|
|
};
|
|
export default forwardRef(EmployeeSearchSelect);
|