Save tour completion, hide welcome widget

src-ui/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { SettingsService } from './services/settings.service'
 import { SETTINGS_KEYS } from './data/paperless-uisettings'
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router } from '@angular/router'
-import { Subscription } from 'rxjs'
+import { Subscription, first } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'
 import { ToastService } from './services/toast.service'
 import { NgxFileDropEntry } from 'ngx-file-drop'
@@ -240,13 +240,14 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.tourService.start$.subscribe(() => {
       this.renderer.addClass(document.body, 'tour-active')
-    })
 
-    this.tourService.end$.subscribe(() => {
-      // animation time
-      setTimeout(() => {
-        this.renderer.removeClass(document.body, 'tour-active')
-      }, 500)
+      this.tourService.end$.pipe(first()).subscribe(() => {
+        this.settings.completeTour()
+        // animation time
+        setTimeout(() => {
+          this.renderer.removeClass(document.body, 'tour-active')
+        }, 500)
+      })
     })
   }
 

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -21,22 +21,20 @@
 
 <div class="row">
   <div class="col-lg-8">
-    <ng-container *ngIf="savedViewService.loading">
-      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-      <ng-container i18n>Loading...</ng-container>
-    </ng-container>
-
-    <app-welcome-widget *ngIf="settingsService.offerTour()" tourAnchor="tour.dashboard"></app-welcome-widget>
-
-    <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-      <ng-container *ngFor="let v of savedViewService.dashboardViews; first as isFirst">
-        <app-saved-view-widget *ngIf="isFirst; else noTour" [savedView]="v" tourAnchor="tour.dashboard"></app-saved-view-widget>
-        <ng-template #noTour>
-          <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
-        </ng-template>
+    <div tourAnchor="tour.dashboard">
+      <ng-container *ngIf="savedViewService.loading">
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+        <ng-container i18n>Loading...</ng-container>
       </ng-container>
-    </div>
 
+      <app-welcome-widget *ngIf="settingsService.offerTour()" (dismiss)="completeTour()"></app-welcome-widget>
+
+      <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+        <ng-container *ngFor="let v of savedViewService.dashboardViews; first as isFirst">
+          <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
+        </ng-container>
+      </div>
+    </div>
   </div>
   <div class="col-lg-4">
 

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
   selector: 'app-dashboard',
@@ -11,7 +12,8 @@ import { ComponentWithPermissions } from '../with-permissions/with-permissions.c
 export class DashboardComponent extends ComponentWithPermissions {
   constructor(
     public settingsService: SettingsService,
-    public savedViewService: SavedViewService
+    public savedViewService: SavedViewService,
+    private tourService: TourService
   ) {
     super()
   }
@@ -23,4 +25,12 @@ export class DashboardComponent extends ComponentWithPermissions {
       return $localize`Welcome to Paperless-ngx`
     }
   }
+
+  completeTour() {
+    if (this.tourService.getStatus() !== 0) {
+      this.tourService.end() // will call settingsService.completeTour()
+    } else {
+      this.settingsService.completeTour()
+    }
+  }
 }

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html

@@ -1,5 +1,4 @@
-<ngb-alert type="primary" [dismissible]="false">
-  <!-- [dismissible]="isFinished(status)" (closed)="dismiss(status)" -->
+<ngb-alert class="pe-3" type="primary" [dismissible]="true" (closed)="dismiss.emit(true)">
   <h4 class="alert-heading"><ng-container i18n>Paperless-ngx is running!</ng-container> 🎉</h4>
   <p i18n>You're ready to start uploading documents! Explore the various features of this web app on your own, or start a quick tour using the button below.</p>
   <p i18n>More detail on how to use and configure Paperless-ngx is always available in the <a href="https://docs.paperless-ngx.com" target="_blank">documentation</a>.</p>

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, EventEmitter, Output } from '@angular/core'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
@@ -8,4 +8,7 @@ import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 })
 export class WelcomeWidgetComponent {
   constructor(public readonly tourService: TourService) {}
+
+  @Output()
+  dismiss: EventEmitter<boolean> = new EventEmitter()
 }

src-ui/src/app/data/paperless-uisettings.ts

@@ -41,6 +41,7 @@ export const SETTINGS_KEYS = {
     'general-settings:update-checking:backend-setting',
   SAVED_VIEWS_WARN_ON_UNSAVED_CHANGE:
     'general-settings:saved-views:warn-on-unsaved-change',
+  TOUR_COMPLETE: 'general-settings:tour-complete',
 }
 
 export const SETTINGS: PaperlessUiSetting[] = [
@@ -144,4 +145,9 @@ export const SETTINGS: PaperlessUiSetting[] = [
     type: 'boolean',
     default: true,
   },
+  {
+    key: SETTINGS_KEYS.TOUR_COMPLETE,
+    type: 'boolean',
+    default: false,
+  },
 ]

src-ui/src/app/services/settings.service.ts

@@ -484,7 +484,22 @@ export class SettingsService {
   offerTour(): boolean {
     return (
       !this.savedViewService.loading &&
-      this.savedViewService.dashboardViews.length == 0
+      this.savedViewService.dashboardViews.length == 0 &&
+      !this.get(SETTINGS_KEYS.TOUR_COMPLETE)
     )
   }
+
+  completeTour() {
+    const tourCompleted = this.get(SETTINGS_KEYS.TOUR_COMPLETE)
+    if (!tourCompleted) {
+      this.set(SETTINGS_KEYS.TOUR_COMPLETE, true)
+      this.storeSettings()
+        .pipe(first())
+        .subscribe(() => {
+          this.toastService.showInfo(
+            $localize`You can restart the tour from the settings page.`
+          )
+        })
+    }
+  }
 }