Support for global variables added

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

@@ -42,16 +42,39 @@
             </mat-checkbox>
         </mat-tab>
         <mat-tab label="Global variables">
-            <form [formGroup]="variableformGroup">
+            <form [formGroup]="variableFormGroup">
                 <mat-form-field class="form-field">
                     <input matInput formControlName="name" placeholder="Name" type="text">
                 </mat-form-field>
             
                 <mat-form-field class="form-field">
-                    <input matInput formControlName="value" placeholder="Value" type="number">
+                    <input matInput formControlName="value" placeholder="Value" type="text">
                 </mat-form-field>
             </form>
+            <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
+            <table class="table" mat-table [dataSource]="variables">
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef>Name</th>
+                    <td mat-cell *matCellDef="let element">{{element.name}} </td>
+                </ng-container>
             
+                <ng-container matColumnDef="value">
+                    <th mat-header-cell *matHeaderCellDef>Value</th>
+                    <td mat-cell *matCellDef="let element">{{element.value}}</td>
+                </ng-container>
+            
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef>Actions</th>
+                    <td mat-cell *matCellDef="let element">
+                        <button mat-icon-button matTooltip="Delete variable" (click)="deleteVariable(element)">
+                            <mat-icon aria-label="Delete adapter">delete</mat-icon>
+                        </button>
+                    </td>
+                </ng-container>
+                
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
         </mat-tab>
     </mat-tab-group>
 </div>

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

@@ -1,3 +1,15 @@
 .form-field {
     width: 100%;
 }
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}

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

@@ -19,6 +19,9 @@ export class EditProjectDialogComponent implements OnInit {
   variableFormGroup: FormGroup;
   projectVariables: ProjectVariable[];
 
+  displayedColumns: string[] = ['name', 'value', 'actions']; 
+  variables: ProjectVariable[] = [];
+
   constructor(
     public dialogRef: MatDialogRef<EditProjectDialogComponent>,
     private formBuilder: FormBuilder,
@@ -46,6 +49,23 @@ export class EditProjectDialogComponent implements OnInit {
     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);
+    this.project.variables.forEach(n => this.variables.push(n));
+  }
+
+  addVariable() {
+    if (this.variableFormGroup.valid) {
+      let variable: ProjectVariable = {
+        name: this.variableFormGroup.get('name').value,
+        value: this.variableFormGroup.get('value').value
+      };
+      this.variables = this.variables.concat([variable]);
+    } else {
+      this.toasterService.error(`Fill all required fields with correct values.`);
+    }
+  }
+
+  deleteVariable(variable: ProjectVariable) {
+    this.variables = this.variables.filter(elem => elem!== variable);
   }
 
   onNoClick() {
@@ -54,18 +74,19 @@ export class EditProjectDialogComponent implements OnInit {
 
   onYesClick() {
     if (this.formGroup.valid) {
-        this.project.name = this.formGroup.get('projectName').value;
+      this.project.name = this.formGroup.get('projectName').value;
-        this.project.scene_width = this.formGroup.get('width').value;
+      this.project.scene_width = this.formGroup.get('width').value;
-        this.project.scene_height = this.formGroup.get('height').value;
+      this.project.scene_height = this.formGroup.get('height').value;
-        this.project.drawing_grid_size = this.formGroup.get('drawingGridSize').value;
+      this.project.drawing_grid_size = this.formGroup.get('drawingGridSize').value;
-        this.project.grid_size = this.formGroup.get('nodeGridSize').value;
+      this.project.grid_size = this.formGroup.get('nodeGridSize').value;
+      this.project.variables = this.variables;
 
-        this.projectService.update(this.server, this.project).subscribe((project: Project) => {
+      this.projectService.update(this.server, this.project).subscribe((project: Project) => {
-            this.toasterService.success(`Project ${project.name} updated.`);
+          this.toasterService.success(`Project ${project.name} updated.`);
-            this.onNoClick();
+          this.onNoClick();
-        })
+      })
     } else {
-        this.toasterService.error(`Fill all required fields with correct values.`);
+      this.toasterService.error(`Fill all required fields with correct values.`);
     }
   }
 }