From 52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 11 Aug 2020 16:07:53 +0200
Subject: Use ng select for multiselect

---
 .../select/select-checkbox.component.html          | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 client/src/app/shared/shared-forms/select/select-checkbox.component.html

(limited to 'client/src/app/shared/shared-forms/select/select-checkbox.component.html')

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>
-- 
cgit v1.2.3