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.
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { FormLabel } from "@repo/rdx-ui/components/form-label";
|
|
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
|
|
import { Textarea } from "@repo/shadcn-ui/components/textarea";
|
|
import { useId } from "react";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { PersonProcessDTO, UpdateProcessInput } from "../../../../common/processes";
|
|
import { ProcessValuesSchema } from "../../../../common/processes";
|
|
import { processTaskTitle } from "../../shared/helpers";
|
|
|
|
export function ProcessTaskField({
|
|
index,
|
|
task,
|
|
form,
|
|
}: {
|
|
index: number;
|
|
task: PersonProcessDTO["values"]["tasks"][number];
|
|
form: UseFormReturn<UpdateProcessInput>;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
const prefix = useId();
|
|
const value = form.watch(`tasks.${index}.status`);
|
|
|
|
return (
|
|
<section className="rounded-md border p-3 space-y-3">
|
|
<div className="space-y-2">
|
|
<FormLabel htmlFor={`${prefix}-state`} required>
|
|
{processTaskTitle(task, t)}
|
|
</FormLabel>
|
|
<SelectWithAction
|
|
id={`${prefix}-state`}
|
|
label={task.title}
|
|
onValueChange={(value) => {
|
|
const parsed = ProcessValuesSchema.shape.tasks.element.shape.status.safeParse(value);
|
|
|
|
if (parsed.success) {
|
|
form.setValue(`tasks.${index}.status`, parsed.data);
|
|
}
|
|
}}
|
|
options={["pending", "done", "not_applicable"].map((value) => ({
|
|
value,
|
|
label: t(`processes.${value}`),
|
|
}))}
|
|
placeholder={t("mail.choose")}
|
|
required
|
|
value={value}
|
|
/>
|
|
</div>
|
|
<details>
|
|
<summary className="text-sm cursor-pointer">{t("processes.taskNotes")}</summary>
|
|
<div className="mt-2">
|
|
<FormLabel className="sr-only" htmlFor={`${prefix}-notes`}>
|
|
{t("processes.taskNotes")}: {task.title}
|
|
</FormLabel>
|
|
<Textarea
|
|
id={`${prefix}-notes`}
|
|
maxLength={4000}
|
|
rows={2}
|
|
{...form.register(`tasks.${index}.notes`)}
|
|
/>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
);
|
|
}
|