parent
852f894605
commit
c1b9a08f6c
|
|
@ -259,3 +259,46 @@ mat-card {
|
|||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.view-mode-buttons button.active {
|
||||
font-weight: bold;
|
||||
color: #3f51b5;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.result-card-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 4px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.result-card-list mat-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.result-card-list .result-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.result-card-list mat-card-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-card-list p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,147 +1,96 @@
|
|||
<h2 class="title" i18n="@@searchTitle">Búsqueda avanzada</h2>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
|
||||
<mat-select (selectionChange)="loadSelectedFilter($event.value)">
|
||||
<mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
|
||||
{{ savedFilter[0] }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-divider class="divider"></mat-divider>
|
||||
<div class="main-content">
|
||||
<div class="filters">
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
|
||||
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
|
||||
<mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
|
||||
<mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-label i18n="@@nameLabel">Nombre</mat-label>
|
||||
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
|
||||
</mat-form-field>
|
||||
|
||||
<ng-container *ngIf="selectedFilter1 === 'ou'">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
|
||||
<mat-select (selectionChange)="loadSelectedFilter($event.value)">
|
||||
<mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
|
||||
{{ savedFilter[0] }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-form-field [disabled]="selectedFilter1 === 'ou'">
|
||||
<mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
|
||||
<mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
|
||||
<mat-option value="organizational-unit" i18n="@@organizationalUnitOption">Unidad organizativa</mat-option>
|
||||
<mat-option value="classroom-group" i18n="@@classroomsGroupOption">Grupos de aulas</mat-option>
|
||||
<mat-option value="classroom" i18n="@@classroomOption">Aulas</mat-option>
|
||||
<mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-divider class="divider"></mat-divider>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@floorLabel" class="temp_filter">Planta</mat-label>
|
||||
<mat-select [(value)]="selectedFilter1">
|
||||
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
||||
<mat-option value="option1" i18n="@@option1">Planta 1</mat-option>
|
||||
<mat-option value="option2" i18n="@@option2">Planta 2</mat-option>
|
||||
<mat-option value="option3" i18n="@@option3">Planta 3</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="view-mode-buttons">
|
||||
<button mat-button (click)="changeViewMode('grid')" [class.active]="viewMode === 'grid'">
|
||||
<mat-icon>grid_view</mat-icon> Cuadrícula
|
||||
</button>
|
||||
<button mat-button (click)="changeViewMode('list')" [class.active]="viewMode === 'list'">
|
||||
<mat-icon>list</mat-icon> Lista
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<div class="main-content">
|
||||
<div class="filters">
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
|
||||
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
|
||||
<mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
|
||||
<mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- FILTROS CLIENTES -->
|
||||
|
||||
<ng-container *ngIf="selectedFilter1 === 'client'">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
|
||||
<mat-select multiple [(value)]="selectedFilterOS" >
|
||||
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
|
||||
<mat-option value="Windows 10 Education 1803 64 bits">Windows 10 Education 1803 64 bits</mat-option>
|
||||
<mat-option value="Ubuntu 18.04.1 LTS 64 bits">Ubuntu 18.04.1 LTS 64 bits</mat-option>
|
||||
<mat-option value="Ubuntu 16.04.4 LTS 64 bits">Ubuntu 16.04.4 LTS 64 bits</mat-option>
|
||||
<mat-option value="DATA">RESTO DE OPCIONES TBI</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-label i18n="@@nameLabel">Nombre</mat-label>
|
||||
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
|
||||
<mat-select multiple [(value)]="selectedFilterStatus">
|
||||
<mat-option value="off" i18n="@@offOption">off</mat-option>
|
||||
<mat-option value="initializing" i18n="@@initializingOption">initializing</mat-option>
|
||||
<mat-option value="oglive" i18n="@@ogliveOption">oglive</mat-option>
|
||||
<mat-option value="busy" i18n="@@busyOption">busy</mat-option>
|
||||
<mat-option value="linux" i18n="@@linuxOption">linux</mat-option>
|
||||
<mat-option value="linux_session" i18n="@@linuxSessionOption">linux_session</mat-option>
|
||||
<mat-option value="macos" i18n="@@macosOption">macos</mat-option>
|
||||
<mat-option value="windows" i18n="@@windowsOption">windows</mat-option>
|
||||
<mat-option value="windows_session" i18n="@@windowsSessionOption">windows_session</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-label class="temp_filter">IP</mat-label>
|
||||
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterIP">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="example-full-width" >
|
||||
<mat-label class="temp_filter">MAC</mat-label>
|
||||
<input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterMAC">
|
||||
</mat-form-field>
|
||||
|
||||
</ng-container>
|
||||
<button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
|
||||
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
|
||||
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
|
||||
<button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()">Añadir fichero PXE</button>
|
||||
</div>
|
||||
<div class="results">
|
||||
<ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
|
||||
<mat-grid-list cols="4" rowHeight="1:1">
|
||||
<mat-grid-tile *ngFor="let result of filteredResults">
|
||||
<mat-card
|
||||
class="result-card"
|
||||
(dblclick)="onDobleClick($event, result.uuid, result.type)"
|
||||
[ngClass]="{
|
||||
'red-card': result.type === 'client' && result.status === 'off',
|
||||
'green-card': result.type === 'client' && result.status === 'active'
|
||||
}"
|
||||
>
|
||||
<mat-checkbox
|
||||
[checked]="isSelected(result.name)"
|
||||
(change)="onCheckboxChange($event, result.name, result['@id'])"
|
||||
class="result-checkbox">
|
||||
</mat-checkbox>
|
||||
<mat-card-title class="result-title">{{ result.name }}</mat-card-title>
|
||||
<mat-card-content class="result-content">
|
||||
<p class="result-type">{{ result.type !== 'client' ? result.type : '' }}</p>
|
||||
<p class="result-ip" *ngIf="result.type === 'client'">{{ result.ip }}</p>
|
||||
<p class="result-mac" *ngIf="result.type === 'client'">{{ result.mac }}</p>
|
||||
<p class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</p>
|
||||
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits" class="result-internal-units">
|
||||
Unidades internas: {{ result.children.length }}
|
||||
</p>
|
||||
<p *ngIf="result.type !== 'client'" i18n="@@clients" class="result-clients">
|
||||
Clientes: {{ result.clients.length }}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div class="paginator-container">
|
||||
<mat-paginator [length]="length"
|
||||
[pageSize]="itemsPerPage"
|
||||
[pageIndex]="page"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-template #noResults>
|
||||
<p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
|
||||
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
|
||||
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
|
||||
<button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()">Añadir fichero PXE</button>
|
||||
</div>
|
||||
|
||||
<div class="results">
|
||||
<ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
|
||||
<ng-container *ngIf="viewMode === 'grid'">
|
||||
<mat-grid-list cols="4" rowHeight="1:1">
|
||||
<mat-grid-tile *ngFor="let result of filteredResults">
|
||||
<mat-card class="result-card">
|
||||
<mat-checkbox [checked]="isSelected(result.name)" (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox"></mat-checkbox>
|
||||
<mat-card-title class="result-title">{{ result.name }}</mat-card-title>
|
||||
<mat-card-content class="result-content">
|
||||
<p class="result-type">{{ result.type !== 'client' ? result.type : '' }}</p>
|
||||
<p class="result-ip" *ngIf="result.type === 'client'">{{ result.ip }}</p>
|
||||
<p class="result-mac" *ngIf="result.type === 'client'">{{ result.mac }}</p>
|
||||
<p class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</p>
|
||||
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits" class="result-internal-units">Unidades internas: {{ result.children.length }}</p>
|
||||
<p *ngIf="result.type !== 'client'" i18n="@@clients" class="result-clients">Clientes: {{ result.clients.length }}</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="viewMode === 'list'">
|
||||
<div class="result-list" *ngFor="let result of filteredResults">
|
||||
<mat-card class="result-card-list">
|
||||
<mat-checkbox [checked]="isSelected(result.name)" (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox"></mat-checkbox>
|
||||
<mat-card-title class="result-title">{{ result.name }}</mat-card-title>
|
||||
<mat-card-content class="result-content">
|
||||
<p class="result-type">{{ result.type !== 'client' ? result.type : '' }}</p>
|
||||
<p class="result-ip" *ngIf="result.type === 'client'">{{ result.ip }}</p>
|
||||
<p class="result-mac" *ngIf="result.type === 'client'">{{ result.mac }}</p>
|
||||
<p class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="paginator-container">
|
||||
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #noResults>
|
||||
<p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ export class AdvancedSearchComponent {
|
|||
filters: { [key: string]: string } = {};
|
||||
datePipe: DatePipe = new DatePipe('es-ES');
|
||||
|
||||
viewMode: 'grid' | 'list' = 'grid';
|
||||
|
||||
constructor(
|
||||
private dataService: DataService,
|
||||
public dialog: MatDialog,
|
||||
|
|
@ -75,6 +77,10 @@ export class AdvancedSearchComponent {
|
|||
this.getFilters();
|
||||
}
|
||||
|
||||
changeViewMode(mode: 'grid' | 'list'): void {
|
||||
this.viewMode = mode;
|
||||
}
|
||||
|
||||
getFilters(): void {
|
||||
this.dataService.getFilters().subscribe(
|
||||
data => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue