first implementation of the main.ts file: settings tab

main.ts

@@ -1,134 +1,240 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import test from "node:test";
+import {
+	App,
+	ButtonComponent,
+	Editor,
+	MarkdownEditView,
+	MarkdownView,
+	Modal,
+	Notice,
+	Plugin,
+	PluginSettingTab,
+	Setting,
+	setIcon,
+} from "obsidian";
 
-// Remember to rename these classes and interfaces!
+interface BudgetSettings {
-
-interface MyPluginSettings {
 	mySetting: string;
 }
 
-const DEFAULT_SETTINGS: MyPluginSettings = {
+const DEFAULT_SETTINGS: BudgetSettings = {
-	mySetting: 'default'
+	mySetting: "default",
-}
+};
 
-export default class MyPlugin extends Plugin {
+export default class budgetPlugin extends Plugin {
-	settings: MyPluginSettings;
+	settings: BudgetSettings | "test" = DEFAULT_SETTINGS;
 
 	async onload() {
-		await this.loadSettings();
+		console.log(this.settings);
-
+		///// starting the app
-		// This creates an icon in the left ribbon.
+		// addRibbon icon
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+		const ribbonIconEl = this.addRibbonIcon(
-			// Called when the user clicks the icon.
+			"dollar-sign",
-			new Notice('This is a notice!');
+			"New Expense",
-		});
+			(evt: MouseEvent) => {
-		// Perform additional things with the ribbon
+				new Notice("New Expense Modal");
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
+				// need to start modal
-
+				new ExpenseModal(
-		// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
+					this.app,
-		const statusBarItemEl = this.addStatusBarItem();
+					(
-		statusBarItemEl.setText('Status Bar Text');
+						expenseAmount,
-
+						expenseCategory,
-		// This adds a simple command that can be triggered anywhere
+						expenseAccount,
-		this.addCommand({
+						expenseValue
-			id: 'open-sample-modal-simple',
+					) => {
-			name: 'Open sample modal (simple)',
+						new Notice(
-			callback: () => {
+							`${expenseAmount}, ${expenseCategory}, ${expenseAccount}, ${expenseValue}`
-				new SampleModal(this.app).open();
+						);
 					}
-		});
+				).open();
-		// This adds an editor command that can perform some operation on the current editor instance
+
-		this.addCommand({
+				// need to set active md file to budget
-			id: 'sample-editor-command',
+				console.log("Debug: trigger new expense modal from ribbon");
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
 			}
-		});
+		);
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
+		// Adds a setting tag so the user ca configure the aspects of the plugin
-		this.addCommand({
+		this.addSettingTab(new ExpenseSettingTab(this.app, this));
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
 	}
 
-					// This command will only show up in Command Palette when the check function returns true
+	onunload(): void {}
-					return true;
-				}
-			}
-		});
 
-		// This adds a settings tab so the user can configure various aspects of the plugin
+	async loadSettings(): Promise<void> {
-		this.addSettingTab(new SampleSettingTab(this.app, this));
+		this.settings = Object.assign(
-
+			{},
-		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
+			DEFAULT_SETTINGS,
-		// Using this function will automatically remove the event listener when this plugin is disabled.
+			await this.loadData()
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
+		);
-			console.log('click', evt);
-		});
-
-		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
 	}
 
-	onunload() {
+	async saveSettings(): Promise<void> {
-
-	}
-
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
-
-	async saveSettings() {
 		await this.saveData(this.settings);
 	}
 }
 
-class SampleModal extends Modal {
+export class ExpenseModal extends Modal {
-	constructor(app: App) {
+	expenseAmount: string = "120";
+	expenseCategory: string;
+	expenseAccount: string = "cash";
+	expenseValue: string = "basics";
+
+	onSubmit: (
+		expenseAmount: string,
+		expenseCategory: string,
+		expenseAccount: string,
+		expenseValue: string
+	) => void;
+
+	constructor(
+		app: App,
+		onSubmit: (
+			expenseAmount: string,
+			expenseCategory: string,
+			expenseAccount: string,
+			expenseValue: string
+		) => void
+	) {
 		super(app);
+		this.onSubmit = onSubmit;
 	}
 
 	onOpen() {
-		const {contentEl} = this;
+		const { contentEl } = this;
-		contentEl.setText('Woah!');
+		contentEl.createEl("h1", { text: "Enter new Expense" });
-	}
 
+		new Setting(contentEl).setName("Amount").addText((text) =>
+			text.onChange((value) => {
+				this.expenseAmount = value;
+			})
+		);
+
+		// move this to the setting
+		const category = [
+			{ categoryId: 1, categoryName: "Eat", categoryIcon: "carrot" },
+			{
+				categoryId: 2,
+				categoryName: "Home",
+				categoryIcon: "home",
+			},
+			{
+				categoryId: 3,
+				categoryName: "Leisure",
+				categoryIcon: "armchair",
+			},
+			{
+				categoryId: 4,
+				categoryName: "Beauty",
+				categoryIcon: "glasses",
+			},
+			{
+				categoryId: 5,
+				categoryName: "Holidays",
+				categoryIcon: "caravan",
+			},
+			{
+				categoryId: 6,
+				categoryName: "Transport",
+				categoryIcon: "car",
+			},
+		];
+
+		const categorySetting = new Setting(contentEl).setName("Category");
+		category.forEach((c) => {
+			const setting = categorySetting.addButton((btn: ButtonComponent) =>
+				btn
+					.setButtonText(c.categoryName)
+					.setIcon(c.categoryIcon)
+					.setTooltip(c.categoryName)
+					.onClick(() => {
+						this.expenseCategory = c.categoryName;
+						new Notice(`Selected Category: ${c.categoryName}`);
+						btn.setCta();
+					})
+			);
+		});
+
+		new Setting(contentEl).setName("Account").addText((text) =>
+			text.onChange((value = "cash") => {
+				this.expenseAccount = value;
+			})
+		);
+
+		new Setting(contentEl).setName("Rating").addText((text) =>
+			text.onChange((value) => {
+				this.expenseValue = value;
+			})
+		);
+
+		new Setting(contentEl).addButton((btn) =>
+			btn
+				.setButtonText("Submit")
+				.setCta()
+				.onClick(() => {
+					this.close();
+					this.onSubmit(
+						this.expenseAmount,
+						this.expenseCategory,
+						this.expenseAccount,
+						this.expenseValue
+					);
+					const file = this.app.workspace.getActiveFile();
+					if (file) {
+						console.log("Debug: active file", file.basename);
+						const editor =
+							this.app.workspace.getActiveViewOfType(
+								MarkdownView
+							);
+						if (editor) {
+							console.log("Debug: active editor", editor);
+							// get today date and format YYYY-MM-DD
+							const today = new Date();
+							const todayFormatted = today
+								.toISOString()
+								.split("T")[0];
+
+							// move the cursor on start of line 3
+							editor.editor.setCursor(2, 0);
+							// insert the new expense on line 3
+							editor.editor.replaceSelection(
+								`| ${todayFormatted} | ${this.expenseAmount} | ${this.expenseCategory} | ${this.expenseAccount} | ${this.expenseValue} | \n`
+							);
+						}
+					} else {
+						console.log("Debug: no active file");
+					}
+				})
+		);
+	}
 	onClose() {
-		const {contentEl} = this;
+		let { contentEl } = this;
 		contentEl.empty();
 	}
 }
 
-class SampleSettingTab extends PluginSettingTab {
+class ExpenseSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
+	plugin: budgetPlugin;
 
-	constructor(app: App, plugin: MyPlugin) {
+	constructor(app: App, plugin: budgetPlugin) {
 		super(app, plugin);
 		this.plugin = plugin;
 	}
 
 	display(): void {
-		const {containerEl} = this;
+		const { containerEl } = this;
-
+		console.log(this.plugin.settings);
 		containerEl.empty();
 
 		new Setting(containerEl)
-			.setName('Setting #1')
+			.setName("MySetting.settings")
-			.setDesc('It\'s a secret')
+			.setDesc("Category 1")
-			.addText(text => text
+			.addText((text) =>
-				.setPlaceholder('Enter your secret')
+				text
+					.setPlaceholder("First setting = categories")
 					.setValue(this.plugin.settings.mySetting)
 					.onChange(async (value) => {
 						this.plugin.settings.mySetting = value;
 						await this.plugin.saveSettings();
-				}));
+						console.log("Secret: " + value);
+					})
+			);
 	}
 }