Fix saving the preview

src/app/app.component.html

@@ -27,4 +27,9 @@
 <ngx-spinner bdOpacity="0.2" bdColor="rgba(51,51,51,0.6)" size="medium" color="#fff" type="ball-clip-rotate-pulse"
   fullScreen="true">
   <p style="color: white"> {{'Loading...' | translate }} </p>
+</ngx-spinner>
+
+<ngx-spinner [name]="'saveconfig'" bdOpacity="0.2" bdColor="rgba(51,51,51,0.6)" size="medium" color="#fff" type="ball-clip-rotate-pulse"
+  fullScreen="true">
+  <p style="color: white"> {{'Saving...' | translate }} </p>
 </ngx-spinner>

src/app/components/landing-page/landing-page.component.ts

@@ -301,7 +301,6 @@ export class LandingPageComponent implements OnInit, AfterViewInit, OnDestroy {
     this.persistenceService.get(id).subscribe((data: DataWithLinks) => {
       this.mainFormService.configurationName = data.doc_key;
       this.mainFormService.configurationId = id;
-      this.mainFormService.dashboard = data;
       const configJson = JSON.parse(data.doc_value) as Config;
       if (configJson.arlas !== undefined) {
         const configMapJson = configJson.arlas.web.components.mapgl.input.mapLayers as MapConfig;

src/app/modules/map-config/components/preview/preview.component.html

@@ -11,8 +11,8 @@
   (visualisations)="changeVisualisation($event)" (onAoiChanged)="onChangeAoi($event)" (onMove)="onMove($event)">
 </arlas-mapgl>
 
-<button class="preview" mat-raised-button [disabled]="!configId" (click)="savePreview()"
-  [matTooltip]="(configId ? 'Use the map view as a dashboard preview on the ARLAS Hub' : 'You need to save your dashbord first in order to save a map preview.') | translate" matTooltipPosition="below">
+<button class="preview" mat-raised-button (click)="savePreview()"
+  [matTooltip]="'Use the map view as a dashboard preview on the ARLAS Hub' | translate" matTooltipPosition="below">
   {{'Save preview' | translate}}
 </button>
 

src/app/modules/map-config/components/preview/preview.component.ts

@@ -29,7 +29,7 @@ import { StartupService, ZONE_PREVIEW } from '@services/startup/startup.service'
 import { ArlasColorService, MapglComponent } from 'arlas-web-components';
 import { MapContributor } from 'arlas-web-contributors';
 import { ArlasCollaborativesearchService, ArlasConfigService, ContributorBuilder, PersistenceService } from 'arlas-wui-toolkit';
-import { catchError, map, merge, Observable, of, Subscription, tap, throwError } from 'rxjs';
+import { catchError, map, merge, mergeMap, Observable, of, Subscription, tap, throwError } from 'rxjs';
 import { ArlasSettingsService } from 'arlas-wui-toolkit';
 import { DataWithLinks } from 'arlas-persistence-api';
 
@@ -55,7 +55,6 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
   public mapLegendUpdater;
   public mapVisibilityUpdater;
   public mainMapContributor;
-  public configId;
 
   public constructor(
     protected mainFormService: MainFormService,
@@ -71,7 +70,6 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
     private settingsService: ArlasSettingsService,
     @Inject(MAT_DIALOG_DATA) public dataMap: MapglComponentInput
   ) {
-    this.configId = this.mainFormService.configurationId;
     if (this.dataMap.mapglContributors !== undefined || this.dataMap.mapComponentConfig !== undefined) {
       this.mapglContributors = dataMap.mapglContributors;
       this.mapComponentConfig = dataMap.mapComponentConfig.input;
@@ -187,23 +185,27 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
       context.drawImage(mapCanvas, 0, 0);
       img = rescaledCanvas.toDataURL('image/png');
     }
+    const jsonifiedImg = JSON.stringify({img});
     this.mapglComponent.map.resize();
     const resourcesConfig = this.mainFormService.resourcesConfig.getFg();
     const previewId = resourcesConfig.customControls.resources.previewId.value;
-    if (!!this.mainFormService.dashboard) {
-      const currentConfig = this.mainFormService.dashboard;
-      const name = this.mainFormService.configurationName.concat('_preview');
-      const pGroups = this.persistenceService.dashboardToResourcesGroups(currentConfig.doc_readers, currentConfig.doc_writers);
-      this.previewExists$(previewId)
-        .pipe(
-          map(exists => this.createOrUpdatePreview$(exists, previewId, img, name, pGroups.readers, pGroups.writers)))
-        .subscribe({
-          complete: () => this.snackbar.open(this.translate.instant('Preview saved !'))
-        });
+    if (!!this.mainFormService.configurationId) {
+      this.persistenceService.get(this.mainFormService.configurationId).pipe(
+        map((currentConfig: DataWithLinks) => {
+          const name = this.mainFormService.configurationName.concat('_preview');
+          const pGroups = this.persistenceService.dashboardToResourcesGroups(currentConfig.doc_readers, currentConfig.doc_writers);
+          return this.previewExists$(previewId)
+            .pipe(
+              map(exists => this.createOrUpdatePreview$(exists, previewId, jsonifiedImg, name, pGroups.readers, pGroups.writers)))
+            .subscribe({
+              complete: () => this.snackbar.open(this.translate.instant('Preview saved !'))
+            });
+        })
+      ).subscribe();
     } else {
-      resourcesConfig.customControls.resources.previewValue.setValue(img);
+      resourcesConfig.customControls.resources.previewValue.setValue(jsonifiedImg);
       this.snackbar.open(
-        this.translate.instant('Preview saved !')
+        this.translate.instant('Preview saved temporarily. Save the dashboard to validate the preview too.')
       );
     }
   }
@@ -221,6 +223,8 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
     resourcesConfig.customControls.resources.previewValue.setValue(img);
     if (previewExists) {
       this.persistenceService.updateResource(previewId, previewReaders, previewWriters, img);
+      resourcesConfig.customControls.resources.previewId.setValue(previewId);
+    } else {
       this.persistenceService.create(ZONE_PREVIEW, name, img, previewReaders, previewWriters)
         .pipe(map((p: DataWithLinks) => {
           resourcesConfig.customControls.resources.previewId.setValue(p.id);

src/app/modules/map-config/services/map-import/map-import.service.ts

@@ -680,6 +680,10 @@ export class MapImportService {
       this.mainFormService.mapConfig.getBasemapsFg()
         .customControls.basemaps.push(new BasemapFormGroup(basemap.name, basemap.styleFile, basemap.image, basemap.type));
     });
+    if (basemaps.length === 0 && !!defaultBasemap) {
+      this.mainFormService.mapConfig.getBasemapsFg().customControls
+        .basemaps.push(new BasemapFormGroup(defaultBasemap.name, defaultBasemap.styleFile, defaultBasemap.image, defaultBasemap.type));
+    }
 
     this.importBasemap(defaultBasemap);
   }

src/app/services/main-form-manager/main-form-manager.service.ts

@@ -59,6 +59,7 @@ import { StartingConfigFormGroup } from '@services/starting-config-form-builder/
 import { Observable, catchError, map, of, tap } from 'rxjs';
 import { DataWithLinks } from 'arlas-persistence-api';
 import { ResourcesConfigFormGroup } from '@services/resources-form-builder/resources-config-form-builder.service';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Injectable({
   providedIn: 'root'
@@ -93,7 +94,8 @@ export class MainFormManagerService {
     private colorService: ArlasColorService,
     private router: Router,
     private arlasStartupService: ArlasStartupService,
-    private shortcutsService: ShortcutsService
+    private shortcutsService: ShortcutsService,
+    private spinner: NgxSpinnerService,
   ) { }
 
   /**
@@ -175,15 +177,18 @@ export class MainFormManagerService {
       generatedConfig.arlas.web.components.mapgl.input.visualisations_sets.forEach(vs => vs.layers = Array.from(vs.layers));
       if (this.mainFormService.configurationId) {
         // Update existing
+        this.spinner.show('saveconfig');
         this.updateDashboard(generatedConfig, generatedMapConfig, resourcesConfig);
       } else {
         // Create new config
         if (!!this.mainFormService.configurationName) {
+          this.spinner.show('saveconfig');
           this.createDashboard(this.mainFormService.configurationName, generatedConfig, generatedMapConfig);
         } else {
           const dialogRef = this.dialog.open(InputModalComponent);
           dialogRef.afterClosed().subscribe(configName => {
             if (!!configName) {
+              this.spinner.show('saveconfig');
               this.createDashboard(configName, generatedConfig, generatedMapConfig);
             }
           });
@@ -284,11 +289,13 @@ export class MainFormManagerService {
             const previewGroups = this.persistenceService.dashboardToResourcesGroups(data.doc_readers, data.doc_writers);
             this.persistenceService.updateResource(generatedConfig.resources.previewId, previewGroups.readers, previewGroups.writers);
           }
+          this.spinner.hide('saveconfig');
           this.snackbar.open(
             this.translate.instant('Dashboard updated !') + ' (' + this.mainFormService.configurationName + ')'
           );
         },
         error: (error) => {
+          this.spinner.hide('saveconfig');
           this.snackbar.open(this.translate.instant('Error : Dashboard not updated'));
           this.raiseError(error);
         }
@@ -376,12 +383,14 @@ export class MainFormManagerService {
               this.snackbar.open(
                 this.translate.instant('Dashboard saved !') + ' (' + configName + ')'
               );
+              this.spinner.hide('saveconfig');
               this.doImport(generatedConfig, generatedMapConfig);
               this.mainFormService.configurationId = data.id;
               this.mainFormService.configChange.next({ id: data.id, name: data.doc_key });
               this.router.navigate(['map-config'], { queryParamsHandling: 'preserve' });
             },
             error: (error) => {
+              this.spinner.hide('saveconfig');
               this.snackbar.open(this.translate.instant('Error : Dashboard not saved'));
               this.raiseError(error);
             }

src/app/services/main-form/main-form.service.ts

@@ -74,8 +74,6 @@ export class MainFormService {
 
   public configurationName: string;
 
-  public dashboard: DataWithLinks;
-
   public configChange: Subject<{ id: string; name: string; }> = new Subject<{ id: string; name: string; }>();
 
   public mainForm = new FormGroup({

src/app/services/startup/startup.service.ts

@@ -156,6 +156,7 @@ export class StartupService {
         } else { // IAM
           const authService: ArlasIamService = this.injector.get('ArlasIamService')[0];
           request.setRequestHeader('Authorization', 'Bearer ' + authService.getAccessToken());
+          request.setRequestHeader('Arlas-Org-Filter', authService.getOrganisation());
         }
       }
       request.send();

src/assets/i18n/en.json

@@ -27,6 +27,7 @@
 	"Select a config.json file": "Select a config.json file",
 	"Select a config.map.json file": "Select a config.map.json file",
 	"Importing dashboard...": "Importing dashboard...",
+	"Saving...": "Saving...",
 	"Available dashboards": "Available dashboards",
 	"Name": "Name",
 	"Last update": "Last update",
@@ -349,6 +350,7 @@
 	"Preview updated !": "Preview updated",
 	"Cannot update the preview": "",
 	"Preview saved !": "Preview saved !",
+	"Preview saved temporarily. Save the dashboard to validate the preview too.": "Preview saved temporarily. Save the dashboard to validate the preview too.",
 	"Cannot create the preview": "",
 	"Cannot fetch current config": "Cannot fetch the current dashboards' information",
 	"Cannot save Preview: You need to save the dashboard first": "",

src/assets/i18n/fr.json

@@ -27,6 +27,7 @@
 	"Select a config.json file": "Charger config.json",
 	"Select a config.map.json file": "Charger config.map.json",
 	"Importing dashboard...": "Import du dashboard...",
+	"Saving...": "Sauvegarde en cours ...",
 	"Available dashboards": "Dashboards disponibles",
 	"Name": "Nom",
 	"Last update": "Dernière modification",
@@ -349,6 +350,7 @@
 	"Preview updated !": "Aperçu mis à jour",
 	"Cannot update the preview": "Impossible de mettre à jour l'aperçu",
 	"Preview saved !": "Aperçu sauvegardé !",
+	"Preview saved temporarily. Save the dashboard to validate the preview too.": "L'aperçu est sauvegardé temporairement. Sauvegarder le dashboard pour valider également l'aperçu.",
 	"Cannot create the preview": "Impossible de créer l'aperçu",
 	"Cannot fetch current config": "Impossible de récupérer le dashbord actuel",
 	"Cannot save Preview: You need to save the dashboard first": "",

src/assets/i18n/template.json

@@ -27,6 +27,7 @@
 	"Select a config.json file": "Select a config.json file",
 	"Select a config.map.json file": "Select a config.map.json file",
 	"Importing dashboard...": "Importing dashboard...",
+	"Saving...": "Saving...",
 	"Available dashboards": "Available dashboards",
 	"Name": "Name",
 	"Last update": "Last update",
@@ -349,6 +350,7 @@
 	"Preview updated !": "Preview updated !",
 	"Cannot update the preview": "Cannot update the preview",
 	"Preview saved !": "Preview saved !",
+	"Preview saved temporarily. Save the dashboard to validate the preview too.": "Preview saved temporarily. Save the dashboard to validate the preview too.",
 	"Cannot create the preview": "Cannot create the preview",
 	"Cannot fetch current config": "Cannot fetch current config",
 	"Cannot save Preview: You need to save the dashboard first": "Cannot save Preview: You need to save the dashboard first",

src/settings.yaml

@@ -4,7 +4,7 @@
 authentication:
   use_authent: true
   auth_mode: iam
-  url: https://demo.cloud.staging.arlas.io/arlas/iam
+  url: http://mgoun/arlas_iam_server
   force_connect: false
   threshold: 60000
   use_discovery: false
@@ -24,19 +24,18 @@ authentication:
   storage: sessionstorage
   custom_query_params: [{"audience":"http://arlas.io/api/server"}]
 persistence:
-  url: 'https://demo.cloud.staging.arlas.io/arlas/persistence'
+  url: 'http://mgoun/arlas_persistence_server'
 ########################################################
 ############   Permissions SETTINGS   ##################
 ########################################################
 permission:
-  url: 'https://demo.cloud.staging.arlas.io/arlas/permissions'
+  url: http://mgoun/arlas_permissions_server
 ########################################################
 ############   URLs to WUI app   #######################
 ########################################################
 arlas_wui_url: "http://localhost:4200"
 links: [ { "icon": "lock", "name": "Google", "url": "http://www.google.com" }, { "icon": "public", "name": "Yahoo", "url": "http://www.yahoo.com" } ]
-basemaps: 
-  [
+basemaps: [
     {"name":"Basic","url":"https://api.maptiler.com/maps/basic/style.json?key=xIhbu1RwgdbxfZNmoXn4","image":"https://cloud.maptiler.com/static/img/maps/basic.png"},
     {"name":"Bright","url":"https://api.maptiler.com/maps/bright/style.json?key=xIhbu1RwgdbxfZNmoXn4","image":"https://cloud.maptiler.com/static/img/maps/bright.png"},
     {"name":"Outdoor","url":"https://api.maptiler.com/maps/outdoor/style.json?key=xIhbu1RwgdbxfZNmoXn4","image":"https://cloud.maptiler.com/static/img/maps/outdoor.png"},
@@ -53,7 +52,6 @@ basemaps:
     {"name":"Streets-light","url":"https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/style.json?key=xIhbu1RwgdbxfZNmoXn4","image":"https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/0/0/0.png?key=xIhbu1RwgdbxfZNmoXn4"},
     {"name":"Light Protomaps","url":"https://storage.googleapis.com/gisaia-public/protomaps/styles/light.json","image":"https://storage.googleapis.com/gisaia-public/protomaps/quicklooks/light.png", "type": "protomap"},
     {"name":"Dark Protomaps","url":"https://storage.googleapis.com/gisaia-public/protomaps/styles/dark.json","image":"https://storage.googleapis.com/gisaia-public/protomaps/quicklooks/dark.png", "type": "protomap"}
-
   ]
 tab_name: "ARLAS-wui-builder Dev"
 external_node_page: true