Update to the modals
This commit is contained in:
mProjectsCode
parent
da16b2af6a
commit
2f0c15c883
5 changed files with 175 additions and 105 deletions
134
src/main.ts
134
src/main.ts
|
|
@ -95,38 +95,72 @@ 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();
|
||||
|
||||
new Notice('MediaDB Searching...');
|
||||
|
||||
const apiSearchResults = await this.apiManager.query(query, apis);
|
||||
const selectResults = await this.openMediaDbSelectModal(apiSearchResults, false);
|
||||
results = await this.queryDetails(selectResults);
|
||||
apiSearchResults = await this.apiManager.query(advancedSearchOptions.query, advancedSearchOptions.apis);
|
||||
} 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);
|
||||
await this.createMediaDbNotes(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();
|
||||
|
||||
new Notice('MediaDB Searching...');
|
||||
|
||||
result = await this.apiManager.queryDetailedInfoById(query, api);
|
||||
result = await this.apiManager.queryDetailedInfoById(idSearchOptions.query, idSearchOptions.api);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
new Notice(e.toString());
|
||||
idSearchModal.close();
|
||||
return;
|
||||
}
|
||||
|
||||
idSearchModal.close();
|
||||
|
||||
debugLog(result);
|
||||
await this.createMediaDbNoteFromModel(result);
|
||||
if (result) {
|
||||
await this.createMediaDbNoteFromModel(result);
|
||||
}
|
||||
}
|
||||
|
||||
async createMediaDbNotes(models: MediaTypeModel[], attachFile?: TFile): Promise<void> {
|
||||
|
|
@ -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}\'`;
|
||||
searchResultModal.open();
|
||||
modal.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[] }> {
|
||||
return await new Promise((resolve, reject) => {
|
||||
new MediaDbAdvancedSearchModal(this.app, this, (res, err) => {
|
||||
async openMediaDbAdvancedSearchModal(): Promise<{ advancedSearchOptions: { query: string, apis: string[] }, advancedSearchModal: MediaDbAdvancedSearchModal }> {
|
||||
const modal = new MediaDbAdvancedSearchModal(this);
|
||||
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);
|
||||
}).open();
|
||||
resolve(undefined);
|
||||
});
|
||||
|
||||
modal.open();
|
||||
});
|
||||
return {advancedSearchOptions: res, advancedSearchModal: modal};
|
||||
}
|
||||
|
||||
async openMediaDbIdSearchModal(): Promise<{ query: string, api: string }> {
|
||||
return await new Promise((resolve, reject) => {
|
||||
new MediaDbIdSearchModal(this.app, this, (res, err) => {
|
||||
async openMediaDbIdSearchModal(): Promise<{ idSearchOptions: { query: string, api: string }, idSearchModal: MediaDbIdSearchModal }> {
|
||||
const modal = new MediaDbIdSearchModal(this);
|
||||
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);
|
||||
}).open();
|
||||
resolve(undefined);
|
||||
});
|
||||
|
||||
modal.open();
|
||||
});
|
||||
return {idSearchOptions: res, idSearchModal: modal};
|
||||
}
|
||||
|
||||
async openMediaDbSelectModal(resultsToDisplay: MediaTypeModel[], skipButton: boolean = false): Promise<MediaTypeModel[]> {
|
||||
return await new Promise((resolve, reject) => {
|
||||
new MediaDbSearchResultModal(this.app, this, resultsToDisplay, skipButton, (res, err) => {
|
||||
async openMediaDbSelectModal(resultsToDisplay: MediaTypeModel[], skipButton: boolean = false): Promise<{ selectRes: MediaTypeModel[], selectModal: MediaDbSearchResultModal }> {
|
||||
const modal = new MediaDbSearchResultModal(this, resultsToDisplay, skipButton);
|
||||
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([]);
|
||||
}).open();
|
||||
resolve(undefined);
|
||||
});
|
||||
|
||||
modal.open();
|
||||
});
|
||||
return {selectRes: res, selectModal: modal};
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue