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

<main class="main-container" (window:resize)="onResize()">
  
  <!-- <header id="navigation" class="btn-navigate mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple
    (click)="goBack(1)">
      <mat-icon style="color: white">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </header> -->
 <app-btn-navigate navigate="goback" nameButton="Regresar" />

  <mat-card class="override-card override-elevation-z8 prevent-select animated fadeIn">
    <div class="horizontal-container">
      <div class="left-panel">
        <div class="new-file-button" (click)="openUploadDialog()" [ngClass]="{ new_file_button_enabled: !isFromModule && registerDocumentsEnabled, 
        new_file_button_disabled: isFromModule || !registerDocumentsEnabled }">
          <mat-icon class="mr-8">add</mat-icon>
          Registrar archivo
        </div>
        <div class="selector-button mt-20" [ngClass]="{ category_selected: category == 'my-files' }" (click)="updateCategory('my-files')">
          <mat-icon class="mr-8">folder_shared</mat-icon>
          Mis archivos
        </div>
        <div class="selector-button mt-8" [ngClass]="{ category_selected: category == 'shared' }" (click)="updateCategory('shared')">
          <mat-icon class="mr-8">group</mat-icon>
          Compartidos conmigo
        </div>
        <div class="selector-button mt-8" [ngClass]="{ category_selected: category == 'deleted' }" (click)="updateCategory('deleted')">
          <mat-icon class="mr-8">delete</mat-icon>
          Papelera
        </div>
      </div>
      <div class="content-container">
        <div class="actions-container">
          <mat-form-field appearance="outline" style="margin-bottom: -22px !important; width: 20%;" class="mr-4">
            <mat-label>Módulo</mat-label>
            <mat-select [formControl]="moduleControl">
              <mat-option>--Nungúno--</mat-option>
              <mat-option *ngFor="let module of modulesArr" [value]="module.code">
                {{ module.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" style="margin-bottom: -22px !important; width: 20%;" class="mr-4">
            <mat-label>Clasificación</mat-label>
            <mat-select [formControl]="clasificationControl">
              <mat-option>--Ningúna--</mat-option>
              <mat-option *ngFor="let clas of clasificationsArr" [value]="clas.code">
                {{ clas.category }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" style="margin-bottom: -22px !important; width: 20%;" class="mr-4">
            <mat-label>Rango de fechas</mat-label>
            <input matInput (click)="openDateRangePicker()" #dateRange [formControl]="datesRangeControl">
            <button [disabled]="dateRange.value == ''" mat-icon-button matSuffix (click)="clearDatesRange()">
              <mat-icon>close</mat-icon>
            </button>
          </mat-form-field>
          <mat-form-field appearance="outline" style="margin-bottom: -22px !important; width: 20%;" class="mr-4">
            <mat-label>Nombre del archivo</mat-label>
            <input matInput [formControl]="fileNameControl">
          </mat-form-field>
          <mat-form-field appearance="outline" style="margin-bottom: -22px !important; width: 20%;">
            <mat-label>Tipo de archivo</mat-label>
            <mat-select [formControl]="fileTypeControl">
              <mat-option>--Nungúno--</mat-option>
              <mat-optgroup *ngFor="let group of supportedFilesArr" [label]="group.category">
                <mat-option *ngFor="let item of group.files" [value]="item.ext">
                  <span *ngIf="item.name != ''" class="mr-4">{{ item.name }}</span>({{ item.ext }})
                </mat-option>
              </mat-optgroup>
            </mat-select>
          </mat-form-field>
          <a class="hidden" target="_blank" id="download"></a>
        </div>
        <div class="files-table-container">
          <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
            <mat-spinner align="center"></mat-spinner>
            <h3>Cargando datos ...</h3>
          </div>
          <div class="is-loading animated fadeIn fast" *ngIf="!isLoading && hasError">
            <mat-icon style="transform: scale(4.5);margin: 45px 0;" class="red_primary_font">error</mat-icon>
            <h3>{{ errorStr }}</h3>
          </div>
          <div class="file-table-results animated fadeIn" [ngClass]="{ hidden: !(!isLoading && !hasError && documentsManagementEnabled) }">
            <div class="file-table">
              <table mat-table [dataSource]="dataSource!" matSort class="animated fadeIn" 
              [style.display]="!isLoading ? 'revert' : 'none'">
                <ng-container matColumnDef="CODIGO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Código</th>
                  <td mat-cell *matCellDef="let row">{{ row.CODIGO }}</td>
                </ng-container>
                
                <ng-container matColumnDef="VERSION">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Versión</th>
                  <td mat-cell *matCellDef="let row">{{ row.VERSION }}</td>
                </ng-container>
                
                <ng-container matColumnDef="NOMBRE">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre</th>
                  <td mat-cell *matCellDef="let row">{{ row.NOMBRE }}</td>
                </ng-container>
                
                <ng-container matColumnDef="TAMANIO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Tamaño</th>
                  <td mat-cell *matCellDef="let row">{{ row.TAMANIO }}</td>
                </ng-container>
                
                <ng-container matColumnDef="USRREG">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Propietario</th>
                  <td mat-cell *matCellDef="let row">{{ row.USRREG }}</td>
                </ng-container>
                
                <ng-container matColumnDef="ACCESO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuarios con acceso</th>
                  <td mat-cell *matCellDef="let row">
                    <div class="avatars-container">
                      <div *ngFor="let user of row.ACCESO; let i = index" [style.background]="user.userColor" class="access-avatar" 
                      [ngClass]="{ separate: i < row.ACCESO.length - 1 }" [matTooltip]="user.userName" 
                      (click)="openAccessDialog(row.CODIGO, row.VERSION, row.NOMBRE, user.isTrigger, category == 'deleted')">
                        {{ user.userLabel }}
                      </div>
                    </div>
                  </td>
                </ng-container>
                
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-icon-button [matMenuTriggerFor]="menu" [disabled]="category == 'deleted'">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu>
                      <button mat-menu-item (click)="downloadFile(row.CODIGO, row.VERSION, row.NOMBRE)" [disabled]="!documentsEditorEnabled">
                        <mat-icon>download</mat-icon>
                        <span>Descargar archivo</span>
                      </button>
                      <button mat-menu-item (click)="openViewer(row.CODIGO, row.VERSION, row.NOMBRE)" [disabled]="!documentsViewerEnabled">
                        <mat-icon>open_in_new</mat-icon>
                        <span>Abrir archivo</span>
                      </button>
                      <button mat-menu-item (click)="openShareDialog(row.CODIGO, row.VERSION, row.NOMBRE)" [disabled]="!shareDocumentsEnabled">
                        <mat-icon>person_add</mat-icon>
                        <span>Compartir</span>
                      </button>
                      <button mat-menu-item (click)="openAssociationDialog(row.CODIGO, row.VERSION, row.NOMBRE)">
                        <mat-icon>list_alt</mat-icon>
                        <span>Órdenes de trabajo asociadas</span>
                      </button>
                      <button mat-menu-item *ngIf="category == 'my-files'" (click)="confirmDelete(row.CODIGO, row.VERSION, row.NOMBRE)">
                        <mat-icon>delete</mat-icon>
                        <span>Eliminar</span>
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
  
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell p-80 centre" colspan="100%">
                    <object data="assets/img/empty_data.svg" width="300"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
            <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
          </div>
          <div class="animated fadeIn" *ngIf="!isLoading && !hasError && !documentsManagementEnabled">
            <h3 class="ml-20"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </div>
      </div>
    </div>
  </mat-card>
</main>