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

<mat-toolbar class="toolbar prevent-select" (window:resize)="onResize()">
  <mat-toolbar-row class="p-0">
    <div class="toolbar-row">
      <div class="menu-items">
        <h1 class="main-title" [routerLink]="['/sam/home']">{{ 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>
        <mat-progress-bar style="background-color: #FFFFFF; color: #FFFFFF; width: 550px;" mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>

        <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode" 
        [matBadge]="unreadNotifications" [matBadgeHidden]="unreadNotifications <= 0" matBadgeColor="warn">
          <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }}
        </button>
        <mat-menu #menuA="matMenu">
          <button mat-menu-item (click)="openMyProfile()"><mat-icon>person</mat-icon> Mi perfil</button>
          <button mat-menu-item (click)="rightDrawer.toggle()">
            <mat-icon>notifications</mat-icon>
            <span>Notificaciones <span class="red_primary_font" style="font-weight: 500;" *ngIf="unreadNotifications > 0">
              ({{ unreadNotifications }})
            </span></span>
          </button>
          <button mat-menu-item [routerLink]="['/sam/vacation']"><mat-icon>houseboat</mat-icon> Gestión de Vacaciones </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)="logout()"><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>
    <mat-drawer #rightDrawer mode="over" position="end" class="prevent-select">
      <div *ngIf="totalNotifications.length == 0" class="no-notifications pt-64">
        <b>Aún no se han generado notificaciones para su usuario.</b>
      </div>
      <div *ngFor="let notification of totalNotifications; let i = index" class="notification-container" (click)="openNotification(notification.ID_NOTIFICACION, true)" 
      [ngClass]="{ notification_separator: i < totalNotifications.length - 1, not_readed: !notification.READED }">
        <div class="notification-decoration indigo_primary_background"></div>
        <div class="notification-content">
          <p class="notification-item-title">{{ notification.TITULO }}</p>
          <p class="notification-item-module">{{ notification.FECREG_DISP }} &bullet; {{ notification.READED ? 'L' : 'No l' }}eído</p>
          <p class="notification-item-body">{{ notification.CUERPO_NOTIFICACION }}</p>
        </div>
      </div>
    </mat-drawer>
    <div style="height: 100%; box-sizing: border-box; overflow: hidden;" (click)="closeNestedMenu()">
      <div class="push-notifications-list">
        <div class="push-notification-item push-notification-enter" *ngFor="let notification of notificationsForPanel"
        [id]="'notification-' + notification.ID_NOTIFICACION">
          <div class="push-notification-close" (click)="closeNotification(notification.ID_NOTIFICACION)">
            <mat-icon>chevron_right</mat-icon>
          </div>
          <div class="push-notification-content">
            <div class="push-notification-header">
              <div class="push-notification-title">{{ notification.TITULO }}</div>
              <div class="push-notification-date">{{ notification.FECHA }}</div>
            </div>
            <div class="push-notification-body">{{ notification.CUERPO_NOTIFICACION }}</div>
          </div>
          <button mat-button color="primary" (click)="openNotification(notification.ID_NOTIFICACION, false)">
            Abrir
          </button>
        </div>
      </div>
      <router-outlet></router-outlet>
    </div>
</mat-drawer-container>
<footer style="height: 48px;"></footer>