feat(tour): Context interactive tour (#751)

* feat(context/interactive-tour): modifs for context interactive tour * WIP * lint * delete unnecessary * WIP * WIP * WIP * WIP * feat/fix(interactive-tour): fix skipping element Co-authored-by: Marc-André Barbeau <[email protected]>
infra-geo-ouverte · Nov 16, 2020 · 70d0b8e · 70d0b8e
1 parent 805af11
commit 70d0b8e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 15 deletions.
diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.interface.ts b/packages/common/src/lib/interactive-tour/interactive-tour.interface.ts
@@ -35,5 +35,5 @@ export interface InteractiveTourOptions {
   /* Disable an interaction with element? */
   disableInteraction?: boolean;
   /* Element to check to be able to start the tour */
-  condition?: string;
+  conditions?: string[];
 }
diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.service.ts b/packages/common/src/lib/interactive-tour/interactive-tour.service.ts
@@ -14,6 +14,7 @@ import {
 })
 export class InteractiveTourService {
   private previousStep: InteractiveTourStep;
+  private nextIndex = 1;
 
   constructor(
     private configService: ConfigService,
@@ -52,9 +53,11 @@ export class InteractiveTourService {
       toolName
     );
 
-    if (stepConfig?.condition) {
-      if (document.querySelector(stepConfig.condition) === null) {
-        return true;
+    if (stepConfig?.conditions) {
+      for (const condition of stepConfig?.conditions) {
+        if (document.querySelector(condition) === null) {
+          return true;
+        }
       }
     }
     return false;
@@ -156,13 +159,8 @@ export class InteractiveTourService {
     const checkExist = setInterval(() => {
       if (self.getCurrentStep()) {
         if (self.getCurrentStep().options.attachTo.element && !document.querySelector(self.getCurrentStep().options.attachTo.element)) {
-          self.getCurrentStep().hide();
-          const id = self.getCurrentStep().id;
-          if (self.steps.findIndex(step => step.id === id) === self.steps.length - 1) {
-            return;
-          }
-          self.next();
-          self.removeStep(id);
+          self.cancel();
+          clearInterval(checkExist);
           return;
         } else {
           const currentStepElement = self.getCurrentStep().getElement();
@@ -198,6 +196,29 @@ export class InteractiveTourService {
     }, 100);
   }
 
+  private checkNext(index, tour, service) {
+    if (tour.getCurrentStep()) {
+      if (tour.getCurrentStep().options.attachTo.element && document.querySelector(tour.getCurrentStep().options.attachTo.element)) {
+        tour.complete();
+        return;
+      }
+
+      if (index.index === tour.steps.length - 1) {
+        tour.complete();
+        return;
+      }
+
+      tour.steps.splice(index.index, 1);
+      const nextStep = tour.steps[index.index];
+      if (nextStep.options.attachTo.element && !document.querySelector(nextStep.options.attachTo.element)) {
+        service.checkNext(index, tour, service);
+      } else {
+        tour._setupModal();
+        tour.show(nextStep.id);
+      }
+    }
+  }
+
   private executeAction(
     step: InteractiveTourStep,
     actionConfig: InteractiveTourAction
@@ -327,6 +348,9 @@ export class InteractiveTourService {
     this.shepherdService.addSteps(shepherdSteps);
 
     this.shepherdService.tourObject.on('show', this.addProgress);
+    this.shepherdService.tourObject.on('cancel', (index) => {
+      this.checkNext(index, this.shepherdService.tourObject, this);
+    });
 
     this.shepherdService.start();
   }

diff --git a/packages/context/src/lib/context-manager/context-item/context-item.component.html b/packages/context/src/lib/context-manager/context-item/context-item.component.html
@@ -19,6 +19,7 @@ <h4 matLine>{{context.title}}</h4>
        class="igo-actions-container">
 
      <button *ngIf="collapsed && selected && (context.permission === typePermission[typePermission.write] || context.imported)"
+       class="save-button"
        mat-icon-button
        [matTooltip]="'igo.context.contextManager.save' | translate"
        matTooltipShowDelay="500"
@@ -47,6 +48,7 @@ <h4 matLine>{{context.title}}</h4>
       </button-->
 
       <button *ngIf="!context.imported"
+        class="clone-button"
         mat-icon-button
         [matTooltip]="'igo.context.contextManager.clone' | translate"
         matTooltipShowDelay="500"
@@ -56,6 +58,7 @@ <h4 matLine>{{context.title}}</h4>
       </button>
 
       <button *ngIf="context.permission === typePermission[typePermission.write] && !context.imported"
+        class="edit-button"
         mat-icon-button
         [color]="color"
         [matTooltip]="'igo.context.contextManager.edit' | translate"
@@ -65,6 +68,7 @@ <h4 matLine>{{context.title}}</h4>
       </button>
 
       <button *ngIf="!context.hidden && !context.imported"
+        class="hide-button"
         mat-icon-button
         [color]="color"
         [matTooltip]="'igo.context.contextManager.hide' | translate"
@@ -74,6 +78,7 @@ <h4 matLine>{{context.title}}</h4>
       </button>
 
       <button *ngIf="context.hidden && !context.imported"
+        class="hide-button"
         mat-icon-button
         [color]="color"
         [matTooltip]="'igo.context.contextManager.show' | translate"
@@ -83,6 +88,7 @@ <h4 matLine>{{context.title}}</h4>
       </button>
 
       <button *ngIf="context.permission === typePermission[typePermission.write] || context.imported"
+        class="delete-button"
         mat-icon-button
         color="warn"
         [matTooltip]="'igo.context.contextManager.delete' | translate"
@@ -93,6 +99,7 @@ <h4 matLine>{{context.title}}</h4>
     </div>
 
     <button
+      class="actions-button"
       mat-icon-button
       igoCollapse
       [color]="color"

diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.html b/packages/context/src/lib/context-manager/context-list/context-list.component.html
@@ -1,5 +1,5 @@
 <igo-list [navigation]="true">
-  <mat-form-field *ngIf="showFilter()" [ngClass]="auth.authenticated ? 'context-filter-min-width' : 'context-filter-max-width'">
+  <mat-form-field *ngIf="showFilter()" [ngClass]="auth.authenticated && configService.getConfig('context') ? 'context-filter-min-width' : 'context-filter-max-width'">
     <input
       matInput
       type="text"
@@ -20,6 +20,7 @@
 
   <button
   *ngIf="!sortedAlpha"
+  class="sort-alpha"
   mat-icon-button
   [matTooltip]="'igo.context.contextManager.sortAlphabetically' | translate"
   matTooltipShowDelay="500"
@@ -28,14 +29,15 @@
   </button>
   <button
     *ngIf="sortedAlpha"
+    class="sort-alpha"
     mat-icon-button
     [matTooltip]="'igo.context.contextManager.sortContextOrder' | translate"
     matTooltipShowDelay="500"
     (click)="toggleSort(false)">
     <mat-icon color="warn" svgIcon="sort-variant-remove"></mat-icon>
   </button>
 
-  <igo-actionbar *ngIf="auth.authenticated"
+  <igo-actionbar *ngIf="auth.authenticated && configService.getConfig('context')"
     class="add-context-button"
     [iconColor]="color"
     [store]="actionStore"
@@ -46,7 +48,8 @@
     [mode]="actionbarMode">
   </igo-actionbar>
 
-  <button *ngIf="auth.authenticated && users && users.length"
+  <button *ngIf="auth.authenticated && configService.getConfig('context')"
+    class="users-filter"
     mat-icon-button
     [matTooltip]="'igo.context.contextManager.filterUser' | translate"
     matTooltipShowDelay="500"

diff --git a/packages/context/src/lib/context-manager/context-list/context-list.component.ts b/packages/context/src/lib/context-manager/context-list/context-list.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 
 import { AuthService } from '@igo2/auth';
-import { LanguageService, StorageService } from '@igo2/core';
+import { ConfigService, LanguageService, StorageService } from '@igo2/core';
 import type { IgoMap } from '@igo2/geo';
 
 import {
@@ -154,6 +154,7 @@ export class ContextListComponent implements OnInit, OnDestroy {
   constructor(
     private cdRef: ChangeDetectorRef,
     private contextService: ContextService,
+    public configService: ConfigService,
     public auth: AuthService,
     private dialog: MatDialog,
     private languageService: LanguageService,