Delete function added to templates

src/app/app.module.ts

@@ -143,6 +143,8 @@ import { VmwareService } from './services/vmware.service';
 import { VmwareConfigurationService } from './services/vmware-configuration.service';
 import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component';
 import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component';
+import { DeleteConfirmationDialogComponent } from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component';
+import { DeleteTemplateComponent } from './components/preferences/common/delete-template-component/delete-template.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -229,7 +231,9 @@ if (environment.production) {
     VmwarePreferencesComponent,
     VmwareTemplatesComponent,
     VmwareTemplateDetailsComponent,
-    AddVmwareTemplateComponent
+    AddVmwareTemplateComponent,
+    DeleteConfirmationDialogComponent,
+    DeleteTemplateComponent
   ],
   imports: [
     BrowserModule,
@@ -304,7 +308,8 @@ if (environment.production) {
     ConfirmationDialogComponent,
     StyleEditorDialogComponent,
     TextEditorDialogComponent,
-    SymbolsComponent
+    SymbolsComponent,
+    DeleteConfirmationDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of cloudNodesTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of cloudNodesTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
 
 @Component({
@@ -15,6 +16,7 @@ import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 export class CloudNodesTemplatesComponent implements OnInit {
     server: Server;
     cloudNodesTemplates: CloudTemplate[];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -26,10 +28,22 @@ export class CloudNodesTemplatesComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
-
+            this.getTemplates();
-            this.builtInTemplatesService.getTemplates(this.server).subscribe((cloudNodesTemplates: CloudTemplate[]) => {
-                this.cloudNodesTemplates = cloudNodesTemplates.filter((elem) => elem.template_type === "cloud" && !elem.builtin);
-            });
         });
     }
+
+    getTemplates() {
+        this.cloudNodesTemplates = [];
+        this.builtInTemplatesService.getTemplates(this.server).subscribe((cloudNodesTemplates: CloudTemplate[]) => {
+            this.cloudNodesTemplates = cloudNodesTemplates.filter((elem) => elem.template_type === "cloud" && !elem.builtin);
+        });
+    }
+
+    deleteTemplate(template: CloudTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetHubsTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of ethernetHubsTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
 
 @Component({
@@ -15,6 +16,7 @@ import { BuiltInTemplatesService } from '../../../../../services/built-in-templa
 export class EthernetHubsTemplatesComponent implements OnInit {
     server: Server;
     ethernetHubsTemplates: EthernetHubTemplate[];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -26,10 +28,22 @@ export class EthernetHubsTemplatesComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
-
+            this.getTemplates();
-            this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetHubsTemplates: EthernetHubTemplate[]) => {
-                this.ethernetHubsTemplates = ethernetHubsTemplates.filter((elem) => elem.template_type === "ethernet_hub" && !elem.builtin);
-            });
         });
     }
+
+    getTemplates() {
+        this.ethernetHubsTemplates = [];
+        this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetHubsTemplates: EthernetHubTemplate[]) => {
+            this.ethernetHubsTemplates = ethernetHubsTemplates.filter((elem) => elem.template_type === "ethernet_hub" && !elem.builtin);
+        });
+    }
+    
+    deleteTemplate(template: EthernetHubTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetSwitchesTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of ethernetSwitchesTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
 
 @Component({
@@ -15,6 +16,7 @@ import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet
 export class EthernetSwitchesTemplatesComponent implements OnInit {
     server: Server;
     ethernetSwitchesTemplates: EthernetSwitchTemplate[];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -26,10 +28,22 @@ export class EthernetSwitchesTemplatesComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
-
+            this.getTemplates();
-            this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetSwitchesTemplates: EthernetSwitchTemplate[]) => {
-                this.ethernetSwitchesTemplates = ethernetSwitchesTemplates.filter((elem) => elem.template_type === "ethernet_switch" && !elem.builtin);
-            });
         });
     }
+
+    getTemplates() {
+        this.ethernetSwitchesTemplates = [];
+        this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetSwitchesTemplates: EthernetSwitchTemplate[]) => {
+            this.ethernetSwitchesTemplates = ethernetSwitchesTemplates.filter((elem) => elem.template_type === "ethernet_switch" && !elem.builtin);
+        });
+    }
+    
+    deleteTemplate(template: EthernetSwitchTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.html

@@ -0,0 +1,8 @@
+<span>Are you sure you want to delete template {{templateName}}?</span>
+<div mat-dialog-actions *ngIf="!isOpen">
+  <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+  <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
+    Yes
+  </button>
+</div>
+<div mat-dialog-actions *ngIf="isOpen"><button mat-button (click)="onNoClick()" color="accent">Ok</button></div>

src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+
+@Component({
+    selector: 'app-delete-confirmation-dialog',
+    templateUrl: './delete-confirmation-dialog.component.html',
+    styleUrls: ['./delete-confirmation-dialog.component.scss']
+})
+export class DeleteConfirmationDialogComponent implements OnInit {
+    templateName: string = '';
+
+    constructor(
+        public dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    ) {
+        this.templateName = data['templateName'];
+    }
+
+    ngOnInit() {}
+
+    onNoClick(): void {
+        this.dialogRef.close(false);
+    }
+    
+    onYesClick(): void {
+        this.dialogRef.close(true);
+    }
+}

src/app/components/preferences/common/delete-template-component/delete-template.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { TemplateService } from '../../../../services/template.service';
+import { MatDialog } from '@angular/material';
+import { DeleteConfirmationDialogComponent } from '../delete-confirmation-dialog/delete-confirmation-dialog.component';
+import { ToasterService } from '../../../../services/toaster.service';
+import { Server } from '../../../../models/server';
+
+@Component({
+    selector: 'app-delete-template',
+    templateUrl: './delete-template.component.html',
+    styleUrls: ['./delete-template.component.scss']
+})
+export class DeleteTemplateComponent {
+    @Input() server: Server;
+    @Output() deleteEvent = new EventEmitter<string>();
+ 
+    constructor(
+        private templateService: TemplateService,
+        private dialog: MatDialog,
+        private toasterService: ToasterService
+    ) {}
+
+    deleteItem(templateName, templateId) {
+        const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+            width: '300px',
+            height: '150px',
+            data: {
+                templateName: templateName
+            }
+        });
+      
+        dialogRef.afterClosed().subscribe((answer: boolean) => {
+            if (answer) {
+                this.templateService.deleteTemplate(this.server, templateId).subscribe((answer: boolean) => {
+                    if(answer) {
+                        this.deleteEvent.emit(templateId);
+                        this.toasterService.success(`Template ${templateName} deleted.`);
+                    }
+                });
+            }
+        });
+    }
+}

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of iosTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of iosTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { IosService } from '../../../../services/ios.service';
 import { IosTemplate } from '../../../../models/templates/ios-template';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 
 
 @Component({
@@ -15,6 +17,7 @@ import { IosTemplate } from '../../../../models/templates/ios-template';
 export class IosTemplatesComponent implements OnInit {
     server: Server;
     iosTemplates: IosTemplate[];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -26,10 +29,22 @@ export class IosTemplatesComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
-
+            this.getTemplates();
-            this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
-                this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips');
-            });
         });
     }
+
+    getTemplates() {
+        this.iosTemplates = [];
+        this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
+            this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips');
+        });
+    }
+    
+    deleteTemplate(template: VpcsTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of qemuTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of qemuTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { QemuTemplate } from '../../../../models/templates/qemu-template';
 import { QemuService } from '../../../../services/qemu.service';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 
 
 @Component({
@@ -15,6 +17,7 @@ import { QemuService } from '../../../../services/qemu.service';
 export class QemuVmTemplatesComponent implements OnInit {
     server: Server;
     qemuTemplates: QemuTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -27,14 +30,26 @@ export class QemuVmTemplatesComponent implements OnInit {
         const template_id = this.route.snapshot.paramMap.get("template_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
-            
+            this.getTemplates();
-            this.qemuService.getTemplates(server).subscribe((qemuTemplates: QemuTemplate[]) => {
+        });
-                qemuTemplates.forEach((template) => {
+    }
-                    if ((template.template_type === 'qemu') && !template.builtin) {
+
-                        this.qemuTemplates.push(template);
+    getTemplates() {
-                    }
+        this.qemuTemplates = [];
-                });
+        this.qemuService.getTemplates(this.server).subscribe((qemuTemplates: QemuTemplate[]) => {
+            qemuTemplates.forEach((template) => {
+                if ((template.template_type === 'qemu') && !template.builtin) {
+                    this.qemuTemplates.push(template);
+                }
             });
         });
     }
+
+    deleteTemplate(template: VpcsTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of virtualBoxTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of virtualBoxTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
 import { VirtualBoxService } from '../../../../services/virtual-box.service';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 
 
 @Component({
@@ -15,6 +17,7 @@ import { VirtualBoxService } from '../../../../services/virtual-box.service';
 export class VirtualBoxTemplatesComponent implements OnInit {
     server: Server;
     virtualBoxTemplates: VirtualBoxTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
@@ -26,14 +29,26 @@ export class VirtualBoxTemplatesComponent implements OnInit {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+            this.getTemplates();
+        });
+    }
 
-            this.virtualBoxService.getTemplates(this.server).subscribe((virtualBoxTemplates: VirtualBoxTemplate[]) => {
+    getTemplates(){
-                virtualBoxTemplates.forEach((template) => {
+        this.virtualBoxTemplates = [];
-                    if ((template.template_type === 'virtualbox') && !template.builtin) {
+        this.virtualBoxService.getTemplates(this.server).subscribe((virtualBoxTemplates: VirtualBoxTemplate[]) => {
-                        this.virtualBoxTemplates.push(template);
+            virtualBoxTemplates.forEach((template) => {
-                    }
+                if ((template.template_type === 'virtualbox') && !template.builtin) {
-                });
+                    this.virtualBoxTemplates.push(template);
+                }
             });
         });
     }
+
+    deleteTemplate(template: VpcsTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of vmwareTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of vmwareTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts

@@ -1,9 +1,13 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { VmwareTemplate } from '../../../../models/templates/vmware-template';
 import { VmwareService } from '../../../../services/vmware.service';
+import { MatDialog } from '@angular/material';
+import { DeleteConfirmationDialogComponent } from '../../common/delete-confirmation-dialog/delete-confirmation-dialog.component';
+import { ToasterService } from '../../../../services/toaster.service';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 
 
 @Component({
@@ -14,25 +18,40 @@ import { VmwareService } from '../../../../services/vmware.service';
 export class VmwareTemplatesComponent implements OnInit {
     server: Server;
     vmwareTemplates: VmwareTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private vmwareService: VmwareService
+        private vmwareService: VmwareService,
+        private dialog: MatDialog,
+        private toasterService: ToasterService
     ) {}
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+            this.getTemplates();
+        });
+    }
 
-            this.vmwareService.getTemplates(this.server).subscribe((vpcsTemplates: VmwareTemplate[]) => {
+    getTemplates() {
-                vpcsTemplates.forEach((template) => {
+        this.vmwareTemplates = [];
-                    if ((template.template_type === 'vmware') && !template.builtin) {
+        this.vmwareService.getTemplates(this.server).subscribe((vpcsTemplates: VmwareTemplate[]) => {
-                        this.vmwareTemplates.push(template);
+            vpcsTemplates.forEach((template) => {
-                    }
+                if ((template.template_type === 'vmware') && !template.builtin) {
-                });
+                    this.vmwareTemplates.push(template);
+                }
             });
         });
     }
+
+    deleteTemplate(template: VmwareTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html

@@ -8,10 +8,18 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of vpcsTemplates' routerLink="{{template.template_id}}">
+                <mat-list-item *ngFor='let template of vpcsTemplates'>
-                    {{template.name}}
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>
     </div>
 </div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.scss

@@ -2,3 +2,11 @@
     height: 36px;
     margin-top: 22px
 }
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts

@@ -1,9 +1,13 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { VpcsService } from '../../../../services/vpcs.service';
 import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
+import { MatDialog } from '@angular/material';
+import { DeleteConfirmationDialogComponent } from '../../common/delete-confirmation-dialog/delete-confirmation-dialog.component';
+import { ToasterService } from '../../../../services/toaster.service';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 
 
 @Component({
@@ -14,25 +18,40 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 export class VpcsTemplatesComponent implements OnInit {
     server: Server;
     vpcsTemplates: VpcsTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private vpcsService: VpcsService
+        private vpcsService: VpcsService,
+        private dialog: MatDialog,
+        private toasterService: ToasterService
     ) {}
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+            this.getTemplates();
+        });
+    }
 
-            this.vpcsService.getTemplates(this.server).subscribe((vpcsTemplates: VpcsTemplate[]) => {
+    getTemplates() {
-                vpcsTemplates.forEach((template) => {
+        this.vpcsTemplates = [];
-                    if ((template.template_type === 'vpcs') && !template.builtin) {
+        this.vpcsService.getTemplates(this.server).subscribe((vpcsTemplates: VpcsTemplate[]) => {
-                        this.vpcsTemplates.push(template);
+            vpcsTemplates.forEach((template) => {
-                    }
+                if ((template.template_type === 'vpcs') && !template.builtin) {
-                });
+                    this.vpcsTemplates.push(template);
+                }
             });
         });
     }
+
+    deleteTemplate(template: VpcsTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
 }

src/app/services/template.service.ts

@@ -14,4 +14,11 @@ export class TemplateService {
   list(server: Server): Observable<Template[]> {
     return this.httpServer.get<Template[]>(server, '/templates') as Observable<Template[]>;
   }
+
+  deleteTemplate(server: Server, templateId: string): Observable<boolean> {
+    return this.httpServer.delete(server, `/templates/${templateId}`, { observe: 'body' }).map(response => {
+        return true;
+    })
+    .catch((response) => { return Observable.throw(false)});
+  }
 }

src/app/services/vpcs.service.ts

@@ -3,6 +3,7 @@ import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { VpcsTemplate } from '../models/templates/vpcs-template';
 import { Observable } from 'rxjs';
+import { HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class VpcsService {