jxpeng98/obsidian-to-NotionNext
1
0
Fork 0
mirror of https://github.com/jxpeng98/obsidian-to-NotionNext synced 2026-07-29 16:35:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

add preview and edit function

Browse Source
This commit is contained in:
Jiaxin Peng
2024-01-03 00:37:34 +00:00
parent dd131f5df1
commit e6de2d036a
5 changed files with 233 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/ui/PreviewModal.ts Normal file
View File

@@ -0,0 +1,125 @@
import {App, ExtraButtonComponent, Modal, Notice, Setting} from "obsidian";
import ObsidianSyncNotionPlugin from "../main";
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
export class PreviewModal extends Modal {
plugin: ObsidianSyncNotionPlugin;
settingTab: ObsidianSettingTab;
dbDetails: DatabaseDetails;
constructor(app:App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab, dbDetails: DatabaseDetails) {
super(app);
this.plugin = plugin;
this.settingTab = settingTab;
this.dbDetails = dbDetails;
}
display(): void {
this.containerEl.addClass('preview-modal')
this.titleEl.setText('Preview')
let { contentEl } = this;
const previewEl = contentEl.createDiv('preview-content')
const dbFormatEl = new Setting(previewEl)
dbFormatEl
.setName('Database Format')
.addText(text => text
.setValue(this.dbDetails.format)
.setDisabled(true));
const dbFullEl = new Setting(previewEl)
dbFullEl
.setName('Database Full Name')
.addText(text => text
.setValue(this.dbDetails.fullName)
.setDisabled(true));
const dbAbbrEl = new Setting(previewEl)
dbAbbrEl
.setName('Database Abbreviate Name')
.addText(text => text
.setValue(this.dbDetails.abName)
.setDisabled(true));
// .controlEl.createEl('p', { text: this.dbDetails.abName })
// Setting for toggle and copy buttons
new Setting(previewEl)
.setName('Notion API Key')
.addExtraButton((button: ExtraButtonComponent) => {
let isApiKeyVisible = false;
return button
.setTooltip('Toggle API Key Visibility')
.setIcon('eye')
.onClick(() => {
isApiKeyVisible = !isApiKeyVisible;
button.setIcon(isApiKeyVisible ? 'eye-off' : 'eye');
apiKeySetting.settingEl.style.display = isApiKeyVisible ? '' : 'none'; // Toggle visibility
});
})
// Setting for displaying the API key
const apiKeySetting = new Setting(previewEl)
apiKeySetting.infoEl.createEl('p', { text: this.dbDetails.notionAPI })
apiKeySetting
.addExtraButton((button: ExtraButtonComponent) => {
return button
.setTooltip('Copy API Key')
.setIcon('clipboard')
.onClick(() => {
navigator.clipboard.writeText(this.dbDetails.notionAPI)
new Notice('API Key copied to clipboard');
});
});
apiKeySetting.settingEl.style.display = 'none'; // Hide initially
new Setting(previewEl)
.setName('Database ID')
.addExtraButton((button: ExtraButtonComponent) => {
let isDbIdVisible = false;
return button
.setTooltip('Toggle Database ID Visibility')
.setIcon('eye')
.onClick(() => {
isDbIdVisible = !isDbIdVisible;
button.setIcon(isDbIdVisible ? 'eye-off' : 'eye');
dbIdSetting.settingEl.style.display = isDbIdVisible ? '' : 'none'; // Toggle visibility
});
})
const dbIdSetting = new Setting(previewEl)
dbIdSetting.infoEl.createEl('p', { text: this.dbDetails.databaseID })
dbIdSetting
.addExtraButton((button: ExtraButtonComponent) => {
return button
.setTooltip('Copy Database ID')
.setIcon('clipboard')
.onClick(() => {
navigator.clipboard.writeText(this.dbDetails.databaseID)
new Notice('Database ID copied to clipboard');
});
});
dbIdSetting.settingEl.style.display = 'none'; // Hide initially
}
onOpen() {
this.display()
}
}

64
src/ui/settingModal.ts
View File

@@ -42,6 +42,7 @@ export class SettingModal extends Modal {
this.data.customTitleButton = dbDetails.customTitleButton;
this.data.customTitleName = dbDetails.customTitleName;
// this.data.customValues = dbDetails.customValues;
this.data.saved = dbDetails.saved;
}
}
@@ -58,28 +59,53 @@ export class SettingModal extends Modal {
const nextTabs = contentEl.createDiv('next-tabs');
new Setting(settingDiv)
.setName(i18nConfig.databaseFormat)
.setDesc(i18nConfig.databaseFormatDesc)
.addDropdown((component) => {
component
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.setValue(this.data.databaseFormat)
.onChange(async (value) => {
this.data.databaseFormat = value;
nextTabs.empty();
this.updateContentBasedOnSelection(value, nextTabs);
});
// Initialize content based on the current dropdown value
this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
});
if (this.data.saved) {
new Setting(settingDiv)
.setName(i18nConfig.databaseFormat)
.setDesc(i18nConfig.databaseFormatDesc)
.addDropdown((component) => {
component
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.setValue(this.data.databaseFormat)
.onChange(async (value) => {
this.data.databaseFormat = value;
nextTabs.empty();
this.updateContentBasedOnSelection(value, nextTabs);
});
// Initialize content based on the current dropdown value
this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs);
});
} else {
new Setting(settingDiv)
.setName(i18nConfig.databaseFormat)
.setDesc(i18nConfig.databaseFormatDesc)
.addDropdown((component) => {
component
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.setValue(this.data.databaseFormat)
.onChange(async (value) => {
this.data.databaseFormat = value;
nextTabs.empty();
this.updateContentBasedOnSelection(value, nextTabs);
});
// Initialize content based on the current dropdown value
this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
});
}
// add save button
let footerEl = contentEl.createDiv('save-button');
let saveButton = new Setting(footerEl)
saveButton.addButton((button: ButtonComponent) => {

95
src/ui/settingTabs.ts
View File

@@ -5,6 +5,7 @@ import {SettingModal} from "./settingModal";
import {SettingNextTabs} from "./settingNextTabs";
import {SettingGeneralTabs} from "./settingGeneralTabs";
import {set} from "yaml/dist/schema/yaml-1.1/set";
import {PreviewModal} from "./PreviewModal";
export interface PluginSettings {
NextButton: boolean;
@@ -37,6 +38,7 @@ export interface DatabaseDetails {
customTitleButton: boolean;
customTitleName: string;
// customValues: string;
saved: boolean;
}
export const DEFAULT_SETTINGS: PluginSettings = {
@@ -82,7 +84,6 @@ export class ObsidianSettingTab extends PluginSettingTab {
this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser, 'notionUser')
// add new button
new Setting(containerEl)
@@ -107,6 +108,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
customTitleButton: modal.data.customTitleButton,
customTitleName: modal.data.customTitleName,
// customValues: modal.data.customValues,
saved: modal.data.saved,
}
this.plugin.addDatabaseDetails(dbDetails);
@@ -237,49 +239,52 @@ export class ObsidianSettingTab extends PluginSettingTab {
// add a button for preview data
// settingEl
// .addButton((button: ButtonComponent): ButtonComponent => {
// return button
// .setTooltip("Preview Database")
// .setIcon("eye")
// .onClick(async () => {
// this.plugin.previewDatabase(dbDetails);
// });
// });
settingEl
.addButton((button: ButtonComponent): ButtonComponent => {
return button
.setTooltip("Preview Database")
.setIcon("eye")
.onClick(async () => {
let modal = new PreviewModal(this.app, this.plugin, this, dbDetails);
// settingEl
// .addButton((button: ButtonComponent): ButtonComponent => {
// return button
// .setTooltip("Edit Database")
// .setIcon("pencil")
// .onClick(async () => {
// let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
//
// modal.onClose = () => {
// if (modal.data.saved) {
// const dbDetails = {
// format: modal.data.databaseFormat,
// fullName: modal.data.databaseFullName,
// abName: modal.data.databaseAbbreviateName,
// notionAPI: modal.data.notionAPI,
// databaseID: modal.data.databaseID,
// tagButton: modal.data.tagButton,
// customTitleButton: modal.data.customTitleButton,
// customTitleName: modal.data.customTitleName,
// // customValues: modal.data.customValues,
// }
//
// this.plugin.updateDatabaseDetails(dbDetails);
//
// this.plugin.commands.updateCommand();
//
// this.display()
// }
// }
//
// modal.open();
// });
// });
modal.open();
});
});
settingEl
.addButton((button: ButtonComponent): ButtonComponent => {
return button
.setTooltip("Edit Database")
.setIcon("pencil")
.onClick(async () => {
let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
modal.onClose = () => {
if (modal.data.saved) {
const dbDetails = {
format: modal.data.databaseFormat,
fullName: modal.data.databaseFullName,
abName: modal.data.databaseAbbreviateName,
notionAPI: modal.data.notionAPI,
databaseID: modal.data.databaseID,
tagButton: modal.data.tagButton,
customTitleButton: modal.data.customTitleButton,
customTitleName: modal.data.customTitleName,
// customValues: modal.data.customValues,
saved: modal.data.saved,
}
this.plugin.updateDatabaseDetails(dbDetails);
this.plugin.commands.updateCommand();
this.display()
}
}
modal.open();
});
});
settingEl
.addButton((button: ButtonComponent): ButtonComponent => {
@@ -297,7 +302,5 @@ export class ObsidianSettingTab extends PluginSettingTab {
}
}
}
function addExtraButton(arg0: (button: ButtonComponent) => ButtonComponent): any {
throw new Error("Function not implemented.");
}