diff --git a/public/locales/en/raci.json b/public/locales/en/raci.json new file mode 100644 index 0000000..14a4aa5 --- /dev/null +++ b/public/locales/en/raci.json @@ -0,0 +1,6 @@ +{ + "Responsible": "Responsible", + "Accountable": "Accountable", + "Consulted": "Consulted", + "Informed": "Informed" +} diff --git a/src/components/pickers/RaciPicker.tsx b/src/components/pickers/RaciPicker.tsx new file mode 100644 index 0000000..e5fe41c --- /dev/null +++ b/src/components/pickers/RaciPicker.tsx @@ -0,0 +1,63 @@ +import React, { useEffect, useState, useCallback } from "react"; +import Select from "../common/Select"; +import Option from "../common/option"; +import { useTranslation } from "react-i18next"; +import { Namespaces } from "../../i18n/i18n"; + +interface RaciPickerProps { + name: string; + label: string; + error?: string; + value: any; + onChange?: (name: string, value: string) => void; + includeLabel?: boolean; +} + +export default function RaciPicker({ + name, + label, + error, + value, + onChange, + includeLabel = true, +}: RaciPickerProps) { + const [options, setOptions] = useState(undefined); + const { t } = useTranslation(Namespaces.Raci); + + useEffect(() => { + async function load() { + const opts: Option[] = [ + { _id: "Responsible", name: t("Responsible") }, + { _id: "Accountable", name: t("Accountable") }, + { _id: "Consulted", name: t("Consulted") }, + { _id: "Informed", name: t("Informed") }, + ]; + + setOptions(opts); + } + + load(); + }, [t]); + + const handleChange = useCallback( + (e: React.ChangeEvent) => { + const input = e.currentTarget; + + if (onChange) onChange(input.name, input.value); + }, + [onChange], + ); + + return ( + props.onChange(props.name, e.target.value)} - > - - - - - - - -); +import RaciPicker from "../../../../../components/pickers/RaciPicker"; // --------------------------- // Domain Interfaces @@ -146,6 +129,7 @@ export const AssigneesOfITaskAssigneeEditor: React.FC = (