complete the setting ui

src/ui/settingTabs.ts

@@ -53,35 +53,13 @@ export class ObsidianSettingTab extends PluginSettingTab {
         // General Settings
         containerEl.createEl('h2', { text: i18nConfig.GeneralSetting });
 
-        new Setting(containerEl)
+        this.createSettingEl(containerEl, i18nConfig.BannerUrl, i18nConfig.BannerUrlDesc, 'text', i18nConfig.BannerUrlText, this.plugin.settings.bannerUrl)
-            .setName(i18nConfig.BannerUrl)
-            .setDesc(i18nConfig.BannerUrlDesc)
-            .addText((text) =>
-                text
-                    .setPlaceholder(i18nConfig.BannerUrlText)
-                    .setValue(this.plugin.settings.bannerUrl)
-                    .onChange(async (value) => {
-                        this.plugin.settings.bannerUrl = value;
-                        await this.plugin.saveSettings();
-                    })
-            );
 
-
+        this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser)
-        new Setting(containerEl)
-            .setName(i18nConfig.NotionUser)
-            .setDesc(i18nConfig.NotionUserDesc)
-            .addText((text) =>
-                text
-                    .setPlaceholder(i18nConfig.NotionUserText)
-                    .setValue(this.plugin.settings.notionUser)
-                    .onChange(async (value) => {
-                        this.plugin.settings.notionUser = value;
-                        await this.plugin.saveSettings();
-                    })
-            );
 
         containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader })
 
+
         new Setting(containerEl)
             .setName(i18nConfig.NotionNextButton)
             .setDesc(i18nConfig.NotionNextButtonDesc)
@@ -90,61 +68,22 @@ export class ObsidianSettingTab extends PluginSettingTab {
                     .setValue(this.plugin.settings.NextButton)
                     .onChange(async (value) => {
                         this.plugin.settings.NextButton = value;
-                        await this.plugin.saveSettings();
-                        await this.plugin.commands.updateCommand();
 
-                        // Clear existing components
+                        this.updateSettingEl(notionAPINextEl, value)
-                        notionAPINextEl.empty();
-                        databaseIDNextEl.empty();
-
-                        if (value) {
-                            new Setting(notionAPINextEl)
-                                .setName(i18nConfig.NotionAPI)
-                                .setDesc(i18nConfig.NotionAPIDesc)
-                                .addText((text) => {
-                                    text.inputEl.type = 'password';
-                                    return text
-                                        .setPlaceholder(i18nConfig.NotionAPIText)
-                                        .setValue(this.plugin.settings.notionAPINext)
-                                        .onChange(async (value) => {
-                                            this.plugin.settings.notionAPINext = value;
-                                            await this.plugin.saveSettings();
-                                        })
-                                });
-
-							this.updateSettingEl(notionAPINextEl, value);
-
-                            new Setting(databaseIDNextEl)
-                                .setName(i18nConfig.DatabaseID)
-                                .setDesc(i18nConfig.NotionAPIDesc)
-                                .addText((text) => {
-                                    text.inputEl.type = 'password';
-                                    return text
-                                        .setPlaceholder(i18nConfig.DatabaseIDText)
-                                        .setValue(this.plugin.settings.databaseIDNext)
-                                        .onChange(async (value) => {
-                                            this.plugin.settings.databaseIDNext = value;
-                                            await this.plugin.saveSettings();
-                                        })
-                                }
-                                );
 
                         this.updateSettingEl(databaseIDNextEl, value)
 
-                        } else {
+                        await this.plugin.saveSettings();
-							this.updateSettingEl(notionAPINextEl, false)
+                        await this.plugin.commands.updateCommand();
-							this.updateSettingEl(databaseIDNextEl, false);
-                        }
                     })
             );
 
-        const notionAPINextEl = this.createStyleDiv('api-next')
 
-        const databaseIDNextEl = this.createStyleDiv('databaseID-next')
+        const notionAPINextEl = this.createStyleDiv('api-next', this.plugin.settings.NextButton)
+        this.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext)
 
-
+        const databaseIDNextEl = this.createStyleDiv('databaseID-next', this.plugin.settings.NextButton)
-
+        this.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext)
-        // notionDatabaseID.controlEl.querySelector('input').type='password'
 
 
         // General Database Settings
@@ -160,15 +99,19 @@ export class ObsidianSettingTab extends PluginSettingTab {
                     .setValue(this.plugin.settings.GeneralButton)
                     .onChange(async (value) => {
                         this.plugin.settings.GeneralButton = value;
+
+                        this.updateSettingEl(CustomTitleEl, value)
+                        this.updateSettingEl(notionAPIGeneralEl, value)
+                        this.updateSettingEl(databaseIDGeneralEl, value)
+
+
                         await this.plugin.saveSettings();
                         await this.plugin.commands.updateCommand();
 
-                        // Clear existing components
+                    })
-                        CustomTitleEl.empty();
+            );
-                        notionAPIGeneralEl.empty();
-                        databaseIDGeneralEl.empty();
 
-                        if (value) {
+        const CustomTitleEl = this.createStyleDiv('custom-title', this.plugin.settings.GeneralButton);
         new Setting(CustomTitleEl)
             .setName(i18nConfig.NotionCustomTitle)
             .setDesc(i18nConfig.NotionCustomTitleDesc)
@@ -177,84 +120,16 @@ export class ObsidianSettingTab extends PluginSettingTab {
                     .setValue(this.plugin.settings.CustomTitleButton)
                     .onChange(async (value) => {
                         this.plugin.settings.CustomTitleButton = value;
-                                            await this.plugin.saveSettings();
-                                            await this.plugin.commands.updateCommand();
 
-                                            // Clear existing components
-                                            CustomNameEl.empty();
-
-                                            // Add new components based on the toggle value
-                                            if (this.plugin.settings.CustomTitleButton) {
-                                                new Setting(CustomNameEl)
-                                                    .setName(i18nConfig.NotionCustomTitleName)
-                                                    .setDesc(i18nConfig.NotionCustomTitleNameDesc)
-                                                    .addText((text) =>
-                                                        text
-                                                            .setPlaceholder(i18nConfig.NotionCustomTitleText)
-                                                            .setValue(this.plugin.settings.CustomTitleName)
-                                                            .onChange(async (value) => {
-                                                                this.plugin.settings.CustomTitleName = value;
-                                                                await this.plugin.saveSettings();
-                                                                await this.plugin.commands.updateCommand();
-
-                                                                // Clear existing components
-                                                                CustomTitleEl.empty();
-                                                            })
-                                                    );
                         this.updateSettingEl(CustomNameEl, value)
-                                            } else {
-                                            this.updateSettingEl(CustomNameEl, false);
-											}
-                                        })
-                                );
 
-							this.updateSettingEl(CustomTitleEl, value);
-
-                            new Setting(notionAPIGeneralEl)
-                                .setName(i18nConfig.NotionAPI)
-                                .setDesc(i18nConfig.NotionAPIDesc)
-                                .addText((text) => {
-                                    text.inputEl.type = 'password';
-                                    return text
-                                        .setPlaceholder(i18nConfig.NotionAPIText)
-                                        .setValue(this.plugin.settings.notionAPIGeneral)
-                                        .onChange(async (value) => {
-                                            this.plugin.settings.notionAPIGeneral = value;
                         await this.plugin.saveSettings();
-                                        })
+                        await this.plugin.commands.updateCommand();
-                                });
-
-							this.updateSettingEl(notionAPIGeneralEl, value);
-
-
-                            new Setting(databaseIDGeneralEl)
-                                .setName(i18nConfig.DatabaseID)
-                                .setDesc(i18nConfig.NotionAPIDesc)
-                                .addText((text) => {
-                                    text.inputEl.type = 'password';
-                                    return text
-                                        .setPlaceholder(i18nConfig.NotionIDText)
-                                        .setValue(this.plugin.settings.databaseIDGeneral)
-                                        .onChange(async (value) => {
-                                            this.plugin.settings.databaseIDGeneral = value;
-                                            await this.plugin.saveSettings();
-                                        })
-                                }
-                                );
-
-							this.updateSettingEl(databaseIDGeneralEl, value);
-
-                        } else {
-							this.updateSettingEl(CustomTitleEl, false);
-							this.updateSettingEl(notionAPIGeneralEl, false);
-							this.updateSettingEl(databaseIDGeneralEl, false);
-                        }
                     })
             );
 
-		const CustomTitleEl = this.createStyleDiv('custom-title');
+        const CustomNameEl = this.createStyleDiv('custom-name', this.plugin.settings.CustomTitleButton);
-
+        this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.plugin.settings.CustomTitleName)
-		const CustomNameEl = this.createStyleDiv('custom-name');
 
         // new Setting(containerEl)
         // .setName("Convert tags(optional)")
@@ -268,9 +143,12 @@ export class ObsidianSettingTab extends PluginSettingTab {
         // 		})
         // );
 
-		const notionAPIGeneralEl = this.createStyleDiv('api-general');
+        const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton);
+        this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPIGeneral)
 
-		const databaseIDGeneralEl = this.createStyleDiv('databaseID-general');
+
+        const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton);
+        this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDGeneral)
 
         // Custom Database Settings
 
@@ -290,16 +168,21 @@ export class ObsidianSettingTab extends PluginSettingTab {
     }
 
     // create a function to create a div with a style for pop over elements
-	private createStyleDiv(className: string | DomElementInfo) {
+    private createStyleDiv(className: string, commandValue: boolean = false) {
         return this.containerEl.createDiv(className, (div) => {
-			div.style.alignItems = "center";
+            this.updateSettingEl(div, commandValue);
-			div.style.borderTop = "none";
-			div.style.paddingBottom = "0";
         });
     }
+    // update the setting display style in the setting tab
+    private 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.
-	private createSettingEl(containerEl: HTMLElement, name: string, desc: string, type:string, placeholder: string, setvalue: any) {
+    private createSettingEl(containerEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any) {
         if (type === 'password') {
             return new Setting(containerEl)
                 .setName(name)
@@ -308,9 +191,9 @@ export class ObsidianSettingTab extends PluginSettingTab {
                     text.inputEl.type = type;
                     return text
                         .setPlaceholder(placeholder)
-						.setValue(setvalue)
+                        .setValue(holderValue)
                         .onChange(async (value) => {
-							setvalue = value;
+                            holderValue = value;
                             await this.plugin.saveSettings();
                         })
                 }
@@ -321,9 +204,9 @@ export class ObsidianSettingTab extends PluginSettingTab {
                 .setDesc(desc)
                 .addToggle((toggle) =>
                     toggle
-						.setValue(setvalue)
+                        .setValue(holderValue)
                         .onChange(async (value) => {
-							setvalue = value;
+                            holderValue = value;
                             await this.plugin.saveSettings();
                             await this.plugin.commands.updateCommand();
                         })
@@ -335,9 +218,9 @@ export class ObsidianSettingTab extends PluginSettingTab {
                 .addText((text) =>
                     text
                         .setPlaceholder(placeholder)
-						.setValue(setvalue)
+                        .setValue(holderValue)
                         .onChange(async (value) => {
-							setvalue = value;
+                            holderValue = value;
                             await this.plugin.saveSettings();
                             await this.plugin.commands.updateCommand();
                         })
@@ -345,9 +228,4 @@ export class ObsidianSettingTab extends PluginSettingTab {
         }
     }
 
-	// update the setting display style in the setting tab
-	private updateSettingEl(element: HTMLElement, value: boolean) {
-		element.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
-		element.style.paddingTop = value ? "0.75em" : "0";
-    }
 }

src/upload/upload_general/Upload2NotionGeneral.ts

@@ -43,7 +43,7 @@ export class Upload2NotionGeneral extends UploadBaseGeneral {
 		title: string,
 		cover: string,
 		tags: string[],
-		childArr: any
+		childArr: any,
 	) {
 		const bodyString: any = {
 			parent: {