Vistas especializadas

Piezas que van más allá de listar y editar registros. La planificación en línea de tiempo con DnzGenericGantt. El código resaltado para documentar dentro de la app. Los selectores de periodo y de rango que alimentan informes y cuadros de mando. Los documentos dinámicos de Flex, los visores y las piezas de horarios de RRHH.

Qué componente uso

DnzGenericGantt

Línea de tiempo tipo Gantt: filas por grupo (empleado, recurso, tarea) y barras por intervalo de tiempo, con barra superior para navegar, cambiar de vista (horas, semana, mes, año) y hacer zoom. Arranca en vista de horas sobre el día de hoy de la empresa (ICultureService), no el del servidor.

Recibe dos listas: los Groups (las filas) y los SourceItems (las barras). Cada elemento se asocia a su fila por GroupId.

@inject Dinaup.CultureService.ICultureService RegionService

<DnzGenericGantt Groups=@_grupos SourceItems=@_citas OnItemClick=@AbrirCita />

@code {
    private List<GanttGroup> _grupos = new();
    private List<GanttItem> _citas = new();

    protected override void OnInitialized()
    {
        // El día de la empresa: el contenedor corre en UTC y DateTime.Today daría el del servidor
        var hoy = RegionService.LocalNow().Date;

        _grupos.Add(new GanttGroup { Id = "tecnico-1", Text = "Laura (Taller A)" });
        _grupos.Add(new GanttGroup { Id = "tecnico-2", Text = "Marcos (Taller B)" });

        _citas.Add(new GanttItem("c-1001", "tecnico-1", "Revisión 8430-KLM", hoy.AddHours(9), hoy.AddHours(11), null));
        _citas.Add(new GanttItem("c-1002", "tecnico-2", "ITV 1190-ZRT", hoy.AddHours(10), hoy.AddHours(12), null, "background:#0d6efd;color:#fff"));
    }

    private void AbrirCita(GanttItem item)
    {
        var cita = item.Data;
    }
}

GanttItem se construye con new GanttItem(id, groupId, text, from, to, data, styleX = ""). El último parámetro es el CSS en línea de la barra. Los tipos están en DinaZen.Components.Gantt.Models.

DnzGanttToolBar

Barra de control del Gantt: flechas anterior y siguiente, botón Hoy (el día de la empresa), selector de vista (Hour, Week, Month, Year) y zoom. La monta DnzGenericGantt; solo la instancias si construyes tu propio Gantt sobre GanttViewport.

@inject Dinaup.CultureService.ICultureService RegionService

<DnzGanttToolBar Viewport=@_viewport ViewportChanged=@OnViewportChanged />

@code {
    private GanttViewport _viewport = new() { ViewMode = GanttViewMode.Hour };

    protected override void OnInitialized()
    {
        _viewport.FocusDate = RegionService.LocalNow().Date;
    }

    private void OnViewportChanged(GanttViewport vp) => _viewport = vp;
}

GanttViewMode tiene Hour, Day, Week, Month y Year; la barra ofrece Hour, Week, Month y Year.

DnzHighlightCode

Bloque de código con resaltado de sintaxis (highlight.js), cabecera con el lenguaje y el nombre de fichero, botón de copiar y números de línea opcionales. Para documentar dentro de la app.

<DnzHighlightCode Code=@_snippet Language="csharp" DnzFileName="Program.cs" ShowLineNumbers=true />

@code {
    private string _snippet = "builder.Services.AddDinaZen();";
}

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

DnzCodeWindow

Lo mismo que DnzHighlightCode con estética de ventana: los tres puntos de la barra de título, título, temas de color y un pie opcional. Para páginas de presentación o demostraciones donde el código es parte del diseño.

<DnzCodeWindow Code=@_setup Language="csharp" Title="Program.cs" Theme="DnzCodeWindow.DnzCodeWindowTheme.Dracula" ShowLineNumbers=true>
    <span class="text-muted">Registra DinaZen en el arranque.</span>
</DnzCodeWindow>

@code {
    private string _setup = "builder.Services.AddDinaZen();";
}

Para un fragmento copiable en una ficha o subpágina, DnzHighlightCode es más plano y ocupa menos. Para una página de presentación, DnzCodeWindow con Theme y Tilted.

DnzDateRangeSelector

Selector de rango de fechas (solo día) con un desplegable de rangos predefinidos: Hoy, Ayer, Últimos 7 días, Últimos 30 días, Este mes, Mes pasado, Este trimestre, Trimestre pasado, Este año, Año pasado y Personalizado. Con Personalizado aparecen dos selectores Desde y Hasta. Devuelve el rango calculado como DateOnly. Los rangos cuentan desde el día de la empresa (ICultureService), no desde el del servidor, que va en UTC.

<DnzDateRangeSelector @bind-SelectedPreset=@_preset OnRangeChanged=@CargarFacturas />

@code {
    private DnzDateRangeSelector.DateRangePreset _preset = DnzDateRangeSelector.DateRangePreset.Last30Days;

    private async Task CargarFacturas((DateOnly From, DateOnly To) rango)
    {
        await RecargarAsync(rango.From, rango.To);
    }
}

Acepta atributos extra que se pasan al elemento raíz. DateRangePreset tiene Today, Yesterday, Last7Days, Last30Days, ThisMonth, LastMonth, ThisQuarter, LastQuarter, ThisYear, LastYear y Custom.

DnzDateTimeRangeSelector

Igual que el anterior, con hora: los selectores personalizados incluyen HH:mm y el rango se devuelve como DateTime. Para intervalos que importan al minuto: registros, fichajes, eventos, auditoría.

<DnzDateTimeRangeSelector @bind-SelectedPreset=@_preset OnRangeChanged=@CargarEventos />

@code {
    private DnzDateTimeRangeSelector.DateTimeRangePreset _preset = DnzDateTimeRangeSelector.DateTimeRangePreset.Today;

    private async Task CargarEventos((DateTime From, DateTime To) rango)
    {
        await RecargarAsync(rango.From, rango.To);
    }
}

Acepta atributos extra que se pasan al elemento raíz. DateTimeRangePreset tiene los mismos valores que DateRangePreset.

DnzDateRangeCard

Tarjeta (DnzCard) con título, icono, un DnzDateRangeSelector integrado, un DnzLoader mientras Loading es true y la hora de la última actualización, en la hora de la empresa. Devuelve el rango como DateTime: From a las 00:00 y To al final del día.

<DnzDateRangeCard Title="Historial" Icon="history" DefaultPreset="DnzDateRangeSelector.DateRangePreset.Last30Days" Loading=@_loading OnRangeChanged=@OnRangeChanged>
    <HistorialTablaU Data=@_filas />
</DnzDateRangeCard>

@code {
    private bool _loading;
    private List<FilaDTO> _filas = new();

    private async Task OnRangeChanged((DateTime From, DateTime To) rango)
    {
        _loading = true;
        _filas = await CargarAsync(rango.From, rango.To);
        _loading = false;
    }
}

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

DnzPeriodSelector

Navegador de periodo con granularidad: día, semana, mes, trimestre, año o rango libre. Emite un PeriodSelection con el rango resuelto, sin repetir el mismo periodo dos veces seguidas.

<DnzPeriodSelector OnChanged=@OnPeriodoChanged InitialGrain="DnzPeriodSelector.PeriodGrain.Mes" />

@code {
    private async Task OnPeriodoChanged(DnzPeriodSelector.PeriodSelection periodo)
    {
        await CargarAsync(periodo.Start, periodo.End);
    }
}

Acepta atributos extra que se pasan al elemento raíz. PeriodSelection es un record (PeriodGrain Grain, DateOnly Start, DateOnly End, string Label).

DnzMonthNavSelector

Tira mínima para moverse mes a mes: flecha atrás, el mes como desplegable y flecha adelante. Emite siempre el día 1 del mes elegido. Las pulsaciones seguidas de flecha se acumulan durante DelaySalto milisegundos antes de emitir, para no lanzar una carga por cada mes intermedio.

@inject Dinaup.CultureService.ICultureService RegionService

<DnzMonthNavSelector @bind-Value=@_mes />

@code {
    private DateOnly _mes;

    protected override void OnInitialized()
    {
        _mes = RegionService.DateOnlyNow();
    }
}

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

DnzDynamicDocumentView

Ejecuta un documento dinámico de Flex por su DocId y muestra el resultado en un iframe, con botones de imprimir, enviar por correo y enviar a firmar. Los botones de correo y firma solo aparecen si la app registra los ganchos correspondientes en DnzInterceptorService o pasa los EventCallback.

<DnzDynamicDocumentView Client=@Client DocId="2b7e1a40-6c3d-4f8e-9a12-0c5d6e7f8a9b" VariableValues=@(new() { ["FacturaId"] = facturaId }) />

Métodos estáticos:

Task DnzDynamicDocumentView.OpenAsync(DialogService dialogService, DinaupClientC client, string docId, Dictionary<string, string> variableValues = null, List<DinaupDynamicDocumentDTO> compatibleDocuments = null, EventCallback<DinaupDocumentRequest>? onSendEmail = null, EventCallback<DinaupDocumentRequest>? onSendEmailWithAttachment = null, string width = "85%", string height = "80%")
Task DnzDynamicDocumentView.OpenPreloadedAsync(DialogService dialogService, DynamicDocumentsGetResponse result, string title = "Documento", string width = "80%", string height = "90%")
string DnzDynamicDocumentView.OpenAsWindow(DnzWindowManagerService windowManager, DinaupClientC client, string docId, Dictionary<string, string> variableValues = null, List<DinaupDynamicDocumentDTO> compatibleDocuments = null, string title = "Documento", string icon = "description")

UpdateAsync() por @ref vuelve a ejecutar el documento.

DnzDynamicDocumentResultView

Muestra el HTML de un documento ya generado con un botón Imprimir / Guardar PDF.

DnzOfficeDocumentViewer

Muestra un documento de Office (Word, Excel, PowerPoint) por URL pública dentro de un iframe del visor view.officeapps.live.com.

<DnzOfficeDocumentViewer DocumentUrl=@adjunto.url_original />

DnzEmailPreview

Vista previa de un correo: cabecera con Para y asunto, y el cuerpo HTML debajo. La versión en diálogo con botón de confirmar está en Diálogos y ventanas.

Piezas de RRHH

Componentes de horarios y fichajes que Play usa en Recursos Humanos. Reciben datos ya procesados, sin dependencias de servicios. Están en DinaZen.Components.Rrhh y sus modelos, en DinaZen.Components.Rrhh.Models.

TimeIntervalRrhh se construye con new TimeIntervalRrhh(start, end, category) y tiene Start, End, Category, SubCategoryId, Abierto y Duration. TimeIntervalTemplateRrhh(name, icon, params (startH, startM, endH, endM, category)[] intervals) define una plantilla de tramos.

Relacionado

• DinaZen
• Componentes
• Documentos dinámicos
• Informes de Flex
• SDK .NET
• Guías de estilo C# y Blazor