From e6de2d036af5c8af1771bc02206440bca5cab1b1 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Wed, 3 Jan 2024 00:37:34 +0000 Subject: [PATCH] add preview and edit function --- README.md | 15 ++++- src/main.ts | 5 +- src/ui/PreviewModal.ts | 125 +++++++++++++++++++++++++++++++++++++++++ src/ui/settingModal.ts | 64 ++++++++++++++------- src/ui/settingTabs.ts | 95 ++++++++++++++++--------------- 5 files changed, 233 insertions(+), 71 deletions(-) create mode 100644 src/ui/PreviewModal.ts diff --git a/README.md b/README.md index 8a7567b..29ab3cd 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,21 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia ## TODO List - [ ] Support custom properties for Notion General database. 支持自定义属性 -- [ ] Support preview for database details in plugin settings. 支持预览数据库详情 -- [ ] Support edit for database details in plugin settings. 支持编辑数据库详情 +- [x] Support preview for database details in plugin settings. 支持预览数据库详情 +- [x] Support edit for database details in plugin settings. 支持编辑数据库详情 ## Update + +### 2.0.1 + +- Add the preview and edit function for database details in the plugin settings. 增加插件设置中数据库详情的预览和编辑功能。 +![](https://minioapi.pjx.ac.cn/img1/2024/01/952f1e579daeac35b257ff7d744b0a3d.png) + - Preview: + ![](https://minioapi.pjx.ac.cn/img1/2024/01/952f1e579daeac35b257ff7d744b0a3d.png) + + - Edit: + ![](https://minioapi.pjx.ac.cn/img1/2024/01/ded3d62660f5488c76488304a3fb269e.png) + ### 2.0.0 (Big Update) - redesign the plugin settings UI. From this version, the settings UI will be separated into two parts: diff --git a/src/main.ts b/src/main.ts index 585041e..099a7f4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -81,10 +81,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin { await this.saveSettings(); } - - // previewDatabase(dbDetails: DatabaseDetails) { - // - // } + } diff --git a/src/ui/PreviewModal.ts b/src/ui/PreviewModal.ts new file mode 100644 index 0000000..ae428a5 --- /dev/null +++ b/src/ui/PreviewModal.ts @@ -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() + } +} diff --git a/src/ui/settingModal.ts b/src/ui/settingModal.ts index 8448bf4..15801f4 100644 --- a/src/ui/settingModal.ts +++ b/src/ui/settingModal.ts @@ -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) => { diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index cc692bc..7535faa 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -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."); -} +