fix: debounce issue in a better way

johannesjo · Dec 21, 2023 · 5d300e1 · 5d300e1
1 parent 5259277
commit 5d300e1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 29 deletions.
diff --git a/src/app/features/config/config-form/config-form.component.ts b/src/app/features/config/config-form/config-form.component.ts
@@ -11,6 +11,7 @@ import { GlobalConfigSectionKey } from '../global-config.model';
 import { ProjectCfgFormKey } from '../../project/project.model';
 import { T } from '../../../t.const';
 import { exists } from '../../../util/exists';
+import { addDebounceToFormlyInputs } from '../../../util/add-debounce-to-formly-inputs';
 
 @Component({
   selector: 'config-form',
@@ -36,9 +37,11 @@ export class ConfigFormComponent {
     this.config = { ...cfg };
   }
 
-  // somehow needed for the form to work
+  // NOTE: updating the input before assigning to local var is somehow needed for the form to work
+  // NOTE2: since we don't have a save button anymore we need to debounce inputs
+
   @Input() set formCfg(val: FormlyFieldConfig[]) {
-    this.fields = val && [...val];
+    this.fields = addDebounceToFormlyInputs(val);
   }
 
   updateCfg(cfg: Record<string, unknown>): void {

diff --git a/src/app/pages/project-settings-page/project-settings-page.component.ts b/src/app/pages/project-settings-page/project-settings-page.component.ts
@@ -24,8 +24,6 @@ import {
   DEFAULT_ISSUE_PROVIDER_CFGS,
   ISSUE_PROVIDER_FORM_CFGS,
 } from '../../features/issue/issue.const';
-import { GLOBAL_CONFIG_FORM_CONFIG } from '../../features/config/global-config-form-config.const';
-import { IS_ELECTRON } from '../../app.constants';
 import {
   WorkContextAdvancedCfg,
   WorkContextThemeCfg,
@@ -45,7 +43,6 @@ export class ProjectSettingsPageComponent implements OnInit, OnDestroy {
   T: typeof T = T;
   projectThemeSettingsFormCfg: ConfigFormSection<WorkContextThemeCfg>;
   issueIntegrationFormCfg: ConfigFormConfig;
-  globalConfigFormCfg: ConfigFormConfig;
   basicFormCfg: ConfigFormSection<Project>;
 
   currentProject?: Project | null;
@@ -64,9 +61,6 @@ export class ProjectSettingsPageComponent implements OnInit, OnDestroy {
     this.projectThemeSettingsFormCfg = WORK_CONTEXT_THEME_CONFIG_FORM_CONFIG;
     this.issueIntegrationFormCfg = ISSUE_PROVIDER_FORM_CFGS;
     this.basicFormCfg = BASIC_PROJECT_CONFIG_FORM_CONFIG;
-    this.globalConfigFormCfg = GLOBAL_CONFIG_FORM_CONFIG.filter(
-      (cfg) => IS_ELECTRON || !cfg.isElectronOnly,
-    );
   }
 
   ngOnInit(): void {

diff --git a/src/app/pages/tag-settings-page/tag-settings-page.component.ts b/src/app/pages/tag-settings-page/tag-settings-page.component.ts
@@ -7,13 +7,10 @@ import {
 } from '@angular/core';
 import { T } from '../../t.const';
 import {
-  ConfigFormConfig,
   ConfigFormSection,
   GlobalConfigSectionKey,
 } from '../../features/config/global-config.model';
 import { Subscription } from 'rxjs';
-import { GLOBAL_CONFIG_FORM_CONFIG } from '../../features/config/global-config-form-config.const';
-import { IS_ELECTRON } from '../../app.constants';
 import {
   WorkContext,
   WorkContextAdvancedCfg,
@@ -37,7 +34,6 @@ import { isObject } from '../../util/is-object';
 export class TagSettingsPageComponent implements OnInit, OnDestroy {
   T: typeof T = T;
   tagThemeSettingsFormCfg: ConfigFormSection<WorkContextThemeCfg>;
-  globalConfigFormCfg: ConfigFormConfig;
   basicFormCfg: ConfigFormSection<Tag>;
 
   activeWorkContext: WorkContext | null = null;
@@ -54,9 +50,6 @@ export class TagSettingsPageComponent implements OnInit, OnDestroy {
     // somehow they are only unproblematic if assigned here
     this.tagThemeSettingsFormCfg = WORK_CONTEXT_THEME_CONFIG_FORM_CONFIG;
     this.basicFormCfg = BASIC_TAG_CONFIG_FORM_CONFIG;
-    this.globalConfigFormCfg = GLOBAL_CONFIG_FORM_CONFIG.filter(
-      (cfg) => IS_ELECTRON || !cfg.isElectronOnly,
-    );
   }
 
   ngOnInit(): void {

diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts
@@ -208,20 +208,6 @@ const OTHER_3RD_PARTY_MODS_WITHOUT_CFG = [
     FormsModule,
     ReactiveFormsModule,
     FormlyModule.forChild({
-      extensions: [
-        {
-          name: 'defaultOptions',
-          extension: {
-            prePopulate: (field) => {
-              if (field.key && !field.modelOptions && field.type === 'input') {
-                field.modelOptions = {
-                  debounce: { default: 1500 },
-                };
-              }
-            },
-          },
-        },
-      ],
       types: [
         { name: 'link', component: FormlyLinkWidgetComponent },
         {

diff --git a/src/app/util/add-debounce-to-formly-inputs.ts b/src/app/util/add-debounce-to-formly-inputs.ts
@@ -0,0 +1,20 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+
+export const addDebounceToFormlyInputs = (
+  items: FormlyFieldConfig[],
+): FormlyFieldConfig[] => {
+  return items.map((item) => {
+    if (item.type === 'input') {
+      return {
+        ...item,
+        modelOptions: {
+          ...item.modelOptions,
+          debounce: {
+            default: 1500,
+          },
+        },
+      };
+    }
+    return item;
+  });
+};