98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import React, { useEffect, useState, useCallback } from "react";
|
|
import Select from "../common/Select";
|
|
import Option from "../common/option";
|
|
import { GeneralIdRef, MakeGeneralIdRef } from "../../utils/GeneralIdRef";
|
|
import customFieldsService, {
|
|
CustomField,
|
|
} from "../../modules/manager/customfields/services/customFieldsService";
|
|
|
|
interface CustomFieldPickerProps {
|
|
name: string;
|
|
label: string;
|
|
error?: string;
|
|
value: any;
|
|
exclude?: CustomField[];
|
|
onChange?: (name: string, id: GeneralIdRef, displayValue: string) => void;
|
|
}
|
|
|
|
export default function CustomFieldPicker({
|
|
name,
|
|
label,
|
|
error,
|
|
value,
|
|
exclude,
|
|
onChange,
|
|
}: CustomFieldPickerProps) {
|
|
const [options, setOptions] = useState<Option[]>([]);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
const pagedData = await customFieldsService.getFields(
|
|
0,
|
|
10,
|
|
"name",
|
|
true,
|
|
);
|
|
if (pagedData) {
|
|
const opts: Option[] = (pagedData.data as any[]).map(
|
|
(x: { id: any; name: any }) => ({
|
|
_id: x.id,
|
|
name: x.name,
|
|
}),
|
|
);
|
|
setOptions(opts);
|
|
}
|
|
}
|
|
|
|
load();
|
|
}, []);
|
|
|
|
const getOptionById = useCallback(
|
|
(val: string) => {
|
|
for (const option of options) {
|
|
if (String(option._id) === val) return option.name;
|
|
}
|
|
return "";
|
|
},
|
|
[options],
|
|
);
|
|
|
|
const handleChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const input = e.currentTarget;
|
|
const generalIdRef = MakeGeneralIdRef(BigInt(input.value));
|
|
const displayValue = getOptionById(input.value);
|
|
|
|
if (onChange) onChange(input.name, generalIdRef, displayValue);
|
|
},
|
|
[onChange, getOptionById],
|
|
);
|
|
|
|
const getFilteredOptions = useCallback(() => {
|
|
return options.filter((o) => {
|
|
if (exclude) {
|
|
for (const excludedItem of exclude) {
|
|
const idAsString: string = String(excludedItem.id);
|
|
const oid: string = String(o._id);
|
|
if (oid === idAsString) return false;
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
}, [options, exclude]);
|
|
|
|
const filteredOptions = getFilteredOptions();
|
|
|
|
return (
|
|
<Select
|
|
name={name}
|
|
label={label}
|
|
error={error}
|
|
value={value?.id}
|
|
options={filteredOptions}
|
|
includeBlankFirstEntry={true}
|
|
onChange={handleChange}
|
|
/>
|
|
);
|
|
}
|