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

cancel and skip buttons #26

Browse source
This commit is contained in:
mProjectsCode 2022-06-11 15:12:24 +02:00
parent 038d473a4f
commit aa7659ee1f
9 changed files with 144 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/main.ts
View file

@ -2,7 +2,7 @@ import {Notice, Plugin, TFile, TFolder} from 'obsidian';
import {DEFAULT_SETTINGS, MediaDbPluginSettings, MediaDbSettingTab} from './settings/Settings';
import {APIManager} from './api/APIManager';
import {MediaTypeModel} from './models/MediaTypeModel';
import {dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString} from './utils/Utils';
import {dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString, UserCancelError, UserSkipError} from './utils/Utils';
import {OMDbAPI} from './api/apis/OMDbAPI';
import {MediaDbAdvancedSearchModal} from './modals/MediaDbAdvancedSearchModal';
import {MediaDbSearchResultModal} from './modals/MediaDbSearchResultModal';
@ -177,10 +177,11 @@ export default class MediaDbPlugin extends Plugin {
async createEntriesFromFolder(folder: TFolder) {
const erroredFiles: { filePath: string, error: string }[] = [];
let canceled: boolean = false;
const {selectedAPI, titleFieldName} = await new Promise((resolve, reject) => {
new MediaDbFolderImportModal(this.app, this, ((selectedAPI, titleFieldName) => {
resolve({selectedAPI, titleFieldName});
const {selectedAPI, titleFieldName, appendContent} = await new Promise((resolve, reject) => {
new MediaDbFolderImportModal(this.app, this, ((selectedAPI, titleFieldName, appendContent) => {
resolve({selectedAPI, titleFieldName, appendContent});
})).open();
});
@ -193,6 +194,11 @@ export default class MediaDbPlugin extends Plugin {
for (const child of folder.children) {
if (child instanceof TFile) {
const file = child as TFile;
if (canceled) {
erroredFiles.push({filePath: file.path, error: 'user canceled'});
continue;
}
let metadata: any = this.app.metadataCache.getFileCache(file).frontmatter;
let title = metadata[titleFieldName];
@ -213,22 +219,40 @@ export default class MediaDbPlugin extends Plugin {
continue;
}
let selectedResults: MediaTypeModel[] = await new Promise((resolve, reject) => {
const searchResultModal = new MediaDbSearchResultModal(this.app, this, results, (err, res) => {
if (err) {
return reject(err);
}
resolve(res);
}, () => {
resolve([]);
});
let selectedResults: MediaTypeModel[] = [];
try {
selectedResults = await new Promise((resolve, reject) => {
const searchResultModal = new MediaDbSearchResultModal(this.app, this, results, true, (err, res) => {
if (err) {
return reject(err);
}
resolve(res);
}, () => {
reject(new UserCancelError('user canceled'));
}, () => {
reject(new UserSkipError('user skipped'));
});
searchResultModal.title = `Results for \'${title}\'`;
searchResultModal.open();
});
searchResultModal.title = `Results for \'${title}\'`;
searchResultModal.open();
});
} catch (e) {
if (e instanceof UserCancelError) {
erroredFiles.push({filePath: file.path, error: e.message});
canceled = true;
continue;
} else if (e instanceof UserSkipError) {
erroredFiles.push({filePath: file.path, error: e.message});
continue;
} else {
erroredFiles.push({filePath: file.path, error: e.message});
continue;
}
}
if (selectedResults.length === 0) {
erroredFiles.push({filePath: file.path, error: `no search results selected`});
continue;
}
await this.createMediaDbNote(async () => selectedResults);
@ -253,7 +277,7 @@ export default class MediaDbPlugin extends Plugin {
if (err) {
return reject(err);
}
new MediaDbSearchResultModal(this.app, this, results, (err2, res) => {
new MediaDbSearchResultModal(this.app, this, results, false, (err2, res) => {
if (err2) {
return reject(err2);
}

2
src/modals/MediaDbAdvancedSearchModal.ts
View file

@ -81,6 +81,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'APIs to search'});
const apiToggleComponents: Component[] = [];
@ -102,6 +103,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
apiToggleComponentWrapper.appendChild(apiToggleComponent.toggleEl);
}
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))

40
src/modals/MediaDbFolderImportModal.ts
View file

@ -1,14 +1,15 @@
import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent} from 'obsidian';
import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent, ToggleComponent} from 'obsidian';
import MediaDbPlugin from '../main';
export class MediaDbFolderImportModal extends Modal {
plugin: MediaDbPlugin;
onSubmit: (selectedAPI: string, titleFieldName: string) => void;
onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void;
selectedApi: string;
searchBtn: ButtonComponent;
titleFieldName: string;
appendContent: boolean;
constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string) => void) {
constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void) {
super(app);
this.plugin = plugin;
this.onSubmit = onSubmit;
@ -16,7 +17,7 @@ export class MediaDbFolderImportModal extends Modal {
}
submit() {
this.onSubmit(this.selectedApi, this.titleFieldName);
this.onSubmit(this.selectedApi, this.titleFieldName, this.appendContent);
this.close();
}
@ -39,14 +40,41 @@ export class MediaDbFolderImportModal extends Modal {
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
const placeholder = 'Title metadata field name';
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'Append note content to Media DB entry.'});
const appendContentToggleElementWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
const appendContentToggleTextWrapper = appendContentToggleElementWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
appendContentToggleTextWrapper.createEl('span', {
text: 'If this is enabled, the plugin will override meta data fields with the same name.',
cls: 'media-db-plugin-list-text',
});
const appendContentToggleComponentWrapper = appendContentToggleElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
const appendContentToggle = new ToggleComponent(appendContentToggleElementWrapper);
appendContentToggle.setValue(false);
appendContentToggle.onChange(value => this.appendContent = value);
appendContentToggleComponentWrapper.appendChild(appendContentToggle.toggleEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'The name of the mata data field that should be used as the title to query'});
const placeholder = 'title';
const titleFieldNameComponent = new TextComponent(contentEl);
titleFieldNameComponent.inputEl.style.width = '100%';
titleFieldNameComponent.setPlaceholder(placeholder);
titleFieldNameComponent.onChange(value => this.titleFieldName = value);
titleFieldNameComponent.inputEl.addEventListener('keydown', (ke) => {
if (ke.key === 'Enter') {
this.submit();
}
});
contentEl.appendChild(titleFieldNameComponent.inputEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));

4
src/modals/MediaDbIdSearchModal.ts
View file

@ -75,6 +75,8 @@ export class MediaDbIdSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
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'});
@ -88,6 +90,8 @@ export class MediaDbIdSearchModal extends Modal {
}
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
.addButton(btn => {

28
src/modals/MediaDbSearchResultModal.ts
View file

@ -6,17 +6,24 @@ import {SelectModal} from './SelectModal';
export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
plugin: MediaDbPlugin;
heading: string;
onChoose: (error: Error, result: MediaTypeModel[]) => void;
onSubmit: (error: Error, result: MediaTypeModel[]) => void;
onCancel: () => void;
onSkip: () => void;
constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], onChoose: (error: Error, result: MediaTypeModel[]) => void, onCancel: () => void) {
sendCallback: boolean;
constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], skipButton: boolean, onSubmit: (error: Error, result: MediaTypeModel[]) => void, onCancel: () => void, onSkip?: () => void) {
super(app, elements);
this.plugin = plugin;
this.onChoose = onChoose;
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.sendCallback = false;
}
// Renders each suggestion item.
@ -27,12 +34,21 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
}
// Perform action on the selected suggestion.
onSubmit() {
this.onChoose(null, this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
submit() {
this.onSubmit(null, this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
this.sendCallback = true;
this.close();
}
skip() {
this.onSkip();
this.sendCallback = true;
this.close();
}
onClose() {
this.onCancel();
if (!this.sendCallback) {
this.onCancel();
}
}
}

45
src/modals/SelectModal.ts
View file

@ -2,27 +2,33 @@ 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;
skipButton: boolean;
elements: T[];
selectModalElements: SelectModalElement<T>[];
constructor(app: App, elements: T[]) {
protected constructor(app: App, elements: T[]) {
super(app);
this.elements = elements;
this.allowMultiSelect = true;
this.title = '';
this.description = '';
this.skipButton = false;
this.elements = elements;
this.selectModalElements = [];
}
abstract renderElement(value: T, el: HTMLElement): any;
abstract onSubmit(): void;
abstract submit(): void;
abstract skip(): void;
disableAllOtherElements(elementId: number) {
for (const selectModalElement of this.selectModalElements) {
@ -35,23 +41,17 @@ export abstract class SelectModal<T> extends Modal {
async onOpen() {
const {contentEl} = this;
/*
contentEl.id = 'media-db-plugin-modal'
contentEl.on('keydown', '#' + contentEl.id, (ev, delegateTarget) => {
console.log(ev.key);
});
*/
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;
@ -65,8 +65,11 @@ export abstract class SelectModal<T> extends Modal {
i += 1;
}
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.onSubmit()));
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()));
}
bottomSetting.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
}
}

2
src/modals/SelectModalElement.ts
View file

@ -24,7 +24,7 @@ export class SelectModalElement<T> {
this.element.id = this.getHTMLId();
this.element.on('click', '#' + this.getHTMLId(), () => {
this.setActive(!this.active);
if (!this.selectModal.allowMultiSelect || !this.selectModal.multiSelect) {
if (!this.selectModal.allowMultiSelect) {
this.selectModal.disableAllOtherElements(this.id);
}
});

12
src/utils/Utils.ts
View file

@ -152,3 +152,15 @@ export function dateTimeToString(dateTime: Date) {
return `${dateToString(dateTime)} ${timeToString(dateTime)}`;
}
export class UserCancelError extends Error {
constructor(message: string) {
super(message);
}
}
export class UserSkipError extends Error {
constructor(message: string) {
super(message);
}
}

4
styles.css
View file

@ -44,3 +44,7 @@ small.media-db-plugin-list-text{
.media-db-plugin-select-element-hover {
background: var(--background-secondary-alt);
}
.media-db-plugin-spacer {
margin-bottom: 10px;
}