feat(workspace): enabling table view for vector layers (#667)

* feat(layer) feature layer stored in a store now have a inMapExtent state * feat(workspace-state) active widget subscription * feat(workspace) monitor a tool to activate on workspace * feat(workspace) Feature datasource (imported or url based) now get a workspace * feat(workspace) adjust actions/widget for wfs * wip * feat(workspace) Add a table template if no sourceFields provided * refactor(loading-layer) adjust store for cluster datasource * wip * feat(workspace) creation of a workspace button * feat(map integration) adding the workspace button * wip * wip * refactor(workspace-button) moving from package geo to integration * wip * refactor(workspace-selector) review * wip * feat(featureStore) in map extent state strategy * wip * wip * refactor(workspace) tableTemplate in wfs/feature workspace * fix(cluster) cluster base style creation. * wip * feat(workspace) new directive to monitor if workspaces are available. * wip review * travis * feat(libs): upgrade librairies (#696) * chore(utils): bowser version * fix(spatial-filter): fix spatial filter 1.4 (#697) * fix(layer-list-tool) alphaSort icon name tooltip (#700) Co-authored-by: Josée Martel <[email protected]> * feat(interactiveTour + welcomeWindows): add new component and service (#701) * tour * lint * feat add noBackButton on step Co-authored-by: Marc-André Barbeau <[email protected]> Co-authored-by: Josée Martel <[email protected]> * wip * wip * wip handling zoom auto on row selection in table * wip review on tool to activate by workspace * wip * wip * wip * wip * fix(layer-legend.component) Fix param legendOptions.display: false (#703) * travis * feat(libs): upgrade librairies (#696) * chore(utils): bowser version * fix(spatial-filter): fix spatial filter 1.4 (#697) * fix bug legend param display:false * fix exemple legend param * rebase Co-authored-by: Marc-André Barbeau <[email protected]> Co-authored-by: Philippe Lafrenière <[email protected]> Co-authored-by: Josée Martel <[email protected]> * feature(geo) Moving two common vector styling function into geo/utils for shared usage between components * feat(workspace) applying vector style to selected entities * feat((workspace) clear selection button * feat(workspace) allow multiple selection by dragbox * feat(workspace) action to show only selected record * feat(entity-table): add pagination (#707) * feat(entity-table) Pagination * lint * wip * chore(build): build warn ng-packagr No name was provided for external module * wip * refactor(entity-table-paginator) refector individual input as options * Update workspace.component.ts * wip * Update entity-table-paginator.component.html * Update entity-table-paginator.component.ts * fix(context-service) refer to issue #702 - message stored in base.json * refactor(entity-table) translation and paginationOptions processing * fix(entity-table) deprecation warnint on event * fix(entity-table) wrong last record used when clicking on a row (outside checkbox) Co-authored-by: Marc-André Barbeau <[email protected]> * wip * fix(entity-table-paginator) missing subscription & lifecycle hook oninit instead of afterviewinit... * refactor(exportOptions) Renaming from layer to layers * feat(catalog): arcgis rest data catalog (#709) * WIP * WIP * WIP * WIP * feat(catalog): Allow arcGISRest data catalog * unnecessary changes * fix(interactive-tour): css fix for interactive tour (#708) * feat(import-export) vector - allow export selected features only IF workspace available. * feat(import-export) export - shorten selected layers in ui * fix(import-export) export - locale for select layers + style * (entity-table-paginator) button display in mobile * feat(igoQuery) Allow drag box selection with ctrl down * feat(query) allow dragbox event to select vector * fix(query) handling results from layers built from same feature * feat(storage) observable on key change/addition/deletion * feat(action) checkCondition is now an observable * refactor(workspace) moving workspace action into integration * feat(integration) new state for storage * wip * wip * refactor(workspace) tooltoactivate from geo package to toolstate (integration) * feat(tool-state) method to activate tool and options and opensidenav (if needed) * wip * fix(workspace) remove wms workspace creation * fix(tool.state) All 'constructor' signatures should be adjacent * wip - merge conflict resolution * fix(entity-table-paginator) fix the paginaor on input change * refactor(*) usign mediaservice.ismobile method instead of media value. * refactor(workspace) function name in lowercase * typo * Update entity-table-paginator.component.scss remove z-index * fix(entity-table) table datasource was not refeshed on store change. * fix(entity-table) on store change subscription and management * feat(entity-table) change the pageIndex if the selected entity is not in the current page. * wip lint * refactor(workspace) reorder the action list * wip * padding * feat(spatial-filter) add a table view on results * fix(workspace) inMapExtent strategy deletion on layer deletion. * fix(context-import-export) only show to user the layers shown in layer list. * typo * wip * fix(layer add) preview conflict with layer add (1st attempt to fix) * refactor(entity-table-paginator) removing icons for mobile * lint Co-authored-by: Marc-André Barbeau <[email protected]> Co-authored-by: Philippe Lafrenière <[email protected]> Co-authored-by: josee666 <[email protected]> Co-authored-by: Josée Martel <[email protected]> Co-authored-by: Marc-André Barbeau <[email protected]>
infra-geo-ouverte · Sep 21, 2020 · 66e5d83 · 66e5d83
1 parent 496e9bb
commit 66e5d83
Show file tree

Hide file tree

Showing 78 changed files with 1,693 additions and 220 deletions.
diff --git a/demo/src/app/geo/workspace/workspace.component.ts b/demo/src/app/geo/workspace/workspace.component.ts
@@ -19,6 +19,7 @@ import {
   WFSDataSourceOptions
 } from '@igo2/geo';
 import { MatPaginator } from '@angular/material/paginator';
+import { WorkspaceState } from '@igo2/integration';
 
 @Component({
   selector: 'app-workspace',
@@ -51,7 +52,9 @@ export class AppWorkspaceComponent implements OnInit {
     zoom: 5
   };
 
-  public workspaceStore = new WorkspaceStore([]);
+  get workspaceStore(): WorkspaceStore {
+    return this.workspaceState.store;
+  }
 
   public selectedWorkspace$: Observable<Workspace>;
 
@@ -62,7 +65,8 @@ export class AppWorkspaceComponent implements OnInit {
   constructor(
     private languageService: LanguageService,
     private dataSourceService: DataSourceService,
-    private layerService: LayerService
+    private layerService: LayerService,
+    public workspaceState: WorkspaceState,
   ) {}
 
   ngOnInit() {
@@ -80,7 +84,6 @@ export class AppWorkspaceComponent implements OnInit {
             // This is why it's has been removed frome the actions's list.
             // Refer to the igo2 demo at https://infra-geo-ouverte.github.io/igo2/
             entity.actionStore.view.filter((action) => {
-              console.log('action', action);
               return action.id !== 'wfsDownload';
             });
           }

diff --git a/packages/common/src/lib/action/actionbar/actionbar-item.component.html b/packages/common/src/lib/action/actionbar/actionbar-item.component.html
@@ -21,7 +21,7 @@ <h4 *ngIf="withTitle" matLine>{{title | translate}}</h4>
   [ngClass]="ngClass$ | async">
   <mat-checkbox *ngIf="withTitle"
       (change)="action.handler()"
-      [checked]="action.checkCondition">
+      [checked]="checkCondition$ | async">
       {{title | translate}}
   </mat-checkbox>
 </mat-list-item>
diff --git a/packages/common/src/lib/action/actionbar/actionbar-item.component.ts b/packages/common/src/lib/action/actionbar/actionbar-item.component.ts
@@ -25,6 +25,8 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
 
   readonly disabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  readonly checkCondition$: BehaviorSubject<boolean> = new BehaviorSubject(undefined);
+
   readonly icon$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   readonly tooltip$: BehaviorSubject<string> = new BehaviorSubject(undefined);
@@ -41,6 +43,8 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
 
   private icon$$: Subscription;
 
+  private checkCondition$$: Subscription;
+
   private tooltip$$: Subscription;
 
   private noDisplay$$: Subscription;
@@ -113,6 +117,13 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
       this.updateIcon(this.action.icon);
     }
 
+    if (isObservable(this.action.checkCondition)) {
+      this.checkCondition$$ = this.action.checkCondition
+        .subscribe((checkCondition: boolean) => this.updateCheckCondition(checkCondition));
+    } else {
+      this.updateCheckCondition(this.action.checkCondition);
+    }
+
     if (isObservable(this.action.tooltip)) {
       this.tooltip$$ = this.action.tooltip
         .subscribe((tooltip: string) => this.updateTooltip(tooltip));
@@ -153,6 +164,11 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
       this.display$$ = undefined;
     }
 
+    if (this.checkCondition$$ !== undefined) {
+      this.checkCondition$$.unsubscribe();
+      this.checkCondition$$ = undefined;
+    }
+
     if (this.icon$$ !== undefined) {
       this.icon$$.unsubscribe();
       this.icon$$ = undefined;
@@ -187,6 +203,10 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
     this.tooltip$.next(tooltip);
   }
 
+  private updateCheckCondition(checkCondition: boolean) {
+    this.checkCondition$.next(checkCondition);
+  }
+
   private updateIcon(icon: string) {
     this.icon$.next(icon);
   }

diff --git a/packages/common/src/lib/action/shared/action.interfaces.ts b/packages/common/src/lib/action/shared/action.interfaces.ts
@@ -8,7 +8,7 @@ export interface Action {
   tooltip?: string | Observable<string>;
   args?: any[];
   checkbox?: boolean;
-  checkCondition?: boolean;
+  checkCondition?: boolean | Observable<boolean>;
   display?: (...args: any[]) => Observable<boolean>;
   availability?: (...args: any[]) => Observable<boolean>;
   ngClass?: (...args: any[]) => Observable<{[key: string]: boolean}>;

diff --git a/packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.scss b/packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.scss
@@ -0,0 +1,11 @@
+@import '../../../../../core/src/style/partial/media';
+
+:host{
+  margin-top: -10px;
+  padding-right: 15px;
+
+  @include mobile {
+    margin-top: 0px;
+    padding-right: 5px;
+  }
+}
diff --git a/packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.ts b/packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.ts
@@ -2,7 +2,7 @@ import {
   Component,
   Input,
   ChangeDetectionStrategy,
-  OnInit,
+  OnChanges,
   ViewChild,
   Output,
   EventEmitter,
@@ -14,7 +14,7 @@ import {
 } from '../shared';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { LanguageService } from '@igo2/core';
+import { LanguageService, MediaService } from '@igo2/core';
 import { EntityTablePaginatorOptions } from './entity-table-paginator.interface';
 
 @Component({
@@ -23,14 +23,15 @@ import { EntityTablePaginatorOptions } from './entity-table-paginator.interface'
   styleUrls: ['./entity-table-paginator.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EntityTablePaginatorComponent implements OnInit, OnDestroy {
+export class EntityTablePaginatorComponent implements OnChanges, OnDestroy {
 
   public disabled: boolean = false;
   public hidePageSize: boolean = false;
   public pageIndex: number = 0;
   public pageSize: number = 50;
   public pageSizeOptions: number[] = [5, 10, 20, 50, 100, 200];
   public showFirstLastButtons: boolean = true;
+  private count$$: Subscription;
   private entitySortChange$$: Subscription;
   private paginationLabelTranslation$$: Subscription[] = [];
 
@@ -58,12 +59,13 @@ export class EntityTablePaginatorComponent implements OnInit, OnDestroy {
    */
   @Output() paginatorChange: EventEmitter<MatPaginator> = new EventEmitter<MatPaginator>();
 
-  constructor(private languageService: LanguageService) { }
+  constructor(private languageService: LanguageService, private mediaService: MediaService) {}
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  ngOnInit() {
-    this.store.stateView.count$.subscribe((count) => {
+  ngOnChanges() {
+    this.unsubscribeAll();
+    this.count$$ = this.store.stateView.count$.subscribe((count) => {
       this.length = count;
       this.emitPaginator();
     });
@@ -78,11 +80,16 @@ export class EntityTablePaginatorComponent implements OnInit, OnDestroy {
 
   initPaginatorOptions() {
     this.disabled = this.paginatorOptions?.disabled || this.disabled;
-    this.hidePageSize = this.paginatorOptions?.hidePageSize || this.hidePageSize;
     this.pageIndex = this.paginatorOptions?.pageIndex || this.pageIndex;
     this.pageSize = this.paginatorOptions?.pageSize || this.pageSize;
     this.pageSizeOptions = this.paginatorOptions?.pageSizeOptions || this.pageSizeOptions;
-    this.showFirstLastButtons = this.paginatorOptions?.showFirstLastButtons || this.showFirstLastButtons;
+    if (this.mediaService.isMobile()) {
+      this.showFirstLastButtons = false;
+      this.hidePageSize = true;
+    } else {
+      this.showFirstLastButtons = this.paginatorOptions?.showFirstLastButtons || this.showFirstLastButtons;
+      this.hidePageSize = this.paginatorOptions?.hidePageSize || this.hidePageSize;
+    }
   }
 
   translateLabels() {
@@ -128,9 +135,14 @@ export class EntityTablePaginatorComponent implements OnInit, OnDestroy {
     return `${startIndex + 1} - ${endIndex} ${of.value} ${length}`;
   }
 
-  ngOnDestroy(): void {
-    this.entitySortChange$$.unsubscribe();
+  private unsubscribeAll() {
     this.paginationLabelTranslation$$.map(sub => sub.unsubscribe());
+    if (this.count$$) { this.count$$.unsubscribe(); }
+    if (this.entitySortChange$$) { this.entitySortChange$$.unsubscribe(); }
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
   }
 
   emitPaginator() {

diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.scss b/packages/common/src/lib/entity/entity-table/entity-table.component.scss
@@ -28,6 +28,10 @@
   word-wrap: break-word;
 }
 
+th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+  padding: 0 3px;
+}
+
 entity-table table.igo-entity-table-with-selection tr:hover {
   -moz-box-shadow: 2px 0px 2px 0px #dddddd;
   -webkit-box-shadow: 2px 0px 2px 0px #dddddd;

diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.ts b/packages/common/src/lib/entity/entity-table/entity-table.component.ts
@@ -7,7 +7,8 @@ import {
   ChangeDetectorRef,
   OnInit,
   OnDestroy,
-  AfterViewInit
+  OnChanges,
+  SimpleChanges
 } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
@@ -33,7 +34,7 @@ import { EntityTablePaginatorOptions } from '../entity-table-paginator/entity-ta
   styleUrls: ['./entity-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EntityTableComponent implements OnInit, OnDestroy, AfterViewInit  {
+export class EntityTableComponent implements OnInit, OnChanges, OnDestroy  {
 
   entitySortChange$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
@@ -78,7 +79,7 @@ export class EntityTableComponent implements OnInit, OnDestroy, AfterViewInit  {
   @Input() store: EntityStore<object>;
 
   /**
-   * Table paginator store
+   * Table paginator
    */
   @Input() set paginator(value: MatPaginator) {
     this._paginator = value;
@@ -132,7 +133,7 @@ export class EntityTableComponent implements OnInit, OnDestroy, AfterViewInit  {
   }>();
 
   /**
-   * Event emitted when an entity (row) is selected
+   * Event emitted when the table sort is changed.
    */
   @Output() entitySortChange: EventEmitter<{column: EntityTableColumn, direction: string}> = new EventEmitter(undefined);
 
@@ -189,28 +190,60 @@ export class EntityTableComponent implements OnInit, OnDestroy, AfterViewInit  {
    * @internal
    */
   ngOnInit() {
+    this.handleDatasource();
+    this.dataSource.paginator = this.paginator;
+  }
+
+  /**
+   * @internal
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    const store = changes.store;
+    if (store && store.currentValue !== store.previousValue) {
+      this.handleDatasource();
+    }
+  }
+
+  private handleDatasource() {
+    this.unsubscribeStore();
     this.selection$$ = this.store.stateView
       .manyBy$((record: EntityRecord<object>) => record.state.selected === true)
       .subscribe((records: EntityRecord<object>[]) => {
+        const firstSelected = records[0];
+        const firstSelectedStateviewPosition = this.store.stateView.all().indexOf(firstSelected);
+        const pageMax = this.paginator.pageSize * (this.paginator.pageIndex + 1);
+        const pageMin = pageMax - this.paginator.pageSize;
+
+        if (
+          this.paginator &&
+          firstSelectedStateviewPosition < pageMin ||
+          firstSelectedStateviewPosition >= pageMax) {
+          const pageToReach = Math.floor(firstSelectedStateviewPosition / this.paginator.pageSize);
+          this.dataSource.paginator.pageIndex = pageToReach;
+        }
         this.selectionState$.next(this.computeSelectionState(records));
       });
-
     this.dataSource$$ = this.store.stateView.all$().subscribe((all) => {
       this.dataSource.data = all;
     });
-  }
 
-  ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
   }
 
   /**
    * Unbind the store watcher
    * @internal
    */
   ngOnDestroy() {
-    this.selection$$.unsubscribe();
-    this.dataSource$$.unsubscribe();
+    this.unsubscribeStore();
+  }
+
+  private unsubscribeStore() {
+    if (this.selection$$) {
+      this.selection$$.unsubscribe();
+    }
+    if (this.dataSource$$) {
+      this.dataSource$$.unsubscribe();
+    }
   }
 
   /**

diff --git a/packages/common/src/lib/flexible/flexible.component.ts b/packages/common/src/lib/flexible/flexible.component.ts
@@ -88,8 +88,7 @@ export class FlexibleComponent implements OnInit {
       expanded: this.expanded
     };
 
-    const media = this.mediaService.media$.value;
-    if (media === 'mobile') {
+    if (this.mediaService.isMobile()) {
       Object.assign(sizes, {
         initial: this.initialMobile,
         collapsed: this.collapsedMobile,

diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.service.ts b/packages/common/src/lib/interactive-tour/interactive-tour.service.ts
@@ -35,12 +35,7 @@ export class InteractiveTourService {
   }
 
   public isMobile(): boolean {
-    const media = this.mediaService.getMedia();
-    if (media === 'mobile') {
-      return true;
-    } else {
-      return false;
-    }
+    return this.mediaService.isMobile();
   }
 
   public isTourDisplayInMobile(): boolean {

diff --git a/.../src/lib/context-import-export/context-import-export/context-import-export.component.html b/.../src/lib/context-import-export/context-import-export/context-import-export.component.html
@@ -50,7 +50,7 @@ <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>
                     {{'igo.context.contextImportExport.export.exportSelectAll' | translate}}
                 </mat-option>
                 <mat-divider></mat-divider>
-                <mat-option *ngFor="let layer of layerList" [value]="layer">{{layer.title}}</mat-option>
+                <mat-option *ngFor="let layer of userControlledLayerList" [value]="layer">{{layer.title}}</mat-option>
             </mat-select>
         </mat-form-field>
     </div>

diff --git a/...xt/src/lib/context-import-export/context-import-export/context-import-export.component.ts b/...xt/src/lib/context-import-export/context-import-export/context-import-export.component.ts
@@ -29,6 +29,7 @@ export class ContextImportExportComponent implements OnInit {
   public loading$ = new BehaviorSubject(false);
   public forceNaming = false;
   public layerList: Layer[];
+  public userControlledLayerList: Layer[];
   public res: DetailedContext;
   private clientSideFileSizeMax: number;
   public fileSizeMb: number;
@@ -56,6 +57,7 @@ export class ContextImportExportComponent implements OnInit {
       (configFileSizeMb ? configFileSizeMb : 30) * Math.pow(1024, 2);
     this.fileSizeMb = this.clientSideFileSizeMax / Math.pow(1024, 2);
     this.layerList = this.contextService.getContextLayers(this.map);
+    this.userControlledLayerList = this.layerList.filter(layer => layer.showInLayerList);
   }
 
   importFiles(files: File[]) {
@@ -128,7 +130,7 @@ export class ContextImportExportComponent implements OnInit {
 
   selectAll(e) {
     if (e._selected) {
-      this.form.controls.layers.setValue(this.layerList);
+      this.form.controls.layers.setValue(this.userControlledLayerList);
       e._selected = true;
     }
     if (e._selected === false) {

diff --git a/packages/core/src/lib/media/media.service.ts b/packages/core/src/lib/media/media.service.ts
@@ -69,4 +69,9 @@ export class MediaService {
   isTouchScreen(): boolean {
     return 'ontouchstart' in document.documentElement ? true : false;
   }
+
+  isMobile(): boolean {
+    const media = this.getMedia();
+    return media === 'mobile';
+  }
 }