feat: improve note dialog experience and prevent error

johannesjo · Jan 4, 2025 · 2998549 · 2998549
1 parent ecb0e4b
commit 2998549
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 25 deletions.
diff --git a/e2e/src/all-basic-routes-without-error.e2e.ts b/e2e/src/all-basic-routes-without-error.e2e.ts
@@ -42,6 +42,9 @@ module.exports = {
       .url(`${BASE}/#/tag/TODAY/settings`)
       .pause(500)
 
+      // to open notes dialog
+      .sendKeys('body', 'n')
+
       .noError()
 
       .end(),

diff --git a/src/app/features/note/dialog-add-note/dialog-add-note.component.ts b/src/app/features/note/dialog-add-note/dialog-add-note.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
 import { SS } from '../../../core/persistence/storage-keys.const';
 import { T } from '../../../t.const';
 import { DialogFullscreenMarkdownComponent } from '../../../ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component';
@@ -11,6 +10,7 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
+import { SnackService } from '../../../core/snack/snack.service';
 
 @Component({
   // selector: 'dialog-add-note',
@@ -36,35 +36,42 @@ export class DialogAddNoteComponent
   extends DialogFullscreenMarkdownComponent
   implements OnDestroy
 {
-  override _matDialogRef: MatDialogRef<DialogAddNoteComponent>;
+  // override _matDialogRef: MatDialogRef<DialogAddNoteComponent> =
+  //   inject<MatDialogRef<DialogAddNoteComponent>>(MatDialogRef);
   private _noteService = inject(NoteService);
+  private _snackService = inject(SnackService);
 
   override T: typeof T = T;
-  override data: { content: string };
 
   constructor() {
-    const _matDialogRef = inject<MatDialogRef<DialogAddNoteComponent>>(MatDialogRef);
-
-    const data = { content: sessionStorage.getItem(SS.NOTE_TMP) || '' };
     super();
-    this._matDialogRef = _matDialogRef;
-
-    this.data = data;
+    this.data = { content: sessionStorage.getItem(SS.NOTE_TMP) || '' };
   }
 
-  override close(isSkipSave: boolean = false): void {
-    if (!isSkipSave && this.data.content && this.data.content.trim().length > 0) {
-      this._noteService.add({ content: this.data.content }, true);
-      this._clearSessionStorage();
+  override close(isSkipSave: boolean = false, isEscapeClose: boolean = false): void {
+    if (!isEscapeClose) {
+      if (!isSkipSave && this.data?.content && this.data.content.trim().length > 0) {
+        this._noteService.add({ content: this.data.content }, true);
+        this._snackService.open({
+          type: 'SUCCESS',
+          msg: this.T.F.NOTE.S.NOTE_ADDED,
+          ico: 'comment',
+        });
+        this._clearSessionStorage();
+      }
+
+      if (isSkipSave) {
+        this._clearSessionStorage();
+      }
     }
     this._matDialogRef.close();
   }
 
-  override ngModelChange(val: string = this.data.content || ''): void {
+  override ngModelChange(val: string = this.data?.content || ''): void {
     sessionStorage.setItem(SS.NOTE_TMP, val);
   }
 
   private _clearSessionStorage(): void {
-    sessionStorage.setItem(SS.NOTE_TMP, '');
+    sessionStorage.removeItem(SS.NOTE_TMP);
   }
 }
diff --git a/src/app/t.const.ts b/src/app/t.const.ts
@@ -556,6 +556,9 @@ const T = {
         DISABLE_PARSE: 'F.NOTE.NOTE_CMP.DISABLE_PARSE',
         ENABLE_PARSE: 'F.NOTE.NOTE_CMP.ENABLE_PARSE',
       },
+      S: {
+        NOTE_ADDED: 'F.NOTE.S.NOTE_ADDED',
+      },
     },
     OPEN_PROJECT: {
       CFG_CMP: {

diff --git a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.ts b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.ts
@@ -34,22 +34,20 @@ const ALL_VIEW_MODES: ['SPLIT', 'PARSED', 'TEXT_ONLY'] = ['SPLIT', 'PARSED', 'TE
 })
 export class DialogFullscreenMarkdownComponent implements OnDestroy {
   _matDialogRef = inject<MatDialogRef<DialogFullscreenMarkdownComponent>>(MatDialogRef);
-  data = inject(MAT_DIALOG_DATA);
+  data: { content: string } = inject(MAT_DIALOG_DATA) || { content: '' };
 
   T: typeof T = T;
   viewMode: ViewMode = isSmallScreen() ? 'TEXT_ONLY' : 'SPLIT';
 
   private _subs: Subscription = new Subscription();
 
   constructor() {
-    const _matDialogRef = this._matDialogRef;
-    const data = this.data;
-
     const lastViewMode = localStorage.getItem(LS.LAST_FULLSCREEN_EDIT_VIEW_MODE);
     if (
       ALL_VIEW_MODES.includes(lastViewMode as ViewMode) &&
       // empty notes should never be in preview mode
-      data.content.trim().length > 0
+      this.data &&
+      this.data.content.trim().length > 0
     ) {
       this.viewMode = lastViewMode as ViewMode;
 
@@ -59,12 +57,12 @@ export class DialogFullscreenMarkdownComponent implements OnDestroy {
     }
 
     // we want to save as default
-    _matDialogRef.disableClose = true;
+    this._matDialogRef.disableClose = true;
     this._subs.add(
-      _matDialogRef.keydownEvents().subscribe((e) => {
+      this._matDialogRef.keydownEvents().subscribe((e) => {
         if ((e as any).keyCode === ESCAPE) {
           e.preventDefault();
-          this.close();
+          this.close(undefined, true);
         }
       }),
     );
@@ -82,8 +80,8 @@ export class DialogFullscreenMarkdownComponent implements OnDestroy {
     this._subs.unsubscribe();
   }
 
-  close(isSkipSave: boolean = false): void {
-    this._matDialogRef.close(isSkipSave || this.data.content);
+  close(isSkipSave: boolean = false, isEscapeClose: boolean = false): void {
+    this._matDialogRef.close(!isSkipSave ? this.data?.content : undefined);
   }
 
   onViewModeChange(): void {

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -549,6 +549,9 @@
       "NOTE_CMP": {
         "DISABLE_PARSE": "Disable markdown parsing for preview",
         "ENABLE_PARSE": "Enable markdown parse"
+      },
+      "S": {
+        "NOTE_ADDED": "Note saved"
       }
     },
     "OPEN_PROJECT": {