126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
import {App, ButtonComponent, Component, Modal, Notice, Setting, TextComponent, ToggleComponent} from 'obsidian';
|
|
import {MediaTypeModel} from '../models/MediaTypeModel';
|
|
import {APIManager} from '../api/APIManager';
|
|
|
|
export class MediaDbAdvancedSearchModal extends Modal {
|
|
query: string;
|
|
isBusy: boolean;
|
|
apiManager: APIManager;
|
|
searchBtn: ButtonComponent;
|
|
selectedApis: any;
|
|
onSubmit: (err: Error, result?: MediaTypeModel[]) => void;
|
|
|
|
constructor(app: App, apiManager: APIManager, onSubmit?: (err: Error, result?: MediaTypeModel[]) => void) {
|
|
super(app);
|
|
this.apiManager = apiManager;
|
|
this.onSubmit = onSubmit;
|
|
this.selectedApis = [];
|
|
for (const api of this.apiManager.apis) {
|
|
this.selectedApis[api.apiName] = false;
|
|
}
|
|
}
|
|
|
|
submitCallback(event: KeyboardEvent) {
|
|
if (event.key === 'Enter') {
|
|
this.search();
|
|
}
|
|
}
|
|
|
|
async search(): Promise<MediaTypeModel[]> {
|
|
|
|
console.log(this.selectedApis);
|
|
|
|
if (!this.query || this.query.length < 5) {
|
|
new Notice("MDB: Query to short");
|
|
return;
|
|
}
|
|
|
|
let selectedAPICount = 0;
|
|
for (const api in this.selectedApis) {
|
|
if (this.selectedApis[api]) {
|
|
selectedAPICount += 1;
|
|
}
|
|
}
|
|
|
|
if (selectedAPICount === 0) {
|
|
new Notice("MDB: No API selected");
|
|
return;
|
|
}
|
|
|
|
if (!this.isBusy) {
|
|
try {
|
|
this.isBusy = true;
|
|
this.searchBtn.setDisabled(false);
|
|
this.searchBtn.setButtonText('Searching...');
|
|
|
|
console.log('MDB | query started with ' + this.query);
|
|
|
|
const res = await this.apiManager.query(this.query, this.selectedApis);
|
|
|
|
// console.log(res)
|
|
|
|
this.onSubmit(null, res);
|
|
} catch (e) {
|
|
this.onSubmit(e);
|
|
} finally {
|
|
this.close();
|
|
}
|
|
}
|
|
}
|
|
|
|
onOpen() {
|
|
const {contentEl} = this;
|
|
|
|
contentEl.createEl('h2', {text: 'Search media db'});
|
|
|
|
const placeholder = 'Search by title';
|
|
const searchComponent = new TextComponent(contentEl);
|
|
searchComponent.inputEl.style.width = '100%';
|
|
searchComponent.setPlaceholder(placeholder);
|
|
searchComponent.onChange(value => (this.query = value));
|
|
searchComponent.inputEl.addEventListener('keydown', this.submitCallback.bind(this));
|
|
|
|
contentEl.appendChild(searchComponent.inputEl);
|
|
searchComponent.inputEl.focus();
|
|
|
|
contentEl.createEl('h3', {text: 'APIs to search'});
|
|
|
|
const apiToggleComponents: Component[] = [];
|
|
for (const api of this.apiManager.apis) {
|
|
const apiToggleListElementWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
|
|
|
|
const apiToggleTextWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
|
|
apiToggleTextWrapper.createEl('span', {text: api.apiName, cls: 'media-db-plugin-list-text'});
|
|
apiToggleTextWrapper.createEl('small', {text: api.apiDescription, cls: 'media-db-plugin-list-text'});
|
|
|
|
const apiToggleComponentWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
|
|
|
|
const apiToggleComponent = new ToggleComponent(apiToggleComponentWrapper);
|
|
apiToggleComponent.setTooltip(api.apiName);
|
|
apiToggleComponent.setValue(this.selectedApis[api.apiName]);
|
|
apiToggleComponent.onChange((value) => {
|
|
this.selectedApis[api.apiName] = value;
|
|
});
|
|
apiToggleComponentWrapper.appendChild(apiToggleComponent.toggleEl);
|
|
}
|
|
|
|
|
|
new Setting(contentEl)
|
|
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
|
|
.addButton(btn => {
|
|
return (this.searchBtn = btn
|
|
.setButtonText('Ok')
|
|
.setCta()
|
|
.onClick(() => {
|
|
this.search();
|
|
}));
|
|
});
|
|
}
|
|
|
|
onClose() {
|
|
const {contentEl} = this;
|
|
contentEl.empty();
|
|
}
|
|
|
|
|
|
}
|