feature(wysiwyg): set values to selection model from component

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -7,7 +7,6 @@
     cdkDropList
     multiselectList
     [msModel]="selectionModel"
-    [msItems]="slideIds"
   >
     <div
       (cdkDragDropped)="dropped()"

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -40,7 +40,7 @@ export class SidePanelComponent implements OnInit, OnChanges {
   @Input() presentationId!: string;
 
   public dragging: DragRef = null;
-  public sidePanelInFocus = false;
+  public elementHasFocus = false;
   public selectionModel: MultiselectModel<string> = new MultiselectModel();
   public slideIds: string[] = [];
 
@@ -61,7 +61,7 @@ export class SidePanelComponent implements OnInit, OnChanges {
     if (changes.slides) {
       this.slideIds = slideIdsMapper(changes.slides.currentValue);
 
-      this.resetSelected();
+      this.selectionModel.setValues(this.slideIds);
     }
   }
 
@@ -75,23 +75,23 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
   @HostListener('document:keydown.arrowdown', ['$event'])
   nextSlide(event: KeyboardEvent) {
-    if (this.sidePanelInFocus) {
+    if (this.elementHasFocus) {
       this.navigationService.nextSlide(this.presentationId);
       event.preventDefault();
     }
   }
 
   @HostListener('document:keydown.arrowup', ['$event'])
   prevSlide(event: KeyboardEvent) {
-    if (this.sidePanelInFocus) {
+    if (this.elementHasFocus) {
       this.navigationService.previousSlide(this.presentationId);
       event.preventDefault();
     }
   }
 
   @HostListener('document:keydown', ['$event'])
   private handleKeyboardEvent(event: KeyboardEvent) {
-    if (!this.sidePanelInFocus) {
+    if (!this.elementHasFocus) {
       return;
     }
 
@@ -112,7 +112,7 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
   @HostListener('document:click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
-    this.sidePanelInFocus = this.el.nativeElement.contains(event.target);
+    this.elementHasFocus = this.el.nativeElement.contains(event.target);
   }
 
   dragStarted(event: CdkDragStart) {

apps/codelab/src/app/multiselect/multiselect-list.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, InjectionToken, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Directive, ElementRef, HostListener, InjectionToken, Input } from '@angular/core';
 
 import { MultiselectModel } from './multiselect-model';
 
@@ -13,10 +13,9 @@ export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective<any>
     },
   ]
 })
-export class MultiselectListDirective<T> implements OnChanges {
+export class MultiselectListDirective<T> {
   elementHasFocus = false;
 
-  @Input() msItems = [];
   @Input() msModel: MultiselectModel<T>;
 
   constructor(
@@ -37,16 +36,10 @@ export class MultiselectListDirective<T> implements OnChanges {
     }
 
     if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-      this.msModel.toggleAllItems(this.msItems, true);
+      this.msModel.selectAllItems();
 
       event.preventDefault();
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.msItems) {
-      this.msModel.setValues(changes.msItems.currentValue);
-    }
-  }
-
 }

apps/codelab/src/app/multiselect/multiselect-model.ts

@@ -14,11 +14,11 @@ export class MultiselectModel<T> {
     return Array.from(this.selection.values());
   }
 
-  setValues(values: T[]) {
+  setValues(values: T[]): void {
     this.values = values;
   }
 
-  findBetween(item1: T, item2: T) {
+  findBetween(item1: T, item2: T): T[] {
     const index1 = this.values.indexOf(item1);
     const index2 = this.values.indexOf(item2);
 
@@ -28,7 +28,7 @@ export class MultiselectModel<T> {
     return this.values.slice(firstIndex, firstIndex + numberOfItems);
   }
 
-  toggleAllItems(items: T[], shouldSelect: boolean) {
+  toggleAllItems(items: T[], shouldSelect: boolean): void {
     for (const item of items) {
       if (shouldSelect) {
         this.selection.add(item);
@@ -58,6 +58,10 @@ export class MultiselectModel<T> {
     this.stack.push(item);
   }
 
+  selectAllItems(): void {
+    this.toggleAllItems(this.values, true);
+  }
+
   selectSingle(item: T): void {
     this.selection.clear();