feat(imported vector): allow to store vector data and layer in indexeddb

packages/context/src/lib/context-manager/shared/layer-context.directive.ts

@@ -91,17 +91,7 @@ export class LayerContextDirective implements OnInit, OnDestroy {
     layersAndIndex$
       .pipe(buffer(layersAndIndex$.pipe(debounceTime(500))))
       .subscribe((layers: Layer[]) => {
-        layers = layers
-          .filter((layer: Layer) => layer !== undefined)
-          .map((layer) => {
-            layer.visible = this.computeLayerVisibilityFromUrl(layer);
-            layer.zIndex = layer.zIndex;
-
-            return layer;
-          });
-
-        this.contextLayers.concat(layers);
-        this.map.addLayers(layers);
+        this.handleAddLayers(layers);
 
         if (context.extraFeatures) {
           context.extraFeatures.forEach((featureCollection) => {
@@ -137,6 +127,23 @@ export class LayerContextDirective implements OnInit, OnDestroy {
           });
         }
       });
+
+      this.layerService.createAsyncIdbLayers(context.uri).pipe(debounceTime(500))
+      .subscribe((layers: Layer[]) => this.handleAddLayers(layers));
+
+  }
+
+  private handleAddLayers(layers: Layer[]) {
+    layers = layers
+      .filter((layer: Layer) => layer !== undefined)
+      .map((layer) => {
+        layer.visible = this.computeLayerVisibilityFromUrl(layer);
+        layer.zIndex = layer.zIndex;
+
+        return layer;
+      });
+    this.contextLayers.concat(layers);
+    this.map.addLayers(layers);
   }
 
   private computeLayerVisibilityFromUrl(layer: Layer): boolean {

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

@@ -43,7 +43,7 @@ import {
 import { StyleService } from '../../style/style-service/style.service';
 import { StyleListService } from '../../style/style-list/style-list.service';
 import { skipWhile } from 'rxjs/operators';
-import { EntityRecord, Workspace } from '@igo2/common';
+import { ConfirmDialogService, EntityRecord, Workspace } from '@igo2/common';
 import type { WorkspaceStore } from '@igo2/common';
 import { WfsWorkspace } from '../../workspace/shared/wfs-workspace';
 import { EditionWorkspace } from '../../workspace/shared/edition-workspace';
@@ -56,6 +56,7 @@ import { computeProjectionsConstraints } from '../../map';
 import olVectorSource from 'ol/source/Vector';
 import olClusterSource from 'ol/source/Cluster';
 import type { default as OlGeometry } from 'ol/geom/Geometry';
+import { LayerService } from '../../layer/shared/layer.service';
 import { ImportExportServiceOptions } from '../shared/import.interface';
 
 @Component({
@@ -107,6 +108,8 @@ export class ImportExportComponent implements OnDestroy, OnInit {
 
   @Input() map: IgoMap;
 
+  @Input() contextUri: string;
+
   private _projectionsLimitations: ProjectionsLimitationsOptions = {};
   @Input()
   set projectionsLimitations(value: ProjectionsLimitationsOptions) {
@@ -165,7 +168,9 @@ export class ImportExportComponent implements OnDestroy, OnInit {
     private config: ConfigService,
     private cdRef: ChangeDetectorRef,
     private storageService: StorageService,
-    private downloadService: DownloadService
+    private downloadService: DownloadService,
+    private layerService: LayerService,
+    private confirmDialogService: ConfirmDialogService
   ) {
     this.loadConfig();
     this.buildForm();
@@ -743,6 +748,7 @@ export class ImportExportComponent implements OnDestroy, OnInit {
 
   private onFileImportSuccess(file: File, features: Feature[]) {
     const importExportOptions = this.config.getConfig('importExport') as ImportExportServiceOptions;
+    const confirmDialogService = importExportOptions?.allowToStoreLayer ? this.confirmDialogService : undefined;
     const importWithStyle =importExportOptions?.importWithStyle || this.config.getConfig('importWithStyle');
     if (this.config.getConfig('importWithStyle')) {
       console.warn(`
@@ -758,14 +764,20 @@ export class ImportExportComponent implements OnDestroy, OnInit {
         file,
         features,
         this.map,
-        this.messageService
+        this.contextUri,
+        this.messageService,
+        this.layerService,
+        confirmDialogService
       );
     } else {
       handleFileImportSuccess(
         file,
         features,
         this.map,
+        this.contextUri,
         this.messageService,
+        this.layerService,
+        confirmDialogService,
         this.styleListService,
         this.styleService
       );

packages/geo/src/lib/import-export/shared/drop-geo-file.directive.ts

@@ -1,9 +1,9 @@
-import { Directive, HostListener, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Directive, HostListener, EventEmitter, OnInit, OnDestroy, Input } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 
 import { MessageService, ConfigService } from '@igo2/core';
-import { DragAndDropDirective } from '@igo2/common';
+import { ConfirmDialogService, DragAndDropDirective } from '@igo2/common';
 
 import { Feature } from '../../feature/shared/feature.interfaces';
 import { IgoMap } from '../../map/shared/map';
@@ -13,6 +13,7 @@ import { handleFileImportSuccess, handleFileImportError } from '../shared/import
 import { StyleService } from '../../style/style-service/style.service';
 import { StyleListService } from '../../style/style-list/style-list.service';
 import { concatMap, first, skipWhile } from 'rxjs/operators';
+import { LayerService } from '../../layer/shared/layer.service';
 import { ImportExportServiceOptions } from './import.interface';
 
 @Directive({
@@ -30,13 +31,17 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
     return this.component.map;
   }
 
+  @Input() contextUri: string;
+
   constructor(
     private component: MapBrowserComponent,
     private importService: ImportService,
     private styleListService: StyleListService,
     private styleService: StyleService,
     private config: ConfigService,
-    private messageService: MessageService
+    private messageService: MessageService,
+    private layerService: LayerService,
+    private confirmDialogService: ConfirmDialogService
   ) {
     super();
   }
@@ -140,11 +145,19 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
       This legacy conversion will be deleted in 2024.
       `);
     }
+    const confirmDialogService = importExportOptions?.allowToStoreLayer ? this.confirmDialogService : undefined;
     if (!importWithStyle) {
-      handleFileImportSuccess(file, features, this.map, this.messageService);
+      handleFileImportSuccess(
+        file,
+        features,
+        this.map,
+        this.contextUri,
+        this.messageService,
+        this.layerService,
+        confirmDialogService);
     } else {
-      handleFileImportSuccess(file, features, this.map, this.messageService,
-                               this.styleListService, this.styleService);
+      handleFileImportSuccess(file, features, this.map, this.contextUri, this.messageService,
+        this.layerService, confirmDialogService, this.styleListService, this.styleService);
     }
   }
 

packages/geo/src/lib/import-export/shared/import.interface.ts

@@ -6,5 +6,6 @@ export interface ImportExportServiceOptions {
   forceNaming?: boolean;
   formats?: ExportFormat[];
   configFileToGeoDBService?: string;
+  allowToStoreLayer?: boolean;
   importWithStyle?: boolean;
 }

packages/geo/src/lib/import-export/shared/import.utils.ts

@@ -19,17 +19,25 @@ import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-d
 import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface';
 import { uuid } from '@igo2/utils';
 import { featureRandomStyle, featureRandomStyleFunction } from '../../style/shared/feature/feature-style';
+import { LayerService } from '../../layer/shared/layer.service';
+import { ConfirmDialogService } from '@igo2/common';
+import { first, of } from 'rxjs';
 
 export function addLayerAndFeaturesToMap(
   features: Feature[],
   map: IgoMap,
-  layerTitle: string
+  contextUri: string,
+  layerTitle: string,
+  layerService: LayerService,
+  storeToIdb: boolean = false
 ): VectorLayer {
   const olFeatures = features.map((feature: Feature) =>
     featureToOl(feature, map.projection)
   );
 
+  const id = uuid();
   const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
+    id,
     type: 'vector',
     queryable: true
   };
@@ -45,14 +53,16 @@ export function addLayerAndFeaturesToMap(
     randomStyle = featureRandomStyle();
     editable = true;
   }
-  const layer = new VectorLayer({
+  const layer = layerService.createLayer({
+    id,
     title: layerTitle,
     workspace: { enabled: true, searchIndexEnabled: true },
     isIgoInternalLayer: true,
     source,
     igoStyle: { editable },
+    idbInfo: { firstLoad: true, storeToIdb, contextUri: contextUri || '*' },
     style: randomStyle
-  });
+  }) as VectorLayer;
   layer.setExtent(computeOlFeaturesExtent(map, olFeatures));
   map.addLayer(layer);
   moveToOlFeatures(map, olFeatures);
@@ -182,11 +192,18 @@ export function addLayerAndFeaturesStyledToMap(
   return layer;
 }
 
+function padTo2Digits(num) {
+  return num.toString().padStart(2, '0');
+}
+
 export function handleFileImportSuccess(
   file: File,
   features: Feature[],
   map: IgoMap,
+  contextUri: string,
   messageService: MessageService,
+  layerService: LayerService,
+  confirmDialogService?: ConfirmDialogService,
   styleListService?: StyleListService,
   styleService?: StyleService
 ) {
@@ -195,24 +212,39 @@ export function handleFileImportSuccess(
     return;
   }
 
-  const layerTitle = computeLayerTitleFromFile(file);
+  let layerTitle = computeLayerTitleFromFile(file);
 
-  if (!styleListService) {
-    addLayerAndFeaturesToMap(features, map, layerTitle);
-  } else {
-    addLayerAndFeaturesStyledToMap(
-      features,
-      map,
-      layerTitle,
-      styleListService,
-      styleService
-    );
-  }
-  messageService.success(
-    'igo.geo.dropGeoFile.success.text',
-    'igo.geo.dropGeoFile.success.title',
-    undefined,
-    { value: layerTitle });
+  const obs$ = confirmDialogService ? confirmDialogService.open('igo.geo.import.promptStoreToIdb') : of(false);
+
+  obs$.pipe(first()).subscribe((confirm) => {
+    const d = new Date();
+    const dformat =
+    [d.getFullYear(),
+      padTo2Digits(d.getMonth() + 1),
+      padTo2Digits(d.getDate()), ].join('/') +
+    ' ' +
+    [padTo2Digits(d.getHours()),padTo2Digits(d.getMinutes())].join(':');
+
+
+    layerTitle = confirm ? `${layerTitle} (${dformat})` : layerTitle;
+    if (!styleListService) {
+      addLayerAndFeaturesToMap(features, map, contextUri, layerTitle, layerService, confirm);
+    } else {
+      addLayerAndFeaturesStyledToMap(
+        features,
+        map,
+        layerTitle,
+        styleListService,
+        styleService
+      );
+    }
+
+    messageService.success(
+      'igo.geo.dropGeoFile.success.text',
+      'igo.geo.dropGeoFile.success.title',
+      undefined,
+      { value: layerTitle });
+  });
 }
 
 export function handleFileImportError(