feat(catalog): optionnally force a user to expand a group of layers b…

…efore adding it to the map
infra-geo-ouverte · Jul 17, 2019 · e502a52 · e502a52
1 parent 83d61ce
commit e502a52
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.html b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.html
@@ -1,11 +1,12 @@
 <mat-list-item>
   <mat-icon
     mat-list-avatar
+    svgIcon="chevron-up"
     igoCollapse
     class="igo-chevron"
     [target]="items"
-    [collapsed]="true"
-    svgIcon="chevron-up">
+    [collapsed]="collapsed"
+    (toggle)="onToggleCollapsed($event)">
   </mat-icon>
 
   <h4 matLine>{{title}}</h4>
@@ -17,6 +18,7 @@ <h4 matLine>{{title}}</h4>
       matTooltipShowDelay="500"
       [matTooltip]="'igo.geo.catalog.group.removeFromMap' | translate"
       color="warn"
+      [disabled]="disabled$ | async"
       (click)="onToggleClick()">
       <mat-icon svgIcon="delete"></mat-icon>
     </button>
@@ -28,6 +30,7 @@ <h4 matLine>{{title}}</h4>
       tooltip-position="below"
       matTooltipShowDelay="500"
       [matTooltip]="'igo.geo.catalog.group.addToMap' | translate"
+      [disabled]="disabled$ | async"
       (click)="onToggleClick()">
       <mat-icon svgIcon="plus"></mat-icon>
     </button>

diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.ts b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.ts
@@ -30,6 +30,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
+
   /**
    * Group's items store
    * @internal
@@ -42,6 +43,12 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
    */
   added$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  /**
+   * Whether the toggle button is disabled
+   * @internal
+   */
+  disabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
   /**
    * Catalog
    */
@@ -52,6 +59,16 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
    */
   @Input() group: CatalogItemGroup;
 
+  /**
+   * Whether the group is collapsed
+   */
+  @Input() collapsed: boolean = true;
+
+  /**
+   * Whether the group can be toggled when it's collapsed
+   */
+  @Input() toggleCollapsed: boolean = true;
+
   /**
    * Parent catalog's items store state. Groups share a unique
    * EntityState that tracks the group and it's layers state (whether they are added or not).
@@ -90,6 +107,7 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.store.load(this.group.items);
     this.evaluateAdded();
+    this.evaluateDisabled(this.collapsed);
     if (this.catalog && this.catalog.sortDirection !== undefined) {
       this.store.view.sort({
         direction: this.catalog.sortDirection,
@@ -124,6 +142,14 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
     this.added$.value ? this.remove() : this.add();
   }
 
+  /**
+   * On toggle button click, emit the added change event
+   * @internal
+   */
+  onToggleCollapsed(collapsed: boolean) {
+    this.evaluateDisabled(collapsed);
+  }
+
   /**
    * When a layer is added or removed, evaluate if all the layers of the group
    * are now added or removed. If so, consider that the group itself is added
@@ -184,4 +210,12 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
     });
     this.added$.next(added);
   }
+
+  private evaluateDisabled(collapsed: boolean) {
+    let disabled = false;
+    if (this.toggleCollapsed === false) {
+      disabled = collapsed;
+    }
+    this.disabled$.next(disabled);
+  }
 }
diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.html b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.html
@@ -5,6 +5,7 @@
         [catalog]="catalog"
         [group]="item"
         [state]="store.state"
+        [toggleCollapsed]="toggleCollapsedGroup"
         (addedChange)="onGroupAddedChange($event)"
         (layerAddedChange)="onLayerAddedChange($event)">
       </igo-catalog-browser-group>

diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.ts b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.ts
@@ -52,6 +52,11 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
    */
   @Input() map: IgoMap;
 
+  /**
+   * Whether a group can be toggled when it's collapsed
+   */
+  @Input() toggleCollapsedGroup: boolean = true;
+
   constructor(
     private layerService: LayerService,
     private cdRef: ChangeDetectorRef