webui/src/components/pickers/RolePicker.tsx

68 lines
1.6 KiB
TypeScript

import React, { useEffect, useState, useCallback } from "react";
import Select from "../common/Select";
import Option from "../common/option";
import { GeneralIdRef } from "../../utils/GeneralIdRef";
import roleService from "../../modules/manager/domains/serrvices/rolesService";
interface RolePickerProps {
name: string;
label: string;
error?: string;
value: any;
domain: GeneralIdRef;
onChange?: (name: string, value: GeneralIdRef) => void;
includeLabel?: boolean;
}
export default function RolePicker({
name,
label,
error,
value,
domain,
onChange,
includeLabel = true,
}: RolePickerProps) {
const [options, setOptions] = useState<Option[] | undefined>(undefined);
useEffect(() => {
async function load() {
const pagedData = await roleService.getRoles(0, 10, "name", true, domain);
if (pagedData) {
const opts: Option[] = (pagedData.data as any[]).map((x) => ({
_id: x.id,
name: x.name,
}));
setOptions(opts);
}
}
load();
}, []);
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => {
const input = e.currentTarget;
const generalIdRef: GeneralIdRef = {
id: BigInt(input.value),
};
if (onChange) onChange(input.name, generalIdRef);
},
[onChange],
);
return (
<Select
name={name}
label={label}
error={error}
value={String(value?.id)}
options={options}
includeBlankFirstEntry={true}
onChange={handleChange}
includeLabel={includeLabel}
/>
);
}