feat(autocomplete): support specifying path when creating a new note (#2342)

Author: eliandoran

apps/client/src/services/note_autocomplete.ts

@@ -289,13 +289,11 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
         }
 
         if (suggestion.action === "create-note") {
-            const { success, noteType, templateNoteId } = await noteCreateService.chooseNoteType();
-
+            const { success, noteType, templateNoteId, notePath } = await noteCreateService.chooseNoteType();
             if (!success) {
                 return;
             }
-
-            const { note } = await noteCreateService.createNote(suggestion.parentNoteId, {
+            const { note } = await noteCreateService.createNote( notePath || suggestion.parentNoteId, {
                 title: suggestion.noteTitle,
                 activate: false,
                 type: noteType,

apps/client/src/services/note_create.ts

@@ -116,7 +116,7 @@ async function chooseNoteType() {
 }
 
 async function createNoteWithTypePrompt(parentNotePath: string, options: CreateNoteOpts = {}) {
-    const { success, noteType, templateNoteId } = await chooseNoteType();
+    const { success, noteType, templateNoteId, notePath } = await chooseNoteType();
 
     if (!success) {
         return;
@@ -125,7 +125,7 @@ async function createNoteWithTypePrompt(parentNotePath: string, options: CreateN
     options.type = noteType;
     options.templateNoteId = templateNoteId;
 
-    return await createNote(parentNotePath, options);
+    return await createNote(notePath || parentNotePath, options);
 }
 
 /* If the first element is heading, parse it out and use it as a new heading. */

apps/client/src/translations/en/translation.json

@@ -233,6 +233,8 @@
     "move_success_message": "Selected notes have been moved into "
   },
   "note_type_chooser": {
+    "change_path_prompt": "Change where to create the new note:",
+    "search_placeholder": "search path by name (default if empty)",
     "modal_title": "Choose note type",
     "close": "Close",
     "modal_body": "Choose note type / template of the new note:",

apps/client/src/widgets/dialogs/note_type_chooser.ts

@@ -2,6 +2,7 @@ import type { CommandNames } from "../../components/app_context.js";
 import type { MenuCommandItem } from "../../menus/context_menu.js";
 import { t } from "../../services/i18n.js";
 import noteTypesService from "../../services/note_types.js";
+import noteAutocompleteService from "../../services/note_autocomplete.js";
 import BasicWidget from "../basic_widget.js";
 import { Dropdown, Modal } from "bootstrap";
 
@@ -13,6 +14,11 @@ const TPL = /*html*/`
             z-index: 1100 !important;
         }
 
+        .note-type-chooser-dialog .input-group {
+            margin-top: 15px;
+            margin-bottom: 15px;
+        }
+
         .note-type-chooser-dialog .note-type-dropdown {
             position: relative;
             font-size: large;
@@ -30,6 +36,12 @@ const TPL = /*html*/`
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("note_type_chooser.close")}"></button>
             </div>
             <div class="modal-body">
+                ${t("note_type_chooser.change_path_prompt")}
+
+                <div class="input-group">
+                    <input class="choose-note-path form-control" placeholder="${t("note_type_chooser.search_placeholder")}">
+                </div>
+
                 ${t("note_type_chooser.modal_body")}
 
                 <div class="dropdown" style="display: flex;">
@@ -48,6 +60,7 @@ export interface ChooseNoteTypeResponse {
     success: boolean;
     noteType?: string;
     templateNoteId?: string;
+    notePath?: string;
 }
 
 type Callback = (data: ChooseNoteTypeResponse) => void;
@@ -57,6 +70,7 @@ export default class NoteTypeChooserDialog extends BasicWidget {
     private dropdown!: Dropdown;
     private modal!: Modal;
     private $noteTypeDropdown!: JQuery<HTMLElement>;
+    private $autoComplete!: JQuery<HTMLElement>;
     private $originalFocused: JQuery<HTMLElement> | null;
     private $originalDialog: JQuery<HTMLElement> | null;
 
@@ -71,7 +85,8 @@ export default class NoteTypeChooserDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-
+        
+        this.$autoComplete = this.$widget.find(".choose-note-path");
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
         this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find(".note-type-dropdown-trigger")[0]);
 
@@ -116,9 +131,20 @@ export default class NoteTypeChooserDialog extends BasicWidget {
         });
     }
 
+    async refresh() {
+        noteAutocompleteService
+            .initNoteAutocomplete(this.$autoComplete, {
+                allowCreatingNotes: false,
+                hideGoToSelectedNoteButton: true,
+                allowJumpToSearchNotes: false,
+            })
+    }
+
     async chooseNoteTypeEvent({ callback }: { callback: Callback }) {
         this.$originalFocused = $(":focus");
 
+        await this.refresh();
+
         const noteTypes = await noteTypesService.getNoteTypeItems();
 
         this.$noteTypeDropdown.empty();
@@ -153,12 +179,14 @@ export default class NoteTypeChooserDialog extends BasicWidget {
         const $item = $(e.target).closest(".dropdown-item");
         const noteType = $item.attr("data-note-type");
         const templateNoteId = $item.attr("data-template-note-id");
+        const notePath = this.$autoComplete.getSelectedNotePath() || undefined;
 
         if (this.resolve) {
             this.resolve({
                 success: true,
                 noteType,
-                templateNoteId
+                templateNoteId,
+                notePath
             });
         }
         this.resolve = null;