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:
parent
ba562ad06f
commit
f6c6b8c95c
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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é.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 " },
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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"));
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"),
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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)}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@ -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>}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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")}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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")}
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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={
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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" />);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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>
|
||||
|
||||
18
packages/rdx-ui/src/components/form-label.tsx
Normal file
18
packages/rdx-ui/src/components/form-label.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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 }))}
|
||||
|
||||
8
packages/rdx-ui/src/components/required-indicator.tsx
Normal file
8
packages/rdx-ui/src/components/required-indicator.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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`}
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user