webui/src/components/pickers/FormTemplatePicker.tsx

75 lines
1.8 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 formsService from "../../modules/manager/forms/services/formsService";
interface FormTemplatePickerProps {
includeLabel?: boolean;
name: string;
label: string;
error?: string;
value?: GeneralIdRef;
onChange?: (name: string, value: GeneralIdRef) => void;
}
export default function FormTemplatePicker({
includeLabel,
name,
label,
error,
value,
onChange,
}: FormTemplatePickerProps) {
const [options, setOptions] = useState<Option[]>([]);
useEffect(() => {
async function load() {
const formTemplates = await formsService.getForms(0, 10, "name", true);
if (formTemplates) {
const opts: Option[] = (formTemplates.data as any[]).map((x) => ({
_id: x.id,
name: x.name,
}));
setOptions(opts);
}
}
load();
}, []);
const doOnChange = useCallback(
(n: string, v: bigint) => {
const generalIdRef = MakeGeneralIdRef(v);
if (onChange) onChange(n, generalIdRef);
},
[onChange],
);
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => {
const input = e.currentTarget;
doOnChange(input.name, BigInt(input.value));
},
[doOnChange],
);
let id = "";
if (value !== undefined && !Number.isNaN(value.id)) {
id = String(value.id);
}
return (
<Select
includeLabel={includeLabel}
name={name}
label={label}
error={error}
value={id}
options={options}
includeBlankFirstEntry={true}
onChange={handleChange}
/>
);
}