chore(client/ts): port include dialog

This commit is contained in:
Elian Doran 2025-03-19 23:27:52 +02:00
parent d0e33f8aaa
commit 9eec7237de
No known key found for this signature in database
2 changed files with 21 additions and 7 deletions

View File

@ -364,6 +364,9 @@ type EventMappings = {
textTypeWidget: EditableTextTypeWidget; textTypeWidget: EditableTextTypeWidget;
text: string; text: string;
}; };
showIncludeDialog: {
textTypeWidget: EditableTextTypeWidget;
};
openBulkActionsDialog: { openBulkActionsDialog: {
selectedOrActiveNoteIds: string[]; selectedOrActiveNoteIds: string[];
}; };

View File

@ -5,6 +5,8 @@ import utils from "../../services/utils.js";
import froca from "../../services/froca.js"; import froca from "../../services/froca.js";
import BasicWidget from "../basic_widget.js"; import BasicWidget from "../basic_widget.js";
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import type { EventData } from "../../components/app_context.js";
import type EditableTextTypeWidget from "../type_widgets/editable_text.js";
const TPL = ` const TPL = `
<div class="include-note-dialog modal mx-auto" tabindex="-1" role="dialog"> <div class="include-note-dialog modal mx-auto" tabindex="-1" role="dialog">
@ -53,9 +55,15 @@ const TPL = `
</div>`; </div>`;
export default class IncludeNoteDialog extends BasicWidget { export default class IncludeNoteDialog extends BasicWidget {
private modal!: bootstrap.Modal;
private $form!: JQuery<HTMLElement>;
private $autoComplete!: JQuery<HTMLElement>;
private textTypeWidget?: EditableTextTypeWidget;
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.modal = Modal.getOrCreateInstance(this.$widget); this.modal = Modal.getOrCreateInstance(this.$widget[0]);
this.$form = this.$widget.find(".include-note-form"); this.$form = this.$widget.find(".include-note-form");
this.$autoComplete = this.$widget.find(".include-note-autocomplete"); this.$autoComplete = this.$widget.find(".include-note-autocomplete");
this.$form.on("submit", () => { this.$form.on("submit", () => {
@ -72,7 +80,7 @@ export default class IncludeNoteDialog extends BasicWidget {
}); });
} }
async showIncludeNoteDialogEvent({ textTypeWidget }) { async showIncludeNoteDialogEvent({ textTypeWidget }: EventData<"showIncludeDialog">) {
this.textTypeWidget = textTypeWidget; this.textTypeWidget = textTypeWidget;
await this.refresh(); await this.refresh();
utils.openDialog(this.$widget); utils.openDialog(this.$widget);
@ -80,7 +88,7 @@ export default class IncludeNoteDialog extends BasicWidget {
this.$autoComplete.trigger("focus").trigger("select"); // to be able to quickly remove entered text this.$autoComplete.trigger("focus").trigger("select"); // to be able to quickly remove entered text
} }
async refresh(widget) { async refresh() {
this.$autoComplete.val(""); this.$autoComplete.val("");
noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
hideGoToSelectedNoteButton: true, hideGoToSelectedNoteButton: true,
@ -89,17 +97,20 @@ export default class IncludeNoteDialog extends BasicWidget {
noteAutocompleteService.showRecentNotes(this.$autoComplete); noteAutocompleteService.showRecentNotes(this.$autoComplete);
} }
async includeNote(notePath) { async includeNote(notePath: string) {
const noteId = treeService.getNoteIdFromUrl(notePath); const noteId = treeService.getNoteIdFromUrl(notePath);
if (!noteId) {
return;
}
const note = await froca.getNote(noteId); const note = await froca.getNote(noteId);
const boxSize = $("input[name='include-note-box-size']:checked").val(); const boxSize = $("input[name='include-note-box-size']:checked").val();
if (["image", "canvas", "mermaid"].includes(note.type)) { if (["image", "canvas", "mermaid"].includes(note?.type ?? "")) {
// there's no benefit to use insert note functionlity for images, // there's no benefit to use insert note functionlity for images,
// so we'll just add an IMG tag // so we'll just add an IMG tag
this.textTypeWidget.addImage(noteId); this.textTypeWidget?.addImage(noteId);
} else { } else {
this.textTypeWidget.addIncludeNote(noteId, boxSize); this.textTypeWidget?.addIncludeNote(noteId, boxSize);
} }
} }
} }