Save as button added

src/app/app.module.ts

@@ -191,6 +191,7 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
 import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
+import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -312,7 +313,8 @@ if (environment.production) {
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
-    HelpComponent
+    HelpComponent,
+    SaveProjectDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -404,7 +406,8 @@ if (environment.production) {
     SymbolsComponent,
     DeleteConfirmationDialogComponent,
     HelpDialogComponent,
-    StartCaptureDialogComponent
+    StartCaptureDialogComponent,
+    SaveProjectDialogComponent
   ],
   bootstrap: [AppComponent]
 })

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

@@ -54,6 +54,7 @@ import { ToasterService } from '../../services/toaster.service';
 import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
 import { MatDialog } from '@angular/material';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
+import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 
 
 @Component({
@@ -402,7 +403,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   saveProject() {
-
+    const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
   }
 
   importProject() {

src/app/components/projects/save-project-dialog/save-project-dialog.component.css

@@ -0,0 +1,7 @@
+.file-name-form-field {
+    width: 100%;
+}
+
+.project-snackbar {
+    background: #2196F3;
+}

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

@@ -0,0 +1,23 @@
+<h1 mat-dialog-title>Save project as</h1>
+<form [formGroup]="projectNameForm" class="file-name-form">
+  <mat-form-field class="file-name-form-field">
+    <input
+      matInput
+      (keydown)="onKeyDown($event)"
+      type="text"
+      formControlName="projectName"
+      [ngClass]="{ 'is-invalid': form.projectName?.errors }"
+      placeholder="Please enter name"
+    />
+    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.required"
+      >Project name is required</mat-error
+    >
+    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.invalidName"
+      >Project name is incorrect</mat-error
+    >
+  </mat-form-field>
+  <div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Save project</button>
+  </div>
+</form>

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

@@ -0,0 +1,77 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Project } from '../../../models/project';
+import { Server } from '../../../models/server';
+import { ProjectService } from '../../../services/project.service';
+import { v4 as uuid } from 'uuid';
+import { ProjectNameValidator } from '../models/projectNameValidator';
+import { ToasterService } from '../../../services/toaster.service';
+
+
+@Component({
+  selector: 'app-save-project-dialog',
+  templateUrl: './save-project-dialog.component.html',
+  styleUrls: ['./save-project-dialog.component.css'],
+  providers: [ProjectNameValidator]
+})
+export class SaveProjectDialogComponent implements OnInit {
+  server: Server;
+  project: Project;
+  projectNameForm: FormGroup;
+  onAddProject = new EventEmitter<string>();
+
+  constructor(
+    public dialogRef: MatDialogRef<SaveProjectDialogComponent>,
+    private router: Router,
+    private dialog: MatDialog,
+    private projectService: ProjectService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private projectNameValidator: ProjectNameValidator
+  ) {
+    this.projectNameForm = this.formBuilder.group({
+      projectName: new FormControl(null, [Validators.required, projectNameValidator.get])
+    });
+  }
+
+  ngOnInit() {}
+
+  get form() {
+    return this.projectNameForm.controls;
+  }
+
+  onAddClick(): void {
+    if (this.projectNameForm.invalid) {
+      return;
+    }
+    this.projectService.list(this.server).subscribe((projects: Project[]) => {
+      const projectName = this.projectNameForm.controls['projectName'].value;
+      let existingProject = projects.find(project => project.name === projectName);
+
+      if (existingProject) {
+        this.toasterService.success(`Project with this name already exists.`);
+      } else {
+        this.addProject();
+      }
+    });
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  addProject(): void {
+    this.projectService.duplicate(this.server, this.project.project_id, this.projectNameForm.controls['projectName'].value).subscribe((project: Project) => {
+        this.dialogRef.close();
+        this.toasterService.success(`Project ${project.name} added`);
+    });
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Enter") {
+      this.onAddClick();
+    }
+  }
+}