obsidian-to-NotionNext/src/ui/CustomModal.ts

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();
	}
}