@jvsoft/components 0.0.10 → 0.0.12

package/tabla-mantenimiento/tabla-mantenimiento.component.html

@@ -0,0 +1,385 @@
+<div class="flex flex-col h-fit">
+    <div class="grow flex items-center justify-between bg-white">
+        <ng-content select="[filtro]"></ng-content>
+    </div>
+
+    <div class="flex flex-col border-t">
+        <div class="flex-1 bg-app-bar flex items-center justify-between p-1">
+            <!--        <div class="hidden flex-1 sm:flex items-center flex-wrap gap-1">-->
+            <!--        </div>-->
+            <div class="flex items-center flex-wrap mr-1 h-full" *ngIf="leyenda">
+                <span class="font-bold" [class]="leyenda.class">{{ leyenda.text }}</span>
+            </div>
+            <div class="hidden flex-1 sm:flex items-center flex-wrap gap-1">
+                <div *ngIf="(botonesMenuFinal.izquierda ?? []).length > 0 " class=" flex items-center flex-wrap contenedor-botones">
+                    <ng-container *ngFor="let btn of botonesMenu.izquierda; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+
+                <div *ngIf="(botonesMenuFinal.crud ?? []).length > 0" class=" flex items-center flex-wrap contenedor-botones">
+                    <ng-container *ngFor="let btn of botonesMenu.crud; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+
+                <div *ngIf="(botonesMenuFinal.principal ?? []).length > 0" class=" flex items-center flex-wrap contenedor-botones">
+                    <ng-container *ngFor="let btn of botonesMenu.principal; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+
+                <div *ngIf="(botonesMenuFinal.derecha ?? []).length > 0" class="flex-auto flex items-center justify-end contenedor-botones">
+                    <ng-container *ngFor="let btn of botonesMenu.derecha; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+                <ng-content select="[objetosMenuPegado]"></ng-content>
+            </div>
+            <div class="flex flex-1 sm:hidden items-center flex-wrap gap-1">
+                <button class="flex items-center justify-center text-2xs leading-none rounded-full p-1"
+                    matRipple
+                    matTooltip="Botones de Acción"
+                    type="button"
+                    [matMenuTriggerFor]="menuOpciones"
+                >
+                    <mat-icon class="icon-xs" svgIcon="roundMenu"></mat-icon>
+                </button>
+            </div>
+            <div class="flex-none flex items-center justify-end border-l-2">
+                <div class="flex-1 sm:flex-none flex items-center justify-end">
+                    <ng-content select="[objetosMenu]"></ng-content>
+                </div>
+            </div>
+            <div *ngIf="ctrlBusqueda" class="hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2"
+            >
+                <mat-icon svgIcon="roundSearch" class="icon-xs"></mat-icon>
+                <input [formControl]="cCampoBusqueda"
+                    class="text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm"
+                    [placeholder]="ctrlBusquedaPlaceholder"
+                    (keyup.enter)="ctrlBusqueda == 'query' ? cargarData() : false;"
+                    type="search">
+            </div>
+            <div class="flex-none flex items-center justify-end border-l-2">
+                <ng-content select="[botonesFiltro]"></ng-content>
+                <button matRipple *ngIf="isRecargarUsed || ctrlBusqueda == 'query'"
+                    class="flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700"
+                    matTooltip="Actualizar datos"
+                    (click)="(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())"
+                    type="button">
+                    <mat-icon svgIcon="roundRefresh" class="icon-xs"></mat-icon>
+
+                </button>
+                <button matRipple [matMenuTriggerFor]="columnFilterMenu" *ngIf="filtroCampos"
+                    class="flex items-center justify-center text-2xs leading-none rounded-full p-1"
+                    matTooltip="Columnas Filtro"
+                    type="button">
+                    <mat-icon svgIcon="roundFilterList" class="icon-xs"></mat-icon>
+                </button>
+            </div>
+        </div>
+
+        <div *ngIf="(botonesMenuFinal.secundario ?? []).length > 0" class="flex-1 bg-app-bar flex items-center justify-between p-1 border-t">
+            <div class="hidden flex-1 sm:flex items-center flex-wrap gap-1">
+                <div class=" flex items-center flex-wrap contenedor-botones">
+                    <ng-container *ngFor="let btn of botonesMenu.secundario; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+        <!--<div class="grow flex flex-col items-stretch contenedor-tabla" [ngClass]="{'table-container overflow-auto': esTabla}">
+            <pre>{{ this.chkLista.modelosChk | json }}</pre>
+            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>
+            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>
+        </div>-->
+        <div class="grow flex flex-col items-stretch contenedor-tabla" [ngClass]="{'table-container overflow-auto': esTabla}">
+            <ng-content select="[cuerpo]"></ng-content>
+
+            <table [id]="'tabla_' + nombreColeccion" [dataSource]="dataSource" [multiTemplateDataRows]="true"
+                [hidden]="!esTabla"
+                class="flex-1 table-mantenimiento table-auto h-fit" mat-table matSort
+                [trackBy]="trackByFn"
+                #tablaMantenimiento
+            >
+
+                <!--<table [dataSource]="dataSource" class="table-mantenimiento table-auto h-auto w-full justify-center" mat-table matSort>-->
+
+
+                <ng-content select="[tableDefinitions]"></ng-content>
+                <ng-container matColumnDef="numeracion_automatica">
+                    <th mat-header-cell *matHeaderCellDef style="width: 16px !important">Nº</th>
+                    <td mat-cell *matCellDef="let element; let i = dataIndex" class="p-0 celda-numeracion-fila">
+                        <div class="flex items-center justify-center font-bold numeracionFila">
+                            <ng-container *ngIf="esTabla && paginador">
+                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}
+                            </ng-container>
+                            <ng-container *ngIf="!paginador">
+                                {{ (i + 1) }}
+                            </ng-container>
+                        </div>
+                    </td>
+                    <td mat-footer-cell *matFooterCellDef class="uppercase"></td>
+                </ng-container>
+                <jvs-tabla-mantenimiento-column-defs [objThis]="this" [colDetalle]="columnasTabla"
+                    [nombreColeccion]="nombreColeccion" [(chkLista)]="chkLista"></jvs-tabla-mantenimiento-column-defs>
+
+                <tr *matHeaderRowDef="visibleColumns; sticky: true" mat-header-row class="title" matHeader
+                ></tr>
+
+                <ng-container *ngIf="!!filaExtraHeader">
+                    <tr mat-row *matRowDef="let row; columns: ['filaExtraHeader']" class="student-detail-row"
+                        [style.height.px]="0"
+                    ></tr>
+
+                    <ng-container matColumnDef="filaExtraHeader">
+                        <td mat-cell *matCellDef="let row; let i = dataIndex" [attr.colspan]="visibleColumns.length">
+
+                            <div class="row m-0 student-element-detail"
+                                [@detailExpand]="(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'"
+                                [style.padding-right.px]="row.isExpanded ? 5 : 0"
+                                [style.padding-left.px]="row.isExpanded ? 5 : 0"
+                            >
+                                <ng-container *ngIf="filaExtraHeader.template"
+                                    [ngTemplateOutlet]="filaExtraHeader.template"
+                                    [ngTemplateOutletContext]="{ row: row }"></ng-container>
+                            </div>
+
+                        </td>
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngIf="filaFooter">
+                    <tr *matFooterRowDef="visibleColumns" mat-footer-row
+                        [style.height.px]="0"
+                        [id]="nombreColeccion + '_filaFooter'"
+                    ></tr>
+                </ng-container>
+
+                <!--	<tr
+                        *matRowDef="let row; columns: visibleColumns;"
+                        class="hover:bg-secondary trans-ease-out cursor-pointer"
+                        mat-row></tr>-->
+                <tr
+                    [matRowKeyboardSelection]="tablaMantenimiento"
+                    [rowModel]="row"
+                    (seleccionarSiguiente)="opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});"
+
+                    *matRowDef="let row; let idxTabla = dataIndex; columns: visibleColumns;"
+                    (click)="seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });"
+                    (dblclick)="opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)"
+                    (contextmenu)="(abrirMenuContextual($event, row)); $event. preventDefault();"
+                    [ngClass]="classFila(row)"
+                    @fadeInUp
+                    class="trans-ease-out cursor-pointer h-auto"
+                    [style.height.px]="0"
+                    [id]="propiedadSeleccion(row)"
+                    [matTooltip]="procesarRowTooltip(row)"
+                    matTooltipPosition="below"
+                    [matTooltipPositionAtOrigin]="true"
+                    [matTooltipClass]="['bg-red-700', 'text-red-100', 'm-0']"
+                    [matTooltipDisabled]="!procesarRowTooltip(row)"
+                    [class.regAnulado]="row[campoAnulado] == 1"
+                    [class.regTooltip]="!!procesarRowTooltip(row)"
+                    (keyup.delete)="opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})"
+                    mat-row></tr>
+                <ng-container *ngIf="filaExtraTemplate">
+                    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="student-detail-row h-0"></tr>
+
+                    <ng-container matColumnDef="expandedDetail">
+                        <td mat-cell *matCellDef="let row" [attr.colspan]="visibleColumns.length">
+
+                            <div class="row m-0 student-element-detail"
+                                [@detailExpand]="row.isExpanded ? 'expanded' : 'collapsed'"
+                                [style.padding-right.px]="row.isExpanded ? 5 : 0"
+                                [style.padding-left.px]="row.isExpanded ? 5 : 0"
+                            >
+                                <ng-container [ngTemplateOutlet]="filaExtraTemplate"
+                                    [ngTemplateOutletContext]="{ row: row }"></ng-container>
+                            </div>
+
+                        </td>
+                    </ng-container>
+                </ng-container>
+            </table>
+
+            <ng-container *ngIf="componenteCargadoTotalmente">
+                <div *ngIf="(noData | async) && esTabla" class="flex-1 text-center text-secondary font-medium">
+                    No se encontraron datos
+                </div>
+            </ng-container>
+        </div>
+        <ng-content select="[appendTable]"></ng-content>
+        <div class="flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1">
+            <div class="flex-1 flex items-start flex-wrap gap-1">
+                <div *ngIf="(botonesMenuFinal.inferior ?? []).length > 0" class=" flex items-center flex-wrap">
+                    <ng-container *ngFor="let btn of botonesMenu.inferior; let idx = index;">
+                        <ng-container *ngTemplateOutlet="botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}"></ng-container>
+                    </ng-container>
+                </div>
+            </div>
+
+            <div *ngIf="esTabla && paginador" class="flex-1 sm:flex-none flex items-center justify-end">
+                <mat-paginator class="tabla-mantenimiento-paginador" [pageSizeOptions]="paginacion.pageSizeOptions" [pageIndex]="paginacion.pageIndex - 1" [length]="paginacion.pageLength" [pageSize]="paginacion.pageSize" (page)="paginacion.pageCurrent = $event; emitirResultados();" ></mat-paginator>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+
+<!-- SECCION DE TEMPLATES O MENUS -->
+
+
+<mat-menu #columnFilterMenu="matMenu" xPosition="before" yPosition="below">
+    <ng-container *ngFor="let column of columnasTabla">
+        <button (click)="toggleColumnVisibility(column, $event)" *ngIf="!tipoValorFuncion(column.noMostrarEnLista, false)"
+            class="checkbox-item mat-menu-item">
+            <mat-checkbox (click)="$event.stopPropagation()" [(ngModel)]="column.visible" [ngModelOptions]="{standalone: true}" color="primary">
+                <span [innerHTML]="(column.labelLista ?? column.label).replace('<br>', ' ')"></span>
+            </mat-checkbox>
+        </button>
+    </ng-container>
+</mat-menu>
+
+
+
+
+
+
+<ng-template #botonesSuperiores let-btn="btn" let-idx="idx">
+    <ng-container *ngTemplateOutlet="botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}"></ng-container>
+</ng-template>
+
+<ng-template #botonesContextual let-btn="btn" let-item="item" let-barraSuperior="barraSuperior" let-idx="idx">
+
+    <ng-container *ngIf="barraSuperior; else noBarraSuperior">
+
+        <!--		<button mat-button style="min-width: unset; border: 1px !important;" class="uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent">-->
+        <!--			<mat-icon *ngIf="btn.icono" [svgIcon]="btn.icono" size="15px" class="icon-xs"></mat-icon>-->
+        <!--		</button>-->
+        <ng-container *ngIf="btn.subItems && btn.subItems.length > 0">
+            <button class="flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2" type="button"
+
+                *ngIf="(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)"
+                [class]="(btn.class?btn.class:'')"
+
+                (click)="opcMenu(item, btn)"
+                [style.min-width]="((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')"
+                [matTooltip]="btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) "
+                [matMenuTriggerFor]="menuOtrosBarra.menu"
+
+                [matBadge]="btn.badge"
+                matBadgeSize="small"
+            >
+                <mat-icon class="icon-xs" [class.mr-0.5]="!(btn.soloIcono ?? tipoValorFuncion(soloIconos))" *ngIf="btn.icono" [svgIcon]="btn.icono" ></mat-icon>
+                <span class="whitespace-nowrap" *ngIf="!(btn.soloIcono ?? tipoValorFuncion(soloIconos))">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>
+                <mat-icon class="icon-xs" svgIcon="fa5sCaretDown" ></mat-icon>
+            </button>
+
+            <jvs-tabla-mantenimiento-menu #menuOtrosBarra
+                [objThis]="objThis"
+                [nombreColeccion]="nombreColeccion"
+                [item]="item"
+                [derechosActuales]="derechosActuales"
+                [subItems]="btn.subItems"
+                (opcionSelecionada)="opcMenu($event.item, $event.btn)"
+                [botonTemplate]="botonesContextual"
+            >
+            </jvs-tabla-mantenimiento-menu>
+        </ng-container>
+        <ng-container *ngIf="!btn.subItems || btn.subItems.length == 0">
+            <button class="flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2" type="button"
+
+                *ngIf="!btn.esVisible || btn.esVisible(item, this)"
+                [class]="(btn.class?btn.class:'text-secondary')"
+                [ngClass]="{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}"
+                [disabled]="!btn.esIndependiente && botonDisabled(btn, item)"
+                (click)="opcMenu(item, btn)"
+                [style.min-width]="((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')"
+                [matTooltip]="btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) "
+
+                [matBadge]="btn.badge"
+                matBadgeSize="small"
+            >
+                <mat-icon class="icon-xs" [class.mr-0.5]="!(btn.soloIcono ?? tipoValorFuncion(soloIconos))" *ngIf="btn.icono" [svgIcon]="btn.icono"></mat-icon>
+                <span class="whitespace-nowrap" *ngIf="!(btn.soloIcono ?? tipoValorFuncion(soloIconos))">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>
+            </button>
+
+        </ng-container>
+
+    </ng-container>
+    <ng-template #noBarraSuperior>
+
+        <ng-container *ngIf="btn.subItems && btn.subItems.length > 0">
+            <button class="flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent" mat-menu-item type="button"
+                *ngIf="!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))"
+                [class]="(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')"
+                [ngClass]="{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}"
+                [disabled]="!btn.esIndependiente && botonDisabled(btn, item)"
+                (click)="opcMenu(item, btn); $event.stopPropagation();"
+                [matMenuTriggerFor]="menuOtrosBarra.menu"
+            >
+                <div class="flex w-full items-center justify-between uppercase text-2xs"
+                >
+                    <mat-icon *ngIf="btn.icono" [svgIcon]="btn.icono"
+                        class="flex-none icon-xs"
+                    ></mat-icon>
+                    <span class="grow text-2xs">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>
+                    <mat-icon class="flex-none icon-xs" svgIcon="fa5sCaretRight"></mat-icon>
+                </div>
+            </button>
+
+            <jvs-tabla-mantenimiento-menu #menuOtrosBarra
+                [objThis]="objThis"
+                [nombreColeccion]="nombreColeccion"
+                [item]="item"
+                [derechosActuales]="derechosActuales"
+                [subItems]="btn.subItems"
+                (opcionSelecionada)="opcMenu($event.item, $event.btn)"
+                [botonTemplate]="botonesContextual"
+            >
+            </jvs-tabla-mantenimiento-menu>
+        </ng-container>
+        <ng-container *ngIf="!btn.subItems || btn.subItems.length == 0">
+            <ng-container *ngIf="btn.tipo == '-#SEPARADOR#-'; else itemsNormales">
+                <mat-divider></mat-divider>
+            </ng-container>
+            <ng-template #itemsNormales>
+                <button class="flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent" mat-menu-item type="button"
+                    *ngIf="!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))"
+                    [class]="(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')"
+                    [ngClass]="{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}"
+                    [disabled]="!btn.esIndependiente && botonDisabled(btn, item)"
+                    (click)="opcMenu(item, btn)"
+                >
+                    <div class="flex w-full items-center justify-between uppercase text-2xs">
+                        <mat-icon *ngIf="btn.icono" [svgIcon]="btn.icono" class="flex-none icon-xs"
+                        ></mat-icon>
+                        <span class="grow text-2xs">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>
+                    </div>
+                </button>
+            </ng-template>
+
+        </ng-container>
+
+    </ng-template>
+
+</ng-template>
+
+<ng-template #userMenu let-item="item">
+    <div class="mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual">
+        <ng-container *ngFor="let btn of listaMenuCompleto">
+            <ng-container *ngTemplateOutlet="botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}"></ng-container>
+        </ng-container>
+    </div>
+</ng-template>
+
+
+<mat-menu #menuOpciones="matMenu" xPosition="before" yPosition="below">
+    <ng-container *ngFor="let btn of listaMenuCompleto">
+        <ng-container
+            *ngTemplateOutlet="botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}"></ng-container>
+    </ng-container>
+</mat-menu>
+