Filter option added

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

@@ -18,9 +18,17 @@
         <ng-template matStepLabel>{{actionTitle}}</ng-template>
 
         <mat-card>
-            <mat-form-field class="filter-field">
+            <div class="tableHeader">
-                <input matInput [(ngModel)]="searchText" placeholder="Filter">
+                <mat-form-field class="filter-field">
-            </mat-form-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" 

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

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

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

@@ -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') {