Allow platform multi-selection for VNF in modern UI

[vid.git] / vid-webpack-master / src / app / shared / components / formControls / component / multiselect / multiselect.formControl.component.ts

diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
index 4b98c7e..9b900de 100644 (file)
--- a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
@@ -1,6 +1,8 @@
 import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
 import {FormGroup} from "@angular/forms";
 import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+import {MultiselectFormControlService} from "./multiselect.formControl.service";
+import {MultiSelectItem} from "./multiselect.model";
 
 @Component({
   selector: 'multiselect-form-control',
@@ -8,13 +10,52 @@ import {MultiselectFormControl} from "../../../../models/formControlModels/multi
 })
 export class MultiselectFormControlComponent implements OnChanges{
   @Input() data: MultiselectFormControl = null;
+  @Input() multiselectOptions: [] = null;
+  @Input() selectedItems  = [];
   @Input() form: FormGroup = null;
 
-  ngOnChanges(changes: SimpleChanges): void {
+
+  multiselectFormControlService : MultiselectFormControlService;
+  constructor(private _multiselectFormControlService : MultiselectFormControlService){
+    this.multiselectFormControlService = _multiselectFormControlService;
+  }
+  dropdownSettings = {
+    singleSelection : false
+  };
+
+  options : MultiSelectItem[];
+
+
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if(this.data.options$){
+      this._multiselectFormControlService.convertOriginalItems(this.data).then((options)=>{
+          this.options = options;
+          this._multiselectFormControlService.convertSelectedItems(this.data).then((res)=> {
+            this.selectedItems = res;
+            this.form.controls[this.data.controlName].setValue(this.selectedItems);
+          })
+      });
+
+    }
     if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) {
-      if(this.data.onInit){
+      if (this.data.onInit) {
         this.data.onInit(this.data, this.form);
       }
     }
   }
+
+  onItemSelect(item:any){
+    this.data.onChange(this.selectedItems ,this.form);
+  }
+  OnItemDeSelect(item:any){
+    this.data.onChange(this.selectedItems ,this.form);
+  }
+  onSelectAll(items: any){
+    this.data.onChange(this.selectedItems ,this.form);
+  }
+  onDeSelectAll(items: any){
+    this.data.onChange(this.selectedItems ,this.form);
+  }
 }
+