feat(entity selector): support multiple selections

infra-geo-ouverte · Jun 21, 2019 · 3d30520 · 3d30520
1 parent 7547065
commit 3d30520
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/packages/common/src/lib/entity/entity-selector/entity-selector.component.html b/packages/common/src/lib/entity/entity-selector/entity-selector.component.html
@@ -1,6 +1,7 @@
 <mat-form-field class="igo-entity-selector">
   <mat-select
     [value]="selected$ | async"
+    [multiple]="many"
     [placeholder]="placeholder"
     (selectionChange)="onSelectionChange($event)">
     <mat-option *ngIf="emptyText !== undefined">{{emptyText}}</mat-option>

diff --git a/packages/common/src/lib/entity/entity-selector/entity-selector.component.ts b/packages/common/src/lib/entity/entity-selector/entity-selector.component.ts
@@ -45,6 +45,11 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
    */
   @Input() store: EntityStore<object>;
 
+  /**
+   * Wheter selecting many entities is allowed
+   */
+  @Input() many: boolean = false;
+
   /**
    * Title accessor
    */
@@ -65,7 +70,7 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
    */
   @Output() selectedChange = new EventEmitter<{
     selected: boolean;
-    entity: object;
+    value: object | object[];
   }>();
 
   constructor(private cdRef: ChangeDetectorRef) {}
@@ -77,9 +82,15 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.watcher = new EntityStoreWatcher(this.store, this.cdRef);
     this.selected$$ = this.store.stateView
-      .firstBy$((record: EntityRecord<object>) => record.state.selected === true)
-      .subscribe((record: EntityRecord<object>) => {
-        this.selected$.next(record ? record.entity : undefined);
+      .manyBy$((record: EntityRecord<object>) => record.state.selected === true)
+      .subscribe((records: EntityRecord<object>[]) => {
+        const entities = records.map((record: EntityRecord<object>) => record.entity);
+        if (this.many === true) {
+          this.selected$.next(entities);
+        } else {
+          const entity = entities.length > 0 ? entities[0] : undefined;
+          this.selected$.next(entity);
+        }
       });
   }
 
@@ -97,14 +108,14 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
    * @internal
    */
   onSelectionChange(event: {value: object | undefined}) {
-    const entity = event.value;
-    if (entity === undefined) {
+    const entities = event.value instanceof Array ? event.value : [event.value];
+    if (entities.length === 0) {
       this.store.state.updateAll({selected: false});
     } else {
-      this.store.state.update(entity, {selected: true}, true);
+      this.store.state.updateMany(entities, {selected: true}, true);
     }
 
-    this.selectedChange.emit({selected: true, entity});
+    this.selectedChange.emit({selected: true, value: event.value});
   }
 
 }
diff --git a/packages/common/src/lib/workspace/workspace-selector/workspace-selector.component.html b/packages/common/src/lib/workspace/workspace-selector/workspace-selector.component.html
@@ -1,5 +1,6 @@
 <igo-entity-selector
   [store]="store"
+  [many]="false"
   [titleAccessor]="getWorkspaceTitle"
   (selectedChange)="onSelectedChange($event)">
 </igo-entity-selector>
diff --git a/packages/common/src/lib/workspace/workspace-selector/workspace-selector.component.ts b/packages/common/src/lib/workspace/workspace-selector/workspace-selector.component.ts
@@ -31,7 +31,7 @@ export class WorkspaceSelectorComponent {
    */
   @Output() selectedChange = new EventEmitter<{
     selected: boolean;
-    entity: Workspace;
+    value: Workspace;
   }>();
 
   /**
@@ -47,10 +47,10 @@ export class WorkspaceSelectorComponent {
    * @internal
    * @param event The selection change event
    */
-  onSelectedChange(event: {entity: Workspace}) {
-    const workspace = event.entity;
+  onSelectedChange(event: {value: Workspace}) {
+    const workspace = event.value;
     this.store.activateWorkspace(workspace);
-    this.selectedChange.emit({selected: true, entity: workspace});
+    this.selectedChange.emit({selected: true, value: workspace});
   }
 
 }