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

complete the custom ui design

Browse Source
This commit is contained in:
Jiaxin Peng
2024-01-28 00:11:11 +00:00
parent 8c65e471eb
commit 2a58dd3258
10 changed files with 289 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/ui/CustomModal.ts
View File

@@ -0,0 +1,134 @@
import {App, Modal, Setting} from "obsidian";
import ObsidianSyncNotionPlugin from "../main";
import {ObsidianSettingTab} from "./settingTabs";
export class CustomModal extends Modal {
propertyLines: Setting[] = []; // Store all property line settings
properties: { customValue: string, customType: string }[] = []; // Array to store property values and types
plugin: ObsidianSyncNotionPlugin;
settingTab: ObsidianSettingTab;
constructor(app: App) {
super(app);
}
createPropertyLine(containerEl: HTMLElement): void {
const propertyIndex = this.properties.length;
this.properties.push({customValue: "", customType: ""}); // Initialize with empty values
const propertyLine = new Setting(containerEl)
propertyLine
.setName("Property " + (propertyIndex + 1))
propertyLine.addText((text) => {
text
.setPlaceholder("Property name")
.setValue("")
.onChange(async (value) => {
this.properties[propertyIndex].customValue = value; // Update the customValue of the specific property
});
}
)
propertyLine.addDropdown((dropdown) => {
dropdown
.addOption("text", "Text")
.addOption("number", "Number")
.addOption("select", "Select")
.addOption("multi_select", "Multi-Select")
.addOption("date", "Date")
.addOption("person", "Person")
.addOption("file", "Files & Media")
.addOption("checkbox", "Checkbox")
.addOption("url", "URL")
.addOption("email", "Email")
.addOption("phone_number", "Phone Number")
.addOption("formula", "Formula")
.addOption("relation", "Relation")
.addOption("rollup", "Rollup")
.addOption("created_time", "Created time")
.addOption("created_by", "Created by")
.addOption("last_edited_time", "Last Edited Time")
.addOption("last_edited_by", "Last Edited By")
.setValue("text")
.onChange(async (value) => {
this.properties[propertyIndex].customType = value; // Update the customType of the specific property
});
}
)
propertyLine.addButton((button) => {
return button
.setTooltip("Delete")
.setIcon("trash")
.onClick(async () => {
// Handle the deletion of this property line
this.propertyLines = this.propertyLines.filter(line => line !== propertyLine);
this.properties.splice(propertyIndex, 1); // Remove the property from the array
propertyLine.settingEl.remove();
});
}
);
this.propertyLines.push(propertyLine);
}
display(): void {
this.containerEl.addClass("custom-modal");
this.titleEl.setText("Add Custom Property");
let {contentEl} = this;
contentEl.empty();
const customDiv = contentEl.createDiv("custom-div");
new Setting(customDiv)
.setName("Add new property")
.setDesc("Add new property match with your notion database")
.addButton((button) => {
return button
.setTooltip("Add")
.setIcon("plus")
.onClick(async () => {
const customTabs = customDiv.createDiv("custom-tabs");
this.createPropertyLine(customTabs);
});
});
let footerEl = this.contentEl.createDiv("save-custom-value");
let saveButton = new Setting(footerEl)
saveButton.addButton((button) => {
return button
.setTooltip("Save")
.setIcon("checkmark")
.onClick(async () => {
this.close();
});
}
);
saveButton.addExtraButton((button) => {
return button
.setTooltip("Cancel")
.setIcon("cross")
.onClick(async () => {
this.close();
});
}
);
}
onOpen(): void {
this.display();
}
onClose(): void {
const {contentEl} = this;
contentEl.empty();
}
}

90
src/ui/EditModal.ts
View File

@@ -3,6 +3,7 @@ import {SettingModal} from "./settingModal";
import ObsidianSyncNotionPlugin from "../main";
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
import {i18nConfig} from "../lang/I18n";
import {CustomModal} from "./CustomModal";
export class EditModal extends SettingModal {
dataTemp: Record<string, any> = {
@@ -21,6 +22,7 @@ export class EditModal extends SettingModal {
customTitleButtonTemp: false,
// customTitleButtonTempInd: false,
customTitleNameTemp: '',
customPropertiesTemp: [],
// customTitleNameTempInd: false,
// customValues: '',
savedTemp: false,
@@ -42,6 +44,7 @@ export class EditModal extends SettingModal {
customTitleButtonPrev: false,
// customTitleButtonPrevInd: false,
customTitleNamePrev: '',
customPropertiesPrev: [],
// customTitleNamePrevInd: false,
// customValues: '',
savedPrev: false,
@@ -67,6 +70,7 @@ export class EditModal extends SettingModal {
this.dataTemp.tagButtonTemp = dbDetails.tagButton;
this.dataTemp.customTitleButtonTemp = dbDetails.customTitleButton;
this.dataTemp.customTitleNameTemp = dbDetails.customTitleName;
this.dataTemp.customPropertiesTemp = dbDetails.customProperties;
// this.dataTemp.customValues = dbDetails.customValues;
this.dataTemp.savedTemp = dbDetails.saved;
@@ -79,6 +83,7 @@ export class EditModal extends SettingModal {
this.dataPrev.tagButtonPrev = dbDetails.tagButton;
this.dataPrev.customTitleButtonPrev = dbDetails.customTitleButton;
this.dataPrev.customTitleNamePrev = dbDetails.customTitleName;
this.dataPrev.customPropertiesPrev = dbDetails.customProperties;
// this.dataTemp.customValues = dbDetails.customValues;
this.dataPrev.savedPrev = dbDetails.saved;
}
@@ -103,7 +108,7 @@ export class EditModal extends SettingModal {
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.addOption('custom', i18nConfig.databaseCustom)
.setValue(this.dataTemp.databaseFormatTemp)
.onChange(async (value) => {
this.dataTemp.databaseFormatTemp = value;
@@ -211,70 +216,49 @@ export class EditModal extends SettingModal {
// add api key
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.dataTemp.notionAPITemp, 'dataTemp','notionAPITemp')
// add database id
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, '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')
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')
// tag button
this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.dataTemp.tagButtonTemp, 'dataTemp','tagButtonTemp')
// add custom title button
new Setting(nextTabs)
.setName(i18nConfig.NotionCustomTitle)
.setDesc(i18nConfig.NotionCustomTitleDesc)
.addToggle((toggle) =>
toggle
.setValue(this.dataTemp.CustomTitleButtonTemp)
.onChange(async (value) => {
this.dataTemp.CustomTitleButtonTemp = value;
this.updateSettingEl(CustomNameEl, value)
// this.updateSettingEl(CustomValuesEl, value)
// await this.plugin.saveSettings();
// await this.plugin.commands.updateCommand();
})
);
// 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')
// // add custom values
// const CustomValuesEl = this.createStyleDiv('custom-values', (this.dataTemp.CustomTitleButton), nextTabs);
// new Setting(CustomValuesEl)
// .setName(i18nConfig.NotionCustomValues)
// .setDesc(i18nConfig.NotionCustomValuesDesc)
// .addTextArea((text) => {
// return text
// .setPlaceholder(i18nConfig.NotionCustomValuesText)
// .setValue(this.dataTemp.CustomValues)
// .onChange(async (value) => {
// this.dataTemp.CustomValues = value;
// await this.plugin.saveSettings();
// });
// });
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.dataTemp.databaseAbbreviateNameTemp, 'dataTemp', 'databaseAbbreviateNameTemp')
// add api key
const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs);
this.createSettingEl(notionAPIGeneralEl, 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
const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs);
this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
// add custom title name
this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.CustomTitleNameTemp, 'dataTemp', 'CustomTitleNameTemp')
// add new property button
new Setting(nextTabs)
.setName(i18nConfig.NotionCustomValues)
.setDesc(i18nConfig.NotionCustomValuesDesc)
.addButton((button: ButtonComponent) => {
return button
.setTooltip('Add new property')
.setIcon('plus')
.onClick(async () => {
let customModal = new CustomModal(this.app);
customModal.onClose = () => {
this.renderCustomPreview(customModal.properties, nextTabs)
this.dataTemp.customPropertiesTemp = customModal.properties;
}
customModal.open();
});
}
);
}
}

14
src/ui/PreviewModal.ts
View File

@@ -116,10 +116,24 @@ export class PreviewModal extends Modal {
dbIdSetting.settingEl.style.display = 'none'; // Hide initially
// Preview the custom properties
if (this.dbDetails.format === 'custom') {
const customPropertiesEl = new Setting(previewEl)
customPropertiesEl
.setName('Custom Properties')
.addTextArea(text => text
.setValue(JSON.stringify(this.dbDetails.customProperties, null, 2))
.setDisabled(true));
}
}
onOpen() {
this.display()
}
}

164
src/ui/settingModal.ts
View File

@@ -5,9 +5,10 @@ import {
ButtonComponent, App
} from 'obsidian';
import { i18nConfig } from "../lang/I18n";
import {i18nConfig} from "../lang/I18n";
import ObsidianSyncNotionPlugin from "../main";
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs";
import {CustomModal} from "./CustomModal";
export class SettingModal extends Modal {
@@ -21,6 +22,7 @@ export class SettingModal extends Modal {
tagButton: true,
customTitleButton: false,
customTitleName: '',
customProperties: [],
// customValues: '',
saved: false,
};
@@ -31,6 +33,7 @@ export class SettingModal extends Modal {
super(app);
this.plugin = plugin;
this.settingTab = settingTab;
this.properties = [];
if (dbDetails) {
this.data.databaseFormat = dbDetails.format;
this.data.databaseFullName = dbDetails.fullName;
@@ -40,6 +43,7 @@ export class SettingModal extends Modal {
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;
}
@@ -51,14 +55,13 @@ export class SettingModal extends Modal {
this.titleEl.setText('Add new database');
// create the dropdown button to select the database format
let { contentEl } = this;
let {contentEl} = this;
contentEl.empty();
const settingDiv = contentEl.createDiv('setting-div');
const nextTabs = contentEl.createDiv('next-tabs');
if (this.data.saved) {
new Setting(settingDiv)
.setName(i18nConfig.databaseFormat)
@@ -68,7 +71,7 @@ export class SettingModal extends Modal {
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.addOption('custom', i18nConfig.databaseCustom)
.setValue(this.data.databaseFormat)
.onChange(async (value) => {
this.data.databaseFormat = value;
@@ -89,7 +92,7 @@ export class SettingModal extends Modal {
.addOption('none', '')
.addOption('general', i18nConfig.databaseGeneral)
.addOption('next', i18nConfig.databaseNext)
// .addOption('custom', i18nConfig.databaseCustom)
.addOption('custom', i18nConfig.databaseCustom)
.setValue(this.data.databaseFormat)
.onChange(async (value) => {
this.data.databaseFormat = value;
@@ -103,29 +106,28 @@ export class SettingModal extends Modal {
}
// 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.close();
});
}
return button
.setTooltip('Save')
.setIcon('checkmark')
.onClick(async () => {
this.data.saved = true;
this.close();
});
}
);
saveButton.addExtraButton((button) => {
return button
.setTooltip('Cancel')
.setIcon('cross')
.onClick(() => {
this.data.saved = false;
this.close();
});
}
return button
.setTooltip('Cancel')
.setIcon('cross')
.onClick(() => {
this.data.saved = false;
this.close();
});
}
);
}
@@ -135,16 +137,16 @@ export class SettingModal extends Modal {
// Generate content based on the selected value
if (value === 'general') {
nextTabs.createEl('h3', { text: i18nConfig.NotionGeneralSettingHeader });
nextTabs.createEl('h3', {text: i18nConfig.NotionGeneralSettingHeader});
// add full name
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data','databaseFullName')
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')
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')
this.createSettingEl(nextTabs, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.data.tagButton, 'data', 'tagButton')
// add custom title button
@@ -169,112 +171,100 @@ export class SettingModal extends Modal {
// 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')
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')
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
// add database id
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID')
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
} else if (value === 'next') {
nextTabs.createEl('h3', { text: i18nConfig.NotionNextSettingHeader });
nextTabs.createEl('h3', {text: i18nConfig.NotionNextSettingHeader});
// add full name
this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName,'data','databaseFullName')
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')
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')
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
// add database id
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data','databaseID')
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
} 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.data.databaseFullName, 'data','databaseFullName')
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)
// this.updateSettingEl(CustomValuesEl, value)
// await this.plugin.saveSettings();
// await this.plugin.commands.updateCommand();
})
);
// 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 custom values
// const CustomValuesEl = this.createStyleDiv('custom-values', (this.data.CustomTitleButton), nextTabs);
// new Setting(CustomValuesEl)
// .setName(i18nConfig.NotionCustomValues)
// .setDesc(i18nConfig.NotionCustomValuesDesc)
// .addTextArea((text) => {
// return text
// .setPlaceholder(i18nConfig.NotionCustomValuesText)
// .setValue(this.data.CustomValues)
// .onChange(async (value) => {
// this.data.CustomValues = value;
// await this.plugin.saveSettings();
// });
// });
this.createSettingEl(nextTabs, i18nConfig.databaseAbbreviateName, i18nConfig.databaseAbbreviateNameDesc, 'text', i18nConfig.databaseAbbreviateNameText, this.data.databaseAbbreviateName, 'data', 'databaseAbbreviateName')
// add api key
const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton, nextTabs);
this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI,'data', 'notionAPI')
this.createSettingEl(nextTabs, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.data.notionAPI, 'data', 'notionAPI')
// add database id
const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton, nextTabs);
this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
// add custom title name
this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.CustomTitleName, 'data', 'CustomTitleName')
// add new property button
new Setting(nextTabs)
.setName(i18nConfig.NotionCustomValues)
.setDesc(i18nConfig.NotionCustomValuesDesc)
.addButton((button: ButtonComponent) => {
return button
.setTooltip('Add new property')
.setIcon('plus')
.onClick(async () => {
let customModal = new CustomModal(this.app);
customModal.onClose = () => {
this.renderCustomPreview(customModal.properties, nextTabs)
this.data.customProperties = customModal.properties;
}
customModal.open();
});
}
);
}
}
onOpen() {
// add console log to check if the modal is opened
this.display()
}
renderCustomPreview(properties: any[], nextTabs: HTMLElement) {
const previewContainer = nextTabs.createDiv('preview-container');
properties.forEach((property: { customValue: any; customType: any; }) => {
const propertyEl = previewContainer.createEl('div', {cls: 'property-preview'});
propertyEl.createEl('span', {text: `Property: ${property.customValue}, Type: ${property.customType}`});
});
}
// create a function to create a div with a style for pop over elements
public createStyleDiv(className: string, commandValue: boolean = false,parentEl: HTMLElement ) {
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";

4
src/ui/settingTabs.ts
View File

@@ -37,6 +37,7 @@ export interface DatabaseDetails {
tagButton: boolean;
customTitleButton: boolean;
customTitleName: string;
customProperties:{ customValue: string, customType: string }[];
// customValues: string;
saved: boolean;
}
@@ -107,6 +108,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
tagButton: modal.data.tagButton,
customTitleButton: modal.data.customTitleButton,
customTitleName: modal.data.customTitleName,
customProperties: modal.data.customProperties,
// customValues: modal.data.customValues,
saved: modal.data.saved,
}
@@ -271,6 +273,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
tagButton: modal.dataTemp.tagButtonTemp,
customTitleButton: modal.dataTemp.customTitleButtonTemp,
customTitleName: modal.dataTemp.customTitleNameTemp,
customProperties: modal.dataTemp.customPropertiesTemp,
// customValues: modal.data.customValues,
saved: modal.dataTemp.savedTemp,
}
@@ -284,6 +287,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
tagButton: modal.dataPrev.tagButtonPrev,
customTitleButton: modal.dataPrev.customTitleButtonPrev,
customTitleName: modal.dataPrev.customTitleNamePrev,
customProperties: modal.dataPrev.customPropertiesPrev,
// customValues: modal.data.customValues,
saved: modal.dataPrev.savedPrev,
}

4
src/upload/uploadCommand.ts
View File

@@ -100,13 +100,13 @@ export async function uploadCommandCustom(
return;
}
const { markDownData, nowFile, cover, tags ,customValues} = await getNowFileMarkdownContentCustom(app, settings)
const { markDownData, nowFile, cover, customValues} = await getNowFileMarkdownContentCustom(app, dbDetails, settings)
if (markDownData) {
const { basename } = nowFile;
const upload = new Upload2NotionCustom(plugin,dbDetails);
const res = await upload.syncMarkdownToNotionCustom(basename, cover, tags, customValues, markDownData, nowFile, this.app);
const res = await upload.syncMarkdownToNotionCustom(basename, cover, customValues, markDownData, nowFile, this.app);
if (res.status === 200) {
new Notice(`${i18nConfig["sync-success"]}${basename}`);

9
src/upload/upoload_custom/Upload2NotionCustom.ts
View File

@@ -23,7 +23,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
notionID: string,
title: string,
cover: string,
tags: string[],
customValues: Record<string, string>,
childArr: any,
) {
@@ -39,13 +38,12 @@ export class Upload2NotionCustom extends UploadBaseCustom {
cover = databaseCover;
}
return await this.createPage(title, cover, tags, customValues, childArr);
return await this.createPage(title, cover, customValues, childArr);
}
async createPage(
title: string,
cover: string,
tags: string[],
customValues: Record<string, string>,
childArr: any,
) {
@@ -54,7 +52,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
databaseID,
customTitleButton,
customTitleName,
tagButton,
notionAPI
} = this.dbDetails;
@@ -129,7 +126,6 @@ export class Upload2NotionCustom extends UploadBaseCustom {
async syncMarkdownToNotionCustom(
title: string,
cover: string,
tags: string[],
customValues: Record<string, string>,
markdown: string,
nowFile: TFile,
@@ -153,12 +149,11 @@ export class Upload2NotionCustom extends UploadBaseCustom {
notionID,
title,
cover,
tags,
customValues,
file2Block,
);
} else {
res = await this.createPage(title, cover, tags, customValues, file2Block);
res = await this.createPage(title, cover, customValues, file2Block);
}
if (res.status === 200) {
await updateYamlInfo(markdown, nowFile, res, app, this.plugin, this.dbDetails);

22
src/upload/upoload_custom/getMarkdownCustom.ts
View File

@@ -1,28 +1,29 @@
import {App, Notice} from "obsidian";
import {i18nConfig} from "../../lang/I18n";
import {PluginSettings} from "../../ui/settingTabs";
import {DatabaseDetails, PluginSettings} from "../../ui/settingTabs";
export async function getNowFileMarkdownContentCustom(
app: App,
dbDetails: DatabaseDetails,
settings: PluginSettings,
) {
const nowFile = app.workspace.getActiveFile();
let cover = '';
let tags = [];
let customValues: Record<string, string> = {};
let customValues: Record<string, any> = {}; // Change 'any' to a more specific type if possible
const FileCache = app.metadataCache.getFileCache(nowFile);
try {
cover = FileCache.frontmatter.coverurl;
tags = FileCache.frontmatter.tags;
// split the CustomValues into an array
const customValuesNames = settings.CustomValues.split('\n').map(value => value.trim());
// Get custom property names from dbDetails
const customPropertyNames = dbDetails.customProperties.map(property => property.customValue);
// get the custom values from the frontmatter
customValuesNames.forEach(valueName => {
customValues[valueName] = FileCache.frontmatter[valueName];
});
// Extract custom values from the frontmatter based on the names
customPropertyNames.forEach(propertyName => {
if (FileCache.frontmatter[propertyName] !== undefined) {
customValues[propertyName] = FileCache.frontmatter[propertyName];
}
});
} catch (error) {
new Notice(i18nConfig["set-tags-fail"]);
}
@@ -33,7 +34,6 @@ export async function getNowFileMarkdownContentCustom(
markDownData,
nowFile,
cover,
tags,
customValues,
};
} else {