complete the custom ui design

src/ui/CustomModal.ts

@@ -0,0 +1,134 @@
+import {App, Modal, Setting} from "obsidian";
+import ObsidianSyncNotionPlugin from "../main";
+import {ObsidianSettingTab} from "./settingTabs";
+
+export class CustomModal extends Modal {
+	propertyLines: Setting[] = []; // Store all property line settings
+	properties: { customValue: 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({customValue: "", customType: ""}); // Initialize with empty values
+
+		const propertyLine = new Setting(containerEl)
+
+		propertyLine
+			.setName("Property " + (propertyIndex + 1))
+
+		propertyLine.addText((text) => {
+				text
+					.setPlaceholder("Property name")
+					.setValue("")
+					.onChange(async (value) => {
+						this.properties[propertyIndex].customValue = value; // Update the customValue of the specific property
+					});
+			}
+		)
+
+		propertyLine.addDropdown((dropdown) => {
+				dropdown
+					.addOption("text", "Text")
+					.addOption("number", "Number")
+					.addOption("select", "Select")
+					.addOption("multi_select", "Multi-Select")
+					.addOption("date", "Date")
+					.addOption("person", "Person")
+					.addOption("file", "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("text")
+					.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("Add Custom Property");
+
+		let {contentEl} = this;
+		contentEl.empty();
+
+		const customDiv = contentEl.createDiv("custom-div");
+
+		new Setting(customDiv)
+			.setName("Add new property")
+			.setDesc("Add new property match with your notion database")
+			.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();
+	}
+}