Update custom function and adjust the custom interface ui

This commit is contained in:
Jiaxin Peng
2024-07-02 23:48:37 +01:00
parent a8ebab7fcb
commit 5799ffe79b
4 changed files with 100 additions and 214 deletions

View File

@@ -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 }[] = []; // Array to store property values and types
[key: string]: any; // Index signature
data: Record<string, any> = {
databaseFormat: 'none',
@@ -223,15 +225,8 @@ export class SettingModal extends Modal {
.setTooltip('Add new property')
.setIcon('plus')
.onClick(async () => {
let customModal = new CustomModal(this.app);
customModal.onClose = () => {
this.renderCustomPreview(customModal.properties, nextTabs)
this.data.customProperties = customModal.properties;
}
customModal.open();
const customTabs = nextTabs.createDiv("custom-tabs");
this.createPropertyLine(customTabs);
});
}
);
@@ -255,6 +250,95 @@ export class SettingModal extends Modal {
}
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);
}
// create a function to create a div with a style for pop over elements
public createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement) {