From f7143b4d936db747745ea40bdee2ff2c8e13cda2 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 17 Feb 2020 15:02:25 +0100
Subject: [PATCH] Async validator for projects

---
 .../add-blank-project-dialog.component.html        |  5 ++++-
 .../add-blank-project-dialog.component.ts          |  9 +++++----
 src/app/validators/project-name-async-validator.ts | 14 ++++++++++++++
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/app/validators/project-name-async-validator.ts

diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
index 9e3b6920..987cfa07 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
@@ -12,9 +12,12 @@
     <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"
+    <mat-error *ngIf="form.projectName?.errors && form.projectName?.errors.invalidName"
       >Project name is incorrect</mat-error
     >
+    <mat-error *ngIf="form.projectName?.errors && form.projectName?.errors.projectExist"
+      >Project with this name exists</mat-error
+    >
   </mat-form-field>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
index c7121539..6ddbe452 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
@@ -9,6 +9,7 @@ import { v4 as uuid } from 'uuid';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { ProjectNameValidator } from '../models/projectNameValidator';
 import { ToasterService } from '../../../services/toaster.service';
+import { projectNameAsyncValidator } from '../../../validators/project-name-async-validator';
 
 
 @Component({
@@ -31,14 +32,14 @@ export class AddBlankProjectDialogComponent implements OnInit {
     private toasterService: ToasterService,
     private formBuilder: FormBuilder,
     private projectNameValidator: ProjectNameValidator
-  ) {
+  ) {}
+
+  ngOnInit() {
     this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, projectNameValidator.get])
+      projectName: new FormControl(null, [Validators.required, this.projectNameValidator.get], [projectNameAsyncValidator(this.server, this.projectService)])
     });
   }
 
-  ngOnInit() {}
-
   get form() {
     return this.projectNameForm.controls;
   }
diff --git a/src/app/validators/project-name-async-validator.ts b/src/app/validators/project-name-async-validator.ts
new file mode 100644
index 00000000..6d3f1e2d
--- /dev/null
+++ b/src/app/validators/project-name-async-validator.ts
@@ -0,0 +1,14 @@
+import { ProjectService } from '../services/project.service';
+import { FormControl } from '@angular/forms';
+import { timer } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { Server } from '../models/server';
+
+export const projectNameAsyncValidator = (server: Server, projectService: ProjectService) => {
+    return (control: FormControl) => {
+        return timer(500).pipe(
+            switchMap(() => projectService.list(server)),
+            map(response => (response.find(n => n.name === control.value) ? {projectExist: true} : null))
+        );
+    }
+}