afiqzudinhadi/obsidian-media-db-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update to the modals

Browse source
This commit is contained in:
mProjectsCode 2022-09-22 16:41:03 +02:00
parent da16b2af6a
commit 2f0c15c883
5 changed files with 175 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/modals/MediaDbAdvancedSearchModal.ts
View file

@ -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) {
super(app);
constructor(plugin: MediaDbPlugin) {
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.isBusy = true;
this.searchBtn.setDisabled(false);
this.searchBtn.setButtonText('Searching...');
this.onSubmit({query: this.query, apis: apis});
} catch (e) {
this.onSubmit(null, e);
} finally {
this.close();
}
this.submitCallback({query: this.query, apis: apis});
}
}
@ -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();
}
}

38
src/modals/MediaDbIdSearchModal.ts
View file

@ -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) {
super(app);
constructor(plugin: MediaDbPlugin) {
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.isBusy = true;
this.searchBtn.setDisabled(false);
this.searchBtn.setButtonText('Searching...');
this.onSubmit({query: this.query, api: this.selectedApi});
} catch (e) {
this.onSubmit(null, e);
} finally {
this.close();
}
this.submitCallback({query: this.query, api: this.selectedApi});
}
}
@ -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();
}
}

48
src/modals/MediaDbSearchResultModal.ts
View file

@ -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;
onCancel: () => void;
onSkip: () => void;
busy: boolean;
submitCallback: (res: MediaTypeModel[]) => 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) {
super(app, elements);
constructor(plugin: MediaDbPlugin, elements: MediaTypeModel[], skipButton: boolean) {
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));
this.sendCallback = true;
this.close();
if (!this.busy) {
this.busy = true;
this.submitButton.setButtonText('Creating entry...');
this.submitCallback(this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
}
}
skip() {
this.onSkip();
this.sendCallback = true;
this.close();
this.skipButton.setButtonText('Skipping...');
this.skipCallback();
}
onClose() {
if (!this.sendCallback) {
this.onCancel();
}
this.closeCallback();
}
}

22
src/modals/SelectModal.ts
View file

@ -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);
bottomSetting.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()));
if (this.skipButton) {
bottomSetting.addButton(btn => btn.setButtonText('Skip').onClick(() => this.skip()));
const bottomSettingRow = new Setting(contentEl);
bottomSettingRow.addButton(btn => this.cancelButton = btn.setButtonText('Cancel').onClick(() => this.close()));
if (this.addSkipButton) {
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() {