add preview and edit function

2026-07-29 16:35:57 +08:00 · 2024-01-03 00:37:34 +00:00
parent dd131f5df1
commit e6de2d036a
5 changed files with 233 additions and 71 deletions
--- a/src/ui/PreviewModal.ts
+++ 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()
+	}
+}