From e54e8fdef88f56dcf7fc32d3d3b84c7051522bb5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 21 Dec 2024 17:12:16 +0200
Subject: [PATCH] chore(client/ts): port widgets/dialogs/prompt

---
 src/public/app/components/app_context.ts      |  3 +-
 .../widgets/dialogs/{prompt.js => prompt.ts}  | 39 +++++++++++++++++--
 2 files changed, 37 insertions(+), 5 deletions(-)
 rename src/public/app/widgets/dialogs/{prompt.js => prompt.ts} (71%)

diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts
index ebda69402..5ccb72ea4 100644
--- a/src/public/app/components/app_context.ts
+++ b/src/public/app/components/app_context.ts
@@ -16,6 +16,7 @@ import ShortcutComponent from "./shortcut_component.js";
 import { t, initLocale } from "../services/i18n.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -49,7 +50,7 @@ export type TriggerData = {
     branchIdsToDelete: string[];
     callback: (value: ResolveOptions) => void;
     forceDeleteAllClones: boolean;
-}
+} | PromptDialogOptions;    // For "showPromptDialog"
 
 class AppContext extends Component {
 
diff --git a/src/public/app/widgets/dialogs/prompt.js b/src/public/app/widgets/dialogs/prompt.ts
similarity index 71%
rename from src/public/app/widgets/dialogs/prompt.js
rename to src/public/app/widgets/dialogs/prompt.ts
index c8a1fa016..8a470860c 100644
--- a/src/public/app/widgets/dialogs/prompt.js
+++ b/src/public/app/widgets/dialogs/prompt.ts
@@ -20,7 +20,34 @@ const TPL = `
     </div>
 </div>`;
 
+interface ShownCallbackData {
+    $dialog: JQuery<HTMLElement>;
+    $question: JQuery<HTMLElement> | null;
+    $answer: JQuery<HTMLElement> | null;
+    $form: JQuery<HTMLElement>;
+}
+
+export interface PromptDialogOptions {
+    title?: string;
+    message?: string;
+    defaultValue?: string;
+    shown: PromptShownDialogCallback;
+    callback: () => void;
+}
+
+export type PromptShownDialogCallback = ((callback: ShownCallbackData) => void) | null;
+
 export default class PromptDialog extends BasicWidget {
+
+    private resolve: ((val: string | null) => void) | null;
+    private shownCb: PromptShownDialogCallback;
+    
+    private modal!: bootstrap.Modal;
+    private $dialogBody!: JQuery<HTMLElement>;
+    private $question!: JQuery<HTMLElement> | null;
+    private $answer!: JQuery<HTMLElement> | null;
+    private $form!: JQuery<HTMLElement>;
+
     constructor() {
         super();
 
@@ -30,6 +57,8 @@ export default class PromptDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        // TODO: Fix once we use proper ES imports.
+        //@ts-ignore
         this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
         this.$dialogBody = this.$widget.find(".modal-body");
         this.$form = this.$widget.find(".prompt-dialog-form");
@@ -46,7 +75,7 @@ export default class PromptDialog extends BasicWidget {
                 });
             }
 
-            this.$answer.trigger('focus').select();
+            this.$answer?.trigger('focus').select();
         });
 
         this.$widget.on("hidden.bs.modal", () => {
@@ -57,13 +86,15 @@ export default class PromptDialog extends BasicWidget {
 
         this.$form.on('submit', e => {
             e.preventDefault();
-            this.resolve(this.$answer.val());
+            if (this.resolve) {
+                this.resolve(this.$answer?.val() as string);
+            }
 
             this.modal.hide();
         });
     }
 
-    showPromptDialogEvent({ title, message, defaultValue, shown, callback }) {
+    showPromptDialogEvent({ title, message, defaultValue, shown, callback }: PromptDialogOptions) {
         this.shownCb = shown;
         this.resolve = callback;
 
@@ -71,7 +102,7 @@ export default class PromptDialog extends BasicWidget {
 
         this.$question = $("<label>")
             .prop("for", "prompt-dialog-answer")
-            .text(message);
+            .text(message || "");
 
         this.$answer = $("<input>")
             .prop("type", "text")