Skip to content

Allow batch / folder import by id as well as title #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 3, 2025
Merged

Allow batch / folder import by id as well as title #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a10f9ec
Allow batch / folder import by id as well as title
Spydarlee Aug 30, 2025
4798f11
Refactor bulk folder import logic to better switch between title and …
Spydarlee Sep 3, 2025
29269aa
Further refactoring of the bulk / folder import logic
Spydarlee Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 67 additions & 42 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import type { SearchModalOptions } from './utils/ModalHelper';
import { ModalHelper, ModalResultCode } from './utils/ModalHelper';
import type { CreateNoteOptions } from './utils/Utils';
import { dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString, unCamelCase, hasTemplaterPlugin, useTemplaterPluginInFile } from './utils/Utils';
import { BulkImportLookupMethod } from 'src/utils/BulkImportLookupMethod';

export type Metadata = Record<string, unknown>;

Expand Down Expand Up @@ -621,9 +622,14 @@ export default class MediaDbPlugin extends Plugin {
const erroredFiles: { filePath: string; error: string }[] = [];
let canceled: boolean = false;

const { selectedAPI, titleFieldName, appendContent } = await new Promise<{ selectedAPI: string; titleFieldName: string; appendContent: boolean }>(resolve => {
new MediaDbFolderImportModal(this.app, this, (selectedAPI: string, titleFieldName: string, appendContent: boolean) => {
resolve({ selectedAPI, titleFieldName, appendContent });
const { selectedAPI, lookupMethod, fieldName, appendContent } = await new Promise<{
selectedAPI: string;
lookupMethod: string;
fieldName: string;
appendContent: boolean;
}>(resolve => {
new MediaDbFolderImportModal(this.app, this, (selectedAPI: string, lookupMethod: string, fieldName: string, appendContent: boolean) => {
resolve({ selectedAPI, lookupMethod, fieldName, appendContent });
}).open();
});

Expand All @@ -636,55 +642,74 @@ export default class MediaDbPlugin extends Plugin {
}

const metadata = this.getMetadataFromFileCache(file);
const lookupValue = metadata[fieldName];

const title = metadata[titleFieldName];
if (!title || typeof title !== 'string') {
erroredFiles.push({ filePath: file.path, error: `metadata field '${titleFieldName}' not found, empty, or not a string` });
if (!lookupValue || typeof lookupValue !== 'string') {
erroredFiles.push({ filePath: file.path, error: `metadata field '${fieldName}' not found, empty, or not a string` });
continue;
}
} else if (lookupMethod === BulkImportLookupMethod.ID) {
try {
const model = await this.apiManager.queryDetailedInfoById(lookupValue, selectedAPI);
if (model) {
await this.createMediaDbNotes([model], appendContent ? file : undefined);
} else {
erroredFiles.push({ filePath: file.path, error: `Failed to query API with id: ${lookupValue}` });
}
} catch (e) {
erroredFiles.push({ filePath: file.path, error: `${e}` });
continue;
}
} else if (lookupMethod === BulkImportLookupMethod.TITLE) {
let results: MediaTypeModel[] = [];
try {
results = await this.apiManager.query(lookupValue, [selectedAPI]);
} catch (e) {
erroredFiles.push({ filePath: file.path, error: `${e}` });
continue;
}
if (!results || results.length === 0) {
erroredFiles.push({ filePath: file.path, error: `no search results` });
continue;
}

let results: MediaTypeModel[] = [];
try {
results = await this.apiManager.query(title, [selectedAPI]);
} catch (e) {
erroredFiles.push({ filePath: file.path, error: `${e}` });
continue;
}
if (!results || results.length === 0) {
erroredFiles.push({ filePath: file.path, error: `no search results` });
continue;
}
const { selectModalResult, selectModal } = await this.modalHelper.createSelectModal({
elements: results,
skipButton: true,
modalTitle: `Results for '${lookupValue}'`,
});

const { selectModalResult, selectModal } = await this.modalHelper.createSelectModal({ elements: results, skipButton: true, modalTitle: `Results for '${title}'` });
if (selectModalResult.code === ModalResultCode.ERROR) {
erroredFiles.push({ filePath: file.path, error: selectModalResult.error.message });
selectModal.close();
continue;
}

if (selectModalResult.code === ModalResultCode.ERROR) {
erroredFiles.push({ filePath: file.path, error: selectModalResult.error.message });
selectModal.close();
continue;
}
if (selectModalResult.code === ModalResultCode.CLOSE) {
erroredFiles.push({ filePath: file.path, error: 'user canceled' });
selectModal.close();
canceled = true;
continue;
}

if (selectModalResult.code === ModalResultCode.CLOSE) {
erroredFiles.push({ filePath: file.path, error: 'user canceled' });
selectModal.close();
canceled = true;
continue;
}
if (selectModalResult.code === ModalResultCode.SKIP) {
erroredFiles.push({ filePath: file.path, error: 'user skipped' });
selectModal.close();
continue;
}

if (selectModalResult.code === ModalResultCode.SKIP) {
erroredFiles.push({ filePath: file.path, error: 'user skipped' });
selectModal.close();
continue;
}
if (selectModalResult.data.selected.length === 0) {
erroredFiles.push({ filePath: file.path, error: `no search results selected` });
continue;
}

const detailedResults = await this.queryDetails(selectModalResult.data.selected);
await this.createMediaDbNotes(detailedResults, appendContent ? file : undefined);

if (selectModalResult.data.selected.length === 0) {
erroredFiles.push({ filePath: file.path, error: `no search results selected` });
selectModal.close();
} else {
erroredFiles.push({ filePath: file.path, error: `invalid lookup type` });
continue;
}

const detailedResults = await this.queryDetails(selectModalResult.data.selected);
await this.createMediaDbNotes(detailedResults, appendContent ? file : undefined);

selectModal.close();
}
}

Expand Down
88 changes: 61 additions & 27 deletions src/modals/MediaDbFolderImportModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
import type { App, ButtonComponent } from 'obsidian';
import { DropdownComponent, Modal, Setting, TextComponent, ToggleComponent } from 'obsidian';
import type MediaDbPlugin from '../main';
import type { APIModel } from 'src/api/APIModel';
import { BulkImportLookupMethod } from 'src/utils/BulkImportLookupMethod';

export class MediaDbFolderImportModal extends Modal {
plugin: MediaDbPlugin;
onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void;
onSubmit: (selectedAPI: string, lookupMethod: string, fieldName: string, appendContent: boolean) => void;
selectedApi: string;
searchBtn?: ButtonComponent;
titleFieldName: string;
lookupMethod: string;
fieldName: string;
appendContent: boolean;

constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void) {
constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, lookupMethod: string, fieldName: string, appendContent: boolean) => void) {
super(app);
this.plugin = plugin;
this.onSubmit = onSubmit;
this.selectedApi = plugin.apiManager.apis[0].apiName;
this.titleFieldName = '';
this.lookupMethod = BulkImportLookupMethod.TITLE;
this.fieldName = '';
this.appendContent = false;
}

submit(): void {
this.onSubmit(this.selectedApi, this.titleFieldName, this.appendContent);
this.onSubmit(this.selectedApi, this.lookupMethod, this.fieldName, this.appendContent);
this.close();
}

Expand All @@ -29,21 +33,19 @@ export class MediaDbFolderImportModal extends Modal {

contentEl.createEl('h2', { text: 'Import folder as Media DB entries' });

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);
this.createDropdownEl(
contentEl,
'API to search',
(value: string) => {
this.selectedApi = value;
},
this.plugin.apiManager.apis.map((api: APIModel) => {
return { value: api.apiName, display: api.apiName };
}),
);

contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'Append note content to Media DB entry.' });
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' });
Expand All @@ -60,19 +62,38 @@ export class MediaDbFolderImportModal extends Modal {
appendContentToggleComponentWrapper.appendChild(appendContentToggle.toggleEl);

contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'The name of the metadata 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 => {
contentEl.createEl('h3', { text: 'Media lookup method' });
contentEl.createEl('p', {
text: 'Choose whether to search the API by title (can return multiple results) or lookup directly using an ID (returns at most one result), and specify the name of the frontmatter property which contains the title or ID of the media.',
});

this.createDropdownEl(
contentEl,
'Lookup media by',
(value: string) => {
this.lookupMethod = value;
},
[
{ value: BulkImportLookupMethod.TITLE, display: 'Title' },
{ value: BulkImportLookupMethod.ID, display: 'ID' },
],
);

contentEl.createDiv({ cls: 'media-db-plugin-spacer' });

const fieldNameWrapperEl = contentEl.createEl('div', { cls: 'media-db-plugin-list-wrapper' });
const fieldNameLabelWrapperEl = fieldNameWrapperEl.createEl('div', { cls: 'media-db-plugin-list-text-wrapper' });
fieldNameLabelWrapperEl.createEl('span', { text: 'Using the property named', cls: 'media-db-plugin-list-text' });

const fieldNameComponent = new TextComponent(fieldNameWrapperEl);
fieldNameComponent.setPlaceholder('title / id');
fieldNameComponent.onChange(value => (this.fieldName = value));
fieldNameComponent.inputEl.addEventListener('keydown', ke => {
if (ke.key === 'Enter') {
this.submit();
}
});
contentEl.appendChild(titleFieldNameComponent.inputEl);
contentEl.appendChild(fieldNameWrapperEl);

contentEl.createDiv({ cls: 'media-db-plugin-spacer' });

Expand All @@ -93,6 +114,19 @@ export class MediaDbFolderImportModal extends Modal {
});
}

createDropdownEl(parentEl: HTMLElement, label: string, onChange: (value: string) => void, options: { value: string; display: string }[]): void {
const wrapperEl = parentEl.createEl('div', { cls: 'media-db-plugin-list-wrapper' });
const labelWrapperEl = wrapperEl.createEl('div', { cls: 'media-db-plugin-list-text-wrapper' });
labelWrapperEl.createEl('span', { text: label, cls: 'media-db-plugin-list-text' });

const dropDownComponent = new DropdownComponent(wrapperEl);
dropDownComponent.onChange(onChange);
for (const option of options) {
dropDownComponent.addOption(option.value, option.display);
}
wrapperEl.appendChild(dropDownComponent.selectEl);
Copy link
Owner

@mProjectsCode mProjectsCode Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this and some of the appendChild in the existing code are necessary, but I am not 100% sure on that.

Copy link
Contributor Author

@Spydarlee Spydarlee Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I double checked the final HTML and I think with the current setup they are required because the wrappers are styled to use flex to get the labels on the left and inputs on the right.

<div class="media-db-plugin-list-wrapper">
	<div class="media-db-plugin-list-text-wrapper">
		<span class="media-db-plugin-list-text">Lookup media by</span>
	</div>
	<select class="dropdown"
		<option value="title">Title</option>
		<option value="id">ID</option>
	</select>
</div>
.media-db-plugin-list-wrapper {
	display: flex;
	align-content: center;
	margin-bottom: 5px;
	margin-top: 5px;
}
.media-db-plugin-list-text-wrapper {
	flex: 1;
}

Copy link
Owner

@mProjectsCode mProjectsCode Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok.

}

onClose(): void {
const { contentEl } = this;
contentEl.empty();
Expand Down
4 changes: 4 additions & 0 deletions src/utils/BulkImportLookupMethod.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export enum BulkImportLookupMethod {
ID = 'id',
TITLE = 'title',
}