Allow platform multi-selection for VNF in modern UI

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

diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
index f7c4894..f205259 100644 (file)
--- a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
@@ -1,16 +1,26 @@
-<div>
-  <div class="details-item" *ngIf="data != null && form != null">
-    <label [ngClass]="{'required': data.isRequired()}"
-           for="{{data?.dataTestId}}">{{data?.displayName}}:</label>
-    <angular2-multiselect id="{{data?.dataTestId}}"
-                          [attr.data-tests-id]="data?.dataTestId"
-                          [formControl]="form.controls[data.controlName]"
-                          [(ngModel)]="data.selectedItems"
-                          [data]="data?.options$"
-                          [settings]="data?.settings"
-                          title="{{data.tooltip}}"
-                          [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}">
-    </angular2-multiselect>
-  </div>
-</div>
+<div class="details-item" *ngIf="data != null && form != null">
+  <label [ngClass]="{'required': data.isRequired()}"
+         for="{{data?.dataTestId}}-select">{{data?.displayName}}:</label>
+
+  <angular2-multiselect
+    [attr.data-tests-id]="data?.dataTestId"
+    [data]="options"
+    [(ngModel)]="selectedItems"
+    [settings]="dropdownSettings"
+    (onSelect)="onItemSelect($event)"
+    (onDeSelect)="OnItemDeSelect($event)"
+    (onSelectAll)="onSelectAll($event)"
+    (onDeSelectAll)="onDeSelectAll($event)">>
+    <c-item>
+      <ng-template let-item="item">
+        <label
+          [attr.data-tests-id]="data.dataTestId + '-' + item?.itemName"
+          style="color: #333;min-width: 150px;">{{item?.itemName}}</label>
+      </ng-template>
+    </c-item>
+  </angular2-multiselect>
 
+
+  <form-control-error *ngIf="data?.hasEmptyOptions && data?.isRequired()"
+                      [message]="'No results for this request. Please change criteria.'"></form-control-error>
+</div>