From bfde5dfe1a75d03f574fb5bcce28b8bc79e933a2 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Thu, 4 Jul 2024 20:28:28 +0100 Subject: [PATCH] finish the edit modal --- src/ui/EditModal.ts | 34 +++--------- src/ui/settingModal.ts | 118 ++++++++++++++++++++--------------------- src/ui/settingTabs.ts | 7 ++- 3 files changed, 68 insertions(+), 91 deletions(-) diff --git a/src/ui/EditModal.ts b/src/ui/EditModal.ts index b1b7b11..8a562f3 100644 --- a/src/ui/EditModal.ts +++ b/src/ui/EditModal.ts @@ -5,6 +5,7 @@ import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs"; import { i18nConfig } from "../lang/I18n"; export class EditModal extends SettingModal { + propertyLines: Setting[] = []; // Store all property line settings [key: string]: any; // Index signature dataTemp: Record = { databaseFormatTemp: '', @@ -132,6 +133,8 @@ export class EditModal extends SettingModal { .onClick(async () => { this.dataTemp.savedTempInd = true; this.dataTemp.savedTemp = true; + console.log(this.dataTemp); + console.log(this.dataPrev); this.close(); }); } @@ -321,38 +324,17 @@ export class EditModal extends SettingModal { .setTooltip("Delete") .setIcon("trash") .onClick(() => { + console.log('Deleting property', properties[propertyIndex]); this.deleteProperty(propertyIndex, properties); }); }); } + + this.propertyLines.push(propertyLine); + this.updatePropertyLines(); + } - createPropertyLine(containerEl: HTMLElement, properties: customProperty[]) { - super.createPropertyLine(containerEl, properties); - } - - deleteProperty(propertyIndex: number, properties: customProperty[]) { - let actualIndex = properties.findIndex(p => p.index === propertyIndex); - if (actualIndex > 0) { - properties.splice(actualIndex, 1); - this.propertyLines[actualIndex].settingEl.remove(); - this.propertyLines.splice(actualIndex, 1); - - properties.forEach((prop, idx) => { - prop.index = idx; - }); - - this.updatePropertyLines(); - } - } - - updatePropertyLines() { - this.propertyLines.forEach((line, idx) => { - line.setName(idx === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${idx}`); - }); - } - - createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement { return super.createStyleDiv(className, commandValue, parentEl); } diff --git a/src/ui/settingModal.ts b/src/ui/settingModal.ts index 2e8c217..754ef67 100644 --- a/src/ui/settingModal.ts +++ b/src/ui/settingModal.ts @@ -1,19 +1,22 @@ import { Modal, Setting, - PluginSettingTab, ButtonComponent, App } from 'obsidian'; -import {i18nConfig} from "../lang/I18n"; +import { i18nConfig } from "../lang/I18n"; import ObsidianSyncNotionPlugin from "../main"; -import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; -// import {CustomModal} from "./CustomModal"; +import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs"; +export interface customProperty { + customName: string; + customType: string; + index: number; +} export class SettingModal extends Modal { propertyLines: Setting[] = []; // Store all property line settings - properties: { customName: string, customType: string , index: number}[] = []; // Array to store property values and types + properties: customProperty[] = []; // Array to store property values and types [key: string]: any; // Index signature data: Record = { databaseFormat: 'none', @@ -56,7 +59,7 @@ export class SettingModal extends Modal { this.titleEl.setText('Add new database'); // create the dropdown button to select the database format - let {contentEl} = this; + let { contentEl } = this; contentEl.empty(); const settingDiv = contentEl.createDiv('setting-div'); @@ -80,7 +83,7 @@ export class SettingModal extends Modal { }); // Initialize content based on the current dropdown value - (this.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs); + (this.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs); }); @@ -89,26 +92,26 @@ export class SettingModal extends Modal { let footerEl = contentEl.createDiv('save-button'); let saveButton = new Setting(footerEl) saveButton.addButton((button: ButtonComponent) => { - return button - .setTooltip('Save') - .setIcon('checkmark') - .onClick(async () => { - this.data.saved = true; - this.data.customProperties = this.properties; - this.close(); - }); - } + return button + .setTooltip('Save') + .setIcon('checkmark') + .onClick(async () => { + this.data.saved = true; + this.data.customProperties = this.properties; + this.close(); + }); + } ); saveButton.addExtraButton((button) => { - return button - .setTooltip('Cancel') - .setIcon('cross') - .onClick(() => { - this.data.saved = false; - this.data.customProperties = this.properties; - this.close(); - }); - } + return button + .setTooltip('Cancel') + .setIcon('cross') + .onClick(() => { + this.data.saved = false; + // this.data.customProperties = this.properties; + this.close(); + }); + } ); } @@ -118,7 +121,7 @@ export class SettingModal extends Modal { // Generate content based on the selected value if (value === 'general') { - nextTabs.createEl('h3', {text: i18nConfig.NotionGeneralSettingHeader}); + nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader }); // add full name this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName') @@ -139,7 +142,6 @@ export class SettingModal extends Modal { .setValue(this.data.customTitleButton) .onChange(async (value) => { this.data.customTitleButton = value; - this.updateSettingEl(CustomNameEl, value) }) @@ -160,7 +162,7 @@ export class SettingModal extends Modal { } else if (value === 'next') { - nextTabs.createEl('h3', {text: i18nConfig.NotionNextSettingHeader}); + nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader }); // add full name this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName') @@ -177,7 +179,7 @@ export class SettingModal extends Modal { } else if (value === 'custom') { - nextTabs.createEl('h3', {text: i18nConfig.NotionCustomSettingHeader}); + nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader }); // add full name this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName') @@ -196,17 +198,16 @@ export class SettingModal extends Modal { .setName(i18nConfig.NotionCustomValues) .setDesc(i18nConfig.NotionCustomValuesDesc) .addButton((button: ButtonComponent) => { - return button - .setTooltip('Add new property') - .setIcon('plus') - .onClick(async () => { - const customTabs = nextTabs.createDiv("custom-tabs"); - this.createPropertyLine(customTabs); - }); - } + return button + .setTooltip('Add one more property') + .setButtonText('Add New Property') + .onClick(async () => { + const customTabs = nextTabs.createDiv("custom-tabs"); + this.createPropertyLine(customTabs, this.properties); + }); + } ); } - } @@ -215,23 +216,22 @@ export class SettingModal extends Modal { this.display() } - createPropertyLine(containerEl: HTMLElement): void { - const propertyIndex = this.properties.length; + createPropertyLine(containerEl: HTMLElement, properties: customProperty[]): void { + const propertyIndex = properties.length; - this.properties.push({customName: "", customType: "", index: propertyIndex}); - - console.log(this.properties[propertyIndex].index); + properties.push({ customName: "", customType: "", index: propertyIndex }); const propertyLine = new Setting(containerEl) .setName(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${propertyIndex}`) .setDesc(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumnDesc : ""); + propertyLine.addText(text => { text.setPlaceholder(i18nConfig.CustomPropertyName) .setValue("") .onChange(value => { - let actualIndex = this.properties.findIndex(p => p.index === propertyIndex); + let actualIndex = properties.findIndex(p => p.index === propertyIndex); if (actualIndex !== -1) { - this.properties[actualIndex].customName = value; + properties[actualIndex].customName = value; } }); }); @@ -258,8 +258,7 @@ export class SettingModal extends Modal { // 'last_edited_by': 'Last Edited By', }; - // Use a reference to the current property object - const currentProperty = this.properties[propertyIndex]; + const currentProperty = properties[propertyIndex]; if (propertyIndex === 0) { dropdown.addOption("title", "Title"); @@ -273,7 +272,7 @@ export class SettingModal extends Modal { if (currentProperty) { currentProperty.customType = value; // Retrieve the index of currentProperty from the properties array - const updatedIndex = this.properties.findIndex(p => p === currentProperty); + const updatedIndex = properties.findIndex(p => p === currentProperty); console.log(`Updated value at index ${updatedIndex}: ${value}`); } else { console.log("Property not found, may have been deleted."); @@ -288,32 +287,29 @@ export class SettingModal extends Modal { .setTooltip("Delete") .setIcon("trash") .onClick(() => { - this.deleteProperty(propertyIndex); + this.deleteProperty(propertyIndex, properties); }); }); } this.propertyLines.push(propertyLine); + this.updatePropertyLines(); // Ensure property lines are updated after creation } - deleteProperty(propertyIndex: number) { - let actualIndex = this.properties.findIndex(p => p.index === propertyIndex); + deleteProperty(propertyIndex: number, properties: customProperty[]): void { + let actualIndex = properties.findIndex(p => p.index === propertyIndex); if (actualIndex !== -1) { - this.properties.splice(actualIndex, 1); - this.propertyLines[actualIndex].settingEl.remove(); - this.propertyLines.splice(actualIndex, 1); - + properties.splice(actualIndex, 1); + if (this.propertyLines[actualIndex]) { + this.propertyLines[actualIndex].settingEl.remove(); + this.propertyLines.splice(actualIndex, 1); + } // Update indices in the properties array - this.properties.forEach((prop, idx) => { + properties.forEach((prop, idx) => { prop.index = idx; }); this.updatePropertyLines(); - - console.log("Updated indices after deletion:"); - this.properties.forEach((prop, idx) => { - console.log(`Index ${idx}: ${prop.index}`); - }); } } diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index d4316fc..3ea7dc9 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -88,9 +88,6 @@ export class ObsidianSettingTab extends PluginSettingTab { this.createSettingEl(containerEl, i18nConfig.NotionLinkDisplay, i18nConfig.NotionLinkDisplayDesc, 'toggle', i18nConfig.NotionLinkDisplay, this.plugin.settings.NotionLinkDisplay, 'NotionLinkDisplay') - // TODO: add toggle to enable or disable link display - - // add new button new Setting(containerEl) @@ -275,7 +272,7 @@ export class ObsidianSettingTab extends PluginSettingTab { } } - modal.open(); + modal.open (); }); }); @@ -291,6 +288,8 @@ export class ObsidianSettingTab extends PluginSettingTab { if (modal.data.deleted) { this.plugin.deleteDatabaseDetails(dbDetails); + console.log(dbDetails.fullName + " deleted"); + this.plugin.commands.updateCommand(); this.display()