Cleanup and light changes

src/main.ts

@@ -2,7 +2,7 @@ import {MarkdownView, Notice, parseYaml, Plugin, stringifyYaml, TFile, TFolder}
 import {getDefaultSettings, MediaDbPluginSettings, MediaDbSettingTab} from './settings/Settings';
 import {APIManager} from './api/APIManager';
 import {MediaTypeModel} from './models/MediaTypeModel';
-import {dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString} from './utils/Utils';
+import {CreateNoteOptions, dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString} from './utils/Utils';
 import {OMDbAPI} from './api/apis/OMDbAPI';
 import {MALAPI} from './api/apis/MALAPI';
 import {WikipediaAPI} from './api/apis/WikipediaAPI';
@@ -179,9 +179,9 @@ export default class MediaDbPlugin extends Plugin {
 				return;
 			}
 
-			proceed = await this.modalHelper.openPreviewModal(selectResults, async () => {
+			proceed = await this.modalHelper.openPreviewModal({elements: selectResults}, async (previewModalData) => {
-				return true;
+				return previewModalData.confirmed;
-			})
+			});
 		}
 
 		await this.createMediaDbNotes(selectResults);
@@ -194,14 +194,14 @@ export default class MediaDbPlugin extends Plugin {
 		while (!proceed) {
 			idSearchResult = await this.modalHelper.openIdSearchModal({}, async (idSearchModalData) => {
 				return await this.apiManager.queryDetailedInfoById(idSearchModalData.query, idSearchModalData.api);
-			})
+			});
 			if (!idSearchResult) {
 				return;
 			}
 
-			proceed = await this.modalHelper.openPreviewModal([idSearchResult], async () => {
+			proceed = await this.modalHelper.openPreviewModal({elements: [idSearchResult]}, async (previewModalData) => {
-				return true;
+				return previewModalData.confirmed;
-			})
+			});
 		}
 
 		await this.createMediaDbNoteFromModel(idSearchResult, {attachTemplate: true, openNote: true});
@@ -226,11 +226,11 @@ export default class MediaDbPlugin extends Plugin {
 		return detailModels;
 	}
 
-	async createMediaDbNoteFromModel(mediaTypeModel: MediaTypeModel, options: { attachTemplate?: boolean, attachFile?: TFile, openNote?: boolean }): Promise<void> {
+	async createMediaDbNoteFromModel(mediaTypeModel: MediaTypeModel, options: CreateNoteOptions): Promise<void> {
 		try {
 			console.debug('MDB | creating new note');
 
-			let fileContent = await this.generateMediaDbNoteContents(mediaTypeModel, {attachTemplate: options.attachTemplate, attachFile: options.attachFile});
+			let fileContent = await this.generateMediaDbNoteContents(mediaTypeModel, options);
 
 			await this.createNote(this.mediaTypeManager.getFileName(mediaTypeModel), fileContent, options.openNote);
 		} catch (e) {
@@ -239,15 +239,13 @@ export default class MediaDbPlugin extends Plugin {
 		}
 	}
 
-	async generateMediaDbNoteContents(mediaTypeModel: MediaTypeModel, options: {attachTemplate?: boolean, attachFile?: TFile}) {
+	async generateMediaDbNoteContents(mediaTypeModel: MediaTypeModel, options: CreateNoteOptions) {
 		let fileMetadata = this.modelPropertyMapper.convertObject(mediaTypeModel.toMetaDataObject());
 		let fileContent = '';
+		const template = options.attachTemplate ? await this.mediaTypeManager.getTemplate(mediaTypeModel, this.app) : '';
 
 		({fileMetadata, fileContent} = await this.attachFile(fileMetadata, fileContent, options.attachFile));
-		({
+		({fileMetadata, fileContent} = await this.attachTemplate(fileMetadata, fileContent, template));
-			fileMetadata,
-			fileContent,
-		} = await this.attachTemplate(fileMetadata, fileContent, options.attachTemplate ? await this.mediaTypeManager.getTemplate(mediaTypeModel, this.app) : ''));
 
 		fileContent = `---\n${this.settings.useCustomYamlStringifier ? YAMLConverter.toYaml(fileMetadata) : stringifyYaml(fileMetadata)}---\n` + fileContent;
 		return fileContent;

src/modals/MediaDbPreviewModal.ts

@@ -1,26 +1,34 @@
-import { MarkdownRenderer, Modal, Setting, TFile } from "obsidian";
+import {ButtonComponent, MarkdownRenderer, Modal, Setting} from 'obsidian';
-import MediaDbPlugin from "src/main";
+import MediaDbPlugin from 'src/main';
-import { MediaTypeModel } from "src/models/MediaTypeModel";
+import {MediaTypeModel} from 'src/models/MediaTypeModel';
+import {PREVIEW_MODAL_DEFAULT_OPTIONS, PreviewModalData, PreviewModalOptions} from '../utils/ModalHelper';
+import {CreateNoteOptions} from '../utils/Utils';
 
 export class MediaDbPreviewModal extends Modal {
-    selectedSearchResults: MediaTypeModel[];
-    options: { attachTemplate: boolean, attachFile: TFile};
-    submitCallback: (res: boolean) => void;
-    closeCallback: (err?: Error) => void;
 	plugin: MediaDbPlugin;
-    searchBtn: any;
-    cancelButton: any;
-    submitButton: any;
-    busy: any;
 
-    constructor(plugin: MediaDbPlugin, mediaTypeModel: MediaTypeModel[], options: any) {
+	createNoteOptions: CreateNoteOptions;
+	elements: MediaTypeModel[];
+	isBusy: boolean;
+	title: string;
+	cancelButton: ButtonComponent;
+	submitButton: ButtonComponent;
+
+	submitCallback: (previewModalData: PreviewModalData) => void;
+	closeCallback: (err?: Error) => void;
+
+	constructor(plugin: MediaDbPlugin, previewModalOptions: PreviewModalOptions) {
+		previewModalOptions = Object.assign({}, PREVIEW_MODAL_DEFAULT_OPTIONS, previewModalOptions);
+
 		super(plugin.app);
+
 		this.plugin = plugin;
-        this.selectedSearchResults = mediaTypeModel;
+		this.title = previewModalOptions.modalTitle;
-        this.options = options;
+		this.elements = previewModalOptions.elements;
+		this.createNoteOptions = previewModalOptions.createNoteOptions;
 	}
 
-    setSubmitCallback(submitCallback: (res: boolean) => void): void {
+	setSubmitCallback(submitCallback: (previewModalData: PreviewModalData) => void): void {
 		this.submitCallback = submitCallback;
 	}
 
@@ -29,16 +37,24 @@ export class MediaDbPreviewModal extends Modal {
 	}
 
 	async preview(): Promise<void> {
-        let { contentEl } = this;
+		let {contentEl} = this;
-        for (let result of this.selectedSearchResults) {
+		contentEl.addClass('media-db-plugin-preview-modal');
-            let fileContent = await this.plugin.generateMediaDbNoteContents(result, { attachTemplate: this.options.attachTemplate, attachFile: this.options.attachFile });
+
-            this.contentEl.createEl("h3", {text: result.englishTitle});
+		contentEl.createEl('h2', {text: this.title});
-            const fileDiv = this.contentEl.createDiv();
+
+		const previewWrapper = contentEl.createDiv({cls: 'media-db-plugin-preview-wrapper'});
+
+		for (let result of this.elements) {
+			previewWrapper.createEl('h3', {text: result.englishTitle});
+			const fileDiv = previewWrapper.createDiv();
+
+			let fileContent = await this.plugin.generateMediaDbNoteContents(result, this.createNoteOptions);
 			fileContent = `\n${fileContent}\n`;
+
 			MarkdownRenderer.renderMarkdown(fileContent, fileDiv, null, null);
 		}
 
-        contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
+		contentEl.createDiv({cls: 'media-db-plugin-spacer'});
 
 		const bottomSettingRow = new Setting(contentEl);
 		bottomSettingRow.addButton(btn => {
@@ -50,21 +66,13 @@ export class MediaDbPreviewModal extends Modal {
 		bottomSettingRow.addButton(btn => {
 			btn.setButtonText('Ok');
 			btn.setCta();
-            btn.onClick(() => this.submitCallback(true));
+			btn.onClick(() => this.submitCallback({confirmed: true}));
 			btn.buttonEl.addClass('media-db-plugin-button');
 			this.submitButton = btn;
-        })
+		});
-    }
-
-    submit() {
-        if (!this.busy) {
-            this.busy = true;
-            this.submitButton.setButtonText('Creating entry...');
-            this.submitCallback(true);
-        }
 	}
 
 	onOpen(): void {
-        this.preview()
+		this.preview();
 	}
 }

src/modals/SelectModal.ts

@@ -79,11 +79,11 @@ export abstract class SelectModal<T> extends Modal {
 	async onOpen() {
 		const {contentEl} = this;
 
+		contentEl.addClass('media-db-plugin-select-modal');
+
 		contentEl.createEl('h2', {text: this.title});
 		contentEl.createEl('p', {text: this.description});
 
-		contentEl.addClass('media-db-plugin-select-modal');
-
 		this.elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'});
 		this.elementWrapper.tabIndex = 0;
 

src/settings/PropertyMappingModelsComponent.svelte

@@ -3,10 +3,7 @@
 	import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
 
 	export let models: PropertyMappingModel[] = [];
-
 	export let save: (model: PropertyMappingModel) => void;
-
-	// TODO: validate all the mappings before saving.
 </script>
 
 <style>

src/utils/ModalHelper.ts

@@ -4,7 +4,8 @@ import {MediaTypeModel} from '../models/MediaTypeModel';
 import {MediaDbSearchResultModal} from '../modals/MediaDbSearchResultModal';
 import {Notice} from 'obsidian';
 import MediaDbPlugin from '../main';
-import { MediaDbPreviewModal } from 'src/modals/MediaDbPreviewModal';
+import {MediaDbPreviewModal} from 'src/modals/MediaDbPreviewModal';
+import {CreateNoteOptions} from './Utils';
 
 
 export enum ModalResultCode {
@@ -47,10 +48,21 @@ export interface SelectModalResult {
 	error?: Error,
 }
 
+/**
+ * Object containing the data {@link ModalHelper.createPreviewModal} returns.
+ * On {@link ModalResultCode.SUCCESS} this contains {@link PreviewModalData}.
+ * On {@link ModalResultCode.ERROR} this contains a reference to that error.
+ */
+export interface PreviewModalResult {
+	code: ModalResultCode.SUCCESS | ModalResultCode.CLOSE | ModalResultCode.ERROR,
+	data?: PreviewModalData,
+	error?: Error,
+}
+
 /**
  * The data the advanced search modal returns.
- * query: the query string
+ * - query: the query string
- * apis: the selected APIs
+ * - apis: the selected APIs
  */
 export interface AdvancedSearchModalData {
 	query: string,
@@ -59,8 +71,8 @@ export interface AdvancedSearchModalData {
 
 /**
  * The data the id search modal returns.
- * query: the query string
+ * - query: the query string
- * apis: the selected APIs
+ * - apis: the selected APIs
  */
 export interface IdSearchModalData {
 	query: string,
@@ -69,17 +81,25 @@ export interface IdSearchModalData {
 
 /**
  * The data the select modal returns.
- * selected: the selected items
+ * - selected: the selected items
  */
 export interface SelectModalData {
 	selected: MediaTypeModel[],
 }
 
+/**
+ * The data the preview modal returns.
+ * - confirmed: whether the selected element has been confirmed
+ */
+export interface PreviewModalData {
+	confirmed: boolean,
+}
+
 /**
  * Options for the advanced search modal.
- * modalTitle: the title of the modal
+ * - modalTitle: the title of the modal
- * preselectedAPIs: a list of preselected APIs
+ * - preselectedAPIs: a list of preselected APIs
- * prefilledSearchString: prefilled query
+ * - prefilledSearchString: prefilled query
  */
 export interface AdvancedSearchModalOptions {
 	modalTitle?: string,
@@ -89,9 +109,9 @@ export interface AdvancedSearchModalOptions {
 
 /**
  * Options for the id search modal.
- * modalTitle: the title of the modal
+ * - modalTitle: the title of the modal
- * preselectedAPIs: a list of preselected APIs
+ * - preselectedAPIs: a list of preselected APIs
- * prefilledSearchString: prefilled query
+ * - prefilledSearchString: prefilled query
  */
 export interface IdSearchModalOptions {
 	modalTitle?: string,
@@ -101,10 +121,10 @@ export interface IdSearchModalOptions {
 
 /**
  * Options for the select modal.
- * modalTitle: the title of the modal
+ * - modalTitle: the title of the modal
- * elements: the elements the user can select from
+ * - elements: the elements the user can select from
- * multiSelect: whether to allow multiselect
+ * - multiSelect: whether to allow multiselect
- * skipButton: whether to add a skip button to the modal
+ * - skipButton: whether to add a skip button to the modal
  */
 export interface SelectModalOptions {
 	modalTitle?: string,
@@ -113,6 +133,17 @@ export interface SelectModalOptions {
 	skipButton?: boolean,
 }
 
+/**
+ * Options for the preview modal.
+ * - modalTitle: the title of the modal
+ * - elements: the elements to preview
+ */
+export interface PreviewModalOptions {
+	modalTitle?: string,
+	elements?: MediaTypeModel[],
+	createNoteOptions?: CreateNoteOptions,
+}
+
 export const ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS: AdvancedSearchModalOptions = {
 	modalTitle: 'Media DB Advanced Search',
 	preselectedAPIs: [],
@@ -132,6 +163,12 @@ export const SELECT_MODAL_OPTIONS_DEFAULT: SelectModalOptions = {
 	skipButton: false,
 };
 
+export const PREVIEW_MODAL_DEFAULT_OPTIONS: PreviewModalOptions = {
+	modalTitle: 'Media DB Preview',
+	elements: [],
+	createNoteOptions: {attachTemplate: true},
+};
+
 /**
  * A class providing multiple usefull functions for dealing with the plugins modals.
  */
@@ -332,33 +369,42 @@ export class ModalHelper {
 		}
 	}
 
-	async createPreviewModal(mediaTypeModel: MediaTypeModel[]): Promise<{ result: boolean, previewModal: MediaDbPreviewModal }> {
+	async createPreviewModal(previewModalOptions: PreviewModalOptions): Promise<{ previewModalResult: PreviewModalResult, previewModal: MediaDbPreviewModal }> {
 		//todo: handle attachFile for existing files
-		const modal = new MediaDbPreviewModal(this.plugin, mediaTypeModel, { attachTemplate: true, attachFile: false });
+		const modal = new MediaDbPreviewModal(this.plugin, previewModalOptions);
-		const booleanResult: boolean = await new Promise((resolve, reject) => {
+		const res: PreviewModalResult = await new Promise((resolve, reject) => {
-			modal.setSubmitCallback(res => resolve(res));
+			modal.setSubmitCallback(res => resolve({code: ModalResultCode.SUCCESS, data: res}));
 			modal.setCloseCallback(err => {
 				if (err) {
-					reject(err);
+					resolve({code: ModalResultCode.ERROR, error: err});
 				}
-				resolve(undefined);
+				resolve({code: ModalResultCode.CLOSE});
 			});
 
 			modal.open();
 		});
-		return { result: booleanResult, previewModal: modal };
+		return {previewModalResult: res, previewModal: modal};
 	}
 
-	async openPreviewModal(mediaModels: MediaTypeModel[], submitCallback: (result: boolean) => Promise<boolean>): Promise<boolean> {
+	async openPreviewModal(previewModalOptions: PreviewModalOptions, submitCallback: (previewModalData: PreviewModalData) => Promise<boolean>): Promise<boolean> {
-		const { result, previewModal } = await this.createPreviewModal(mediaModels);
+		const {previewModalResult, previewModal} = await this.createPreviewModal(previewModalOptions);
-		if (!result) {
+
+		if (previewModalResult.code === ModalResultCode.ERROR) {
+			// there was an error in the modal itself
+			console.warn(previewModalResult.error);
+			new Notice(previewModalResult.error.toString());
 			previewModal.close();
-			return;
+			return undefined;
+		}
+
+		if (previewModalResult.code === ModalResultCode.CLOSE) {
+			// modal is already being closed
+			return undefined;
 		}
 
 		try {
 			let callbackRes: boolean;
-			callbackRes = await submitCallback(result);
+			callbackRes = await submitCallback(previewModalResult.data);
 			previewModal.close();
 			return callbackRes;
 		} catch (e) {

src/utils/Utils.ts

@@ -1,4 +1,5 @@
 import {MediaTypeModel} from '../models/MediaTypeModel';
+import {TFile} from 'obsidian';
 
 
 export const pluginName: string = 'obsidian-media-db-plugin';
@@ -159,12 +160,18 @@ export function dateTimeToString(dateTime: Date) {
 	return `${dateToString(dateTime)} ${timeToString(dateTime)}`;
 }
 
+/**
+ * @deprecated
+ */
 export class UserCancelError extends Error {
 	constructor(message: string) {
 		super(message);
 	}
 }
 
+/**
+ * @deprecated
+ */
 export class UserSkipError extends Error {
 	constructor(message: string) {
 		super(message);
@@ -194,3 +201,14 @@ export class PropertyMappingNameConflictError extends Error {
 		super(message);
 	}
 }
+
+/**
+ * - attachTemplate: whether to attach the template (DEFAULT: false)
+ * - attachFie: a file to attach (DEFAULT: undefined)
+ * - openNote: whether to open the note after creation (DEFAULT: false)
+ */
+export interface CreateNoteOptions {
+	attachTemplate?: boolean,
+	attachFile?: TFile,
+	openNote?: boolean,
+}

styles.css

@@ -52,6 +52,16 @@ small.media-db-plugin-list-text{
 	background: var(--background-secondary-alt);
 }
 
+.media-db-plugin-preview-modal {
+	display: flex;
+	flex-direction: column;
+}
+
+.media-db-plugin-preview-wrapper {
+	flex: 1;
+	overflow-y: auto;
+}
+
 .media-db-plugin-spacer {
 	margin-bottom: 10px;
 }