Improve preview function for customised database

src/ui/CustomModal.ts

@@ -1,162 +0,0 @@
-import {App, Modal, Setting} from "obsidian";
-import ObsidianSyncNotionPlugin from "../main";
-import {ObsidianSettingTab} from "./settingTabs";
-import {i18nConfig} from "../lang/I18n";
-
-export class CustomModal extends Modal {
-	propertyLines: Setting[] = []; // Store all property line settings
-	properties: { customName: string, customType: string }[] = []; // Array to store property values and types
-	plugin: ObsidianSyncNotionPlugin;
-	settingTab: ObsidianSettingTab;
-
-	constructor(app: App) {
-		super(app);
-	}
-
-	createPropertyLine(containerEl: HTMLElement): void {
-		const propertyIndex = this.properties.length;
-		this.properties.push({customName: "", customType: ""}); // Initialize with empty values
-
-		const propertyLine = new Setting(containerEl)
-
-		if (propertyIndex === 0) {
-			propertyLine
-				.setName(i18nConfig.CustomPropertyFirstColumn)
-				.setDesc(i18nConfig.CustomPropertyFirstColumnDesc)
-
-				propertyLine.addText((text) => {
-					text
-						.setPlaceholder("Property name")
-						.setValue("")
-						.onChange(async (value) => {
-							this.properties[propertyIndex].customName = value; // Update the customValue of the specific property
-						});
-
-				}
-			)
-
-			propertyLine.addDropdown((dropdown) => {
-					dropdown
-						.addOption("title", "Title")
-						.setValue("")
-						.onChange(async (value) => {
-							this.properties[propertyIndex].customType = value; // Update the customType of the specific property
-						});
-				}
-		)
-		} else {
-			propertyLine
-			.setName(i18nConfig.CustomProperty + (propertyIndex))
-
-		propertyLine.addText((text) => {
-				text
-					.setPlaceholder(i18nConfig.CustomPropertyName)
-					.setValue("")
-					.onChange(async (value) => {
-						this.properties[propertyIndex].customName = value; // Update the customValue of the specific property
-					});
-			}
-		)
-
-		propertyLine.addDropdown((dropdown) => {
-				dropdown
-					// .addOption("none", '')
-					.addOption("text", "Text")
-					.addOption("number", "Number")
-					.addOption("select", "Select")
-					.addOption("multi_select", "Multi-Select")
-					.addOption("date", "Date")
-					// .addOption("person", "Person")
-					.addOption("files", "Files & Media")
-					.addOption("checkbox", "Checkbox")
-					.addOption("url", "URL")
-					.addOption("email", "Email")
-					.addOption("phone_number", "Phone Number")
-					// .addOption("formula", "Formula")
-					// .addOption("relation", "Relation")
-					// .addOption("rollup", "Rollup")
-					// .addOption("created_time", "Created time")
-					// .addOption("created_by", "Created by")
-					// .addOption("last_edited_time", "Last Edited Time")
-					// .addOption("last_edited_by", "Last Edited By")
-					.setValue("")
-					.onChange(async (value) => {
-						this.properties[propertyIndex].customType = value; // Update the customType of the specific property
-					});
-			}
-		)
-
-		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();
-					});
-			}
-		);
-		}
-		this.propertyLines.push(propertyLine);
-	}
-
-
-	display(): void {
-
-		this.containerEl.addClass("custom-modal");
-		this.titleEl.setText(i18nConfig.AddCustomProperty);
-
-		let {contentEl} = this;
-		contentEl.empty();
-
-		const customDiv = contentEl.createDiv("custom-div");
-
-		new Setting(customDiv)
-			.setName(i18nConfig.AddNewProperty)
-			.setDesc(i18nConfig.AddNewPropertyDesc)
-			.addButton((button) => {
-				return button
-					.setTooltip("Add")
-					.setIcon("plus")
-					.onClick(async () => {
-						const customTabs = customDiv.createDiv("custom-tabs");
-						this.createPropertyLine(customTabs);
-					});
-			});
-
-
-		let footerEl = this.contentEl.createDiv("save-custom-value");
-		let saveButton = new Setting(footerEl)
-		saveButton.addButton((button) => {
-				return button
-					.setTooltip("Save")
-					.setIcon("checkmark")
-					.onClick(async () => {
-						this.close();
-					});
-			}
-		);
-
-		saveButton.addExtraButton((button) => {
-				return button
-					.setTooltip("Cancel")
-					.setIcon("cross")
-					.onClick(async () => {
-						this.close();
-					});
-			}
-		);
-	}
-
-	onOpen(): void {
-		this.display();
-	}
-
-	onClose(): void {
-		const {contentEl} = this;
-
-		contentEl.empty();
-	}
-}

src/ui/EditModal.ts

@@ -3,9 +3,12 @@ import {SettingModal} from "./settingModal";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
 import {i18nConfig} from "../lang/I18n";
-import {CustomModal} from "./CustomModal";
+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,
@@ -244,22 +247,101 @@ export class EditModal extends SettingModal {
 							.setTooltip('Add new property')
 							.setIcon('plus')
 							.onClick(async () => {
-								let customModal = new CustomModal(this.app);
+								const customTabs = nextTabs.createDiv("custom-tabs");
+								this.createPropertyLine(customTabs);
 
-								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 {
 		return super.createStyleDiv(className, commandValue, parentEl);

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)
+			const customPrv = previewEl.createDiv("custom-tabs");
-			customPropertiesEl
+
-				.setName('Custom Properties')
+
-				.addTextArea(text => text
+			this.previewPropertyLine(previewEl, this.dbDetails.customProperties);
-					.setValue(JSON.stringify(this.dbDetails.customProperties, null, 2))
-					.setDisabled(true));
 		}
 
 	}
@@ -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

@@ -8,10 +8,12 @@ import {
 import {i18nConfig} from "../lang/I18n";
 import ObsidianSyncNotionPlugin from "../main";
 import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
-import {CustomModal} from "./CustomModal";
+// import {CustomModal} from "./CustomModal";
 
 
 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
 	[key: string]: any; // Index signature
 	data: Record<string, any> = {
 		databaseFormat: 'none',
@@ -47,7 +49,6 @@ export class SettingModal extends Modal {
 			// this.data.customValues = dbDetails.customValues;
 			this.data.saved = dbDetails.saved;
 		}
-
 	}
 
 	display(): void {
@@ -62,48 +63,26 @@ export class SettingModal extends Modal {
 		const nextTabs = contentEl.createDiv('next-tabs');
 
 
-		if (this.data.saved) {
+		new Setting(settingDiv)
-			new Setting(settingDiv)
+			.setName(i18nConfig.databaseFormat)
-				.setName(i18nConfig.databaseFormat)
+			.setDesc(i18nConfig.databaseFormatDesc)
-				.setDesc(i18nConfig.databaseFormatDesc)
+			.addDropdown((component) => {
-				.addDropdown((component) => {
+				component
-					component
+					.addOption('none', '')
-						.addOption('none', '')
+					.addOption('general', i18nConfig.databaseGeneral)
-						.addOption('general', i18nConfig.databaseGeneral)
+					.addOption('next', i18nConfig.databaseNext)
-						.addOption('next', i18nConfig.databaseNext)
+					.addOption('custom', i18nConfig.databaseCustom)
-						.addOption('custom', i18nConfig.databaseCustom)
+					.setValue(this.data.databaseFormat)
-						.setValue(this.data.databaseFormat)
+					.onChange(async (value) => {
-						.onChange(async (value) => {
+						this.data.databaseFormat = value;
-							this.data.databaseFormat = value;
+						nextTabs.empty();
-							nextTabs.empty();
+						this.updateContentBasedOnSelection(value, nextTabs);
-							this.updateContentBasedOnSelection(value, nextTabs);
+					});
-						});
 
-					// Initialize content based on the current dropdown value
+				// Initialize content based on the current dropdown value
-					this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs);
+				(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
@@ -115,6 +94,7 @@ export class SettingModal extends Modal {
 					.setIcon('checkmark')
 					.onClick(async () => {
 						this.data.saved = true;
+						this.data.customProperties = this.properties;
 						this.close();
 					});
 			}
@@ -125,6 +105,7 @@ export class SettingModal extends Modal {
 					.setIcon('cross')
 					.onClick(() => {
 						this.data.saved = false;
+						this.data.customProperties = this.properties;
 						this.close();
 					});
 			}
@@ -161,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();
 						})
 				);
 
@@ -223,15 +200,8 @@ export class SettingModal extends Modal {
 							.setTooltip('Add new property')
 							.setIcon('plus')
 							.onClick(async () => {
-								let customModal = new CustomModal(this.app);
+								const customTabs = nextTabs.createDiv("custom-tabs");
-
+								this.createPropertyLine(customTabs);
-								customModal.onClose = () => {
-
-									this.renderCustomPreview(customModal.properties, nextTabs)
-									this.data.customProperties = customModal.properties;
-								}
-
-								customModal.open();
 							});
 					}
 				);
@@ -245,16 +215,113 @@ export class SettingModal extends Modal {
 		this.display()
 	}
 
-	renderCustomPreview(properties: any[], nextTabs: HTMLElement) {
+	createPropertyLine(containerEl: HTMLElement): void {
-		const previewContainer = nextTabs.createDiv('preview-container');
+		const propertyIndex = this.properties.length;
 
-		properties.forEach((property: { customName: any; customType: any; }) => {
+		this.properties.push({customName: "", customType: "", index: propertyIndex});
-			const propertyEl = previewContainer.createEl('div', {cls: 'property-preview'});
+
-			propertyEl.createEl('span', {text: `Property: ${property.customName}, Type: ${property.customType}`});
+		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 => {
+					let actualIndex = this.properties.findIndex(p => p.index === propertyIndex);
+					if (actualIndex !== -1) {
+						this.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 = this.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 = 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(() => {
+						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) {

src/upload/upoload_custom/BaseUpload2NotionCustom.ts

@@ -50,46 +50,4 @@ export class UploadBaseCustom {
             return null;  // or some other default value, if you prefer
         }
     }
-
-    // async updateYamlInfo(yamlContent: string, nowFile: TFile, res: any, app: App, settings: any) {
-    //     let {url, id} = res.json
-    //     // replace www to notionID
-    //     const {notionUser} = this.plugin.settings;
-    //
-    //     if (notionUser !== "") {
-    //         // replace url str "www" to notionID
-    //         url = url.replace("www.notion.so", `${notionUser}.notion.site`)
-    //     }
-    //
-    //     await app.fileManager.processFrontMatter(nowFile, yamlContent => {
-    //         if (yamlContent['notionID']) {
-    //             delete yamlContent['notionID']
-    //         }
-    //         if (yamlContent['link']) {
-    //             delete yamlContent['link']
-    //         }
-    //         // add new notionID and link
-    //         yamlContent.notionID = id;
-    //         yamlContent.link = url;
-    //     });
-    //
-    //     try {
-    //         await navigator.clipboard.writeText(url)
-    //     } catch (error) {
-    //         new Notice(`复制链接失败，请手动复制${error}`)
-    //     }
-    //     // const __content = yamlContent.__content;
-    //     // delete yamlContent.__content
-    //     // const yamlhead = yaml.stringify(yamlContent)
-    //     // //  if yamlhead hava last \n  remove it
-    //     // const yamlhead_remove_n = yamlhead.replace(/\n$/, '')
-    //     // // if __content have start \n remove it
-    //     // const __content_remove_n = __content.replace(/^\n/, '')
-    //     // const content = '---\n' +yamlhead_remove_n +'\n---\n' + __content_remove_n;
-    //     // try {
-    //     // 	await nowFile.vault.modify(nowFile, content)
-    //     // } catch (error) {
-    //     // 	new Notice(`write file error ${error}`)
-    //     // }
-    // }
 }

src/upload/upoload_custom/Upload2NotionCustom.ts

@@ -71,6 +71,8 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 			};
 		}
 
+		console.log(bodyString)
+
 		try {
 			return await requestUrl({
 				url: `https://api.notion.com/v1/pages`,
@@ -218,11 +220,15 @@ export class Upload2NotionCustom extends UploadBaseCustom {
 
 		const properties: { [key: string]: any } = {};
 
+		// Only include custom properties that have values
 		customProperties.forEach(({customName, customType}) => {
+			if (customValues[customName] !== undefined) {
 			properties[customName] = this.buildPropertyObject(customName, customType, customValues);
 			}
+		}
 		);
 
+		console.log(properties)
 
 		return {
 			parent: {