From 2a56441ce9be166d6ef260e7c121e94031622820 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 30 May 2019 03:57:30 -0700
Subject: [PATCH] Validation in text & style editor added

---
 src/app/app.module.ts                         |  6 +-
 .../style-editor/style-editor.component.html  | 34 ++++-----
 .../style-editor/style-editor.component.scss  |  4 ++
 .../style-editor/style-editor.component.ts    | 72 ++++++++++++-------
 .../text-editor/text-editor.component.html    | 10 +--
 .../text-editor/text-editor.component.scss    |  4 ++
 .../text-editor/text-editor.component.ts      | 47 +++++++-----
 src/app/validators/NonNegativeValidator.ts    | 12 ++++
 src/app/validators/RotationValidator.ts       | 12 ++++
 9 files changed, 138 insertions(+), 63 deletions(-)
 create mode 100644 src/app/validators/NonNegativeValidator.ts
 create mode 100644 src/app/validators/RotationValidator.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 108ee935..32679dd3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -184,6 +184,8 @@ import { AdbutlerComponent } from './components/adbutler/adbutler.component';
 import { ConsoleService } from './services/settings/console.service';
 import { DefaultConsoleService } from './services/settings/default-console.service';
 import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
+import { NonNegativeValidator } from './validators/NonNegativeValidator';
+import { RotationValidator } from './validators/RotationValidator';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -374,7 +376,9 @@ if (environment.production) {
     ServerManagementService,
     ConsoleService,
     DefaultConsoleService,
-    NodeCreatedLabelStylesFixer
+    NodeCreatedLabelStylesFixer,
+    NonNegativeValidator,
+    RotationValidator
   ],
   entryComponents: [
     AddServerDialogComponent,
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index 62f53a10..eef9b466 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@@ -1,25 +1,27 @@
 <h1 mat-dialog-title>Style editor</h1>
 
 <div class="modal-form-container">
-  <mat-form-field>
-    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
-  </mat-form-field>
+  <form [formGroup]="formGroup">
+    <mat-form-field class="form-field">
+      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.fill">
+    </mat-form-field>
 
-  <mat-form-field>
-    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
-  </mat-form-field>
+    <mat-form-field class="form-field">
+      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
+    </mat-form-field>
 
-  <mat-form-field>
-    <input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
-  </mat-form-field>
-    
-  <mat-form-field *ngIf="element.stroke_dasharray">
-      <input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
-  </mat-form-field>
+    <mat-form-field class="form-field">
+      <input matInput formControlName="borderWidth" placeholder="Border width" type="number">
+    </mat-form-field>
+      
+    <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
+        <input matInput [ngModelOptions]="{standalone: true}" placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
+    </mat-form-field>
 
-  <mat-form-field>
-      <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
-  </mat-form-field>
+    <mat-form-field class="form-field">
+        <input matInput formControlName="rotation" placeholder="Rotation" type="number">
+    </mat-form-field>
+  </form>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
index cc9d349b..36dbdb7d 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
@@ -47,3 +47,7 @@ input[type="color"]::-webkit-color-swatch {
 .modal-form-container > * {
   width: 100%;
 }
+
+.form-field {
+  width: 100%;
+}
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 06d3f1cb..978f4663 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Injectable } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { Project } from '../../../../models/project';
 import { Drawing } from '../../../../cartography/models/drawing';
@@ -10,6 +10,10 @@ import { DrawingsDataSource } from '../../../../cartography/datasources/drawings
 import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
 import { LineElement } from '../../../../cartography/models/drawings/line-element';
 import { RectElement } from '../../../../cartography/models/drawings/rect-element';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { ToasterService } from '../../../../services/toaster.service';
+import { NonNegativeValidator } from '../../../../validators/NonNegativeValidator';
+import { RotationValidator } from '../../../../validators/RotationValidator';
 
 @Component({
   selector: 'app-style-editor',
@@ -21,19 +25,27 @@ export class StyleEditorDialogComponent implements OnInit {
   project: Project;
   drawing: Drawing;
   element: ElementData;
-  rotation: string;
+  formGroup: FormGroup;
 
   constructor(
     public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
     private drawingToMapDrawingConverter: DrawingToMapDrawingConverter,
     private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
     private drawingService: DrawingService,
-    private drawingsDataSource: DrawingsDataSource
-  ) {}
+    private drawingsDataSource: DrawingsDataSource,
+    private formBuilder: FormBuilder,
+    private toasterService: ToasterService,
+    private nonNegativeValidator: NonNegativeValidator,
+    private rotationValidator: RotationValidator
+  ) {
+    this.formGroup = this.formBuilder.group({
+      borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      rotation: new FormControl('', [Validators.required, rotationValidator.get])
+    });
+  }
 
   ngOnInit() {
     this.element = new ElementData();
-    this.rotation = this.drawing.rotation.toString();
 
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
@@ -45,6 +57,9 @@ export class StyleEditorDialogComponent implements OnInit {
       this.element.stroke_dasharray = this.drawing.element.stroke_dasharray;
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
+
+    this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
+    this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
   }
 
   onNoClick() {
@@ -52,27 +67,34 @@ export class StyleEditorDialogComponent implements OnInit {
   }
 
   onYesClick() {
-    this.drawing.rotation = +this.rotation;
-    if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
-      this.drawing.element.fill = this.element.fill;
-      this.drawing.element.stroke = this.element.stroke;
-      this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
-      this.drawing.element.stroke_width = this.element.stroke_width;
-    } else if (this.drawing.element instanceof LineElement) {
-      this.drawing.element.stroke = this.element.stroke;
-      this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
-      this.drawing.element.stroke_width = this.element.stroke_width;
+    if (this.formGroup.valid) {
+
+      this.element.stroke_width =  this.formGroup.get('borderWidth').value;
+      this.drawing.rotation = this.formGroup.get('rotation').value;
+      
+      if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
+        this.drawing.element.fill = this.element.fill;
+        this.drawing.element.stroke = this.element.stroke;
+        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
+        this.drawing.element.stroke_width = this.element.stroke_width;
+      } else if (this.drawing.element instanceof LineElement) {
+        this.drawing.element.stroke = this.element.stroke;
+        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
+        this.drawing.element.stroke_width = this.element.stroke_width;
+      }
+
+      let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
+      mapDrawing.element = this.drawing.element;
+
+      this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
+
+      this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
+        this.drawingsDataSource.update(serverDrawing);
+        this.dialogRef.close();
+      });
+    } else {
+      this.toasterService.error(`Entered data is incorrect`);
     }
-
-    let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
-    mapDrawing.element = this.drawing.element;
-
-    this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
-
-    this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
-      this.drawingsDataSource.update(serverDrawing);
-      this.dialogRef.close();
-    });
   }
 }
 
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
index 97348473..e92982b7 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
@@ -1,13 +1,15 @@
 <h1 mat-dialog-title>Text editor</h1>
 
 <div class="modal-form-container">
-  <mat-form-field>
+  <mat-form-field class="form-field">
     <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
   </mat-form-field>
 
-  <mat-form-field>
-    <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
-  </mat-form-field>
+  <form [formGroup]="formGroup">
+    <mat-form-field class="form-field">
+      <input formControlName="rotation" matInput placeholder="Rotation" type="text">
+    </mat-form-field>
+  </form>
 
   <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> 
 </div>
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
index fa95b1f1..cc5ede13 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
@@ -52,3 +52,7 @@ input[type="color"]::-webkit-color-swatch {
 .modal-form-container > * {
   width: 100%;
 }
+
+.form-field {
+  width: 100%;
+}
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
index 389259c1..474036a8 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
@@ -8,6 +8,9 @@ import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map
 import { DrawingService } from '../../../../services/drawing.service';
 import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
 import { TextElement } from '../../../../cartography/models/drawings/text-element';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+import { ToasterService } from '../../../../services/toaster.service';
+import { RotationValidator } from '../../../../validators/RotationValidator';
 
 @Component({
   selector: 'app-text-editor',
@@ -21,7 +24,7 @@ export class TextEditorDialogComponent implements OnInit {
   project: Project;
   drawing: Drawing;
   element: TextElement;
-  rotation: string;
+  formGroup: FormGroup;
 
   constructor(
     private dialogRef: MatDialogRef<TextEditorDialogComponent>,
@@ -29,12 +32,18 @@ export class TextEditorDialogComponent implements OnInit {
     private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
     private drawingService: DrawingService,
     private drawingsDataSource: DrawingsDataSource,
-    private renderer: Renderer2
-  ) {}
+    private renderer: Renderer2,
+    private formBuilder: FormBuilder,
+    private toasterService: ToasterService,
+    private rotationValidator: RotationValidator
+  ) {
+    this.formGroup = this.formBuilder.group({
+      rotation: new FormControl('', [Validators.required, rotationValidator.get])
+    });
+  }
 
   ngOnInit() {
-    this.rotation = this.drawing.rotation.toString();
-
+    this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
     this.element = this.drawing.element as TextElement;
     this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill);
     this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family);
@@ -47,18 +56,22 @@ export class TextEditorDialogComponent implements OnInit {
   }
 
   onYesClick() {
-    this.drawing.rotation = +this.rotation;
-    this.drawing.element = this.element;
-
-    let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
-    mapDrawing.element = this.drawing.element;
-
-    this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
-
-    this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
-      this.drawingsDataSource.update(serverDrawing);
-      this.dialogRef.close();
-    });
+    if (this.formGroup.valid) {
+      this.drawing.rotation = this.formGroup.get('rotation').value;
+      this.drawing.element = this.element;
+  
+      let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
+      mapDrawing.element = this.drawing.element;
+  
+      this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
+  
+      this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
+        this.drawingsDataSource.update(serverDrawing);
+        this.dialogRef.close();
+      });
+    } else {
+      this.toasterService.error(`Entered data is incorrect`);
+    }
   }
 
   changeTextColor(changedColor) {
diff --git a/src/app/validators/NonNegativeValidator.ts b/src/app/validators/NonNegativeValidator.ts
new file mode 100644
index 00000000..9b2f5f3a
--- /dev/null
+++ b/src/app/validators/NonNegativeValidator.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class NonNegativeValidator {
+  get(control) {
+    if (+control.value>=0) {
+      return null;
+    } 
+
+    return { negativeValue: true };
+  }
+}
diff --git a/src/app/validators/RotationValidator.ts b/src/app/validators/RotationValidator.ts
new file mode 100644
index 00000000..a95f3f37
--- /dev/null
+++ b/src/app/validators/RotationValidator.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class RotationValidator {
+  get(control) {
+    if (+control.value>-360 && +control.value<=360) {
+      return null;
+    } 
+
+    return { negativeValue: true };
+  }
+}