David
f6c6b8c95c
- Updated TeleworkAuthorizationForm, WorkProfileForm, PasswordForm, CredentialForm, UserForm, and various resource-related forms to use FormLabel instead of Label. - Introduced FormLabel component to encapsulate required indicator logic. - Removed optional labels from localization files and adjusted tests accordingly. - Ensured accessibility and consistency across forms by implementing required indicators visually.
119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import { FormLabel } from "@repo/rdx-ui/components/form-label";
|
|
import type { SelectAction } from "@repo/rdx-ui/components/select-with-action";
|
|
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
|
|
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
import { Textarea } from "@repo/shadcn-ui/components/textarea";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { AccessField, AccessFormValues } from "../helpers";
|
|
import type { Option } from "../types";
|
|
|
|
import { PermissionsControl } from "./permissions-control";
|
|
|
|
export function AccessFieldControl({
|
|
field,
|
|
id,
|
|
form,
|
|
value,
|
|
options,
|
|
disabled,
|
|
onSelected,
|
|
onCreate,
|
|
createDisabled = false,
|
|
createLabel,
|
|
}: {
|
|
field: AccessField;
|
|
id: string;
|
|
form: UseFormReturn<AccessFormValues>;
|
|
value: string | boolean | string[] | undefined;
|
|
options: readonly Option[];
|
|
disabled: boolean;
|
|
onSelected: (value: string) => void;
|
|
onCreate?: (() => void) | undefined;
|
|
createDisabled?: boolean;
|
|
createLabel?: string | undefined;
|
|
}) {
|
|
const { t } = useTranslation("access");
|
|
|
|
if (field.type === "boolean") {
|
|
return (
|
|
<SwitchField
|
|
checked={Boolean(value)}
|
|
disabled={disabled}
|
|
id={id}
|
|
label={t(field.key)}
|
|
onCheckedChange={(checked) => form.setValue(field.key, checked)}
|
|
/>
|
|
);
|
|
}
|
|
if (field.type === "permissions") {
|
|
return (
|
|
<PermissionsControl
|
|
fieldKey={field.key}
|
|
form={form}
|
|
id={id}
|
|
options={options}
|
|
required={field.required}
|
|
value={value}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<FormLabel htmlFor={id} required={field.required}>
|
|
{t(field.key)}
|
|
</FormLabel>
|
|
{field.type === "note" ? (
|
|
<Textarea id={id} maxLength={4000} rows={4} {...form.register(field.key)} />
|
|
) : field.type === "select" ? (
|
|
<SelectWithAction
|
|
action={selectAction(
|
|
onCreate,
|
|
createDisabled,
|
|
createLabel ?? t(quickAddLabel(field.key))
|
|
)}
|
|
disabled={disabled}
|
|
id={id}
|
|
label={t(field.key)}
|
|
onValueChange={onSelected}
|
|
options={options}
|
|
placeholder={t("choose")}
|
|
required={field.required ?? false}
|
|
value={stringValue(value)}
|
|
/>
|
|
) : (
|
|
<Input
|
|
id={id}
|
|
maxLength={field.key === "name" ? 100 : 255}
|
|
required={field.required}
|
|
type={field.type === "date" ? "date" : "text"}
|
|
{...form.register(field.key)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function stringValue(value: string | boolean | string[] | undefined) {
|
|
return typeof value === "string" ? value : "";
|
|
}
|
|
|
|
function quickAddLabel(key: string) {
|
|
return key === "systemId" ? "quickAddSystem" : "quickAddEnvironment";
|
|
}
|
|
|
|
function selectAction(
|
|
onClick: (() => void) | undefined,
|
|
disabled: boolean,
|
|
label: string
|
|
): SelectAction | undefined {
|
|
if (!onClick) {
|
|
return undefined;
|
|
}
|
|
|
|
return { onClick, disabled, label };
|
|
}
|