Initial implementation of adding blank projects

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

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

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

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>Add blank project</h1>
+<form [formGroup]="projectNameForm" class="file-name-form">
+    <mat-form-field class="file-name-form-field">
+        <input matInput 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">Add project</button>
+    </div>
+</form>

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

@@ -0,0 +1,118 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AddBlankProjectDialogComponent } from "./add-blank-project-dialog.component";
+import { Server } from "../../../models/server";
+import { FormBuilder, ReactiveFormsModule, FormsModule, Validators, FormControl } from '@angular/forms';
+import { MatDialogModule, MatInputModule, MatFormFieldModule, MatDialogRef, MAT_DIALOG_DATA, MatSnackBarModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DebugElement } from '@angular/core';
+import { Validator } from '../models/validator';
+import { ProjectService } from '../../../services/project.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { of } from 'rxjs/internal/observable/of';
+import { Project } from '../../../models/project';
+
+export class MockedProjectService {
+    public projects: Project[] = [{
+        auto_close: false,
+        auto_open: false,
+        auto_start: false,
+        filename: "blank",
+        name: "blank",
+        path: "",
+        project_id: "",
+        scene_height: 100,
+        scene_width: 100,
+        status: "opened",
+        readonly: false,
+        show_interface_labels: false,
+        show_layers: false,
+        show_grid: false,
+        snap_to_grid: false,
+    }];
+  
+    list(server: Server) {
+      return of(this.projects);
+    }
+
+    add(server: Server, projectname: string, uuid: string){
+        return of(this.projects.pop);
+    }
+}
+
+describe('AddBlankProjectDialogComponent', () => {
+    let component: AddBlankProjectDialogComponent;
+    let fixture: ComponentFixture<AddBlankProjectDialogComponent>;
+    let server: Server;
+    let formBuilder: FormBuilder;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatDialogModule,
+                MatFormFieldModule,
+                MatInputModule,
+                NoopAnimationsModule,
+                FormsModule,
+                ReactiveFormsModule,
+                MatSnackBarModule
+            ],
+            providers: [
+                { provide: MatDialogRef },
+                { provide: MAT_DIALOG_DATA },
+                { provide: ProjectService, useClass: MockedProjectService },
+                { provide: ToasterService }
+            ],
+            declarations : [AddBlankProjectDialogComponent]
+        })
+        .compileComponents();
+
+        server = new Server();
+        server.ip = "localhost";
+        server.port = 80;
+        formBuilder = new FormBuilder();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddBlankProjectDialogComponent);
+        component = fixture.componentInstance;
+        component.server = server;
+        component.projectNameForm = formBuilder.group({
+            projectName: new FormControl(null, [Validators.required, Validator.projectNameValidator])
+          });
+        component.projectNameForm.controls['projectName'].setValue("ValidName");
+        fixture.detectChanges();
+    })
+
+    it('should be created', () => {
+        expect(fixture).toBeDefined();
+        expect(component).toBeTruthy();
+    });
+
+    it('should call adding project when name is valid', () => {
+        spyOn(component, "addProject");
+
+        component.onAddClick();
+
+        expect(component.addProject).toHaveBeenCalled();
+    });
+
+    it('should sanitize file name input', () => {
+        component.projectNameForm.controls['projectName'].setValue("[][]");
+        fixture.detectChanges();
+        spyOn(component, "addProject");
+
+        component.onAddClick();
+
+        expect(component.addProject).not.toHaveBeenCalled();
+        expect(component.projectNameForm.valid).toBeFalsy();
+    });
+
+    it('should open confirmation dialog if project with the same exists', () => {
+        component.projectNameForm.controls['projectName'].setValue("blank");
+        spyOn(component, "openConfirmationDialog");
+
+        component.onAddClick();
+
+        expect(component.openConfirmationDialog).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+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 { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
+import { Validator } from '../models/validator';
+import { ToasterService } from '../../../services/toaster.service';
+
+@Component({
+    selector: 'app-add-blank-project-dialog',
+    templateUrl: './add-blank-project-dialog.component.html',
+    styleUrls: ['./add-blank-project-dialog.component.css']
+})
+export class AddBlankProjectDialogComponent implements OnInit {
+    server: Server;
+    projectNameForm: FormGroup;
+
+    constructor(
+        public dialogRef: MatDialogRef<AddBlankProjectDialogComponent>,
+        private dialog: MatDialog,
+        private projectService: ProjectService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder) {
+            this.projectNameForm = this.formBuilder.group({
+                projectName: new FormControl(null, [Validators.required, Validator.projectNameValidator])
+            });
+        }
+
+    ngOnInit() {}
+
+    get form() {
+        return this.projectNameForm.controls;
+    }
+
+    onAddClick() : void{
+        if (!this.projectNameForm.invalid){
+            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.openConfirmationDialog(existingProject);
+                } else {
+                    this.addProject();  
+                }
+            });
+        }    
+    }
+
+    onNoClick() : void{
+        this.dialogRef.close();
+    }
+
+    addProject() : void{
+        this.projectService.add(this.server, this.projectNameForm.controls['projectName'].value, uuid())
+            .subscribe((project: Project) => {
+                this.dialogRef.close();
+                this.toasterService.success(`Project ${project.name} added`)
+            });
+    }
+
+    openConfirmationDialog(existingProject: Project) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+          width: '300px',
+          height: '150px',
+          data: {
+            'existingProject': existingProject
+          }
+        });
+    
+        dialogRef.afterClosed().subscribe((answer: boolean) => {
+          if (answer) {
+            this.projectService.close(this.server, existingProject.project_id).subscribe(() => {
+                this.projectService.delete(this.server, existingProject.project_id).subscribe(() => {
+                    this.addProject();
+                });
+            });
+          }
+        });
+    }
+}