back up for edit modal

This commit is contained in:
Jiaxin Peng
2024-07-04 10:00:46 +01:00
parent 70f30f0713
commit 82529ce56a

View File

@@ -185,7 +185,6 @@ export class EditModal extends SettingModal {
.setValue(this.dataTemp.customTitleButtonTemp) .setValue(this.dataTemp.customTitleButtonTemp)
.onChange(async (value) => { .onChange(async (value) => {
this.dataTemp.customTitleButtonTemp = value; this.dataTemp.customTitleButtonTemp = value;
this.updateSettingEl(CustomNameEl, value) this.updateSettingEl(CustomNameEl, value)
}) })
@@ -237,23 +236,9 @@ export class EditModal extends SettingModal {
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp') this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
// add new property button // add new property button
const properties = this.dataTemp.customPropertiesTemp;
const propertiesContainer = nextTabs.createDiv("properties-container"); const propertiesContainer = nextTabs.createDiv("properties-container");
new Setting(nextTabs) this.initializePropertyLines(propertiesContainer, this.dataTemp.customPropertiesTemp);
.setName(i18nConfig.NotionCustomValues)
.setDesc(i18nConfig.NotionCustomValuesDesc)
.addButton((button: ButtonComponent) => {
return button
.setTooltip('Add new property')
.setIcon('plus')
.onClick(async () => {
this.createPropertyLine(propertiesContainer, properties);
});
}
);
this.initializePropertyLines(propertiesContainer, properties)
} }
} }
@@ -261,24 +246,28 @@ export class EditModal extends SettingModal {
console.log(properties.length, "properties have been created"); console.log(properties.length, "properties have been created");
containerEl.innerHTML = ''; new Setting(containerEl)
.setName(i18nConfig.NotionCustomValues)
.setDesc(i18nConfig.NotionCustomValuesDesc)
.addButton((button: ButtonComponent) => {
return button
.setTooltip('Add one more property')
.setButtonText('Add New Property')
.onClick(async () => { this.createOrUpdatePropertyLine(containerEl, null, properties); })
});
// const addButton = document.createElement('button');
// addButton.textContent = "Add New Property";
// addButton.onclick = () => this.createOrUpdatePropertyLine(containerEl, null, properties);
// containerEl.appendChild(addButton);
// Retrieve and display existing properties // Retrieve and display existing properties below the button
properties.forEach(property => { properties.forEach(property => {
createOrUpdatePropertyLine(containerEl, property); this.createOrUpdatePropertyLine(containerEl, property, properties);
}); });
// Add a button for creating new properties at the end of the container
const addButton = document.createElement('button');
addButton.textContent = "Add New Property";
addButton.onclick = () => {
createOrUpdatePropertyLine(containerEl, null, properties);
};
containerEl.appendChild(addButton);
} }
createOrUpdatePropertyLine(containerEl: HTMLElement, property: null, properties: customProperty[]) { createOrUpdatePropertyLine(containerEl: HTMLElement, property: customProperty | null, properties: customProperty[]) {
const isExistingProperty = property !== null; const isExistingProperty = property !== null;
const propertyIndex = isExistingProperty ? property.index : properties.length; const propertyIndex = isExistingProperty ? property.index : properties.length;
@@ -298,7 +287,7 @@ export class EditModal extends SettingModal {
}); });
propertyLine.addDropdown((dropdown) => { propertyLine.addDropdown((dropdown) => {
const options = { const options: Record<string, string> = {
'text': 'Text', 'text': 'Text',
'number': 'Number', 'number': 'Number',
'select': 'Select', 'select': 'Select',
@@ -310,9 +299,14 @@ export class EditModal extends SettingModal {
'email': 'Email', 'email': 'Email',
'phone_number': 'Phone Number' 'phone_number': 'Phone Number'
}; };
if (propertyIndex === 0) {
dropdown.addOption('title', 'Title');
} else {
Object.keys(options).forEach(key => { Object.keys(options).forEach(key => {
dropdown.addOption(key, options[key]); dropdown.addOption(key, options[key]);
}); });
}
dropdown.setValue(isExistingProperty ? property.customType : "") dropdown.setValue(isExistingProperty ? property.customType : "")
.onChange(value => { .onChange(value => {
if (isExistingProperty) { if (isExistingProperty) {
@@ -324,13 +318,13 @@ export class EditModal extends SettingModal {
}); });
}); });
if (isExistingProperty && propertyIndex > 0) { if (propertyIndex > 0) {
propertyLine.addButton(button => { propertyLine.addButton(button => {
return button return button
.setTooltip("Delete") .setTooltip("Delete")
.setIcon("trash") .setIcon("trash")
.onClick(() => { .onClick(() => {
deleteProperty(propertyIndex, properties); this.deleteProperty(propertyIndex, properties);
}); });
}); });
} }
@@ -342,12 +336,11 @@ export class EditModal extends SettingModal {
} }
deleteProperty(index: number, properties: customProperty[]): void { deleteProperty(index: number, properties: customProperty[]): void {
const updatedProperties = properties.filter(p => p.index !== index); const updatedProperties = properties.filter(p => p.index !== index);
properties.length = 0; // Clear existing array properties.length = 0; // Clear existing array
updatedProperties.forEach(p => properties.push(p)); // Re-add filtered properties updatedProperties.forEach(p => properties.push(p)); // Re-add filtered properties
initializePropertyLines(document.getElementById('propertiesContainer'), properties); // Reinitialize UI this.initializePropertyLines(document.getElementById('propertiesContainer'), properties); // Reinitialize UI
} }