mirror of
https://github.com/jxpeng98/obsidian-to-NotionNext
synced 2026-07-29 16:35:57 +08:00
378 lines
13 KiB
TypeScript
378 lines
13 KiB
TypeScript
import {
|
|
Modal,
|
|
Setting,
|
|
ButtonComponent, App
|
|
} from 'obsidian';
|
|
|
|
import { i18nConfig } from "../lang/I18n";
|
|
import ObsidianSyncNotionPlugin from "../main";
|
|
import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs";
|
|
|
|
export interface customProperty {
|
|
customName: string;
|
|
customType: string;
|
|
index: number;
|
|
}
|
|
|
|
export class SettingModal extends Modal {
|
|
propertyLines: Setting[] = []; // Store all property line settings
|
|
properties: customProperty[] = []; // Array to store property values and types
|
|
[key: string]: any; // Index signature
|
|
data: Record<string, any> = {
|
|
databaseFormat: 'none',
|
|
databaseFullName: '',
|
|
databaseAbbreviateName: '',
|
|
notionAPI: '',
|
|
databaseID: '',
|
|
tagButton: true,
|
|
customTitleButton: false,
|
|
customTitleName: '',
|
|
customProperties: [],
|
|
// customValues: '',
|
|
saved: false,
|
|
};
|
|
plugin: ObsidianSyncNotionPlugin;
|
|
settingTab: ObsidianSettingTab;
|
|
|
|
constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab, dbDetails?: DatabaseDetails) {
|
|
super(app);
|
|
this.plugin = plugin;
|
|
this.settingTab = settingTab;
|
|
this.properties = [];
|
|
if (dbDetails) {
|
|
this.data.databaseFormat = dbDetails.format;
|
|
this.data.databaseFullName = dbDetails.fullName;
|
|
this.data.databaseAbbreviateName = dbDetails.abName;
|
|
this.data.notionAPI = dbDetails.notionAPI;
|
|
this.data.databaseID = dbDetails.databaseID;
|
|
this.data.tagButton = dbDetails.tagButton;
|
|
this.data.customTitleButton = dbDetails.customTitleButton;
|
|
this.data.customTitleName = dbDetails.customTitleName;
|
|
this.data.customProperties = dbDetails.customProperties;
|
|
// this.data.customValues = dbDetails.customValues;
|
|
this.data.saved = dbDetails.saved;
|
|
}
|
|
}
|
|
|
|
display(): void {
|
|
this.containerEl.addClass("settings-modal");
|
|
this.titleEl.setText(i18nConfig.AddNewDatabaseModal);
|
|
|
|
// create the dropdown button to select the database format
|
|
let { contentEl } = this;
|
|
contentEl.empty();
|
|
|
|
const settingDiv = contentEl.createDiv('setting-div');
|
|
const nextTabs = contentEl.createDiv('next-tabs');
|
|
|
|
|
|
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.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, 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.data.saved = true;
|
|
this.data.customProperties = this.properties;
|
|
this.close();
|
|
});
|
|
}
|
|
);
|
|
saveButton.addExtraButton((button) => {
|
|
return button
|
|
.setTooltip('Cancel')
|
|
.setIcon('cross')
|
|
.onClick(() => {
|
|
this.data.saved = false;
|
|
// this.data.customProperties = this.properties;
|
|
this.close();
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
updateContentBasedOnSelection(value: string, nextTabs: HTMLElement): void {
|
|
// Clear existing content
|
|
nextTabs.empty();
|
|
|
|
// Generate content based on the selected value
|
|
if (value === 'general') {
|
|
nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
|
|
|
|
// add full name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
|
|
|
|
// add abbreviate name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data', 'databaseAbbreviateName')
|
|
|
|
// tag button
|
|
this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'data', 'tagButton')
|
|
|
|
// add custom title button
|
|
|
|
new Setting(nextTabs)
|
|
.setName(i18nConfig.NotionCustomTitle)
|
|
.setDesc(i18nConfig.NotionCustomTitleDesc)
|
|
.addToggle((toggle) =>
|
|
toggle
|
|
.setValue(this.data.customTitleButton)
|
|
.onChange(async (value) => {
|
|
this.data.customTitleButton = value;
|
|
this.updateSettingEl(CustomNameEl, value)
|
|
|
|
})
|
|
);
|
|
|
|
|
|
// add custom title name
|
|
const CustomNameEl = this.createStyleDiv('custom-name', (this.data.customTitleButton), nextTabs);
|
|
this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.customTitleName, 'data', 'customTitleName')
|
|
|
|
|
|
// add api key
|
|
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
|
|
|
|
// add database id
|
|
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
|
|
|
|
|
|
} else if (value === 'next') {
|
|
|
|
nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
|
|
|
|
// add full name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
|
|
|
|
// add abbreviate name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data', 'databaseAbbreviateName')
|
|
|
|
// add api key
|
|
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
|
|
|
|
|
|
// add database id
|
|
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
|
|
|
|
} else if (value === 'custom') {
|
|
|
|
nextTabs.createEl('h3', { text: i18nConfig.NotionCustomSettingHeader });
|
|
|
|
// add full name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
|
|
|
|
// add abbreviate name
|
|
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data', 'databaseAbbreviateName')
|
|
|
|
// add api key
|
|
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
|
|
|
|
// add database id
|
|
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.DatabaseIDDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
|
|
|
|
// add new property button
|
|
new Setting(nextTabs)
|
|
.setName(i18nConfig.NotionCustomValues)
|
|
.setDesc(i18nConfig.NotionCustomValuesDesc)
|
|
.addButton((button: ButtonComponent) => {
|
|
return button
|
|
.setTooltip('Add one more property')
|
|
.setButtonText('Add New Property')
|
|
.onClick(async () => {
|
|
const customTabs = nextTabs.createDiv("custom-tabs");
|
|
this.createPropertyLine(customTabs, this.properties);
|
|
});
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
onOpen() {
|
|
// add console log to check if the modal is opened
|
|
this.display()
|
|
}
|
|
|
|
createPropertyLine(containerEl: HTMLElement, properties: customProperty[]): void {
|
|
const propertyIndex = properties.length;
|
|
|
|
properties.push({ customName: "", customType: "", index: propertyIndex });
|
|
|
|
const propertyLine = new Setting(containerEl)
|
|
.setName(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${propertyIndex}`)
|
|
.setDesc(propertyIndex === 0 ? i18nConfig.CustomPropertyFirstColumnDesc : "");
|
|
|
|
propertyLine.addText(text => {
|
|
text.setPlaceholder(i18nConfig.CustomPropertyName)
|
|
.setValue("")
|
|
.onChange(value => {
|
|
let actualIndex = properties.findIndex(p => p.index === propertyIndex);
|
|
if (actualIndex !== -1) {
|
|
properties[actualIndex].customName = value;
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
propertyLine.addDropdown((dropdown) => {
|
|
const options: Record<string, string> = {
|
|
'rich_text': 'Text',
|
|
'number': 'Number',
|
|
'select': 'Select',
|
|
'multi_select': 'Multi-Select',
|
|
'date': 'Date',
|
|
'files': 'Files & Media',
|
|
'checkbox': 'Checkbox',
|
|
'url': 'URL',
|
|
'email': 'Email',
|
|
'phone_number': 'Phone Number',
|
|
// 'formula': 'Formula',
|
|
// 'relation': 'Relation',
|
|
// 'rollup': 'Rollup',
|
|
// 'created_time': 'Created time',
|
|
// 'created_by': 'Created by',
|
|
// 'last_edited_time': 'Last Edited Time',
|
|
// 'last_edited_by': 'Last Edited By',
|
|
};
|
|
|
|
const currentProperty = properties[propertyIndex];
|
|
|
|
if (propertyIndex === 0) {
|
|
dropdown.addOption("title", "Title");
|
|
} else {
|
|
Object.keys(options).forEach(key => {
|
|
dropdown.addOption(key, options[key]);
|
|
});
|
|
}
|
|
dropdown.setValue("")
|
|
.onChange(value => {
|
|
if (currentProperty) {
|
|
currentProperty.customType = value;
|
|
// Retrieve the index of currentProperty from the properties array
|
|
const updatedIndex = properties.findIndex(p => p === currentProperty);
|
|
console.log(`Updated value at index ${updatedIndex}: ${value}`);
|
|
} else {
|
|
console.log("Property not found, may have been deleted.");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
if (propertyIndex > 0) {
|
|
propertyLine.addButton(button => {
|
|
return button
|
|
.setTooltip("Delete")
|
|
.setIcon("trash")
|
|
.onClick(() => {
|
|
this.deleteProperty(propertyIndex, properties);
|
|
});
|
|
});
|
|
}
|
|
|
|
this.propertyLines.push(propertyLine);
|
|
this.updatePropertyLines(); // Ensure property lines are updated after creation
|
|
}
|
|
|
|
deleteProperty(propertyIndex: number, properties: customProperty[]): void {
|
|
let actualIndex = properties.findIndex(p => p.index === propertyIndex);
|
|
if (actualIndex !== -1) {
|
|
properties.splice(actualIndex, 1);
|
|
if (this.propertyLines[actualIndex]) {
|
|
this.propertyLines[actualIndex].settingEl.remove();
|
|
this.propertyLines.splice(actualIndex, 1);
|
|
}
|
|
// Update indices in the properties array
|
|
properties.forEach((prop, idx) => {
|
|
prop.index = idx;
|
|
});
|
|
|
|
this.updatePropertyLines();
|
|
}
|
|
}
|
|
|
|
updatePropertyLines() {
|
|
this.propertyLines.forEach((line, idx) => {
|
|
line.setName(idx === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${idx}`);
|
|
});
|
|
}
|
|
|
|
// create a function to create a div with a style for pop over elements
|
|
public createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement) {
|
|
return parentEl.createDiv(className, (div) => {
|
|
this.updateSettingEl(div, commandValue);
|
|
});
|
|
}
|
|
|
|
// update the setting display style in the setting tab
|
|
public updateSettingEl(element: HTMLElement, commandValue: boolean) {
|
|
element.style.borderTop = commandValue ? "1px solid var(--background-modifier-border)" : "none";
|
|
element.style.paddingTop = commandValue ? "0.75em" : "0";
|
|
element.style.display = commandValue ? "block" : "none";
|
|
element.style.alignItems = "center";
|
|
}
|
|
|
|
// function to add one setting element in the setting tab.
|
|
public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, dataRecord: string, settingsKey: string) {
|
|
if (type === 'password') {
|
|
return new Setting(contentEl)
|
|
.setName(name)
|
|
.setDesc(desc)
|
|
.addText((text) => {
|
|
text.inputEl.type = type;
|
|
return text
|
|
.setPlaceholder(placeholder)
|
|
.setValue(holderValue)
|
|
.onChange(async (value) => {
|
|
this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings();
|
|
})
|
|
});
|
|
} else if (type === 'toggle') {
|
|
return new Setting(contentEl)
|
|
.setName(name)
|
|
.setDesc(desc)
|
|
.addToggle((toggle) =>
|
|
toggle
|
|
.setValue(holderValue)
|
|
.onChange(async (value) => {
|
|
this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings();
|
|
})
|
|
);
|
|
} else if (type === 'text') {
|
|
return new Setting(contentEl)
|
|
.setName(name)
|
|
.setDesc(desc)
|
|
.addText((text) =>
|
|
text
|
|
.setPlaceholder(placeholder)
|
|
.setValue(holderValue)
|
|
.onChange(async (value) => {
|
|
this[dataRecord][settingsKey] = value; // Update the settings dictionary await this.plugin.saveSettings();
|
|
})
|
|
);
|
|
}
|
|
}
|
|
}
|