Mejora en los cuadros de diálogo
This commit is contained in:
parent
91988a26b9
commit
791fa06ddd
@ -285,3 +285,13 @@ contrae el menú y conservan la selección y las ayudas del botón de navegació
|
||||
Componentes de @repo/rdx-ui independientes de los DTO, consultas y endpoints de Metis Desk. FieldSections recibe secciones, elementos con sectionId opcional y renderItem; presenta una cuadrícula plana cuando no hay secciones, o bloques desplegables accesibles con descripción y «Sin sección». Admite presentación de valores como listas de descripción y apertura ante errores externos.
|
||||
|
||||
TemplateSectionsEditor recibe secciones, referencias de campos, nombres, textos traducidos, generador de identidad y onChange. Permite ordenar secciones/campos, editar nombre/descripción, asignar campos y mantener su obligatoriedad mediante SwitchField. El módulo consumidor conserva el estado en React Hook Form y genera UUID v7. Los helpers removeTemplateSection y copyTemplateLayout conservan referencias y remapean identidades respectivamente. No se modifican los componentes vendor.
|
||||
|
||||
## Formularios modales adaptativos
|
||||
|
||||
`FormDialog` admite `size="small" | "medium" | "large"`. Los formularios sencillos mantienen el tamaño pequeño; personas y usuarios emplean el intermedio. `wide` sigue siendo un alias del tamaño grande: 90 % del ancho disponible, con máximo de 1.200 px y márgenes en móvil. No se ensanchan automáticamente las altas sencillas.
|
||||
|
||||
La cabecera permanece visible. Un formulario modal utiliza una raíz flex con altura mínima cero, `FormBody` para campos, errores y ayuda, y `FormActions` como hermano final fuera del cuerpo desplazable. Los botones permanecen dentro del formulario HTML original: se conservan envío por teclado, validación nativa, estados pendientes y cancelación. La ayuda queda al final del cuerpo, inmediatamente antes de las acciones. Los diálogos de consulta conservan el cuerpo desplazable y su pie externo.
|
||||
|
||||
`FormSection` agrupa datos relacionados mediante título accesible y un borde discreto. Activos, recursos y plantillas lo utilizan para sus datos principales. Las características y las secciones del editor se distribuyen en dos bloques por fila cuando el contenedor dispone de al menos 900 px; los controles dentro de cada bloque mantienen una o dos columnas según el espacio. Una plantilla sin secciones puede aprovechar hasta tres columnas de características. Observaciones y ayuda ocupan toda la fila. La disposición responde al espacio del modal, no solo al ancho del navegador.
|
||||
|
||||
El desplazamiento vertical se conserva cuando el contenido supera la altura disponible; no se ocultan campos ni se reduce artificialmente su tamaño para eliminarlo. No se introducen pestañas ni páginas nuevas sin una necesidad específica del formulario.
|
||||
|
||||
@ -299,5 +299,9 @@
|
||||
"assign": "Section",
|
||||
"help": "Organize fields without changing their values or requirements. Removing a section moves its fields to Unsectioned.",
|
||||
"empty": "This section has no fields yet."
|
||||
},
|
||||
"formLayout": {
|
||||
"identity": "Identification and assignment",
|
||||
"template": "Template details"
|
||||
}
|
||||
}
|
||||
|
||||
@ -299,5 +299,9 @@
|
||||
"assign": "Sección",
|
||||
"help": "Organiza los campos sin cambiar sus valores ni su obligatoriedad. Al eliminar una sección, sus campos pasan a «Sin sección».",
|
||||
"empty": "Esta sección aún no tiene campos."
|
||||
},
|
||||
"formLayout": {
|
||||
"identity": "Identificación y asignación",
|
||||
"template": "Datos de la plantilla"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
@ -22,11 +22,13 @@ export function EndRelationshipDialog(props: EndRelationshipDialogProps) {
|
||||
open
|
||||
title={t("endRelationship")}
|
||||
>
|
||||
<p className="text-sm">
|
||||
{relationship.values.name} · {sourceName} → {targetName}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
|
||||
<InventoryFeedback error={mutation.error} />
|
||||
<FormBody>
|
||||
<p className="text-sm">
|
||||
{relationship.values.name} · {sourceName} → {targetName}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
|
||||
<InventoryFeedback error={mutation.error} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button
|
||||
disabled={mutation.isPending}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -34,51 +34,56 @@ export function RelationshipForm(props: RelationshipFormProps) {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-type`}>{t("relationshipType")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("newRelation"), onClick: () => setQuick(true) }}
|
||||
disabled={mutation.isPending || catalog.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("relationshipType")}
|
||||
onValueChange={setTypeId}
|
||||
options={relationshipTypes.map((item) => ({ value: item.id, label: item.values.name }))}
|
||||
placeholder={t("chooseRelation")}
|
||||
required
|
||||
value={typeId}
|
||||
<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>
|
||||
<SelectWithAction
|
||||
action={{ label: t("newRelation"), onClick: () => setQuick(true) }}
|
||||
disabled={mutation.isPending || catalog.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("relationshipType")}
|
||||
onValueChange={setTypeId}
|
||||
options={relationshipTypes.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.values.name,
|
||||
}))}
|
||||
placeholder={t("chooseRelation")}
|
||||
required
|
||||
value={typeId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-target`}>{t("targetAsset")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending || inventory.isPending}
|
||||
id={`${id}-target`}
|
||||
label={t("targetAsset")}
|
||||
onValueChange={setTargetId}
|
||||
options={targetAssets.map((asset) => ({ value: asset.id, label: asset.values.name }))}
|
||||
placeholder={t("chooseAsset")}
|
||||
required
|
||||
value={targetId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-notes`}
|
||||
maxLength={10000}
|
||||
onChange={(event) => setNotes(event.target.value)}
|
||||
value={notes}
|
||||
/>
|
||||
</div>
|
||||
<InventoryFeedback error={mutation.error ?? catalog.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("relationshipHelp")}
|
||||
examples={t("relationshipExample")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("relationshipGuidance")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-target`}>{t("targetAsset")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending || inventory.isPending}
|
||||
id={`${id}-target`}
|
||||
label={t("targetAsset")}
|
||||
onValueChange={setTargetId}
|
||||
options={targetAssets.map((asset) => ({ value: asset.id, label: asset.values.name }))}
|
||||
placeholder={t("chooseAsset")}
|
||||
required
|
||||
value={targetId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-notes`}
|
||||
maxLength={10000}
|
||||
onChange={(event) => setNotes(event.target.value)}
|
||||
value={notes}
|
||||
/>
|
||||
</div>
|
||||
<InventoryFeedback error={mutation.error ?? catalog.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("relationshipHelp")}
|
||||
examples={t("relationshipExample")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("relationshipGuidance")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={!(typeId && targetId) || mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FieldSections } from "@repo/rdx-ui/components/field-sections";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormSection } from "@repo/rdx-ui/components/form-section";
|
||||
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";
|
||||
@ -43,160 +44,169 @@ export function AssetForm(props: AssetFormProps) {
|
||||
const selectProps = { disabled: mutation.isPending, placeholder: t("noAssignment") };
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-5" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-5" disabled={mutation.isPending}>
|
||||
<FormSection title={t("formLayout.identity")}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
asset || !allowQuickCreate
|
||||
? undefined
|
||||
: { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
|
||||
}
|
||||
disabled={!!asset || mutation.isPending}
|
||||
id={`${prefix}-template`}
|
||||
label={t("template")}
|
||||
onValueChange={selectTemplate}
|
||||
options={
|
||||
asset
|
||||
? [
|
||||
{
|
||||
value: asset.values.templateId,
|
||||
label: asset.specification.templateName,
|
||||
},
|
||||
]
|
||||
: templates.map((item) => ({ value: item.id, label: item.values.name }))
|
||||
}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.templateId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-status`}
|
||||
label={t("status")}
|
||||
onValueChange={changeStatus}
|
||||
options={AssetStatusSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.status}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
|
||||
<SelectWithAction
|
||||
{...selectProps}
|
||||
action={
|
||||
allowQuickCreate
|
||||
? {
|
||||
label: t("newSite"),
|
||||
onClick: () => lookups.onCreateSite(siteCreated),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
id={`${prefix}-site`}
|
||||
label={t("site")}
|
||||
onValueChange={(id) => form.setValue("siteId", id || null)}
|
||||
options={lookups.sites.map((site) => ({ value: site.id, label: site.name }))}
|
||||
value={values.siteId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("person")}</Label>
|
||||
<SelectWithAction
|
||||
{...selectProps}
|
||||
action={
|
||||
allowQuickCreate
|
||||
? {
|
||||
label: t("newPerson"),
|
||||
onClick: () => lookups.onCreatePerson(personCreated),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
id={`${prefix}-person`}
|
||||
label={t("person")}
|
||||
onValueChange={(id) => form.setValue("personId", id || null)}
|
||||
options={lookups.people
|
||||
.filter((person) => person.active || person.id === asset?.values.personId)
|
||||
.map((person) => ({
|
||||
value: person.id,
|
||||
label: person.name,
|
||||
disabled: !person.active && person.id !== values.personId,
|
||||
}))}
|
||||
value={values.personId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
{fields.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<h3 className="font-medium">{t("characteristics")}</h3>
|
||||
<FieldSections
|
||||
hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
|
||||
items={fields}
|
||||
renderItem={(field) =>
|
||||
field.fieldId === brandFieldId ? (
|
||||
<BrandSelect
|
||||
allowQuickCreate={allowQuickCreate}
|
||||
brandId={values.brandId ?? null}
|
||||
csrfToken={csrfToken}
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-${field.fieldId}`}
|
||||
key={field.fieldId}
|
||||
label={field.name}
|
||||
legacyName={
|
||||
typeof values.characteristics[field.fieldId] === "string"
|
||||
? String(values.characteristics[field.fieldId])
|
||||
: ""
|
||||
}
|
||||
onChange={(brand) => {
|
||||
form.setValue("brandId", brand?.id ?? null, { shouldDirty: true });
|
||||
setCharacteristic(field.fieldId, brand?.name);
|
||||
}}
|
||||
required={field.required}
|
||||
/>
|
||||
) : (
|
||||
<AssetCharacteristicControl
|
||||
disabled={mutation.isPending}
|
||||
field={field}
|
||||
key={field.fieldId}
|
||||
onChange={(value) => setCharacteristic(field.fieldId, value)}
|
||||
prefix={prefix}
|
||||
value={values.characteristics[field.fieldId]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
sections={sections}
|
||||
ungroupedLabel={t("sections.ungrouped")}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
asset || !allowQuickCreate
|
||||
? undefined
|
||||
: { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
|
||||
}
|
||||
disabled={!!asset || mutation.isPending}
|
||||
id={`${prefix}-template`}
|
||||
label={t("template")}
|
||||
onValueChange={selectTemplate}
|
||||
options={
|
||||
asset
|
||||
? [{ value: asset.values.templateId, label: asset.specification.templateName }]
|
||||
: templates.map((item) => ({ value: item.id, label: item.values.name }))
|
||||
}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.templateId}
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={10000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-status`}
|
||||
label={t("status")}
|
||||
onValueChange={changeStatus}
|
||||
options={AssetStatusSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.status}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
|
||||
<SelectWithAction
|
||||
{...selectProps}
|
||||
action={
|
||||
allowQuickCreate
|
||||
? {
|
||||
label: t("newSite"),
|
||||
onClick: () => lookups.onCreateSite(siteCreated),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
id={`${prefix}-site`}
|
||||
label={t("site")}
|
||||
onValueChange={(id) => form.setValue("siteId", id || null)}
|
||||
options={lookups.sites.map((site) => ({ value: site.id, label: site.name }))}
|
||||
value={values.siteId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("person")}</Label>
|
||||
<SelectWithAction
|
||||
{...selectProps}
|
||||
action={
|
||||
allowQuickCreate
|
||||
? {
|
||||
label: t("newPerson"),
|
||||
onClick: () => lookups.onCreatePerson(personCreated),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
id={`${prefix}-person`}
|
||||
label={t("person")}
|
||||
onValueChange={(id) => form.setValue("personId", id || null)}
|
||||
options={lookups.people
|
||||
.filter((person) => person.active || person.id === asset?.values.personId)
|
||||
.map((person) => ({
|
||||
value: person.id,
|
||||
label: person.name,
|
||||
disabled: !person.active && person.id !== values.personId,
|
||||
}))}
|
||||
value={values.personId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{fields.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<h3 className="font-medium">{t("characteristics")}</h3>
|
||||
<FieldSections
|
||||
hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
|
||||
items={fields}
|
||||
renderItem={(field) =>
|
||||
field.fieldId === brandFieldId ? (
|
||||
<BrandSelect
|
||||
allowQuickCreate={allowQuickCreate}
|
||||
brandId={values.brandId ?? null}
|
||||
csrfToken={csrfToken}
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-${field.fieldId}`}
|
||||
key={field.fieldId}
|
||||
label={field.name}
|
||||
legacyName={
|
||||
typeof values.characteristics[field.fieldId] === "string"
|
||||
? String(values.characteristics[field.fieldId])
|
||||
: ""
|
||||
}
|
||||
onChange={(brand) => {
|
||||
form.setValue("brandId", brand?.id ?? null, { shouldDirty: true });
|
||||
setCharacteristic(field.fieldId, brand?.name);
|
||||
}}
|
||||
required={field.required}
|
||||
/>
|
||||
) : (
|
||||
<AssetCharacteristicControl
|
||||
disabled={mutation.isPending}
|
||||
field={field}
|
||||
key={field.fieldId}
|
||||
onChange={(value) => setCharacteristic(field.fieldId, value)}
|
||||
prefix={prefix}
|
||||
value={values.characteristics[field.fieldId]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
sections={sections}
|
||||
ungroupedLabel={t("sections.ungrouped")}
|
||||
/>
|
||||
</section>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={10000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<InventoryFeedback error={mutation.error} />
|
||||
<ContextHelp
|
||||
description={t("assetDescription")}
|
||||
examples={t("assetExamples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("assetGuidance")}
|
||||
scopeNote={t("assetScope")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
<InventoryFeedback error={mutation.error} />
|
||||
<ContextHelp
|
||||
description={t("assetDescription")}
|
||||
examples={t("assetExamples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("assetGuidance")}
|
||||
scopeNote={t("assetScope")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -29,54 +29,56 @@ export function BrandForm(props: BrandFormProps) {
|
||||
const { t } = useTranslation("assets");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending || isReadingLogo}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
readOnly={brand?.builtin}
|
||||
required
|
||||
{...form.register("name")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending || isReadingLogo}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
readOnly={brand?.builtin}
|
||||
required
|
||||
{...form.register("name")}
|
||||
/>
|
||||
</div>
|
||||
<BrandLogoField
|
||||
error={logoError ?? form.formState.errors.logoSvg?.message}
|
||||
logoSvg={logoSvg}
|
||||
name={name}
|
||||
onRemove={removeLogo}
|
||||
onSelect={selectLogo}
|
||||
/>
|
||||
</div>
|
||||
<BrandLogoField
|
||||
error={logoError ?? form.formState.errors.logoSvg?.message}
|
||||
logoSvg={logoSvg}
|
||||
name={name}
|
||||
onRemove={removeLogo}
|
||||
onSelect={selectLogo}
|
||||
/>
|
||||
{!quickCreate && (
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("brands.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
)}
|
||||
</fieldset>
|
||||
{(mutation.error || form.formState.errors.name || form.formState.errors.active) && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t(
|
||||
"brands.errors." +
|
||||
(mutation.error instanceof BrandApiError
|
||||
? mutation.error.code
|
||||
: mutation.error
|
||||
? "INTERNAL_ERROR"
|
||||
: "INVALID_REQUEST")
|
||||
{!quickCreate && (
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("brands.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
<ContextHelp
|
||||
description={t("brands.help")}
|
||||
examples={t("brands.examples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("brands.guidance")}
|
||||
scopeNote={t("globalHelp")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</fieldset>
|
||||
{(mutation.error || form.formState.errors.name || form.formState.errors.active) && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t(
|
||||
"brands.errors." +
|
||||
(mutation.error instanceof BrandApiError
|
||||
? mutation.error.code
|
||||
: mutation.error
|
||||
? "INTERNAL_ERROR"
|
||||
: "INVALID_REQUEST")
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
<ContextHelp
|
||||
description={t("brands.help")}
|
||||
examples={t("brands.examples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("brands.guidance")}
|
||||
scopeNote={t("globalHelp")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending || isReadingLogo} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -19,54 +19,56 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
|
||||
const { t } = useTranslation("assets");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("type")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = FieldTypeSchema.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("type", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseType")}
|
||||
required
|
||||
value={type}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
|
||||
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
|
||||
</div>
|
||||
{type === "choice" && (
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
|
||||
<Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
|
||||
<p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("type")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = FieldTypeSchema.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("type", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseType")}
|
||||
required
|
||||
value={type}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
|
||||
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
|
||||
</div>
|
||||
{type === "choice" && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
|
||||
<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("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
</div>
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="field" scope={scope} />
|
||||
<CatalogHelp kind="field" scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -18,49 +18,56 @@ export function CatalogRelationForm(props: CatalogRelationFormProps) {
|
||||
const { t } = useTranslation("assets");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("name")}
|
||||
onChange={(event) => {
|
||||
form.setValue("name", event.target.value);
|
||||
if (symmetric) {
|
||||
form.setValue("inverseName", event.target.value);
|
||||
<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>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("name")}
|
||||
onChange={(event) => {
|
||||
form.setValue("name", event.target.value);
|
||||
if (symmetric) {
|
||||
form.setValue("inverseName", event.target.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={symmetric}
|
||||
disabled={!!item}
|
||||
id={`${id}-symmetric`}
|
||||
label={t("symmetric")}
|
||||
onCheckedChange={(isSymmetric) => {
|
||||
form.setValue("symmetric", isSymmetric);
|
||||
if (isSymmetric) {
|
||||
form.setValue("inverseName", form.getValues("name"));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={symmetric}
|
||||
disabled={!!item}
|
||||
id={`${id}-symmetric`}
|
||||
label={t("symmetric")}
|
||||
onCheckedChange={(isSymmetric) => {
|
||||
form.setValue("symmetric", isSymmetric);
|
||||
if (isSymmetric) {
|
||||
form.setValue("inverseName", form.getValues("name"));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{!symmetric && (
|
||||
{!symmetric && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
|
||||
<Input
|
||||
id={`${id}-inverse`}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("inverseName")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-inverse`}>{t("inverseName")}</Label>
|
||||
<Input id={`${id}-inverse`} maxLength={100} required {...form.register("inverseName")} />
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea id={`${id}-description`} maxLength={1000} {...form.register("description")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea id={`${id}-description`} maxLength={1000} {...form.register("description")} />
|
||||
</div>
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="relation" scope={scope} />
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="relation" scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { UniqueID } from "@repo/rdx-ddd";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormSection } from "@repo/rdx-ui/components/form-section";
|
||||
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
|
||||
import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-sections-editor";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
@ -23,86 +24,90 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<FormSection title={t("formLayout.template")}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={2}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={2}
|
||||
{...form.register("description")}
|
||||
<Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
allowQuickCreate
|
||||
? { label: t("addField"), onClick: () => setCreatingField(true) }
|
||||
: undefined
|
||||
}
|
||||
disabled={mutation.isPending}
|
||||
id={`${id}-field`}
|
||||
label={t("selectField")}
|
||||
onValueChange={add}
|
||||
options={fields
|
||||
.filter(
|
||||
(entry) =>
|
||||
entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
|
||||
)
|
||||
.map((entry) => ({ value: entry.id, label: entry.values.name }))}
|
||||
placeholder={t("choose")}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
allowQuickCreate
|
||||
? { label: t("addField"), onClick: () => setCreatingField(true) }
|
||||
: undefined
|
||||
}
|
||||
{!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
|
||||
<TemplateSectionsEditor
|
||||
createId={() => UniqueID.generateNewID().toPrimitive()}
|
||||
disabled={mutation.isPending}
|
||||
id={`${id}-field`}
|
||||
label={t("selectField")}
|
||||
onValueChange={add}
|
||||
options={fields
|
||||
.filter(
|
||||
(entry) =>
|
||||
entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
|
||||
)
|
||||
.map((entry) => ({ value: entry.id, label: entry.values.name }))}
|
||||
placeholder={t("choose")}
|
||||
value=""
|
||||
fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
|
||||
fieldNotes={Object.fromEntries(
|
||||
fields
|
||||
.filter((field) => !field.effectiveActive)
|
||||
.map((field) => [field.id, t("disabledField")])
|
||||
)}
|
||||
fields={selected}
|
||||
labels={{
|
||||
title: t("sections.title"),
|
||||
add: t("sections.add"),
|
||||
name: t("sections.name"),
|
||||
description: t("sections.description"),
|
||||
ungrouped: t("sections.ungrouped"),
|
||||
moveUp: t("sections.moveUp"),
|
||||
moveDown: t("sections.moveDown"),
|
||||
remove: t("sections.remove"),
|
||||
removeField: t("sections.removeField"),
|
||||
required: t("sections.required"),
|
||||
assign: t("sections.assign"),
|
||||
help: t("sections.help"),
|
||||
empty: t("sections.empty"),
|
||||
}}
|
||||
onChange={({ sections, fields: next }) => {
|
||||
form.setValue("sections", sections, { shouldDirty: true });
|
||||
form.setValue("fields", next, { shouldDirty: true });
|
||||
}}
|
||||
sections={form.watch("sections") ?? []}
|
||||
/>
|
||||
</div>
|
||||
{!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
|
||||
<TemplateSectionsEditor
|
||||
createId={() => UniqueID.generateNewID().toPrimitive()}
|
||||
disabled={mutation.isPending}
|
||||
fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
|
||||
fieldNotes={Object.fromEntries(
|
||||
fields
|
||||
.filter((field) => !field.effectiveActive)
|
||||
.map((field) => [field.id, t("disabledField")])
|
||||
{form.formState.errors.sections && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("errors.INVALID_SECTIONS")}
|
||||
</p>
|
||||
)}
|
||||
fields={selected}
|
||||
labels={{
|
||||
title: t("sections.title"),
|
||||
add: t("sections.add"),
|
||||
name: t("sections.name"),
|
||||
description: t("sections.description"),
|
||||
ungrouped: t("sections.ungrouped"),
|
||||
moveUp: t("sections.moveUp"),
|
||||
moveDown: t("sections.moveDown"),
|
||||
remove: t("sections.remove"),
|
||||
removeField: t("sections.removeField"),
|
||||
required: t("sections.required"),
|
||||
assign: t("sections.assign"),
|
||||
help: t("sections.help"),
|
||||
empty: t("sections.empty"),
|
||||
}}
|
||||
onChange={({ sections, fields: next }) => {
|
||||
form.setValue("sections", sections, { shouldDirty: true });
|
||||
form.setValue("fields", next, { shouldDirty: true });
|
||||
}}
|
||||
sections={form.watch("sections") ?? []}
|
||||
/>
|
||||
{form.formState.errors.sections && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("errors.INVALID_SECTIONS")}
|
||||
</p>
|
||||
)}
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="template" scope={scope} />
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="template" scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -21,75 +21,81 @@ export function SupportForm(props: SupportFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("support.tool")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("support.newTool"), onClick: () => setQuick(true) }}
|
||||
id={prefix}
|
||||
label={t("support.tool")}
|
||||
onValueChange={(id) => form.setValue("toolId", id)}
|
||||
options={tools
|
||||
.filter((item) => item.active || item.id === connection?.values.toolId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("support.choose")}
|
||||
value={values.toolId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
|
||||
<Input id={`${prefix}-destination`} maxLength={300} {...form.register("destination")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("support.state")}
|
||||
onValueChange={(state) => {
|
||||
if (state === "pending" || state === "available" || state === "retired") {
|
||||
form.setValue("state", state);
|
||||
if (state !== "available") {
|
||||
form.setValue("preferred", false);
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("support.tool")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("support.newTool"), onClick: () => setQuick(true) }}
|
||||
id={prefix}
|
||||
label={t("support.tool")}
|
||||
onValueChange={(id) => form.setValue("toolId", id)}
|
||||
options={tools
|
||||
.filter((item) => item.active || item.id === connection?.values.toolId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("support.choose")}
|
||||
value={values.toolId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-destination`}>{t("support.destination")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-destination`}
|
||||
maxLength={300}
|
||||
{...form.register("destination")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("support.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("support.state")}
|
||||
onValueChange={(state) => {
|
||||
if (state === "pending" || state === "available" || state === "retired") {
|
||||
form.setValue("state", state);
|
||||
if (state !== "available") {
|
||||
form.setValue("preferred", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
options={["pending", "available", "retired"].map((state) => ({
|
||||
value: state,
|
||||
label: t(`support.${state}`),
|
||||
}))}
|
||||
placeholder={t("support.chooseState")}
|
||||
value={values.state}
|
||||
}}
|
||||
options={["pending", "available", "retired"].map((state) => ({
|
||||
value: state,
|
||||
label: t(`support.${state}`),
|
||||
}))}
|
||||
placeholder={t("support.chooseState")}
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.requiresVpn}
|
||||
id={`${prefix}-requires-vpn`}
|
||||
label={t("support.requiresVpn")}
|
||||
onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.requiresVpn}
|
||||
id={`${prefix}-requires-vpn`}
|
||||
label={t("support.requiresVpn")}
|
||||
onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
|
||||
/>
|
||||
<SwitchField
|
||||
checked={values.preferred}
|
||||
disabled={values.state !== "available"}
|
||||
id={`${prefix}-preferred`}
|
||||
label={t("support.preferred")}
|
||||
onCheckedChange={(preferred) => form.setValue("preferred", preferred)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("support.notes")}</Label>
|
||||
<textarea
|
||||
className="min-h-24 w-full rounded-md border bg-background px-3 py-2 text-sm"
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={2000}
|
||||
{...form.register("notes")}
|
||||
<SwitchField
|
||||
checked={values.preferred}
|
||||
disabled={values.state !== "available"}
|
||||
id={`${prefix}-preferred`}
|
||||
label={t("support.preferred")}
|
||||
onCheckedChange={(preferred) => form.setValue("preferred", preferred)}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<SupportFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<SupportHelp />
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("support.notes")}</Label>
|
||||
<textarea
|
||||
className="min-h-24 w-full rounded-md border bg-background px-3 py-2 text-sm"
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={2000}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<SupportFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<SupportHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -17,30 +17,32 @@ export function SupportToolForm(props: SupportToolFormProps) {
|
||||
const { t } = useTranslation("assets");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("support.toolName")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
readOnly={tool?.builtin}
|
||||
required
|
||||
{...form.register("name")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("support.toolName")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
readOnly={tool?.builtin}
|
||||
required
|
||||
{...form.register("name")}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("support.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("support.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
</fieldset>
|
||||
<SupportFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
</fieldset>
|
||||
<SupportFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<SupportHelp tool />
|
||||
<SupportHelp tool />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -36,143 +36,145 @@ export function WorkstationForm(props: WorkstationFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("name")}</Label>
|
||||
<Input id={prefix} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newSite"),
|
||||
onClick: () => lookups.onCreateSite(siteCreated),
|
||||
}}
|
||||
id={`${prefix}-site`}
|
||||
label={t("site")}
|
||||
onValueChange={(id) => form.setValue("siteId", id || null)}
|
||||
options={lookups.sites.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("noAssignment")}
|
||||
value={values.siteId ?? ""}
|
||||
/>
|
||||
<Label htmlFor={prefix}>{t("name")}</Label>
|
||||
<Input id={prefix} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("workstationPerson")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newPerson"),
|
||||
onClick: () => lookups.onCreatePerson(personCreated),
|
||||
}}
|
||||
id={`${prefix}-person`}
|
||||
label={t("workstationPerson")}
|
||||
onValueChange={(id) => form.setValue("personId", id || null)}
|
||||
options={lookups.people
|
||||
.filter((item) => item.active || item.id === workstation?.values.personId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("noAssignment")}
|
||||
value={values.personId ?? ""}
|
||||
/>
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-site`}>{t("site")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newSite"),
|
||||
onClick: () => lookups.onCreateSite(siteCreated),
|
||||
}}
|
||||
id={`${prefix}-site`}
|
||||
label={t("site")}
|
||||
onValueChange={(id) => form.setValue("siteId", id || null)}
|
||||
options={lookups.sites.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("noAssignment")}
|
||||
value={values.siteId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("workstationPerson")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newPerson"),
|
||||
onClick: () => lookups.onCreatePerson(personCreated),
|
||||
}}
|
||||
id={`${prefix}-person`}
|
||||
label={t("workstationPerson")}
|
||||
onValueChange={(id) => form.setValue("personId", id || null)}
|
||||
options={lookups.people
|
||||
.filter((item) => item.active || item.id === workstation?.values.personId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("noAssignment")}
|
||||
value={values.personId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(["assetIds", "sharedAssetIds"] as const).map((field) => (
|
||||
<div className="space-y-2" key={field}>
|
||||
<Label htmlFor={`${prefix}-${field}`}>
|
||||
{t(field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset")}
|
||||
</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newAsset"),
|
||||
onClick: () => {
|
||||
setQuickField(field);
|
||||
setQuick(true);
|
||||
},
|
||||
disabled: !catalog.data,
|
||||
}}
|
||||
disabled={inventory.isPending || values[field].length >= 200}
|
||||
id={`${prefix}-${field}`}
|
||||
label={t(
|
||||
field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset"
|
||||
)}
|
||||
onValueChange={(id) => add(field, id)}
|
||||
options={assets
|
||||
.filter(
|
||||
(item) => ![...values.assetIds, ...values.sharedAssetIds].includes(item.id)
|
||||
)
|
||||
.map((item) => ({
|
||||
value: item.id,
|
||||
label: unavailable(field, item.id)
|
||||
? t("workstationOccupied", { name: item.values.name })
|
||||
: item.values.name,
|
||||
disabled: unavailable(field, item.id),
|
||||
}))}
|
||||
placeholder={t("chooseAsset")}
|
||||
value=""
|
||||
/>
|
||||
{values[field].length ? (
|
||||
<ul className="space-y-2">
|
||||
{values[field].map((id) => (
|
||||
<li
|
||||
className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
|
||||
key={id}
|
||||
>
|
||||
<div>
|
||||
<p>{assets.find((item) => item.id === id)?.values.name ?? id}</p>
|
||||
{unavailable(field, id) && (
|
||||
<p className="text-destructive">
|
||||
{t("inventoryErrors.ASSET_IN_WORKSTATION")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
aria-label={t("removeWorkstationAsset", {
|
||||
name: assets.find((item) => item.id === id)?.values.name ?? id,
|
||||
})}
|
||||
onClick={() =>
|
||||
form.setValue(
|
||||
field,
|
||||
values[field].filter((item) => item !== id)
|
||||
)
|
||||
}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
{(["assetIds", "sharedAssetIds"] as const).map((field) => (
|
||||
<div className="space-y-2" key={field}>
|
||||
<Label htmlFor={`${prefix}-${field}`}>
|
||||
{t(field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset")}
|
||||
</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newAsset"),
|
||||
onClick: () => {
|
||||
setQuickField(field);
|
||||
setQuick(true);
|
||||
},
|
||||
disabled: !catalog.data,
|
||||
}}
|
||||
disabled={inventory.isPending || values[field].length >= 200}
|
||||
id={`${prefix}-${field}`}
|
||||
label={t(
|
||||
field === "assetIds" ? "addWorkstationAsset" : "addSharedWorkstationAsset"
|
||||
)}
|
||||
onValueChange={(id) => add(field, id)}
|
||||
options={assets
|
||||
.filter(
|
||||
(item) => ![...values.assetIds, ...values.sharedAssetIds].includes(item.id)
|
||||
)
|
||||
.map((item) => ({
|
||||
value: item.id,
|
||||
label: unavailable(field, item.id)
|
||||
? t("workstationOccupied", { name: item.values.name })
|
||||
: item.values.name,
|
||||
disabled: unavailable(field, item.id),
|
||||
}))}
|
||||
placeholder={t("chooseAsset")}
|
||||
value=""
|
||||
/>
|
||||
{values[field].length ? (
|
||||
<ul className="space-y-2">
|
||||
{values[field].map((id) => (
|
||||
<li
|
||||
className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
|
||||
key={id}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(field === "assetIds" ? "noWorkstationAssets" : "noSharedWorkstationAssets")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<InventoryFeedback error={mutation.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("workstationDescription")}
|
||||
examples={t("workstationExamples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("workstationGuidance")}
|
||||
scopeNote={t("workstationScope")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
<div>
|
||||
<p>{assets.find((item) => item.id === id)?.values.name ?? id}</p>
|
||||
{unavailable(field, id) && (
|
||||
<p className="text-destructive">
|
||||
{t("inventoryErrors.ASSET_IN_WORKSTATION")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
aria-label={t("removeWorkstationAsset", {
|
||||
name: assets.find((item) => item.id === id)?.values.name ?? id,
|
||||
})}
|
||||
onClick={() =>
|
||||
form.setValue(
|
||||
field,
|
||||
values[field].filter((item) => item !== id)
|
||||
)
|
||||
}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(field === "assetIds" ? "noWorkstationAssets" : "noSharedWorkstationAssets")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<InventoryFeedback error={mutation.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("workstationDescription")}
|
||||
examples={t("workstationExamples")}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t("workstationGuidance")}
|
||||
scopeNote={t("workstationScope")}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button
|
||||
disabled={
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody, FormDialog } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import { Input } from "@repo/shadcn-ui/components/input";
|
||||
import { Label } from "@repo/shadcn-ui/components/label";
|
||||
@ -23,48 +23,50 @@ export function QuickCreateDialog(props: QuickCreateDialogProps) {
|
||||
open
|
||||
title={t(target.kind === "system" ? "quickAddSystem" : "quickAddEnvironment")}
|
||||
>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
{target.kind === "environment" && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("quickEnvironmentContext", { name: target.systemName })}
|
||||
</p>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("name", { validate: (value) => value.trim().length > 0 })}
|
||||
/>
|
||||
{form.formState.errors.name && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t("invalid")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
{target.kind === "environment" && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("quickEnvironmentContext", { name: target.systemName })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{mutation.isError && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t(
|
||||
`errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{existing && (
|
||||
<div className="space-y-2">
|
||||
<p>{t("quickExisting")}</p>
|
||||
<Button
|
||||
disabled={mutation.isPending}
|
||||
onClick={() => onCreated(existing.id)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("quickUseExisting")}
|
||||
</Button>
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input
|
||||
id={id}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("name", { validate: (value) => value.trim().length > 0 })}
|
||||
/>
|
||||
{form.formState.errors.name && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t("invalid")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
|
||||
<EntityHelp kind={target.kind} scope={scope} />
|
||||
{mutation.isError && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t(
|
||||
`errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{existing && (
|
||||
<div className="space-y-2">
|
||||
<p>{t("quickExisting")}</p>
|
||||
<Button
|
||||
disabled={mutation.isPending}
|
||||
onClick={() => onCreated(existing.id)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("quickUseExisting")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
|
||||
<EntityHelp kind={target.kind} scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "quickSaveSelect")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import type { ComponentType } from "react";
|
||||
import { useId } from "react";
|
||||
@ -37,52 +37,54 @@ export function AccessFormFields(
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{editableFields.map((field) => (
|
||||
<div
|
||||
className={["note", "permissions"].includes(field.type) ? "sm:col-span-2" : ""}
|
||||
key={field.key}
|
||||
>
|
||||
<AccessFieldControl
|
||||
createLabel={
|
||||
field.key === "systemId" || field.key === "environmentId"
|
||||
? undefined
|
||||
: t("quickAddEntry", { name: t(field.key) })
|
||||
}
|
||||
disabled={
|
||||
Boolean(item && field.fixed) ||
|
||||
lockedFields.includes(field.key) ||
|
||||
mutation.isPending
|
||||
}
|
||||
field={field}
|
||||
form={form}
|
||||
id={`${prefix}-${field.key}`}
|
||||
onCreate={quickAction(field)}
|
||||
onSelected={(value) => select(field, value)}
|
||||
options={options(field)}
|
||||
value={watched[field.key]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{validation && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{validation}
|
||||
</p>
|
||||
)}
|
||||
{mutation.isError && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t(
|
||||
`errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{help[kind] && <p className="text-sm text-muted-foreground">{t(help[kind])}</p>}
|
||||
{["account_person", "membership", "grant"].includes(kind) && (
|
||||
<p className="text-sm text-muted-foreground">{t("configurationHelp")}</p>
|
||||
)}
|
||||
<EntityHelp kind={kind} scope={scope} />
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{editableFields.map((field) => (
|
||||
<div
|
||||
className={["note", "permissions"].includes(field.type) ? "sm:col-span-2" : ""}
|
||||
key={field.key}
|
||||
>
|
||||
<AccessFieldControl
|
||||
createLabel={
|
||||
field.key === "systemId" || field.key === "environmentId"
|
||||
? undefined
|
||||
: t("quickAddEntry", { name: t(field.key) })
|
||||
}
|
||||
disabled={
|
||||
Boolean(item && field.fixed) ||
|
||||
lockedFields.includes(field.key) ||
|
||||
mutation.isPending
|
||||
}
|
||||
field={field}
|
||||
form={form}
|
||||
id={`${prefix}-${field.key}`}
|
||||
onCreate={quickAction(field)}
|
||||
onSelected={(value) => select(field, value)}
|
||||
options={options(field)}
|
||||
value={watched[field.key]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{validation && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{validation}
|
||||
</p>
|
||||
)}
|
||||
{mutation.isError && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t(
|
||||
`errors.${mutation.error instanceof AccessApiError ? mutation.error.code : "INTERNAL_ERROR"}`
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{help[kind] && <p className="text-sm text-muted-foreground">{t(help[kind])}</p>}
|
||||
{["account_person", "membership", "grant"].includes(kind) && (
|
||||
<p className="text-sm text-muted-foreground">{t("configurationHelp")}</p>
|
||||
)}
|
||||
<EntityHelp kind={kind} scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -45,121 +45,123 @@ export function ApplicationConfigurationForm(props: ApplicationConfigurationForm
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
disabled={fixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => form.setValue("profileId", id)}
|
||||
options={applicationProfiles(values.profileId, profiles.data?.profiles)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-resource`}>{t("applications.resource")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: {
|
||||
label: t("applications.newResource"),
|
||||
onClick: () => setQuick("application"),
|
||||
}
|
||||
}
|
||||
disabled={!!configuration || !ready}
|
||||
id={`${prefix}-resource`}
|
||||
label={t("applications.resource")}
|
||||
onValueChange={(id) => form.setValue("resourceId", id)}
|
||||
options={applicationOptions(
|
||||
values.resourceId,
|
||||
resources.data?.resources,
|
||||
catalog.data?.items
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.resourceId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-delivery`}>{t("applications.delivery")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-delivery`}
|
||||
label={t("applications.delivery")}
|
||||
onValueChange={changeDelivery}
|
||||
options={["installed", "web"].map((value) => ({
|
||||
value,
|
||||
label: t(`applications.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.delivery}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{values.delivery === "installed" && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-version`}
|
||||
maxLength={100}
|
||||
onChange={(event) => form.setValue("version", event.target.value || null)}
|
||||
value={values.version ?? ""}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
disabled={fixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => form.setValue("profileId", id)}
|
||||
options={applicationProfiles(values.profileId, profiles.data?.profiles)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-resource`}>{t("applications.resource")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: {
|
||||
label: t("applications.newResource"),
|
||||
onClick: () => setQuick("application"),
|
||||
}
|
||||
}
|
||||
disabled={!!configuration || !ready}
|
||||
id={`${prefix}-resource`}
|
||||
label={t("applications.resource")}
|
||||
onValueChange={(id) => form.setValue("resourceId", id)}
|
||||
options={applicationOptions(
|
||||
values.resourceId,
|
||||
resources.data?.resources,
|
||||
catalog.data?.items
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.resourceId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-delivery`}>{t("applications.delivery")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-delivery`}
|
||||
label={t("applications.delivery")}
|
||||
onValueChange={changeDelivery}
|
||||
options={["installed", "web"].map((value) => ({
|
||||
value,
|
||||
label: t(`applications.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.delivery}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{values.delivery === "installed" && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-version`}>{t("applications.version")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-version`}
|
||||
maxLength={100}
|
||||
onChange={(event) => form.setValue("version", event.target.value || null)}
|
||||
value={values.version ?? ""}
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{configuration && (
|
||||
<p className="text-sm text-muted-foreground">{t("applications.fixed")}</p>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{configuration && (
|
||||
<p className="text-sm text-muted-foreground">{t("applications.fixed")}</p>
|
||||
)}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("applications.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<ApplicationFeedback
|
||||
error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("applications.description")}
|
||||
examples={t("applications.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("applications.guidance")}
|
||||
scopeNote={t("applications.scope")}
|
||||
title={t("applications.help")}
|
||||
/>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("applications.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<ApplicationFeedback
|
||||
error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("applications.description")}
|
||||
examples={t("applications.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("applications.guidance")}
|
||||
scopeNote={t("applications.scope")}
|
||||
title={t("applications.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={!ready || mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -21,69 +21,73 @@ export function AssignmentForm(props: AssignmentFormProps) {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-department`}>{t("department")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
assignment
|
||||
? undefined
|
||||
: {
|
||||
label: t("newDepartment"),
|
||||
onClick: () => setCreatingDepartment(true),
|
||||
}
|
||||
}
|
||||
disabled={assignment !== undefined || mutation.isPending}
|
||||
id={`${id}-department`}
|
||||
invalid={!!form.formState.errors.departmentId}
|
||||
label={t("department")}
|
||||
onValueChange={(value) =>
|
||||
form.setValue("departmentId", value, { shouldDirty: true, shouldValidate: true })
|
||||
}
|
||||
options={company.departments
|
||||
.filter((item) => item.active || item.id === assignment?.departmentId)
|
||||
.map((department) => ({
|
||||
value: department.id,
|
||||
label: department.name + (department.active ? "" : ` · ${t("inactive")}`),
|
||||
}))}
|
||||
placeholder={t("chooseDepartment")}
|
||||
required
|
||||
value={form.watch("departmentId")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-position`}>{t("departmentPosition")}</Label>
|
||||
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-start`}>{t("startDate")}</Label>
|
||||
<Input id={`${id}-start`} required type="date" {...form.register("startDate")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-end`}>{t("endDate")}</Label>
|
||||
<Input
|
||||
id={`${id}-end`}
|
||||
min={form.watch("startDate")}
|
||||
type="date"
|
||||
{...form.register("endDate")}
|
||||
<Label htmlFor={`${id}-department`}>{t("department")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
assignment
|
||||
? undefined
|
||||
: {
|
||||
label: t("newDepartment"),
|
||||
onClick: () => setCreatingDepartment(true),
|
||||
}
|
||||
}
|
||||
disabled={assignment !== undefined || mutation.isPending}
|
||||
id={`${id}-department`}
|
||||
invalid={!!form.formState.errors.departmentId}
|
||||
label={t("department")}
|
||||
onValueChange={(value) =>
|
||||
form.setValue("departmentId", value, { shouldDirty: true, shouldValidate: true })
|
||||
}
|
||||
options={company.departments
|
||||
.filter((item) => item.active || item.id === assignment?.departmentId)
|
||||
.map((department) => ({
|
||||
value: department.id,
|
||||
label: department.name + (department.active ? "" : ` · ${t("inactive")}`),
|
||||
}))}
|
||||
placeholder={t("chooseDepartment")}
|
||||
required
|
||||
value={form.watch("departmentId")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={!form.watch("endDate") && form.watch("isPrimary")}
|
||||
disabled={!!form.watch("endDate")}
|
||||
id={`${id}-primary`}
|
||||
label={t("primaryDepartment")}
|
||||
onCheckedChange={(checked) => form.setValue("isPrimary", checked, { shouldDirty: true })}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("assignmentHelp")}</p>
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-position`}>{t("departmentPosition")}</Label>
|
||||
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-start`}>{t("startDate")}</Label>
|
||||
<Input id={`${id}-start`} required type="date" {...form.register("startDate")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-end`}>{t("endDate")}</Label>
|
||||
<Input
|
||||
id={`${id}-end`}
|
||||
min={form.watch("startDate")}
|
||||
type="date"
|
||||
{...form.register("endDate")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={!form.watch("endDate") && form.watch("isPrimary")}
|
||||
disabled={!!form.watch("endDate")}
|
||||
id={`${id}-primary`}
|
||||
label={t("primaryDepartment")}
|
||||
onCheckedChange={(checked) =>
|
||||
form.setValue("isPrimary", checked, { shouldDirty: true })
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("assignmentHelp")}</p>
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
|
||||
<EntityHelp kind="assignment" />
|
||||
<EntityHelp kind="assignment" />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -44,104 +44,106 @@ export function CertificateConfigurationForm(props: CertificateConfigurationForm
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
disabled={fixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => form.setValue("profileId", id)}
|
||||
options={certificateProfiles(values.profileId, profiles.data?.profiles)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-resource`}>{t("certificates.resource")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: {
|
||||
label: t("certificates.newResource"),
|
||||
onClick: () => setQuick("certificate"),
|
||||
}
|
||||
}
|
||||
disabled={!!configuration || !ready}
|
||||
id={`${prefix}-resource`}
|
||||
label={t("certificates.resource")}
|
||||
onValueChange={(id) => form.setValue("resourceId", id)}
|
||||
options={certificateOptions(
|
||||
values.resourceId,
|
||||
resources.data?.resources,
|
||||
catalog.data?.items
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.resourceId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
disabled={fixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => form.setValue("profileId", id)}
|
||||
options={certificateProfiles(values.profileId, profiles.data?.profiles)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
<Label htmlFor={`${prefix}-location`}>{t("certificates.location")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-location`}
|
||||
maxLength={255}
|
||||
onChange={(event) => form.setValue("location", event.target.value || null)}
|
||||
value={values.location ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-resource`}>{t("certificates.resource")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: {
|
||||
label: t("certificates.newResource"),
|
||||
onClick: () => setQuick("certificate"),
|
||||
}
|
||||
}
|
||||
disabled={!!configuration || !ready}
|
||||
id={`${prefix}-resource`}
|
||||
label={t("certificates.resource")}
|
||||
onValueChange={(id) => form.setValue("resourceId", id)}
|
||||
options={certificateOptions(
|
||||
values.resourceId,
|
||||
resources.data?.resources,
|
||||
catalog.data?.items
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.resourceId}
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-location`}>{t("certificates.location")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-location`}
|
||||
maxLength={255}
|
||||
onChange={(event) => form.setValue("location", event.target.value || null)}
|
||||
value={values.location ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{configuration && (
|
||||
<p className="text-sm text-muted-foreground">{t("certificates.fixed")}</p>
|
||||
)}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("certificates.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<CertificateFeedback
|
||||
error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("certificates.description")}
|
||||
examples={t("certificates.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("certificates.guidance")}
|
||||
scopeNote={t("certificates.scope")}
|
||||
title={t("certificates.help")}
|
||||
/>
|
||||
</fieldset>
|
||||
{configuration && (
|
||||
<p className="text-sm text-muted-foreground">{t("certificates.fixed")}</p>
|
||||
)}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("certificates.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<CertificateFeedback
|
||||
error={mutation.error ?? profiles.error ?? resources.error ?? catalog.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("certificates.description")}
|
||||
examples={t("certificates.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("certificates.guidance")}
|
||||
scopeNote={t("certificates.scope")}
|
||||
title={t("certificates.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={!ready || mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -20,40 +20,42 @@ export function CompanyForm(props: CompanyFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
{showTitle && (
|
||||
<h2 className="text-lg font-semibold">{t(company ? "editCompany" : "newCompany")}</h2>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("activeCompany")}
|
||||
onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
|
||||
/>
|
||||
<CompanyLogoField
|
||||
companyId={savedCompanyId}
|
||||
disabled={mutation.isPending}
|
||||
draft={logoDraft}
|
||||
logoVersion={mutation.data ? mutation.data.company.logoVersion : company?.logoVersion}
|
||||
name={form.watch("name")}
|
||||
onChange={setLogoDraft}
|
||||
/>
|
||||
{mutation.isError && partialSave && (
|
||||
<p className="text-sm text-muted-foreground" role="status">
|
||||
{t("logo.partialSave")}
|
||||
</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
success={mutation.isSuccess}
|
||||
/>
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
{showTitle && (
|
||||
<h2 className="text-lg font-semibold">{t(company ? "editCompany" : "newCompany")}</h2>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${id}-active`}
|
||||
label={t("activeCompany")}
|
||||
onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
|
||||
/>
|
||||
<CompanyLogoField
|
||||
companyId={savedCompanyId}
|
||||
disabled={mutation.isPending}
|
||||
draft={logoDraft}
|
||||
logoVersion={mutation.data ? mutation.data.company.logoVersion : company?.logoVersion}
|
||||
name={form.watch("name")}
|
||||
onChange={setLogoDraft}
|
||||
/>
|
||||
{mutation.isError && partialSave && (
|
||||
<p className="text-sm text-muted-foreground" role="status">
|
||||
{t("logo.partialSave")}
|
||||
</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
success={mutation.isSuccess}
|
||||
/>
|
||||
|
||||
<EntityHelp kind="company" />
|
||||
<EntityHelp kind="company" />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -17,27 +17,29 @@ export function DepartmentForm(props: DepartmentFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{t("name")}</Label>
|
||||
<Input id={id} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={requireActive}
|
||||
id={`${id}-active`}
|
||||
label={t("activeDepartment")}
|
||||
onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
|
||||
/>
|
||||
{department && (
|
||||
<p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<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>
|
||||
<Input id={id} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={requireActive}
|
||||
id={`${id}-active`}
|
||||
label={t("activeDepartment")}
|
||||
onCheckedChange={(checked) => form.setValue("active", checked, { shouldDirty: true })}
|
||||
/>
|
||||
{department && (
|
||||
<p className="text-sm text-muted-foreground">{t("departmentDeactivationHelp")}</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
|
||||
<EntityHelp kind="department" />
|
||||
<EntityHelp kind="department" />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -40,93 +40,95 @@ export function FolderMappingForm(props: FolderMappingFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<FolderMappingTargets
|
||||
company={company}
|
||||
fixed={Boolean(mapping)}
|
||||
form={form}
|
||||
initialProfileId={initialProfileId}
|
||||
items={items}
|
||||
needs={needs}
|
||||
onNeedChange={changeNeed}
|
||||
onQuickCreate={setQuick}
|
||||
prefix={prefix}
|
||||
profile={profile}
|
||||
profiles={profiles.data?.profiles ?? []}
|
||||
ready={ready}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-path`}>{t("folders.path")}</Label>
|
||||
<Input id={`${prefix}-path`} readOnly value={values.path} />
|
||||
</div>
|
||||
{mapping && currentPath !== values.path && (
|
||||
<div className="rounded-md border p-3 text-sm space-y-2">
|
||||
<p>
|
||||
{t("folders.currentPath")}: {currentPath}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => form.setValue("path", currentPath)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("folders.useCurrentPath")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-letter`}>{t("folders.letter")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-letter`}
|
||||
maxLength={2}
|
||||
onChange={(event) => form.setValue("driveLetter", event.target.value || null)}
|
||||
placeholder="G:"
|
||||
value={values.driveLetter ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(state) => {
|
||||
const parsed = FolderMappingInputSchema.shape.state.safeParse(state);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={states.map((state) => ({ value: state, label: t(`mail.${state}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<FolderMappingTargets
|
||||
company={company}
|
||||
fixed={Boolean(mapping)}
|
||||
form={form}
|
||||
initialProfileId={initialProfileId}
|
||||
items={items}
|
||||
needs={needs}
|
||||
onNeedChange={changeNeed}
|
||||
onQuickCreate={setQuick}
|
||||
prefix={prefix}
|
||||
profile={profile}
|
||||
profiles={profiles.data?.profiles ?? []}
|
||||
ready={ready}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("folders.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<FolderFeedback error={mutation.error ?? access.error ?? profiles.error} />
|
||||
<ContextHelp
|
||||
description={t("folders.description")}
|
||||
examples={t("folders.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("folders.guidance")}
|
||||
scopeNote={t("folders.scope")}
|
||||
title={t("folders.help")}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-path`}>{t("folders.path")}</Label>
|
||||
<Input id={`${prefix}-path`} readOnly value={values.path} />
|
||||
</div>
|
||||
{mapping && currentPath !== values.path && (
|
||||
<div className="rounded-md border p-3 text-sm space-y-2">
|
||||
<p>
|
||||
{t("folders.currentPath")}: {currentPath}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => form.setValue("path", currentPath)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("folders.useCurrentPath")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-letter`}>{t("folders.letter")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-letter`}
|
||||
maxLength={2}
|
||||
onChange={(event) => form.setValue("driveLetter", event.target.value || null)}
|
||||
placeholder="G:"
|
||||
value={values.driveLetter ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(state) => {
|
||||
const parsed = FolderMappingInputSchema.shape.state.safeParse(state);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={states.map((state) => ({ value: state, label: t(`mail.${state}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("folders.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<FolderFeedback error={mutation.error ?? access.error ?? profiles.error} />
|
||||
<ContextHelp
|
||||
description={t("folders.description")}
|
||||
examples={t("folders.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("folders.guidance")}
|
||||
scopeNote={t("folders.scope")}
|
||||
title={t("folders.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending || !ready} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -20,53 +20,57 @@ export function InterventionTemplateForm(props: InterventionTemplateFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const prefix = useId();
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-description`}>{t("interventionTemplates.description")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-description`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-description`}>
|
||||
{t("interventionTemplates.description")}
|
||||
</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-description`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
<h3 className="font-medium">{t("interventionTemplates.steps")}</h3>
|
||||
{steps.fields.map((step, index) => (
|
||||
<TemplateStepFields
|
||||
count={steps.fields.length}
|
||||
form={form}
|
||||
index={index}
|
||||
key={step.fieldKey}
|
||||
onMove={steps.move}
|
||||
onRemove={steps.remove}
|
||||
prefix={prefix}
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
disabled={steps.fields.length >= 100}
|
||||
onClick={() => steps.append(newTemplateStep())}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("interventionTemplates.addStep")}
|
||||
</Button>
|
||||
</fieldset>
|
||||
<InterventionTemplateFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<h3 className="font-medium">{t("interventionTemplates.steps")}</h3>
|
||||
{steps.fields.map((step, index) => (
|
||||
<TemplateStepFields
|
||||
count={steps.fields.length}
|
||||
form={form}
|
||||
index={index}
|
||||
key={step.fieldKey}
|
||||
onMove={steps.move}
|
||||
onRemove={steps.remove}
|
||||
prefix={prefix}
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
disabled={steps.fields.length >= 100}
|
||||
onClick={() => steps.append(newTemplateStep())}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("interventionTemplates.addStep")}
|
||||
</Button>
|
||||
</fieldset>
|
||||
<InterventionTemplateFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<InterventionTemplateHelp />
|
||||
<InterventionTemplateHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -52,103 +52,105 @@ export function InterventionForm(props: InterventionFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<InterventionCompanyField
|
||||
companies={data.companies}
|
||||
companyId={companyId}
|
||||
fixed={isCompanyFixed(scope, intervention, initialTicket)}
|
||||
onChange={changeCompany}
|
||||
onNew={() => setQuick("company")}
|
||||
prefix={prefix}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-subject`}>{t("interventions.subject")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-subject`}
|
||||
maxLength={200}
|
||||
required
|
||||
{...form.register("subject")}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-ticket`}>{t("interventions.ticket")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("tickets.new"),
|
||||
onClick: () => setQuick("ticket"),
|
||||
disabled: !(companyId && lookups.data),
|
||||
}}
|
||||
disabled={!lookups.data}
|
||||
id={`${prefix}-ticket`}
|
||||
label={t("interventions.ticket")}
|
||||
onValueChange={selectTicket}
|
||||
options={
|
||||
lookups.data?.tickets.map((item) => ({
|
||||
value: item.id,
|
||||
label: `${item.reference} · ${item.values.subject}`,
|
||||
})) ?? []
|
||||
}
|
||||
placeholder={t("interventions.internal")}
|
||||
value={values.ticketId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-assignee`}>{t("interventions.assignee")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-assignee`}
|
||||
label={t("interventions.assignee")}
|
||||
onValueChange={(id) => form.setValue("assigneeId", id || null)}
|
||||
options={data.technicians
|
||||
.filter((item) => item.active || item.id === intervention?.values.assigneeId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("interventions.unassigned")}
|
||||
value={values.assigneeId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InterventionWorkFields form={form} prefix={prefix} />
|
||||
{companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
|
||||
<InterventionFeedback error={lookups.error} />
|
||||
{lookups.isError && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
lookups.refetch().catch(() => undefined);
|
||||
}}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("retry")}
|
||||
</Button>
|
||||
)}
|
||||
{lookups.data && (
|
||||
<TicketTargets
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<InterventionCompanyField
|
||||
companies={data.companies}
|
||||
companyId={companyId}
|
||||
csrfToken={csrfToken}
|
||||
lookupKey={interventionKeys.lookups(companyId)}
|
||||
lookups={lookups.data}
|
||||
onChange={(affected) => form.setValue("affected", affected)}
|
||||
values={values.affected}
|
||||
fixed={isCompanyFixed(scope, intervention, initialTicket)}
|
||||
onChange={changeCompany}
|
||||
onNew={() => setQuick("company")}
|
||||
prefix={prefix}
|
||||
/>
|
||||
)}
|
||||
<InterventionProcedureFields
|
||||
applied={applied}
|
||||
intervention={intervention}
|
||||
lookups={lookups.data}
|
||||
onApply={applyTemplate}
|
||||
onNewTemplate={() => setQuick("template")}
|
||||
onSelect={setSelectedTemplate}
|
||||
prefix={prefix}
|
||||
selectedTemplate={selectedTemplate}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-subject`}>{t("interventions.subject")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-subject`}
|
||||
maxLength={200}
|
||||
required
|
||||
{...form.register("subject")}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-ticket`}>{t("interventions.ticket")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("tickets.new"),
|
||||
onClick: () => setQuick("ticket"),
|
||||
disabled: !(companyId && lookups.data),
|
||||
}}
|
||||
disabled={!lookups.data}
|
||||
id={`${prefix}-ticket`}
|
||||
label={t("interventions.ticket")}
|
||||
onValueChange={selectTicket}
|
||||
options={
|
||||
lookups.data?.tickets.map((item) => ({
|
||||
value: item.id,
|
||||
label: `${item.reference} · ${item.values.subject}`,
|
||||
})) ?? []
|
||||
}
|
||||
placeholder={t("interventions.internal")}
|
||||
value={values.ticketId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-assignee`}>{t("interventions.assignee")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-assignee`}
|
||||
label={t("interventions.assignee")}
|
||||
onValueChange={(id) => form.setValue("assigneeId", id || null)}
|
||||
options={data.technicians
|
||||
.filter((item) => item.active || item.id === intervention?.values.assigneeId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("interventions.unassigned")}
|
||||
value={values.assigneeId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InterventionWorkFields form={form} prefix={prefix} />
|
||||
{companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
|
||||
<InterventionFeedback error={lookups.error} />
|
||||
{lookups.isError && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
lookups.refetch().catch(() => undefined);
|
||||
}}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("retry")}
|
||||
</Button>
|
||||
)}
|
||||
{lookups.data && (
|
||||
<TicketTargets
|
||||
companyId={companyId}
|
||||
csrfToken={csrfToken}
|
||||
lookupKey={interventionKeys.lookups(companyId)}
|
||||
lookups={lookups.data}
|
||||
onChange={(affected) => form.setValue("affected", affected)}
|
||||
values={values.affected}
|
||||
/>
|
||||
)}
|
||||
<InterventionProcedureFields
|
||||
applied={applied}
|
||||
intervention={intervention}
|
||||
lookups={lookups.data}
|
||||
onApply={applyTemplate}
|
||||
onNewTemplate={() => setQuick("template")}
|
||||
onSelect={setSelectedTemplate}
|
||||
prefix={prefix}
|
||||
selectedTemplate={selectedTemplate}
|
||||
/>
|
||||
<InterventionSteps form={form} prefix={prefix} />
|
||||
</fieldset>
|
||||
<InterventionFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<InterventionSteps form={form} prefix={prefix} />
|
||||
</fieldset>
|
||||
<InterventionFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<InterventionHelp />
|
||||
<InterventionHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button
|
||||
disabled={mutation.isPending || !companyId || !lookups.data || lookups.isError}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import { Label } from "@repo/shadcn-ui/components/label";
|
||||
import { Textarea } from "@repo/shadcn-ui/components/textarea";
|
||||
@ -44,71 +44,73 @@ export function MailConfigurationForm(props: MailConfigurationFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={disabled}>
|
||||
{legacy && (
|
||||
<p className="rounded-md border p-3 text-sm">
|
||||
{t("mail.legacyLink")} {legacy.address} · {personLabel(legacy.personId)} ·{" "}
|
||||
{assetLabel(legacy.assetId)}
|
||||
</p>
|
||||
)}
|
||||
<MailConfigurationTargets
|
||||
fixed={fixed}
|
||||
form={form}
|
||||
initialProfileId={initialProfileId}
|
||||
mailboxes={mailboxOptions(
|
||||
mailboxes.data?.mailboxes ?? [],
|
||||
values.mailboxId,
|
||||
legacy
|
||||
).map((item) => ({ value: item.id, label: item.values.address }))}
|
||||
onQuickCreate={setQuick}
|
||||
prefix={prefix}
|
||||
profiles={profileOptions(profiles.data?.profiles ?? [], values.profileId, legacy).map(
|
||||
(item) => ({
|
||||
value: item.id,
|
||||
label:
|
||||
profileLabel(item.id) +
|
||||
" · " +
|
||||
personLabel(item.values.personId) +
|
||||
" · " +
|
||||
assetLabel(item.values.assetId),
|
||||
})
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={disabled}>
|
||||
{legacy && (
|
||||
<p className="rounded-md border p-3 text-sm">
|
||||
{t("mail.legacyLink")} {legacy.address} · {personLabel(legacy.personId)} ·{" "}
|
||||
{assetLabel(legacy.assetId)}
|
||||
</p>
|
||||
)}
|
||||
ready={ready}
|
||||
states={states}
|
||||
/>
|
||||
<MailboxUsagePrompt
|
||||
authorized={authorized ?? false}
|
||||
mailbox={selectedMailbox}
|
||||
onRegister={() => setQuick("use")}
|
||||
profile={selectedProfile}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
<MailConfigurationTargets
|
||||
fixed={fixed}
|
||||
form={form}
|
||||
initialProfileId={initialProfileId}
|
||||
mailboxes={mailboxOptions(
|
||||
mailboxes.data?.mailboxes ?? [],
|
||||
values.mailboxId,
|
||||
legacy
|
||||
).map((item) => ({ value: item.id, label: item.values.address }))}
|
||||
onQuickCreate={setQuick}
|
||||
prefix={prefix}
|
||||
profiles={profileOptions(profiles.data?.profiles ?? [], values.profileId, legacy).map(
|
||||
(item) => ({
|
||||
value: item.id,
|
||||
label:
|
||||
profileLabel(item.id) +
|
||||
" · " +
|
||||
personLabel(item.values.personId) +
|
||||
" · " +
|
||||
assetLabel(item.values.assetId),
|
||||
})
|
||||
)}
|
||||
ready={ready}
|
||||
states={states}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{fixed && <p className="text-sm text-muted-foreground">{t("mail.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<MailFeedback
|
||||
error={mutation.error ?? profiles.error ?? mailboxes.error ?? inventory.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("mail.description")}
|
||||
examples={t("mail.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("mail.guidance")}
|
||||
scopeNote={t("mail.scope")}
|
||||
title={t("mail.help")}
|
||||
/>
|
||||
<MailboxUsagePrompt
|
||||
authorized={authorized ?? false}
|
||||
mailbox={selectedMailbox}
|
||||
onRegister={() => setQuick("use")}
|
||||
profile={selectedProfile}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{fixed && <p className="text-sm text-muted-foreground">{t("mail.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<MailFeedback
|
||||
error={mutation.error ?? profiles.error ?? mailboxes.error ?? inventory.error}
|
||||
/>
|
||||
<ContextHelp
|
||||
description={t("mail.description")}
|
||||
examples={t("mail.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("mail.guidance")}
|
||||
scopeNote={t("mail.scope")}
|
||||
title={t("mail.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={disabled || !ready} type="submit">
|
||||
{t(disabled ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -31,82 +31,84 @@ export function MailboxUseForm(props: MailboxUseFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
canCreate(!!use, initialMailboxId, allowQuickCreate)
|
||||
? { label: t("mailbox.new"), onClick: () => setQuick("mailbox") }
|
||||
: undefined
|
||||
}
|
||||
disabled={!!use || !!initialMailboxId}
|
||||
id={`${prefix}-mailbox`}
|
||||
label={t("mailbox.titleSingle")}
|
||||
onValueChange={(id) => form.setValue("mailboxId", id)}
|
||||
options={(query.data?.mailboxes ?? [])
|
||||
.filter((item) => item.values.active || item.id === values.mailboxId)
|
||||
.map((item) => ({ value: item.id, label: item.values.address }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.mailboxId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("mail.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
canCreate(!!use, initialPersonId, allowQuickCreate)
|
||||
? { label: t("newPerson"), onClick: () => setQuick("person") }
|
||||
: undefined
|
||||
}
|
||||
disabled={!!use || !!initialPersonId}
|
||||
id={`${prefix}-person`}
|
||||
label={t("mail.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people
|
||||
.filter((item) => item.active || item.id === values.personId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-start`}>{t("mailbox.start")}</Label>
|
||||
<Input
|
||||
disabled={!!use}
|
||||
id={`${prefix}-start`}
|
||||
<Label htmlFor={`${prefix}-mailbox`}>{t("mailbox.titleSingle")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
canCreate(!!use, initialMailboxId, allowQuickCreate)
|
||||
? { label: t("mailbox.new"), onClick: () => setQuick("mailbox") }
|
||||
: undefined
|
||||
}
|
||||
disabled={!!use || !!initialMailboxId}
|
||||
id={`${prefix}-mailbox`}
|
||||
label={t("mailbox.titleSingle")}
|
||||
onValueChange={(id) => form.setValue("mailboxId", id)}
|
||||
options={(query.data?.mailboxes ?? [])
|
||||
.filter((item) => item.values.active || item.id === values.mailboxId)
|
||||
.map((item) => ({ value: item.id, label: item.values.address }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
type="date"
|
||||
{...form.register("startDate")}
|
||||
value={values.mailboxId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-end`}>{t("mailbox.end")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-end`}
|
||||
onChange={(event) => form.setValue("endDate", event.target.value || null)}
|
||||
required={!!use}
|
||||
type="date"
|
||||
value={values.endDate ?? ""}
|
||||
<Label htmlFor={`${prefix}-person`}>{t("mail.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
canCreate(!!use, initialPersonId, allowQuickCreate)
|
||||
? { label: t("newPerson"), onClick: () => setQuick("person") }
|
||||
: undefined
|
||||
}
|
||||
disabled={!!use || !!initialPersonId}
|
||||
id={`${prefix}-person`}
|
||||
label={t("mail.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people
|
||||
.filter((item) => item.active || item.id === values.personId)
|
||||
.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<MailFeedback error={mutation.error ?? query.error} />
|
||||
<ContextHelp
|
||||
description={t("mailbox.useDescription")}
|
||||
examples={t("mailbox.useExamples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("mailbox.useGuidance")}
|
||||
title={t("mailbox.useHelp")}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-start`}>{t("mailbox.start")}</Label>
|
||||
<Input
|
||||
disabled={!!use}
|
||||
id={`${prefix}-start`}
|
||||
required
|
||||
type="date"
|
||||
{...form.register("startDate")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-end`}>{t("mailbox.end")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-end`}
|
||||
onChange={(event) => form.setValue("endDate", event.target.value || null)}
|
||||
required={!!use}
|
||||
type="date"
|
||||
value={values.endDate ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p role="alert">{t("mail.errors.INVALID_REQUEST")}</p>
|
||||
)}
|
||||
<MailFeedback error={mutation.error ?? query.error} />
|
||||
<ContextHelp
|
||||
description={t("mailbox.useDescription")}
|
||||
examples={t("mailbox.useExamples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("mailbox.useGuidance")}
|
||||
title={t("mailbox.useHelp")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending || !query.data} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -19,8 +19,8 @@ export function PersonEditorDialog({
|
||||
formActions
|
||||
onOpenChange={onOpenChange}
|
||||
open={open}
|
||||
size="medium"
|
||||
title={t(formProps.person ? "editPerson" : "newPerson")}
|
||||
wide
|
||||
>
|
||||
<PersonForm {...formProps} key={formProps.person?.id ?? "new"} />
|
||||
</FormDialog>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -17,49 +17,51 @@ export function PersonForm(props: PersonFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="max-w-2xl space-y-6" onSubmit={submit}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-position`}>{t("generalPosition")}</Label>
|
||||
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-email`}>{t("emailOptional")}</Label>
|
||||
<Input id={`${id}-email`} maxLength={254} type="email" {...form.register("email")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
|
||||
<Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-position`}>{t("generalPosition")}</Label>
|
||||
<Input id={`${id}-position`} maxLength={100} {...form.register("position")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-email`}>{t("emailOptional")}</Label>
|
||||
<Input id={`${id}-email`} maxLength={254} type="email" {...form.register("email")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-phone`}>{t("phoneOptional")}</Label>
|
||||
<Input id={`${id}-phone`} maxLength={50} type="tel" {...form.register("phone")} />
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={requireActive}
|
||||
id={`${id}-active`}
|
||||
label={t("activePerson")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
<SwitchField
|
||||
checked={form.watch("isContact")}
|
||||
id={`${id}-contact`}
|
||||
label={t("isContact")}
|
||||
onCheckedChange={(isContact) =>
|
||||
form.setValue("isContact", isContact, { shouldDirty: true })
|
||||
}
|
||||
/>
|
||||
{person?.active && !form.watch("active") && (
|
||||
<p className="text-sm text-muted-foreground">{t("deactivationHelp")}</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">{t("personHelp")}</p>
|
||||
<EntityHelp kind="person" />
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={requireActive}
|
||||
id={`${id}-active`}
|
||||
label={t("activePerson")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
<SwitchField
|
||||
checked={form.watch("isContact")}
|
||||
id={`${id}-contact`}
|
||||
label={t("isContact")}
|
||||
onCheckedChange={(isContact) =>
|
||||
form.setValue("isContact", isContact, { shouldDirty: true })
|
||||
}
|
||||
/>
|
||||
{person?.active && !form.watch("active") && (
|
||||
<p className="text-sm text-muted-foreground">{t("deactivationHelp")}</p>
|
||||
)}
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">{t("personHelp")}</p>
|
||||
<EntityHelp kind="person" />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -47,118 +47,121 @@ export function PrinterConfigurationForm(props: PrinterConfigurationFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
profileFixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
disabled={profileFixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => {
|
||||
form.setValue("profileId", id);
|
||||
form.setValue("printerId", "");
|
||||
}}
|
||||
options={profileOptions(profiles.data?.profiles ?? [], values.profileId)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-printer`}>{t("printers.printer")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: { label: t("printers.newAsset"), onClick: () => setQuick("printer") }
|
||||
}
|
||||
disabled={!!configuration || !ready || !profile}
|
||||
id={`${prefix}-printer`}
|
||||
label={t("printers.printer")}
|
||||
onValueChange={(id) => form.setValue("printerId", id)}
|
||||
options={printerOptions(
|
||||
inventory.data?.assets ?? [],
|
||||
profile?.values.assetId,
|
||||
values.printerId
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.printerId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-connection`}>{t("printers.connection")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-connection`}
|
||||
label={t("printers.connection")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = PrinterConfigurationInputSchema.shape.connection.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("connection", parsed.data);
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-profile`}>{t("mail.profile")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
profileFixed
|
||||
? undefined
|
||||
: { label: t("profiles.new"), onClick: () => setQuick("profile") }
|
||||
}
|
||||
}}
|
||||
options={["usb", "network"].map((value) => ({
|
||||
value,
|
||||
label: t(`printers.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.connection}
|
||||
/>
|
||||
disabled={profileFixed || !ready}
|
||||
id={`${prefix}-profile`}
|
||||
label={t("mail.profile")}
|
||||
onValueChange={(id) => {
|
||||
form.setValue("profileId", id);
|
||||
form.setValue("printerId", "");
|
||||
}}
|
||||
options={profileOptions(profiles.data?.profiles ?? [], values.profileId)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.profileId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-printer`}>{t("printers.printer")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
configuration
|
||||
? undefined
|
||||
: { label: t("printers.newAsset"), onClick: () => setQuick("printer") }
|
||||
}
|
||||
disabled={!!configuration || !ready || !profile}
|
||||
id={`${prefix}-printer`}
|
||||
label={t("printers.printer")}
|
||||
onValueChange={(id) => form.setValue("printerId", id)}
|
||||
options={printerOptions(
|
||||
inventory.data?.assets ?? [],
|
||||
profile?.values.assetId,
|
||||
values.printerId
|
||||
)}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.printerId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-connection`}>{t("printers.connection")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-connection`}
|
||||
label={t("printers.connection")}
|
||||
onValueChange={(value) => {
|
||||
const parsed =
|
||||
PrinterConfigurationInputSchema.shape.connection.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("connection", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={["usb", "network"].map((value) => ({
|
||||
value,
|
||||
label: t(`printers.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.connection}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={changeState}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.isDefault}
|
||||
disabled={!["pending", "configured"].includes(values.state)}
|
||||
id={`${prefix}-default`}
|
||||
label={t("printers.default")}
|
||||
onCheckedChange={(isDefault) => form.setValue("isDefault", isDefault)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
<SwitchField
|
||||
checked={values.isDefault}
|
||||
disabled={!["pending", "configured"].includes(values.state)}
|
||||
id={`${prefix}-default`}
|
||||
label={t("printers.default")}
|
||||
onCheckedChange={(isDefault) => form.setValue("isDefault", isDefault)}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{configuration && <p className="text-sm text-muted-foreground">{t("printers.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("printers.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<PrinterFeedback error={mutation.error ?? profiles.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("printers.description")}
|
||||
examples={t("printers.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("printers.guidance")}
|
||||
scopeNote={t("printers.scope")}
|
||||
title={t("printers.help")}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{configuration && <p className="text-sm text-muted-foreground">{t("printers.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("printers.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<PrinterFeedback error={mutation.error ?? profiles.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("printers.description")}
|
||||
examples={t("printers.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("printers.guidance")}
|
||||
scopeNote={t("printers.scope")}
|
||||
title={t("printers.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={!ready || mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -18,58 +18,65 @@ export function ProcessTemplateForm(props: ProcessTemplateFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const prefix = useId();
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-kind`}>{t("processes.kind")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-kind`}
|
||||
label={t("processes.kind")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = ProcessTemplateInputSchema.shape.kind.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("kind", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={["onboarding", "change", "offboarding"].map((value) => ({
|
||||
value,
|
||||
label: t(`processes.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={form.watch("kind")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-kind`}>{t("processes.kind")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-kind`}
|
||||
label={t("processes.kind")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = ProcessTemplateInputSchema.shape.kind.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("kind", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={["onboarding", "change", "offboarding"].map((value) => ({
|
||||
value,
|
||||
label: t(`processes.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={form.watch("kind")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-instructions`}>{t("processes.instructions")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-instructions`}
|
||||
maxLength={16100}
|
||||
required
|
||||
rows={8}
|
||||
{...form.register("lines")}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">{t("processes.instructionsHelp")}</p>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-instructions`}>{t("processes.instructions")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-instructions`}
|
||||
maxLength={16100}
|
||||
required
|
||||
rows={8}
|
||||
{...form.register("lines")}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">{t("processes.instructionsHelp")}</p>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
id={`${prefix}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea id={`${prefix}-notes`} maxLength={4000} rows={3} {...form.register("notes")} />
|
||||
</div>
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<ProcessHelp template />
|
||||
<ProcessHelp template />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -20,73 +20,75 @@ export function ProcessStartForm(props: ProcessStartFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("profiles.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("newPerson"), onClick: () => setQuick("person") }}
|
||||
id={`${prefix}-person`}
|
||||
label={t("profiles.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people.map((p) => ({ value: p.id, label: p.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("processes.template")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("processes.newTemplate"), onClick: () => setQuick("template") }}
|
||||
disabled={!query.data || query.isError}
|
||||
id={`${prefix}-template`}
|
||||
label={t("processes.template")}
|
||||
onValueChange={(id) => form.setValue("templateId", id)}
|
||||
options={(query.data?.templates ?? [])
|
||||
.filter((t) => t.values.active)
|
||||
.map((t) => ({ value: t.id, label: t.values.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.templateId}
|
||||
/>
|
||||
</div>
|
||||
{template && (
|
||||
<div className="rounded-md border p-3 text-sm">
|
||||
<p className="font-medium">{t(`processes.${template.values.kind}`)}</p>
|
||||
<ol className="list-decimal pl-5">
|
||||
{template.values.instructions.map((i) => (
|
||||
<li key={i}>{i}</li>
|
||||
))}
|
||||
</ol>
|
||||
{template.values.kind !== "onboarding" && (
|
||||
<p className="mt-2">
|
||||
{review.isPending
|
||||
? t("loading")
|
||||
: t("processes.reviewCount", { count: review.data?.review.length ?? 0 })}
|
||||
</p>
|
||||
)}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error ?? query.error ?? review.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<ProcessHelp />
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("profiles.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("newPerson"), onClick: () => setQuick("person") }}
|
||||
id={`${prefix}-person`}
|
||||
label={t("profiles.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people.map((p) => ({ value: p.id, label: p.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("processes.template")}</Label>
|
||||
<SelectWithAction
|
||||
action={{ label: t("processes.newTemplate"), onClick: () => setQuick("template") }}
|
||||
disabled={!query.data || query.isError}
|
||||
id={`${prefix}-template`}
|
||||
label={t("processes.template")}
|
||||
onValueChange={(id) => form.setValue("templateId", id)}
|
||||
options={(query.data?.templates ?? [])
|
||||
.filter((t) => t.values.active)
|
||||
.map((t) => ({ value: t.id, label: t.values.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.templateId}
|
||||
/>
|
||||
</div>
|
||||
{template && (
|
||||
<div className="rounded-md border p-3 text-sm">
|
||||
<p className="font-medium">{t(`processes.${template.values.kind}`)}</p>
|
||||
<ol className="list-decimal pl-5">
|
||||
{template.values.instructions.map((i) => (
|
||||
<li key={i}>{i}</li>
|
||||
))}
|
||||
</ol>
|
||||
{template.values.kind !== "onboarding" && (
|
||||
<p className="mt-2">
|
||||
{review.isPending
|
||||
? t("loading")
|
||||
: t("processes.reviewCount", { count: review.data?.review.length ?? 0 })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error ?? query.error ?? review.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<ProcessHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button
|
||||
disabled={
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -20,45 +20,52 @@ export function ProcessEditForm(props: ProcessEditFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const prefix = useId();
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = UpdateProcessInputSchema.shape.state.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={["open", "completed", "cancelled"].map((value) => ({
|
||||
value,
|
||||
label: t(`processes.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={form.watch("state")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea id={`${prefix}-notes`} maxLength={4000} rows={3} {...form.register("notes")} />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{t("processes.resolutionHelp")}</p>
|
||||
{process.values.tasks.map((task, index) => (
|
||||
<ProcessTaskField form={form} index={index} key={task.id} task={task} />
|
||||
))}
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<ProcessHelp />
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={160} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = UpdateProcessInputSchema.shape.state.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={["open", "completed", "cancelled"].map((value) => ({
|
||||
value,
|
||||
label: t(`processes.${value}`),
|
||||
}))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={form.watch("state")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{t("processes.resolutionHelp")}</p>
|
||||
{process.values.tasks.map((task, index) => (
|
||||
<ProcessTaskField form={form} index={index} key={task.id} task={task} />
|
||||
))}
|
||||
</fieldset>
|
||||
<ProcessFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<ProcessHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -40,101 +40,103 @@ export function RemoteConnectionForm(props: RemoteConnectionFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("remote.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
personFixed
|
||||
? undefined
|
||||
: { label: t("newPerson"), onClick: () => setQuick("person") }
|
||||
}
|
||||
disabled={personFixed}
|
||||
id={`${prefix}-person`}
|
||||
label={t("remote.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people.map((p) => ({ value: p.id, label: p.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={v.personId}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<RemoteEndpointFields
|
||||
assetOptions={assetOptions}
|
||||
company={company}
|
||||
fixed={fixed}
|
||||
form={form}
|
||||
prefix={prefix}
|
||||
ready={ready}
|
||||
resourceOptions={resourceOptions}
|
||||
setQuick={setQuick}
|
||||
/>
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-method`}>{t("remote.method")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-method`}
|
||||
list={`${prefix}-methods`}
|
||||
maxLength={80}
|
||||
placeholder={t("remote.methodExample")}
|
||||
required
|
||||
{...form.register("method")}
|
||||
/>
|
||||
<datalist id={`${prefix}-methods`}>
|
||||
{["VPN", "RDP", "AnyDesk", "TeamViewer", "Supremo"].map((method) => (
|
||||
<option key={method} value={method} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<Label htmlFor={`${prefix}-person`}>{t("remote.person")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = RemoteConnectionInputSchema.shape.state.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
action={
|
||||
personFixed
|
||||
? undefined
|
||||
: { label: t("newPerson"), onClick: () => setQuick("person") }
|
||||
}
|
||||
disabled={personFixed}
|
||||
id={`${prefix}-person`}
|
||||
label={t("remote.person")}
|
||||
onValueChange={(id) => form.setValue("personId", id)}
|
||||
options={company.people.map((p) => ({ value: p.id, label: p.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={v.state}
|
||||
required
|
||||
value={v.personId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={v.requiresVpn}
|
||||
id={`${prefix}-vpn`}
|
||||
label={t("remote.requiresVpn")}
|
||||
onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<RemoteEndpointFields
|
||||
assetOptions={assetOptions}
|
||||
company={company}
|
||||
fixed={fixed}
|
||||
form={form}
|
||||
prefix={prefix}
|
||||
ready={ready}
|
||||
resourceOptions={resourceOptions}
|
||||
setQuick={setQuick}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-method`}>{t("remote.method")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-method`}
|
||||
list={`${prefix}-methods`}
|
||||
maxLength={80}
|
||||
placeholder={t("remote.methodExample")}
|
||||
required
|
||||
{...form.register("method")}
|
||||
/>
|
||||
<datalist id={`${prefix}-methods`}>
|
||||
{["VPN", "RDP", "AnyDesk", "TeamViewer", "Supremo"].map((method) => (
|
||||
<option key={method} value={method} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-state`}>{t("mail.state")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-state`}
|
||||
label={t("mail.state")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = RemoteConnectionInputSchema.shape.state.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("state", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={states.map((value) => ({ value, label: t(`mail.${value}`) }))}
|
||||
placeholder={t("mail.choose")}
|
||||
value={v.state}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={v.requiresVpn}
|
||||
id={`${prefix}-vpn`}
|
||||
label={t("remote.requiresVpn")}
|
||||
onCheckedChange={(requiresVpn) => form.setValue("requiresVpn", requiresVpn)}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{fixed && <p className="text-sm text-muted-foreground">{t("remote.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("remote.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<RemoteFeedback error={mutation.error ?? assets.error ?? resources.error} />
|
||||
<ContextHelp
|
||||
description={t("remote.description")}
|
||||
examples={t("remote.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("remote.guidance")}
|
||||
scopeNote={t("remote.scope")}
|
||||
title={t("remote.help")}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("mail.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{fixed && <p className="text-sm text-muted-foreground">{t("remote.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("remote.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<RemoteFeedback error={mutation.error ?? assets.error ?? resources.error} />
|
||||
<ContextHelp
|
||||
description={t("remote.description")}
|
||||
examples={t("remote.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("remote.guidance")}
|
||||
scopeNote={t("remote.scope")}
|
||||
title={t("remote.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={!ready || mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import { Input } from "@repo/shadcn-ui/components/input";
|
||||
import { Label } from "@repo/shadcn-ui/components/label";
|
||||
@ -17,30 +17,32 @@ export function SiteForm(props: SiteFormProps) {
|
||||
const { t } = useTranslation("companies");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
{showTitle && <h3 className="text-lg font-semibold">{t(site ? "editSite" : "newSite")}</h3>}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
|
||||
<Textarea
|
||||
className="min-h-40"
|
||||
id={`${id}-address`}
|
||||
maxLength={10000}
|
||||
rows={6}
|
||||
{...form.register("address")}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<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>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
|
||||
<Textarea
|
||||
className="min-h-40"
|
||||
id={`${id}-address`}
|
||||
maxLength={10000}
|
||||
rows={6}
|
||||
{...form.register("address")}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
|
||||
</div>
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
success={mutation.isSuccess}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
|
||||
</div>
|
||||
<CompanyFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
success={mutation.isSuccess}
|
||||
/>
|
||||
|
||||
<EntityHelp kind="site" />
|
||||
<EntityHelp kind="site" />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -23,79 +23,83 @@ export function TeleworkAuthorizationForm(props: TeleworkAuthorizationFormProps)
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("telework.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }}
|
||||
disabled={fixed}
|
||||
id={`${prefix}-person`}
|
||||
label={t("telework.person")}
|
||||
onValueChange={(value) => form.setValue("personId", value)}
|
||||
options={company.people
|
||||
.filter(
|
||||
(person) =>
|
||||
person.id === values.personId || (person.active && !reserved.has(person.id))
|
||||
)
|
||||
.map((person) => ({ value: person.id, label: person.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-person`}>{t("telework.person")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed ? undefined : { label: t("newPerson"), onClick: () => setQuick(true) }
|
||||
}
|
||||
disabled={fixed}
|
||||
id={`${prefix}-person`}
|
||||
label={t("telework.person")}
|
||||
onValueChange={(value) => form.setValue("personId", value)}
|
||||
options={company.people
|
||||
.filter(
|
||||
(person) =>
|
||||
person.id === values.personId || (person.active && !reserved.has(person.id))
|
||||
)
|
||||
.map((person) => ({ value: person.id, label: person.name }))}
|
||||
placeholder={t("mail.choose")}
|
||||
required
|
||||
value={values.personId}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("telework.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
</div>
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("telework.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-start`}
|
||||
onInput={(event) => form.setValue("startsOn", event.currentTarget.value || null)}
|
||||
type="date"
|
||||
value={values.startsOn ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-end`}
|
||||
onInput={(event) => form.setValue("expiresOn", event.currentTarget.value || null)}
|
||||
type="date"
|
||||
value={values.expiresOn ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("telework.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{authorization && <p className="text-sm text-muted-foreground">{t("telework.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("telework.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<TeleworkFeedback error={mutation.error} />
|
||||
<ContextHelp
|
||||
description={t("telework.description")}
|
||||
examples={t("telework.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("telework.guidance")}
|
||||
scopeNote={t("telework.scope")}
|
||||
title={t("telework.help")}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-start`}>{t("telework.startsOn")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-start`}
|
||||
onInput={(event) => form.setValue("startsOn", event.currentTarget.value || null)}
|
||||
type="date"
|
||||
value={values.startsOn ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-end`}>{t("telework.expiresOn")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-end`}
|
||||
onInput={(event) => form.setValue("expiresOn", event.currentTarget.value || null)}
|
||||
type="date"
|
||||
value={values.expiresOn ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("telework.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{authorization && <p className="text-sm text-muted-foreground">{t("telework.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("telework.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<TeleworkFeedback error={mutation.error} />
|
||||
<ContextHelp
|
||||
description={t("telework.description")}
|
||||
examples={t("telework.examples")}
|
||||
examplesLabel={t("mail.examplesLabel")}
|
||||
guidance={t("telework.guidance")}
|
||||
scopeNote={t("telework.scope")}
|
||||
title={t("telework.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -38,108 +38,110 @@ export function TicketForm(props: TicketFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("tickets.company")}</Label>
|
||||
{scope || ticket ? (
|
||||
<p>{data.companies.find((item) => item.id === companyId)?.name ?? companyId}</p>
|
||||
) : (
|
||||
<>
|
||||
<CompanySelect
|
||||
action={{ label: t("newCompany"), onClick: () => setQuick("company") }}
|
||||
id={prefix}
|
||||
label={t("tickets.company")}
|
||||
onValueChange={changeCompany}
|
||||
options={data.companies.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("tickets.choose")}
|
||||
value={companyId}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("tickets.company")}</Label>
|
||||
{scope || ticket ? (
|
||||
<p>{data.companies.find((item) => item.id === companyId)?.name ?? companyId}</p>
|
||||
) : (
|
||||
<>
|
||||
<CompanySelect
|
||||
action={{ label: t("newCompany"), onClick: () => setQuick("company") }}
|
||||
id={prefix}
|
||||
label={t("tickets.company")}
|
||||
onValueChange={changeCompany}
|
||||
options={data.companies.map((item) => ({ value: item.id, label: item.name }))}
|
||||
placeholder={t("tickets.choose")}
|
||||
value={companyId}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("tickets.companyNotice")}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-subject`}>{t("tickets.subject")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-subject`}
|
||||
maxLength={200}
|
||||
required
|
||||
{...form.register("subject")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-description`}>{t("tickets.description")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-description`}
|
||||
maxLength={10000}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-requester`}>{t("tickets.requester")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newPerson"),
|
||||
onClick: () => setQuick("person"),
|
||||
disabled: !companyId,
|
||||
}}
|
||||
disabled={!lookups.data}
|
||||
id={`${prefix}-requester`}
|
||||
label={t("tickets.requester")}
|
||||
onValueChange={(id) => form.setValue("requesterId", id || null)}
|
||||
options={selectOptions(
|
||||
lookups.data?.people ?? [],
|
||||
ticket?.values.requesterId ?? null
|
||||
)}
|
||||
placeholder={t("tickets.unassigned")}
|
||||
value={values.requesterId ?? ""}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("tickets.companyNotice")}</p>
|
||||
</>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-assignee`}>{t("tickets.assignee")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-assignee`}
|
||||
label={t("tickets.assignee")}
|
||||
onValueChange={(id) => form.setValue("assigneeId", id || null)}
|
||||
options={selectOptions(data.technicians, ticket?.values.assigneeId ?? null)}
|
||||
placeholder={t("tickets.unassigned")}
|
||||
value={values.assigneeId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<TicketClassificationFields form={form} prefix={prefix} />
|
||||
</div>
|
||||
{companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
|
||||
{lookups.isError && (
|
||||
<div role="alert">
|
||||
<TicketFeedback error={lookups.error} />
|
||||
<Button
|
||||
onClick={() => {
|
||||
lookups.refetch().catch(() => undefined);
|
||||
}}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("retry")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-subject`}>{t("tickets.subject")}</Label>
|
||||
<Input
|
||||
id={`${prefix}-subject`}
|
||||
maxLength={200}
|
||||
required
|
||||
{...form.register("subject")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-description`}>{t("tickets.description")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-description`}
|
||||
maxLength={10000}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-requester`}>{t("tickets.requester")}</Label>
|
||||
<SelectWithAction
|
||||
action={{
|
||||
label: t("newPerson"),
|
||||
onClick: () => setQuick("person"),
|
||||
disabled: !companyId,
|
||||
}}
|
||||
disabled={!lookups.data}
|
||||
id={`${prefix}-requester`}
|
||||
label={t("tickets.requester")}
|
||||
onValueChange={(id) => form.setValue("requesterId", id || null)}
|
||||
options={selectOptions(
|
||||
lookups.data?.people ?? [],
|
||||
ticket?.values.requesterId ?? null
|
||||
)}
|
||||
placeholder={t("tickets.unassigned")}
|
||||
value={values.requesterId ?? ""}
|
||||
{lookups.data && (
|
||||
<TicketTargets
|
||||
companyId={companyId}
|
||||
csrfToken={csrfToken}
|
||||
lookups={lookups.data}
|
||||
onChange={setTargets}
|
||||
values={values.affected}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-assignee`}>{t("tickets.assignee")}</Label>
|
||||
<SelectWithAction
|
||||
id={`${prefix}-assignee`}
|
||||
label={t("tickets.assignee")}
|
||||
onValueChange={(id) => form.setValue("assigneeId", id || null)}
|
||||
options={selectOptions(data.technicians, ticket?.values.assigneeId ?? null)}
|
||||
placeholder={t("tickets.unassigned")}
|
||||
value={values.assigneeId ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<TicketClassificationFields form={form} prefix={prefix} />
|
||||
</div>
|
||||
{companyId && lookups.isPending && <p role="status">{t("loading")}</p>}
|
||||
{lookups.isError && (
|
||||
<div role="alert">
|
||||
<TicketFeedback error={lookups.error} />
|
||||
<Button
|
||||
onClick={() => {
|
||||
lookups.refetch().catch(() => undefined);
|
||||
}}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("retry")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{lookups.data && (
|
||||
<TicketTargets
|
||||
companyId={companyId}
|
||||
csrfToken={csrfToken}
|
||||
lookups={lookups.data}
|
||||
onChange={setTargets}
|
||||
values={values.affected}
|
||||
/>
|
||||
)}
|
||||
</fieldset>
|
||||
<TicketFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<TicketHelp />
|
||||
)}
|
||||
</fieldset>
|
||||
<TicketFeedback
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<TicketHelp />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending || !companyId || !lookups.data} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -35,90 +35,92 @@ export function WorkProfileForm(props: WorkProfileFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-4" disabled={disabled}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("profiles.name")}</Label>
|
||||
<Input id={prefix} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{selectors.map((selector) => {
|
||||
const fixed = !!profile && selector.field !== "accountId";
|
||||
return (
|
||||
<div className="space-y-2" key={selector.field}>
|
||||
<Label htmlFor={`${prefix}-${selector.field}`}>
|
||||
{t(`profiles.${selector.label}`)}
|
||||
</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed || !allowQuickCreate
|
||||
? undefined
|
||||
: {
|
||||
label: t(`mail.${selector.create}`),
|
||||
onClick: () => setQuick(selector.kind),
|
||||
}
|
||||
}
|
||||
disabled={disabled || fixed || !inventory.data || !access.data}
|
||||
id={`${prefix}-${selector.field}`}
|
||||
label={t(`profiles.${selector.label}`)}
|
||||
onValueChange={(id) =>
|
||||
form.setValue(
|
||||
selector.field,
|
||||
selector.field === "accountId" ? id || null : id
|
||||
)
|
||||
}
|
||||
options={selector.options}
|
||||
placeholder={t(
|
||||
selector.field === "accountId" ? "profiles.noAccount" : "profiles.choose"
|
||||
)}
|
||||
required={selector.field !== "accountId"}
|
||||
value={values[selector.field] ?? ""}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{t("profiles.accountHint")}</p>
|
||||
{values.personId && values.accountId && !authorized && allowQuickCreate && (
|
||||
<div className="space-y-2 rounded-md border p-3 text-sm">
|
||||
<p>{t("mail.noAuthorization")}</p>
|
||||
<Button onClick={() => setQuick("authorization")} type="button" variant="outline">
|
||||
{t("mail.authorize")}
|
||||
</Button>
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-4" disabled={disabled}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={prefix}>{t("profiles.name")}</Label>
|
||||
<Input id={prefix} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
)}
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("profiles.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{selectors.map((selector) => {
|
||||
const fixed = !!profile && selector.field !== "accountId";
|
||||
return (
|
||||
<div className="space-y-2" key={selector.field}>
|
||||
<Label htmlFor={`${prefix}-${selector.field}`}>
|
||||
{t(`profiles.${selector.label}`)}
|
||||
</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
fixed || !allowQuickCreate
|
||||
? undefined
|
||||
: {
|
||||
label: t(`mail.${selector.create}`),
|
||||
onClick: () => setQuick(selector.kind),
|
||||
}
|
||||
}
|
||||
disabled={disabled || fixed || !inventory.data || !access.data}
|
||||
id={`${prefix}-${selector.field}`}
|
||||
label={t(`profiles.${selector.label}`)}
|
||||
onValueChange={(id) =>
|
||||
form.setValue(
|
||||
selector.field,
|
||||
selector.field === "accountId" ? id || null : id
|
||||
)
|
||||
}
|
||||
options={selector.options}
|
||||
placeholder={t(
|
||||
selector.field === "accountId" ? "profiles.noAccount" : "profiles.choose"
|
||||
)}
|
||||
required={selector.field !== "accountId"}
|
||||
value={values[selector.field] ?? ""}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{t("profiles.accountHint")}</p>
|
||||
{values.personId && values.accountId && !authorized && allowQuickCreate && (
|
||||
<div className="space-y-2 rounded-md border p-3 text-sm">
|
||||
<p>{t("mail.noAuthorization")}</p>
|
||||
<Button onClick={() => setQuick("authorization")} type="button" variant="outline">
|
||||
{t("mail.authorize")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<SwitchField
|
||||
checked={values.active}
|
||||
id={`${prefix}-active`}
|
||||
label={t("profiles.active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active)}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{profile && <p className="text-sm text-muted-foreground">{t("profiles.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t("profiles.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<ProfileFeedback error={mutation.error ?? access.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("profiles.description")}
|
||||
examples={t("profiles.examples")}
|
||||
examplesLabel={t("profiles.examplesLabel")}
|
||||
guidance={t("profiles.guidance")}
|
||||
scopeNote={t("profiles.scope")}
|
||||
title={t("profiles.help")}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("profiles.notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={4000}
|
||||
onChange={(event) => form.setValue("notes", event.target.value || null)}
|
||||
rows={3}
|
||||
value={values.notes ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{profile && <p className="text-sm text-muted-foreground">{t("profiles.fixed")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-destructive" role="alert">
|
||||
{t("profiles.errors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<ProfileFeedback error={mutation.error ?? access.error ?? inventory.error} />
|
||||
<ContextHelp
|
||||
description={t("profiles.description")}
|
||||
examples={t("profiles.examples")}
|
||||
examplesLabel={t("profiles.examplesLabel")}
|
||||
guidance={t("profiles.guidance")}
|
||||
scopeNote={t("profiles.scope")}
|
||||
title={t("profiles.help")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={disabled || !inventory.data || !access.data} type="submit">
|
||||
{t(disabled ? "saving" : "save")}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
import { Input } from "@repo/shadcn-ui/components/input";
|
||||
import { Label } from "@repo/shadcn-ui/components/label";
|
||||
@ -15,47 +15,49 @@ export function PasswordForm(props: PasswordFormProps) {
|
||||
const { t } = useTranslation("identity");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
{showTitle && (
|
||||
<h3 className="font-semibold">
|
||||
{t(target ? "resetPassword" : "changePassword")}
|
||||
{target ? ` · ${target.name}` : ""}
|
||||
</h3>
|
||||
)}
|
||||
{!showTitle && target && <p className="text-muted-foreground">{target.name}</p>}
|
||||
{!target && (
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
{showTitle && (
|
||||
<h3 className="font-semibold">
|
||||
{t(target ? "resetPassword" : "changePassword")}
|
||||
{target ? ` · ${target.name}` : ""}
|
||||
</h3>
|
||||
)}
|
||||
{!showTitle && target && <p className="text-muted-foreground">{target.name}</p>}
|
||||
{!target && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-current`}>{t("currentPassword")}</Label>
|
||||
<Input
|
||||
autoComplete="current-password"
|
||||
id={`${id}-current`}
|
||||
maxLength={128}
|
||||
required
|
||||
type="password"
|
||||
{...form.register("currentPassword")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-current`}>{t("currentPassword")}</Label>
|
||||
<Label htmlFor={`${id}-new`}>{t("newPassword")}</Label>
|
||||
<Input
|
||||
autoComplete="current-password"
|
||||
id={`${id}-current`}
|
||||
autoComplete="new-password"
|
||||
id={`${id}-new`}
|
||||
maxLength={128}
|
||||
minLength={8}
|
||||
required
|
||||
type="password"
|
||||
{...form.register("currentPassword")}
|
||||
{...form.register("password")}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-new`}>{t("newPassword")}</Label>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id={`${id}-new`}
|
||||
maxLength={128}
|
||||
minLength={8}
|
||||
required
|
||||
type="password"
|
||||
{...form.register("password")}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
|
||||
</div>
|
||||
{target && <p className="text-sm text-muted-foreground">{t("resetHelp")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("invalidForm")}
|
||||
</p>
|
||||
)}
|
||||
<FormFeedback error={mutation.error} success={mutation.isSuccess} />
|
||||
{target && <p className="text-sm text-muted-foreground">{t("resetHelp")}</p>}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("invalidForm")}
|
||||
</p>
|
||||
)}
|
||||
<FormFeedback error={mutation.error} success={mutation.isSuccess} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -24,6 +24,7 @@ export function UserEditorDialog(
|
||||
}
|
||||
}}
|
||||
open={props.open}
|
||||
size="medium"
|
||||
title={t(
|
||||
props.mode === "create"
|
||||
? "createUser"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -16,62 +16,64 @@ export function UserForm(props: UserFormProps) {
|
||||
const { t } = useTranslation("identity");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
{showTitle && <h3 className="font-semibold">{t(user ? "editUser" : "createUser")}</h3>}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input
|
||||
autoComplete="name"
|
||||
id={`${id}-name`}
|
||||
maxLength={100}
|
||||
required
|
||||
{...form.register("name")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-email`}>{t("email")}</Label>
|
||||
<Input
|
||||
autoComplete="off"
|
||||
id={`${id}-email`}
|
||||
maxLength={254}
|
||||
required
|
||||
type="email"
|
||||
{...form.register("email")}
|
||||
/>
|
||||
</div>
|
||||
{!user && (
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
{showTitle && <h3 className="font-semibold">{t(user ? "editUser" : "createUser")}</h3>}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-password`}>{t("password")}</Label>
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id={`${id}-password`}
|
||||
maxLength={128}
|
||||
minLength={8}
|
||||
autoComplete="name"
|
||||
id={`${id}-name`}
|
||||
maxLength={100}
|
||||
required
|
||||
type="password"
|
||||
{...form.register("password")}
|
||||
{...form.register("name")}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
|
||||
</div>
|
||||
)}
|
||||
{user && (
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={user.isInitialAdmin}
|
||||
id={`${id}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
)}
|
||||
{user?.isInitialAdmin && (
|
||||
<p className="text-xs text-muted-foreground">{t("adminProtected")}</p>
|
||||
)}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("invalidForm")}
|
||||
</p>
|
||||
)}
|
||||
<FormFeedback error={mutation.error} success={mutation.isSuccess} />
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-email`}>{t("email")}</Label>
|
||||
<Input
|
||||
autoComplete="off"
|
||||
id={`${id}-email`}
|
||||
maxLength={254}
|
||||
required
|
||||
type="email"
|
||||
{...form.register("email")}
|
||||
/>
|
||||
</div>
|
||||
{!user && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-password`}>{t("password")}</Label>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id={`${id}-password`}
|
||||
maxLength={128}
|
||||
minLength={8}
|
||||
required
|
||||
type="password"
|
||||
{...form.register("password")}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("passwordHelp")}</p>
|
||||
</div>
|
||||
)}
|
||||
{user && (
|
||||
<SwitchField
|
||||
checked={form.watch("active")}
|
||||
disabled={user.isInitialAdmin}
|
||||
id={`${id}-active`}
|
||||
label={t("active")}
|
||||
onCheckedChange={(active) => form.setValue("active", active, { shouldDirty: true })}
|
||||
/>
|
||||
)}
|
||||
{user?.isInitialAdmin && (
|
||||
<p className="text-xs text-muted-foreground">{t("adminProtected")}</p>
|
||||
)}
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("invalidForm")}
|
||||
</p>
|
||||
)}
|
||||
<FormFeedback error={mutation.error} success={mutation.isSuccess} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -152,5 +152,9 @@
|
||||
"assign": "Section",
|
||||
"help": "Organize fields without changing their values or requirements. Removing a section moves its fields to Unsectioned.",
|
||||
"empty": "This section has no fields yet."
|
||||
},
|
||||
"formLayout": {
|
||||
"identity": "Resource identification",
|
||||
"template": "Template details"
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,5 +152,9 @@
|
||||
"assign": "Sección",
|
||||
"help": "Organiza los campos sin cambiar sus valores ni su obligatoriedad. Al eliminar una sección, sus campos pasan a «Sin sección».",
|
||||
"empty": "Esta sección aún no tiene campos."
|
||||
},
|
||||
"formLayout": {
|
||||
"identity": "Identificación del recurso",
|
||||
"template": "Datos de la plantilla"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
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";
|
||||
@ -19,54 +19,56 @@ export function CatalogFieldForm(props: CatalogFieldFormProps) {
|
||||
const { t } = useTranslation("resources");
|
||||
const id = useId();
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("type")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = FieldTypeSchema.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("type", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseType")}
|
||||
required
|
||||
value={type}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
|
||||
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
|
||||
</div>
|
||||
{type === "choice" && (
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
|
||||
<Textarea id={`${id}-choices`} required rows={5} {...form.register("choicesText")} />
|
||||
<p className="text-xs text-muted-foreground">{t("choicesHelp")}</p>
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-type`}>{t("type")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-type`}
|
||||
label={t("type")}
|
||||
onValueChange={(value) => {
|
||||
const parsed = FieldTypeSchema.safeParse(value);
|
||||
if (parsed.success) {
|
||||
form.setValue("type", parsed.data);
|
||||
}
|
||||
}}
|
||||
options={FieldTypeSchema.options.map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseType")}
|
||||
required
|
||||
value={type}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-unit`}>{t("unit")}</Label>
|
||||
<Input id={`${id}-unit`} maxLength={30} {...form.register("unit")} />
|
||||
</div>
|
||||
{type === "choice" && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-choices`}>{t("choices")}</Label>
|
||||
<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("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
</div>
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="field" scope={scope} />
|
||||
<CatalogHelp kind="field" scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { UniqueID } from "@repo/rdx-ddd";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormSection } from "@repo/rdx-ui/components/form-section";
|
||||
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
|
||||
import { TemplateSectionsEditor } from "@repo/rdx-ui/components/template-sections-editor";
|
||||
import { Button } from "@repo/shadcn-ui/components/button";
|
||||
@ -23,108 +24,112 @@ export function CatalogTemplateForm(props: CatalogTemplateFormProps) {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4" onSubmit={submit}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<FormSection title={t("formLayout.template")}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={2}
|
||||
{...form.register("description")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-usage`}>{t("templateUsage")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-usage`}
|
||||
label={t("templateUsage")}
|
||||
onValueChange={(value) => {
|
||||
if (value === "application" || value === "certificate") {
|
||||
form.setValue("usage", value);
|
||||
} else {
|
||||
form.setValue("usage", undefined);
|
||||
}
|
||||
}}
|
||||
options={["general", "application", "certificate"].map((value) => ({
|
||||
value,
|
||||
label: t(`usage.${value}`),
|
||||
}))}
|
||||
placeholder={t("choose")}
|
||||
value={form.watch("usage") ?? "general"}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("templateUsageHelp")}</p>
|
||||
</div>
|
||||
</FormSection>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-name`}>{t("name")}</Label>
|
||||
<Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-description`}>{t("description")}</Label>
|
||||
<Textarea
|
||||
id={`${id}-description`}
|
||||
maxLength={1000}
|
||||
rows={2}
|
||||
{...form.register("description")}
|
||||
<Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
allowQuickCreate
|
||||
? { label: t("addField"), onClick: () => setCreatingField(true) }
|
||||
: undefined
|
||||
}
|
||||
disabled={mutation.isPending}
|
||||
id={`${id}-field`}
|
||||
label={t("selectField")}
|
||||
onValueChange={add}
|
||||
options={fields
|
||||
.filter(
|
||||
(entry) =>
|
||||
entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
|
||||
)
|
||||
.map((entry) => ({ value: entry.id, label: entry.values.name }))}
|
||||
placeholder={t("choose")}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-usage`}>{t("templateUsage")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={!!item || mutation.isPending}
|
||||
id={`${id}-usage`}
|
||||
label={t("templateUsage")}
|
||||
onValueChange={(value) => {
|
||||
if (value === "application" || value === "certificate") {
|
||||
form.setValue("usage", value);
|
||||
} else {
|
||||
form.setValue("usage", undefined);
|
||||
}
|
||||
}}
|
||||
options={["general", "application", "certificate"].map((value) => ({
|
||||
value,
|
||||
label: t(`usage.${value}`),
|
||||
}))}
|
||||
placeholder={t("choose")}
|
||||
value={form.watch("usage") ?? "general"}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t("templateUsageHelp")}</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${id}-field`}>{t("selectField")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
allowQuickCreate
|
||||
? { label: t("addField"), onClick: () => setCreatingField(true) }
|
||||
: undefined
|
||||
}
|
||||
{!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
|
||||
<TemplateSectionsEditor
|
||||
createId={() => UniqueID.generateNewID().toPrimitive()}
|
||||
disabled={mutation.isPending}
|
||||
id={`${id}-field`}
|
||||
label={t("selectField")}
|
||||
onValueChange={add}
|
||||
options={fields
|
||||
.filter(
|
||||
(entry) =>
|
||||
entry.effectiveActive && !selected.some((field) => field.fieldId === entry.id)
|
||||
)
|
||||
.map((entry) => ({ value: entry.id, label: entry.values.name }))}
|
||||
placeholder={t("choose")}
|
||||
value=""
|
||||
fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
|
||||
fieldNotes={Object.fromEntries(
|
||||
fields
|
||||
.filter((field) => !field.effectiveActive)
|
||||
.map((field) => [field.id, t("disabledField")])
|
||||
)}
|
||||
fields={selected}
|
||||
labels={{
|
||||
title: t("sections.title"),
|
||||
add: t("sections.add"),
|
||||
name: t("sections.name"),
|
||||
description: t("sections.description"),
|
||||
ungrouped: t("sections.ungrouped"),
|
||||
moveUp: t("sections.moveUp"),
|
||||
moveDown: t("sections.moveDown"),
|
||||
remove: t("sections.remove"),
|
||||
removeField: t("sections.removeField"),
|
||||
required: t("sections.required"),
|
||||
assign: t("sections.assign"),
|
||||
help: t("sections.help"),
|
||||
empty: t("sections.empty"),
|
||||
}}
|
||||
onChange={({ sections, fields: next }) => {
|
||||
form.setValue("sections", sections, { shouldDirty: true });
|
||||
form.setValue("fields", next, { shouldDirty: true });
|
||||
}}
|
||||
sections={form.watch("sections") ?? []}
|
||||
/>
|
||||
</div>
|
||||
{!selected.length && <p className="text-sm text-muted-foreground">{t("noFields")}</p>}
|
||||
<TemplateSectionsEditor
|
||||
createId={() => UniqueID.generateNewID().toPrimitive()}
|
||||
disabled={mutation.isPending}
|
||||
fieldNames={Object.fromEntries(fields.map((field) => [field.id, field.values.name]))}
|
||||
fieldNotes={Object.fromEntries(
|
||||
fields
|
||||
.filter((field) => !field.effectiveActive)
|
||||
.map((field) => [field.id, t("disabledField")])
|
||||
{form.formState.errors.sections && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("errors.INVALID_SECTIONS")}
|
||||
</p>
|
||||
)}
|
||||
fields={selected}
|
||||
labels={{
|
||||
title: t("sections.title"),
|
||||
add: t("sections.add"),
|
||||
name: t("sections.name"),
|
||||
description: t("sections.description"),
|
||||
ungrouped: t("sections.ungrouped"),
|
||||
moveUp: t("sections.moveUp"),
|
||||
moveDown: t("sections.moveDown"),
|
||||
remove: t("sections.remove"),
|
||||
removeField: t("sections.removeField"),
|
||||
required: t("sections.required"),
|
||||
assign: t("sections.assign"),
|
||||
help: t("sections.help"),
|
||||
empty: t("sections.empty"),
|
||||
}}
|
||||
onChange={({ sections, fields: next }) => {
|
||||
form.setValue("sections", sections, { shouldDirty: true });
|
||||
form.setValue("fields", next, { shouldDirty: true });
|
||||
}}
|
||||
sections={form.watch("sections") ?? []}
|
||||
/>
|
||||
{form.formState.errors.sections && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("errors.INVALID_SECTIONS")}
|
||||
</p>
|
||||
)}
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="template" scope={scope} />
|
||||
<CatalogError
|
||||
error={mutation.error}
|
||||
invalid={Object.keys(form.formState.errors).length > 0}
|
||||
/>
|
||||
<CatalogHelp kind="template" scope={scope} />
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
|
||||
import { FieldSections } from "@repo/rdx-ui/components/field-sections";
|
||||
import { FormActions } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormActions, FormBody } from "@repo/rdx-ui/components/form-dialog";
|
||||
import { FormSection } from "@repo/rdx-ui/components/form-section";
|
||||
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";
|
||||
@ -42,111 +43,115 @@ export function ResourceForm(props: ResourceFormProps) {
|
||||
const prefix = useId();
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-5" onSubmit={submit}>
|
||||
<fieldset className="space-y-5" disabled={mutation.isPending}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
resource || !allowQuickCreate
|
||||
? undefined
|
||||
: { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
|
||||
}
|
||||
disabled={!!resource || mutation.isPending}
|
||||
id={`${prefix}-template`}
|
||||
label={t("template")}
|
||||
onValueChange={selectTemplate}
|
||||
options={
|
||||
resource
|
||||
? [
|
||||
{
|
||||
value: resource.values.templateId,
|
||||
label: resource.specification.templateName,
|
||||
},
|
||||
]
|
||||
: templates.map((item) => ({ value: item.id, label: item.values.name }))
|
||||
}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.templateId}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-status`}
|
||||
label={t("status")}
|
||||
onValueChange={changeStatus}
|
||||
options={["active", "inactive"].map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.active ? "active" : "inactive"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceIntegrationFields
|
||||
fixed={!!resource}
|
||||
integration={values.integration}
|
||||
items={items}
|
||||
onChange={(integration) =>
|
||||
form.setValue("integration", integration, { shouldDirty: true })
|
||||
}
|
||||
references={referenceQuery.data?.references ?? []}
|
||||
templateKey={template?.builtinKey}
|
||||
/>
|
||||
{fields.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<h3 className="font-medium">{t("characteristics")}</h3>
|
||||
<FieldSections
|
||||
hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
|
||||
items={fields}
|
||||
renderItem={(field) => (
|
||||
<ResourceCharacteristicControl
|
||||
disabled={mutation.isPending}
|
||||
field={requireMailboxAddress(field, items, values, template)}
|
||||
key={field.fieldId}
|
||||
onChange={(value) => setCharacteristic(field.fieldId, value)}
|
||||
prefix={prefix}
|
||||
value={values.characteristics[field.fieldId]}
|
||||
<form className="flex min-h-0 flex-1 flex-col overflow-hidden" onSubmit={submit}>
|
||||
<FormBody>
|
||||
<fieldset className="space-y-5" disabled={mutation.isPending}>
|
||||
<FormSection title={t("formLayout.identity")}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-name`}>{t("name")}</Label>
|
||||
<Input id={`${prefix}-name`} maxLength={100} required {...form.register("name")} />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-template`}>{t("template")}</Label>
|
||||
<SelectWithAction
|
||||
action={
|
||||
resource || !allowQuickCreate
|
||||
? undefined
|
||||
: { label: t("newTemplate"), onClick: () => setCreatingTemplate(true) }
|
||||
}
|
||||
disabled={!!resource || mutation.isPending}
|
||||
id={`${prefix}-template`}
|
||||
label={t("template")}
|
||||
onValueChange={selectTemplate}
|
||||
options={
|
||||
resource
|
||||
? [
|
||||
{
|
||||
value: resource.values.templateId,
|
||||
label: resource.specification.templateName,
|
||||
},
|
||||
]
|
||||
: templates.map((item) => ({ value: item.id, label: item.values.name }))
|
||||
}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.templateId}
|
||||
/>
|
||||
)}
|
||||
sections={sections}
|
||||
ungroupedLabel={t("sections.ungrouped")}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={
|
||||
values.integration || template?.builtinKey === "template:mailbox" ? 4000 : 10000
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-status`}>{t("status")}</Label>
|
||||
<SelectWithAction
|
||||
disabled={mutation.isPending}
|
||||
id={`${prefix}-status`}
|
||||
label={t("status")}
|
||||
onValueChange={changeStatus}
|
||||
options={["active", "inactive"].map((value) => ({ value, label: t(value) }))}
|
||||
placeholder={t("chooseValue")}
|
||||
required
|
||||
value={values.active ? "active" : "inactive"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
<ResourceIntegrationFields
|
||||
fixed={!!resource}
|
||||
integration={values.integration}
|
||||
items={items}
|
||||
onChange={(integration) =>
|
||||
form.setValue("integration", integration, { shouldDirty: true })
|
||||
}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
references={referenceQuery.data?.references ?? []}
|
||||
templateKey={template?.builtinKey}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<InventoryFeedback error={mutation.error ?? referenceQuery.error} />
|
||||
<ContextHelp
|
||||
description={t(`${helpPrefix}Description`)}
|
||||
examples={t(`${helpPrefix}Examples`)}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t(`${helpPrefix}Guidance`)}
|
||||
scopeNote={t(`${helpPrefix}Scope`)}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
{fields.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<h3 className="font-medium">{t("characteristics")}</h3>
|
||||
<FieldSections
|
||||
hasErrors={!!mutation.error || Object.keys(form.formState.errors).length > 0}
|
||||
items={fields}
|
||||
renderItem={(field) => (
|
||||
<ResourceCharacteristicControl
|
||||
disabled={mutation.isPending}
|
||||
field={requireMailboxAddress(field, items, values, template)}
|
||||
key={field.fieldId}
|
||||
onChange={(value) => setCharacteristic(field.fieldId, value)}
|
||||
prefix={prefix}
|
||||
value={values.characteristics[field.fieldId]}
|
||||
/>
|
||||
)}
|
||||
sections={sections}
|
||||
ungroupedLabel={t("sections.ungrouped")}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-notes`}>{t("notes")}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-notes`}
|
||||
maxLength={
|
||||
values.integration || template?.builtinKey === "template:mailbox" ? 4000 : 10000
|
||||
}
|
||||
rows={3}
|
||||
{...form.register("notes")}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{Object.keys(form.formState.errors).length > 0 && (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{t("inventoryErrors.INVALID_REQUEST")}
|
||||
</p>
|
||||
)}
|
||||
<InventoryFeedback error={mutation.error ?? referenceQuery.error} />
|
||||
<ContextHelp
|
||||
description={t(`${helpPrefix}Description`)}
|
||||
examples={t(`${helpPrefix}Examples`)}
|
||||
examplesLabel={t("examplesLabel")}
|
||||
guidance={t(`${helpPrefix}Guidance`)}
|
||||
scopeNote={t(`${helpPrefix}Scope`)}
|
||||
title={t("helpTitle")}
|
||||
/>
|
||||
</FormBody>
|
||||
<FormActions>
|
||||
<Button disabled={mutation.isPending} type="submit">
|
||||
{t(mutation.isPending ? "saving" : "save")}
|
||||
|
||||
@ -29,9 +29,13 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
|
||||
}, [hasErrors]);
|
||||
const content = (fields: readonly T[]) =>
|
||||
values ? (
|
||||
<dl className="grid gap-4 sm:grid-cols-2">{fields.map(renderItem)}</dl>
|
||||
<dl className="grid gap-4 sm:grid-cols-2 @min-[900px]:grid-cols-3">
|
||||
{fields.map(renderItem)}
|
||||
</dl>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">{fields.map(renderItem)}</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2 @min-[900px]:grid-cols-3">
|
||||
{fields.map(renderItem)}
|
||||
</div>
|
||||
);
|
||||
if (!sections.length) {
|
||||
return content(items);
|
||||
@ -40,7 +44,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
|
||||
const ungrouped = items.filter((item) => !(item.sectionId && known.has(item.sectionId)));
|
||||
return (
|
||||
<div
|
||||
className="space-y-3"
|
||||
className="grid items-start gap-4 @min-[900px]:grid-cols-2"
|
||||
onInvalidCapture={(event) => {
|
||||
// Abrir antes de que el navegador intente enfocar un control inválido oculto.
|
||||
if (event.target instanceof HTMLElement) {
|
||||
@ -58,7 +62,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<details className="rounded-md border" key={section.id} open>
|
||||
<details className="@container rounded-md border" key={section.id} open>
|
||||
<summary className="cursor-pointer rounded-md px-4 py-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">
|
||||
{section.name}
|
||||
</summary>
|
||||
@ -72,7 +76,7 @@ export function FieldSections<T extends { sectionId?: string | undefined }>({
|
||||
);
|
||||
})}
|
||||
{ungrouped.length > 0 && (
|
||||
<section className="space-y-3">
|
||||
<section className="col-span-full space-y-3">
|
||||
<h4 className="text-sm font-medium">{ungroupedLabel}</h4>
|
||||
{content(ungrouped)}
|
||||
</section>
|
||||
|
||||
@ -18,6 +18,7 @@ export function FormDialog({
|
||||
cancelLabel,
|
||||
children,
|
||||
wide = false,
|
||||
size,
|
||||
formActions = false,
|
||||
}: {
|
||||
open: boolean;
|
||||
@ -26,28 +27,39 @@ export function FormDialog({
|
||||
cancelLabel: string;
|
||||
children: ReactNode;
|
||||
wide?: boolean;
|
||||
size?: "small" | "medium" | "large";
|
||||
formActions?: boolean;
|
||||
}) {
|
||||
const width = size ?? (wide ? "large" : "small");
|
||||
const widths = {
|
||||
small: "sm:max-w-xl",
|
||||
medium: "sm:max-w-3xl",
|
||||
large: "sm:w-[90vw] sm:max-w-[1200px]",
|
||||
};
|
||||
return (
|
||||
<Dialog onOpenChange={onOpenChange} open={open}>
|
||||
<DialogContent
|
||||
className={`max-h-[calc(100dvh-2rem)] overflow-y-auto ${wide ? "sm:max-w-3xl" : "sm:max-w-xl"}`}
|
||||
className={`flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 ${widths[width]}`}
|
||||
showCloseButton={true}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogHeader className="shrink-0 border-b px-6 py-5 pr-14">
|
||||
<DialogTitle className="text-lg font-bold">{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
|
||||
{children}
|
||||
</FormCancelContext.Provider>
|
||||
<div
|
||||
className="@container flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-5 pb-5 [&:has([data-slot=form-body])]:overflow-hidden [&:has([data-slot=form-body])]:pb-0"
|
||||
data-slot="form-dialog-content"
|
||||
>
|
||||
<FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
|
||||
{children}
|
||||
</FormCancelContext.Provider>
|
||||
</div>
|
||||
{!formActions && (
|
||||
<DialogFooter>
|
||||
<DialogFooter className="shrink-0 border-t px-6 py-4">
|
||||
<DialogClose render={<Button type="button" variant="outline" />}>
|
||||
{cancelLabel}
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
)}
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
@ -56,7 +68,7 @@ export function FormDialog({
|
||||
export function FormActions({ children }: { children: ReactNode }) {
|
||||
const cancelLabel = useContext(FormCancelContext);
|
||||
return (
|
||||
<DialogFooter className="border-t pt-4">
|
||||
<DialogFooter className="shrink-0 border-t bg-popover py-4">
|
||||
{cancelLabel && (
|
||||
<DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
|
||||
)}
|
||||
@ -64,3 +76,12 @@ export function FormActions({ children }: { children: ReactNode }) {
|
||||
</DialogFooter>
|
||||
);
|
||||
}
|
||||
|
||||
/** El cuerpo se desplaza dentro del formulario; las acciones conservan su submit nativo. */
|
||||
export function FormBody({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-0 flex-1 space-y-5 overflow-y-auto pb-5 pr-1" data-slot="form-body">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
15
packages/rdx-ui/src/components/form-section.tsx
Normal file
15
packages/rdx-ui/src/components/form-section.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { useId } from "react";
|
||||
|
||||
/** Bloque visual reutilizable con título accesible; no altera validación ni datos. */
|
||||
export function FormSection({ title, children }: { title: string; children: ReactNode }) {
|
||||
const id = useId();
|
||||
return (
|
||||
<section aria-labelledby={id} className="space-y-4 rounded-lg border p-4">
|
||||
<h3 className="text-sm font-semibold" id={id}>
|
||||
{title}
|
||||
</h3>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -87,76 +87,82 @@ export function TemplateSectionsEditor({
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{labels.help}</p>
|
||||
{sections.map((section, index) => (
|
||||
<fieldset className="space-y-3 rounded-md border p-3" disabled={disabled} key={section.id}>
|
||||
<legend className="sr-only">{section.name || labels.name}</legend>
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<Label htmlFor={`${prefix}-${section.id}-name`}>{labels.name}</Label>
|
||||
<Input
|
||||
id={`${prefix}-${section.id}-name`}
|
||||
maxLength={100}
|
||||
<div className="grid items-start gap-4 @min-[900px]:grid-cols-2">
|
||||
{sections.map((section, index) => (
|
||||
<fieldset
|
||||
className="space-y-3 rounded-md border p-3"
|
||||
disabled={disabled}
|
||||
key={section.id}
|
||||
>
|
||||
<legend className="sr-only">{section.name || labels.name}</legend>
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<Label htmlFor={`${prefix}-${section.id}-name`}>{labels.name}</Label>
|
||||
<Input
|
||||
id={`${prefix}-${section.id}-name`}
|
||||
maxLength={100}
|
||||
onChange={(event) =>
|
||||
saveSections(
|
||||
sections.map((item) =>
|
||||
item.id === section.id ? { ...item, name: event.target.value } : item
|
||||
)
|
||||
)
|
||||
}
|
||||
required
|
||||
value={section.name}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
aria-label={`${labels.moveUp}: ${section.name}`}
|
||||
disabled={disabled || index === 0}
|
||||
onClick={() => moveSection(index, -1)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={`${labels.moveDown}: ${section.name}`}
|
||||
disabled={disabled || index === sections.length - 1}
|
||||
onClick={() => moveSection(index, 1)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<ArrowDownIcon />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={`${labels.remove}: ${section.name}`}
|
||||
disabled={disabled}
|
||||
onClick={() => removeSection(section.id)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-${section.id}-description`}>{labels.description}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-${section.id}-description`}
|
||||
maxLength={1000}
|
||||
onChange={(event) =>
|
||||
saveSections(
|
||||
sections.map((item) =>
|
||||
item.id === section.id ? { ...item, name: event.target.value } : item
|
||||
item.id === section.id ? { ...item, description: event.target.value } : item
|
||||
)
|
||||
)
|
||||
}
|
||||
required
|
||||
value={section.name}
|
||||
rows={2}
|
||||
value={section.description}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
aria-label={`${labels.moveUp}: ${section.name}`}
|
||||
disabled={disabled || index === 0}
|
||||
onClick={() => moveSection(index, -1)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={`${labels.moveDown}: ${section.name}`}
|
||||
disabled={disabled || index === sections.length - 1}
|
||||
onClick={() => moveSection(index, 1)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<ArrowDownIcon />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={`${labels.remove}: ${section.name}`}
|
||||
disabled={disabled}
|
||||
onClick={() => removeSection(section.id)}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Trash2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${prefix}-${section.id}-description`}>{labels.description}</Label>
|
||||
<Textarea
|
||||
id={`${prefix}-${section.id}-description`}
|
||||
maxLength={1000}
|
||||
onChange={(event) =>
|
||||
saveSections(
|
||||
sections.map((item) =>
|
||||
item.id === section.id ? { ...item, description: event.target.value } : item
|
||||
)
|
||||
)
|
||||
}
|
||||
rows={2}
|
||||
value={section.description}
|
||||
/>
|
||||
</div>
|
||||
{fieldList(section.id)}
|
||||
</fieldset>
|
||||
))}
|
||||
{fieldList(section.id)}
|
||||
</fieldset>
|
||||
))}
|
||||
</div>
|
||||
{fieldList()}
|
||||
</section>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user