refactor: extract duplicate functions to utils

Author: SerVitasik

adminforth/spa/src/components/Filters.vue

@@ -153,14 +153,13 @@
 import { watch, computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions } from '@/utils';
+import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
 import { useRouter } from 'vue-router';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import { useFiltersStore } from '@/stores/filters';
 import { getCustomComponent } from '@/utils';
 import Input from '@/afcl/Input.vue';
 import Select from '@/afcl/Select.vue';
-import debounce from 'debounce';
 import Spinner from '@/afcl/Spinner.vue';
 
 const filtersStore = useFiltersStore();
@@ -259,21 +258,11 @@ const onFilterInput = computed(() => {
 });
 
 const onSearchInput = computed(() => {
-  if (!props.columns) return {};
-
-  const result = props.columns.reduce((acc, c) => {
-    if (c.foreignResource && c.foreignResource.searchableFields) {
-      return {
-        ...acc,
-        [c.name]: debounce((searchTerm) => {
-          searchOptions(c.name, searchTerm);
-        }, c.filterOptions?.debounceTimeMs || 300),
-      };
-    }
-    return acc;
-  }, {});
-  
-  return result;
+  return createSearchInputHandlers(
+    props.columns,
+    searchOptions,
+    (column) => column.filterOptions?.debounceTimeMs || 300
+  );
 });
 
 function setFilterItem({ column, operator, value }) {

adminforth/spa/src/components/ResourceForm.vue

@@ -63,15 +63,14 @@
 
 <script setup lang="ts">
 
-import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions} from '@/utils';
+import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers} from '@/utils';
 import { computedAsync } from '@vueuse/core';
 import { computed, onMounted, reactive, ref, watch, provide } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthResourceCommon } from '@/types/Common';
-import debounce from 'debounce';
 
 const { t } = useI18n();
 
@@ -356,21 +355,10 @@ const getOtherColumns = () => {
 const otherColumns = getOtherColumns();
 
 const onSearchInput = computed(() => {
-  if (!props.resource.columns) return {};
-
-  const result = props.resource.columns.reduce((acc, c) => {
-    if (c.foreignResource && c.foreignResource.searchableFields) {
-      return {
-        ...acc,
-        [c.name]: debounce((searchTerm: string) => {
-          searchOptions(c.name, searchTerm);
-        }, 300),
-      };
-    }
-    return acc;
-  }, {} as Record<string, (searchTerm: string) => void>);
-  
-  return result;
+  return createSearchInputHandlers(
+    props.resource.columns,
+    searchOptions
+  );
 });
 
 provide('columnLoadingState', columnLoadingState);

adminforth/spa/src/utils.ts

@@ -7,6 +7,7 @@ import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
 import sanitizeHtml  from 'sanitize-html'
+import debounce from 'debounce';
 
 const LS_LANG_KEY = `afLanguage`;
 
@@ -393,4 +394,25 @@ export async function searchForeignOptions({
   } finally {
     state.loading = false;
   }
+}
+
+export function createSearchInputHandlers(
+  columns: any[],
+  searchFunction: (columnName: string, searchTerm: string) => void,
+  getDebounceMs?: (column: any) => number
+) {
+  if (!columns) return {};
+
+  return columns.reduce((acc, c) => {
+    if (c.foreignResource && c.foreignResource.searchableFields) {
+      const debounceMs = getDebounceMs ? getDebounceMs(c) : 300;
+      return {
+        ...acc,
+        [c.name]: debounce((searchTerm: string) => {
+          searchFunction(c.name, searchTerm);
+        }, debounceMs),
+      };
+    }
+    return acc;
+  }, {} as Record<string, (searchTerm: string) => void>);
 }