Merge pull request #507 from GNS3/User-should-have-option-to-choose-name-for-exporting-project

User should have option to choose name for duplicated project (branch from node configurator to avoid conflicts)

src/app/app.module.ts

@@ -235,6 +235,7 @@ import { TracengTemplatesComponent } from './components/preferences/traceng/trac
 import { TracengService } from './services/traceng.service';
 import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
 import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component';
+import { ChooseNameDialogComponent } from './components/projects/choose-name-dialog/choose-name-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -396,7 +397,8 @@ if (environment.production) {
     TracengPreferencesComponent,
     TracengTemplatesComponent,
     TracengTemplateDetailsComponent,
-    QemuImageCreatorComponent
+    QemuImageCreatorComponent,
+    ChooseNameDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -512,7 +514,8 @@ if (environment.production) {
     ConfiguratorDialogDockerComponent,
     ConfiguratorDialogNatComponent,
     ConfiguratorDialogTracengComponent,
-    QemuImageCreatorComponent
+    QemuImageCreatorComponent,
+    ChooseNameDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/projects/choose-name-dialog/choose-name-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>Please choose name for exporting project</h1>
+
+<div class="modal-form-container">
+    <mat-form-field class="form-field">
+        <input matInput placeholder="Project name" [(ngModel)]="name" type="text">
+    </mat-form-field>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/projects/choose-name-dialog/choose-name-dialog.component.scss

@@ -0,0 +1,3 @@
+.form-field {
+    width: 100%;
+}

src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Server } from '../../../models/server';
+import { ProjectService } from '../../../services/project.service';
+import { Project } from '../../../models/project';
+
+
+@Component({
+    selector: 'app-choose-name-dialog',
+    templateUrl: './choose-name-dialog.component.html',
+    styleUrls: ['./choose-name-dialog.component.scss']
+})
+export class ChooseNameDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() project: Project
+    name: string;
+
+    constructor(
+        public dialogRef: MatDialogRef<ChooseNameDialogComponent>,
+        private projectService: ProjectService
+    ) {}
+
+    ngOnInit() {
+        this.name = this.project.name;
+    }
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+
+    onSaveClick() {
+        this.projectService.duplicate(this.server, this.project.project_id, this.name).subscribe(() => {
+            this.dialogRef.close();
+        });
+    }
+}

src/app/components/projects/projects.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule, MatSortModule, MatTableModule, MatTooltipModule, MatDialogModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+import { MatIconModule, MatSortModule, MatTableModule, MatTooltipModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatDialogRef } from '@angular/material';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -19,6 +19,8 @@ import { Project } from '../../models/project';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ProjectsFilter } from '../../filters/projectsFilter.pipe';
+import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dialog.component';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 
 describe('ProjectsComponent', () => {
   let component: ProjectsComponent;
@@ -51,9 +53,11 @@ describe('ProjectsComponent', () => {
         { provide: SettingsService, useClass: MockedSettingsService },
         ProgressService
       ],
-      declarations: [ProjectsComponent, ProjectsFilter],
+      declarations: [ProjectsComponent, ChooseNameDialogComponent, ProjectsFilter],
       schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
+    })
+    .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChooseNameDialogComponent] } })
+    .compileComponents();
 
     serverService = TestBed.get(ServerService);
     settingsService = TestBed.get(SettingsService);
@@ -93,26 +97,15 @@ describe('ProjectsComponent', () => {
     expect(mockedProjectService.delete).toHaveBeenCalled();
   });
 
-  it('should call project service after duplicate action', () => {
+  it('should call open dialog after duplicate action', () => {
-    spyOn(mockedProjectService, 'duplicate').and.returnValue(of());
+    spyOn(component.dialog, 'open').and.callThrough();
     let project = new Project();
     project.project_id = '1';
     project.status = 'closed';
 
     component.duplicate(project);
 
-    expect(mockedProjectService.duplicate).toHaveBeenCalled();
+    expect(component.dialog.open).toHaveBeenCalled();
-  });
-
-  it('should call refresh after duplicate action', () => {
-    spyOn(component, 'refresh');
-    let project = new Project();
-    project.project_id = '1';
-    project.status = 'closed';
-
-    component.duplicate(project);
-
-    expect(component.refresh).toHaveBeenCalled();
   });
 
   describe('ProjectComponent open', () => {

src/app/components/projects/projects.component.ts

@@ -16,6 +16,7 @@ import { ProgressService } from '../../common/progress/progress.service';
 
 import { ImportProjectDialogComponent } from './import-project-dialog/import-project-dialog.component';
 import { AddBlankProjectDialogComponent } from './add-blank-project-dialog/add-blank-project-dialog.component';
+import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dialog.component';
 
 @Component({
   selector: 'app-projects',
@@ -39,7 +40,7 @@ export class ProjectsComponent implements OnInit {
     private projectService: ProjectService,
     private settingsService: SettingsService,
     private progressService: ProgressService,
-    private dialog: MatDialog
+    public dialog: MatDialog
   ) {}
 
   ngOnInit() {
@@ -110,7 +111,14 @@ export class ProjectsComponent implements OnInit {
   }
 
   duplicate(project: Project) {
-    this.projectService.duplicate(this.server, project.project_id, project.name).subscribe(() => {
+    const dialogRef = this.dialog.open(ChooseNameDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = project;
+    dialogRef.afterClosed().subscribe(() => {
       this.refresh();
     });
   }