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

finish the edit modal

Browse Source
This commit is contained in:
Jiaxin Peng
2024-07-04 20:28:28 +01:00
parent d8eb3c8984
commit bfde5dfe1a
3 changed files with 68 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/EditModal.ts
View File

@@ -5,6 +5,7 @@ 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
[key: string]: any; // Index signature [key: string]: any; // Index signature
dataTemp: Record<string, any> = { dataTemp: Record<string, any> = {
databaseFormatTemp: '', databaseFormatTemp: '',
@@ -132,6 +133,8 @@ export class EditModal extends SettingModal {
.onClick(async () => { .onClick(async () => {
this.dataTemp.savedTempInd = true; this.dataTemp.savedTempInd = true;
this.dataTemp.savedTemp = true; this.dataTemp.savedTemp = true;
console.log(this.dataTemp);
console.log(this.dataPrev);
this.close(); this.close();
}); });
} }
@@ -321,38 +324,17 @@ export class EditModal extends SettingModal {
.setTooltip("Delete") .setTooltip("Delete")
.setIcon("trash") .setIcon("trash")
.onClick(() => { .onClick(() => {
console.log('Deleting property', properties[propertyIndex]);
this.deleteProperty(propertyIndex, properties); this.deleteProperty(propertyIndex, properties);
}); });
}); });
} }
}
createPropertyLine(containerEl: HTMLElement, properties: customProperty[]) {
super.createPropertyLine(containerEl, properties);
}
deleteProperty(propertyIndex: number, properties: customProperty[]) {
let actualIndex = properties.findIndex(p => p.index === propertyIndex);
if (actualIndex > 0) {
properties.splice(actualIndex, 1);
this.propertyLines[actualIndex].settingEl.remove();
this.propertyLines.splice(actualIndex, 1);
properties.forEach((prop, idx) => {
prop.index = idx;
});
this.propertyLines.push(propertyLine);
this.updatePropertyLines(); this.updatePropertyLines();
}
}
updatePropertyLines() {
this.propertyLines.forEach((line, idx) => {
line.setName(idx === 0 ? i18nConfig.CustomPropertyFirstColumn : `${i18nConfig.CustomProperty} ${idx}`);
});
} }
createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement { createStyleDiv(className: string, commandValue: boolean = false, parentEl: HTMLElement): HTMLDivElement {
return super.createStyleDiv(className, commandValue, parentEl); return super.createStyleDiv(className, commandValue, parentEl);
} }

70
src/ui/settingModal.ts
View File

@@ -1,19 +1,22 @@
import { import {
Modal, Modal,
Setting, Setting,
PluginSettingTab,
ButtonComponent, App ButtonComponent, App
} from 'obsidian'; } from 'obsidian';
import {i18nConfig} from "../lang/I18n"; import { i18nConfig } from "../lang/I18n";
import ObsidianSyncNotionPlugin from "../main"; import ObsidianSyncNotionPlugin from "../main";
import {DatabaseDetails, ObsidianSettingTab} from "./settingTabs"; import { DatabaseDetails, ObsidianSettingTab } from "./settingTabs";
// import {CustomModal} from "./CustomModal";
export interface customProperty {
customName: string;
customType: string;
index: number;
}
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 , index: number}[] = []; // Array to store property values and types properties: customProperty[] = []; // 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',
@@ -56,7 +59,7 @@ export class SettingModal extends Modal {
this.titleEl.setText('Add new database'); this.titleEl.setText('Add new database');
// create the dropdown button to select the database format // create the dropdown button to select the database format
let {contentEl} = this; let { contentEl } = this;
contentEl.empty(); contentEl.empty();
const settingDiv = contentEl.createDiv('setting-div'); const settingDiv = contentEl.createDiv('setting-div');
@@ -80,7 +83,7 @@ export class SettingModal extends Modal {
}); });
// Initialize content based on the current dropdown value // Initialize content based on the current dropdown value
(this.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs); (this.data.saved) ? this.updateContentBasedOnSelection(this.data.databaseFormat, nextTabs) : this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs);
}); });
@@ -105,7 +108,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.data.customProperties = this.properties;
this.close(); this.close();
}); });
} }
@@ -118,7 +121,7 @@ export class SettingModal extends Modal {
// Generate content based on the selected value // Generate content based on the selected value
if (value === 'general') { if (value === 'general') {
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.data.databaseFullName, 'data', 'databaseFullName') this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
@@ -139,7 +142,6 @@ export class SettingModal extends Modal {
.setValue(this.data.customTitleButton) .setValue(this.data.customTitleButton)
.onChange(async (value) => { .onChange(async (value) => {
this.data.customTitleButton = value; this.data.customTitleButton = value;
this.updateSettingEl(CustomNameEl, value) this.updateSettingEl(CustomNameEl, value)
}) })
@@ -160,7 +162,7 @@ export class SettingModal extends Modal {
} else if (value === 'next') { } else if (value === 'next') {
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.data.databaseFullName, 'data', 'databaseFullName') this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
@@ -177,7 +179,7 @@ export class SettingModal extends Modal {
} 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.data.databaseFullName, 'data', 'databaseFullName') this.createSettingEl(nextTabs, i18nConfig.databaseFullName, i18nConfig.databaseFullNameDesc, 'text', i18nConfig.databaseFullNameText, this.data.databaseFullName, 'data', 'databaseFullName')
@@ -197,16 +199,15 @@ export class SettingModal extends Modal {
.setDesc(i18nConfig.NotionCustomValuesDesc) .setDesc(i18nConfig.NotionCustomValuesDesc)
.addButton((button: ButtonComponent) => { .addButton((button: ButtonComponent) => {
return button return button
.setTooltip('Add new property') .setTooltip('Add one more property')
.setIcon('plus') .setButtonText('Add New Property')
.onClick(async () => { .onClick(async () => {
const customTabs = nextTabs.createDiv("custom-tabs"); const customTabs = nextTabs.createDiv("custom-tabs");
this.createPropertyLine(customTabs); this.createPropertyLine(customTabs, this.properties);
}); });
} }
); );
} }
} }
@@ -215,23 +216,22 @@ export class SettingModal extends Modal {
this.display() this.display()
} }
createPropertyLine(containerEl: HTMLElement): void { createPropertyLine(containerEl: HTMLElement, properties: customProperty[]): void {
const propertyIndex = this.properties.length; const propertyIndex = properties.length;
this.properties.push({customName: "", customType: "", index: propertyIndex}); 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 => {
let actualIndex = this.properties.findIndex(p => p.index === propertyIndex); let actualIndex = properties.findIndex(p => p.index === propertyIndex);
if (actualIndex !== -1) { if (actualIndex !== -1) {
this.properties[actualIndex].customName = value; properties[actualIndex].customName = value;
} }
}); });
}); });
@@ -258,8 +258,7 @@ export class SettingModal extends Modal {
// 'last_edited_by': 'Last Edited By', // 'last_edited_by': 'Last Edited By',
}; };
// Use a reference to the current property object const currentProperty = properties[propertyIndex];
const currentProperty = this.properties[propertyIndex];
if (propertyIndex === 0) { if (propertyIndex === 0) {
dropdown.addOption("title", "Title"); dropdown.addOption("title", "Title");
@@ -273,7 +272,7 @@ export class SettingModal extends Modal {
if (currentProperty) { if (currentProperty) {
currentProperty.customType = value; currentProperty.customType = value;
// Retrieve the index of currentProperty from the properties array // Retrieve the index of currentProperty from the properties array
const updatedIndex = this.properties.findIndex(p => p === currentProperty); const updatedIndex = properties.findIndex(p => p === currentProperty);
console.log(`Updated value at index ${updatedIndex}: ${value}`); console.log(`Updated value at index ${updatedIndex}: ${value}`);
} else { } else {
console.log("Property not found, may have been deleted."); console.log("Property not found, may have been deleted.");
@@ -288,32 +287,29 @@ export class SettingModal extends Modal {
.setTooltip("Delete") .setTooltip("Delete")
.setIcon("trash") .setIcon("trash")
.onClick(() => { .onClick(() => {
this.deleteProperty(propertyIndex); this.deleteProperty(propertyIndex, properties);
}); });
}); });
} }
this.propertyLines.push(propertyLine); this.propertyLines.push(propertyLine);
this.updatePropertyLines(); // Ensure property lines are updated after creation
} }
deleteProperty(propertyIndex: number) { deleteProperty(propertyIndex: number, properties: customProperty[]): void {
let actualIndex = this.properties.findIndex(p => p.index === propertyIndex); let actualIndex = properties.findIndex(p => p.index === propertyIndex);
if (actualIndex !== -1) { if (actualIndex !== -1) {
this.properties.splice(actualIndex, 1); properties.splice(actualIndex, 1);
if (this.propertyLines[actualIndex]) {
this.propertyLines[actualIndex].settingEl.remove(); this.propertyLines[actualIndex].settingEl.remove();
this.propertyLines.splice(actualIndex, 1); this.propertyLines.splice(actualIndex, 1);
}
// Update indices in the properties array // Update indices in the properties array
this.properties.forEach((prop, idx) => { properties.forEach((prop, idx) => {
prop.index = idx; prop.index = idx;
}); });
this.updatePropertyLines(); this.updatePropertyLines();
console.log("Updated indices after deletion:");
this.properties.forEach((prop, idx) => {
console.log(`Index ${idx}: ${prop.index}`);
});
} }
} }

7
src/ui/settingTabs.ts
View File

@@ -88,9 +88,6 @@ export class ObsidianSettingTab extends PluginSettingTab {
this.createSettingEl(containerEl, i18nConfig.NotionLinkDisplay, i18nConfig.NotionLinkDisplayDesc, 'toggle', i18nConfig.NotionLinkDisplay, this.plugin.settings.NotionLinkDisplay, 'NotionLinkDisplay') this.createSettingEl(containerEl, i18nConfig.NotionLinkDisplay, i18nConfig.NotionLinkDisplayDesc, 'toggle', i18nConfig.NotionLinkDisplay, this.plugin.settings.NotionLinkDisplay, 'NotionLinkDisplay')
// TODO: add toggle to enable or disable link display
// add new button // add new button
new Setting(containerEl) new Setting(containerEl)
@@ -275,7 +272,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
} }
} }
modal.open(); modal.open ();
}); });
}); });
@@ -291,6 +288,8 @@ export class ObsidianSettingTab extends PluginSettingTab {
if (modal.data.deleted) { if (modal.data.deleted) {
this.plugin.deleteDatabaseDetails(dbDetails); this.plugin.deleteDatabaseDetails(dbDetails);
console.log(dbDetails.fullName + " deleted");
this.plugin.commands.updateCommand(); this.plugin.commands.updateCommand();
this.display() this.display()