Added saved filters modal

pull/6/head
Alvaro Puente Mella 2024-08-04 21:54:32 +02:00
parent a125e9b4e5
commit 80f0324717
3 changed files with 153 additions and 11 deletions

View File

@ -201,3 +201,6 @@ mat-spinner {
mat-card {
margin-bottom: 20px;
}
.temp_filter{color: red;
}

View File

@ -168,10 +168,21 @@
<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>
<!-- FILTROS UNIDAD ORGANIZATIVA-->
<ng-container *ngIf="selectedFilter1 === 'ou'">
<mat-form-field [disabled]="selectedFilter1 === 'ou'">
<mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
<mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
@ -181,29 +192,138 @@
<mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
</mat-select>
</mat-form-field>
<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>
<mat-label i18n="@@selectAnotherOptionLabel">Selecciona otra opción</mat-label>
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Planta</mat-label>
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
<mat-option value="option1" i18n="@@option1">Opción 1</mat-option>
<mat-option value="option2" i18n="@@option2">Opción 2</mat-option>
<mat-option value="option3" i18n="@@option3">Opción 3</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>
</ng-container>
<!-- FILTROS CLIENTES -->
<ng-container *ngIf="selectedFilter1 === 'client'">
<mat-form-field>
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
<mat-select multiple>
<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">DATA</mat-option>
<mat-option value="Windows Boot loader">Windows Boot loader</mat-option>
<mat-option value="Windows 7 Professional">Windows 7 Professional</mat-option>
<mat-option value="OpenGnsys Live">OpenGnsys Live</mat-option>
<mat-option value="Ubuntu 18.04 LTS 64 bits">Ubuntu 18.04 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1709 64 bits">Windows 10 Education 1709 64 bits</mat-option>
<mat-option value="Windows 7 Enterprise 64 bits">Windows 7 Enterprise 64 bits</mat-option>
<mat-option value="Windows 10 Education 1607 64 bits">Windows 10 Education 1607 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.5 LTS 64 bits">Ubuntu 16.04.5 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.2 LTS 64 bits">Ubuntu 16.04.2 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 64 bits">Windows 10 Education 64 bits</mat-option>
<mat-option value="CentOS release 6.3 (Final) 64 bits">CentOS release 6.3 (Final) 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.1 LTS 64 bits">Ubuntu 16.04.1 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 1803 64 bits">Windows 10 Enterprise 1803 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.3 LTS 64 bits">Ubuntu 16.04.3 LTS 64 bits</mat-option>
<mat-option value="Ubuntu precise (12.04.4 LTS)">Ubuntu precise (12.04.4 LTS)</mat-option>
<mat-option value="GRUB2 Loader">GRUB2 Loader</mat-option>
<mat-option value="Mac OS X 10.9.5 64 bits">Mac OS X 10.9.5 64 bits</mat-option>
<mat-option value="Mac OS X 10.8.3 recovery">Mac OS X 10.8.3 recovery</mat-option>
<mat-option value="Mac OS X 10.13.6">Mac OS X 10.13.6</mat-option>
<mat-option value="Windows 10 Education 1703 64 bits">Windows 10 Education 1703 64 bits</mat-option>
<mat-option value="Windows 7 Professional 64 bits">Windows 7 Professional 64 bits</mat-option>
<mat-option value="Ubuntu 14.04.4 LTS 64 bits">Ubuntu 14.04.4 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1511 64 bits">Windows 10 Education 1511 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.2 LTS 64 bits">Ubuntu 18.04.2 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1809 64 bits">Windows 10 Education 1809 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.6 LTS 64 bits">Ubuntu 16.04.6 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 14.04.5 LTS 64 bits">Ubuntu 14.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1903 64 bits">Windows 10 Education 1903 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 1903 64 bits">Windows 10 Enterprise 1903 64 bits</mat-option>
<mat-option value="Windows 10 Pro 1903 64 bits">Windows 10 Pro 1903 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.3 LTS 64 bits">Ubuntu 18.04.3 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1909 64 bits">Windows 10 Education 1909 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.3 LTS">Ubuntu 18.04.3 LTS</mat-option>
<mat-option value="Windows 10 Enterprise 1909 64 bits">Windows 10 Enterprise 1909 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.4 LTS 64 bits">Ubuntu 18.04.4 LTS 64 bits</mat-option>
<mat-option value="Windows Boot loader 64 bits">Windows Boot loader 64 bits</mat-option>
<mat-option value="Windows 10 Education 2004 64 bits">Windows 10 Education 2004 64 bits</mat-option>
<mat-option value="Ubuntu 20.04 LTS 64 bits">Ubuntu 20.04 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.1 LTS 64 bits">Ubuntu 20.04.1 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise LTSC 2019 Evaluation 1809 64 bits">Windows 10 Enterprise LTSC 2019 Evaluation 1809 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.5 LTS 64 bits">Ubuntu 18.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 2009 64 bits">Windows 10 Education 2009 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.2 LTS 64 bits">Ubuntu 20.04.2 LTS 64 bits</mat-option>
<mat-option value="GRUB2 Loader 64 bits">GRUB2 Loader 64 bits</mat-option>
<mat-option value="Windows 10 Education 2009">Windows 10 Education 2009</mat-option>
<mat-option value="Debian GNU/Linux 8 (jessie) 64 bits">Debian GNU/Linux 8 (jessie) 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 2009 64 bits">Windows 10 Enterprise 2009 64 bits</mat-option>
<mat-option value="Windows 10 Pro 2009 64 bits">Windows 10 Pro 2009 64 bits</mat-option>
<mat-option value="Windows 10 Pro 1909 64 bits">Windows 10 Pro 1909 64 bits</mat-option>
<mat-option value="Windows 10 Home 2009 64 bits">Windows 10 Home 2009 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.3 LTS 64 bits">Ubuntu 20.04.3 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.4 LTS 64 bits">Ubuntu 20.04.4 LTS 64 bits</mat-option>
<mat-option value="Microsoft Windows XP">Microsoft Windows XP</mat-option>
<mat-option value="Ubuntu 22.04 LTS 64 bits">Ubuntu 22.04 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.1 LTS 64 bits">Ubuntu 22.04.1 LTS 64 bits</mat-option>
<mat-option value="EducaAndOS 20.04 64 bits">EducaAndOS 20.04 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.5 LTS 64 bits">Ubuntu 20.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Pro N 2009 64 bits">Windows 10 Pro N 2009 64 bits</mat-option>
<mat-option value="Guadalinex Edu 20.04 64 bits">Guadalinex Edu 20.04 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.6 LTS 64 bits">Ubuntu 18.04.6 LTS 64 bits</mat-option>
<mat-option value="elementary OS 6 Odin 64 bits">elementary OS 6 Odin 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.2 LTS 64 bits">Ubuntu 22.04.2 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.3 LTS 64 bits">Ubuntu 22.04.3 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Pro for Workstations 2009 64 bits">Windows 10 Pro for Workstations 2009 64 bits</mat-option>
<mat-option value="Ubuntu 23.10 64 bits">Ubuntu 23.10 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.4 LTS 64 bits">Ubuntu 22.04.4 LTS 64 bits</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
<mat-select multiple>
<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" i18n>
</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" i18n >
</mat-form-field>
</ng-container>
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@saveFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</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">
<mat-checkbox (change)="onCheckboxChange($event, result.name)"></mat-checkbox>
<mat-card-title>{{ result.name }}</mat-card-title>
<mat-card-content>
<p>{{ result.type }}</p>

View File

@ -45,6 +45,7 @@ export class GroupsComponent implements OnInit {
itemsPerPage: number = 10;
page: number = 1;
pageSizeOptions: number[] = [5, 10, 25, 100];
selectedElements: string[] = [];
constructor(
private dataService: DataService,
@ -359,5 +360,23 @@ export class GroupsComponent implements OnInit {
});
}
onCheckboxChange(event: any, name: string) {
if (event.checked) {
this.selectedElements.push(name);
} else {
const index = this.selectedElements.indexOf(name);
if (index > -1) {
this.selectedElements.splice(index, 1);
}
}
console.log(this.selectedElements);
}
sendActions() {
alert('Send actions:'+ this.selectedElements);
}
}