Diálogos y ventanas

Todos los diálogos de Dinaup comparten el mismo esqueleto. Se monta con DnzDialogLayout, que tiene tres huecos: cabecera, cuerpo y pie. Los casos repetidos ya están hechos: DnzConfirmDialog pide confirmación antes de borrar, DnzItemPickerDialog abre la selección de una ficha de un informe y DnzHistoricoDialog muestra el histórico de un campo. Cuando el contenido tiene que convivir con la pantalla en lugar de cubrirla, se abre en una ventana flotante con DnzWindowManagerService.

Qué componente uso

El patrón de diálogo Dinaup

DnzDialogLayout

Estructura fija de cualquier diálogo: cabecera, cuerpo con desplazamiento y pie. Rellenas los tres RenderFragment y el componente pone la rejilla y el botón de cerrar. Solo el cuerpo se desplaza; cabecera y pie quedan fijos.

<DnzDialogLayout AltoAuto=true IsLoading=@cargando ErrorText=@errorCarga OnRetry=@CargarAsync>
    <TitleContent>
        <span>@(ID.IsEmpty() ? "Nueva retención" : "Editar retención")</span>
    </TitleContent>
    <BodyContent>
        <div class="d-flex flex-column gap-3 p-3">
            <RadzenFormField class="w-100" Text="Nombre" Variant="Variant.Flat">
                <RadzenTextBox @bind-Value=@editandoNombre Style="width:100%" />
            </RadzenFormField>
            <RadzenFormField class="w-100" Text="Retención %" Variant="Variant.Flat">
                <RadzenNumeric @bind-Value=@editandoRetencion Style="width:100%" Format="N2" />
            </RadzenFormField>
        </div>
    </BodyContent>
    <FooterContent>
        <div class="d-flex justify-content-end gap-2 align-items-center px-3">
            <RadzenButton Click=@Cerrar ButtonStyle="ButtonStyle.Danger" Text="Cancelar" Variant="Variant.Text" />
            <RadzenButton Click=@GuardarAsync ButtonStyle="ButtonStyle.Success" Text="Guardar" Icon="check" IsBusy=@isBusy />
        </div>
    </FooterContent>
</DnzDialogLayout>

Si omites TitleContent o FooterContent, el componente genera una cabecera automática (Title, Icon y botón de cerrar) y un pie con un botón Cerrar. El patrón Dinaup es darle tu propio pie con Guardar y Cancelar.

Cabecera: automática o a medida

<DnzDialogLayout Title="Detalle del pedido" Icon="receipt" AltoAuto=true>
    <BodyContent>
        <DetallePedidoU Pedido=@pedido />
    </BodyContent>
</DnzDialogLayout>

<DnzDialogLayout AltoAuto=true>
    <TitleContent>
        <div class="d-flex align-items-center justify-content-between w-100">
            <span class="fw-semibold">Detalle del pedido 1042</span>
            <DnzBadgetAutoColor Value="Pagado" />
        </div>
    </TitleContent>
    <BodyContent>
        <DetallePedidoU Pedido=@pedido />
    </BodyContent>
</DnzDialogLayout>

Convención del pie

Marca el botón de aceptar con IsBusy=@variable durante la operación: el botón muestra el indicador de carga mientras dura. Para evitar un doble guardado, comprueba al inicio del método si ya hay uno en curso.

Parámetros

Por @ref tienes SetWidth(string width) y SetHeight(string height) para ajustar el tamaño desde código, y Cerrar(), que llama a DialogService.Close().

DnzConfirmDialog

Diálogo de confirmación para acciones que no se pueden deshacer. No va en tu marcado: se abre con el método estático OpenAsync, que devuelve true si el usuario confirma y false si cancela o cierra.

@code {
    async Task EliminarDominioAsync(string dominio)
    {
        if (await DnzConfirmDialog.OpenAsync(DialogService, $"Se elimina el dominio '{dominio}' y no se puede deshacer.", "Eliminar dominio", DnzConfirmSeverity.Danger, "Eliminar") == false) return;

        await BorrarDominioAsync(dominio);
        NotificationService.Notify(NotificationSeverity.Success, "Dominio eliminado");
    }
}

El patrón es siempre el mismo: if (await DnzConfirmDialog.OpenAsync(...) == false) return; y después la acción.

Firma de OpenAsync

public static async Task<bool> OpenAsync(DialogService dialogService, string message, string title = "Confirmar", DnzConfirmSeverity severity = DnzConfirmSeverity.Warning, string okText = "Confirmar", string cancelText = "Cancelar")

Valores de DnzConfirmSeverity

if (await DnzConfirmDialog.OpenAsync(DialogService, $"Se elimina el dominio '{dominio}' y no se puede deshacer.", "Eliminar dominio", DnzConfirmSeverity.Danger, "Eliminar") == false) return;

if (await DnzConfirmDialog.OpenAsync(DialogService, "La app externa tendrá acceso a tus datos.", "Instalar app externa", DnzConfirmSeverity.Warning, "Instalar") == false) return;

DnzItemPickerDialog

Selector de ficha sobre un informe. Abre un diálogo con un DnzReportView de 50 filas por página y devuelve la fila que elija el usuario, o null si cancela.

@code {
    async Task ElegirClienteAsync()
    {
        var fila = await DnzItemPickerDialog.OpenAsync(DialogService, Client, SectionsD.EntidadesD._SectionID);
        if (fila == null) return;

        var nombre = fila.GetLegible("nombre");
    }
}

Firma de OpenAsync

public static async Task<DinaupDynamicRowDTO> OpenAsync(DialogService dialogService, DinaupClientC client, string reportId)

El diálogo mide min(95%, 1806px) de ancho y 600 px de alto, y es redimensionable y arrastrable. Para el selector embebido en un formulario, consulta Selectores.

DnzHistoricoDialog

Histórico de cambios de un campo de un registro (auditoría): primero el valor vigente con autor y fecha, después cada cambio como "antes y después". Lee Client.GetHistoryChanges.

@code {
    async Task VerHistorialAsync()
    {
        await DnzHistoricoDialog.Open(DialogService, Client, sectionId, rowId, "importe", "Importe");
    }
}

public static async Task Open(DialogService dialogService, DinaupClientC client, Guid sectionId, Guid rowId, string field, string fieldLabel = null)

fieldLabel es el nombre visible del campo; sin él se muestra el nombre interno.

DnzAnnotationsDialog

Comentarios, ficheros y galería pública de un registro, con pestañas para cambiar de tipo y un redactor con menciones. Lee Client.Annotations_GetAsync y escribe con Client.Annotation_PutAsync.

public static async Task OpenAsync(DialogService dialogService, DinaupClientC client, Guid sectionId, Guid rowId, AnnotationTypeE type)

AnnotationTypeE tiene Comments, Files y PublicGallery. DnzFormView pide abrir este diálogo con OnAnnotationOpen, que recibe un DinaupAnnotationRequest con SectionId, RowId, Type y Client.

DnzBacklinksDialog

Lista los registros que apuntan al registro dado, una línea por campo de relación. Lee Client.GetBacklinksAsync al abrir.

public static async Task OpenAsync(DialogService ds, DinaupClientC client, string sectionId, string rowId)

DnzEmailPreviewDialog

DnzEmailPreview envuelto en un diálogo con un botón de confirmar. Devuelve true si el usuario pulsa el botón.

public static async Task<bool> OpenAsync(DialogService dialogService, string body, string destinatario, string asunto, EventCallback onConfirmar, string confirmarTexto = "Enviar")

Otros diálogos

Ventanas flotantes

Una ventana flotante es un panel arrastrable, redimensionable, minimizable y maximizable que convive con la pantalla. Las gestiona DnzWindowManagerService (registrado por AddDinaZen, uno por circuito Blazor) y las muestra DnzWindowHost, que además monta la barra de tareas DnzTaskbar cuando hay alguna abierta.

<DinaZen.Components.WindowManager.DnzWindowHost />

@inject DnzWindowManagerService WindowManager

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

@code {
    private void AbrirTarea(string tareaId, string titulo)
    {
        RenderFragment content = builder =>
        {
            builder.OpenComponent<TareaU>(0);
            builder.AddAttribute(1, "TareaId", tareaId);
            builder.CloseComponent();
        };
        WindowManager.Open(new WindowOptions { Title = titulo, Icon = "task_alt", InitialWidth = 1100, InitialHeight = 700, MinWidth = 800, MinHeight = 400 }, content);
    }
}

WindowOptions

DnzWindowManagerService

Relacionado

• DinaZen: instalación, DnzHead, DnzScripts y DnzWindowHost.
• Componentes · Selectores · Tablas e informes
• Patrones de uso: el ejemplo del esqueleto de diálogo.
• Cliente Dinaup: el cliente que alimenta el selector de ficha y el histórico.