oggui/ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.html

115 lines
4.8 KiB
HTML

<app-loading [isLoading]="loading"></app-loading>
<mat-dialog-content>
<div class="header-container">
<div class="header-container-title">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2>Commits de Git en {{data.repositoryName}}</h2>
</div>
<div class="images-button-row">
<button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
</div>
</div>
<div class="filters-row">
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Repositorio</mat-label>
<mat-select [(ngModel)]="selectedRepository" (selectionChange)="onRepositoryChange()" [disabled]="loadingRepositories">
<mat-option *ngFor="let repo of repositories" [value]="repo">
{{ repo }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Rama</mat-label>
<mat-select [(ngModel)]="selectedBranch" (selectionChange)="onBranchChange()" [disabled]="loadingBranches || !selectedRepository">
<mat-option *ngFor="let branch of branches" [value]="branch">
{{ branch }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
</mat-form-field>
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchCommitsField"
text="Busca un commit por mensaje. Pulsa 'enter' para iniciar la búsqueda.">
<mat-label>Buscar commits</mat-label>
<input matInput placeholder="Búsqueda por mensaje" [(ngModel)]="filters['message']" (keyup.enter)="loadData()"
i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>Buscar por mensaje del commit</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="commitsTable"
text="Esta tabla muestra los commits disponibles.">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let commit">
<ng-container *ngIf="column.columnDef === 'hexsha'">
<code class="commit-id">
{{ column.cell(commit) }}
</code>
</ng-container>
<ng-container *ngIf="column.columnDef === 'message'">
<div class="commit-message">
{{ column.cell(commit) }}
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'stats_total'">
<div class="commit-stats">
{{ column.cell(commit) }}
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'tags'">
<div class="commit-tags">
<mat-chip *ngFor="let tag of commit.tags" color="primary" selected>
{{ tag }}
</mat-chip>
<span *ngIf="!commit.tags || commit.tags.length === 0" class="no-tags">
Sin tags
</span>
</div>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'hexsha' && column.columnDef !== 'message' && column.columnDef !== 'stats_total' && column.columnDef !== 'tags'">
{{ column.cell(commit) }}
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let commit" style="text-align: center;">
<div class="action-buttons">
<a [href]="'http://localhost:3100/oggit/' + selectedRepository + '/commit/' + commit.hexsha" target="_blank" matTooltip="Ver commit en Git">
<button mat-icon-button color="primary">
<mat-icon>open_in_new</mat-icon>
</button>
</a>
<button mat-icon-button color="primary" (click)="toggleAction(commit, 'view-details')" matTooltip="Ver detalles">
<mat-icon>info</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 40, 100]" (page)="onPageChange($event)">
</mat-paginator>
</div>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
</mat-dialog-actions>