feat(tour): polish

johannesjo · Jan 29, 2024 · e292563 · e292563
1 parent df220e5
commit e292563
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/src/app/core-ui/side-nav/side-nav.component.html b/src/app/core-ui/side-nav/side-nav.component.html
@@ -313,7 +313,7 @@
 
   <button
     #menuEntry
-    class="route-link"
+    class="route-link tour-settingsMenuBtn"
     mat-menu-item
     routerLink="config"
     routerLinkActive="isActiveRoute"

diff --git a/src/app/features/shepherd/shepherd-helper.ts b/src/app/features/shepherd/shepherd-helper.ts
@@ -3,6 +3,7 @@ import { filter, first, map, takeUntil, tap } from 'rxjs/operators';
 import { ShepherdService } from './shepherd.service';
 import Step from 'shepherd.js/src/types/step';
 import StepOptionsWhen = Step.StepOptionsWhen;
+import { TourId } from './shepherd-steps.const';
 
 export const waitForEl = (selector: string, cb: () => void): number => {
   const int = window.setInterval(() => {
@@ -27,6 +28,7 @@ export const nextOnObs = (
   obs: Observable<any>,
   shepherdService: ShepherdService,
   additionalOnShow?: () => void,
+  debugTitle?: string,
 ): StepOptionsWhen => {
   let _onDestroy$;
   return {
@@ -37,7 +39,11 @@ export const nextOnObs = (
       _onDestroy$ = new Subject<void>();
       obs
         .pipe(
-          tap((v) => console.log('nextOnObs', v)),
+          tap((v) => {
+            if (debugTitle) {
+              console.log('nextOnObs', v, debugTitle);
+            }
+          }),
           first(),
           takeUntil(_onDestroy$),
         )
@@ -58,21 +64,33 @@ export const twoWayObs = (
   back: {
     obs: Observable<any>;
     cbAfter?: () => void;
+    backToId?: TourId;
   },
   shepherdService: ShepherdService,
+  debugTitle?: string,
 ): StepOptionsWhen => {
   let onDestroy$;
   return {
     show: () => {
       onDestroy$ = new Subject();
-      fwd.obs.pipe(first(), takeUntil(onDestroy$)).subscribe(() => {
+      fwd.obs.pipe(first(), takeUntil(onDestroy$)).subscribe((v) => {
+        if (debugTitle) {
+          console.log(debugTitle, 'fwd', v);
+        }
         fwd.cbAfter?.();
         shepherdService.next();
       });
       if (back) {
-        back.obs.pipe(first(), takeUntil(onDestroy$)).subscribe(() => {
+        back.obs.pipe(first(), takeUntil(onDestroy$)).subscribe((v) => {
+          if (debugTitle) {
+            console.log(debugTitle, 'back', v);
+          }
           back.cbAfter?.();
-          shepherdService.back();
+          if (back.backToId) {
+            shepherdService.show(back.backToId);
+          } else {
+            shepherdService.back();
+          }
         });
       }
     },

diff --git a/src/app/features/shepherd/shepherd-steps.const.ts b/src/app/features/shepherd/shepherd-steps.const.ts
@@ -38,6 +38,7 @@ const CLICK_B = IS_MOUSE_PRIMARY ? '<em>Click</em>' : '<em>Tap</em>';
 
 export enum TourId {
   Welcome = 'Welcome',
+  AddTask = 'AddTask',
   DeleteTask = 'DeleteTask',
   Sync = 'Sync',
   Projects = 'Projects',
@@ -86,6 +87,7 @@ export const SHEPHERD_STEPS = (
       ],
     },
     {
+      id: TourId.AddTask,
       title: "Let's add your first task!",
       text: IS_MOUSE_PRIMARY
         ? `<em>Click</em> on this button or press ${KEY_COMBO('addNewTask')}.`
@@ -109,16 +111,14 @@ export const SHEPHERD_STEPS = (
         element: 'add-task-bar',
         on: 'bottom',
       },
-      beforeShowPromise: () => promiseTimeout(100),
+      beforeShowPromise: () => promiseTimeout(200),
       when: twoWayObs(
         { obs: actions$.pipe(ofType(addTask)) },
         {
-          obs: merge(
-            actions$.pipe(ofType(hideAddTaskBar)),
-            workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
-          ),
+          obs: merge(actions$.pipe(ofType(hideAddTaskBar))),
         },
         shepherdService,
+        // 'A',
       ),
     },
     {
@@ -135,8 +135,10 @@ export const SHEPHERD_STEPS = (
         { obs: actions$.pipe(ofType(hideAddTaskBar)) },
         {
           obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+          backToId: TourId.AddTask,
         },
         shepherdService,
+        // 'B',
       ),
     },
     {
@@ -150,8 +152,10 @@ export const SHEPHERD_STEPS = (
         { obs: timer(4000) },
         {
           obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+          backToId: TourId.AddTask,
         },
         shepherdService,
+        // 'C',
       ),
       beforeShowPromise: () => promiseTimeout(200),
     },
@@ -166,8 +170,10 @@ export const SHEPHERD_STEPS = (
         { obs: taskService.currentTaskId$.pipe(filter((id) => !!id)) },
         {
           obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+          backToId: TourId.AddTask,
         },
         shepherdService,
+        // 'D',
       ),
     },
     {
@@ -187,8 +193,10 @@ export const SHEPHERD_STEPS = (
         },
         {
           obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+          backToId: TourId.AddTask,
         },
         shepherdService,
+        // 'E',
       ),
     },
     ...(IS_MOUSE_PRIMARY
@@ -206,8 +214,10 @@ export const SHEPHERD_STEPS = (
               },
               {
                 obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+                backToId: TourId.AddTask,
               },
               shepherdService,
+              // 'F',
             ),
           },
           {
@@ -237,6 +247,7 @@ export const SHEPHERD_STEPS = (
                 ),
               },
               shepherdService,
+              // 'G',
             ),
           },
         ]
@@ -256,8 +267,10 @@ export const SHEPHERD_STEPS = (
               },
               {
                 obs: workContextService.todaysTasks$.pipe(filter((tt) => tt.length < 1)),
+                backToId: TourId.AddTask,
               },
               shepherdService,
+              // 'H',
             ),
           },
         ]),
@@ -457,6 +470,10 @@ export const SHEPHERD_STEPS = (
     {
       title: 'Configure Sync',
       text: `${CLICK_B} on <span class="material-icons">settings</span> <strong>Settings</strong>!`,
+      attachTo: {
+        element: '.tour-settingsMenuBtn',
+        on: 'right',
+      },
       when: nextOnObs(
         router.events.pipe(
           filter((event: any) => event instanceof NavigationEnd),