Improve preview function for customised database

src/ui/EditModal.ts

@@ -3,8 +3,12 @@ import {SettingModal} from "./settingModal";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
 import {i18nConfig} from "../lang/I18n";
+import {customProperty} from "./settingModal";
 
 export class EditModal extends SettingModal {
+	propertyLines: Setting[] = []; // Store all property line settings
+	properties: { customName: string, customType: string , index: number}[] = []; // Array to store property values and types
+	[key: string]: any; // Index signature
 	dataTemp: Record<string, any> = {
 		databaseFormatTemp: '',
 		// databaseFormatTempInd: false,
@@ -245,19 +249,98 @@ export class EditModal extends SettingModal {
 							.onClick(async () => {
 								const customTabs = nextTabs.createDiv("custom-tabs");
 								this.createPropertyLine(customTabs);
-								// let customModal = new CustomModal(this.app);
-								// customModal.onClose = () => {
-								// 	this.renderCustomPreview(customModal.properties, nextTabs)
-								// 	this.dataTemp.customPropertiesTemp = customModal.properties;
-								// }
-								// customModal.open();
+
+								
+								
 							});
 					}
 				);
+			const retrieveTabs = nextTabs.createDiv("retrieve-tabs");
+			this.retrievePropertyLine(retrieveTabs, this.dataTemp.customPropertiesTemp)
 		}
-
+		
 	}
 
+	retrievePropertyLine(containerEl: HTMLElement, properties: customProperty[]): void {
+		const propertyIndex = properties.length;
+		
+		console.log(propertyIndex, "have been created");
+		
+		this.properties.forEach((property, index) => {
+			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 = properties.findIndex(p => p.index === propertyIndex);
+						if (actualIndex !== -1) {
+							properties[actualIndex].customName = value;
+						}
+					});
+			});
+
+			propertyLine.addDropdown((dropdown) => {
+				const options: Record<string, string> = {
+					'text': 'Text',
+					'number': 'Number',
+					'select': 'Select',
+					'multi_select': 'Multi-Select',
+					'date': 'Date',
+					'files': 'Files & Media',
+					'checkbox': 'Checkbox',
+					'url': 'URL',
+					'email': 'Email',
+					'phone_number': 'Phone Number',
+					// 'formula': 'Formula',
+					// 'relation': 'Relation',
+					// 'rollup': 'Rollup',
+					// 'created_time': 'Created time',
+					// 'created_by': 'Created by',
+					// 'last_edited_time': 'Last Edited Time',
+					// 'last_edited_by': 'Last Edited By',
+				};
+
+				// Use a reference to the current property object
+				const currentProperty = properties[propertyIndex];
+
+				if (propertyIndex === 0) {
+					dropdown.addOption("title", "Title");
+				} else {
+					Object.keys(options).forEach(key => {
+						dropdown.addOption(key, options[key]);
+					});
+				}
+				dropdown.setValue("")
+					.onChange(value => {
+						if (currentProperty) {
+							currentProperty.customType = value;
+							// Retrieve the index of currentProperty from the properties array
+							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.");
+						}
+					});
+			});
+
+
+			if (propertyIndex > 0) {
+				propertyLine.addButton(button => {
+					return button
+						.setTooltip("Delete")
+						.setIcon("trash")
+						.onClick(() => {
+							this.deleteProperty(propertyIndex);
+						});
+				});
+			}
+		});
+		
+	}
+	
+	
 
 
 	createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement {

src/ui/PreviewModal.ts

@@ -1,6 +1,8 @@
 import {App, ExtraButtonComponent, Modal, Notice, Setting} from "obsidian";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
+import {customProperty} from "./settingModal";
+import {i18nConfig} from "../lang/I18n";
 
 export class PreviewModal extends Modal {
 	plugin: ObsidianSyncNotionPlugin;
@@ -120,12 +122,10 @@ export class PreviewModal extends Modal {
 
 		if (this.dbDetails.format === 'custom') {
 
-			const customPropertiesEl = new Setting(previewEl)
-			customPropertiesEl
-				.setName('Custom Properties')
-				.addTextArea(text => text
-					.setValue(JSON.stringify(this.dbDetails.customProperties, null, 2))
-					.setDisabled(true));
+			const customPrv = previewEl.createDiv("custom-tabs");
+
+
+			this.previewPropertyLine(previewEl, this.dbDetails.customProperties);
 		}
 
 	}
@@ -136,4 +136,44 @@ export class PreviewModal extends Modal {
 	}
 
 
+	previewPropertyLine(containerEl: HTMLElement, properties: customProperty[]): void {
+
+		properties.forEach((property, index) => {
+			const propertyLine = new Setting(containerEl)
+				.setName(index === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${index}`)
+				.setDesc(index === 0 ? i18nConfig.CustomPropertyFirstColumnDesc : "");
+
+			propertyLine.addText(text => {
+				text.setPlaceholder(i18nConfig.CustomPropertyName)
+					.setValue(property.customName)
+					.setDisabled(true);
+			});
+
+			propertyLine.addDropdown((dropdown) => {
+				const options: Record<string, string> = {
+					'title': 'Title',
+					'text': 'Text',
+					'number': 'Number',
+					'select': 'Select',
+					'multi_select': 'Multi-Select',
+					'date': 'Date',
+					'files': 'Files & Media',
+					'checkbox': 'Checkbox',
+					'url': 'URL',
+					'email': 'Email',
+					'phone_number': 'Phone Number',
+					// Additional options can be added here
+				};
+
+				// Populate dropdown with options
+				Object.keys(options).forEach(key => {
+					dropdown.addOption(key, options[key]);
+				});
+
+				dropdown.setValue(property.customType)
+					.setDisabled(true); // Disable dropdown to prevent changes
+			});
+		});
+	}
+
 }

src/ui/settingModal.ts

@@ -13,7 +13,7 @@ import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
 
 export class SettingModal extends Modal {
 	propertyLines: Setting[] = []; // Store all property line settings
-	properties: { customName: string, customType: string }[] = []; // Array to store property values and types
+	properties: { customName: string, customType: string , index: number}[] = []; // Array to store property values and types
 	[key: string]: any; // Index signature
 	data: Record<string, any> = {
 		databaseFormat: 'none',
@@ -49,7 +49,6 @@ export class SettingModal extends Modal {
 			// this.data.customValues = dbDetails.customValues;
 			this.data.saved = dbDetails.saved;
 		}
-
 	}
 
 	display(): void {
@@ -64,48 +63,26 @@ export class SettingModal extends Modal {
 		const nextTabs = contentEl.createDiv('next-tabs');
 
 
-		if (this.data.saved) {
-			new Setting(settingDiv)
-				.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.data.databaseFormat)
-						.onChange(async (value) => {
-							this.data.databaseFormat = value;
-							nextTabs.empty();
-							this.updateContentBasedOnSelection(value, nextTabs);
-						});
+		new Setting(settingDiv)
+			.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.data.databaseFormat)
+					.onChange(async (value) => {
+						this.data.databaseFormat = value;
+						nextTabs.empty();
+						this.updateContentBasedOnSelection(value, nextTabs);
+					});
 
-					// Initialize content based on the current dropdown value
-					this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs);
-				});
+				// Initialize content based on the current dropdown value
+				(this.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs);
 
-		} else {
-			new Setting(settingDiv)
-				.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.data.databaseFormat)
-						.onChange(async (value) => {
-							this.data.databaseFormat = value;
-							nextTabs.empty();
-							this.updateContentBasedOnSelection(value, nextTabs);
-						});
-
-					// Initialize content based on the current dropdown value
-					this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
-				});
-		}
+			});
 
 
 		// add save button
@@ -117,6 +94,7 @@ export class SettingModal extends Modal {
 					.setIcon('checkmark')
 					.onClick(async () => {
 						this.data.saved = true;
+						this.data.customProperties = this.properties;
 						this.close();
 					});
 			}
@@ -127,6 +105,7 @@ export class SettingModal extends Modal {
 					.setIcon('cross')
 					.onClick(() => {
 						this.data.saved = false;
+						this.data.customProperties = this.properties;
 						this.close();
 					});
 			}
@@ -163,10 +142,6 @@ export class SettingModal extends Modal {
 
 							this.updateSettingEl(CustomNameEl, value)
 
-							// this.updateSettingEl(CustomValuesEl, value)
-
-							// await this.plugin.saveSettings();
-							// await this.plugin.commands.updateCommand();
 						})
 				);
 
@@ -240,20 +215,24 @@ export class SettingModal extends Modal {
 		this.display()
 	}
 
-
 	createPropertyLine(containerEl: HTMLElement): void {
 		const propertyIndex = this.properties.length;
-		this.properties.push({customName: "", customType: ""}); // Initialize with empty values
+
+		this.properties.push({customName: "", customType: "", index: propertyIndex});
+
+		console.log(this.properties[propertyIndex].index);
 
 		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 => {
-					this.properties[propertyIndex].customName = value;
+					let actualIndex = this.properties.findIndex(p => p.index === propertyIndex);
+					if (actualIndex !== -1) {
+						this.properties[actualIndex].customName = value;
+					}
 				});
 		});
 
@@ -270,45 +249,79 @@ export class SettingModal extends Modal {
 				'url': 'URL',
 				'email': 'Email',
 				'phone_number': 'Phone Number',
-				'formula': 'Formula',
-				'relation': 'Relation',
-				'rollup': 'Rollup',
-				'created_time': 'Created time',
-				'created_by': 'Created by',
-				'last_edited_time': 'Last Edited Time',
-				'last_edited_by': 'Last Edited By',
+				// 'formula': 'Formula',
+				// 'relation': 'Relation',
+				// 'rollup': 'Rollup',
+				// 'created_time': 'Created time',
+				// 'created_by': 'Created by',
+				// 'last_edited_time': 'Last Edited Time',
+				// 'last_edited_by': 'Last Edited By',
 			};
+
+			// Use a reference to the current property object
+			const currentProperty = this.properties[propertyIndex];
+
 			if (propertyIndex === 0) {
 				dropdown.addOption("title", "Title");
+			} else {
+				Object.keys(options).forEach(key => {
+					dropdown.addOption(key, options[key]);
+				});
 			}
-			Object.keys(options).forEach(key => {
-				dropdown.addOption(key, options[key]);
-			});
 			dropdown.setValue("")
 				.onChange(value => {
-					this.properties[propertyIndex].customType = value;
+					if (currentProperty) {
+						currentProperty.customType = value;
+						// Retrieve the index of currentProperty from the properties array
+						const updatedIndex = this.properties.findIndex(p => p === currentProperty);
+						console.log(`Updated value at index ${updatedIndex}: ${value}`);
+					} else {
+						console.log("Property not found, may have been deleted.");
+					}
 				});
 		});
 
 
 		if (propertyIndex > 0) {
-			propertyLine.addButton((button) => {
-					return button
-						.setTooltip("Delete")
-						.setIcon("trash")
-						.onClick(async () => {
-							// Handle the deletion of this property line
-							this.propertyLines = this.propertyLines.filter(line => line !== propertyLine);
-							this.properties.splice(propertyIndex, 1); // Remove the property from the array
-							propertyLine.settingEl.remove();
-						});
-				}
-			);
+			propertyLine.addButton(button => {
+				return button
+					.setTooltip("Delete")
+					.setIcon("trash")
+					.onClick(() => {
+						this.deleteProperty(propertyIndex);
+					});
+			});
 		}
 
 		this.propertyLines.push(propertyLine);
 	}
 
+	deleteProperty(propertyIndex: number) {
+		let actualIndex = this.properties.findIndex(p => p.index === propertyIndex);
+		if (actualIndex !== -1) {
+			this.properties.splice(actualIndex, 1);
+			this.propertyLines[actualIndex].settingEl.remove();
+			this.propertyLines.splice(actualIndex, 1);
+
+			// Update indices in the properties array
+			this.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}`);
+			});
+		}
+	}
+
+	updatePropertyLines() {
+		this.propertyLines.forEach((line, idx) => {
+			line.setName(idx === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${idx}`);
+		});
+	}
 
 	// create a function to create a div with a style for pop over elements
 	public createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement) {