Copy actions added

src/app/app-routing.module.ts

@@ -46,6 +46,10 @@ import { DockerTemplateDetailsComponent } from './components/preferences/docker/
 import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
 import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
 import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
+import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
+import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
+import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
+import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 
 const routes: Routes = [
   {
@@ -78,9 +82,11 @@ const routes: Routes = [
       { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent },
+      { path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy', component: CopyIosTemplateComponent },
 
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
+      { path: 'server/:server_id/preferences/qemu/templates/:template_id/copy', component: CopyQemuVmTemplateComponent },
       { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
 
@@ -101,10 +107,12 @@ const routes: Routes = [
 
       { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
       { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
+      { path: 'server/:server_id/preferences/docker/templates/:template_id/copy', component: CopyDockerTemplateComponent },
       { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent },
 
       { path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent },
       { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent },
+      { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent },
       { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent }
     ]
   },

src/app/app.module.ts

@@ -155,6 +155,10 @@ import { IouService } from './services/iou.service';
 import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
 import { IouConfigurationService } from './services/iou-configuration.service';
 import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
+import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
+import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
+import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
+import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -249,7 +253,11 @@ if (environment.production) {
     DockerTemplateDetailsComponent,
     IouTemplatesComponent,
     AddIouTemplateComponent,
-    IouTemplateDetailsComponent
+    IouTemplateDetailsComponent,
+    CopyQemuVmTemplateComponent,
+    CopyIosTemplateComponent,
+    CopyIouTemplateComponent,
+    CopyDockerTemplateComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,6 +1,8 @@
 <span>Are you sure you want to delete template {{templateName}}?</span>
 <div mat-dialog-actions>
-  <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+  <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>

src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html

@@ -0,0 +1,19 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Copy Docker container template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-form-field class="form-field">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="templateName" 
+                    placeholder="Name"
+                    ngDefaultControl/>
+            </mat-form-field><br/>
+            <div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
+        </div>
+    </div>
+</div>

src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.scss

@@ -0,0 +1,30 @@
+.form-field {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.radio-group {
+    margin-bottom: 20px;
+}
+
+.buttons-bar {
+    padding-top: 20px;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { DockerTemplate } from '../../../../models/templates/docker-template';
+import { DockerService } from '../../../../services/docker.service';
+
+
+@Component({
+    selector: 'app-copy-docker-template',
+    templateUrl: './copy-docker-template.component.html',
+    styleUrls: ['./copy-docker-template.component.scss']
+})
+export class CopyDockerTemplateComponent implements OnInit {
+    server: Server;
+    templateName: string = '';
+    dockerTemplate: DockerTemplate;
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private dockerService: DockerService,
+        private toasterService: ToasterService,
+        private router: Router
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.dockerService.getTemplate(this.server, template_id).subscribe((dockerTemplate: DockerTemplate) => {
+                this.dockerTemplate = dockerTemplate;
+                this.templateName = `Copy of ${this.dockerTemplate.name}`;
+            })
+
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName) {
+            this.dockerTemplate.template_id = uuid();
+            this.dockerTemplate.name = this.templateName;
+
+            this.dockerService.addTemplate(this.server, this.dockerTemplate).subscribe((template: DockerTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -10,9 +10,17 @@
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of dockerTemplates'>
                     <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-icon-button class="menu-button" [matMenuTriggerFor]="menu">
+                        <mat-icon>more_vert</mat-icon>
                     </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="deleteTemplate(template)">
+                            <mat-icon>delete</mat-icon><span>Delete</span>
+                        </button>
+                        <button mat-menu-item (click)="copyTemplate(template)">
+                            <mat-icon>content_copy</mat-icon><span>Copy</span>
+                        </button>
+                    </mat-menu>
                 </mat-list-item>
             </mat-nav-list>
         </div>

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

@@ -4,9 +4,9 @@
 }
 
 .name {
-    width: 90%;
+    width: 95%;
 }
 
-.delete-button {
-    width: 10%;
+.menu-button {
+    width: 5%;
 }

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
@@ -21,7 +21,8 @@ export class DockerTemplatesComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private dockerService: DockerService 
+        private dockerService: DockerService,
+        private router: Router 
     ) {}
 
     ngOnInit() {
@@ -50,4 +51,8 @@ export class DockerTemplatesComponent implements OnInit {
     onDeleteEvent() {
         this.getTemplates();
     }
+
+    copyTemplate(template: DockerTemplate) {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates', template.template_id, 'copy']);
+    }
 }

src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html

@@ -0,0 +1,19 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Copy IOS router template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-form-field class="form-field">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="templateName" 
+                    placeholder="Name"
+                    ngDefaultControl/>
+            </mat-form-field><br/>
+            <div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
+        </div>
+    </div>
+</div>

src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.scss

@@ -0,0 +1,30 @@
+.form-field {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.radio-group {
+    margin-bottom: 20px;
+}
+
+.buttons-bar {
+    padding-top: 20px;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { IosTemplate } from '../../../../models/templates/ios-template';
+import { IosService } from '../../../../services/ios.service';
+
+
+@Component({
+    selector: 'app-copy-ios-template',
+    templateUrl: './copy-ios-template.component.html',
+    styleUrls: ['./copy-ios-template.component.scss']
+})
+export class CopyIosTemplateComponent implements OnInit {
+    server: Server;
+    templateName: string = '';
+    iosTemplate: IosTemplate;
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iosService: IosService,
+        private toasterService: ToasterService,
+        private router: Router
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
+                this.iosTemplate = iosTemplate;
+                this.templateName = `Copy of ${this.iosTemplate.name}`;
+            })
+
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName) {
+            this.iosTemplate.template_id = uuid();
+            this.iosTemplate.name = this.templateName;
+
+            this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -10,9 +10,17 @@
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iosTemplates'>
                     <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-icon-button class="menu-button" [matMenuTriggerFor]="menu">
+                        <mat-icon>more_vert</mat-icon>
                     </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="deleteTemplate(template)">
+                            <mat-icon>delete</mat-icon><span>Delete</span>
+                        </button>
+                        <button mat-menu-item (click)="copyTemplate(template)">
+                            <mat-icon>content_copy</mat-icon><span>Copy</span>
+                        </button>
+                    </mat-menu>
                 </mat-list-item>
             </mat-nav-list>
         </div>

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

@@ -4,9 +4,9 @@
 }
 
 .name {
-    width: 90%;
+    width: 95%;
 }
 
-.delete-button {
-    width: 10%;
+.menu-button {
+    width: 5%;
 }

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { IosService } from '../../../../services/ios.service';
@@ -22,7 +22,8 @@ export class IosTemplatesComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private iosService: IosService
+        private iosService: IosService,
+        private router: Router
     ) {}
 
     ngOnInit() {
@@ -47,4 +48,8 @@ export class IosTemplatesComponent implements OnInit {
     onDeleteEvent() {
         this.getTemplates();
     }
+
+    copyTemplate(template: IosTemplate) {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates', template.template_id, 'copy']);
+    }
 }

src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html

@@ -0,0 +1,19 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Copy IOU device template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-form-field class="form-field">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="templateName" 
+                    placeholder="Name"
+                    ngDefaultControl/>
+            </mat-form-field><br/>
+            <div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
+        </div>
+    </div>
+</div>

src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.scss

@@ -0,0 +1,30 @@
+.form-field {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.radio-group {
+    margin-bottom: 20px;
+}
+
+.buttons-bar {
+    padding-top: 20px;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { IouTemplate } from '../../../../models/templates/iou-template';
+import { IouService } from '../../../../services/iou.service';
+
+
+@Component({
+    selector: 'app-copy-iou-template',
+    templateUrl: './copy-iou-template.component.html',
+    styleUrls: ['./copy-iou-template.component.scss']
+})
+export class CopyIouTemplateComponent implements OnInit {
+    server: Server;
+    templateName: string = '';
+    iouTemplate: IouTemplate;
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private qemuService: IouService,
+        private toasterService: ToasterService,
+        private router: Router
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.qemuService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
+                this.iouTemplate = iouTemplate;
+                this.templateName = `Copy of ${this.iouTemplate.name}`;
+            })
+
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName) {
+            this.iouTemplate.template_id = uuid();
+            this.iouTemplate.name = this.templateName;
+
+            this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html

@@ -10,9 +10,17 @@
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iouTemplates'>
                     <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-icon-button class="menu-button" [matMenuTriggerFor]="menu">
+                        <mat-icon>more_vert</mat-icon>
                     </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="deleteTemplate(template)">
+                            <mat-icon>delete</mat-icon><span>Delete</span>
+                        </button>
+                        <button mat-menu-item (click)="copyTemplate(template)">
+                            <mat-icon>content_copy</mat-icon><span>Copy</span>
+                        </button>
+                    </mat-menu>
                 </mat-list-item>
             </mat-nav-list>
         </div>

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.scss

@@ -4,9 +4,9 @@
 }
 
 .name {
-    width: 90%;
+    width: 95%;
 }
 
-.delete-button {
-    width: 10%;
+.menu-button {
+    width: 5%;
 }

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
@@ -21,7 +21,8 @@ export class IouTemplatesComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private iouService: IouService 
+        private iouService: IouService,
+        private router: Router
     ) {}
 
     ngOnInit() {
@@ -50,4 +51,8 @@ export class IouTemplatesComponent implements OnInit {
     onDeleteEvent() {
         this.getTemplates();
     }
+
+    copyTemplate(template: IouTemplate) {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates', template.template_id, 'copy']);
+    }
 }

src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html

@@ -0,0 +1,19 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Copy QEMU VM template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-form-field class="form-field">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="templateName" 
+                    placeholder="Name"
+                    ngDefaultControl/>
+            </mat-form-field><br/>
+            <div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div>
+        </div>
+    </div>
+</div>

src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.scss

@@ -0,0 +1,30 @@
+.form-field {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.radio-group {
+    margin-bottom: 20px;
+}
+
+.buttons-bar {
+    padding-top: 20px;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { QemuService } from '../../../../services/qemu.service';
+import { QemuBinary } from '../../../../models/qemu/qemu-binary';
+import { ToasterService } from '../../../../services/toaster.service';
+import { QemuTemplate } from '../../../../models/templates/qemu-template';
+import { v4 as uuid } from 'uuid';
+
+
+@Component({
+    selector: 'app-copy-qemu-virtual-machine-template',
+    templateUrl: './copy-qemu-vm-template.component.html',
+    styleUrls: ['./copy-qemu-vm-template.component.scss']
+})
+export class CopyQemuVmTemplateComponent implements OnInit {
+    server: Server;
+    qemuBinaries: QemuBinary[] = [];
+    templateName: string = '';
+    qemuTemplate: QemuTemplate;
+
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private qemuService: QemuService,
+        private toasterService: ToasterService,
+        private router: Router,
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
+                this.qemuTemplate = qemuTemplate;
+                this.templateName = `Copy of ${this.qemuTemplate.name}`;
+            })
+
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName) {
+            this.qemuTemplate.template_id = uuid();
+            this.qemuTemplate.name = this.templateName;
+
+            this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -10,9 +10,17 @@
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of qemuTemplates'>
                     <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-icon-button class="menu-button" [matMenuTriggerFor]="menu">
+                        <mat-icon>more_vert</mat-icon>
                     </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="deleteTemplate(template)">
+                            <mat-icon>delete</mat-icon><span>Delete</span>
+                        </button>
+                        <button mat-menu-item (click)="copyTemplate(template)">
+                            <mat-icon>content_copy</mat-icon><span>Copy</span>
+                        </button>
+                    </mat-menu>
                 </mat-list-item>
             </mat-nav-list>
         </div>

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

@@ -4,9 +4,9 @@
 }
 
 .name {
-    width: 90%;
+    width: 95%;
 }
 
-.delete-button {
-    width: 10%;
+.menu-button {
+    width: 5%;
 }

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { QemuTemplate } from '../../../../models/templates/qemu-template';
@@ -21,12 +21,12 @@ export class QemuVmTemplatesComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
-        private qemuService: QemuService 
+        private qemuService: QemuService,
+        private router: Router
     ) {}
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
-        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();
@@ -51,4 +51,8 @@ export class QemuVmTemplatesComponent implements OnInit {
     onDeleteEvent() {
         this.getTemplates();
     }
+
+    copyTemplate(template: QemuTemplate) {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates', template.template_id, 'copy']);
+    }
 }