tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
steeven 2024-04-14 08:05:06 +02:00
parent 47e238ff48
commit 90f610a3d3
2 changed files with 72 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
expenseModal.ts
View File

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

116
main.ts
View File

@ -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();
})
);
});
}
}
}