jxpeng98/obsidian-to-NotionNext
1
0
Fork 0
mirror of https://github.com/jxpeng98/obsidian-to-NotionNext synced 2026-07-29 08:08:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

update settingModal.ts refactor the customise database and improve the creating logic

Browse Source
This commit is contained in:
Jiaxin Peng
2024-07-03 13:39:56 +01:00
parent 9bcdb42edb
commit 72146afe48
1 changed files with 72 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/ui/settingModal.ts
View File

@@ -13,7 +13,7 @@ import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
export class SettingModal extends Modal { export class SettingModal extends Modal {
propertyLines: Setting[] = []; // Store all property line settings propertyLines: Setting[] = []; // Store all property line settings
properties: { customName: string, customType: string }[] = []; // Array to store property values and types properties: { customName: string, customType: string , index: number}[] = []; // Array to store property values and types
[key: string]: any; // Index signature [key: string]: any; // Index signature
data: Record<string, any> = { data: Record<string, any> = {
databaseFormat: 'none', databaseFormat: 'none',
@@ -49,7 +49,6 @@ export class SettingModal extends Modal {
// this.data.customValues = dbDetails.customValues; // this.data.customValues = dbDetails.customValues;
this.data.saved = dbDetails.saved; this.data.saved = dbDetails.saved;
} }
} }
display(): void { display(): void {
@@ -64,48 +63,26 @@ export class SettingModal extends Modal {
const nextTabs = contentEl.createDiv('next-tabs'); 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 // add save button
@@ -117,6 +94,7 @@ export class SettingModal extends Modal {
.setIcon('checkmark') .setIcon('checkmark')
.onClick(async () => { .onClick(async () => {
this.data.saved = true; this.data.saved = true;
this.data.customProperties = this.properties;
this.close(); this.close();
}); });
} }
@@ -127,6 +105,7 @@ export class SettingModal extends Modal {
.setIcon('cross') .setIcon('cross')
.onClick(() => { .onClick(() => {
this.data.saved = false; this.data.saved = false;
this.data.customProperties = this.properties;
this.close(); this.close();
}); });
} }
@@ -163,10 +142,6 @@ export class SettingModal extends Modal {
this.updateSettingEl(CustomNameEl, value) this.updateSettingEl(CustomNameEl, value)
// this.updateSettingEl(CustomValuesEl, value)
// await this.plugin.saveSettings();
// await this.plugin.commands.updateCommand();
}) })
); );
@@ -242,17 +217,22 @@ export class SettingModal extends Modal {
createPropertyLine(containerEl: HTMLElement): void { createPropertyLine(containerEl: HTMLElement): void {
const propertyIndex = this.properties.length; const propertyIndex = this.properties.length;
this.properties.push({customName: "", customType: ""}); // Initialize with empty values
this.properties.push({customName: "", customType: "", index: propertyIndex});
console.log(this.properties[propertyIndex].index);
const propertyLine = new Setting(containerEl) const propertyLine = new Setting(containerEl)
.setName(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${propertyIndex}`) .setName(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${propertyIndex}`)
.setDesc(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumnDesc : ""); .setDesc(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumnDesc : "");
propertyLine.addText(text => { propertyLine.addText(text => {
text.setPlaceholder(i18nConfig.CustomPropertyName) text.setPlaceholder(i18nConfig.CustomPropertyName)
.setValue("") .setValue("")
.onChange(value => { .onChange(value => {
this.properties[propertyIndex].customName = value; let actualIndex = this.properties.findIndex(p => p.index === propertyIndex);
if (actualIndex !== -1) {
this.properties[actualIndex].customName = value;
}
}); });
}); });
@@ -269,55 +249,46 @@ export class SettingModal extends Modal {
'url': 'URL', 'url': 'URL',
'email': 'Email', 'email': 'Email',
'phone_number': 'Phone Number', 'phone_number': 'Phone Number',
'formula': 'Formula', // 'formula': 'Formula',
'relation': 'Relation', // 'relation': 'Relation',
'rollup': 'Rollup', // 'rollup': 'Rollup',
'created_time': 'Created time', // 'created_time': 'Created time',
'created_by': 'Created by', // 'created_by': 'Created by',
'last_edited_time': 'Last Edited Time', // 'last_edited_time': 'Last Edited Time',
'last_edited_by': 'Last Edited By', // 'last_edited_by': 'Last Edited By',
}; };
// Use a reference to the current property object
const currentProperty = this.properties[propertyIndex];
if (propertyIndex === 0) { if (propertyIndex === 0) {
dropdown.addOption("title", "Title"); dropdown.addOption("title", "Title");
} else {
Object.keys(options).forEach(key => {
dropdown.addOption(key, options[key]);
});
} }
Object.keys(options).forEach(key => {
dropdown.addOption(key, options[key]);
});
dropdown.setValue("") dropdown.setValue("")
.onChange(value => { .onChange(value => {
this.properties[propertyIndex].customType = 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.");
}
}); });
}); });
// TODO: update the index of the property line
if (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(() => {
const currentIndex = this.properties.findIndex((p, idx) => idx === propertyIndex); this.deleteProperty(propertyIndex);
// Directly use propertyIndex captured in closure
if (currentIndex > 0) {
this.properties.splice(currentIndex, 1); // Remove the property from the array
// Update UI components
containerEl.querySelectorAll('.setting-line').forEach((line, index) => {
if (index > currentIndex) {
// Reduce the index in the UI component ID or data attribute if you are using them
const settingComponent = this.propertyLines[index];
settingComponent.setName(i18nConfig.CustomProperty + (index - 1));
}
});
propertyLine.settingEl.remove(); // Remove the UI element
this.propertyLines.splice(currentIndex, 1); // Remove the property line from the tracking array
// Update remaining property lines to reflect new indices
this.updatePropertyLines();
}
}); });
}); });
} }
@@ -325,24 +296,30 @@ export class SettingModal extends Modal {
this.propertyLines.push(propertyLine); 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;
});
deleteProperty(index: number) {
if (index > 0 && index < this.properties.length) {
this.properties.splice(index, 1);
this.propertyLines[index].dispose(); // Assuming dispose method exists for cleanup
this.propertyLines.splice(index, 1);
this.updatePropertyLines(); this.updatePropertyLines();
console.log("Updated indices after deletion:");
this.properties.forEach((prop, idx) => {
console.log(`Index ${idx}: ${prop.index}`);
});
} }
} }
updatePropertyLines() { updatePropertyLines() {
this.propertyLines.forEach((line, index) => { this.propertyLines.forEach((line, idx) => {
line.setName(`${i18nConfig.CustomProperty} ${index}`); line.setName(idx === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${idx}`);
// Assuming buttons are accessible directly; adjust if needed
const deleteButton = line.containerEl.querySelector('.delete-button');
if (deleteButton) {
deleteButton.setAttribute('data-index', index.toString());
}
}); });
} }