fix(fs_sync): missing autocomplete

This commit is contained in:
Elian Doran 2025-07-26 19:13:40 +03:00
parent fe6daac979
commit bac95c97e5
No known key found for this signature in database

View File

@ -1,8 +1,9 @@
import OptionsWidget from "../options_widget.js"; import OptionsWidget from "../options_widget.js";
import server from "../../../../services/server.js"; import server from "../../../../services/server.js";
import toastService from "../../../../services/toast.js"; import toastService from "../../../../services/toast.js";
import { t } from "../../../../services/i18n.js"; import noteAutocompleteService from "../../../../services/note_autocomplete.js";
import type { OptionMap } from "@triliumnext/commons"; import type { OptionMap } from "@triliumnext/commons";
import type { Suggestion } from "../../../../services/note_autocomplete.js";
interface FileSystemMapping { interface FileSystemMapping {
mappingId: string; mappingId: string;
@ -154,9 +155,10 @@ const TPL = /*html*/`
<form class="mapping-form"> <form class="mapping-form">
<div class="form-group"> <div class="form-group">
<label for="note-selector">Note:</label> <label for="note-selector">Note:</label>
<input type="text" id="note-selector" class="form-control note-selector" <div class="input-group">
placeholder="Click to select a note..." readonly> <input type="text" id="note-selector" class="form-control note-selector"
<input type="hidden" class="selected-note-id"> placeholder="Search for a note...">
</div>
<div class="help-block">Select the note to map to the file system.</div> <div class="help-block">Select the note to map to the file system.</div>
</div> </div>
@ -276,7 +278,6 @@ export default class FileSystemSyncOptions extends OptionsWidget {
private $mappingModal!: JQuery<HTMLElement>; private $mappingModal!: JQuery<HTMLElement>;
private $modalTitle!: JQuery<HTMLElement>; private $modalTitle!: JQuery<HTMLElement>;
private $noteSelector!: JQuery<HTMLElement>; private $noteSelector!: JQuery<HTMLElement>;
private $selectedNoteId!: JQuery<HTMLElement>;
private $filePathInput!: JQuery<HTMLElement>; private $filePathInput!: JQuery<HTMLElement>;
private $validatePathButton!: JQuery<HTMLElement>; private $validatePathButton!: JQuery<HTMLElement>;
private $pathValidationResult!: JQuery<HTMLElement>; private $pathValidationResult!: JQuery<HTMLElement>;
@ -314,7 +315,6 @@ export default class FileSystemSyncOptions extends OptionsWidget {
this.$mappingModal = this.$widget.closest(".mapping-modal"); this.$mappingModal = this.$widget.closest(".mapping-modal");
this.$modalTitle = this.$mappingModal.find(".modal-title"); this.$modalTitle = this.$mappingModal.find(".modal-title");
this.$noteSelector = this.$mappingModal.find(".note-selector"); this.$noteSelector = this.$mappingModal.find(".note-selector");
this.$selectedNoteId = this.$mappingModal.find(".selected-note-id");
this.$filePathInput = this.$mappingModal.find(".file-path-input"); this.$filePathInput = this.$mappingModal.find(".file-path-input");
this.$validatePathButton = this.$mappingModal.find(".validate-path-button"); this.$validatePathButton = this.$mappingModal.find(".validate-path-button");
this.$pathValidationResult = this.$mappingModal.find(".path-validation-result"); this.$pathValidationResult = this.$mappingModal.find(".path-validation-result");
@ -387,11 +387,7 @@ export default class FileSystemSyncOptions extends OptionsWidget {
this.hideMappingModal(); this.hideMappingModal();
}); });
// Note selector (simplified - in real implementation would integrate with note picker) // Note selector autocomplete will be initialized in showMappingModal
this.$noteSelector.on("click", () => {
// TODO: Integrate with Trilium's note picker dialog
toastService.showMessage("Note picker integration needed");
});
} }
private toggleControls(enabled: boolean) { private toggleControls(enabled: boolean) {
@ -497,6 +493,17 @@ export default class FileSystemSyncOptions extends OptionsWidget {
this.clearMappingForm(); this.clearMappingForm();
} }
// Initialize note autocomplete
noteAutocompleteService.initNoteAutocomplete(this.$noteSelector, {
allowCreatingNotes: true,
});
// Handle note selection
this.$noteSelector.off("autocomplete:noteselected").on("autocomplete:noteselected", (event: JQuery.Event, suggestion: Suggestion) => {
// The note autocomplete service will automatically set the selected note path
// which we can retrieve using getSelectedNoteId()
});
this.$mappingModal.removeClass('modal-hidden').addClass('modal-visible'); this.$mappingModal.removeClass('modal-hidden').addClass('modal-visible');
} }
@ -506,9 +513,10 @@ export default class FileSystemSyncOptions extends OptionsWidget {
this.currentEditingMappingId = null; this.currentEditingMappingId = null;
} }
private populateMappingForm(mapping: FileSystemMapping) { private async populateMappingForm(mapping: FileSystemMapping) {
this.$selectedNoteId.val(mapping.noteId); // Set the note using the autocomplete service's setNote method
this.$noteSelector.val(`Note: ${mapping.noteId}`); // TODO: Show actual note title await this.$noteSelector.setNote(mapping.noteId);
this.$filePathInput.val(mapping.filePath); this.$filePathInput.val(mapping.filePath);
this.$syncDirectionSelect.val(mapping.syncDirection); this.$syncDirectionSelect.val(mapping.syncDirection);
this.$contentFormatSelect.val(mapping.contentFormat); this.$contentFormatSelect.val(mapping.contentFormat);
@ -522,8 +530,8 @@ export default class FileSystemSyncOptions extends OptionsWidget {
} }
private clearMappingForm() { private clearMappingForm() {
this.$selectedNoteId.val(''); // Clear the note selector using autocomplete service
this.$noteSelector.val(''); this.$noteSelector.val('').setSelectedNotePath('');
this.$filePathInput.val(''); this.$filePathInput.val('');
this.$syncDirectionSelect.val('bidirectional'); this.$syncDirectionSelect.val('bidirectional');
this.$contentFormatSelect.val('auto'); this.$contentFormatSelect.val('auto');
@ -558,7 +566,7 @@ export default class FileSystemSyncOptions extends OptionsWidget {
} }
private async saveMapping() { private async saveMapping() {
const noteId = this.$selectedNoteId.val() as string; const noteId = this.$noteSelector.getSelectedNoteId();
const filePath = this.$filePathInput.val() as string; const filePath = this.$filePathInput.val() as string;
const syncDirection = this.$syncDirectionSelect.val() as string; const syncDirection = this.$syncDirectionSelect.val() as string;
const contentFormat = this.$contentFormatSelect.val() as string; const contentFormat = this.$contentFormatSelect.val() as string;