courses: smoother creation forms (fixes #8135) (#8270)

Co-authored-by: dogi <dogi@users.noreply.github.com>
open-learning-exchange · Feb 26, 2025 · d066a09 · d066a09
1 parent eb1cdf1
commit d066a09
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.17.29",
+  "version": "0.17.30",
   "myplanet": {
     "latest": "v0.23.33",
     "min": "v0.22.33"

diff --git a/src/app/courses/add-courses/courses-add.component.ts b/src/app/courses/add-courses/courses-add.component.ts
@@ -17,12 +17,13 @@ import { PlanetStepListService } from '../../shared/forms/planet-step-list.compo
 import { PouchService } from '../../shared/database/pouch.service';
 import { TagsService } from '../../shared/forms/tags.service';
 import { showFormErrors } from '../../shared/table-helpers';
+import { CanComponentDeactivate } from '../../shared/unsaved-changes.guard';
 
 @Component({
   templateUrl: 'courses-add.component.html',
   styleUrls: [ './courses-add.scss' ]
 })
-export class CoursesAddComponent implements OnInit, OnDestroy {
+export class CoursesAddComponent implements OnInit, OnDestroy, CanComponentDeactivate  {
 
   readonly dbName = 'courses'; // make database name a constant
   courseForm: FormGroup;
@@ -34,6 +35,9 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   private isDestroyed = false;
   private isSaved = false;
   private stepsChange$ = new Subject<any[]>();
+  private navigationViaCancel = false;
+  hasUnsavedChanges: boolean = false;
+  private initialState: string = '';
   private _steps = [];
   get steps() {
     return this._steps;
@@ -115,6 +119,11 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
       this.setInitialTags(tags, this.documentInfo, draft);
       if (!continued) {
         this.setFormAndSteps({ form: doc, steps: doc.steps, tags: doc.tags, initialTags: this.coursesService.course.initialTags });
+        this.initialState = JSON.stringify({
+          form: this.courseForm.value,
+          steps: this.steps,
+          tags: this.tags.value
+        });
       }
     });
     if (continued) {
@@ -168,8 +177,12 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   }
 
   onFormChanges() {
-    combineLatest(this.courseForm.valueChanges, this.stepsChange$, this.tags.valueChanges).pipe(
-      debounce(() => race(interval(2000), this.onDestroy$)),
+    combineLatest([
+      this.courseForm.valueChanges,
+      this.stepsChange$,
+      this.tags.valueChanges
+    ]).pipe(
+      debounce(() => race(interval(200), this.onDestroy$)),
       takeWhile(() => this.isDestroyed === false, true)
     ).subscribe(([ value, steps, tags ]) => {
       if (this.isSaved) {
@@ -178,8 +191,16 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
       const course = this.convertMarkdownImagesText({ ...value, images: this.images }, steps);
       this.coursesService.course = { form: course, steps: course.steps, tags };
       this.pouchService.saveDocEditing(
-        { ...course, tags, initialTags: this.coursesService.course.initialTags }, this.dbName, this.courseId
+        { ...course, tags, initialTags: this.coursesService.course.initialTags },
+        this.dbName,
+        this.courseId
       );
+      const currentState = JSON.stringify({
+        form: this.courseForm.value,
+        steps: this.steps,
+        tags: this.tags.value
+      });
+      this.hasUnsavedChanges = currentState !== this.initialState;
     });
   }
 
@@ -247,10 +268,25 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   }
 
   cancel() {
+    this.navigationViaCancel = true;
+    if (this.hasUnsavedChanges) {
+      const confirmCancel = window.confirm('You have unsaved changes. Are you sure you want to leave?');
+      if (!confirmCancel) {
+        this.navigationViaCancel = false;
+        return;
+      }
+    }
     this.pouchService.deleteDocEditing(this.dbName, this.courseId);
     this.navigateBack();
   }
 
+  canDeactivate(): boolean {
+    if (this.navigationViaCancel) {
+      return true;
+    }
+    return true;
+  }
+
   navigateBack() {
     const relativeRoute = (urlArray: string[]) => {
       const lastIndex = urlArray.length - 1;

diff --git a/src/app/shared/forms/planet-step-list.component.ts b/src/app/shared/forms/planet-step-list.component.ts
@@ -76,6 +76,7 @@ export class PlanetStepListComponent implements AfterContentChecked, OnDestroy {
   @Input() defaultName = 'Step';
   @Input() ignoreClick = false;
   @Output() stepClicked = new EventEmitter<number>();
+  @Output() stepsChange = new EventEmitter<any[]>();
 
   @ContentChildren(PlanetStepListItemComponent) stepListItems;
 
@@ -126,6 +127,9 @@ export class PlanetStepListComponent implements AfterContentChecked, OnDestroy {
     } else if (this.steps instanceof FormArray) {
       this.moveFormArrayStep(index, direction, this.steps);
     }
+    if (Array.isArray(this.steps)) {
+      this.stepsChange.emit(this.steps);
+    }
   }
 
   moveArrayStep(index, direction, steps: any[]) {