refactor: replace Label component with FormLabel for consistent required indicator display

- 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.
This commit is contained in:
David Arranz 2026-10-15 18:02:32 +02:00
parent ba562ad06f
commit f6c6b8c95c
84 changed files with 640 additions and 327 deletions

View File

@ -11,6 +11,8 @@ No imprimir, copiar ni versionar .env locales o secretos.
`packages/shadcn-ui` contiene código de terceros/vendor. No refactorizar, reformatear, reorganizar ni modificar su implementación salvo instrucción explícita del usuario. Puede consultarse su API pública para integrarlo desde código propio.
`archive/` conserva funcionalidades retiradas y sus archivos de integración. No modificar ni aplicarles las convenciones del código activo. Su recuperación se documenta en [funcionalidades archivadas](docs/funcionalidades-archivadas.md).
## Convenciones
El espaciado vertical se define en `.lintrc`, cargado por `eslint.config.mjs`. Separar funciones, clases y métodos con una línea vacía; mantener agrupadas propiedades y firmas de sobrecarga. `pnpm format` combina Biome con estas reglas. Véase [formato y espaciado](docs/formato-y-espaciado-del-codigo.md).
@ -84,7 +86,7 @@ Las fuentes normativas se consultan, no se duplican:
Todo código web nuevo de módulos, entidades y operaciones debe seguir [la estructura web por entidades y operaciones](docs/estructura-web-por-entidades-y-operaciones.md): `modules/<module>/src/web/<entity>/<operation>/`, con ámbitos `shared` según sus consumidores e índices únicamente donde haya contenido exportable para otras unidades. Esta guía es la fuente normativa de la organización interna del frontend; no cambia las capas del servidor ni la implementación vendor.
React, TanStack Query, Tailwind y shadcn/ui (Base UI, estilo Vega). Los componentes compartidos viven en @repo/shadcn-ui. Incorporar TanStack Table y React Hook Form cuando haya consumidores.
React, TanStack Query, Tailwind y shadcn/ui (Base UI, estilo Vega). Los componentes propios compartidos viven en @repo/rdx-ui y reutilizan las primitivas vendor de @repo/shadcn-ui. TanStack Table y React Hook Form ya tienen consumidores; seguir los patrones existentes.
Estado remoto en TanStack Query; claves centralizadas e invalidación explícita después de mutaciones.
No duplicar estado remoto ni usar efectos para derivar valores calculables durante render.
Mantener accesibilidad y estados de carga, error, vacío y acciones deshabilitadas.
@ -94,7 +96,7 @@ Antes de crear o modificar pantallas, reconocer activamente patrones visuales y
Reutilizar y extender la biblioteca visual existente antes de duplicar estructura, estilos o comportamiento. Extraer componentes compartidos cuando haya repetición real: cabeceras, listados, formularios modales, grupos de campos, selectores con alta, estados y ayuda contextual.
Construir progresivamente una biblioteca visual básica con contratos claros, accesibilidad, textos traducibles y composición sencilla. Mantener los componentes genéricos independientes de entidades, DTO, consultas y endpoints de Metis Desk; el módulo consumidor aporta datos, textos y acciones. Documentar patrones y componentes en docs/componentes-de-interfaz.md y en el estándar correspondiente.
Preparar esa independencia para poder agrupar o extraer posteriormente componentes en un paquete reutilizable en otras aplicaciones. Aprovechar @repo/shadcn-ui y crear abstracciones conforme aparezcan consumidores reales.
Las pantallas de listado de entidades siguen [el patrón de listados](docs/patron-de-listados-de-entidades.md), reutilizando los componentes comunes de @repo/shadcn-ui.
Las pantallas de listado de entidades siguen [el patrón de listados](docs/patron-de-listados-de-entidades.md), reutilizando los componentes comunes de @repo/rdx-ui y las primitivas de @repo/shadcn-ui.
Los listados no muestran formularios de alta ni edición junto a los datos. El alta se inicia con un botón en la cabecera, a la derecha; formularios en modal shadcn/ui como norma general, con anchura y desplazamiento adaptados a su contenido. La edición se abre mediante una acción explícita, siguiendo el mismo criterio. Mantener foco, cierre por teclado, cancelación y errores dentro del formulario. Incluir ayuda contextual con finalidad, ámbito y ejemplos, sin rellenar los campos automáticamente. En formularios, colocar la ayuda en la parte inferior, inmediatamente antes del pie del modal con Guardar y Cancelar.
## Validación y entrega

View File

@ -21,4 +21,4 @@ Aplicación interna para soporte técnico a pequeñas empresas.
- [Traducciones de la interfaz](docs/traducciones.md)
- [Alcance y siguientes entregas](docs/plan-de-desarrollo.md)
Incluye acceso, sesiones persistentes, gestión de usuarios y compañías clientes con personas, departamentos, asignaciones con historial y sedes, junto con catálogos informáticos, cuentas, grupos, recursos, permisos y necesidades con cobertura calculada. También incluye inventario configurable, puestos con activos exclusivos y compartidos, perfiles de trabajo por persona y dispositivo, buzones independientes y correo POP/IMAP por perfil con periodos de uso e historial. Las configuraciones del entorno y los tickets se incorporarán progresivamente.
Incluye acceso, sesiones persistentes, gestión de usuarios y compañías clientes con personas, departamentos, asignaciones con historial y sedes, junto con catálogos informáticos, cuentas, grupos, recursos, permisos y necesidades con cobertura calculada. También incluye inventario configurable, puestos con activos exclusivos, perfiles de trabajo por persona y dispositivo, buzones independientes y correo POP/IMAP por perfil con periodos de uso e historial. Incluye configuraciones del entorno, teletrabajo, accesos remotos y procesos de personas. Consultar las [funcionalidades archivadas](docs/funcionalidades-archivadas.md) para el código retirado de la aplicación.

View File

@ -8,9 +8,10 @@ Las pruebas verifican comportamiento observable, no detalles internos.
- HTTP: middleware, entrada, contratos de salida, estados y autorización.
- Frontend: textos traducidos, estados y acciones observables.
Usar el runner nativo de Node.js con tsx. La primera prueba HTTP abre Express en un puerto efímero y usa fetch real. No necesita una base de datos ni espera tiempos arbitrarios.
La prueba web inicial usa renderizado React en servidor para verificar es/en y el estado pendiente.
No sustituye una prueba de interacción en navegador.
Usar el runner nativo de Node.js con tsx. Las pruebas HTTP técnicas abren Express en un puerto efímero y usan fetch real, sin necesitar base de datos. Las pruebas de persistencia utilizan MariaDB y exclusivamente la base de pruebas. No utilizar esperas arbitrarias.
Las pruebas web usan renderizado React en servidor para verificar es/en, estados y contratos observables. No sustituyen una prueba de interacción en navegador.
`archive/` queda fuera de la suite activa. Las pruebas de retirada comprueban la ausencia de las funciones archivadas y la conservación de los datos de las entidades activas.
Comprobaciones transversales: pnpm typecheck, pnpm lint, pnpm test, pnpm check y pnpm build.
Si una no se ejecuta o falla, documentar exactamente cuál y por qué.

View File

@ -582,3 +582,9 @@ un valor esté vacío, de su estado deshabilitado ni de que un booleano sea `fal
Los grupos de campos, como permisos, reutilizan `RequiredIndicator` en su leyenda,
sin marcar cada checkbox como obligatorio. La configuración de obligatoriedad de las
plantillas conserva sus switches y su significado.
`TemplateFieldSummary` aplica el mismo criterio en la consulta de plantillas: recibe
`requiredLabel` con el texto traducido de obligatoriedad solo si el campo es obligatorio.
Muestra el asterisco junto al nombre y conserva ese texto para lectores de pantalla.
Los campos optativos no muestran indicación de opcionalidad; tipo, unidad y avisos se
mantienen como metadatos de consulta.

View File

@ -15,6 +15,13 @@ El código está en [archive/tickets-and-interventions](../archive/tickets-and-i
Son referencias para reintegrar, no archivos que deban sobrescribirse.
- `manifest.json`: ruta original y SHA-256 de cada archivo conservado.
La comprobación documental del 15 de octubre de 2026 detecta dos entradas cuyo SHA-256
no coincide con el fichero conservado: `integration/modules/companies/src/common/locales/es.json`
y `integration/modules/companies/src/common/locales/en.json`. Ambos ficheros coinciden con
su versión en Git; la discrepancia del manifiesto ya existía y esta revisión no modifica
el archivo. Las otras 253 entradas coinciden. Revisar esas dos entradas antes de utilizar
el manifiesto como comprobación íntegra de una recuperación.
El archivo queda fuera de los workspaces de PNPM, del ámbito TypeScript y de Biome y
ESLint. Ningún archivo activo lo importa. No es un paquete ejecutable ni un flag.

View File

@ -29,7 +29,7 @@ Debes:
- evitar cambios puramente cosméticos sin beneficio real;
- evitar introducir nuevas abstracciones innecesarias.
La tarea consiste en revisar TODO el código propio relevante del repositorio, no únicamente los archivos modificados recientemente.
La tarea consiste en revisar TODO el código propio relevante de la aplicación activa, no únicamente los archivos modificados recientemente. Excluye `archive/`: conserva código retirado y referencias de integración, no implementaciones que deban refactorizarse ni instrucciones vigentes. Consulta [funcionalidades archivadas](../funcionalidades-archivadas.md) para su alcance.
No te limites a generar un informe de problemas: corrige los problemas que puedan resolverse de forma segura.
@ -716,4 +716,4 @@ No afirmes:
- haber corregido un problema que siga presente;
- haber ejecutado una comprobación que no hayas ejecutado.
El resultado debe dejar el código propio del repositorio progresivamente alineado con `AGENTS.md`, manteniendo el comportamiento existente y evitando refactorizaciones especulativas.
El resultado debe dejar el código propio del repositorio progresivamente alineado con `AGENTS.md`, manteniendo el comportamiento existente y evitando refactorizaciones especulativas.

View File

@ -51,14 +51,14 @@
"choose": "Choose a tool",
"chooseState": "Choose a status",
"newTool": "New tool",
"destination": "Identifier or destination (optional)",
"destination": "Identifier or destination",
"requiresVpn": "Requires VPN",
"preferred": "Preferred method",
"state": "Status",
"pending": "Pending configuration",
"available": "Available",
"retired": "Retired",
"notes": "Notes (optional)",
"notes": "Notes",
"empty": "No assistance methods recorded for this asset.",
"showRetired": "Include retired methods",
"history": "History",
@ -203,9 +203,9 @@
"newTemplate": "New template",
"editTemplate": "Edit template",
"name": "Name",
"description": "Description (optional)",
"description": "Description",
"type": "Data type",
"unit": "Unit (optional)",
"unit": "Unit",
"choices": "List values",
"choicesHelp": "Enter one value per line. Existing values are retained; you can add others.",
"text": "Text",
@ -251,10 +251,9 @@
"view": "View",
"close": "Close",
"viewDefinition": "{{name}}",
"optional": "Optional",
"remove": "Remove field: {{name}}",
"noFields": "Add at least one field. All fields are initially optional.",
"fieldHelpText": "Help text (optional)",
"fieldHelpText": "Help text",
"fieldHelpHint": "Shown next to the field when creating or editing an asset.",
"protected": "Built-in templates and fields can be edited in the global catalog. A field's data type remains fixed. You can change availability or create a template copy for a company.",
"helpTitle": "What is it for?",
@ -311,7 +310,7 @@
"title": "Template sections",
"add": "Add section",
"name": "Section name",
"description": "Description (optional)",
"description": "Description",
"ungrouped": "Unsectioned",
"moveUp": "Move up",
"moveDown": "Move down",
@ -339,7 +338,7 @@
"error": "The record could not be deleted. Please try again."
},
"templateIcon": {
"label": "Icon (optional)",
"label": "Icon",
"none": "No icon",
"help": "Visually identifies the template and its assets. You can change or remove it on custom templates.",
"options": {
@ -402,7 +401,7 @@
"broken": "Broken",
"technicalStatus": "Technical state",
"technicalStatusHelp": "Available and In use are calculated from active workstations. Breakdowns and maintenance retain existing assignments.",
"workstationPersonOptional": "Workstation owner (optional)",
"workstationPersonOptional": "Workstation owner",
"workstationNameBySite": "Workstation at {{site}}",
"workstationSteps": {
"label": "New workstation steps",

View File

@ -51,14 +51,14 @@
"choose": "Selecciona una herramienta",
"chooseState": "Selecciona un estado",
"newTool": "Nueva herramienta",
"destination": "Identificador o destino (opcional)",
"destination": "Identificador o destino",
"requiresVpn": "Requiere VPN",
"preferred": "Método preferido",
"state": "Estado",
"pending": "Pendiente de configurar",
"available": "Disponible",
"retired": "Retirado",
"notes": "Notas (opcional)",
"notes": "Notas",
"empty": "No hay métodos de asistencia registrados para este activo.",
"showRetired": "Mostrar métodos retirados",
"history": "Historial",
@ -203,9 +203,9 @@
"newTemplate": "Nueva plantilla",
"editTemplate": "Editar plantilla",
"name": "Nombre",
"description": "Descripción (opcional)",
"description": "Descripción",
"type": "Tipo de dato",
"unit": "Unidad (opcional)",
"unit": "Unidad",
"choices": "Valores de la lista",
"choicesHelp": "Escribe un valor por línea. Los valores existentes se conservan; puedes añadir otros.",
"text": "Texto",
@ -251,10 +251,9 @@
"view": "Ver",
"close": "Cerrar",
"viewDefinition": "{{name}}",
"optional": "Opcional",
"remove": "Retirar campo: {{name}}",
"noFields": "Añade al menos un campo. Todos son opcionales inicialmente.",
"fieldHelpText": "Texto de ayuda (opcional)",
"fieldHelpText": "Texto de ayuda",
"fieldHelpHint": "Se muestra junto al campo al crear o editar un activo.",
"protected": "Las plantillas y campos de serie se pueden editar desde el catálogo global. El tipo de dato de un campo se mantiene fijo. Puedes cambiar la disponibilidad o crear una copia de una plantilla para una compañía.",
"helpTitle": "¿Qué es y para qué sirve?",
@ -311,7 +310,7 @@
"title": "Secciones de la plantilla",
"add": "Añadir sección",
"name": "Nombre de la sección",
"description": "Descripción (opcional)",
"description": "Descripción",
"ungrouped": "Sin sección",
"moveUp": "Mover hacia arriba",
"moveDown": "Mover hacia abajo",
@ -339,7 +338,7 @@
"error": "No se ha podido eliminar el registro. Inténtalo de nuevo."
},
"templateIcon": {
"label": "Icono (opcional)",
"label": "Icono",
"none": "Sin icono",
"help": "Identifica visualmente la plantilla y sus activos. Puedes cambiarlo o quitarlo en las plantillas personalizadas.",
"options": {
@ -402,7 +401,7 @@
"broken": "Averiado",
"technicalStatus": "Estado técnico",
"technicalStatusHelp": "Disponible y En uso se calculan según los puestos activos. Una avería o mantenimiento conserva las asignaciones existentes.",
"workstationPersonOptional": "Responsable del puesto (opcional)",
"workstationPersonOptional": "Responsable del puesto",
"workstationNameBySite": "Puesto en {{site}}",
"workstationSteps": {
"label": "Pasos del nuevo puesto",

View File

@ -1,8 +1,8 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -39,7 +39,9 @@ export function RelationshipForm(props: RelationshipFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={`${id}-type`}>{t("relationshipType")}</Label>
<FormLabel htmlFor={`${id}-type`} required>
{t("relationshipType")}
</FormLabel>
<SelectWithAction
action={{ label: t("newRelation"), onClick: () => setQuick(true) }}
disabled={mutation.isPending || catalog.isPending}
@ -56,7 +58,9 @@ export function RelationshipForm(props: RelationshipFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-target`}>{t("targetAsset")}</Label>
<FormLabel htmlFor={`${id}-target`} required>
{t("targetAsset")}
</FormLabel>
<AssetSelect
companyId={companyId}
disabled={mutation.isPending || inventory.isPending}
@ -71,7 +75,7 @@ export function RelationshipForm(props: RelationshipFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-notes`}>{t("notes")}</Label>
<FormLabel htmlFor={`${id}-notes`}>{t("notes")}</FormLabel>
<Textarea
id={`${id}-notes`}
maxLength={10000}

View File

@ -13,6 +13,8 @@ export function AssetSelect(props: AssetSelectProps) {
props;
const { t } = useTranslation("assets");
const [open, setOpen] = useState(false);
const requiredDescriptionId = required ? `${id}-required` : undefined;
const descriptionIds = [describedBy, requiredDescriptionId].filter(Boolean).join(" ");
const displayValue =
props.mode === "multiple"
? props.value.length
@ -25,7 +27,7 @@ export function AssetSelect(props: AssetSelectProps) {
<>
<ButtonGroup aria-label={label} className="w-full min-w-0">
<Button
aria-describedby={describedBy}
aria-describedby={descriptionIds || undefined}
aria-haspopup="dialog"
aria-invalid={invalid || undefined}
aria-label={label}
@ -37,7 +39,11 @@ export function AssetSelect(props: AssetSelectProps) {
variant="outline"
>
{displayValue}
{required && <span className="sr-only">{t("assetPicker.required")}</span>}
{required && (
<span className="sr-only" id={requiredDescriptionId}>
{t("assetPicker.required")}
</span>
)}
</Button>
{props.mode !== "multiple" && !required && props.value && (
<Button

View File

@ -363,11 +363,7 @@ test("alta de puesto: sede única automática, responsable opcional y cuatro pas
);
assert.ok(html.includes("Sede única test"));
assert.ok(
html.includes(
language === "es" ? "Responsable del puesto (opcional)" : "Workstation owner (optional)"
)
);
assert.ok(html.includes(language === "es" ? "Responsable del puesto" : "Workstation owner"));
assert.ok(html.includes(language === "es" ? "Paso 1 de 4" : "Step 1 of 4"));
assert.ok(html.includes('aria-current="step"'));
assert.equal(html.includes(language === "es" ? ">Guardar<" : ">Save<"), false);
@ -511,6 +507,42 @@ test("texto largo: área editable con ayuda accesible", async () => {
assert.match(markup, /Puertos y velocidades admitidas/);
});
test("las características marcan solo los campos obligatorios y conservan unidad y ayuda", async () => {
for (const required of [true, false]) {
const markup = await render(
"es",
<AssetCharacteristicControl
disabled={false}
field={{
fieldId: "0199b200-0000-7000-8000-000000000099",
name: "Capacidad",
type: "number",
unit: "GB",
choices: [],
required,
}}
helpText="Capacidad total"
onChange={() => undefined}
prefix="capacity"
value={0}
/>
);
const label = markup.match(/<label\b[^>]*>[\s\S]*?<\/label>/)?.[0];
const input = markup.match(/<input\b[^>]*>/)?.[0];
assert.ok(label);
assert.ok(label.includes("Capacidad (GB)"));
assert.equal(label.includes('data-slot="required-indicator"'), required);
assert.ok(input);
assert.ok(input.includes('value="0"'));
assert.equal(input.includes('required=""'), required);
assert.ok(
input.includes('aria-describedby="capacity-0199b200-0000-7000-8000-000000000099-help"')
);
assert.ok(markup.includes("Capacidad total"));
}
});
test("el resumen usa los campos propios de la plantilla, omite vacíos y texto largo y limita a cuatro", async () => {
const fields = [
{ name: "Modelo", type: "text", unit: "", value: " ThinkCentre " },

View File

@ -1,7 +1,7 @@
import { FieldHelp, fieldHelpId } from "@repo/rdx-ui/components/field-help";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useTranslation } from "react-i18next";
@ -28,11 +28,13 @@ export function AssetCharacteristicControl({
const id = `${prefix}-${field.fieldId}`;
const describedBy = fieldHelpId(id, helpText);
const displayValue = value === undefined ? "" : String(value);
const label = `${field.name}${field.unit ? ` (${field.unit})` : ""}${field.required ? " *" : ""}`;
const label = `${field.name}${field.unit ? ` (${field.unit})` : ""}`;
return (
<div className="space-y-2">
<Label htmlFor={id}>{label}</Label>
<FormLabel htmlFor={id} required={field.required}>
{label}
</FormLabel>
{field.type === "choice" || field.type === "boolean" ? (
<SelectWithAction
describedBy={describedBy}

View File

@ -1,12 +1,12 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { FormSection } from "@repo/rdx-ui/components/form-section";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { TabbedFieldSections } from "@repo/rdx-ui/components/tabbed-field-sections";
import { fieldHelpById } from "@repo/rdx-ui/lib/field-help";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import type { FormEvent } from "react";
import { useId } from "react";
@ -79,7 +79,9 @@ export function AssetForm(props: AssetFormProps) {
<FormSection title={t("formLayout.identity")} variant="plain">
<div className="grid gap-x-5 gap-y-4 @min-[560px]:grid-cols-2 @min-[1100px]:grid-cols-4">
<div className="space-y-2">
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${prefix}-name`} required>
{t("name")}
</FormLabel>
<Input
id={`${prefix}-name`}
maxLength={100}
@ -88,7 +90,9 @@ export function AssetForm(props: AssetFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
<FormLabel htmlFor={`${prefix}-template`} required>
{t("template")}
</FormLabel>
<SelectWithAction
action={
asset || !allowQuickCreate
@ -115,7 +119,9 @@ export function AssetForm(props: AssetFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-status`}>{t("technicalStatus")}</Label>
<FormLabel htmlFor={`${prefix}-status`} required>
{t("technicalStatus")}
</FormLabel>
<SelectWithAction
describedBy={`${prefix}-status-help`}
disabled={mutation.isPending}
@ -135,7 +141,7 @@ export function AssetForm(props: AssetFormProps) {
</p>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
<FormLabel htmlFor={`${prefix}-site`}>{t("site")}</FormLabel>
<SelectWithAction
{...selectProps}
action={
@ -203,7 +209,7 @@ export function AssetForm(props: AssetFormProps) {
</FormSection>
)}
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={10000}

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -34,7 +34,9 @@ export function BrandForm(props: BrandFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending || isReadingLogo}>
<div className="space-y-2">
<Label htmlFor={id}>{t("name")}</Label>
<FormLabel htmlFor={id} required>
{t("name")}
</FormLabel>
<Input
id={id}
maxLength={100}

View File

@ -1,6 +1,6 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -24,7 +24,7 @@ export function BrandLogoField({
return (
<div className="space-y-2">
<Label htmlFor={id}>{t("brands.logo.label")}</Label>
<FormLabel htmlFor={id}>{t("brands.logo.label")}</FormLabel>
<BrandLogo logoSvg={logoSvg} name={name} />
<Input
accept="image/svg+xml,.svg"

View File

@ -1,7 +1,7 @@
import { FieldHelp, fieldHelpId } from "@repo/rdx-ui/components/field-help";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { useTranslation } from "react-i18next";
import { useBrandSelectController } from "../controllers";
@ -26,7 +26,9 @@ export function BrandSelect(props: BrandSelectProps) {
return (
<div className="space-y-2">
<Label htmlFor={id}>{label}</Label>
<FormLabel htmlFor={id} required={required}>
{label}
</FormLabel>
<SelectWithAction
action={
allowQuickCreate ? { label: t("brands.new"), onClick: () => setOpen(true) } : undefined

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -23,11 +23,15 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
<FormLabel htmlFor={`${id}-type`} required>
{t("type")}
</FormLabel>
<SelectWithAction
disabled={!!item || mutation.isPending}
id={`${id}-type`}
@ -46,18 +50,20 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
<FormLabel htmlFor={`${id}-unit`}>{t("unit")}</FormLabel>
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
</div>
{type === "choice" && (
<div className="space-y-2">
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
<FormLabel htmlFor={`${id}-choices`} required>
{t("choices")}
</FormLabel>
<Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
<p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-description`}>{t("fieldHelpText")}</Label>
<FormLabel htmlFor={`${id}-description`}>{t("fieldHelpText")}</FormLabel>
<Textarea
aria-describedby={`${id}-description-hint`}
id={`${id}-description`}

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -22,7 +22,9 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={id}>{t("name")}</Label>
<FormLabel htmlFor={id} required>
{t("name")}
</FormLabel>
<Input
id={id}
maxLength={100}
@ -50,7 +52,9 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
/>
{!symmetric && (
<div className="space-y-2">
<Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
<FormLabel htmlFor={`${id}-inverse`} required>
{t("inverseName")}
</FormLabel>
<Input
id={`${id}-inverse`}
maxLength={100}
@ -60,7 +64,7 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
<FormLabel htmlFor={`${id}-description`}>{t("description")}</FormLabel>
<Textarea id={`${id}-description`} maxLength={1000} {...form.register("description")} />
</div>
<CatalogError

View File

@ -1,12 +1,12 @@
import { UniqueID } from "@repo/rdx-ddd";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { IconPicker } from "@repo/rdx-ui/components/icon-picker";
import { TemplateMetadataSection } from "@repo/rdx-ui/components/template-metadata-section";
import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-sections-editor";
import { XIcon } from "@repo/rdx-ui/lib/icons";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -47,7 +47,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
<TemplateMetadataSection
descriptionField={
<>
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
<FormLabel htmlFor={`${id}-description`}>{t("description")}</FormLabel>
<Textarea
className="min-h-24 flex-1"
id={`${id}-description`}
@ -60,7 +60,9 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
primaryFields={
<>
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<IconPicker

View File

@ -91,7 +91,7 @@ export function CatalogDefinitionDialog({
}
name={field?.values.name ?? binding.fieldId}
notice={field && !field.effectiveActive ? t("disabledField") : undefined}
requirement={t(binding.required ? "required" : "optional")}
requiredLabel={binding.required ? t("required") : undefined}
/>
);
}}

View File

@ -86,8 +86,8 @@ test("las plantillas ofrecen selección visual traducida y conservan el icono al
assert.ok(laptop);
for (const [language, label, none] of [
["es", "Icono (opcional)", "Sin icono"],
["en", "Icon (optional)", "No icon"],
["es", "Icono", "Sin icono"],
["en", "Icon", "No icon"],
]) {
assert.ok(language && label && none);
const html = await render(

View File

@ -50,7 +50,7 @@ test("asistencia: formulario con alta rápida y ayuda antes de guardar", async (
);
assert.ok(html.includes("Nueva herramienta"));
assert.ok(html.includes("Identificador o destino (opcional)"));
assert.ok(html.includes("Identificador o destino"));
assert.ok(html.indexOf("¿Para qué sirve este método?") < html.indexOf("Guardar"));
assert.equal(html.includes('type="password"'), false);
assert.ok(html.includes("Requiere VPN"));

View File

@ -1,9 +1,9 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -26,7 +26,9 @@ export function SupportForm(props: SupportFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={prefix}>{t("support.tool")}</Label>
<FormLabel htmlFor={prefix} required>
{t("support.tool")}
</FormLabel>
<SelectWithAction
action={{ label: t("support.newTool"), onClick: () => setQuick(true) }}
id={prefix}
@ -36,11 +38,12 @@ export function SupportForm(props: SupportFormProps) {
.filter((item) => item.active || item.id === connection?.values.resourceId)
.map((item) => ({ value: item.id, label: item.name }))}
placeholder={t("support.choose")}
required
value={values.resourceId}
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
<FormLabel htmlFor={`${prefix}-destination`}>{t("support.destination")}</FormLabel>
<Input
id={`${prefix}-destination`}
maxLength={300}
@ -48,7 +51,9 @@ export function SupportForm(props: SupportFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("support.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("support.state")}
@ -65,6 +70,7 @@ export function SupportForm(props: SupportFormProps) {
label: t(`support.${state}`),
}))}
placeholder={t("support.chooseState")}
required
value={values.state}
/>
</div>
@ -82,7 +88,7 @@ export function SupportForm(props: SupportFormProps) {
onCheckedChange={(preferred) => form.setValue("preferred", preferred)}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("support.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("support.notes")}</FormLabel>
<textarea
className="min-h-24 w-full rounded-md border bg-background px-3 py-2 text-sm"
id={`${prefix}-notes`}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { useTranslation } from "react-i18next";
import type { AssetDTO } from "../../../../common/inventory";
@ -36,7 +36,7 @@ export function WorkstationAssetFields({
return (
<div className="space-y-2">
<Label htmlFor={`${prefix}-assets`}>{t("addWorkstationAsset")}</Label>
<FormLabel htmlFor={`${prefix}-assets`}>{t("addWorkstationAsset")}</FormLabel>
<AssetSelect
action={{ label: t("newAsset"), onClick: onCreate, disabled: !canCreate }}
companyId={companyId}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import { useTranslation } from "react-i18next";
import type { WorkstationInput } from "../../../../common";
@ -29,7 +29,9 @@ export function WorkstationAssociationFields({
return (
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
<FormLabel htmlFor={`${prefix}-site`} required={required}>
{t("site")}
</FormLabel>
<SelectWithAction
action={{
label: t("newSite"),
@ -45,7 +47,7 @@ export function WorkstationAssociationFields({
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-person`}>{t("workstationPersonOptional")}</Label>
<FormLabel htmlFor={`${prefix}-person`}>{t("workstationPersonOptional")}</FormLabel>
<SelectWithAction
action={{
label: t("newPerson"),

View File

@ -1,4 +1,4 @@
import { Label } from "@repo/shadcn-ui/components/label";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { useTranslation } from "react-i18next";
import type { WorkstationInput } from "../../../../common";
@ -28,7 +28,9 @@ export function WorkstationComputerField({
return (
<div className="space-y-2">
<Label htmlFor={`${prefix}-computer`}>{t("workstationComputer")}</Label>
<FormLabel htmlFor={`${prefix}-computer`} required={required}>
{t("workstationComputer")}
</FormLabel>
<AssetSelect
companyId={companyId}
disabled={singleComputer}

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { FormProgress } from "@repo/rdx-ui/components/form-progress";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -106,7 +106,9 @@ export function WorkstationForm(props: WorkstationFormProps) {
{layout.summary && (
<>
<div className="space-y-2">
<Label htmlFor={prefix}>{t("name")}</Label>
<FormLabel htmlFor={prefix} required>
{t("name")}
</FormLabel>
<Input id={prefix} maxLength={100} required {...form.register("name")} />
</div>
{isWizard ? (

View File

@ -142,7 +142,7 @@
"asset": "Specific device",
"resource": "Specific resource",
"target": "Target",
"site": "Site (optional)",
"site": "Site",
"allCompany": "Company network",
"method": "Method or tool",
"methodExample": "VPN, RDP, AnyDesk…",
@ -184,9 +184,9 @@
"edit": "Edit telework authorization",
"person": "Person",
"active": "Active authorization",
"startsOn": "Valid from (optional)",
"expiresOn": "Valid through (optional)",
"notes": "Notes (optional)",
"startsOn": "Valid from",
"expiresOn": "Valid through",
"notes": "Notes",
"authorized": "Authorized",
"scheduled": "Scheduled",
"expired": "Expired",
@ -262,7 +262,7 @@
"edit": "Edit certificate configuration",
"resource": "Digital certificate",
"newResource": "New digital certificate",
"location": "Store or location (optional)",
"location": "Store or location",
"expiryValue": "Expires: {{date}}",
"expired": "Expired",
"locationValue": "Location: {{location}}",
@ -298,7 +298,7 @@
"delivery": "Usage",
"installed": "Installed on device",
"web": "Web access",
"version": "Version (optional)",
"version": "Version",
"versionValue": "Version: {{version}}",
"search": "Search application, profile, person or device…",
"empty": "No applications have been registered for these profiles yet.",
@ -374,7 +374,7 @@
"address": "Email address",
"method": "Access method",
"state": "Status",
"notes": "Notes (optional)",
"notes": "Notes",
"pop": "POP",
"imap": "IMAP",
"exchange": "Exchange",
@ -433,8 +433,8 @@
"kind": "Mailbox type",
"corporate": "Corporate",
"external": "External",
"context": "Context (optional)",
"account": "Related IT account (optional)",
"context": "Context",
"account": "Related IT account",
"noAccount": "No related account",
"active": "Active mailbox",
"linkPerson": "Link person",
@ -442,7 +442,7 @@
"recordUse": "Record external email usage",
"useMissing": "First record this mailbox's usage period for the profile's person.",
"start": "From",
"end": "Until (optional; end day excluded)",
"end": "Until (end day excluded)",
"openPeriod": "No end date",
"closeUse": "End usage",
"help": "What is a mailbox?",
@ -463,7 +463,7 @@
"need": "Access requirement",
"newNeed": "New access requirement",
"path": "Shared path",
"letter": "Drive letter (optional)",
"letter": "Drive letter",
"noLetter": "Direct path access, no drive letter",
"currentPath": "Current resource path",
"useCurrentPath": "Use current path",
@ -501,12 +501,12 @@
"name": "Profile name",
"person": "Person",
"asset": "Device",
"account": "Sign-in account (optional)",
"account": "Sign-in account",
"noAccount": "No recorded account",
"active": "Current profile",
"inactive": "Archived profile",
"choose": "Choose an item",
"notes": "Notes (optional)",
"notes": "Notes",
"search": "Search by profile, person or device",
"empty": "This company has no user profiles yet.",
"history": "Details and history",
@ -593,9 +593,9 @@
"newPerson": "New person",
"editPerson": "Edit person",
"backToPeople": "Back to people",
"generalPosition": "General job title (optional)",
"emailOptional": "Email (optional)",
"phoneOptional": "Phone (optional)",
"generalPosition": "General job title",
"emailOptional": "Email",
"phoneOptional": "Phone",
"activePerson": "Active person",
"inactivePerson": "Inactive person",
"isContact": "Company contact",
@ -621,9 +621,9 @@
"editAssignment": "Edit assignment",
"noAssignments": "This person has no department assignments yet.",
"chooseDepartment": "Choose a department",
"departmentPosition": "Department job title (optional)",
"departmentPosition": "Department job title",
"startDate": "Start date",
"endDate": "End date (optional)",
"endDate": "End date",
"primary": "Primary",
"primaryDepartment": "Primary department",
"assignmentHelp": "Without an end date, the assignment remains open. To record a new job period, close this assignment and create the next one; both may use the same day. Edits retain history.",
@ -653,7 +653,7 @@
"position": "Job title",
"email": "Email",
"phone": "Phone",
"addressOptional": "Address (optional)",
"addressOptional": "Address",
"addressHelp": "Enter multiple lines, up to 10,000 characters.",
"noAddress": "No address",
"empty": "No companies yet. Create the first one to add contacts and sites.",
@ -721,7 +721,7 @@
"changePhoto": "Change photo",
"photoHelp": "PNG, JPEG or WebP. The photo is applied when you save."
},
"photoOptional": "Photo (optional)",
"photoOptional": "Photo",
"deleteRecord": {
"title": "Delete record",
"description": "This record and its history will be deleted. Related assets, resources, accounts and people will be preserved. This action cannot be undone.",
@ -761,7 +761,7 @@
"examples": "Examples: Windows 11 Pro 24H2, Thunderbird 140 or Microsoft 365 Apps.",
"showClosed": "Include removed and never configured installations",
"newOs": "New operating system",
"license": "Linked license (optional)",
"license": "Linked license",
"licenseColumn": "License",
"noLicense": "No linked license",
"licenseHelp": "Informational reference to a license belonging to this company. It does not reserve seats or confirm coverage for this product or device. Leave it empty for free software or when the license is not yet known.",
@ -907,7 +907,6 @@
"search": "Search",
"empty": "No entries in this section yet.",
"choose": "Choose an option",
"optional": " (optional)",
"save": "Save",
"saving": "Saving…",
"cancel": "Cancel",
@ -1001,4 +1000,4 @@
"INTERNAL_ERROR": "The action could not be completed."
}
}
}
}

View File

@ -142,7 +142,7 @@
"asset": "Equipo concreto",
"resource": "Recurso concreto",
"target": "Destino",
"site": "Sede (opcional)",
"site": "Sede",
"allCompany": "Red de la compañía",
"method": "Método o herramienta",
"methodExample": "VPN, RDP, AnyDesk…",
@ -184,9 +184,9 @@
"edit": "Editar autorización de teletrabajo",
"person": "Persona",
"active": "Autorización activa",
"startsOn": "Válida desde (opcional)",
"expiresOn": "Válida hasta (opcional)",
"notes": "Notas (opcional)",
"startsOn": "Válida desde",
"expiresOn": "Válida hasta",
"notes": "Notas",
"authorized": "Autorizada",
"scheduled": "Programada",
"expired": "Caducada",
@ -262,7 +262,7 @@
"edit": "Editar configuración de certificado",
"resource": "Certificado digital",
"newResource": "Nuevo certificado digital",
"location": "Almacén o ubicación (opcional)",
"location": "Almacén o ubicación",
"expiryValue": "Caducidad: {{date}}",
"expired": "Caducado",
"locationValue": "Ubicación: {{location}}",
@ -298,7 +298,7 @@
"delivery": "Forma de uso",
"installed": "Instalada en el equipo",
"web": "Acceso web",
"version": "Versión (opcional)",
"version": "Versión",
"versionValue": "Versión: {{version}}",
"search": "Buscar aplicación, perfil, persona o equipo…",
"empty": "Todavía no hay aplicaciones registradas en estos perfiles.",
@ -374,7 +374,7 @@
"address": "Dirección de correo",
"method": "Método de acceso",
"state": "Estado",
"notes": "Notas (opcional)",
"notes": "Notas",
"pop": "POP",
"imap": "IMAP",
"exchange": "Exchange",
@ -433,8 +433,8 @@
"kind": "Tipo de buzón",
"corporate": "Corporativo",
"external": "Externo",
"context": "Contexto (opcional)",
"account": "Cuenta informática relacionada (opcional)",
"context": "Contexto",
"account": "Cuenta informática relacionada",
"noAccount": "Sin cuenta relacionada",
"active": "Buzón activo",
"linkPerson": "Vincular persona",
@ -442,7 +442,7 @@
"recordUse": "Registrar uso de correo externo",
"useMissing": "Registra primero el periodo de uso de este buzón por la persona del perfil.",
"start": "Desde",
"end": "Hasta (opcional; día de fin excluido)",
"end": "Hasta (día de fin excluido)",
"openPeriod": "Sin fecha de fin",
"closeUse": "Finalizar uso",
"help": "¿Qué es un buzón de correo?",
@ -463,7 +463,7 @@
"need": "Necesidad de acceso",
"newNeed": "Nueva necesidad de acceso",
"path": "Ruta compartida",
"letter": "Letra de unidad (opcional)",
"letter": "Letra de unidad",
"noLetter": "Acceso por ruta, sin letra",
"currentPath": "Ruta actual del recurso",
"useCurrentPath": "Utilizar la ruta actual",
@ -501,12 +501,12 @@
"name": "Nombre del perfil",
"person": "Persona",
"asset": "Dispositivo",
"account": "Cuenta de inicio de sesión (opcional)",
"account": "Cuenta de inicio de sesión",
"noAccount": "Sin cuenta registrada",
"active": "Perfil vigente",
"inactive": "Perfil archivado",
"choose": "Selecciona un elemento",
"notes": "Notas (opcional)",
"notes": "Notas",
"search": "Buscar por perfil, persona o dispositivo",
"empty": "Esta compañía todavía no tiene perfiles de usuario.",
"history": "Ficha e historial",
@ -593,9 +593,9 @@
"newPerson": "Nueva persona",
"editPerson": "Editar persona",
"backToPeople": "Volver a personas",
"generalPosition": "Puesto general (opcional)",
"emailOptional": "Email (opcional)",
"phoneOptional": "Teléfono (opcional)",
"generalPosition": "Puesto general",
"emailOptional": "Email",
"phoneOptional": "Teléfono",
"activePerson": "Persona activa",
"inactivePerson": "Persona inactiva",
"isContact": "Contacto de la compañía",
@ -621,9 +621,9 @@
"editAssignment": "Editar asignación",
"noAssignments": "Esta persona todavía no tiene departamentos asignados.",
"chooseDepartment": "Selecciona un departamento",
"departmentPosition": "Puesto en el departamento (opcional)",
"departmentPosition": "Puesto en el departamento",
"startDate": "Fecha de inicio",
"endDate": "Fecha de fin (opcional)",
"endDate": "Fecha de fin",
"primary": "Principal",
"primaryDepartment": "Departamento principal",
"assignmentHelp": "Sin fecha de fin, la asignación sigue abierta. Para registrar un cambio de puesto con un nuevo periodo, cierra esta asignación y crea la siguiente; puedes usar el mismo día. Las ediciones conservan su historial.",
@ -653,7 +653,7 @@
"position": "Puesto",
"email": "Email",
"phone": "Teléfono",
"addressOptional": "Dirección (opcional)",
"addressOptional": "Dirección",
"addressHelp": "Puedes introducir varias líneas, hasta 10.000 caracteres.",
"noAddress": "Sin dirección",
"empty": "Todavía no hay compañías. Crea la primera para añadir contactos y sedes.",
@ -721,7 +721,7 @@
"changePhoto": "Cambiar foto",
"photoHelp": "PNG, JPEG o WebP. La foto se aplica al guardar."
},
"photoOptional": "Foto (opcional)",
"photoOptional": "Foto",
"deleteRecord": {
"title": "Eliminar registro",
"description": "Se eliminarán este registro y su historial. Los activos, recursos, cuentas y personas relacionados se conservarán. Esta acción no se puede deshacer.",
@ -761,7 +761,7 @@
"examples": "Ejemplos: Windows 11 Pro 24H2, Thunderbird 140 o Microsoft 365 Apps.",
"showClosed": "Mostrar también las retiradas y nunca configuradas",
"newOs": "Nuevo sistema operativo",
"license": "Licencia vinculada (opcional)",
"license": "Licencia vinculada",
"licenseColumn": "Licencia",
"noLicense": "Sin licencia vinculada",
"licenseHelp": "Referencia informativa a una licencia de esta compañía. No reserva plazas ni confirma que la licencia cubra este producto o equipo. Puedes dejarla vacía para software gratuito o si aún no se conoce.",
@ -907,7 +907,6 @@
"search": "Buscar",
"empty": "Todavía no hay elementos en esta sección.",
"choose": "Selecciona una opción",
"optional": " (opcional)",
"save": "Guardar",
"saving": "Guardando…",
"cancel": "Cancelar",
@ -1001,4 +1000,4 @@
"INTERNAL_ERROR": "No se ha podido completar la operación."
}
}
}
}

View File

@ -1,7 +1,7 @@
import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -32,7 +32,9 @@ export function QuickCreateDialog(props: QuickCreateDialogProps) {
</p>
)}
<div className="space-y-2">
<Label htmlFor={id}>{t("name")}</Label>
<FormLabel htmlFor={id} required>
{t("name")}
</FormLabel>
<Input
id={id}
maxLength={100}

View File

@ -1,8 +1,8 @@
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 { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -55,6 +55,7 @@ export function AccessFieldControl({
form={form}
id={id}
options={options}
required={field.required}
value={value}
/>
);
@ -62,10 +63,9 @@ export function AccessFieldControl({
return (
<div className="space-y-2">
<Label htmlFor={id}>
<FormLabel htmlFor={id} required={field.required}>
{t(field.key)}
{field.required ? "" : t("optional")}
</Label>
</FormLabel>
{field.type === "note" ? (
<Textarea id={id} maxLength={4000} rows={4} {...form.register(field.key)} />
) : field.type === "select" ? (
@ -81,6 +81,7 @@ export function AccessFieldControl({
onValueChange={onSelected}
options={options}
placeholder={t("choose")}
required={field.required ?? false}
value={stringValue(value)}
/>
) : (

View File

@ -1,6 +1,7 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { FormSectionTitle } from "@repo/rdx-ui/components/form-section-title";
import { RequiredIndicator } from "@repo/rdx-ui/components/required-indicator";
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -13,19 +14,23 @@ export function PermissionsControl({
value,
options,
form,
required,
}: {
fieldKey: string;
id: string;
value: string | boolean | string[] | undefined;
options: readonly Option[];
form: UseFormReturn<AccessFormValues>;
required?: boolean | undefined;
}) {
const { t } = useTranslation("access");
const values = Array.isArray(value) ? value : [];
return (
<fieldset className="space-y-2">
<FormSectionTitle as="legend">{t(fieldKey)}</FormSectionTitle>
<FormSectionTitle as="legend">
{t(fieldKey)} {required && <RequiredIndicator />}
</FormSectionTitle>
{options.map((option) => (
<div className="flex items-center gap-2" key={option.value}>
<Checkbox
@ -38,7 +43,7 @@ export function PermissionsControl({
)
}
/>
<Label htmlFor={`${id}-${option.value}`}>{option.label}</Label>
<FormLabel htmlFor={`${id}-${option.value}`}>{option.label}</FormLabel>
</div>
))}
{!options.length && <p className="text-sm text-muted-foreground">{t("noPermissions")}</p>}

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -51,7 +51,9 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
<FormLabel htmlFor={`${prefix}-profile`} required>
{t("mail.profile")}
</FormLabel>
<SelectWithAction
action={
fixed
@ -69,7 +71,9 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-resource`}>{t("applications.resource")}</Label>
<FormLabel htmlFor={`${prefix}-resource`} required>
{t("applications.resource")}
</FormLabel>
<SelectWithAction
action={
configuration
@ -94,7 +98,9 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-delivery`}>{t("applications.delivery")}</Label>
<FormLabel htmlFor={`${prefix}-delivery`} required>
{t("applications.delivery")}
</FormLabel>
<SelectWithAction
id={`${prefix}-delivery`}
label={t("applications.delivery")}
@ -109,7 +115,9 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -123,7 +131,7 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
</div>
{values.delivery === "installed" && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
<FormLabel htmlFor={`${prefix}-version`}>{t("applications.version")}</FormLabel>
<Input
id={`${prefix}-version`}
maxLength={100}
@ -133,7 +141,7 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,9 +1,9 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -25,7 +25,9 @@ export function AssignmentForm(props: AssignmentFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={`${id}-department`}>{t("department")}</Label>
<FormLabel htmlFor={`${id}-department`} required>
{t("department")}
</FormLabel>
<SelectWithAction
action={
assignment
@ -54,16 +56,18 @@ export function AssignmentForm(props: AssignmentFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-position`}>{t("departmentPosition")}</Label>
<FormLabel htmlFor={`${id}-position`}>{t("departmentPosition")}</FormLabel>
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
</div>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${id}-start`}>{t("startDate")}</Label>
<FormLabel htmlFor={`${id}-start`} required>
{t("startDate")}
</FormLabel>
<Input id={`${id}-start`} required type="date" {...form.register("startDate")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-end`}>{t("endDate")}</Label>
<FormLabel htmlFor={`${id}-end`}>{t("endDate")}</FormLabel>
<Input
id={`${id}-end`}
min={form.watch("startDate")}

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -50,7 +50,9 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
<FormLabel htmlFor={`${prefix}-profile`} required>
{t("mail.profile")}
</FormLabel>
<SelectWithAction
action={
fixed
@ -68,7 +70,9 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-resource`}>{t("certificates.resource")}</Label>
<FormLabel htmlFor={`${prefix}-resource`} required>
{t("certificates.resource")}
</FormLabel>
<SelectWithAction
action={
configuration
@ -93,7 +97,9 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -106,7 +112,7 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
</div>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-location`}>{t("certificates.location")}</Label>
<FormLabel htmlFor={`${prefix}-location`}>{t("certificates.location")}</FormLabel>
<Input
id={`${prefix}-location`}
maxLength={255}
@ -115,7 +121,7 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,6 +1,6 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";
@ -29,7 +29,7 @@ export function CompanyLogoField({
return (
<div className="space-y-2">
<Label htmlFor={id}>{t("logo.label")}</Label>
<FormLabel htmlFor={id}>{t("logo.label")}</FormLabel>
<div className="flex items-center gap-3">
<CompanyAvatar
aria-hidden="true"

View File

@ -185,8 +185,8 @@ test("la ficha presenta datos de la compañía, contactos y acceso a sedes", asy
test("el formulario de sede ofrece dirección y teléfono opcionales", async () => {
const markup = await renderPage("es", <SiteForm companyId={companyId} />, () => undefined);
assert.ok(markup.includes("Dirección (opcional)"));
assert.ok(markup.includes("Teléfono (opcional)"));
assert.ok(markup.includes("Dirección"));
assert.ok(markup.includes("Teléfono"));
assert.match(markup, /<textarea[^>]*rows="6"/);
assert.match(markup, /<textarea[^>]*name="address"/);
const textarea = markup.match(/<textarea[^>]*>/)?.[0];

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -27,7 +27,9 @@ export function CompanyForm(props: CompanyFormProps) {
<h2 className="text-lg font-semibold">{t(company ? "editCompany" : "newCompany")}</h2>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<SwitchField

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -21,7 +21,9 @@ export function DepartmentForm(props: DepartmentFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={id}>{t("name")}</Label>
<FormLabel htmlFor={id} required>
{t("name")}
</FormLabel>
<Input id={id} maxLength={100} required {...form.register("name")} />
</div>
<SwitchField

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -59,7 +59,7 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
ready={ready}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-path`}>{t("folders.path")}</Label>
<FormLabel htmlFor={`${prefix}-path`}>{t("folders.path")}</FormLabel>
<Input id={`${prefix}-path`} readOnly value={values.path} />
</div>
{mapping && currentPath !== values.path && (
@ -78,7 +78,7 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
)}
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-letter`}>{t("folders.letter")}</Label>
<FormLabel htmlFor={`${prefix}-letter`}>{t("folders.letter")}</FormLabel>
<Input
id={`${prefix}-letter`}
maxLength={2}
@ -88,7 +88,9 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -108,7 +110,7 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -41,7 +41,9 @@ export function FolderMappingTargets({
return (
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
<FormLabel htmlFor={`${prefix}-profile`} required>
{t("mail.profile")}
</FormLabel>
<SelectWithAction
action={
fixed || initialProfileId
@ -64,7 +66,9 @@ export function FolderMappingTargets({
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-need`}>{t("folders.need")}</Label>
<FormLabel htmlFor={`${prefix}-need`} required>
{t("folders.need")}
</FormLabel>
<SelectWithAction
action={
fixed

View File

@ -143,7 +143,7 @@ test("Buzones: alta en modal, cuenta opcional y ayuda al final", async () => {
}
const form = await render("es", <MailboxForm company={company} onSaved={() => undefined} />);
assert.ok(form.includes("Cuenta relacionada (opcional)"));
assert.ok(form.includes("Cuenta relacionada"));
assert.ok(form.indexOf("¿Qué es y para qué sirve?") < form.indexOf("Guardar"));
assert.equal(form.includes('type="password"'), false);
});

View File

@ -1,7 +1,7 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -86,7 +86,7 @@ export function MailConfigurationForm(props: MailConfigurationFormProps) {
profile={selectedProfile}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -33,7 +33,9 @@ export function MailConfigurationTargets({
return (
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
<FormLabel htmlFor={`${prefix}-profile`} required>
{t("mail.profile")}
</FormLabel>
<SelectWithAction
action={
fixed || initialProfileId
@ -51,7 +53,9 @@ export function MailConfigurationTargets({
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
<FormLabel htmlFor={`${prefix}-mailbox`} required>
{t("mailbox.titleSingle")}
</FormLabel>
<SelectWithAction
action={
fixed ? undefined : { label: t("mailbox.new"), onClick: () => onQuickCreate("mailbox") }
@ -67,7 +71,9 @@ export function MailConfigurationTargets({
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-method`}>{t("mail.method")}</Label>
<FormLabel htmlFor={`${prefix}-method`} required>
{t("mail.method")}
</FormLabel>
<SelectWithAction
id={`${prefix}-method`}
label={t("mail.method")}
@ -88,7 +94,9 @@ export function MailConfigurationTargets({
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}

View File

@ -1,9 +1,9 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -36,7 +36,9 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
<FormLabel htmlFor={`${prefix}-mailbox`} required>
{t("mailbox.titleSingle")}
</FormLabel>
<SelectWithAction
action={
canCreate(!!use, initialMailboxId, allowQuickCreate)
@ -56,7 +58,9 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-person`}>{t("mail.person")}</Label>
<FormLabel htmlFor={`${prefix}-person`} required>
{t("mail.person")}
</FormLabel>
<SelectWithAction
action={
canCreate(!!use, initialPersonId, allowQuickCreate)
@ -77,7 +81,9 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
</div>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-start`}>{t("mailbox.start")}</Label>
<FormLabel htmlFor={`${prefix}-start`} required>
{t("mailbox.start")}
</FormLabel>
<Input
disabled={!!use}
id={`${prefix}-start`}
@ -87,7 +93,9 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-end`}>{t("mailbox.end")}</Label>
<FormLabel htmlFor={`${prefix}-end`} required={!!use}>
{t("mailbox.end")}
</FormLabel>
<Input
id={`${prefix}-end`}
onChange={(event) => form.setValue("endDate", event.target.value || null)}

View File

@ -6,10 +6,10 @@ import {
EntityStatus,
EntityTable,
} from "@repo/rdx-ui/components/entity-list";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { PhoneLink } from "@repo/rdx-ui/components/phone-link";
import { Button } from "@repo/shadcn-ui/components/button";
import { Checkbox } from "@repo/shadcn-ui/components/checkbox";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";
@ -201,7 +201,7 @@ export function PeopleSection({
id={`${filterId}-contact`}
onCheckedChange={(checked) => setContactsOnly(checked === true)}
/>
<Label htmlFor={`${filterId}-contact`}>{t("contactsOnly")}</Label>
<FormLabel htmlFor={`${filterId}-contact`}>{t("contactsOnly")}</FormLabel>
</div>
}
filtersApplied={contactsOnly}

View File

@ -1,9 +1,9 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { FormSection } from "@repo/rdx-ui/components/form-section";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -55,11 +55,13 @@ export function PersonForm(props: PersonFormProps) {
/>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-position`}>{t("generalPosition")}</Label>
<FormLabel htmlFor={`${id}-position`}>{t("generalPosition")}</FormLabel>
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
</div>
</div>
@ -67,11 +69,11 @@ export function PersonForm(props: PersonFormProps) {
<FormSection title={t("personForm.contact")} variant="plain">
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${id}-email`}>{t("emailOptional")}</Label>
<FormLabel htmlFor={`${id}-email`}>{t("emailOptional")}</FormLabel>
<Input id={`${id}-email`} maxLength={254} type="email" {...form.register("email")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
<FormLabel htmlFor={`${id}-phone`}>{t("phoneOptional")}</FormLabel>
<Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
</div>
</div>

View File

@ -1,7 +1,7 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { CameraIcon } from "@repo/rdx-ui/lib/icons";
import { Avatar, AvatarFallback, AvatarImage } from "@repo/shadcn-ui/components/avatar";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { useEffect, useId, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
@ -51,7 +51,7 @@ export function PersonPhotoField({
</AvatarFallback>
</Avatar>
<div className="min-w-0 space-y-2">
<Label htmlFor={id}>{t("photoOptional")}</Label>
<FormLabel htmlFor={id}>{t("photoOptional")}</FormLabel>
<input
accept="image/png,image/jpeg,image/webp"
aria-describedby={`${id}-help`}

View File

@ -1,10 +1,10 @@
import { AssetSelect } from "@metis/assets/client";
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -54,7 +54,9 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
<FormLabel htmlFor={`${prefix}-profile`} required>
{t("mail.profile")}
</FormLabel>
<SelectWithAction
action={
profileFixed
@ -75,7 +77,9 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-printer`}>{t("printers.printer")}</Label>
<FormLabel htmlFor={`${prefix}-printer`} required>
{t("printers.printer")}
</FormLabel>
<AssetSelect
action={
configuration
@ -99,7 +103,9 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-connection`}>{t("printers.connection")}</Label>
<FormLabel htmlFor={`${prefix}-connection`} required>
{t("printers.connection")}
</FormLabel>
<SelectWithAction
id={`${prefix}-connection`}
label={t("printers.connection")}
@ -121,7 +127,9 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -141,7 +149,7 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
onCheckedChange={(isDefault) => form.setValue("isDefault", isDefault)}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,9 +1,9 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -23,11 +23,15 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${prefix}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-kind`}>{t("processes.kind")}</Label>
<FormLabel htmlFor={`${prefix}-kind`} required>
{t("processes.kind")}
</FormLabel>
<SelectWithAction
id={`${prefix}-kind`}
label={t("processes.kind")}
@ -43,11 +47,14 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
label: t(`processes.${value}`),
}))}
placeholder={t("mail.choose")}
required
value={form.watch("kind")}
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-instructions`}>{t("processes.instructions")}</Label>
<FormLabel htmlFor={`${prefix}-instructions`} required>
{t("processes.instructions")}
</FormLabel>
<Textarea
id={`${prefix}-instructions`}
maxLength={16100}
@ -64,7 +71,7 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
onCheckedChange={(active) => form.setValue("active", active)}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -25,11 +25,15 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${prefix}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-person`}>{t("profiles.person")}</Label>
<FormLabel htmlFor={`${prefix}-person`} required>
{t("profiles.person")}
</FormLabel>
<SelectWithAction
action={{ label: t("newPerson"), onClick: () => setQuick("person") }}
id={`${prefix}-person`}
@ -42,7 +46,9 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-template`}>{t("processes.template")}</Label>
<FormLabel htmlFor={`${prefix}-template`} required>
{t("processes.template")}
</FormLabel>
<SelectWithAction
action={{ label: t("processes.newTemplate"), onClick: () => setQuick("template") }}
disabled={!query.data || query.isError}
@ -75,7 +81,7 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -25,11 +25,15 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${prefix}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -45,11 +49,12 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
label: t(`processes.${value}`),
}))}
placeholder={t("mail.choose")}
required
value={form.watch("state")}
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import type { UseFormReturn } from "react-hook-form";
@ -25,7 +25,9 @@ export function ProcessTaskField({
return (
<section className="rounded-md border p-3 space-y-3">
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{processTaskTitle(task, t)}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{processTaskTitle(task, t)}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={task.title}
@ -41,15 +43,16 @@ export function ProcessTaskField({
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">
<Label className="sr-only" htmlFor={`${prefix}-notes`}>
<FormLabel className="sr-only" htmlFor={`${prefix}-notes`}>
{t("processes.taskNotes")}: {task.title}
</Label>
</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -82,6 +82,13 @@ test("remotos: formulario, altas rápidas y ayuda antes del pie", async () => {
assert.ok(html.includes(text.remote.personal_computer));
assert.ok(html.indexOf(text.remote.help) > html.indexOf(text.mail.notes));
assert.ok(html.indexOf(text.save) > html.indexOf(text.remote.help));
const labels = html.match(/<label\b[^>]*>[\s\S]*?<\/label>/g) ?? [];
const source = labels.find((label) => label.includes(`>${text.remote.sourceAsset}<`));
const site = labels.find((label) => label.includes(`>${text.remote.site}<`));
assert.ok(source?.includes('data-slot="required-indicator"'));
assert.ok(site);
assert.equal(site.includes('data-slot="required-indicator"'), false);
}
});
test("remotos: origen personal, acceso configurado sin autorización y VPN separada", async () => {

View File

@ -1,10 +1,10 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -45,7 +45,9 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-person`}>{t("remote.person")}</Label>
<FormLabel htmlFor={`${prefix}-person`} required>
{t("remote.person")}
</FormLabel>
<SelectWithAction
action={
personFixed
@ -74,7 +76,9 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
setQuick={setQuick}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-method`}>{t("remote.method")}</Label>
<FormLabel htmlFor={`${prefix}-method`} required>
{t("remote.method")}
</FormLabel>
<Input
id={`${prefix}-method`}
list={`${prefix}-methods`}
@ -90,7 +94,9 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
</datalist>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("mail.state")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("mail.state")}
@ -103,6 +109,7 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
}}
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
placeholder={t("mail.choose")}
required
value={v.state}
/>
</div>
@ -114,7 +121,7 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,6 +1,6 @@
import { AssetSelect } from "@metis/assets/client";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -38,7 +38,9 @@ export function RemoteEndpointFields({
return (
<>
<div className="space-y-2">
<Label htmlFor={`${prefix}-source-kind`}>{t("remote.sourceKind")}</Label>
<FormLabel htmlFor={`${prefix}-source-kind`} required>
{t("remote.sourceKind")}
</FormLabel>
<SelectWithAction
disabled={fixed}
id={`${prefix}-source-kind`}
@ -56,12 +58,15 @@ export function RemoteEndpointFields({
label: t(`remote.${value}`),
}))}
placeholder={t("mail.choose")}
required
value={v.sourceKind}
/>
</div>
{v.sourceKind === "company_asset" && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-source`}>{t("remote.sourceAsset")}</Label>
<FormLabel htmlFor={`${prefix}-source`} required>
{t("remote.sourceAsset")}
</FormLabel>
<AssetSelect
action={
fixed ? undefined : { label: t("remote.newAsset"), onClick: () => setQuick("source") }
@ -80,7 +85,9 @@ export function RemoteEndpointFields({
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${prefix}-target-kind`}>{t("remote.targetKind")}</Label>
<FormLabel htmlFor={`${prefix}-target-kind`} required>
{t("remote.targetKind")}
</FormLabel>
<SelectWithAction
disabled={fixed}
id={`${prefix}-target-kind`}
@ -99,6 +106,7 @@ export function RemoteEndpointFields({
label: t(`remote.${value}`),
}))}
placeholder={t("mail.choose")}
required
value={v.targetKind}
/>
</div>

View File

@ -1,6 +1,6 @@
import { AssetSelect } from "@metis/assets/client";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -49,9 +49,9 @@ export function RemoteTargetField({
return (
<div className="space-y-2">
<Label htmlFor={`${prefix}-target`}>
<FormLabel htmlFor={`${prefix}-target`} required={v.targetKind !== "network"}>
{t(v.targetKind === "network" ? "remote.site" : "remote.target")}
</Label>
</FormLabel>
{v.targetKind === "asset" ? (
<AssetSelect
action={

View File

@ -1,7 +1,7 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -22,11 +22,13 @@ export function SiteForm(props: SiteFormProps) {
<FormBody>
{showTitle && <h3 className="text-lg font-semibold">{t(site ? "editSite" : "newSite")}</h3>}
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
<FormLabel htmlFor={`${id}-address`}>{t("addressOptional")}</FormLabel>
<Textarea
className="min-h-40"
id={`${id}-address`}
@ -37,7 +39,7 @@ export function SiteForm(props: SiteFormProps) {
<p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
<FormLabel htmlFor={`${id}-phone`}>{t("phoneOptional")}</FormLabel>
<Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
</div>
<CompanyFeedback

View File

@ -127,7 +127,7 @@ test("formulario software: recurso fijo en edición, estados permitidos, ayuda y
assert.ok(html.includes("La instalación pertenece al ordenador"));
assert.ok(html.includes("Guardar"));
assert.ok(html.includes("Licencia vinculada (opcional)"));
assert.ok(html.includes("Licencia vinculada"));
assert.ok(html.includes("No reserva plazas"));
assert.equal(html.includes("software.licenseHelp"), false);
assert.equal(html.includes("software.examples"), false);

View File

@ -1,10 +1,10 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useId, useState } from "react";
@ -68,7 +68,9 @@ export function SoftwareInstallationForm({
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-resource`}>{t("software.resource")}</Label>
<FormLabel htmlFor={`${prefix}-resource`} required>
{t("software.resource")}
</FormLabel>
<SelectWithAction
action={
installation
@ -92,11 +94,13 @@ export function SoftwareInstallationForm({
)}
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
<FormLabel htmlFor={`${prefix}-version`}>{t("applications.version")}</FormLabel>
<Input id={`${prefix}-version`} maxLength={100} {...form.register("version")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-state`}>{t("status")}</Label>
<FormLabel htmlFor={`${prefix}-state`} required>
{t("status")}
</FormLabel>
<SelectWithAction
id={`${prefix}-state`}
label={t("status")}
@ -109,12 +113,13 @@ export function SoftwareInstallationForm({
}}
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
placeholder={t("mail.choose")}
required
value={form.watch("state")}
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-license`}>{t("software.license")}</Label>
<FormLabel htmlFor={`${prefix}-license`}>{t("software.license")}</FormLabel>
<SelectWithAction
describedBy={`${prefix}-license-help`}
id={`${prefix}-license`}
@ -129,7 +134,7 @@ export function SoftwareInstallationForm({
</p>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("mail.notes")}</FormLabel>
<Textarea id={`${prefix}-notes`} maxLength={4000} {...form.register("notes")} />
</div>
</fieldset>

View File

@ -1,10 +1,10 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -28,7 +28,9 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
<FormBody>
<fieldset className="space-y-4" disabled={mutation.isPending}>
<div className="space-y-2">
<Label htmlFor={`${prefix}-person`}>{t("telework.person")}</Label>
<FormLabel htmlFor={`${prefix}-person`} required>
{t("telework.person")}
</FormLabel>
<SelectWithAction
action={
fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }
@ -56,7 +58,7 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
/>
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</Label>
<FormLabel htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</FormLabel>
<Input
id={`${prefix}-start`}
onInput={(event) => form.setValue("startsOn", event.currentTarget.value || null)}
@ -65,7 +67,7 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</Label>
<FormLabel htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</FormLabel>
<Input
id={`${prefix}-end`}
onInput={(event) => form.setValue("expiresOn", event.currentTarget.value || null)}
@ -75,7 +77,7 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
</div>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("telework.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("telework.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -74,12 +74,36 @@ test("perfiles: cuenta opcional, altas rápidas y ayuda anterior al pie", async
}
assert.equal(html.includes('aria-label="Nuevo dispositivo"'), false);
assert.ok(html.includes("Puesto de trabajo"));
assert.ok(html.includes("Cuenta de inicio de sesión (opcional)"));
assert.ok(html.includes("Cuenta de inicio de sesión"));
assert.ok(html.includes("su responsable no se convierte automáticamente en usuario"));
assert.ok(html.indexOf("¿Para qué sirve un perfil de usuario?") < html.indexOf("Guardar"));
assert.equal(html.includes('type="password"'), false);
});
test("perfiles: las etiquetas marcan los requisitos de cada selector en es/en", async () => {
for (const language of ["es", "en"]) {
const html = await render(
language,
<WorkProfileForm company={company} onSaved={() => undefined} />
);
const text = language === "es" ? companiesSpanish : companiesEnglish;
const labels = html.match(/<label\b[^>]*>[\s\S]*?<\/label>/g) ?? [];
for (const name of [text.profiles.name, text.profiles.workstation, text.profiles.person]) {
const label = labels.find((label) => label.includes(`>${name}<`));
assert.ok(label?.includes('data-slot="required-indicator"'), name);
}
for (const name of [text.profiles.account, text.profiles.notes]) {
const label = labels.find((label) => label.includes(`>${name}<`));
assert.ok(label, name);
assert.equal(label.includes('data-slot="required-indicator"'), false, name);
}
assert.equal(html.includes(language === "es" ? "(opcional)" : "(optional)"), false);
}
});
test("perfiles: el puesto fijado aporta su ordenador y no selecciona al responsable como usuario", async () => {
const workstationId = "0199b200-0000-7000-8000-000000000010";
const computerId = "0199b200-0000-7000-8000-000000000011";

View File

@ -1,10 +1,10 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -45,12 +45,16 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
<FormBody>
<fieldset className="space-y-4" disabled={disabled}>
<div className="space-y-2">
<Label htmlFor={prefix}>{t("profiles.name")}</Label>
<FormLabel htmlFor={prefix} required>
{t("profiles.name")}
</FormLabel>
<Input id={prefix} maxLength={100} required {...form.register("name")} />
</div>
{!profile && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-workstation`}>{t("profiles.workstation")}</Label>
<FormLabel htmlFor={`${prefix}-workstation`} required>
{t("profiles.workstation")}
</FormLabel>
<SelectWithAction
disabled={disabled || !inventory.data || Boolean(props.workstationId)}
id={`${prefix}-workstation`}
@ -79,9 +83,12 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
return (
<div className="space-y-2" key={selector.field}>
<Label htmlFor={`${prefix}-${selector.field}`}>
<FormLabel
htmlFor={`${prefix}-${selector.field}`}
required={selector.field !== "accountId"}
>
{t(`profiles.${selector.label}`)}
</Label>
</FormLabel>
<SelectWithAction
action={
fixed || !allowQuickCreate
@ -127,7 +134,7 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
onCheckedChange={(active) => form.setValue("active", active)}
/>
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={4000}

View File

@ -1,7 +1,7 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -27,7 +27,9 @@ export function PasswordForm(props: PasswordFormProps) {
{!showTitle && target && <p className="text-muted-foreground">{target.name}</p>}
{!target && (
<div className="space-y-2">
<Label htmlFor={`${id}-current`}>{t("currentPassword")}</Label>
<FormLabel htmlFor={`${id}-current`} required>
{t("currentPassword")}
</FormLabel>
<Input
autoComplete="current-password"
id={`${id}-current`}
@ -39,7 +41,9 @@ export function PasswordForm(props: PasswordFormProps) {
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-new`}>{t("newPassword")}</Label>
<FormLabel htmlFor={`${id}-new`} required>
{t("newPassword")}
</FormLabel>
<Input
autoComplete="new-password"
id={`${id}-new`}

View File

@ -1,6 +1,6 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -18,7 +18,9 @@ export function CredentialForm(props: CredentialFormProps) {
<form className="space-y-5" onSubmit={submit}>
{setup && (
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input
autoComplete="name"
id={`${id}-name`}
@ -29,7 +31,9 @@ export function CredentialForm(props: CredentialFormProps) {
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-email`}>{t("email")}</Label>
<FormLabel htmlFor={`${id}-email`} required>
{t("email")}
</FormLabel>
<Input
autoComplete="username"
id={`${id}-email`}
@ -40,7 +44,9 @@ export function CredentialForm(props: CredentialFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-password`}>{t("password")}</Label>
<FormLabel htmlFor={`${id}-password`} required>
{t("password")}
</FormLabel>
<Input
autoComplete={setup ? "new-password" : "current-password"}
id={`${id}-password`}

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SwitchField } from "@repo/rdx-ui/components/switch-field";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -21,7 +21,9 @@ export function UserForm(props: UserFormProps) {
<FormBody>
{showTitle && <h3 className="font-semibold">{t(user ? "editUser" : "createUser")}</h3>}
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input
autoComplete="name"
id={`${id}-name`}
@ -31,7 +33,9 @@ export function UserForm(props: UserFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-email`}>{t("email")}</Label>
<FormLabel htmlFor={`${id}-email`} required>
{t("email")}
</FormLabel>
<Input
autoComplete="off"
id={`${id}-email`}
@ -43,7 +47,9 @@ export function UserForm(props: UserFormProps) {
</div>
{!user && (
<div className="space-y-2">
<Label htmlFor={`${id}-password`}>{t("password")}</Label>
<FormLabel htmlFor={`${id}-password`} required>
{t("password")}
</FormLabel>
<Input
autoComplete="new-password"
id={`${id}-password`}

View File

@ -1,6 +1,6 @@
{
"templateIcon": {
"label": "Icon (optional)",
"label": "Icon",
"none": "No icon",
"help": "Shown in the catalog and in resources using this template.",
"options": {
@ -24,10 +24,10 @@
"mailboxKind": "Mailbox type",
"corporate": "Corporate",
"external": "External",
"relatedAccount": "Related account (optional)",
"relatedAccount": "Related account",
"resourceTypeId": "Access type",
"systemId": "System (optional)",
"environmentId": "Environment (optional)",
"systemId": "System",
"environmentId": "Environment",
"newResource": "New resource",
"editResource": "Edit resource",
"viewResource": "Details and history",
@ -35,7 +35,7 @@
"status": "Status",
"active": "Active",
"inactive": "Inactive",
"notes": "Notes (optional)",
"notes": "Notes",
"characteristics": "Characteristics",
"chooseValue": "Select a value",
"noValue": "No data",
@ -90,9 +90,9 @@
},
"editTemplate": "Edit template",
"name": "Name",
"description": "Description (optional)",
"description": "Description",
"type": "Data type",
"unit": "Unit (optional)",
"unit": "Unit",
"choices": "List values",
"choicesHelp": "Enter one value per line. Existing values are retained; you can add others.",
"text": "Text",
@ -130,10 +130,9 @@
"view": "View",
"close": "Close",
"viewDefinition": "{{name}}",
"optional": "Optional",
"remove": "Remove field: {{name}}",
"noFields": "Add at least one field. All fields are initially optional.",
"fieldHelpText": "Help text (optional)",
"fieldHelpText": "Help text",
"fieldHelpHint": "Shown next to the field when creating or editing a resource.",
"protected": "Built-in templates and fields can be edited in the global catalog. A field's data type remains fixed. You can change availability or create a template copy for a company.",
"helpTitle": "What is it for?",
@ -187,7 +186,7 @@
"title": "Template sections",
"add": "Add section",
"name": "Section name",
"description": "Description (optional)",
"description": "Description",
"ungrouped": "Unsectioned",
"moveUp": "Move up",
"moveDown": "Move down",

View File

@ -1,6 +1,6 @@
{
"templateIcon": {
"label": "Icono (opcional)",
"label": "Icono",
"none": "Sin icono",
"help": "Se muestra en el catálogo y en los recursos de esta plantilla.",
"options": {
@ -24,10 +24,10 @@
"mailboxKind": "Tipo de buzón",
"corporate": "Corporativo",
"external": "Externo",
"relatedAccount": "Cuenta relacionada (opcional)",
"relatedAccount": "Cuenta relacionada",
"resourceTypeId": "Tipo de acceso",
"systemId": "Sistema (opcional)",
"environmentId": "Entorno (opcional)",
"systemId": "Sistema",
"environmentId": "Entorno",
"newResource": "Nuevo recurso",
"editResource": "Editar recurso",
"viewResource": "Ficha e historial",
@ -35,7 +35,7 @@
"status": "Estado",
"active": "Activo",
"inactive": "Inactivo",
"notes": "Notas (opcional)",
"notes": "Notas",
"characteristics": "Características",
"chooseValue": "Selecciona un valor",
"noValue": "Sin datos",
@ -90,9 +90,9 @@
},
"editTemplate": "Editar plantilla",
"name": "Nombre",
"description": "Descripción (opcional)",
"description": "Descripción",
"type": "Tipo de dato",
"unit": "Unidad (opcional)",
"unit": "Unidad",
"choices": "Valores de la lista",
"choicesHelp": "Escribe un valor por línea. Los valores existentes se conservan; puedes añadir otros.",
"text": "Texto",
@ -130,10 +130,9 @@
"view": "Ver",
"close": "Cerrar",
"viewDefinition": "{{name}}",
"optional": "Opcional",
"remove": "Retirar campo: {{name}}",
"noFields": "Añade al menos un campo. Todos son opcionales inicialmente.",
"fieldHelpText": "Texto de ayuda (opcional)",
"fieldHelpText": "Texto de ayuda",
"fieldHelpHint": "Se muestra junto al campo al crear o editar un recurso.",
"protected": "Las plantillas y campos de serie se pueden editar desde el catálogo global. El tipo de dato de un campo se mantiene fijo. Puedes cambiar la disponibilidad o crear una copia de una plantilla para una compañía.",
"helpTitle": "¿Qué es y para qué sirve?",
@ -187,7 +186,7 @@
"title": "Secciones de la plantilla",
"add": "Añadir sección",
"name": "Nombre de la sección",
"description": "Descripción (opcional)",
"description": "Descripción",
"ungrouped": "Sin sección",
"moveUp": "Mover hacia arriba",
"moveDown": "Mover hacia abajo",

View File

@ -1,8 +1,8 @@
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -23,11 +23,15 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
<FormBody>
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
<FormLabel htmlFor={`${id}-type`} required>
{t("type")}
</FormLabel>
<SelectWithAction
disabled={!!item || mutation.isPending}
id={`${id}-type`}
@ -46,18 +50,20 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
<FormLabel htmlFor={`${id}-unit`}>{t("unit")}</FormLabel>
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
</div>
{type === "choice" && (
<div className="space-y-2">
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
<FormLabel htmlFor={`${id}-choices`} required>
{t("choices")}
</FormLabel>
<Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
<p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
</div>
)}
<div className="space-y-2">
<Label htmlFor={`${id}-description`}>{t("fieldHelpText")}</Label>
<FormLabel htmlFor={`${id}-description`}>{t("fieldHelpText")}</FormLabel>
<Textarea
aria-describedby={`${id}-description-hint`}
id={`${id}-description`}

View File

@ -1,5 +1,6 @@
import { UniqueID } from "@repo/rdx-ddd";
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { IconPicker } from "@repo/rdx-ui/components/icon-picker";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { TemplateMetadataSection } from "@repo/rdx-ui/components/template-metadata-section";
@ -7,7 +8,6 @@ import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-section
import { XIcon } from "@repo/rdx-ui/lib/icons";
import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -48,7 +48,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
<TemplateMetadataSection
descriptionField={
<>
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
<FormLabel htmlFor={`${id}-description`}>{t("description")}</FormLabel>
<Textarea
className="min-h-24 flex-1"
id={`${id}-description`}
@ -61,7 +61,9 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
primaryFields={
<>
<div className="space-y-2">
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${id}-name`} required>
{t("name")}
</FormLabel>
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
</div>
<IconPicker
@ -93,7 +95,7 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
title={t("formLayout.template")}
>
<div className="space-y-2">
<Label htmlFor={`${id}-usage`}>{t("templateUsage")}</Label>
<FormLabel htmlFor={`${id}-usage`}>{t("templateUsage")}</FormLabel>
<SelectWithAction
disabled={!!item || mutation.isPending}
id={`${id}-usage`}

View File

@ -81,7 +81,7 @@ export function CatalogDefinitionDialog({
}
name={field?.values.name ?? binding.fieldId}
notice={field && !field.effectiveActive ? t("disabledField") : undefined}
requirement={t(binding.required ? "required" : "optional")}
requiredLabel={binding.required ? t("required") : undefined}
/>
);
}}

View File

@ -83,8 +83,8 @@ test("iconos de recursos: catálogo y selector traducido conservan la selección
assert.ok(mailbox);
for (const [language, label, none, mail] of [
["es", "Icono (opcional)", "Sin icono", "Correo"],
["en", "Icon (optional)", "No icon", "Mail"],
["es", "Icono", "Sin icono", "Correo"],
["en", "Icon", "No icon", "Mail"],
]) {
assert.ok(language && label && none && mail);
const list = await render(language, <ResourceCatalogPage scope="global" />);

View File

@ -1,7 +1,7 @@
import { FieldHelp, fieldHelpId } from "@repo/rdx-ui/components/field-help";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { useTranslation } from "react-i18next";
import type { ResourceCharacteristic, ResourceInput } from "../../../../common/inventory";
@ -26,11 +26,13 @@ export function ResourceCharacteristicControl({
const { t } = useTranslation("resources");
const id = `${prefix}-${field.fieldId}`;
const describedBy = fieldHelpId(id, helpText);
const label = `${field.name}${field.unit ? ` (${field.unit})` : ""}${field.required ? " *" : ""}`;
const label = `${field.name}${field.unit ? ` (${field.unit})` : ""}`;
return (
<div className="space-y-2">
<Label htmlFor={id}>{label}</Label>
<FormLabel htmlFor={id} required={field.required}>
{label}
</FormLabel>
{field.type === "choice" || field.type === "boolean" ? (
<SelectWithAction
describedBy={describedBy}

View File

@ -1,6 +1,6 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { FormBody } from "@repo/rdx-ui/components/form-dialog";
import { Label } from "@repo/shadcn-ui/components/label";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -92,7 +92,7 @@ export function ResourceForm(props: ResourceFormProps) {
)}
{layout.showNotes && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
<FormLabel htmlFor={`${prefix}-notes`}>{t("notes")}</FormLabel>
<Textarea
id={`${prefix}-notes`}
maxLength={notesMaxLength}

View File

@ -1,7 +1,7 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { FormSection } from "@repo/rdx-ui/components/form-section";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -49,7 +49,9 @@ export function ResourceIdentityFields({
<div className={`grid gap-x-5 gap-y-4 ${IDENTITY_LAYOUTS[mode]}`}>
{mode !== "template" && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
<FormLabel htmlFor={`${prefix}-name`} required>
{t("name")}
</FormLabel>
<Input
aria-describedby={mode === "identity" ? `${prefix}-name-help` : undefined}
id={`${prefix}-name`}
@ -66,7 +68,9 @@ export function ResourceIdentityFields({
)}
{mode !== "identity" && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
<FormLabel htmlFor={`${prefix}-template`} required>
{t("template")}
</FormLabel>
<SelectWithAction
action={templateAction}
disabled={!!resource || disabled}
@ -82,7 +86,9 @@ export function ResourceIdentityFields({
)}
{mode !== "template" && (
<div className="space-y-2">
<Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
<FormLabel htmlFor={`${prefix}-status`} required>
{t("status")}
</FormLabel>
<SelectWithAction
disabled={disabled}
id={`${prefix}-status`}

View File

@ -1,5 +1,5 @@
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Label } from "@repo/shadcn-ui/components/label";
import { useId } from "react";
import { useTranslation } from "react-i18next";
@ -34,7 +34,9 @@ export function ResourceIntegrationFields({
return (
<div className="grid gap-4 @min-[560px]:grid-cols-2">
<div className="space-y-2">
<Label htmlFor={`${prefix}-kind`}>{t("mailboxKind")}</Label>
<FormLabel htmlFor={`${prefix}-kind`} required>
{t("mailboxKind")}
</FormLabel>
<SelectWithAction
disabled={fixed}
id={`${prefix}-kind`}
@ -46,11 +48,12 @@ export function ResourceIntegrationFields({
}}
options={["corporate", "external"].map((value) => ({ value, label: t(value) }))}
placeholder={t("chooseValue")}
required
value={mailbox.mailboxKind}
/>
</div>
<div className="space-y-2">
<Label htmlFor={`${prefix}-account`}>{t("relatedAccount")}</Label>
<FormLabel htmlFor={`${prefix}-account`}>{t("relatedAccount")}</FormLabel>
<SelectWithAction
id={`${prefix}-account`}
label={t("relatedAccount")}
@ -124,7 +127,9 @@ export function ResourceIntegrationFields({
return (
<div className="space-y-2" key={key}>
<Label htmlFor={prefix + key}>{t(key)}</Label>
<FormLabel htmlFor={prefix + key} required={key === "resourceTypeId"}>
{t(key)}
</FormLabel>
<SelectWithAction
disabled={
fixed ||
@ -140,6 +145,7 @@ export function ResourceIntegrationFields({
}}
options={[{ value: "none", label: t("noValue") }, ...options]}
placeholder={t("chooseValue")}
required={key === "resourceTypeId"}
value={selected}
/>
</div>

View File

@ -0,0 +1,18 @@
import { Label } from "@repo/shadcn-ui/components/label";
import type { ComponentProps } from "react";
import { RequiredIndicator } from "./required-indicator";
/** La obligatoriedad es explícita y debe coincidir con el contrato del control asociado. */
export function FormLabel({
required = false,
children,
...props
}: ComponentProps<typeof Label> & { required?: boolean | undefined }) {
return (
<Label {...props}>
{children}
{required && <RequiredIndicator />}
</Label>
);
}

View File

@ -1,4 +1,3 @@
import { Label } from "@repo/shadcn-ui/components/label";
import {
Select,
SelectContent,
@ -9,6 +8,8 @@ import {
import type { ReactNode } from "react";
import { useId } from "react";
import { FormLabel } from "./form-label";
/** Selección compacta con vista previa; el consumidor aporta iconos, textos y claves válidas. */
export function IconPicker({
label,
@ -35,7 +36,7 @@ export function IconPicker({
return (
<div className="space-y-2">
<Label htmlFor={id}>{label}</Label>
<FormLabel htmlFor={id}>{label}</FormLabel>
<Select
disabled={disabled}
items={options.map((option) => ({ value: option.value, label: option.label }))}

View File

@ -0,0 +1,8 @@
/** Complemento visual; el control conserva su semántica de validación accesible. */
export function RequiredIndicator() {
return (
<span aria-hidden="true" className="text-destructive" data-slot="required-indicator">
*
</span>
);
}

View File

@ -1,7 +1,8 @@
import { Label } from "@repo/shadcn-ui/components/label";
import { Switch } from "@repo/shadcn-ui/components/switch";
import type { ComponentProps, ReactNode } from "react";
import { FormLabel } from "./form-label";
type SwitchFieldProps = Readonly<
ComponentProps<typeof Switch> & {
label: ReactNode;
@ -12,7 +13,7 @@ export function SwitchField({ id, label, ...switchProps }: SwitchFieldProps) {
return (
<div className="flex items-center gap-2">
<Switch id={id} {...switchProps} />
<Label htmlFor={id}>{label}</Label>
<FormLabel htmlFor={id}>{label}</FormLabel>
</div>
);
}

View File

@ -1,24 +1,32 @@
import { RequiredIndicator } from "./required-indicator";
/** Fila de consulta compacta; los textos y reglas pertenecen al catálogo consumidor. */
export function TemplateFieldSummary({
name,
metadata,
requirement,
requiredLabel,
notice,
}: {
name: string;
metadata: string;
requirement: string;
requiredLabel?: string | undefined;
notice?: string | undefined;
}) {
return (
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-3 gap-y-0.5 py-2 text-sm @min-[420px]:grid-cols-[minmax(0,1fr)_minmax(100px,0.8fr)_auto]">
<span className="min-w-0 font-medium [overflow-wrap:anywhere]">{name}</span>
<div className="grid grid-cols-1 items-baseline gap-x-3 gap-y-0.5 py-2 text-sm @min-[420px]:grid-cols-[minmax(0,1fr)_minmax(100px,0.8fr)]">
<span className="min-w-0 font-medium [overflow-wrap:anywhere]">
{name}
{requiredLabel && (
<>
{" "}
<RequiredIndicator />
<span className="sr-only"> {requiredLabel}</span>
</>
)}
</span>
<span className="col-start-1 row-start-2 text-xs text-muted-foreground @min-[420px]:col-start-2 @min-[420px]:row-start-1">
{metadata}
</span>
<span className="col-start-2 row-start-1 text-xs text-muted-foreground @min-[420px]:col-start-3">
{requirement}
</span>
{notice && <p className="col-span-full text-xs text-muted-foreground">{notice}</p>}
</div>
);

View File

@ -5,7 +5,6 @@ import {
CollapsibleTrigger,
} from "@repo/shadcn-ui/components/collapsible";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon, Trash2Icon } from "lucide-react";
import type { ReactNode } from "react";
@ -13,6 +12,7 @@ import { useId, useState } from "react";
import { flushSync } from "react-dom";
import type { FieldSection } from "./field-sections";
import { FormLabel } from "./form-label";
import type { SectionEditorLabels } from "./template-sections-editor";
/** Conserva la edición y el estado de apertura de una sección al reordenarla. */
@ -60,6 +60,9 @@ export function TemplateSectionEditor({
</span>
<h4 className="sr-only">{section.name || labels.name}</h4>
<div className="min-w-40 flex-1 space-y-2">
<FormLabel className="sr-only" htmlFor={`${prefix}-name`} required>
{labels.name}
</FormLabel>
<Input
aria-label={labels.name}
id={`${prefix}-name`}
@ -113,7 +116,7 @@ export function TemplateSectionEditor({
>
<div className="space-y-4 p-4">
<div className="space-y-2">
<Label htmlFor={`${prefix}-description`}>{labels.description}</Label>
<FormLabel htmlFor={`${prefix}-description`}>{labels.description}</FormLabel>
<Textarea
id={`${prefix}-description`}
maxLength={1000}

View File

@ -1,11 +1,11 @@
import { Button } from "@repo/shadcn-ui/components/button";
import { Label } from "@repo/shadcn-ui/components/label";
import { ArrowDownIcon, ArrowUpIcon, PlusIcon, Trash2Icon } from "lucide-react";
import { useId } from "react";
import { useDragReorder } from "../hooks/use-drag-reorder";
import type { FieldSection } from "./field-sections";
import { FormLabel } from "./form-label";
import { FormSectionTitle } from "./form-section-title";
import { ReorderDropIndicator } from "./reorder-drop-indicator";
import { ReorderHandle } from "./reorder-handle";
@ -216,7 +216,9 @@ export function TemplateSectionFields({
{requiredSwitch}
{sections.length > 0 && (
<div className="min-w-40 flex-1 space-y-2">
<Label htmlFor={`${prefix}-${field.fieldId}-section`}>{labels.assign}</Label>
<FormLabel htmlFor={`${prefix}-${field.fieldId}-section`}>
{labels.assign}
</FormLabel>
<SelectWithAction
disabled={disabled}
id={`${prefix}-${field.fieldId}-section`}

View File

@ -80,7 +80,7 @@ test("consulta compacta conserva grupos, campos sin sección y avisos sin tarjet
metadata="Texto"
name={field.fieldId}
notice={field.fieldId === "ram" ? "Campo desactivado" : undefined}
requirement={field.required ? "Obligatorio" : "Opcional"}
requiredLabel={field.required ? "Obligatorio" : undefined}
/>
)}
sections={sections}
@ -92,7 +92,8 @@ test("consulta compacta conserva grupos, campos sin sección y avisos sin tarjet
assert.ok(html.includes('open=""'));
assert.ok(html.includes("Campo desactivado"));
assert.ok(html.includes("Obligatorio"));
assert.ok(html.includes("Opcional"));
assert.equal(html.includes("Opcional"), false);
assert.equal((html.match(/data-slot="required-indicator"/g) ?? []).length, 1);
assert.ok(html.includes("Sin sección"));
assert.equal((html.match(/>ram</g) ?? []).length, 1);
assert.equal(html.includes("rounded-md border"), false);