set focus on input value expense amount & erro handling if user use ',' for expensance (before return NaN)

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");
 

main.ts

@@ -1,17 +1,5 @@
 import test from "node:test";
-import {
+import { App, Notice, Plugin, PluginSettingTab, Setting } from "obsidian";
-	App,
-	ButtonComponent,
-	Editor,
-	MarkdownEditView,
-	MarkdownView,
-	Modal,
-	Notice,
-	Plugin,
-	PluginSettingTab,
-	Setting,
-	setIcon,
-} 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
+									this.plugin.settings.expenseCategories as {
-								].name = value;
+										[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
+									this.plugin.settings.expenseCategories as {
-								].icon = value;
+										[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();
-							})
-					);
-			});
-		}
 	}
 }