Update to the modals

src/main.ts

@@ -95,39 +95,73 @@ export default class MediaDbPlugin extends Plugin {
 
 	async createEntryWithAdvancedSearchModal() {
 		let results: MediaTypeModel[] = [];
+
+		const {advancedSearchOptions, advancedSearchModal} = await this.openMediaDbAdvancedSearchModal();
+		if (!advancedSearchOptions) {
+			advancedSearchModal.close();
+			return;
+		}
+
+		let apiSearchResults: MediaTypeModel[] = undefined;
 		try {
-			const {query, apis} = await this.openMediaDbAdvancedSearchModal();
+			apiSearchResults = await this.apiManager.query(advancedSearchOptions.query, advancedSearchOptions.apis);
-
-			new Notice('MediaDB Searching...');
-
-			const apiSearchResults = await this.apiManager.query(query, apis);
-			const selectResults = await this.openMediaDbSelectModal(apiSearchResults, false);
-			results = await this.queryDetails(selectResults);
 		} catch (e) {
 			console.warn(e);
 			new Notice(e.toString());
+			advancedSearchModal.close();
+			return;
 		}
 
+		advancedSearchModal.close();
+
+		const {selectRes, selectModal} = await this.openMediaDbSelectModal(apiSearchResults, false);
+		if (!selectRes) {
+			selectModal.close();
+			return;
+		}
+
+		try {
+			results = await this.queryDetails(selectRes);
+		} catch (e) {
+			console.warn(e);
+			new Notice(e.toString());
+			selectModal.close();
+			return;
+		}
+
+		selectModal.close();
+
 		debugLog(results);
+		if (results) {
 			await this.createMediaDbNotes(results);
 		}
+	}
 
 	async createEntryWithIdSearchModal() {
 		let result: MediaTypeModel = undefined;
+
+		const {idSearchOptions, idSearchModal} = await this.openMediaDbIdSearchModal();
+		if (!idSearchOptions) {
+			idSearchModal.close();
+			return;
+		}
+
 		try {
-			const {query, api} = await this.openMediaDbIdSearchModal();
+			result = await this.apiManager.queryDetailedInfoById(idSearchOptions.query, idSearchOptions.api);
-
-			new Notice('MediaDB Searching...');
-
-			result = await this.apiManager.queryDetailedInfoById(query, api);
 		} catch (e) {
 			console.warn(e);
 			new Notice(e.toString());
+			idSearchModal.close();
+			return;
 		}
 
+		idSearchModal.close();
+
 		debugLog(result);
+		if (result) {
 			await this.createMediaDbNoteFromModel(result);
 		}
+	}
 
 	async createMediaDbNotes(models: MediaTypeModel[], attachFile?: TFile): Promise<void> {
 		for (const model of models) {
@@ -340,23 +374,23 @@ export default class MediaDbPlugin extends Plugin {
 				}
 
 				let selectedResults: MediaTypeModel[] = [];
+				const modal = new MediaDbSearchResultModal(this, results, true);
 				try {
 					selectedResults = await new Promise((resolve, reject) => {
-						const searchResultModal = new MediaDbSearchResultModal(this.app, this, results, true, (res, err) => {
+						modal.title = `Results for \'${title}\'`;
+						modal.setSubmitCallback(res => resolve(res));
+						modal.setSkipCallback(() => reject(new UserCancelError('user skipped')));
+						modal.setCloseCallback(err => {
 							if (err) {
-								return reject(err);
+								reject(err);
 							}
-							resolve(res);
-						}, () => {
 							reject(new UserCancelError('user canceled'));
-						}, () => {
-							reject(new UserSkipError('user skipped'));
 						});
 
-						searchResultModal.title = `Results for \'${title}\'`;
+						modal.open();
-						searchResultModal.open();
 					});
 				} catch (e) {
+					modal.close();
 					if (e instanceof UserCancelError) {
 						erroredFiles.push({filePath: file.path, error: e.message});
 						canceled = true;
@@ -377,6 +411,8 @@ export default class MediaDbPlugin extends Plugin {
 
 				const detailedResults = await this.queryDetails(selectedResults);
 				await this.createMediaDbNotes(detailedResults, appendContent ? file : null);
+
+				modal.close();
 			}
 		}
 
@@ -396,39 +432,53 @@ export default class MediaDbPlugin extends Plugin {
 		const targetFile = await this.app.vault.create(filePath, fileContent);
 	}
 
-	async openMediaDbAdvancedSearchModal(): Promise<{ query: string, apis: string[] }> {
+	async openMediaDbAdvancedSearchModal(): Promise<{ advancedSearchOptions: { query: string, apis: string[] }, advancedSearchModal: MediaDbAdvancedSearchModal }> {
-		return await new Promise((resolve, reject) => {
+		const modal = new MediaDbAdvancedSearchModal(this);
-			new MediaDbAdvancedSearchModal(this.app, this, (res, err) => {
+		const res: { query: string, apis: string[] } = await new Promise((resolve, reject) => {
+			modal.setSubmitCallback(res => resolve(res));
+			modal.setCloseCallback(err => {
 				if (err) {
-					return reject(err);
+					reject(err);
 				}
-				resolve(res);
+				resolve(undefined);
-			}).open();
 			});
+
+			modal.open();
+		});
+		return {advancedSearchOptions: res, advancedSearchModal: modal};
 	}
 
-	async openMediaDbIdSearchModal(): Promise<{ query: string, api: string }> {
+	async openMediaDbIdSearchModal(): Promise<{ idSearchOptions: { query: string, api: string }, idSearchModal: MediaDbIdSearchModal }> {
-		return await new Promise((resolve, reject) => {
+		const modal = new MediaDbIdSearchModal(this);
-			new MediaDbIdSearchModal(this.app, this, (res, err) => {
+		const res: { query: string, api: string } = await new Promise((resolve, reject) => {
+			modal.setSubmitCallback(res => resolve(res));
+			modal.setCloseCallback(err => {
 				if (err) {
-					return reject(err);
+					reject(err);
 				}
-				resolve(res);
+				resolve(undefined);
-			}).open();
 			});
+
+			modal.open();
+		});
+		return {idSearchOptions: res, idSearchModal: modal};
 	}
 
-	async openMediaDbSelectModal(resultsToDisplay: MediaTypeModel[], skipButton: boolean = false): Promise<MediaTypeModel[]> {
+	async openMediaDbSelectModal(resultsToDisplay: MediaTypeModel[], skipButton: boolean = false): Promise<{ selectRes: MediaTypeModel[], selectModal: MediaDbSearchResultModal }> {
-		return await new Promise((resolve, reject) => {
+		const modal = new MediaDbSearchResultModal(this, resultsToDisplay, skipButton);
-			new MediaDbSearchResultModal(this.app, this, resultsToDisplay, skipButton, (res, err) => {
+		const res: MediaTypeModel[] = await new Promise((resolve, reject) => {
+			modal.setSubmitCallback(res => resolve(res));
+			modal.setSkipCallback(() => resolve([]));
+			modal.setCloseCallback(err => {
 				if (err) {
-					return reject(err);
+					reject(err);
 				}
-				resolve(res);
+				resolve(undefined);
-			}, () => {
-				resolve([]);
-			}).open();
 			});
+
+			modal.open();
+		});
+		return {selectRes: res, selectModal: modal};
 	}
 
 	async loadSettings() {

src/modals/MediaDbAdvancedSearchModal.ts

@@ -1,4 +1,4 @@
-import {App, ButtonComponent, Component, Modal, Notice, Setting, TextComponent, ToggleComponent} from 'obsidian';
+import {ButtonComponent, Component, Modal, Notice, Setting, TextComponent, ToggleComponent} from 'obsidian';
 import {MediaTypeModel} from '../models/MediaTypeModel';
 import {debugLog} from '../utils/Utils';
 import MediaDbPlugin from '../main';
@@ -9,19 +9,27 @@ export class MediaDbAdvancedSearchModal extends Modal {
 	plugin: MediaDbPlugin;
 	searchBtn: ButtonComponent;
 	selectedApis: { name: string, selected: boolean }[];
-	onSubmit: (res: { query: string, apis: string[] }, err?: Error) => void;
+	submitCallback?: (res: { query: string, apis: string[] }) => void;
+	closeCallback?: (err?: Error) => void;
 
-	constructor(app: App, plugin: MediaDbPlugin, onSubmit?: (res: { query: string, apis: string[] }, err?: Error) => void) {
+	constructor(plugin: MediaDbPlugin) {
-		super(app);
+		super(plugin.app);
 		this.plugin = plugin;
-		this.onSubmit = onSubmit;
 		this.selectedApis = [];
 		for (const api of this.plugin.apiManager.apis) {
 			this.selectedApis.push({name: api.apiName, selected: false});
 		}
 	}
 
-	submitCallback(event: KeyboardEvent) {
+	setSubmitCallback(submitCallback: (res: { query: string, apis: string[] }) => void): void {
+		this.submitCallback = submitCallback;
+	}
+
+	setCloseCallback(closeCallback: (err?: Error) => void): void {
+		this.closeCallback = closeCallback;
+	}
+
+	keyPressCallback(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
 			this.search();
 		}
@@ -44,17 +52,11 @@ export class MediaDbAdvancedSearchModal extends Modal {
 		}
 
 		if (!this.isBusy) {
-			try {
 			this.isBusy = true;
 			this.searchBtn.setDisabled(false);
 			this.searchBtn.setButtonText('Searching...');
 
-				this.onSubmit({query: this.query, apis: apis});
+			this.submitCallback({query: this.query, apis: apis});
-			} catch (e) {
-				this.onSubmit(null, e);
-			} finally {
-				this.close();
-			}
 		}
 	}
 
@@ -68,7 +70,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
 		searchComponent.inputEl.style.width = '100%';
 		searchComponent.setPlaceholder(placeholder);
 		searchComponent.onChange(value => (this.query = value));
-		searchComponent.inputEl.addEventListener('keydown', this.submitCallback.bind(this));
+		searchComponent.inputEl.addEventListener('keydown', this.keyPressCallback.bind(this));
 
 		contentEl.appendChild(searchComponent.inputEl);
 		searchComponent.inputEl.focus();
@@ -110,9 +112,9 @@ export class MediaDbAdvancedSearchModal extends Modal {
 	}
 
 	onClose() {
+		this.closeCallback();
 		const {contentEl} = this;
 		contentEl.empty();
 	}
 
-
 }

src/modals/MediaDbIdSearchModal.ts

@@ -1,4 +1,4 @@
-import {App, ButtonComponent, DropdownComponent, Modal, Notice, Setting, TextComponent} from 'obsidian';
+import {ButtonComponent, DropdownComponent, Modal, Notice, Setting, TextComponent} from 'obsidian';
 import {MediaTypeModel} from '../models/MediaTypeModel';
 import {debugLog} from '../utils/Utils';
 import MediaDbPlugin from '../main';
@@ -9,16 +9,24 @@ export class MediaDbIdSearchModal extends Modal {
 	plugin: MediaDbPlugin;
 	searchBtn: ButtonComponent;
 	selectedApi: string;
-	onSubmit: (res: { query: string, api: string }, err?: Error) => void;
+	submitCallback?: (res: { query: string, api: string }, err?: Error) => void;
+	closeCallback?: (err?: Error) => void;
 
-	constructor(app: App, plugin: MediaDbPlugin, onSubmit?: (res: { query: string, api: string }, err?: Error) => void) {
+	constructor(plugin: MediaDbPlugin) {
-		super(app);
+		super(plugin.app);
 		this.plugin = plugin;
-		this.onSubmit = onSubmit;
 		this.selectedApi = plugin.apiManager.apis[0].apiName;
 	}
 
-	submitCallback(event: KeyboardEvent) {
+	setSubmitCallback(submitCallback: (res: { query: string, api: string }, err?: Error) => void): void {
+		this.submitCallback = submitCallback;
+	}
+
+	setCloseCallback(closeCallback: (err?: Error) => void): void {
+		this.closeCallback = closeCallback;
+	}
+
+	keyPressCallback(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
 			this.search();
 		}
@@ -39,17 +47,11 @@ export class MediaDbIdSearchModal extends Modal {
 		}
 
 		if (!this.isBusy) {
-			try {
 			this.isBusy = true;
 			this.searchBtn.setDisabled(false);
 			this.searchBtn.setButtonText('Searching...');
 
-				this.onSubmit({query: this.query, api: this.selectedApi});
+			this.submitCallback({query: this.query, api: this.selectedApi});
-			} catch (e) {
-				this.onSubmit(null, e);
-			} finally {
-				this.close();
-			}
 		}
 	}
 
@@ -63,7 +65,7 @@ export class MediaDbIdSearchModal extends Modal {
 		searchComponent.inputEl.style.width = '100%';
 		searchComponent.setPlaceholder(placeholder);
 		searchComponent.onChange(value => (this.query = value));
-		searchComponent.inputEl.addEventListener('keydown', this.submitCallback.bind(this));
+		searchComponent.inputEl.addEventListener('keydown', this.keyPressCallback.bind(this));
 
 		contentEl.appendChild(searchComponent.inputEl);
 		searchComponent.inputEl.focus();
@@ -98,9 +100,9 @@ export class MediaDbIdSearchModal extends Modal {
 	}
 
 	onClose() {
+		this.closeCallback();
 		const {contentEl} = this;
 		contentEl.empty();
 	}
 
-
 }

src/modals/MediaDbSearchResultModal.ts

@@ -1,4 +1,3 @@
-import {App} from 'obsidian';
 import {MediaTypeModel} from '../models/MediaTypeModel';
 import MediaDbPlugin from '../main';
 import {SelectModal} from './SelectModal';
@@ -6,26 +5,38 @@ import {SelectModal} from './SelectModal';
 export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
 	plugin: MediaDbPlugin;
 	heading: string;
-	onSubmit: (res: MediaTypeModel[], err?: Error) => void;
+	busy: boolean;
-	onCancel: () => void;
+	submitCallback: (res: MediaTypeModel[]) => void;
-	onSkip: () => void;
+	closeCallback: (err?: Error) => void;
+	skipCallback: () => void;
 
 	sendCallback: boolean;
 
-	constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], skipButton: boolean, onSubmit: (res: MediaTypeModel[], err?: Error) => void, onCancel: () => void, onSkip?: () => void) {
+	constructor(plugin: MediaDbPlugin, elements: MediaTypeModel[], skipButton: boolean) {
-		super(app, elements);
+		super(plugin.app, elements);
 		this.plugin = plugin;
-		this.onSubmit = onSubmit;
-		this.onCancel = onCancel;
-		this.onSkip = onSkip;
 
 		this.title = 'Search Results';
 		this.description = 'Select one or multiple search results.';
-		this.skipButton = skipButton;
+		this.addSkipButton = skipButton;
+
+		this.busy = false;
 
 		this.sendCallback = false;
 	}
 
+	setSubmitCallback(submitCallback: (res: MediaTypeModel[]) => void): void {
+		this.submitCallback = submitCallback;
+	}
+
+	setCloseCallback(closeCallback: (err?: Error) => void): void {
+		this.closeCallback = closeCallback;
+	}
+
+	setSkipCallback(skipCallback: () => void): void {
+		this.skipCallback = skipCallback;
+	}
+
 	// Renders each suggestion item.
 	renderElement(item: MediaTypeModel, el: HTMLElement) {
 		el.createEl('div', {text: this.plugin.mediaTypeManager.getFileName(item)});
@@ -35,20 +46,19 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
 
 	// Perform action on the selected suggestion.
 	submit() {
-		this.onSubmit(this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
+		if (!this.busy) {
-		this.sendCallback = true;
+			this.busy = true;
-		this.close();
+			this.submitButton.setButtonText('Creating entry...');
+			this.submitCallback(this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
+		}
 	}
 
 	skip() {
-		this.onSkip();
+		this.skipButton.setButtonText('Skipping...');
-		this.sendCallback = true;
+		this.skipCallback();
-		this.close();
 	}
 
 	onClose() {
-		if (!this.sendCallback) {
+		this.closeCallback();
-			this.onCancel();
-		}
 	}
 }

src/modals/SelectModal.ts

@@ -1,4 +1,4 @@
-import {App, Modal, Setting} from 'obsidian';
+import {App, ButtonComponent, Modal, Setting} from 'obsidian';
 import {SelectModalElement} from './SelectModalElement';
 import {mod} from '../utils/Utils';
 
@@ -7,7 +7,10 @@ export abstract class SelectModal<T> extends Modal {
 
 	title: string;
 	description: string;
-	skipButton: boolean;
+	addSkipButton: boolean;
+	cancelButton?: ButtonComponent;
+	skipButton?: ButtonComponent;
+	submitButton?: ButtonComponent;
 
 	elements: T[];
 	selectModalElements: SelectModalElement<T>[];
@@ -19,7 +22,10 @@ export abstract class SelectModal<T> extends Modal {
 
 		this.title = '';
 		this.description = '';
-		this.skipButton = false;
+		this.addSkipButton = false;
+		this.cancelButton = undefined;
+		this.skipButton = undefined;
+		this.submitButton = undefined;
 
 		this.elements = elements;
 		this.selectModalElements = [];
@@ -89,12 +95,12 @@ export abstract class SelectModal<T> extends Modal {
 
 		this.selectModalElements.first()?.element.scrollIntoView();
 
-		const bottomSetting = new Setting(contentEl);
+		const bottomSettingRow = new Setting(contentEl);
-		bottomSetting.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()));
+		bottomSettingRow.addButton(btn => this.cancelButton = btn.setButtonText('Cancel').onClick(() => this.close()));
-		if (this.skipButton) {
+		if (this.addSkipButton) {
-			bottomSetting.addButton(btn => btn.setButtonText('Skip').onClick(() => this.skip()));
+			bottomSettingRow.addButton(btn => this.skipButton = btn.setButtonText('Skip').onClick(() => this.skip()));
 		}
-		bottomSetting.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
+		bottomSettingRow.addButton(btn => this.submitButton = btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
 	}
 
 	activateHighlighted() {