SAMPracticantes/sistema-mantenimiento-front/src/app/components/personal-management/employee/employee.component.html

<main class="main-container animated fadeIn" (window:resize)="onResize()">
    <header id="navigation" class="btn-navigate mb-8" [style]="changeOnTab && cardSmall ? 'width: calc(100% - 40%)!important' : ''">
        <div class="prev-page prevent-select indigo_primary_background
            mat-elevation-z8" matRipple [routerLink]="['/sam/GPRS']">
            <mat-icon style="color: white">arrow_back</mat-icon>
            <div class="page-name ml-4">Menú de Gestión del Personal</div>
        </div>
    </header>

    <mat-card class="override-card override-elevation-z8" [style]="changeOnTab && cardSmall ? 'width: calc(100% - 40%)!important' : ''">

        <mat-tab-group style="overflow: auto;" #tabGroup
            (selectedTabChange)="tabChange($event)">
            <mat-tab label="Empleados">
                <section class="override-section">
                    <nav class="override-nav">
                        <mat-card-title class="mat-card-title centre">Lista de
                            Empleados</mat-card-title>
                        <div class="override-actions">
                            <mat-form-field appearance="outline" class="w-300p
                                mr-8">
                                <mat-label>Buscador</mat-label>
                                <input matInput
                                    [(ngModel)]="txtBuscadorEmployees"
                                    (keyup)="applyFilterEmployees($event,'INP')"
                                    placeholder="Ingrese la palabra a buscar" />
                                <mat-icon *ngIf="txtBuscadorEmployees.length ===
                                    0"
                                    matSuffix>search</mat-icon>
                                <mat-icon *ngIf="txtBuscadorEmployees.length> 0"
                                    class="clickable" matTooltip="Eliminar
                                    filtro"
                                    (click)="applyFilterEmployees('', 'EST')"
                                    matSuffix>close</mat-icon>
                            </mat-form-field>
                            <div class="override-buttons">
                                <button mat-raised-button color="primary"
                                    matTooltip="Registrar Empleado"
                                    [disabled]="isLoading" *ngIf="!btnSmall"
                                    class="override-no-shadow mr-10"
                                    (click)="openDialog('REG')">
                                    <mat-icon>add</mat-icon> Nuevo
                                </button>
                                <button mat-mini-fab color="primary"
                                    matTooltip="Registrar Empleado"
                                    [disabled]="isLoading" *ngIf="btnSmall"
                                    class="override-no-shadow mr-8"
                                    (click)="openDialog('REG')">
                                    <mat-icon>add</mat-icon>
                                </button>
                                <button mat-mini-fab color="info"
                                    (click)="getEmployees()"
                                    [disabled]="isLoading"
                                    matTooltip="Actualizar
                                    Datos" class="override-no-shadow mr-10">
                                    <mat-icon>refresh</mat-icon>
                                </button>
                            </div>
                        </div>
                    </nav>
                    <!-- ALERTAS - CARGANDO FORMULARIOS -->
                    <div>
                        <div class="is-loading animated fadeIn fast"
                            *ngIf="isLoading">
                            <mat-spinner align="center"></mat-spinner>
                            <h3>Cargando datos ...</h3>
                        </div>
                        <mat-progress-bar mode="indeterminate"
                            *ngIf="isLoadingForm"></mat-progress-bar>
                    </div>
                    <!-- CONTENEDOR DE LA TABLA -->
                    <div class="override-table" style="height: calc(100% -
                        66px)!important;">
                        <!-- TABLA  -->
                        <table mat-table [dataSource]="dataSourceEmployees!"
                            matSort
                            class="animated fadeIn" [style.display]="isLoading ?
                            'none' : 'revert'">
                            <ng-container matColumnDef="NAME">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Nombre</th>
                                <td mat-cell *matCellDef="let element">{{
                                    element.NAME }}</td>
                            </ng-container>
                            <ng-container matColumnDef="WORKTEAMS">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Equipo de Trabajo</th>
                                <td mat-cell *matCellDef="let element">{{
                                    resourcesService.resizeText(element.WORKTEAMS, 37) }}</td>
                            </ng-container>
                            <ng-container matColumnDef="CONTRACT_TYPE">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Contrato</th>
                                <td mat-cell *matCellDef="let element">{{
                                    element.CONTRACT_TYPE }}</td>
                            </ng-container>
                            <ng-container matColumnDef="SPECIALITY">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Especialidad</th>
                                <td mat-cell *matCellDef="let element">{{
                                    element.SPECIALITY }}</td>
                            </ng-container>
                            <ng-container matColumnDef="STATUS">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Estado</th>
                                <td mat-cell *matCellDef="let element">
                                    <mat-chip-listbox>
                                        <mat-chip
                                            class="teal_primary_background"
                                            selected *ngIf="element.STATUS ===
                                            'Activo'"
                                            (click)="applyFilterEmployees(element.STATUS,
                                            'EST')"> {{ element.STATUS }}
                                        </mat-chip>
                                        <mat-chip class="red_dark_background"
                                            selected
                                            *ngIf="element.STATUS ===
                                            'Eliminado'"
                                            (click)="applyFilterEmployees(element.STATUS,
                                            'EST')"> {{ element.STATUS }}
                                        </mat-chip>
                                    </mat-chip-listbox>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="ACCIONES">
                                <th mat-header-cell *matHeaderCellDef>Acciones</th>
                                <td mat-cell *matCellDef="let element">
                                    <button mat-mini-fab color="accent" *ngIf="btnSmall && element.STATUS !== 'Eliminado'"
                                        [disabled]="isLoading" [matMenuTriggerFor]="menu"
                                        #menuTrigger class="override-no-shadow">
                                        <mat-icon>settings</mat-icon>
                                    </button>
                                    <button mat-mini-fab color="success" class="override-no-shadow" [disabled]="isLoading"
                                    (click)="openDialog('ACT', element)" *ngIf="btnSmall && element.STATUS == 'Eliminado'">
                                    <mat-icon>restore_from_trash</mat-icon>
                                  </button>
                                    <mat-menu #menu="matMenu">
                                        <button mat-menu-item
                                            (click)="openDialog('DET',
                                            element)">
                                            <mat-icon>visibility</mat-icon>
                                            Detalles
                                        </button>
                                        <button mat-menu-item
                                            (click)="openDialog('TAH',
                                            element)">
                                            <mat-icon>timer</mat-icon>
                                            Tasa Horaria
                                        </button>
                                        <button mat-menu-item
                                            (click)="openDialog('DOC',
                                            element)">
                                            <mat-icon>folder_open</mat-icon>
                                            Documentos
                                        </button>
                                        <button mat-menu-item
                                            (click)="openDialog('ORD',
                                            element)">
                                            <mat-icon>description</mat-icon>
                                            Órdenes
                                        </button>
                                        <button mat-menu-item
                                            (click)="openDialog('UPD',
                                            element)">
                                            <mat-icon>edit</mat-icon> Editar
                                        </button>
                                        <button mat-menu-item
                                            (click)="openDialog('DEL',
                                            element)">
                                            <mat-icon>delete</mat-icon> Eliminar
                                        </button>
                                    </mat-menu>
                                    <div *ngIf="!btnSmall">
                                        <button mat-mini-fab color="primary" class="override-no-shadow ml-4" matTooltip="Ver Detalles"
                                          (click)="openDialog('DET', element)" [disabled]="element.STATUS == 'Eliminado' || isLoadingForm">
                                          <mat-icon>visibility</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="accent" class="override-no-shadow ml-4" matTooltip="Ver Tasa Horaria"
                                          (click)="openDialog('TAH', element)" [disabled]="element.STATUS == 'Eliminado' || isLoadingForm">
                                          <mat-icon>timer</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="info" class="override-no-shadow ml-4" matTooltip="Ver Documentos"
                                          (click)="openDialog('DOC', element)" [disabled]="element.STATUS == 'Eliminado' || isLoadingForm">
                                          <mat-icon>folder_open</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="success" class="override-no-shadow ml-4" matTooltip="Ver Órdenes"
                                          (click)="openDialog('ORD', element)" [disabled]="element.STATUS == 'Eliminado' || isLoadingForm">
                                          <mat-icon>description</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="accent" class="override-no-shadow ml-4" matTooltip="Editar Empleado"
                                          (click)="openDialog('UPD', element)" [disabled]="element.STATUS == 'Eliminado' || isLoadingForm">
                                          <mat-icon>edit</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="warn" class="override-no-shadow ml-4" matTooltip="Eliminar Empleado"
                                          (click)="openDialog('DEL', element)" [disabled]="isLoadingForm" *ngIf="element.STATUS == 'Activo'">
                                          <mat-icon>delete</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="success" class="override-no-shadow ml-4" matTooltip="Activar Empleado"
                                          (click)="openDialog('ACT', element)" [disabled]="isLoadingForm" *ngIf="element.STATUS == 'Eliminado'">
                                          <mat-icon>restore_from_trash</mat-icon>
                                        </button>
                                      </div>
                                </td>
                            </ng-container>

                            <tr mat-header-row
                                *matHeaderRowDef="displayedColumnsEmployees"></tr>
                            <tr mat-row *matRowDef="let row; columns:
                                displayedColumnsEmployees"></tr>
                            <tr class="mat-row" *matNoDataRow>
                                <td class="mat-cell p-80 centre" colspan="12">
                                    <object data="assets/img/empty_data.svg"
                                        width="300"></object>
                                    <h2>Sin datos</h2>
                                </td>
                            </tr>
                        </table>
                    </div>
                </section>

            </mat-tab>

            <mat-tab label="Contratos">

                <section class="override-section">
                    <nav>
                        <mat-card-title class="mat-card-title centre">Lista de
                            Contratos por Empleado</mat-card-title>
                        <div class="override-actions">
                            <mat-form-field appearance="outline" class="w-300p
                                mr-8">
                                <mat-label>Buscador</mat-label>
                                <input matInput
                                    [(ngModel)]="txtBuscadorContracts"
                                    (keyup)="applyFilterContracts($event,'INP')"
                                    placeholder="Ingrese la palabra a buscar" />
                                <mat-icon *ngIf="txtBuscadorContracts.length ===
                                    0"
                                    matSuffix>search</mat-icon>
                                <mat-icon *ngIf="txtBuscadorContracts.length> 0"
                                    class="clickable" matTooltip="Eliminar
                                    filtro"
                                    (click)="applyFilterContracts('', 'EST')"
                                    matSuffix>close</mat-icon>
                            </mat-form-field>
                            <div class="override-buttons">
                                <button mat-mini-fab color="info"
                                    (click)="getContractsByEmployees()"
                                    [disabled]="isLoading"
                                    matTooltip="Actualizar
                                    Datos" class="override-no-shadow mr-10">
                                    <mat-icon>refresh</mat-icon>
                                </button>
                            </div>
                        </div>
                    </nav>
                    <!-- ALERTAS - CARGANDO FORMULARIOS -->
                    <div>
                        <div class="is-loading animated fadeIn fast"
                            *ngIf="isLoading">
                            <mat-spinner align="center"></mat-spinner>
                            <h3>Cargando datos ...</h3>
                        </div>
                        <mat-progress-bar mode="indeterminate"
                            *ngIf="isLoadingForm"></mat-progress-bar>
                    </div>
                    <!-- CONTENEDOR DE LA TABLA -->
                    <div class="override-table" style="height: calc(100% -
                        66px)!important;">
                        <!-- TABLA  -->
                        <table mat-table [dataSource]="dataSourceContracts!"
                            matSort #MatSort2="matSort"
                            class="animated fadeIn" [style.display]="isLoading ?
                            'none' : 'revert'">
                            <ng-container matColumnDef="NAME">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Nombre</th>
                                <td mat-cell *matCellDef="let element">{{
                                    element.NAME }}</td>
                            </ng-container>
                            <ng-container matColumnDef="CONTRACTS_COUNT">
                                <th mat-header-cell *matHeaderCellDef
                                    mat-sort-header>Cantidad
                                    Contratos</th>
                                <td mat-cell *matCellDef="let element">{{
                                    element.CONTRACTS_COUNT }}</td>
                            </ng-container>
                            <ng-container matColumnDef="ACCIONES">
                                <th mat-header-cell *matHeaderCellDef>Acciones</th>
                                <td mat-cell *matCellDef="let element">
                                        <button
                                            mat-mini-fab
                                            color="primary"
                                            class="override-no-shadow mr-4"
                                            [disabled]="isLoadingForm"
                                            matTooltip="Ver Historial"
                                            (click)="openDialog('HIS',
                                            element)">
                                            <mat-icon>history</mat-icon>
                                        </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row
                                *matHeaderRowDef="displayedColumnsContracts"></tr>
                            <tr mat-row *matRowDef="let row; columns:
                                displayedColumnsContracts"></tr>
                            <tr class="mat-row" *matNoDataRow>
                                <td class="mat-cell p-80 centre" colspan="12">
                                    <object data="assets/img/empty_data.svg"
                                        width="300"></object>
                                    <h2>Sin datos</h2>
                                </td>
                            </tr>
                        </table>
                    </div>
                </section>

            </mat-tab>

        </mat-tab-group>
        <!-- PAGINADOR -->
        <div class="override-paginator">
        <mat-paginator [pageSizeOptions]="[10, 50, 100]"
         [style.display]="changeOnTab ?
            'none' : 'revert'"></mat-paginator>

        <mat-paginator [pageSizeOptions]="[10, 50, 100]"
            #MatPaginator2="matPaginator"
            [style.display]="!changeOnTab ?
            'none' : 'revert'"></mat-paginator>
        </div>
    </mat-card>

</main>