From 856f83e8a1b8d23b7f7af633d993df05e5d69675 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Tue, 9 Jan 2024 11:33:39 +0000 Subject: [PATCH] Add confirmation delete button and modify edit modal interface. --- .github/workflows/release.yml | 8 + CHANGELOG.md | 18 ++ README.md | 10 +- src/ui/{addButton.ts => CustomModal.ts} | 0 src/ui/DeleteModal.ts | 64 ++++++ src/ui/EditModal.ts | 294 ++++++++++++++++++++++++ src/ui/settingModal.ts | 49 ++-- src/ui/settingTabs.ts | 60 +++-- 8 files changed, 461 insertions(+), 42 deletions(-) create mode 100644 CHANGELOG.md rename src/ui/{addButton.ts => CustomModal.ts} (100%) create mode 100644 src/ui/DeleteModal.ts create mode 100644 src/ui/EditModal.ts diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 656d561..ff28334 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,6 +20,14 @@ jobs: with: node-version: "18" + - name: Generate changelog + id: changelog + uses: release-changelog/action@v1.0.0 + with: + repo-token: ${{ secrets.REPO_ACCESS_TOKEN }} + version: ${{ github.ref }} + file: CHANGELOG.md + - name: Build id: build run: | diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..2e4a662 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,18 @@ +# Changelog v2.1.0 + +## Feature + +- add confirmation interface for deleting a database +- 增加删除数据库的确认界面 + +## Fix + +- fix the typo in the edit database modal +- improve the logic for the database editing +- 修复编辑数据库界面的标题错误 +- 改进数据库编辑界面的逻辑 + +## TODO + +- [ ] add the support for the customised properties of general databases +- [ ] 增加对普通数据库自定义属性的支持 diff --git a/README.md b/README.md index 29ab3cd..6d51dc4 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,11 @@ [![Test](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/test.yml/badge.svg)](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/test.yml) [![Release](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/release.yml/badge.svg)](https://github.com/jxpeng98/obsidian-to-NotionNext/actions/workflows/release.yml) -[![Github all releases](https://img.shields.io/github/downloads/jxpeng98/obsidian-to-NotionNext/total.svg)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/) +[![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22share-to-notionnext%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/) [![GitHub release (with filter)](https://img.shields.io/github/v/release/jxpeng98/obsidian-to-NotionNext)](https://github.com/jxpeng98/obsidian-to-NotionNext/releases/) +[//]: # ([![Github all releases](https://img.shields.io/github/downloads/jxpeng98/obsidian-to-NotionNext/total.svg)](https://GitHub.com/jxpeng98/obsidian-to-NotionNext/releases/)) + [中文文档](README-zh.md) Thanks to the [original author](https://github.com/EasyChris/obsidian-to-notion) for developing such a useful plugin that can synchronize Obsidian to Notion. However, the original repository can only sync Name and Tag information. For those like me who use [NotionNext](https://github.com/tangly1024/NotionNext) to set up their website, this presents some limitations. Every time I import, I need to make a lot of modifications. @@ -23,6 +25,12 @@ Thus, based on the [original author's work](https://github.com/EasyChris/obsidia ## Update +### 2.1.0 + +- add confirmation interface for deleting a database 增加删除数据库的确认界面 +- fix the typo in the edit database modal 修复编辑数据库界面的标题错误 +- improve the logic for the database editing 改进数据库编辑界面的逻辑 + ### 2.0.1 - Add the preview and edit function for database details in the plugin settings. 增加插件设置中数据库详情的预览和编辑功能。 diff --git a/src/ui/addButton.ts b/src/ui/CustomModal.ts similarity index 100% rename from src/ui/addButton.ts rename to src/ui/CustomModal.ts diff --git a/src/ui/DeleteModal.ts b/src/ui/DeleteModal.ts new file mode 100644 index 0000000..8f03d24 --- /dev/null +++ b/src/ui/DeleteModal.ts @@ -0,0 +1,64 @@ +import {App, ButtonComponent, Modal, Setting} from "obsidian"; +import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; +import ObsidianSyncNotionPlugin from "../main"; + +export class DeleteModal extends Modal { + data: Record = { + deleted: false, + } + 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() { + this.containerEl.addClass("delete-modal"); + this.titleEl.setText('Delete Database'); + + let {contentEl} = this; + contentEl.empty(); + + const deleteDiv = contentEl.createDiv('delete-div'); + deleteDiv.createEl('h4', {text: 'Are you sure you want to delete the following database?'}); + deleteDiv.createEl('h2', {text: this.dbDetails.fullName + ' (' + this.dbDetails.abName + ', ' + this.dbDetails.format +')'}); + + + // add delete button + let footerEl = contentEl.createDiv('save-button'); + let deleteButton = new Setting(footerEl) + + deleteButton + .addButton((button: ButtonComponent): ButtonComponent => { + return button + .setTooltip("Delete") + .setIcon("trash") + .onClick(async () => { + this.data.deleted = true; + this.close(); + }) + }); + + deleteButton.addExtraButton((button) => { + return button + .setTooltip('Cancel') + .setIcon('cross') + .onClick(() => { + this.data.deleted = false; + this.close(); + }); + }); + + } + + + onOpen() { + this.display(); + } + +} diff --git a/src/ui/EditModal.ts b/src/ui/EditModal.ts new file mode 100644 index 0000000..35c3f1f --- /dev/null +++ b/src/ui/EditModal.ts @@ -0,0 +1,294 @@ +import {App, ButtonComponent, Modal, Setting} from "obsidian"; +import {SettingModal} from "./settingModal"; +import ObsidianSyncNotionPlugin from "../main"; +import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; +import {i18nConfig} from "../lang/I18n"; + +export class EditModal extends SettingModal { + dataTemp: Record = { + databaseFormatTemp: '', + // databaseFormatTempInd: false, + databaseFullNameTemp: '', + // databaseFullNameTempInd: false, + databaseAbbreviateNameTemp: '', + // databaseAbbreviateNameTempInd: false, + notionAPITemp: '', + // notionAPITempInd: false, + databaseIDTemp: '', + // databaseIDTempInd: false, + tagButtonTemp: false, + // tagButtonTempInd: false, + customTitleButtonTemp: false, + // customTitleButtonTempInd: false, + customTitleNameTemp: '', + // customTitleNameTempInd: false, + // customValues: '', + savedTemp: false, + savedTempInd: false, + }; + dataPrev: Record = { + databaseFormatPrev: '', + // databaseFormatPrevInd: false, + databaseFullNamePrev: '', + // databaseFullNamePrevInd: false, + databaseAbbreviateNamePrev: '', + // databaseAbbreviateNamePrevInd: false, + notionAPIPrev: '', + // notionAPIPrevInd: false, + databaseIDPrev: '', + // databaseIDPrevInd: false, + tagButtonPrev: false, + // tagButtonPrevInd: false, + customTitleButtonPrev: false, + // customTitleButtonPrevInd: false, + customTitleNamePrev: '', + // customTitleNamePrevInd: false, + // customValues: '', + savedPrev: false, + savedPrevInd: false, + }; + + + plugin: ObsidianSyncNotionPlugin; + settingTab: ObsidianSettingTab; + dbDetails: DatabaseDetails; + + constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab, dbDetails: DatabaseDetails) { + super(app, plugin, settingTab); + this.plugin = plugin; + this.settingTab = settingTab; + if (dbDetails) { + // Temp details + this.dataTemp.databaseFormatTemp = dbDetails.format; + this.dataTemp.databaseFullNameTemp = dbDetails.fullName; + this.dataTemp.databaseAbbreviateNameTemp = dbDetails.abName; + this.dataTemp.notionAPITemp = dbDetails.notionAPI; + this.dataTemp.databaseIDTemp = dbDetails.databaseID; + this.dataTemp.tagButtonTemp = dbDetails.tagButton; + this.dataTemp.customTitleButtonTemp = dbDetails.customTitleButton; + this.dataTemp.customTitleNameTemp = dbDetails.customTitleName; + // this.dataTemp.customValues = dbDetails.customValues; + this.dataTemp.savedTemp = dbDetails.saved; + + // Prev details + this.dataPrev.databaseFormatPrev = dbDetails.format; + this.dataPrev.databaseFullNamePrev = dbDetails.fullName; + this.dataPrev.databaseAbbreviateNamePrev = dbDetails.abName; + this.dataPrev.notionAPIPrev = dbDetails.notionAPI; + this.dataPrev.databaseIDPrev = dbDetails.databaseID; + this.dataPrev.tagButtonPrev = dbDetails.tagButton; + this.dataPrev.customTitleButtonPrev = dbDetails.customTitleButton; + this.dataPrev.customTitleNamePrev = dbDetails.customTitleName; + // this.dataTemp.customValues = dbDetails.customValues; + this.dataPrev.savedPrev = dbDetails.saved; + } + } + + + display(): void { + this.containerEl.addClass("edit-modal"); + this.titleEl.setText('Edit Database'); + + let {contentEl} = this; + contentEl.empty(); + + const editDiv = contentEl.createDiv('edit-div'); + const nextTabs = contentEl.createDiv('next-tabs'); + + new Setting(editDiv) + .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.dataTemp.databaseFormatTemp) + .onChange(async (value) => { + this.dataTemp.databaseFormatTemp = value; + nextTabs.empty(); + this.updateContentBasedOnSelection(value, nextTabs); + }); + + // Initialize content based on the current dropdown value + this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs); + }); + + + // add save button + let footerEl = contentEl.createDiv('save-button'); + let saveButton = new Setting(footerEl) + saveButton.addButton((button: ButtonComponent) => { + return button + .setTooltip('Save') + .setIcon('checkmark') + .onClick(async () => { + this.dataTemp.savedTempInd = true; + this.dataTemp.savedTemp = true; + this.close(); + }); + } + ); + saveButton.addExtraButton((button) => { + return button + .setTooltip('Cancel') + .setIcon('cross') + .onClick(() => { + this.dataTemp.savedTempInd = false; + this.close(); + }); + } + ); + + } + + onOpen(): void { + this.display() + } + + + updateContentBasedOnSelection(value: string, nextTabs: HTMLElement): void { + // Clear existing content + nextTabs.empty(); + + // Generate content based on the selected value + if (value === 'general') { + nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader }); + + // add full name + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp') + + // add abbreviate name + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp') + + // tag button + this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp') + + // add custom title button + + new Setting(nextTabs) + .setName(i18nConfig.NotionCustomTitle) + .setDesc(i18nConfig.NotionCustomTitleDesc) + .addToggle((toggle) => + toggle + .setValue(this.dataTemp.CustomTitleButtonTemp) + .onChange(async (value) => { + this.dataTemp.CustomTitleButtonTemp = value; + + this.updateSettingEl(CustomNameEl, value) + + // this.updateSettingEl(CustomValuesEl, value) + + // await this.plugin.saveSettings(); + // await this.plugin.commands.updateCommand(); + }) + ); + + + // add custom title name + const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.CustomTitleButtonTemp), nextTabs); + this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp,'dataTemp', 'CustomTitleNameTemp') + + + // add api key + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp') + + // add database id + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp') + + + } else if (value === 'next') { + + nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader }); + + // add full name + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp','databaseFullNameTemp') + + // add abbreviate name + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp') + + // add api key + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp') + + + // add database id + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp') + + } else if (value === 'custom') { + nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader}); + + // add full name + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp') + + // add abbreviate name + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp') + + // tag button + this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp') + + // add custom title button + + new Setting(nextTabs) + .setName(i18nConfig.NotionCustomTitle) + .setDesc(i18nConfig.NotionCustomTitleDesc) + .addToggle((toggle) => + toggle + .setValue(this.dataTemp.CustomTitleButtonTemp) + .onChange(async (value) => { + this.dataTemp.CustomTitleButtonTemp = value; + + this.updateSettingEl(CustomNameEl, value) + + // this.updateSettingEl(CustomValuesEl, value) + + // await this.plugin.saveSettings(); + // await this.plugin.commands.updateCommand(); + }) + ); + + + // add custom title name + const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.CustomTitleButtonTemp), nextTabs); + this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp,'dataTemp', 'CustomTitleNameTemp') + + // // add custom values + // const CustomValuesEl = this.createStyleDiv('custom-values', (this.dataTemp.CustomTitleButton), nextTabs); + // new Setting(CustomValuesEl) + // .setName(i18nConfig.NotionCustomValues) + // .setDesc(i18nConfig.NotionCustomValuesDesc) + // .addTextArea((text) => { + // return text + // .setPlaceholder(i18nConfig.NotionCustomValuesText) + // .setValue(this.dataTemp.CustomValues) + // .onChange(async (value) => { + // this.dataTemp.CustomValues = value; + // await this.plugin.saveSettings(); + // }); + // }); + + + // add api key + const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs); + this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp') + + // add database id + const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs); + this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp') + } + + } + + + createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement { + return super.createStyleDiv(className, commandValue, parentEl); + } + + updateSettingEl(element: HTMLElement, commandValue: boolean) { + super.updateSettingEl(element, commandValue); + } + + createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, dataRecord: string, settingsKey: string): Setting { + return super.createSettingEl(contentEl, name, desc, type, placeholder, holderValue, dataRecord, settingsKey); + } +} diff --git a/src/ui/settingModal.ts b/src/ui/settingModal.ts index 15801f4..b61952f 100644 --- a/src/ui/settingModal.ts +++ b/src/ui/settingModal.ts @@ -13,6 +13,7 @@ import {SettingGeneralTabs} from "./settingGeneralTabs"; export class SettingModal extends Modal { + [key: string]: any; // Index signature data: Record = { databaseFormat: 'none', databaseFullName: '', @@ -139,13 +140,13 @@ export class SettingModal extends Modal { nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader }); // add full name - this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName') + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','databaseFullName') // add abbreviate name - this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName') + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName') // tag button - this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'tagButton') + this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'data','tagButton') // add custom title button @@ -162,22 +163,22 @@ export class SettingModal extends Modal { // this.updateSettingEl(CustomValuesEl, value) - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); + // await this.plugin.saveSettings(); + // await this.plugin.commands.updateCommand(); }) ); // add custom title name const CustomNameEl = this.createStyleDiv('custom-name', (this.data.CustomTitleButton), nextTabs); - this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'CustomTitleName') + this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'data','CustomTitleName') // add api key - this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI') + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data','notionAPI') // add database id - this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID') + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID') } else if (value === 'next') { @@ -185,29 +186,29 @@ export class SettingModal extends Modal { nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader }); // add full name - this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName') + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName,'data','databaseFullName') // add abbreviate name - this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName') + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName') // add api key - this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI') + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data','notionAPI') // add database id - this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID') + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID') } else if (value === 'custom') { nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader}); // add full name - this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'databaseFullName') + this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','databaseFullName') // add abbreviate name - this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'databaseAbbreviateName') + this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data','databaseAbbreviateName') // tag button - this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'tagButton') + this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton,'data', 'tagButton') // add custom title button @@ -224,15 +225,15 @@ export class SettingModal extends Modal { // this.updateSettingEl(CustomValuesEl, value) - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); + // await this.plugin.saveSettings(); + // await this.plugin.commands.updateCommand(); }) ); // add custom title name const CustomNameEl = this.createStyleDiv('custom-name', (this.data.CustomTitleButton), nextTabs); - this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'CustomTitleName') + this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName,'data', 'CustomTitleName') // // add custom values // const CustomValuesEl = this.createStyleDiv('custom-values', (this.data.CustomTitleButton), nextTabs); @@ -252,11 +253,11 @@ export class SettingModal extends Modal { // add api key const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs); - this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'notionAPI') + this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI,'data', 'notionAPI') // add database id const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs); - this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'databaseID') + this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID') } } @@ -285,7 +286,7 @@ export class SettingModal extends Modal { } // function to add one setting element in the setting tab. - public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any,settingsKey: string) { + public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, dataRecord: string, settingsKey: string) { if (type === 'password') { return new Setting(contentEl) .setName(name) @@ -296,7 +297,7 @@ export class SettingModal extends Modal { .setPlaceholder(placeholder) .setValue(holderValue) .onChange(async (value) => { - this.data[settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); + this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); }) }); } else if (type === 'toggle') { @@ -307,7 +308,7 @@ export class SettingModal extends Modal { toggle .setValue(holderValue) .onChange(async (value) => { - this.data[settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); + this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); }) ); } else if (type === 'text') { @@ -319,7 +320,7 @@ export class SettingModal extends Modal { .setPlaceholder(placeholder) .setValue(holderValue) .onChange(async (value) => { - this.data[settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); + this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings(); }) ); } diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index 7535faa..92bcacc 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -1,4 +1,4 @@ -import {App, ButtonComponent, PluginSettingTab, Setting} from "obsidian"; +import {App, ButtonComponent, Modal, PluginSettingTab, Setting} from "obsidian"; import {i18nConfig} from "../lang/I18n"; import ObsidianSyncNotionPlugin from "../main"; import {SettingModal} from "./settingModal"; @@ -6,6 +6,8 @@ import {SettingNextTabs} from "./settingNextTabs"; import {SettingGeneralTabs} from "./settingGeneralTabs"; import {set} from "yaml/dist/schema/yaml-1.1/set"; import {PreviewModal} from "./PreviewModal"; +import {EditModal} from "./EditModal"; +import {DeleteModal} from "./DeleteModal"; export interface PluginSettings { NextButton: boolean; @@ -251,30 +253,45 @@ export class ObsidianSettingTab extends PluginSettingTab { }); }); + // add a button for edit data settingEl .addButton((button: ButtonComponent): ButtonComponent => { return button .setTooltip("Edit Database") .setIcon("pencil") .onClick(async () => { - let modal = new SettingModal(this.app, this.plugin, this, dbDetails); + let modal = new EditModal(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, + if (modal.dataTemp.savedTempInd) { + const dbDetailsNew: DatabaseDetails = { + format: modal.dataTemp.databaseFormatTemp, + fullName: modal.dataTemp.databaseFullNameTemp, + abName: modal.dataTemp.databaseAbbreviateNameTemp, + notionAPI: modal.dataTemp.notionAPITemp, + databaseID: modal.dataTemp.databaseIDTemp, + tagButton: modal.dataTemp.tagButtonTemp, + customTitleButton: modal.dataTemp.customTitleButtonTemp, + customTitleName: modal.dataTemp.customTitleNameTemp, // customValues: modal.data.customValues, - saved: modal.data.saved, + saved: modal.dataTemp.savedTemp, } - this.plugin.updateDatabaseDetails(dbDetails); + const dbDetailsPrev: DatabaseDetails = { + format: modal.dataPrev.databaseFormatPrev, + fullName: modal.dataPrev.databaseFullNamePrev, + abName: modal.dataPrev.databaseAbbreviateNamePrev, + notionAPI: modal.dataPrev.notionAPIPrev, + databaseID: modal.dataPrev.databaseIDPrev, + tagButton: modal.dataPrev.tagButtonPrev, + customTitleButton: modal.dataPrev.customTitleButtonPrev, + customTitleName: modal.dataPrev.customTitleNamePrev, + // customValues: modal.data.customValues, + saved: modal.dataPrev.savedPrev, + } + + this.plugin.deleteDatabaseDetails(dbDetailsPrev); + this.plugin.updateDatabaseDetails(dbDetailsNew); this.plugin.commands.updateCommand(); @@ -292,11 +309,20 @@ export class ObsidianSettingTab extends PluginSettingTab { .setTooltip("Delete Database") .setIcon("trash") .onClick(async () => { - await this.plugin.deleteDatabaseDetails(dbDetails); + let modal = new DeleteModal(this.app, this.plugin, this, dbDetails); - await this.plugin.commands.updateCommand(); + modal.onClose = () => { + if (modal.data.deleted) { + this.plugin.deleteDatabaseDetails(dbDetails); + + this.plugin.commands.updateCommand(); + + this.display() + } + } + + modal.open(); - this.display() }); }); }