From 18b50ab3c8b6414278a76ff54b564ed4a30f7cf6 Mon Sep 17 00:00:00 2001 From: Muness Castle <931+muness@users.noreply.github.com> Date: Mon, 25 Dec 2023 22:36:21 -0500 Subject: [PATCH] Improve dialog behavior when no category is selected --- src/addTaskModal.ts | 78 ++++++++++++++++++++++++++++----------------- src/main.ts | 4 +-- 2 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/addTaskModal.ts b/src/addTaskModal.ts index 74f0955..968f1f1 100644 --- a/src/addTaskModal.ts +++ b/src/addTaskModal.ts @@ -1,6 +1,22 @@ -import { App, Modal, Setting, DropdownComponent, TextAreaComponent, FuzzySuggestModal, FuzzyMatch } from "obsidian"; +import { App, Modal, Setting, DropdownComponent, TextAreaComponent, FuzzySuggestModal, FuzzyMatch, Notice } from "obsidian"; import { Category } from "./interfaces"; +const inboxCategory: Category = { + _id: "__inbox-faux__", // Arbitrary unique ID for the Inbox faux category + title: "Inbox", + type: "faux", + updatedAt: 0, + parentId: "root", + startDate: "", + endDate: "", + note: "", + isRecurring: false, + priority: "", + deepLink: "", + dueDate: "", + done: false, +}; + function getTitleWithParent(category: Category, categories: Category[]): string { let parent = category.parentId; @@ -22,23 +38,10 @@ function getTitleWithParent(category: Category, categories: Category[]): string // Suggester Modal Class for Category Selection class CategorySuggesterModal extends FuzzySuggestModal { + categories: Category[]; + + onChooseItem: (item: Category, _evt: MouseEvent | KeyboardEvent) => void; getItems(): Category[] { - // Prepend a faux 'Inbox' category for matching purposes - const inboxCategory: Category = { - _id: "__inbox-faux__", // Arbitrary unique ID for the Inbox faux category - title: "Inbox", - type: "faux", - updatedAt: 0, - parentId: "root", - startDate: "", - endDate: "", - note: "", - isRecurring: false, - priority: "", - deepLink: "", - dueDate: "", - done: false, - }; // Include the Inbox at the beginning of the categories list return [inboxCategory, ...this.categories]; @@ -49,14 +52,11 @@ class CategorySuggesterModal extends FuzzySuggestModal { } return getTitleWithParent(category, this.categories); } - categories: Category[]; - onChooseItem: (item: Category, _evt: MouseEvent | KeyboardEvent) => void; constructor(app: App, categories: Category[], onChooseItem: (item: Category, _evt: MouseEvent | KeyboardEvent) => void) { super(app); this.categories = categories; this.onChooseItem = onChooseItem; - this.setPlaceholder("Type to search for a Category"); } onChooseSuggestion(item: FuzzyMatch, _evt: MouseEvent | KeyboardEvent): void { @@ -75,7 +75,7 @@ export class AddTaskModal extends Modal { this.categories = categories.sort((a, b) => { return this.getFullPathToCategoryTitle(a, categories).localeCompare(this.getFullPathToCategoryTitle(b, categories)); }); - this.result = { catId: '', task: '' }; // initialize result + this.result = { catId: inboxCategory._id, task: '' }; } onOpen() { @@ -88,8 +88,9 @@ export class AddTaskModal extends Modal { .setName("Category") .addText(text => { categoryInput = text.inputEl; + text.setValue(inboxCategory.title); + this.result.catId = inboxCategory._id; text.onChange(value => { - // Simulate a dropdown by creating a suggester modal const suggester = new CategorySuggesterModal(this.app, this.categories, (item: Category) => { categoryInput.value = item.title; this.result.catId = item._id; @@ -104,7 +105,9 @@ export class AddTaskModal extends Modal { new Setting(contentEl) .addTextArea((textArea: TextAreaComponent) => { - textArea.inputEl.style.minHeight = "5em"; // Increase the size of the text area + textArea.inputEl.style.minHeight = "5em"; + textArea.inputEl.style.minWidth = "100%"; + textArea.onChange((value: string) => { this.result.task = value; }); @@ -118,20 +121,37 @@ export class AddTaskModal extends Modal { new Setting(contentEl) .setDesc(shortcutsDesc); - // Submit Button new Setting(contentEl) .addButton((btn) => btn - .setButtonText("Submit") + .setButtonText("Add") .setCta() .onClick(() => { - this.close(); - if (this.onSubmit && this.result.catId && this.result.task) { - this.onSubmit(this.result); - } + this.addTask(); })); + + this.modalEl.addEventListener("keydown", (e: KeyboardEvent) => { + if (e.key === "Enter" && e.ctrlKey) { + e.preventDefault(); + this.addTask(); + } + }); + + } + + private addTask() { + if (!this.result.task.trim()) { + new Notice('Please enter a task description.', 4000); + return; + } + this.close(); + if (this.onSubmit && this.result.task) { + this.onSubmit(this.result); + } } + + private getShortcutsLink(): HTMLAnchorElement { const a = document.createElement('a'); a.href = 'https://help.amazingmarvin.com/en/articles/1949399-using-shortcuts-while-creating-a-task'; diff --git a/src/main.ts b/src/main.ts index 0315a49..49128c9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -85,12 +85,10 @@ export default class AmazingMarvinPlugin extends Plugin { // Fetch categories first and make sure they are loaded try { const categories = await this.fetchTasksAndCategories(CONSTANTS.categoriesEndpoint); - console.log('Categories:', categories); // For debug purposes // Ensure categories are fetched before initializing the modal if (categories.length > 0) { new AddTaskModal(this.app, categories, async (taskDetails: { catId: string, task: string }) => { - console.log('Task details:', taskDetails); - + console.debug(`TaskModal result: ${taskDetails.catId} - ${taskDetails.task}}`); this.addMarvinTask(taskDetails.catId, taskDetails.task) .then(task => { editor.replaceRange(`- [${task.done ? 'x' : ' '}] [⚓](${task.deepLink}) ${this.formatTaskDetails(task as Task, '')} ${task.title}`, editor.getCursor());