From 83c373aa64f7963ed4deb9af459fdf2ea82ee08e Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Tue, 16 Aug 2022 20:45:57 +0200
Subject: [PATCH] feat: use new fullscreen note edit dialog everywhere

---
 src/app/core-ui/shortcut/shortcut.service.ts  | 12 ++++-
 .../evaluation-sheet.component.ts             |  6 ++-
 .../dialog-add-note.component.html            | 38 --------------
 .../dialog-add-note.component.scss            | 34 -------------
 .../dialog-add-note.component.ts              | 51 +++++++++----------
 .../features/note/notes/notes.component.ts    |  6 ++-
 .../dialog-fullscreen-markdown.component.html |  2 +
 .../dialog-fullscreen-markdown.component.ts   | 10 +++-
 8 files changed, 54 insertions(+), 105 deletions(-)
 delete mode 100644 src/app/features/note/dialog-add-note/dialog-add-note.component.html
 delete mode 100644 src/app/features/note/dialog-add-note/dialog-add-note.component.scss

diff --git a/src/app/core-ui/shortcut/shortcut.service.ts b/src/app/core-ui/shortcut/shortcut.service.ts
index c82c81d9f2..72cec0f95b 100644
--- a/src/app/core-ui/shortcut/shortcut.service.ts
+++ b/src/app/core-ui/shortcut/shortcut.service.ts
@@ -63,7 +63,11 @@ export class ShortcutService {
       (this._electronService.ipcRenderer as typeof ipcRenderer).on(IPC.ADD_NOTE, () => {
         if (this._matDialog.openDialogs.length === 0) {
           this._ngZone.run(() => {
-            this._matDialog.open(DialogAddNoteComponent);
+            this._matDialog.open(DialogAddNoteComponent, {
+              minWidth: '100vw',
+              height: '100vh',
+              restoreFocus: true,
+            });
           });
         }
       });
@@ -133,7 +137,11 @@ export class ShortcutService {
       ev.preventDefault();
     } else if (checkKeyCombo(ev, keys.addNewNote)) {
       if (this._matDialog.openDialogs.length === 0) {
-        this._matDialog.open(DialogAddNoteComponent);
+        this._matDialog.open(DialogAddNoteComponent, {
+          minWidth: '100vw',
+          height: '100vh',
+          restoreFocus: true,
+        });
         ev.preventDefault();
       }
     } else if (checkKeyCombo(ev, keys.openProjectNotes)) {
diff --git a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.ts b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.ts
index 10d46ee7fb..17e72085c8 100644
--- a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.ts
+++ b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.ts
@@ -149,7 +149,11 @@ export class EvaluationSheetComponent implements OnDestroy, OnInit {
   }
 
   addNote(): void {
-    this._matDialog.open(DialogAddNoteComponent);
+    this._matDialog.open(DialogAddNoteComponent, {
+      minWidth: '100vw',
+      height: '100vh',
+      restoreFocus: true,
+    });
   }
 
   private _update(updateData: Partial<MetricCopy>): void {
diff --git a/src/app/features/note/dialog-add-note/dialog-add-note.component.html b/src/app/features/note/dialog-add-note/dialog-add-note.component.html
deleted file mode 100644
index 7d5cff2eac..0000000000
--- a/src/app/features/note/dialog-add-note/dialog-add-note.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<form (submit)="submit()">
-  <div class="form-wrapper">
-    <div class="textarea-wrapper">
-      <textarea
-        (keydown)="keydownHandler($event)"
-        (ngModelChange)="saveTmp()"
-        [(ngModel)]="noteContent"
-        [placeholder]="T.F.NOTE.D_ADD.NOTE_LABEL|translate"
-        matTextareaAutosize
-        name="noteContent"
-        rows="6"
-      ></textarea>
-    </div>
-  </div>
-
-  <mat-dialog-actions align="end">
-    <div class="wrap-buttons">
-      <button
-        (click)="close()"
-        class="btn btn-primary submit-button"
-        color="primary"
-        mat-button
-        type="button"
-      >
-        {{T.G.CANCEL|translate}}
-      </button>
-      <button
-        class="btn btn-primary submit-button"
-        color="primary"
-        mat-stroked-button
-        type="submit"
-      >
-        <mat-icon>save</mat-icon>
-        {{T.G.SAVE|translate}}
-      </button>
-    </div>
-  </mat-dialog-actions>
-</form>
diff --git a/src/app/features/note/dialog-add-note/dialog-add-note.component.scss b/src/app/features/note/dialog-add-note/dialog-add-note.component.scss
deleted file mode 100644
index 296b1c3242..0000000000
--- a/src/app/features/note/dialog-add-note/dialog-add-note.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../../../../variables';
-
-:host-context([dir=rtl]) {
-  direction: rtl;
-}
-
-textarea {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  @include noteStyle;
-  margin-bottom: 0;
-  padding: $s;
-  min-height: $s*5;
-
-  @include mq(xs) {
-    min-height: 220px;
-    width: 500px;
-  }
-}
-
-.form-wrapper {
-  max-width: 460px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.textarea-wrapper {
-  margin: -16px;
-  margin-bottom: 0;
-  align-self: stretch;
-}
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
index 7171a68492..112b336b75 100644
--- 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,50 +1,45 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { NoteService } from '../note.service';
 import { SS } from '../../../core/persistence/storage-keys.const';
 import { T } from '../../../t.const';
-import { WorkContextService } from '../../work-context/work-context.service';
+import { DialogFullscreenMarkdownComponent } from '../../../ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component';
+import { NoteService } from '../note.service';
 
 @Component({
-  selector: 'dialog-add-note',
-  templateUrl: './dialog-add-note.component.html',
-  styleUrls: ['./dialog-add-note.component.scss'],
+  // selector: 'dialog-add-note',
+  selector: 'dialog-fullscreen-markdown',
+  templateUrl:
+    '../../../ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.html',
+  styleUrls: [
+    '../../../ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DialogAddNoteComponent {
+export class DialogAddNoteComponent
+  extends DialogFullscreenMarkdownComponent
+  implements OnDestroy
+{
   T: typeof T = T;
-  noteContent: string;
-  isSubmitted: boolean = false;
+  data: { content: string };
 
   constructor(
-    private _matDialogRef: MatDialogRef<DialogAddNoteComponent>,
+    public _matDialogRef: MatDialogRef<DialogAddNoteComponent>,
     private _noteService: NoteService,
-    private _workContextService: WorkContextService,
   ) {
-    this.noteContent = sessionStorage.getItem(SS.NOTE_TMP) || '';
+    const data = { content: sessionStorage.getItem(SS.NOTE_TMP) || '' };
+    super(_matDialogRef, data);
+    this.data = data;
   }
 
-  keydownHandler(ev: KeyboardEvent): void {
-    if (ev.key === 'Enter' && ev.ctrlKey) {
-      this.submit();
-    }
-  }
-
-  submit(): void {
-    if (!this.isSubmitted && this.noteContent && this.noteContent.trim().length > 0) {
-      this._noteService.add({ content: this.noteContent }, true);
-
-      this.isSubmitted = true;
+  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();
-      this.close();
     }
-  }
-
-  close(): void {
     this._matDialogRef.close();
   }
 
-  saveTmp(val: string = this.noteContent || ''): void {
+  ngModelChange(val: string = this.data.content || ''): void {
     sessionStorage.setItem(SS.NOTE_TMP, val);
   }
 
diff --git a/src/app/features/note/notes/notes.component.ts b/src/app/features/note/notes/notes.component.ts
index 2197e69c18..c3e5a4e9a5 100644
--- a/src/app/features/note/notes/notes.component.ts
+++ b/src/app/features/note/notes/notes.component.ts
@@ -91,6 +91,10 @@ export class NotesComponent implements OnInit, OnDestroy {
   }
 
   addNote(): void {
-    this._matDialog.open(DialogAddNoteComponent);
+    this._matDialog.open(DialogAddNoteComponent, {
+      minWidth: '100vw',
+      height: '100vh',
+      restoreFocus: true,
+    });
   }
 }
diff --git a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.html b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.html
index fdeee14c50..cff1e62a45 100644
--- a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.html
+++ b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.html
@@ -5,6 +5,8 @@
   <textarea
     #textareaEl
     [(ngModel)]="data.content"
+    (keydown)="keydownHandler($event)"
+    (ngModelChange)="ngModelChange($event)"
     rows="1"
     tabindex="3"
     *ngIf="viewMode==='TEXT_ONLY' || viewMode==='SPLIT'"
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
index 02c1247242..8aa510714d 100644
--- a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.ts
+++ b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.ts
@@ -22,7 +22,7 @@ export class DialogFullscreenMarkdownComponent implements OnDestroy {
   private _subs: Subscription = new Subscription();
 
   constructor(
-    private _matDialogRef: MatDialogRef<DialogFullscreenMarkdownComponent>,
+    public _matDialogRef: MatDialogRef<DialogFullscreenMarkdownComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
   ) {
     const lastViewMode = localStorage.getItem(LS.LAST_FULLSCREEN_EDIT_VIEW_MODE);
@@ -47,6 +47,14 @@ export class DialogFullscreenMarkdownComponent implements OnDestroy {
     );
   }
 
+  keydownHandler(ev: KeyboardEvent): void {
+    if (ev.key === 'Enter' && ev.ctrlKey) {
+      this.close();
+    }
+  }
+
+  ngModelChange(data: string): void {}
+
   ngOnDestroy(): void {
     this._subs.unsubscribe();
   }