Entrada de datos y formularios

Lo que el usuario teclea, pega o sube. Esta familia agrupa los componentes de entrada autónomos de DinaZen: una caja de búsqueda, un botón de subida, un editor de etiquetas, un recortador de imagen. Incluye también el formulario dinámico de Flex, que muestra una ficha completa a partir del GUID de una sección.

Casi todos son componentes de dos vías: reciben el dato con Value y avisan del cambio con ValueChanged. En Razor eso se escribe @bind-Value=@Modelo.Campo.

Qué componente uso

DnzSearchInput

Caja de búsqueda con icono de lupa que espera 500 ms tras la última tecla (debounce): no consulta en cada pulsación. Para filtrar una tabla o una lista sin saturar el servidor.

<DnzSearchInput Placeholder="Buscar cliente" BounceValueChanged=@OnBuscar />

@code {
    private string _filtro = "";

    private async Task OnBuscar(string texto)
    {
        _filtro = texto;
        await RecargarListaAsync();
    }
}

Parámetros

Los atributos extra (autofocus, maxlength) se pasan al <input>.

DnzFileUploaderButton

Botón que abre el selector nativo, sube los ficheros a S3 (firma más Uppy) y devuelve los DinaupFileDTO ya registrados en Dinaup con Client.File_UploadURLAsync. Si subes una sola imagen, abre antes el editor de imagen.

<DnzFileUploaderButton Client=@Client OnFilesUploaded=@OnFicherosSubidos AcceptExtensions=@(new[] { ".pdf", ".docx", ".xlsx" }) MaxFiles="5" MaxSizeBytes=@(50L * 1024 * 1024) ButtonText="Adjuntar documento" ButtonIcon="upload_file" OnError=@OnErrorSubida />

@code {
    private async Task OnFicherosSubidos(List<DinaupFileDTO> ficheros)
    {
        foreach (var f in ficheros)
            Factura.Adjuntos.Add(f);
        await InvokeAsync(StateHasChanged);
    }

    private void OnErrorSubida(string mensaje)
    {
        NotificationService.Notify(NotificationSeverity.Error, "Subida", mensaje);
    }
}

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzFileName

Muestra un fichero ya subido: icono según su extensión, nombre, tamaño y un botón de descarga o una acción propia. Es lo que muestras en una lista de adjuntos; no sube nada.

@foreach (var adjunto in Factura.Adjuntos)
{
    <DnzFileName DnzFileNameDisplay=@adjunto.Name FileSize=@adjunto.SizeInBytes DownloadURL=@adjunto.url_original Horizontal=true @key=@adjunto.Id />
}

Parámetros

DnzHtmlEditor

Editor de texto rico (RadzenHtmlEditor) con la barra de herramientas de Dinaup (DnzHtmlEditorToolbar). Para descripciones largas, plantillas de correo o notas de un cliente.

<DnzHtmlEditor @bind-Value=@Plantilla.Cuerpo EditorStyle="min-height:400px;" UploadUrl="upload/image" />

Parámetros

DnzImageEditor

Editor de imagen embebido: recorte, rotación, volteo, mejora automática y herramientas externas (IDnzImageTool). Trabaja sobre una URL o sobre byte[]. Lo habitual es usarlo dentro del diálogo; suelto solo cuando forma parte de la pantalla.

<DnzImageEditor @ref=_editor ImageUrl=@Producto.FotoUrl PresignEndpoint="/file/upload/sign" OnSave=@OnImagenGuardada Style="height:600px;" />

@code {
    private DnzImageEditor _editor;

    private async Task Guardar()
    {
        var bytes = await _editor.GetResultBytesAsync();
        await PersistirAsync(bytes);
    }
}

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzImageEditorDialog

El editor de imagen envuelto en un diálogo modal con aceptar y cerrar. No lo pones en el marcado: lo abres con un método estático y devuelve el resultado.

@code {
    private async Task EditarFoto()
    {
        var bytes = await DnzImageEditorDialog.OpenAsync(DialogService, imageUrl: Producto.FotoUrl);
        if (bytes.IsNull()) return;
        await PersistirAsync(bytes);
    }
}

@code {
    private async Task EditarYSubir()
    {
        var result = await DnzImageEditorDialog.OpenAndUploadToS3Async(DialogService, "/file/upload/sign", imageUrl: Producto.FotoUrl);
        if (result.IsNull()) return;
        Producto.FotoUrl = result.Url;
    }
}

Parámetros

Métodos estáticos

Task<byte[]> DnzImageEditorDialog.OpenAsync(DialogService dialogService, string imageUrl = null, byte[] imageBytes = null)
Task<PresignUploadResult> DnzImageEditorDialog.OpenAndUploadToS3Async(DialogService dialogService, string presignEndpoint, string imageUrl = null)

Los dos devuelven null si el usuario cancela.

DnzTagListEditor

Editor de una lista de etiquetas (List<string>). Escribes y pulsas Enter para añadir, pulsas la X para quitar. Admite pegar varias separadas por coma, punto y coma, salto de línea o tabulador, validación por valor y transformación.

<DnzTagListEditor @bind-Value=@Producto.Etiquetas Title="Etiquetas" Icon="sell" Placeholder="Añade una etiqueta y pulsa Enter" Transform=@(v => v.Trim().ToLower()) />

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzJsonKVEditor

Editor de pares clave/valor que entra y sale como JSON (string). Para metadatos sueltos, configuración de una integración o cabeceras HTTP. Trae Copy, Paste e Import de un JSON pegado.

<DnzJsonKVEditor @bind-Value=@Integracion.MetadatosJson />

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzStepper

Lista vertical de pasos numerados con la línea que los une. Es presentacional: muestra un proceso, no controla un asistente ni navega. Los pasos van dentro como DnzStepperStep.

<DnzStepper>
    <DnzStepperStep Index="1">
        <strong>Crea la factura</strong>
        <p>Elige cliente y añade las líneas.</p>
    </DnzStepperStep>
    <DnzStepperStep Index="2">
        <strong>Revisa los importes</strong>
        <p>Comprueba bases, IVA y total.</p>
    </DnzStepperStep>
    <DnzStepperStep Index="3">
        <strong>Emite y envía</strong>
        <p>Genera el PDF y mándalo al cliente.</p>
    </DnzStepperStep>
</DnzStepper>

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzStepperStep

Un paso suelto dentro del DnzStepper: el círculo numerado y el contenido al lado.

<DnzStepperStep Index="2">
    <strong>Configura el almacén</strong>
    <p>Define ubicaciones y stock inicial.</p>
</DnzStepperStep>

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzFormView

El formulario dinámico de Flex. No declaras campos: recibe el GUID de una sección y el cliente, y muestra la ficha completa (cabecera, pestañas, controles, listas, botones, guardar y cancelar) tal cual está definida en Dinaup. Es lo que usas para dar de alta o editar un registro de cualquier sección sin escribir un <input>.

<DnzFormView Client=@Client SectionId=@SectionsD.EntidadesD._SectionID DatoId=@ClienteId OnClosed=@OnFichaCerrada />

@code {
    private void OnFichaCerrada(DinaupFormResult result)
    {
        if (result.Reason == DinaupFormCloseReason.Saved)
            RecargarLista();
    }
}

Parámetros

Acepta atributos extra que se pasan al elemento raíz. Métodos públicos por @ref: LoadForm() recarga la ficha y List_AddNewItem(Dictionary<string, string> addValues = null) añade una fila a la lista primaria.

DinaupFormResult trae Reason (Cancelled, Saved, Error, SessionExpired), RowId, SectionId, WasModified y Title.

Las fechas con hora se eligen en la hora de la empresa (ICultureService, Madrid por defecto) y se guardan convertidas a UTC. Los botones Ahora, Hoy y Mañana del selector toman esa hora, no el reloj del servidor. Un campo confidencial o de contraseña se muestra oculto con DnzControlSensible, con un botón para verlo y otro para copiarlo. Ver DnzControl.

En vez de incrustarlo en el marcado, lo habitual es abrirlo como modal o como ventana flotante con sus métodos estáticos:

@code {
    private async Task EditarCliente(string clienteId)
    {
        var result = await DnzFormView.OpenAsync(DialogService, Client, SectionsD.EntidadesD._SectionID, clienteId);
        if (result.Reason == DinaupFormCloseReason.Saved)
            RecargarLista();
    }
}

Task<DinaupFormResult> DnzFormView.OpenAsync(DialogService dialogService, DinaupClientC client, string sectionId, string datoId = "", string title = "", string width = "min(96%, 1100px)", string height = "min(90%, 1000px)")

@code {
    private void AbrirFichaFlotante(string clienteId)
    {
        DnzFormView.OpenAsWindow(WindowManager, Client, SectionsD.EntidadesD._SectionID, clienteId, title: "Cliente");
    }
}

string DnzFormView.OpenAsWindow(DnzWindowManagerService windowManager, DinaupClientC client, string sectionId, string datoId = "", string title = "", string icon = "")

DnzFormTab

La pieza interna con la que DnzFormView renderiza cada pestaña: título, contenedores, controles y botones. No la montas tú; está aquí para reconocerla al depurar. Los contenedores y controles que muestra (DnzContainer, DnzControl) están en Tarjetas y maquetación.

Relacionado

• Selectores: elegir opciones (enum, memoria o catálogo remoto), con DnzSearchInput por dentro.
• Tablas e informes: mostrar un informe del SDK como tabla, tarjetas o gráfica.
• Diálogos y ventanas: dónde abrir DnzFormView en ventana flotante.
• Patrones de uso: ejemplos que combinan estos componentes con el SDK.
• Cliente Dinaup: conexión, WriteOperations y File_UploadURLAsync para guardar lo que capturan estos componentes.

→ Componentes · DinaZen · SDK .NET