update edit modal with better display setting.

src/ui/EditModal.ts

@@ -5,7 +5,6 @@ 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<string, any> = {
 		databaseFormatTemp: '',
@@ -98,11 +97,10 @@ export class EditModal extends SettingModal {
 		let { contentEl } = this;
 		contentEl.empty();
 
-		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)
@@ -134,6 +132,8 @@ export class EditModal extends SettingModal {
 				.onClick(async () => {
 					this.dataTemp.savedTempInd = true;
 					this.dataTemp.savedTemp = true;
+					this.dataPrev = { ...this.dataTemp };
+					this.dataPrev.customPropertiesPrev = this.dataTemp.customPropertiesTemp.slice();
 					this.close();
 				});
 		}
@@ -143,17 +143,19 @@ export class EditModal extends SettingModal {
 				.setTooltip('Cancel')
 				.setIcon('cross')
 				.onClick(() => {
-					this.dataTemp.savedTempInd = false;
+					this.dataTemp = { ...this.dataPrev };
-					// reset the properties
+					this.dataTemp.customPropertiesTemp = this.dataPrev.customPropertiesPrev.slice();
-					const properties: any[] = [];
+					nextTabs.empty();
+					this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs);
 					this.close();
 				});
 		}
 		);
-
 	}
 
 	onOpen(): void {
+		// Backup initial state when the modal is opened
+		this.dataPrev.customPropertiesPrev = this.dataTemp.customPropertiesTemp.slice();
 		this.display()
 	}
 
@@ -235,40 +237,37 @@ export class EditModal extends SettingModal {
 			// add database id
 			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
 
-			// add new property button
+			// add custom properties
-			const propertiesContainer = nextTabs.createDiv("properties-container");
+			this.initializePropertyLines(nextTabs, this.dataTemp.customPropertiesTemp);
-
-			this.initializePropertyLines(propertiesContainer, this.dataTemp.customPropertiesTemp);
 		}
 	}
 
 	initializePropertyLines(containerEl: HTMLElement, properties: customProperty[]): void {
-
+		if (!containerEl) {
-		console.log(properties.length, "properties have been created");
+			console.error('Failed to initialize property lines: containerEl is null');
+			return;
+		}
 
 		new Setting(containerEl)
-			.setName(i18nConfig.NotionCustomValues)
+			.setName("Add New Property")
-			.setDesc(i18nConfig.NotionCustomValuesDesc)
+			.setDesc("Click to add a new property")
-			.addButton((button: ButtonComponent) => {
+			.addButton(button => {
 				return button
+					.setButtonText('Add')
 					.setTooltip('Add one more property')
-					.setButtonText('Add New Property')
+					.onClick(() => {
-					.onClick(async () => { this.createOrUpdatePropertyLine(containerEl, null, properties); })
+						this.createPropertyLine(containerEl, 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 below the button
 		properties.forEach(property => {
-			this.createOrUpdatePropertyLine(containerEl, property, properties);
+			this.updatePropertyLine(containerEl, property, properties);
 		});
-
 	}
 
-	createOrUpdatePropertyLine(containerEl: HTMLElement, property: customProperty | null, properties: customProperty[]) {
+
-		const isExistingProperty = property !== null;
+	updatePropertyLine(containerEl: HTMLElement, property: customProperty, properties: customProperty[]) {
+		let isExistingProperty = property !== null;
 		const propertyIndex = isExistingProperty ? property.index : properties.length;
 
 		const propertyLine = new Setting(containerEl)
@@ -279,9 +278,12 @@ export class EditModal extends SettingModal {
 			text.setPlaceholder(i18nConfig.CustomPropertyName)
 				.setValue(isExistingProperty ? property.customName : "")
 				.onChange(value => {
-					let actualIndex = properties.findIndex(p => p.index === propertyIndex);
+					const actualIndex = properties.findIndex(p => p.index === propertyIndex);
 					if (actualIndex !== -1) {
 						properties[actualIndex].customName = value;
+					} else {
+						properties.push({ customName: value, customType: '', index: propertyIndex });
+						isExistingProperty = true;
 					}
 				});
 		});
@@ -307,13 +309,15 @@ export class EditModal extends SettingModal {
 					dropdown.addOption(key, options[key]);
 				});
 			}
+
 			dropdown.setValue(isExistingProperty ? property.customType : "")
 				.onChange(value => {
-					if (isExistingProperty) {
+					const actualIndex = properties.findIndex(p => p.index === propertyIndex);
-						property.customType = value;
+					if (actualIndex !== -1) {
-					} else {
+						properties[actualIndex].customType = value;
-						const newProperty = { customName: '', customType: value, index: propertyIndex };
+					} else if (!isExistingProperty) {
-						properties.push(newProperty);
+						properties.push({ customName: '', customType: value, index: propertyIndex });
+						isExistingProperty = true; // Update the flag to prevent re-adding
 					}
 				});
 		});
@@ -328,19 +332,31 @@ export class EditModal extends SettingModal {
 					});
 			});
 		}
-
-		if (!isExistingProperty) {
-			properties.push({ customName: "", customType: "", index: propertyIndex });
-		}
-
 	}
 
+	createPropertyLine(containerEl: HTMLElement, properties: customProperty[]) {
+		super.createPropertyLine(containerEl, properties);
+	}
 
-	deleteProperty(index: number, properties: customProperty[]): void {
+	deleteProperty(propertyIndex: number, properties: customProperty[]) {
-		const updatedProperties = properties.filter(p => p.index !== index);
+		let actualIndex = properties.findIndex(p => p.index === propertyIndex);
-		properties.length = 0; // Clear existing array
+		if (actualIndex > 0) {
-		updatedProperties.forEach(p => properties.push(p)); // Re-add filtered properties
+			properties.splice(actualIndex, 1);
-		this.initializePropertyLines(document.getElementById('propertiesContainer'), properties); // Reinitialize UI
+			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}`);
+		});
 	}