From 95ac2e484e3bbaec00a7ac1bbadbc67afc5d8837 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 26 Jan 2024 16:31:31 +0100
Subject: [PATCH] feat(tour): also add swipe tutorial

---
 .../features/shepherd/shepherd-steps.const.ts | 34 ++++++++++++++++---
 src/app/features/shepherd/shepherd.service.ts |  3 +-
 .../work-view/work-view.component.html        |  2 ++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/app/features/shepherd/shepherd-steps.const.ts b/src/app/features/shepherd/shepherd-steps.const.ts
index 285ac56ab9..eb97091013 100644
--- a/src/app/features/shepherd/shepherd-steps.const.ts
+++ b/src/app/features/shepherd/shepherd-steps.const.ts
@@ -6,7 +6,7 @@ import { filter, first, map, switchMap } from 'rxjs/operators';
 import { Actions, ofType } from '@ngrx/effects';
 import { addTask, deleteTask, updateTask } from '../tasks/store/task.actions';
 import { GlobalConfigState } from '../config/global-config.model';
-import { IS_MOUSE_PRIMARY } from '../../util/is-mouse-primary';
+import { IS_MOUSE_PRIMARY, IS_TOUCH_PRIMARY } from '../../util/is-mouse-primary';
 import { NavigationEnd, Router } from '@angular/router';
 import { promiseTimeout } from '../../util/promise-timeout';
 import { hideAddTaskBar } from '../../core-ui/layout/store/layout.actions';
@@ -234,13 +234,37 @@ export const SHEPHERD_STEPS = (
       ? [
           {
             title: 'Edit Task Title',
-            text: '<p>You can edit the task title by clicking on it. Do this now and change the task title to something else.',
+            text: '<p>You can edit the task title by clicking on it. Do this now and change the task title to something else.</p>',
             attachTo: {
               element: '.task-title',
               on: 'bottom' as any,
             },
             beforeShowPromise: () => promiseTimeout(500),
-            ...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService, () => {}),
+            ...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
+          },
+        ]
+      : []),
+    //
+    ...(IS_TOUCH_PRIMARY
+      ? [
+          {
+            title: 'Marking tasks as done',
+            text: '<p>You can mark tasks as done by swiping them to the right</p><p>Swiping to the left will open up the schedule Dialog.</p><p><em>Swipe right</em> now to mark the task as done!</p>',
+            attachTo: {
+              element: '.tour-undoneList task',
+              on: 'bottom' as any,
+            },
+            ...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
+          },
+          {
+            title: 'Marking tasks as undone',
+            text: '<p>You can mark tasks as undone again by swiping it to the right</p>',
+            attachTo: {
+              element: '.tour-doneList task',
+              on: 'bottom' as any,
+            },
+            beforeShowPromise: () => promiseTimeout(500),
+            ...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
           },
         ]
       : []),
@@ -257,7 +281,7 @@ export const SHEPHERD_STEPS = (
         element: 'task',
         on: 'bottom',
       },
-      beforeShowPromise: () => promiseTimeout(1500),
+      beforeShowPromise: () => promiseTimeout(300),
       when: (() => {
         let intId: number;
         return {
@@ -282,7 +306,7 @@ export const SHEPHERD_STEPS = (
     {
       id: TourId.Projects,
       title: 'Projects',
-      text: 'You can create different task lists by using projects.',
+      text: 'If you have lots of tasks, you probably need more than a single task list. One way of creating different lists is by using projects.',
       buttons: [NEXT_BTN],
     },
     {
diff --git a/src/app/features/shepherd/shepherd.service.ts b/src/app/features/shepherd/shepherd.service.ts
index bec43a9ef1..4623a9226d 100644
--- a/src/app/features/shepherd/shepherd.service.ts
+++ b/src/app/features/shepherd/shepherd.service.ts
@@ -46,8 +46,7 @@ export class ShepherdService {
       ) as any,
     );
     this.start();
-    // this.show(TourId.Projects);
-    // this.show(TourId.FinalCongrats);
+    // this.show('XXX' as TourId);
   }
 
   async show(id: TourId): Promise<void> {
diff --git a/src/app/features/work-view/work-view.component.html b/src/app/features/work-view/work-view.component.html
index 7510f28651..31819cab39 100644
--- a/src/app/features/work-view/work-view.component.html
+++ b/src/app/features/work-view/work-view.component.html
@@ -218,6 +218,7 @@
           </button>
         </div>
         <task-list
+          class="tour-undoneList"
           [tasks]="undoneTasks"
           listId="PARENT"
           listModelId="UNDONE"
@@ -231,6 +232,7 @@
             {{T.WW.COMPLETED_TASKS|translate}}
           </h2>
           <task-list
+            class="tour-doneList"
             [noTasksMsg]="T.WW.NO_COMPLETED_TASKS|translate"
             [tasks]="doneTasks"
             listId="PARENT"