SAMPracticantes/sistema-mantenimiento-front/src/app/components/personal-management/subcontratist/subcontratist.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="Subcontratistas" >
            <section class="override-section">
                <nav class="override-nav">
                    <mat-card-title class="mat-card-title centre">Lista de
                        Subcontratistas</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)]="txtBuscadorSubcontratists"
                                (keyup)="applyFilterSubcontratists($event,'INP')"
                                placeholder="Ingrese la palabra a buscar" />
                            <mat-icon *ngIf="txtBuscadorSubcontratists.length === 0"
                                matSuffix>search</mat-icon>
                            <mat-icon *ngIf="txtBuscadorSubcontratists.length> 0"
                                class="clickable" matTooltip="Eliminar
                                filtro"
                                (click)="applyFilterSubcontratists('', 'EST')" matSuffix>close</mat-icon>
                        </mat-form-field>
                        <div class="override-buttons">
                            <button mat-raised-button color="primary"
                                matTooltip="Registrar Subcontratista"
                                [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 Subcontratista"
                                [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)="getSubcontratists()"
                                [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]="dataSourceSubcontratists!" 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="INTERVENTIONS_COUNT">
                            <th mat-header-cell *matHeaderCellDef
                                mat-sort-header>Cantidad
                                Intervenciones</th>
                            <td mat-cell *matCellDef="let element">{{
                                element.INTERVENTIONS_COUNT }}</td>
                        </ng-container>
                        <ng-container matColumnDef="UPDATE_DATE">
                            <th mat-header-cell *matHeaderCellDef
                                mat-sort-header>Fecha
                                Registro</th>
                            <td mat-cell *matCellDef="let element">
                                {{element.UPDATE_DATE != null ? element.UPDATE_DATE : element.REGISTER_DATE}}
                            </td>
                        </ng-container>
                        <ng-container matColumnDef="UPDATED_BY_USER">
                            <th mat-header-cell *matHeaderCellDef
                                mat-sort-header>Usuario
                                Registró</th>
                            <td mat-cell *matCellDef="let element">
                                {{element.UPDATED_BY_USER != null ? element.UPDATED_BY_USER : element.REGISTERED_BY_USER}}
                            </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)="applyFilterSubcontratists(element.STATUS,
                                        'EST')"> {{ element.STATUS }}
                                    </mat-chip>
                                    <mat-chip class="red_dark_background"
                                        selected
                                        *ngIf="element.STATUS ===
                                        'Eliminado'"
                                        (click)="applyFilterSubcontratists(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('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 mr-4"
                                        [disabled]="element.STATUS ==
                                        'Eliminado'
                                        || isLoadingForm"
                                        matTooltip="Ver Detalles"
                                        (click)="openDialog('DET',
                                        element)">
                                        <mat-icon>visibility</mat-icon>
                                    </button>
                                    <button
                                        mat-mini-fab
                                        color="accent"
                                        class="override-no-shadow mr-4"
                                        [disabled]="element.STATUS ==
                                        'Eliminado'
                                        || isLoadingForm"
                                        matTooltip="Editar Subcontratista"
                                        (click)="openDialog('UPD',
                                        element)">
                                        <mat-icon>edit</mat-icon>
                                    </button>
                                    <button
                                        mat-mini-fab
                                        color="warn"
                                        class="override-no-shadow mr-4"
                                        [disabled]="isLoadingForm" *ngIf="element.STATUS == 'Activo'"
                                        matTooltip="Eliminar Subcontratista"
                                        (click)="openDialog('DEL',
                                        element)">
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                    <button
                                        mat-mini-fab
                                        color="success"
                                        class="override-no-shadow mr-4"
                                        [disabled]="isLoadingForm" *ngIf="element.STATUS == 'Eliminado'"
                                        matTooltip="Activar Subcontratista"
                                        (click)="openDialog('ACT',
                                        element)">
                                        <mat-icon>restore_from_trash</mat-icon>
                                    </button>
                                </div>
                            </td>
                        </ng-container>

                        <tr mat-header-row
                            *matHeaderRowDef="displayedColumnsSubcontratists"></tr>
                        <tr mat-row *matRowDef="let row; columns:
                            displayedColumnsSubcontratists"></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 Subcontratista</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)="getContractsBySubcontratists()"
                                [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="accent"
                                    *ngIf="btnSmall"
                                    [disabled]="isLoading" [matMenuTriggerFor]="menu"
                                    #menuTrigger class="override-no-shadow">
                                    <mat-icon>settings</mat-icon>
                                </button>
                                <mat-menu #menu="matMenu">
                                    <button mat-menu-item
                                        (click)="openDialog('HIS',
                                        element)">
                                        <mat-icon>visibility</mat-icon> Historial
                                    </button>
                                   <!-- Pendiente por modulo gestión de adquisiciónes -->
                                    <button mat-menu-item
                                    (click)="openDialog('PRO')">
                                        <mat-icon>local_shipping</mat-icon> Proveedores
                                    </button>
                                </mat-menu>

                                <div *ngIf="!btnSmall">
                                    <button
                                        mat-mini-fab
                                        color="primary"
                                        class="override-no-shadow mr-4"
                                        [disabled]="isLoadingForm"
                                        matTooltip="Ver Historial"
                                        (click)="openDialog('HIS',
                                        element)">
                                        <mat-icon>visibility</mat-icon>
                                    </button>
                                    <!-- Pendiente por modulo gestión de adquisiciónes -->
                                    <button
                                        mat-mini-fab
                                        color="accent"
                                        class="override-no-shadow mr-4"
                                        [disabled]="isLoadingForm"
                                        (click)="openDialog('PRO')"
                                        matTooltip="Ver Ficha Proveedores">
                                        <mat-icon>local_shipping</mat-icon>
                                    </button>
                                </div>
                            </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 -->
    <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"  [style.display]="changeOnTab ?
    'none' : 'revert'"></mat-paginator>

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

</main>