Use ng select for multiselect

1 files changed, 41 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
new file mode 100644
index 000000000..3f81dd152
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -0,0 +1,41 @@
+<ng-select
+  [items]="availableItems"
+  [(ngModel)]="selectedItems"
+  (ngModelChange)="onModelChange()"
+  i18n-placeholder placeholder="Add a new language"
+  [clearable]="true"
+  [multiple]="true"
+  [searchable]="true"
+  [closeOnSelect]="false"
+
+  bindValue="id"
+  bindLabel="label"
+
+  notFoundText="No items found" i18n-notFoundText
+
+  [selectableGroup]="selectableGroup"
+  [selectableGroupAsModel]="selectableGroupAsModel"
+
+  groupBy="group"
+  [compareWith]="compareFn"
+
+  [maxSelectedItems]="maxSelectedItems"
+>
+
+  <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
+    <div class="form-group-checkbox">
+      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
+      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
+      <span>{{ item.group }}</span>
+    </div>
+  </ng-template>
+
+  <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
+    <div class="form-group-checkbox">
+      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
+      <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
+      <span>{{ item.label }}</span>
+    </div>
+  </ng-template>
+
+</ng-select>