add validator to check unique VM Name when create in course

src/app/course/course-wizard/course-wizard.component.html

@@ -446,10 +446,8 @@ <h4>VM Information</h4>
                   <td class="add-elem">{{ q.key }}</td>
                   <td class="add-elem">{{ q.value }}</td> 
                 </ng-container>   
-                <!-- view of edit value -->
-                <ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != q.value && getSelectedCourseVM(i.key, q.key) != 0 ">
-                  <td class=" del-elem after" style="margin-right: 0">
-                    {{ getSelectedCourseVM(i.key, q.key) }}</td>                 
+                <!-- view of edit value (delete VM and create VM with the same VM Name) -->
+                <ng-container *ngIf="isEditedVM(i.key, q.key, q.value)"> 
                   <td class=" add-elem"> {{ q.value }}</td>                 
                 </ng-container>                        
             </tr>  

src/app/course/course-wizard/course-wizard.component.ts

@@ -369,4 +369,12 @@ export class CourseWizardComponent implements OnChanges, OnInit {
   isScenarioInList(scenario: Scenario, list?: Scenario[]): boolean {   
     return list.some(item => item.name === scenario.name);
   }
+  isEditedVM(index: any, vmname: string, templateName: any): boolean {
+    // This function determines if the currently selected VM is either beeing edited throug the following condition:
+    const isEdited = this.getSelectedCourseVM(index, vmname) != templateName && this.getSelectedCourseVM(index, vmname) != 0
+    // ... or if it was deleted and created again with the same vm name through the following condition:
+    const deletedAndCreatedWithSameName = this.getSelectedCourseVM(index, vmname) === 0 && this.getEditSelectedCourseVM(index, vmname) != templateName
+    // this.getSelectedCourseVM(index, vmname) != templateName && this.getSelectedCourseVM(index, vmname) != 0
+    return isEdited || deletedAndCreatedWithSameName
+  }
 }

src/app/vmset/new-vm/new-vm.component.html

@@ -8,6 +8,8 @@ <h3 class="modal-title">Create VM</h3>
                 <clr-control-error *clrIfError="'required'">VM name is required</clr-control-error>
                 <clr-control-error *clrIfError="'minlength'">VM name must be longer than 4 characters
                 </clr-control-error>
+                <clr-control-error *clrIfError="'notUnique'">VM name must be unique
+                </clr-control-error>
             </clr-input-container>
             <clr-select-container>
                 <label>VM Template</label>

src/app/vmset/new-vm/new-vm.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output, ViewChild, Input, OnChanges } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators, ValidatorFn, AbstractControl } from '@angular/forms';
 import { VmtemplateService } from 'src/app/data/vmtemplate.service';
 import { VMTemplate } from 'src/app/data/vmtemplate';
 import { ClrModal } from '@clr/angular';
@@ -12,6 +12,9 @@ export class NewVmComponent implements OnChanges {
   public modalOpen: boolean = false;
   public vmtemplates: VMTemplate[] = [];
 
+  @Input()
+  public vms: {}[] = []; // because JSONifying Maps is hard
+
   @Input()
   public listVms: boolean;
 
@@ -44,7 +47,8 @@ export class NewVmComponent implements OnChanges {
   public vmform: FormGroup = new FormGroup({
     'vm_name': new FormControl(null, [
       Validators.required,
-      Validators.minLength(4)
+      Validators.minLength(4),
+      this.validateUniqueVmName()
     ]),
     'vm_template': new FormControl(null, [
       Validators.required
@@ -54,10 +58,21 @@ export class NewVmComponent implements OnChanges {
   addVM() {
     var vm_name = this.vmform.get('vm_name').value;
     var vm_template = this.vmform.get('vm_template').value;
-
     this.vm.emit([vm_name, vm_template]);
 
     this.modal.close();
   }
 
+  private validateUniqueVmName(): ValidatorFn {
+    return (control: FormControl) => {
+      const vmName = control.value;
+      const isNotUnique = this.vms.some((vmSet: {}) => vmSet.hasOwnProperty(vmName))
+      if (isNotUnique) {
+        return {
+          notUnique: true,
+        };
+      }
+      return null;
+    };
+  }
 }

src/app/vmset/vmset.component.html

@@ -31,4 +31,4 @@
         </clr-stack-block>
     </clr-stack-block>
 </clr-stack-view>
-<new-vm #newvm (vm)="addVM($event)" [listVms]="allowedAddVm | async"></new-vm>
+<new-vm #newvm (vm)="addVM($event)" [listVms]="allowedAddVm | async" [vms]="vms"></new-vm>