SistemaMantenimiento/sistema-mantenimiento-front/src/app/components/template/template.component.html

<mat-toolbar class="toolbar" (window:resize)="onResize()">
    <mat-toolbar-row class="p-0">
        <div class="toolbar-row">
            <div class="menu-items">
                <h1 style="color: #e0e0e0; margin: 0;">{{ title }}</h1>
                <div class="example-spacer">
                    <div *ngIf="maintenanceActivated" class="time-counter">
                        {{ timeLeft }}
                    </div>
                </div>
                <button mat-button class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode" (click)="modulesActivated = !modulesActivated">
                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
                </button>
                <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode">
                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }}
                </button>
                <mat-menu #menuA="matMenu">
                    <button mat-menu-item><mat-icon>person</mat-icon> Mi perfil</button>
                    <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
                    <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
                    <button mat-menu-item (click)="logoutTemp()"><mat-icon>logout</mat-icon> Cerrar sesión</button>
                </mat-menu>
                <span class="m-8"></span>
                <div class="search-mat-form-field animated fadeIn" *ngIf="!isLoading && !maintenanceMode">
                    <mat-icon class="prefix">search</mat-icon>
                    <input type="text" class="input" placeholder="Buscar ubicaciones, archivos, etc..." #input>
                    <button mat-icon-button [disabled]="input.value === ''">
                        <mat-icon class="suffix">close</mat-icon>
                    </button>
                </div>
            </div>
            <div class="icon-modules-container" [ngClass]="{
                hidden: !modulesActivated, animate_hide: modulesActivated
            }">
                <div class="row-container">
                    <div class="row-item" *ngFor="let item of menuItems" (click)="navigate(item.IDMODULO)">
                        <mat-icon>{{ item.ICONOMODULO }}</mat-icon>
                        <p>{{ item.NOMBREMODULO }}</p>
                    </div>
                </div>
            </div>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

<mat-drawer-container class="example-container" autosize>
    <mat-drawer #drawer class="example-sidenav" mode="side">
        <div style="margin-top: 30px;">
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080;">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">add_shopping_cart</mat-icon> Módulo de
                        Adquisiciones
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div>
                    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                        class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="color: #808080">
                                <mat-icon style="color: #F78F1E; margin-right: 10px;">local_grocery_store</mat-icon>
                                Adquisiciones
                            </mat-panel-title>
                            <mat-panel-description>
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/formulario-adquisicion']">
                                <mat-icon style="color: #F78F1E;">app_registration</mat-icon> Registro de Adquisiciones
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/seguimiento']">
                                <mat-icon style="color: #F78F1E;">local_shipping</mat-icon>
                                Seguimiento de Pedidos
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/seguimiento-ordenes']">
                                <mat-icon style="color: #F78F1E;">sell</mat-icon>
                                Seguimiento de Ordenes de Compra
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/requests-fields']">
                                <mat-icon style="color: #F78F1E;">rate_review</mat-icon>
                                Solicitudes de formulario
                            </button>
                        </div>
                    </mat-expansion-panel>
                </div>
                <div>
                    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                        class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="color: #808080">
                                <mat-icon style="color: #F78F1E; margin-right: 10px;">groups</mat-icon> Proveedores
                            </mat-panel-title>
                            <mat-panel-description>
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/lista_proveedores']">
                                <mat-icon style="color: #F78F1E;">find_in_page</mat-icon> Consulta Proveedores
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/catalogos']">
                                <mat-icon style="color: #F78F1E;">view_list</mat-icon> Catálogo de Proveedores
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/proveedores-articulos']">
                                <mat-icon style="color: #F78F1E;">manage_accounts</mat-icon> Gestión Proveedores por
                                Artículo
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/solicitud-precios']">
                                <mat-icon style="color: #F78F1E;">attach_money</mat-icon> Solicitar Precio
                            </button>
                        </div>
                    </mat-expansion-panel>
                </div>
                <div>
                    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                        class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="color: #808080">
                                <mat-icon style="color: #F78F1E; margin-right: 10px;">local_shipping</mat-icon> Despacho
                            </mat-panel-title>
                            <mat-panel-description>
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/recepcion-pedidos']">
                                <mat-icon style="color: #F78F1E;">inventory</mat-icon> Recepción de Pedidos
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/seguimiento-problemas']">
                                <mat-icon style="color: #F78F1E;">report_problem</mat-icon> Seguimiento de Problemas
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/retrasos-entrega']">
                                <mat-icon style="color: #F78F1E;">analytics</mat-icon> Análisis de Retrasos
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/entregas-parciales']">
                                <mat-icon style="color: #F78F1E;">incomplete_circle</mat-icon> Entregas Parciales
                            </button>
                        </div>
                    </mat-expansion-panel>
                </div>
                <div>
                    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                        class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                        <mat-expansion-panel-header>
                            <mat-panel-title style="color: #808080">
                                <mat-icon style="color: #F78F1E; margin-right: 10px;">receipt</mat-icon> Facturas
                            </mat-panel-title>
                            <mat-panel-description>
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/consultar-facturas']">
                                <mat-icon style="color: #F78F1E;">list_alt</mat-icon> Consultar Facturas
                            </button>
                        </div>
                        <div class="divBotones">
                            <button mat-button style="color: #808080" [routerLink]="['/sam/facturas-pendientes']">
                                <mat-icon style="color: #F78F1E;">receipt_long</mat-icon> Facturas Pendientes
                            </button>
                        </div>
                    </mat-expansion-panel>
                </div>
            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">account_circle </mat-icon> Módulo de
                        Usuarios
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="divBotones">
                    <button mat-button style="color: #808080" (click)="openViewUsersAdmin()">
                        <mat-icon style="color: #F78F1E;">person_add</mat-icon> Registrar Usuario
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" (click)="openViewProfilesAdmin()">
                        <mat-icon style="color: #F78F1E;">account_box</mat-icon> Perfil de Usuario
                    </button>
                </div>
            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px;color: #F78F1E;">fact_check</mat-icon> Módulo de Gestión de
                        Stock
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px;color: #F78F1E;">handyman</mat-icon> Módulo de Mantenimiento
                        Preventivo
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">warning</mat-icon> Módulo de Mantenimiento
                        Correctivo
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">build</mat-icon> Módulo de Gestión de
                        Equipamiento
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">request_quote</mat-icon> Módulo de
                        Contadores y Activadores
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">schema </mat-icon> Módulo de Gestión de los
                        procesos
                        (Workflow)
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/workflow']">
                        <mat-icon style="color: #F78F1E;">analytics</mat-icon> Consultar workflows
                    </button>
                </div>
            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">assessment</mat-icon> Módulo de Análisis de
                        Fallas
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">data_thresholding</mat-icon> Módulo de
                        Panel de Control
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">engineering</mat-icon> Módulo de Gestión
                        del Personal de
                        Mantenimiento
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">paid</mat-icon> Módulo de Presupuestos
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">picture_as_pdf</mat-icon> Módulo de Gestión
                        Documental
                        Electrónica
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>
            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="margin-right: 5px; color: #F78F1E;">table_chart</mat-icon> Módulo de Gestión de
                        Tablas
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/getbgt']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">grid_on</mat-icon> Gestionar Tablas de Base de Datos
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/getbgm']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">auto_awesome_mosaic</mat-icon> Gestión de Módulos
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/getbsb']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">dashboard</mat-icon> Gestión de Submódulos
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/getbme']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">web_stories</mat-icon> Gestión de Menús
                    </button>
                </div>
                <div class="divBotones">
                    <a mat-button style="color: #808080" [routerLink]="['/sam/getbfo']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">sticky_note_2</mat-icon> Gestión de Formularios
                    </a>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/getbtb']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">table_chart</mat-icon> Gestión de Tablas Dinámicas
                    </button>
                </div>
            </mat-expansion-panel>
        </div>
        <div>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
                <mat-expansion-panel-header>
                    <mat-panel-title style="color: #808080">
                        <mat-icon style="color: #F78F1E;">bug_report</mat-icon>
                        Plantillas Test
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/template-menu']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">web_stories</mat-icon> Menú
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/template-table']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">table_chart</mat-icon> Consulta tablas
                    </button>
                </div>
                <div class="divBotones">
                    <button mat-button style="color: #808080" [routerLink]="['/sam/tamplate-form']" (click)="drawer.toggle()">
                        <mat-icon style="color: #F78F1E;">sticky_note_2</mat-icon> Formulario
                    </button>
                </div>
            </mat-expansion-panel>
        </div>
    </mat-drawer>
    <div style="height: 100%; box-sizing: border-box; overflow: hidden;">
        <router-outlet></router-outlet>
    </div>
</mat-drawer-container>
<footer style="height: 48px;"></footer>