add preview and edit function

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. 支持预览数据库详情
+- [x] Support preview for database details in plugin settings. 支持预览数据库详情
-- [ ] Support edit 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: 

src/main.ts

@@ -81,10 +81,7 @@ export default class ObsidianSyncNotionPlugin extends Plugin {
 
 		await this.saveSettings();
 	}
-
+	
-	// previewDatabase(dbDetails: DatabaseDetails) {
-	//
-	// }
 }
 
 

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()
+	}
+}

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
+		if (this.data.saved) {
-				this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
+			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) => {

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
+				settingEl
-				// .addButton((button: ButtonComponent): ButtonComponent => {
+				.addButton((button: ButtonComponent): ButtonComponent => {
-				// 	return button
+					return button
-				// 		.setTooltip("Preview Database")
+						.setTooltip("Preview Database")
-				// 		.setIcon("eye")
+						.setIcon("eye")
-				// 		.onClick(async () => {
+						.onClick(async () => {
-				// 			this.plugin.previewDatabase(dbDetails);
+							let modal = new PreviewModal(this.app, this.plugin, this, dbDetails);
-				// 		});
-				// });
 
-				// settingEl
+							modal.open();
-				// .addButton((button: ButtonComponent): ButtonComponent => {
+						});
-				// 	return button
+				});
-				// 		.setTooltip("Edit Database")
+
-				// 		.setIcon("pencil")
+				settingEl
-				// 		.onClick(async () => {
+				.addButton((button: ButtonComponent): ButtonComponent => {
-				// 			let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
+					return button
-				//
+						.setTooltip("Edit Database")
-				// 			modal.onClose = () => {
+						.setIcon("pencil")
-				// 				if (modal.data.saved) {
+						.onClick(async () => {
-				// 					const dbDetails = {
+							let modal = new SettingModal(this.app, this.plugin, this, dbDetails);
-				// 						format: modal.data.databaseFormat,
+
-				// 						fullName: modal.data.databaseFullName,
+							modal.onClose = () => {
-				// 						abName: modal.data.databaseAbbreviateName,
+								if (modal.data.saved) {
-				// 						notionAPI: modal.data.notionAPI,
+									const dbDetails = {
-				// 						databaseID: modal.data.databaseID,
+										format: modal.data.databaseFormat,
-				// 						tagButton: modal.data.tagButton,
+										fullName: modal.data.databaseFullName,
-				// 						customTitleButton: modal.data.customTitleButton,
+										abName: modal.data.databaseAbbreviateName,
-				// 						customTitleName: modal.data.customTitleName,
+										notionAPI: modal.data.notionAPI,
-				// 						// customValues: modal.data.customValues,
+										databaseID: modal.data.databaseID,
-				// 					}
+										tagButton: modal.data.tagButton,
-				//
+										customTitleButton: modal.data.customTitleButton,
-				// 					this.plugin.updateDatabaseDetails(dbDetails);
+										customTitleName: modal.data.customTitleName,
-				//
+										// customValues: modal.data.customValues,
-				// 					this.plugin.commands.updateCommand();
+										saved: modal.data.saved,
-				//
+									}
-				// 					this.display()
+
-				// 				}
+									this.plugin.updateDatabaseDetails(dbDetails);
-				// 			}
+
-				//
+									this.plugin.commands.updateCommand();
-				// 			modal.open();
+
-				// 		});
+									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.");
-}