Bulk import #26

src/modals/MediaDbFolderImportModal.ts

@@ -0,0 +1,59 @@
+import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent} from 'obsidian';
+import MediaDbPlugin from '../main';
+
+export class MediaDbFolderImportModal extends Modal {
+	plugin: MediaDbPlugin;
+	onSubmit: (selectedAPI: string, titleFieldName: string) => void;
+	selectedApi: string;
+	searchBtn: ButtonComponent;
+	titleFieldName: string;
+
+	constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string) => void) {
+		super(app);
+		this.plugin = plugin;
+		this.onSubmit = onSubmit;
+		this.selectedApi = plugin.apiManager.apis[0].apiName;
+	}
+
+	submit() {
+		this.onSubmit(this.selectedApi, this.titleFieldName);
+		this.close();
+	}
+
+	onOpen() {
+		const {contentEl} = this;
+
+		contentEl.createEl('h2', {text: 'Create Media DB entries from folder'});
+
+		const apiSelectorWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
+		const apiSelectorTextWrapper = apiSelectorWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
+		apiSelectorTextWrapper.createEl('span', {text: 'API to search', cls: 'media-db-plugin-list-text'});
+
+		const apiSelectorComponent = new DropdownComponent(apiSelectorWrapper);
+		apiSelectorComponent.onChange((value: string) => {
+			this.selectedApi = value;
+		});
+		for (const api of this.plugin.apiManager.apis) {
+			apiSelectorComponent.addOption(api.apiName, api.apiName);
+		}
+		apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
+
+
+		const placeholder = 'Title metadata field name';
+		const titleFieldNameComponent = new TextComponent(contentEl);
+		titleFieldNameComponent.inputEl.style.width = '100%';
+		titleFieldNameComponent.setPlaceholder(placeholder);
+		titleFieldNameComponent.onChange(value => this.titleFieldName = value);
+
+		contentEl.appendChild(titleFieldNameComponent.inputEl);
+
+		new Setting(contentEl)
+			.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
+			.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
+	}
+
+	onClose() {
+		const {contentEl} = this;
+		contentEl.empty();
+	}
+}

src/modals/MediaDbSearchResultModal.ts

@@ -1,35 +1,32 @@
-import {App, SuggestModal} from 'obsidian';
+import {App} from 'obsidian';
 import {MediaTypeModel} from '../models/MediaTypeModel';
 import MediaDbPlugin from '../main';
+import {SelectModal} from './SelectModal';
 
-export class MediaDbSearchResultModal extends SuggestModal<MediaTypeModel> {
-	suggestion: MediaTypeModel[];
+export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
 	plugin: MediaDbPlugin;
-	onChoose: (error: Error, result?: MediaTypeModel) => void;
+	heading: string;
+	onChoose: (error: Error, result: MediaTypeModel[]) => void;
 
-	constructor(app: App, plugin: MediaDbPlugin, suggestion: MediaTypeModel[], onChoose: (error: Error, result?: MediaTypeModel) => void) {
-		super(app);
+	constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], onChoose: (error: Error, result: MediaTypeModel[]) => void) {
+		super(app, elements);
 		this.plugin = plugin;
-		this.suggestion = suggestion;
 		this.onChoose = onChoose;
-	}
 
-	getSuggestions(query: string): MediaTypeModel[] {
-		return this.suggestion.filter(item => {
-			const searchQuery = query.toLowerCase();
-			return item.title.toLowerCase().includes(searchQuery);
-		});
+		this.title = 'Search Results';
+		this.description = 'Select one or multiple search results.';
 	}
 
 	// Renders each suggestion item.
-	renderSuggestion(item: MediaTypeModel, el: HTMLElement) {
+	renderElement(item: MediaTypeModel, el: HTMLElement) {
 		el.createEl('div', {text: this.plugin.mediaTypeManager.getFileName(item)});
 		el.createEl('small', {text: `${item.englishTitle}\n`});
 		el.createEl('small', {text: `${item.type.toUpperCase() + (item.subType ? ` (${item.subType})` : '')} from ${item.dataSource}`});
 	}
 
 	// Perform action on the selected suggestion.
-	onChooseSuggestion(item: MediaTypeModel, evt: MouseEvent | KeyboardEvent) {
-		this.onChoose(null, item);
+	submit() {
+		this.onChoose(null, this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
+		this.close();
 	}
 }

src/modals/SelectModal.ts

@@ -0,0 +1,72 @@
+import {App, Modal, Setting} from 'obsidian';
+import {SelectModalElement} from './SelectModalElement';
+
+export abstract class SelectModal<T> extends Modal {
+	multiSelect: boolean;
+	allowMultiSelect: boolean;
+
+	title: string;
+	description: string;
+
+	elements: T[];
+	selectModalElements: SelectModalElement<T>[];
+
+
+	constructor(app: App, elements: T[]) {
+		super(app);
+		this.elements = elements;
+		this.allowMultiSelect = true;
+
+		this.selectModalElements = [];
+	}
+
+	abstract renderElement(value: T, el: HTMLElement): any;
+
+	abstract submit(): void;
+
+	disableAllOtherElements(elementId: number) {
+		for (const selectModalElement of this.selectModalElements) {
+			if (selectModalElement.id !== elementId) {
+				selectModalElement.setActive(false);
+			}
+		}
+	}
+
+	async onOpen() {
+		const {contentEl} = this;
+
+		contentEl.createEl('h2', {text: this.title});
+		contentEl.createEl('p', {text: this.description});
+
+		if (this.allowMultiSelect) {
+			new Setting(contentEl)
+				.setName('Select Multiple')
+				.addToggle(cb => {
+					cb.setValue(this.multiSelect);
+					cb.onChange(value => {
+						this.multiSelect = value;
+						for (const selectModalElement of this.selectModalElements) {
+							selectModalElement.setActive(false);
+						}
+					});
+				});
+		}
+
+		const elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'});
+
+		let i = 0;
+		for (const element of this.elements) {
+			const selectModalElement = new SelectModalElement(element, contentEl, i, this, false);
+
+			this.selectModalElements.push(selectModalElement);
+
+			this.renderElement(element, selectModalElement.element);
+
+			i += 1;
+		}
+
+		new Setting(contentEl)
+			.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
+			.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
+	}
+}

src/modals/SelectModalElement.ts

@@ -0,0 +1,72 @@
+import {SelectModal} from './SelectModal';
+
+export class SelectModalElement<T> {
+	selectModal: SelectModal<T>;
+	value: T;
+	readonly id: number;
+	element: HTMLDivElement;
+	cssClass: string;
+	activeClass: string;
+	hoverClass: string;
+	private active: boolean;
+
+	constructor(value: T, parentElement: HTMLElement, id: number, selectModal: SelectModal<T>, active: boolean = false) {
+		this.value = value;
+		this.id = id;
+		this.active = active;
+		this.selectModal = selectModal;
+
+		this.cssClass = 'media-db-plugin-select-element';
+		this.activeClass = 'media-db-plugin-select-element-selected';
+		this.hoverClass = 'media-db-plugin-select-element-hover';
+
+		this.element = parentElement.createDiv({cls: this.cssClass});
+		this.element.id = this.getHTMLId();
+		this.element.on('click', '#' + this.getHTMLId(), () => {
+			this.setActive(!this.active);
+			if (!this.selectModal.allowMultiSelect || !this.selectModal.multiSelect) {
+				this.selectModal.disableAllOtherElements(this.id);
+			}
+		});
+		this.element.on('mouseenter', '#' + this.getHTMLId(), () => {
+			this.addClass(this.hoverClass);
+		});
+		this.element.on('mouseleave', '#' + this.getHTMLId(), () => {
+			this.removeClass(this.hoverClass);
+		});
+	}
+
+	isActive(): boolean {
+		return this.active;
+	}
+
+	getHTMLId(): string {
+		return `media-db-plugin-select-element-${this.id}`;
+	}
+
+	setActive(active: boolean): void {
+		this.active = active;
+		this.update();
+	}
+
+	update(): void {
+		if (this.active) {
+			this.addClass(this.activeClass);
+		} else {
+			this.removeClass(this.activeClass);
+		}
+	}
+
+	addClass(cssClass: string): void {
+		if (!this.element.hasClass(cssClass)) {
+			this.element.addClass(cssClass);
+		}
+	}
+
+	removeClass(cssClass: string): void {
+		if (this.element.hasClass(cssClass)) {
+			this.element.removeClass(cssClass);
+		}
+	}
+
+}