mirror of
https://github.com/jxpeng98/obsidian-to-NotionNext
synced 2026-07-29 08:08:34 +08:00
back up for edit modal
This commit is contained in:
Jiaxin Peng
@@ -1,8 +1,8 @@
|
||||
import {App, ButtonComponent, Modal, Setting} from "obsidian";
|
||||
import {customProperty, SettingModal} from "./settingModal";
|
||||
import { App, ButtonComponent, Modal, Setting } from "obsidian";
|
||||
import { customProperty, SettingModal } from "./settingModal";
|
||||
import ObsidianSyncNotionPlugin from "../main";
|
||||
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
|
||||
import {i18nConfig} from "../lang/I18n";
|
||||
import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs";
|
||||
import { i18nConfig } from "../lang/I18n";
|
||||
|
||||
export class EditModal extends SettingModal {
|
||||
propertyLines: Setting[] = []; // Store all property line settings
|
||||
@@ -95,60 +95,60 @@ export class EditModal extends SettingModal {
|
||||
this.containerEl.addClass("edit-modal");
|
||||
this.titleEl.setText('Edit Database');
|
||||
|
||||
let {contentEl} = this;
|
||||
let { contentEl } = this;
|
||||
contentEl.empty();
|
||||
|
||||
let properties: { customName: string, customType: string , index: number} = this.dataTemp.customPropertiesTemp;
|
||||
let properties: { customName: string, customType: string, index: number } = this.dataTemp.customPropertiesTemp;
|
||||
|
||||
const editDiv = contentEl.createDiv('edit-div');
|
||||
const nextTabs = contentEl.createDiv('next-tabs');
|
||||
|
||||
new Setting(editDiv)
|
||||
.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.dataTemp.databaseFormatTemp)
|
||||
.onChange(async (value) => {
|
||||
this.dataTemp.databaseFormatTemp = value;
|
||||
nextTabs.empty();
|
||||
this.updateContentBasedOnSelection(value, nextTabs);
|
||||
});
|
||||
new Setting(editDiv)
|
||||
.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.dataTemp.databaseFormatTemp)
|
||||
.onChange(async (value) => {
|
||||
this.dataTemp.databaseFormatTemp = value;
|
||||
nextTabs.empty();
|
||||
this.updateContentBasedOnSelection(value, nextTabs);
|
||||
});
|
||||
|
||||
// Initialize content based on the current dropdown value
|
||||
this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs);
|
||||
});
|
||||
// Initialize content based on the current dropdown value
|
||||
this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs);
|
||||
});
|
||||
|
||||
|
||||
// add save button
|
||||
let footerEl = contentEl.createDiv('save-button');
|
||||
let saveButton = new Setting(footerEl)
|
||||
saveButton.addButton((button: ButtonComponent) => {
|
||||
return button
|
||||
.setTooltip('Save')
|
||||
.setIcon('checkmark')
|
||||
.onClick(async () => {
|
||||
this.dataTemp.savedTempInd = true;
|
||||
this.dataTemp.savedTemp = true;
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
return button
|
||||
.setTooltip('Save')
|
||||
.setIcon('checkmark')
|
||||
.onClick(async () => {
|
||||
this.dataTemp.savedTempInd = true;
|
||||
this.dataTemp.savedTemp = true;
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
);
|
||||
saveButton.addExtraButton((button) => {
|
||||
return button
|
||||
.setTooltip('Cancel')
|
||||
.setIcon('cross')
|
||||
.onClick(() => {
|
||||
this.dataTemp.savedTempInd = false;
|
||||
// reset the properties
|
||||
const properties: any[] = [];
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
return button
|
||||
.setTooltip('Cancel')
|
||||
.setIcon('cross')
|
||||
.onClick(() => {
|
||||
this.dataTemp.savedTempInd = false;
|
||||
// reset the properties
|
||||
const properties: any[] = [];
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
@@ -167,13 +167,13 @@ export class EditModal extends SettingModal {
|
||||
nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
|
||||
|
||||
// add full name
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp,'dataTemp', 'databaseFullNameTemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp', 'databaseFullNameTemp')
|
||||
|
||||
// add abbreviate name
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp', 'databaseAbbreviateNameTemp')
|
||||
|
||||
// tag button
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp', 'tagButtonTemp')
|
||||
|
||||
// add custom title button
|
||||
|
||||
@@ -185,7 +185,6 @@ export class EditModal extends SettingModal {
|
||||
.setValue(this.dataTemp.customTitleButtonTemp)
|
||||
.onChange(async (value) => {
|
||||
this.dataTemp.customTitleButtonTemp = value;
|
||||
|
||||
this.updateSettingEl(CustomNameEl, value)
|
||||
|
||||
})
|
||||
@@ -194,14 +193,14 @@ export class EditModal extends SettingModal {
|
||||
|
||||
// add custom title name
|
||||
const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.customTitleButtonTemp), nextTabs);
|
||||
this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.customTitleNameTemp,'dataTemp', 'customTitleNameTemp')
|
||||
this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.customTitleNameTemp, 'dataTemp', 'customTitleNameTemp')
|
||||
|
||||
|
||||
// add api key
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp', 'notionAPITemp')
|
||||
|
||||
// add database id
|
||||
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')
|
||||
|
||||
|
||||
} else if (value === 'next') {
|
||||
@@ -209,20 +208,20 @@ export class EditModal extends SettingModal {
|
||||
nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
|
||||
|
||||
// add full name
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp','databaseFullNameTemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp', 'databaseFullNameTemp')
|
||||
|
||||
// add abbreviate name
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp','databaseAbbreviateNameTemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp', 'databaseAbbreviateNameTemp')
|
||||
|
||||
// add api key
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
|
||||
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp', 'notionAPITemp')
|
||||
|
||||
// add database id
|
||||
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')
|
||||
|
||||
} else if (value === 'custom') {
|
||||
|
||||
nextTabs.createEl('h3', {text: i18nConfig.NotionCustomSettingHeader});
|
||||
nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader });
|
||||
|
||||
// add full name
|
||||
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.dataTemp.databaseFullNameTemp, 'dataTemp', 'databaseFullNameTemp')
|
||||
@@ -237,23 +236,9 @@ export class EditModal extends SettingModal {
|
||||
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
|
||||
|
||||
// add new property button
|
||||
const properties = this.dataTemp.customPropertiesTemp;
|
||||
const propertiesContainer = nextTabs.createDiv("properties-container");
|
||||
|
||||
new Setting(nextTabs)
|
||||
.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)
|
||||
this.initializePropertyLines(propertiesContainer, this.dataTemp.customPropertiesTemp);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -261,24 +246,28 @@ export class EditModal extends SettingModal {
|
||||
|
||||
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 => {
|
||||
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 propertyIndex = isExistingProperty ? property.index : properties.length;
|
||||
|
||||
@@ -298,7 +287,7 @@ export class EditModal extends SettingModal {
|
||||
});
|
||||
|
||||
propertyLine.addDropdown((dropdown) => {
|
||||
const options = {
|
||||
const options: Record<string, string> = {
|
||||
'text': 'Text',
|
||||
'number': 'Number',
|
||||
'select': 'Select',
|
||||
@@ -310,9 +299,14 @@ export class EditModal extends SettingModal {
|
||||
'email': 'Email',
|
||||
'phone_number': 'Phone Number'
|
||||
};
|
||||
Object.keys(options).forEach(key => {
|
||||
dropdown.addOption(key, options[key]);
|
||||
});
|
||||
|
||||
if (propertyIndex === 0) {
|
||||
dropdown.addOption('title', 'Title');
|
||||
} else {
|
||||
Object.keys(options).forEach(key => {
|
||||
dropdown.addOption(key, options[key]);
|
||||
});
|
||||
}
|
||||
dropdown.setValue(isExistingProperty ? property.customType : "")
|
||||
.onChange(value => {
|
||||
if (isExistingProperty) {
|
||||
@@ -324,13 +318,13 @@ export class EditModal extends SettingModal {
|
||||
});
|
||||
});
|
||||
|
||||
if (isExistingProperty && propertyIndex > 0) {
|
||||
if (propertyIndex > 0) {
|
||||
propertyLine.addButton(button => {
|
||||
return button
|
||||
.setTooltip("Delete")
|
||||
.setIcon("trash")
|
||||
.onClick(() => {
|
||||
deleteProperty(propertyIndex, properties);
|
||||
this.deleteProperty(propertyIndex, properties);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -342,12 +336,11 @@ export class EditModal extends SettingModal {
|
||||
}
|
||||
|
||||
|
||||
|
||||
deleteProperty(index: number, properties: customProperty[]): void {
|
||||
const updatedProperties = properties.filter(p => p.index !== index);
|
||||
properties.length = 0; // Clear existing array
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user