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

back up for edit modal

Browse Source
This commit is contained in:
Jiaxin Peng
2024-07-04 10:00:46 +01:00
parent 70f30f0713
commit 82529ce56a
1 changed files with 83 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/ui/EditModal.ts
View File

@@ -1,8 +1,8 @@
import {App, ButtonComponent, Modal, Setting} from "obsidian"; import { App, ButtonComponent, Modal, Setting } from "obsidian";
import {customProperty, SettingModal} from "./settingModal"; import { customProperty, SettingModal } from "./settingModal";
import ObsidianSyncNotionPlugin from "../main"; import ObsidianSyncNotionPlugin from "../main";
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs";
import {i18nConfig} from "../lang/I18n"; import { i18nConfig } from "../lang/I18n";
export class EditModal extends SettingModal { export class EditModal extends SettingModal {
propertyLines: Setting[] = []; // Store all property line settings propertyLines: Setting[] = []; // Store all property line settings
@@ -95,60 +95,60 @@ export class EditModal extends SettingModal {
this.containerEl.addClass("edit-modal"); this.containerEl.addClass("edit-modal");
this.titleEl.setText('Edit Database'); this.titleEl.setText('Edit Database');
let {contentEl} = this; let { contentEl } = this;
contentEl.empty(); 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 editDiv = contentEl.createDiv('edit-div');
const nextTabs = contentEl.createDiv('next-tabs'); const nextTabs = contentEl.createDiv('next-tabs');
new Setting(editDiv) new Setting(editDiv)
.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.dataTemp.databaseFormatTemp) .setValue(this.dataTemp.databaseFormatTemp)
.onChange(async (value) => { .onChange(async (value) => {
this.dataTemp.databaseFormatTemp = value; this.dataTemp.databaseFormatTemp = 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.dataTemp.databaseFormatTemp, nextTabs); this.updateContentBasedOnSelection(this.dataTemp.databaseFormatTemp, nextTabs);
}); });
// add save button // add save button
let footerEl = contentEl.createDiv('save-button'); let footerEl = contentEl.createDiv('save-button');
let saveButton = new Setting(footerEl) let saveButton = new Setting(footerEl)
saveButton.addButton((button: ButtonComponent) => { saveButton.addButton((button: ButtonComponent) => {
return button return button
.setTooltip('Save') .setTooltip('Save')
.setIcon('checkmark') .setIcon('checkmark')
.onClick(async () => { .onClick(async () => {
this.dataTemp.savedTempInd = true; this.dataTemp.savedTempInd = true;
this.dataTemp.savedTemp = true; this.dataTemp.savedTemp = true;
this.close(); this.close();
}); });
} }
); );
saveButton.addExtraButton((button) => { saveButton.addExtraButton((button) => {
return button return button
.setTooltip('Cancel') .setTooltip('Cancel')
.setIcon('cross') .setIcon('cross')
.onClick(() => { .onClick(() => {
this.dataTemp.savedTempInd = false; this.dataTemp.savedTempInd = false;
// reset the properties // reset the properties
const properties: any[] = []; const properties: any[] = [];
this.close(); this.close();
}); });
} }
); );
} }
@@ -167,13 +167,13 @@ export class EditModal extends SettingModal {
nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader }); nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
// add full name // 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 // 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 // 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 // add custom title button
@@ -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)
}) })
@@ -194,14 +193,14 @@ export class EditModal extends SettingModal {
// add custom title name // add custom title name
const CustomNameEl = this.createStyleDiv('custom-name', (this.dataTemp.customTitleButtonTemp), nextTabs); 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 // 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 // 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') { } else if (value === 'next') {
@@ -209,20 +208,20 @@ export class EditModal extends SettingModal {
nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader }); nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
// add full name // 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 // 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 // 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 // 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') { } else if (value === 'custom') {
nextTabs.createEl('h3', {text: i18nConfig.NotionCustomSettingHeader}); nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader });
// add full name // 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')
@@ -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'
}; };
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 : "") 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
} }