From 90f610a3d38bfe9278da53b7e6196fb156f21f17 Mon Sep 17 00:00:00 2001 From: steeven Date: Sun, 14 Apr 2024 08:05:06 +0200 Subject: [PATCH] set focus on input value expense amount & erro handling if user use ',' for expensance (before return NaN) --- expenseModal.ts | 13 +++++- main.ts | 116 +++++++++++++++++++++++++----------------------- 2 files changed, 72 insertions(+), 57 deletions(-) diff --git a/expenseModal.ts b/expenseModal.ts index 2f9d14f..0c9cb2a 100644 --- a/expenseModal.ts +++ b/expenseModal.ts @@ -1,3 +1,5 @@ +// this modal opens a new modal to add a new expense and write it down on the budgetMarkdownFile + import { App, Modal, @@ -53,13 +55,22 @@ export class ExpenseModal extends Modal { }); // input field for the expense amount - // todo: add focus on this field new Setting(contentEl).setName("Amount").addText((text) => text.onChange((value) => { + // convert comma to dot (need to check this if internationalizing) + if (value.includes(",")) { + value = value.replace(",", "."); + } this.expenseAmount = value; }) ); + // focus on the input field expense + const inputElement = contentEl.querySelector("input"); + if (inputElement) { + inputElement.focus(); + } + // create category button with icon and tooltip const categorySetting = new Setting(contentEl).setName("Category"); diff --git a/main.ts b/main.ts index 1578770..b05da53 100644 --- a/main.ts +++ b/main.ts @@ -1,17 +1,5 @@ import test from "node:test"; -import { - App, - ButtonComponent, - Editor, - MarkdownEditView, - MarkdownView, - Modal, - Notice, - Plugin, - PluginSettingTab, - Setting, - setIcon, -} from "obsidian"; +import { App, Notice, Plugin, PluginSettingTab, Setting } from "obsidian"; import { ExpenseModal } from "./expenseModal"; interface BudgetSettings { @@ -100,23 +88,28 @@ class ExpenseSettingTab extends PluginSettingTab { containerEl.empty(); const expenseCategories = this.plugin.settings.expenseCategories; - console.log(expenseCategories); const expenseAccounts = this.plugin.settings.expenseAccounts; const expenseValues = this.plugin.settings.expenseValues; - new Setting(containerEl).setName("Expense Categories"); + const categoriesDiv = containerEl.createDiv(); + categoriesDiv.createEl("h2", { text: "Expense Categories" }); if (Array.isArray(expenseCategories)) { expenseCategories.forEach((item, index) => { - new Setting(containerEl) + new Setting(containerEl.createDiv()) .setDesc(`Category number ${index + 1}`) .addText((text) => text .setPlaceholder(`Name = ${item.name}`) .setValue(item.name) .onChange(async (value) => { - this.plugin.settings.expenseCategories[ - index - ].name = value; + ( + this.plugin.settings.expenseCategories as { + [index: number]: { + name: string; + icon: string; + }; + } + )[index].name = value; await this.plugin.saveSettings(); }) ) @@ -125,19 +118,25 @@ class ExpenseSettingTab extends PluginSettingTab { .setPlaceholder(`Icon = ${item.icon}`) .setValue(item.icon) .onChange(async (value) => { - this.plugin.settings.expenseCategories[ - index - ].icon = value; + ( + this.plugin.settings.expenseCategories as { + [index: number]: { + name: string; + icon: string; + }; + } + )[index].icon = value; await this.plugin.saveSettings(); }) ); }); } - new Setting(containerEl).setName("Expense Accounts"); + const accountsDiv = containerEl.createDiv(); + accountsDiv.createEl("h2", { text: "Expense Accounts" }); if (Array.isArray(expenseAccounts)) { expenseAccounts.forEach((item, index) => { - new Setting(containerEl) + new Setting(containerEl.createDiv()) .setDesc(`Account number ${index + 1}`) .addText((text) => text @@ -145,7 +144,42 @@ class ExpenseSettingTab extends PluginSettingTab { .setValue(item.name) .onChange(async (value) => { console.log("Updated name: " + value); - this.plugin.settings.expenseAccounts[ + ( + this.plugin.settings.expenseAccounts as { + [index: number]: { name: string }; + } + )[index].name = value; + await this.plugin.saveSettings(); + }) + ) + .addText((text) => + text + .setPlaceholder(`Icon = ${item.icon}`) + .setValue(item.icon) + .onChange(async (value) => { + console.log("Updated icon: " + value); + (this.plugin.settings.expenseAccounts as any[])[ + index + ].icon = value; + await this.plugin.saveSettings(); + }) + ); + }); + } + + const valuesDiv = containerEl.createDiv(); + valuesDiv.createEl("h2", { text: "Expense Values" }); + if (Array.isArray(expenseValues)) { + expenseValues.forEach((item, index) => { + new Setting(containerEl.createDiv()) + .setDesc(`Account number ${index + 1}`) + .addText((text) => + text + .setPlaceholder(`Name = ${item.name}`) + .setValue(item.name) + .onChange(async (value) => { + console.log("Updated name: " + value); + (this.plugin.settings.expenseValues as any[])[ index ].name = value; await this.plugin.saveSettings(); @@ -157,7 +191,7 @@ class ExpenseSettingTab extends PluginSettingTab { .setValue(item.icon) .onChange(async (value) => { console.log("Updated icon: " + value); - this.plugin.settings.expenseAccounts[ + (this.plugin.settings.expenseValues as any[])[ index ].icon = value; await this.plugin.saveSettings(); @@ -165,35 +199,5 @@ class ExpenseSettingTab extends PluginSettingTab { ); }); } - - new Setting(containerEl).setName("Expense Values"); - if (Array.isArray(expenseValues)) { - expenseValues.forEach((item, index) => { - new Setting(containerEl) - .setDesc(`Account number ${index + 1}`) - .addText((text) => - text - .setPlaceholder(`Name = ${item.name}`) - .setValue(item.name) - .onChange(async (value) => { - console.log("Updated name: " + value); - this.plugin.settings.expenseValues[index].name = - value; - await this.plugin.saveSettings(); - }) - ) - .addText((text) => - text - .setPlaceholder(`Icon = ${item.icon}`) - .setValue(item.icon) - .onChange(async (value) => { - console.log("Updated icon: " + value); - this.plugin.settings.expenseValues[index].icon = - value; - await this.plugin.saveSettings(); - }) - ); - }); - } } }