Dialog for editing project properties added

src/app/app.module.ts

@@ -206,6 +206,7 @@ import { ImportConfigActionComponent } from './components/project-map/context-me
 import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
 import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
 import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
+import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -340,7 +341,8 @@ if (environment.production) {
     ImportConfigActionComponent,
     ConsoleDeviceActionBrowserComponent,
     ChangeSymbolDialogComponent,
-    ChangeSymbolActionComponent
+    ChangeSymbolActionComponent,
+    EditProjectDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -438,7 +440,8 @@ if (environment.production) {
     ConfigEditorDialogComponent,
     SaveProjectDialogComponent,
     InfoDialogComponent,
-    ChangeSymbolDialogComponent
+    ChangeSymbolDialogComponent,
+    EditProjectDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts

@@ -20,7 +20,7 @@ export class EditStyleActionComponent implements OnInit {
 
   editStyle() {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
-      width: '300px',
+      width: '800px',
       autoFocus: false
     });
     let instance = dialogRef.componentInstance;

src/app/components/project-map/project-map.component.html

@@ -54,6 +54,10 @@
           <mat-icon>save</mat-icon>
           <span>Save project as</span>
         </button>
+        <button mat-menu-item (click)="editProject()">
+          <mat-icon>edit</mat-icon>
+          <span>Edit project</span>
+        </button>
         <button mat-menu-item (click)="exportProject()">
           <mat-icon>call_made</mat-icon>
           <span>Export portable project</span>

src/app/components/project-map/project-map.component.ts

@@ -58,6 +58,7 @@ import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-di
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
 import { MapSettingsService } from '../../services/mapsettings.service';
+import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
 
 
 @Component({
@@ -460,6 +461,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     instance.project = this.project;
   }
 
+  editProject() {
+    const dialogRef = this.dialog.open(EditProjectDialogComponent, {
+      width: '500px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
   importProject() {
     let uuid: string = '';
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {

src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts

@@ -23,6 +23,8 @@ export class MockedProjectService {
       auto_close: false,
       auto_open: false,
       auto_start: false,
+      drawing_grid_size: 10,
+      grid_size: 10,
       filename: 'blank',
       name: 'blank',
       path: '',

src/app/components/projects/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -15,6 +15,8 @@ describe('ConfirmationDialogComponent', () => {
     auto_close: false,
     auto_open: false,
     auto_start: false,
+    drawing_grid_size: 10,
+    grid_size: 10,
     filename: 'blank',
     name: 'blank',
     path: '',

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html

@@ -0,0 +1,40 @@
+<h1 mat-dialog-title>Edit project</h1>
+
+<form [formGroup]="formGroup">
+    <mat-form-field class="form-field">
+        <input matInput formControlName="projectName" placeholder="Project name" type="text">
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <input matInput formControlName="width" placeholder="Scene width (px)" type="number">
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <input matInput formControlName="height" placeholder="Scene height (px)" type="number">
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
+    </mat-form-field>
+</form>
+
+<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
+    Open this project in the background when GNS3 server starts
+</mat-checkbox>
+
+<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
+    Start all nodes when this project is opened
+</mat-checkbox>
+
+<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="!project.auto_close">
+    Leave this project running in the background after closing
+</mat-checkbox>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss

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

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, Injectable } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Server } from '../../../models/server';
+import { Project } from '../../../models/project';
+import { ToasterService } from '../../../services/toaster.service';
+import { NonNegativeValidator } from '../../../validators/non-negative-validator';
+import { ProjectService } from '../../../services/project.service';
+
+@Component({
+  selector: 'app-edit-project-dialog',
+  templateUrl: './edit-project-dialog.component.html',
+  styleUrls: ['./edit-project-dialog.component.scss']
+})
+export class EditProjectDialogComponent implements OnInit {
+  server: Server;
+  project: Project;
+  formGroup: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<EditProjectDialogComponent>,
+    private formBuilder: FormBuilder,
+    private projectService: ProjectService,
+    private toasterService: ToasterService,
+    private nonNegativeValidator: NonNegativeValidator
+  ) {
+    this.formGroup = this.formBuilder.group({
+      projectName: new FormControl('', [Validators.required]),
+      width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      height: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get])
+    });
+  }
+
+  ngOnInit() {
+    this.formGroup.controls['projectName'].setValue(this.project.name);
+    this.formGroup.controls['width'].setValue(this.project.scene_width);
+    this.formGroup.controls['height'].setValue(this.project.scene_height);
+    this.formGroup.controls['nodeGridSize'].setValue(this.project.grid_size);
+    this.formGroup.controls['drawingGridSize'].setValue(this.project.drawing_grid_size);
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+
+  onYesClick() {
+    if (this.formGroup.valid) {
+        this.project.name = this.formGroup.get('projectName').value;
+        this.project.scene_width = this.formGroup.get('width').value;
+        this.project.scene_height = this.formGroup.get('height').value;
+        this.project.drawing_grid_size = this.formGroup.get('drawingGridSize').value;
+        this.project.grid_size = this.formGroup.get('nodeGridSize').value;
+
+        this.projectService.update(this.server, this.project).subscribe((project: Project) => {
+            this.toasterService.success(`Project ${project.name} updated.`);
+            this.onNoClick();
+        })
+    } else {
+        this.toasterService.error(`Fill all required fields with correct values.`);
+    }
+  }
+}

src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts

@@ -28,6 +28,8 @@ export class MockedProjectService {
       auto_close: false,
       auto_open: false,
       auto_start: false,
+      drawing_grid_size: 10,
+      grid_size: 10,
       filename: 'blank',
       name: 'blank',
       path: '',

src/app/models/project.ts

@@ -2,7 +2,9 @@ export class Project {
   auto_close: boolean;
   auto_open: boolean;
   auto_start: boolean;
+  drawing_grid_size: number;
   filename: string;
+  grid_size: number;
   name: string;
   path: string;
   project_id: string;

src/app/services/project.service.ts

@@ -45,6 +45,19 @@ export class ProjectService {
     return this.httpServer.post<Project>(server, `/projects`, { name: project_name, project_id: project_id });
   }
 
+  update(server: Server, project: Project) : Observable<Project> {
+    return this.httpServer.put<Project>(server, `/projects/${project.project_id}`, {
+      auto_close: project.auto_close,
+      auto_open: project.auto_open,
+      auto_start: project.auto_start,
+      drawing_grid_size: project.drawing_grid_size,
+      grid_size: project.grid_size,
+      name: project.name,
+      scene_width: project.scene_width,
+      scene_height: project.scene_height
+    });
+  }
+
   delete(server: Server, project_id: string): Observable<any> {
     return this.httpServer.delete(server, `/projects/${project_id}`);
   }