feat(context): import export context in demo (#1348)

* feat(context): import export context in demo

* refresh userControlledLayerList if import new context in context-import-export component

* solve lint

* add dependencies

* delete contextService from dependencies and change igo-context-import-export component in new app-example-viewer

demo/src/app/app.module.ts

@@ -123,7 +123,6 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
     AppWorkspaceModule,
 
     AppContextModule,
-
     AppRoutingModule,
 
     HammerModule

demo/src/app/context/context/context.component.html

@@ -1,8 +1,9 @@
 <app-doc-viewer
   title="Context"
   subtitle="Context"
-  [dependencies]="['LanguageService']"
+  [dependencies]="['LanguageService','mapService']"
 >
+
   <app-example-viewer codeFolder="context/context" configFolder="contexts">
     <mat-grid-list cols="2" rowHeight="500px" gutterSize="16px">
       <mat-grid-tile>
@@ -30,14 +31,14 @@
       </mat-grid-tile>
       <mat-grid-tile>
         <div class="flex flex-col align-start h-100 w-100">
-          <igo-panel title="Contexts list" class="w-100">
+          <igo-panel title="Contexts list" class="h-100 w-100">
             <igo-context-list
               igoContextListBinding
               [map]="map"
             ></igo-context-list>
           </igo-panel>
 
-          <igo-panel title="Layers" class="w-100">
+          <igo-panel title="Layers" class="h-100 w-100">
             <igo-layer-list igoLayerListBinding [map]="map">
               <ng-template #igoLayerItemToolbar let-layer="layer">
                 <igo-metadata-button [layer]="layer"></igo-metadata-button>
@@ -47,5 +48,10 @@
         </div>
       </mat-grid-tile>
     </mat-grid-list>
+
+  </app-example-viewer>
+
+  <app-example-viewer title="Import/Export context" codeFolder="context/context" configFolder="contexts">
+    <igo-context-import-export [map]="map"></igo-context-import-export>
   </app-example-viewer>
 </app-doc-viewer>

demo/src/app/context/context/context.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ContextService } from '@igo2/context';
 
 import { LanguageService } from '@igo2/core';
 import { IgoMap, MapService } from '@igo2/geo';
@@ -25,7 +26,10 @@ export class AppContextComponent {
   constructor(
     private languageService: LanguageService,
     private mapService: MapService,
+    private contextService: ContextService,
   ) {
     this.mapService.setMap(this.map);
+    this.contextService.loadDefaultContext();
+    this.contextService.loadContexts();
   }
 }

demo/src/app/context/context/context.module.ts

@@ -9,7 +9,7 @@ import {
   IgoQueryModule,
   IgoFeatureModule
 } from '@igo2/geo';
-import { IgoContextManagerModule } from '@igo2/context';
+import { IgoContextModule } from '@igo2/context';
 
 import { AppContextComponent } from './context.component';
 import { AppContextRoutingModule } from './context-routing.module';
@@ -28,7 +28,7 @@ import { SharedModule } from '../../shared/shared.module';
     IgoOverlayModule,
     IgoQueryModule,
     IgoFeatureModule,
-    IgoContextManagerModule
+    IgoContextModule
   ],
   exports: [AppContextComponent]
 })

packages/context/src/lib/context-import-export/context-import-export/context-import-export.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { MessageService, ConfigService } from '@igo2/core';
@@ -23,7 +23,7 @@ import { DetailedContext } from '../../context-manager/shared/context.interface'
   templateUrl: './context-import-export.component.html',
   styleUrls: ['./context-import-export.component.scss']
 })
-export class ContextImportExportComponent implements OnInit {
+export class ContextImportExportComponent implements OnInit, OnDestroy {
   public form: UntypedFormGroup;
   public layers: VectorLayer[];
   public inputProj: string = 'EPSG:4326';
@@ -36,6 +36,8 @@ export class ContextImportExportComponent implements OnInit {
   public fileSizeMb: number;
   public activeImportExport: string = 'import';
 
+  private layers$$: Subscription;
+
   @Input() map: IgoMap;
 
   constructor(
@@ -56,8 +58,10 @@ export class ContextImportExportComponent implements OnInit {
     this.clientSideFileSizeMax =
       (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);
+    this.layers$$ = this.map.layers$.subscribe(() => {
+      this.layerList = this.contextService.getContextLayers(this.map);
+      this.userControlledLayerList = this.layerList.filter(layer => layer.showInLayerList);
+    });
   }
 
   importFiles(files: File[]) {
@@ -139,4 +143,8 @@ export class ContextImportExportComponent implements OnInit {
   onImportExportChange(event) {
     this.activeImportExport = event.value;
   }
+
+  ngOnDestroy(): void {
+    this.layers$$.unsubscribe();
+  }
 }