diff --git a/src/ui/EditModal.ts b/src/ui/EditModal.ts index 4b0b47a..8029ec2 100644 --- a/src/ui/EditModal.ts +++ b/src/ui/EditModal.ts @@ -1,8 +1,8 @@ -import {App, ButtonComponent, Modal, Setting} from "obsidian"; -import {customProperty, SettingModal} from "./settingModal"; +import { App, ButtonComponent, Modal, Setting } from "obsidian"; +import { customProperty, SettingModal } from "./settingModal"; import ObsidianSyncNotionPlugin from "../main"; -import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; -import {i18nConfig} from "../lang/I18n"; +import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs"; +import { i18nConfig } from "../lang/I18n"; export class EditModal extends SettingModal { propertyLines: Setting[] = []; // Store all property line settings @@ -95,60 +95,60 @@ export class EditModal extends SettingModal { this.containerEl.addClass("edit-modal"); this.titleEl.setText('Edit Database'); - let {contentEl} = this; + let { contentEl } = this; contentEl.empty(); - let properties: { customName: string, customType: string , index: number} = this.dataTemp.customPropertiesTemp; + let properties: { customName: string, customType: string, index: number } = this.dataTemp.customPropertiesTemp; 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); - }); + 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); - }); + // 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(); - }); - } + 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; - // reset the properties - const properties: any[] = []; - this.close(); - }); - } + return button + .setTooltip('Cancel') + .setIcon('cross') + .onClick(() => { + this.dataTemp.savedTempInd = false; + // reset the properties + const properties: any[] = []; + this.close(); + }); + } ); } @@ -167,13 +167,13 @@ export class EditModal extends SettingModal { nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader }); // add full name - this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp') + 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') + 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') + this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp', 'tagButtonTemp') // add custom title button @@ -185,7 +185,6 @@ export class EditModal extends SettingModal { .setValue(this.dataTemp.customTitleButtonTemp) .onChange(async (value) => { this.dataTemp.customTitleButtonTemp = value; - this.updateSettingEl(CustomNameEl, value) }) @@ -194,14 +193,14 @@ export class EditModal extends SettingModal { // 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') + 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') + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp', 'notionAPITemp') // add database id - this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp') + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp') } else if (value === 'next') { @@ -209,20 +208,20 @@ export class EditModal extends SettingModal { nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader }); // add full name - this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp','databaseFullNameTemp') + 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') + 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') + this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp', 'notionAPITemp') // add database id - this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp','databaseIDTemp') + this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp') } 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.dataTemp.databaseFullNameTemp, 'dataTemp', 'databaseFullNameTemp') @@ -237,23 +236,9 @@ export class EditModal extends SettingModal { this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp') // add new property button - const properties = this.dataTemp.customPropertiesTemp; const propertiesContainer = nextTabs.createDiv("properties-container"); - new Setting(nextTabs) - .setName(i18nConfig.NotionCustomValues) - .setDesc(i18nConfig.NotionCustomValuesDesc) - .addButton((button: ButtonComponent) => { - return button - .setTooltip('Add new property') - .setIcon('plus') - .onClick(async () => { - this.createPropertyLine(propertiesContainer, properties); - }); - } - ); - - this.initializePropertyLines(propertiesContainer, properties) + this.initializePropertyLines(propertiesContainer, this.dataTemp.customPropertiesTemp); } } @@ -261,24 +246,28 @@ export class EditModal extends SettingModal { console.log(properties.length, "properties have been created"); - containerEl.innerHTML = ''; + new Setting(containerEl) + .setName(i18nConfig.NotionCustomValues) + .setDesc(i18nConfig.NotionCustomValuesDesc) + .addButton((button: ButtonComponent) => { + return button + .setTooltip('Add one more property') + .setButtonText('Add New Property') + .onClick(async () => { this.createOrUpdatePropertyLine(containerEl, null, properties); }) + }); + // const addButton = document.createElement('button'); + // addButton.textContent = "Add New Property"; + // addButton.onclick = () => this.createOrUpdatePropertyLine(containerEl, null, properties); + // containerEl.appendChild(addButton); - // Retrieve and display existing properties + // Retrieve and display existing properties below the button properties.forEach(property => { - createOrUpdatePropertyLine(containerEl, property); + this.createOrUpdatePropertyLine(containerEl, property, properties); }); - // Add a button for creating new properties at the end of the container - const addButton = document.createElement('button'); - addButton.textContent = "Add New Property"; - addButton.onclick = () => { - createOrUpdatePropertyLine(containerEl, null, properties); - }; - - containerEl.appendChild(addButton); } - createOrUpdatePropertyLine(containerEl: HTMLElement, property: null, properties: customProperty[]) { + createOrUpdatePropertyLine(containerEl: HTMLElement, property: customProperty | null, properties: customProperty[]) { const isExistingProperty = property !== null; const propertyIndex = isExistingProperty ? property.index : properties.length; @@ -298,7 +287,7 @@ export class EditModal extends SettingModal { }); propertyLine.addDropdown((dropdown) => { - const options = { + const options: Record = { 'text': 'Text', 'number': 'Number', 'select': 'Select', @@ -310,9 +299,14 @@ export class EditModal extends SettingModal { 'email': 'Email', 'phone_number': 'Phone Number' }; - Object.keys(options).forEach(key => { - dropdown.addOption(key, options[key]); - }); + + if (propertyIndex === 0) { + dropdown.addOption('title', 'Title'); + } else { + Object.keys(options).forEach(key => { + dropdown.addOption(key, options[key]); + }); + } dropdown.setValue(isExistingProperty ? property.customType : "") .onChange(value => { if (isExistingProperty) { @@ -324,13 +318,13 @@ export class EditModal extends SettingModal { }); }); - if (isExistingProperty && propertyIndex > 0) { + if (propertyIndex > 0) { propertyLine.addButton(button => { return button .setTooltip("Delete") .setIcon("trash") .onClick(() => { - deleteProperty(propertyIndex, properties); + this.deleteProperty(propertyIndex, properties); }); }); } @@ -341,13 +335,12 @@ export class EditModal extends SettingModal { } - deleteProperty(index: number, properties: customProperty[]): void { const updatedProperties = properties.filter(p => p.index !== index); properties.length = 0; // Clear existing array updatedProperties.forEach(p => properties.push(p)); // Re-add filtered properties - initializePropertyLines(document.getElementById('propertiesContainer'), properties); // Reinitialize UI + this.initializePropertyLines(document.getElementById('propertiesContainer'), properties); // Reinitialize UI }