David
dffb4b2794
- Implemented ProcessFeedback component for error handling in process forms. - Created ProcessHelp component to provide contextual assistance for users. - Added internationalization support for process-related strings in Spanish and English. - Developed ProcessStartForm for initiating new processes with person and template selection. - Introduced ProcessTemplateForm for creating and editing process templates. - Built ProcessTemplatesPage to display and manage process templates. - Enhanced ProcessesPage to list current processes and allow for creation and detail viewing. - Added unit tests for various components to ensure functionality and correctness.
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { Label } from "@repo/shadcn-ui/components/label";
|
|
import { SelectWithAction } from "@repo/shadcn-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,
|
|
ProcessValuesSchema,
|
|
type UpdateProcessInput,
|
|
} from "../../common/processes";
|
|
|
|
import { processTaskTitle } from "./process-labels";
|
|
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">
|
|
<Label htmlFor={`${prefix}-state`}>{processTaskTitle(task, t)}</Label>
|
|
<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")}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
<details>
|
|
<summary className="text-sm cursor-pointer">{t("processes.taskNotes")}</summary>
|
|
<div className="mt-2">
|
|
<Label className="sr-only" htmlFor={`${prefix}-notes`}>
|
|
{t("processes.taskNotes")}: {task.title}
|
|
</Label>
|
|
<Textarea
|
|
id={`${prefix}-notes`}
|
|
maxLength={4000}
|
|
rows={2}
|
|
{...form.register(`tasks.${index}.notes`)}
|
|
/>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
);
|
|
}
|