Merge pull request #300 from bkd-mba-fbi/feature/218-multiselectdropdown

218: improve clicking & sorting of multiselect dropdowns

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.ts

@@ -23,6 +23,7 @@ import { DateParserFormatter } from 'src/app/shared/services/date-parser-formatt
 import {
   addGroupToDropdownItem,
   createPresenceTypesDropdownItems,
+  sortPresenceTypes,
 } from 'src/app/shared/utils/presence-types';
 import { EducationalEventsRestService } from '../../../shared/services/educational-events-rest.service';
 import { StudentsRestService } from 'src/app/shared/services/students-rest.service';
@@ -71,6 +72,7 @@ export class EditAbsencesHeaderComponent implements OnInit {
     map((presenceTypes) =>
       presenceTypes.filter(not(isComment)).filter(not(isIncident))
     ),
+    map(sortPresenceTypes),
     map(createPresenceTypesDropdownItems),
     map((i) =>
       addGroupToDropdownItem(
@@ -82,6 +84,7 @@ export class EditAbsencesHeaderComponent implements OnInit {
 
   incidentTypesGrouped$ = this.state.presenceTypes$.pipe(
     map((presenceTypes) => presenceTypes.filter(isIncident)),
+    map(sortPresenceTypes),
     map(createPresenceTypesDropdownItems),
     map((i) =>
       addGroupToDropdownItem(

src/app/shared/components/multiselect/multiselect.component.html

@@ -6,9 +6,11 @@
   [selectableGroup]="true"
   [selectableGroupAsModel]="false"
   [closeOnSelect]="false"
-  [ngModel]="values$ | async"
-  (change)="onChange($event)"
+  [(ngModel)]="values"
   placeholder="{{ 'shared.select.empty-option' | translate }}"
+  bindValue="Key"
+  bindLabel="Value"
+  (click)="itemsChanged()"
 >
   <!-- selected items -->
   <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
@@ -27,7 +29,7 @@
     let-item$="item$"
     let-index="index"
   >
-    <input id="{{ index }}" type="checkbox" [ngModel]="item$.selected" />
+    <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" />
     {{ item.Group }}
   </ng-template>
 
@@ -38,7 +40,7 @@
     let-item$="item$"
     let-index="index"
   >
-    <input id="{{ index }}" type="checkbox" [ngModel]="item$.selected" />
+    <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" />
     {{ item.Value }}
   </ng-template>
 </ng-select>

src/app/shared/components/multiselect/multiselect.component.ts

@@ -1,61 +1,20 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { DropDownGroupedItem } from '../../models/drop-down-grouped-item.model';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'erz-multiselect',
   templateUrl: './multiselect.component.html',
   styleUrls: ['./multiselect.component.scss'],
 })
-export class MultiselectComponent implements OnInit, OnChanges {
+export class MultiselectComponent {
   @Input() options: ReadonlyArray<DropDownGroupedItem> = [];
-  @Input() values: Option<number> = null;
-  @Output() valuesChange = new EventEmitter<Option<number>[]>();
-
-  options$ = new BehaviorSubject<ReadonlyArray<DropDownGroupedItem>>([]);
-  rawValues$ = new BehaviorSubject<Option<number[]>>(null);
-
-  values$ = combineLatest([this.rawValues$, this.options$]).pipe(
-    map(
-      ([rawValues, options]) =>
-        (options &&
-          rawValues &&
-          options.filter((o: DropDownGroupedItem) =>
-            rawValues.includes(o.Key)
-          )) ||
-        null
-    )
-  );
+  @Input() values: Option<number[]> = [];
+  @Output() valuesChange = new EventEmitter<Option<number[]>>();
 
   constructor() {}
 
-  ngOnInit(): void {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.values) {
-      this.rawValues$.next(changes.values.currentValue);
-    }
-    if (changes.options) {
-      this.options$.next(changes.options.currentValue);
-    }
-  }
-
-  onChange(newValue: DropDownGroupedItem[]): void {
-    let value: number[] = [];
-    if (newValue && Array.isArray(newValue)) {
-      value = newValue // emit array with only keys
-        .map((v) => v?.Key);
-    }
-    this.valuesChange.emit(value);
+  itemsChanged(): void {
+    this.valuesChange.emit(this.values);
   }
 }