Merge branch 'O_O' into O_O

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';
@@ -57,7 +57,7 @@ export default class MediaDbPlugin extends Plugin {
 				menu.addItem(item => {
 					item.setTitle('Import folder as Media DB entries')
 						.setIcon('database')
-						.onClick(() => this.createEntriesFromFolder(file as TFolder));
+						.onClick(() => this.createEntriesFromFolder(file));
 				});
 			}
 		}));
@@ -164,27 +164,44 @@ export default class MediaDbPlugin extends Plugin {
 		});
 
 		if (!apiSearchResults) {
+			// TODO: add new notice saying no results found?
 			return;
 		}
 
-		const selectResults: MediaTypeModel[] = await this.modalHelper.openSelectModal({elements: apiSearchResults}, async (selectModalData) => {
+		let selectResults: MediaTypeModel[];
-			return await this.queryDetails(selectModalData.selected);
+		let proceed: boolean;
-		});
 
-		if (!selectResults) {
+		while (!proceed) {
-			return;
+			selectResults = await this.modalHelper.openSelectModal({elements: apiSearchResults}, async (selectModalData) => {
+				return await this.queryDetails(selectModalData.selected);
+			});
+			if (!selectResults) {
+				return;
+			}
+
+			proceed = await this.modalHelper.openPreviewModal({elements: selectResults}, async (previewModalData) => {
+				return previewModalData.confirmed;
+			});
 		}
 
 		await this.createMediaDbNotes(selectResults);
 	}
 
-	async createEntryWithIdSearchModal() {
+	async createEntryWithIdSearchModal(): Promise<void> {
-		const idSearchResult: MediaTypeModel = await this.modalHelper.openIdSearchModal({}, async (idSearchModalData) => {
+		let idSearchResult: MediaTypeModel;
-			return await this.apiManager.queryDetailedInfoById(idSearchModalData.query, idSearchModalData.api);
+		let proceed: boolean;
-		});
 
-		if (!idSearchResult) {
+		while (!proceed) {
-			return;
+			idSearchResult = await this.modalHelper.openIdSearchModal({}, async (idSearchModalData) => {
+				return await this.apiManager.queryDetailedInfoById(idSearchModalData.query, idSearchModalData.api);
+			});
+			if (!idSearchResult) {
+				return;
+			}
+
+			proceed = await this.modalHelper.openPreviewModal({elements: [idSearchResult]}, async (previewModalData) => {
+				return previewModalData.confirmed;
+			});
 		}
 
 		await this.createMediaDbNoteFromModel(idSearchResult, {attachTemplate: true, openNote: true});
@@ -209,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) {
@@ -222,15 +239,13 @@ export default class MediaDbPlugin extends Plugin {
 		}
 	}
 
-	private 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/MediaDbAdvancedSearchModal.ts

@@ -47,7 +47,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
 
 	async search(): Promise<MediaTypeModel[]> {
 		if (!this.query || this.query.length < 3) {
-			new Notice('MDB | Query to short');
+			new Notice('MDB | Query too short');
 			return;
 		}
 

src/modals/MediaDbPreviewModal.ts

@@ -0,0 +1,82 @@
+import {ButtonComponent, MarkdownRenderer, Modal, Setting} from 'obsidian';
+import MediaDbPlugin from 'src/main';
+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 {
+	plugin: MediaDbPlugin;
+
+	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.title = previewModalOptions.modalTitle;
+		this.elements = previewModalOptions.elements;
+		this.createNoteOptions = previewModalOptions.createNoteOptions;
+	}
+
+	setSubmitCallback(submitCallback: (previewModalData: PreviewModalData) => void): void {
+		this.submitCallback = submitCallback;
+	}
+
+	setCloseCallback(closeCallback: (err?: Error) => void): void {
+		this.closeCallback = closeCallback;
+	}
+
+	async preview(): Promise<void> {
+		let {contentEl} = this;
+		contentEl.addClass('media-db-plugin-preview-modal');
+
+		contentEl.createEl('h2', {text: this.title});
+
+		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'});
+
+		const bottomSettingRow = new Setting(contentEl);
+		bottomSettingRow.addButton(btn => {
+			btn.setButtonText('Cancel');
+			btn.onClick(() => this.closeCallback());
+			btn.buttonEl.addClass('media-db-plugin-button');
+			this.cancelButton = btn;
+		});
+		bottomSettingRow.addButton(btn => {
+			btn.setButtonText('Ok');
+			btn.setCta();
+			btn.onClick(() => this.submitCallback({confirmed: true}));
+			btn.buttonEl.addClass('media-db-plugin-button');
+			this.submitButton = btn;
+		});
+	}
+
+	onOpen(): void {
+		this.preview();
+	}
+	
+	onClose(): void {
+		this.closeCallback();
+	}
+}

src/modals/SelectModal.ts

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

src/settings/PropertyMappingModelComponent.svelte

@@ -46,16 +46,16 @@
 						<div class="media-db-plugin-property-mapping-to">
 							<input type="text" spellcheck="false" bind:value="{property.newProperty}">
 						</div>
-					{ /if   }
+					{ /if    }
-				{ /if   }
+				{ /if    }
 			</div>
-		{ /each   }
+		{ /each    }
 	</div>
 	{ #if !validationResult?.res }
 		<div class="media-db-plugin-property-mapping-validation">
 			{validationResult?.err?.message}
 		</div>
-	{ /if   }
+	{ /if    }
 	<button
 		class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
 		on:click={() => { if(model.validate().res) save(model) }}>Save

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>
@@ -16,7 +13,7 @@
 <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">
 	{ #each models as model }
 		<PropertyMappingModelComponent model={model} save={save}></PropertyMappingModelComponent>
-	{ /each   }
+	{ /each    }
 
 	<!--
 		<pre>{JSON.stringify(models, null, 4)}</pre>

src/utils/ModalHelper.ts

@@ -4,6 +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 {CreateNoteOptions} from './Utils';
 
 
 export enum ModalResultCode {
@@ -46,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,
@@ -58,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,
@@ -68,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,
@@ -88,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,
@@ -100,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,
@@ -112,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: [],
@@ -131,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.
  */
@@ -330,5 +368,51 @@ export class ModalHelper {
 			return;
 		}
 	}
+
+	async createPreviewModal(previewModalOptions: PreviewModalOptions): Promise<{ previewModalResult: PreviewModalResult, previewModal: MediaDbPreviewModal }> {
+		//todo: handle attachFile for existing files
+		const modal = new MediaDbPreviewModal(this.plugin, previewModalOptions);
+		const res: PreviewModalResult = await new Promise((resolve, reject) => {
+			modal.setSubmitCallback(res => resolve({code: ModalResultCode.SUCCESS, data: res}));
+			modal.setCloseCallback(err => {
+				if (err) {
+					resolve({code: ModalResultCode.ERROR, error: err});
+				}
+				resolve({code: ModalResultCode.CLOSE});
+			});
+
+			modal.open();
+		});
+		return {previewModalResult: res, previewModal: modal};
+	}
+
+	async openPreviewModal(previewModalOptions: PreviewModalOptions, submitCallback: (previewModalData: PreviewModalData) => Promise<boolean>): Promise<boolean> {
+		const {previewModalResult, previewModal} = await this.createPreviewModal(previewModalOptions);
+
+		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 undefined;
+		}
+
+		if (previewModalResult.code === ModalResultCode.CLOSE) {
+			// modal is already being closed
+			return undefined;
+		}
+
+		try {
+			let callbackRes: boolean;
+			callbackRes = await submitCallback(previewModalResult.data);
+			previewModal.close();
+			return callbackRes;
+		} catch (e) {
+			console.warn(e);
+			new Notice(e.toString());
+			previewModal.close();
+			return;
+		}
+	}
 }
 

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

@@ -53,6 +53,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;
 }