ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-29 17:28:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filter option added

Browse Source
This commit is contained in:
piotrpekala7 2020-05-29 01:37:30 +02:00
parent d5e0c8271b
commit d15b4db9fe
3 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
View File

@ -18,10 +18,18 @@
<ng-template matStepLabel>{{actionTitle}}</ng-template>
<mat-card>
<div class="tableHeader">
<mat-form-field class="filter-field">
<input matInput [(ngModel)]="searchText" placeholder="Filter">
</mat-form-field>
<mat-select (selectionChange)="filterAppliances($event)" [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="category">
<mat-option *ngFor="let category of categories" [value]="category">
{{category}}
</mat-option>
</mat-select>
</div>
<mat-table
class="mat-table"
#table

8
src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss
View File

@ -1,3 +1,11 @@
.radio-button {
margin-bottom: 30px;
}
.tableHeader {
width: 100%;
}
.filter-field {
width: 100%;
}

17
src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
View File

@ -19,9 +19,11 @@ export class NewTemplateDialogComponent implements OnInit {
public actionTitle: string = 'Install appliance from server';
public searchText: string = '';
public allAppliances: Appliance[] = [];
public appliances: Appliance[] = [];
public categories: string[] = ['router', 'multilayer_switch', 'guest', 'firewall'];
public categories: string[] = ['all categories', 'router', 'multilayer_switch', 'guest', 'firewall'];
public category: string = 'all categories';
public displayedColumns: string[] = ['name', 'emulator', 'vendor'];
constructor(
@ -39,9 +41,22 @@ export class NewTemplateDialogComponent implements OnInit {
if (appliance.iou) appliance.emulator = 'Iou';
if (appliance.qemu) appliance.emulator = 'Qemu';
});
this.allAppliances = appliances;
});
}
filterAppliances(event) {
let temporaryAppliances = this.allAppliances.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
if (this.category === 'all categories' || !this.category) {
this.appliances = temporaryAppliances;
} else {
this.appliances = temporaryAppliances.filter(t => t.category === this.category);
}
}
setAction(action: string) {
this.action = action;
if (action === 'install') {