chore(client/ts): port widgets/dialogs/confirm

2025-11-10 07:15:51 +01:00 · 2024-12-21 17:32:50 +02:00
parent e54e8fdef8
commit 1656acdb49
1 changed files with 37 additions and 8 deletions
--- a/src/public/app/widgets/dialogs/confirm.ts
+++ b/src/public/app/widgets/dialogs/confirm.ts
@@ -0,0 +1,149 @@
+import BasicWidget from "../basic_widget.js";
+import { t } from "../../services/i18n.js";
+
+const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
+
+const TPL = `
+<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">${t('confirm.confirmation')}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('confirm.close')}"></button>
+            </div>
+            <div class="modal-body">
+                <div class="confirm-dialog-content"></div>
+
+                <div class="confirm-dialog-custom"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="confirm-dialog-cancel-button btn btn-sm">${t('confirm.cancel')}</button>
+
+                &nbsp;
+
+                <button class="confirm-dialog-ok-button btn btn-primary btn-sm">${t('confirm.ok')}</button>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export type ConfirmDialogCallback = (val: false | {
+    confirmed: boolean;
+    isDeleteNoteChecked: boolean
+}) => void;
+
+interface ConfirmWithMessageOptions {
+    message: string | HTMLElement | JQuery<HTMLElement>;
+    callback: ConfirmDialogCallback;
+}
+
+interface ConfirmWithTitleOptions {
+    title: string;
+    callback: ConfirmDialogCallback;       
+}
+
+export default class ConfirmDialog extends BasicWidget {
+
+    private resolve: ConfirmDialogCallback | null;
+
+    private modal!: bootstrap.Modal;
+    private $originallyFocused!: JQuery<HTMLElement> | null;
+    private $confirmContent!: JQuery<HTMLElement>;
+    private $okButton!: JQuery<HTMLElement>;
+    private $cancelButton!: JQuery<HTMLElement>;
+    private $custom!: JQuery<HTMLElement>;
+
+    constructor() {
+        super();
+
+        this.resolve = null;
+        this.$originallyFocused = null; // element focused before the dialog was opened, so we can return to it afterward
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        // TODO: Fix once we use proper ES imports.
+        //@ts-ignore
+        this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
+        this.$confirmContent = this.$widget.find(".confirm-dialog-content");
+        this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
+        this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
+        this.$custom = this.$widget.find(".confirm-dialog-custom");
+
+        this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
+
+        this.$widget.on("hidden.bs.modal", () => {
+            if (this.resolve) {
+                this.resolve(false);
+            }
+
+            if (this.$originallyFocused) {
+                this.$originallyFocused.trigger('focus');
+                this.$originallyFocused = null;
+            }
+        });
+
+        this.$cancelButton.on('click', () => this.doResolve(false));
+        this.$okButton.on('click', () => this.doResolve(true));
+    }
+
+    showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
+        this.$originallyFocused = $(':focus');
+
+        this.$custom.hide();
+
+        glob.activeDialog = this.$widget;
+
+        if (typeof message === 'string') {
+            message = $("<div>").text(message);
+        }
+
+        this.$confirmContent.empty().append(message);
+
+        this.modal.show();
+
+        this.resolve = callback;
+    }
+    
+    showConfirmDeleteNoteBoxWithNoteDialogEvent({ title, callback }: ConfirmWithTitleOptions) {
+        glob.activeDialog = this.$widget;
+
+        this.$confirmContent.text(`${t('confirm.are_you_sure_remove_note', { title: title })}`);
+
+        this.$custom.empty()
+            .append("<br/>")
+            .append($("<div>")
+                .addClass("form-check")
+                .append(
+                    $("<label>")
+                        .addClass("form-check-label")
+                        .attr("style", "text-decoration: underline dotted var(--main-text-color)")
+                        .attr("title", `${t('confirm.if_you_dont_check')}`)
+                        .append(
+                            $("<input>")
+                                .attr("type", "checkbox")
+                                .addClass(`form-check-input ${DELETE_NOTE_BUTTON_CLASS}`)
+                        )
+                        .append(`${t('confirm.also_delete_note')}`)
+                ));
+
+        this.$custom.show();
+
+        this.modal.show();
+
+        this.resolve = callback;
+    }
+
+    doResolve(ret: boolean) {
+        if (this.resolve) {
+            this.resolve({
+                confirmed: ret,
+                isDeleteNoteChecked: this.$widget.find(`.${DELETE_NOTE_BUTTON_CLASS}:checked`).length > 0
+            });
+        }
+
+        this.resolve = null;
+
+        this.modal.hide();
+    }
+}