refactor: global filters watch selection

spraakbanken · Jan 30, 2025 · 1311e4e · 1311e4e
1 parent 49b2a5e
commit 1311e4e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/app/scripts/global-filter/global-filter-service.ts b/app/scripts/global-filter/global-filter-service.ts
@@ -15,7 +15,7 @@ import { RecursiveRecord } from "@/backend/types/attr-values"
 import { Attribute } from "@/settings/config.types"
 
 export type GlobalFilterService = {
-    valueChange: () => void
+    initialize: () => void
 }
 
 type StoredFilterValues = Record<string, string[]>
@@ -160,30 +160,43 @@ angular.module("korpApp").factory("globalFilterService", [
             }
         }
 
-        /** Update available filters when changing corpus selection. */
-        $rootScope.$on("corpuschooserchange", () => {
-            if (settings.corpusListing.selected.length > 0) {
-                const filters = settings.corpusListing.getDefaultFilters()
-                initFilters(filters)
-                setFromLocation($location.search().global_filter)
-                getData()
-                updateLocation()
-            }
-            // Flag that the filter feature is ready.
-            $rootScope.globalFilterDef.resolve()
-        })
+        function initialize() {
+            /** Update available filters when changing corpus selection. */
+            $rootScope.$on("corpuschooserchange", () => {
+                if (settings.corpusListing.selected.length > 0) {
+                    const filters = settings.corpusListing.getDefaultFilters()
+                    initFilters(filters)
+                    setFromLocation($location.search().global_filter)
+                    getData()
+                    updateLocation()
+                }
+                // Flag that the filter feature is ready.
+                $rootScope.globalFilterDef.resolve()
+            })
+
+            /** Set up sync from url params to local data. */
+            $rootScope.$watch(
+                () => $location.search().global_filter,
+                (filter) => setFromLocation(filter)
+            )
 
-        /** Set up sync from url params to local data. */
-        $rootScope.$watch(
-            () => $location.search().global_filter,
-            (filter) => setFromLocation(filter)
-        )
+            $rootScope.$watch(
+                "globalFilterData",
+                (filterData: RootScope["globalFilterData"], filterDataOld?: RootScope["globalFilterData"]) => {
+                    // Only watch selection changes
+                    const values = _.mapValues(filterData, (filter) => filter.value)
+                    const valuesOld = _.mapValues(filterDataOld, (filter) => filter.value)
+                    if (!_.isEqual(values, valuesOld)) {
+                        updateLocation()
+                        getData()
+                    }
+                },
+                true
+            )
+        }
 
         return {
-            valueChange() {
-                updateLocation()
-                updateData()
-            },
+            initialize,
         }
     },
 ])
diff --git a/app/scripts/global-filter/global-filter.ts b/app/scripts/global-filter/global-filter.ts
@@ -7,13 +7,12 @@ import "./global-filter-service"
 import { LangString } from "@/i18n/types"
 import { RootScope } from "@/root-scope.types"
 import { Attribute } from "@/settings/config.types"
-import { GlobalFilterService } from "./global-filter-service"
 
 type GlobalFilterController = IController & {
-    attr: string
     attrDef: Attribute
     attrValue: string[]
     options: [string, number][]
+    onChange: (args: { selected: string[] }) => void
 }
 
 type GlobalFilterScope = IScope & {
@@ -79,16 +78,15 @@ angular.module("korpApp").component("globalFilter", {
         </div>
     </span>`,
     bindings: {
-        attr: "<",
         attrDef: "<",
         attrValue: "<",
         options: "<",
+        onChange: "&",
     },
     controller: [
         "$rootScope",
         "$scope",
-        "globalFilterService",
-        function ($rootScope: RootScope, $scope: GlobalFilterScope, globalFilterService: GlobalFilterService) {
+        function ($rootScope: RootScope, $scope: GlobalFilterScope) {
             const $ctrl = this as GlobalFilterController
             // if scope.options.length > 20
             //     # TODO enable autocomplete
@@ -107,12 +105,11 @@ angular.module("korpApp").component("globalFilter", {
 
             $scope.toggleSelected = function (value, event) {
                 if ($scope.isSelected(value)) {
-                    _.pull($ctrl.attrValue, value)
+                    $ctrl.onChange({ selected: $ctrl.attrValue.filter((v) => v !== value) })
                 } else {
-                    $ctrl.attrValue.push(value)
+                    $ctrl.onChange({ selected: [...$ctrl.attrValue, value] })
                 }
                 event.stopPropagation()
-                globalFilterService.valueChange()
             }
 
             $scope.isSelected = (value: string) => $ctrl.attrValue.includes(value)

diff --git a/app/scripts/global-filter/global-filters.ts b/app/scripts/global-filter/global-filters.ts
@@ -1,5 +1,5 @@
 /** @format */
-import angular, { IScope } from "angular"
+import angular, { IController, IScope } from "angular"
 import _ from "lodash"
 import { html } from "@/util"
 import "./global-filter-service"
@@ -8,6 +8,7 @@ import { RootScope } from "@/root-scope.types"
 import { GlobalFilterService } from "./global-filter-service"
 
 type GlobalFiltersScope = IScope & {
+    setSelected: (attr: string, selected: string[]) => void
     show: boolean
 }
 
@@ -21,6 +22,7 @@ angular.module("korpApp").component("globalFilters", {
                     attr-def="filter.attribute"
                     attr-value="filter.value"
                     options="filter.options"
+                    on-change="setSelected(attr, selected)"
                 ></global-filter>
                 <span ng-if="!$last">{{"and" | loc:$root.lang}}</span>
             </span>
@@ -32,6 +34,15 @@ angular.module("korpApp").component("globalFilters", {
         "$scope",
         "globalFilterService",
         function ($rootScope: RootScope, $scope: GlobalFiltersScope, globalFilterService: GlobalFilterService) {
+            const $ctrl = this as IController
+            $ctrl.$onInit = () => {
+                globalFilterService.initialize()
+            }
+
+            $scope.setSelected = (attr, selected) => {
+                $rootScope.globalFilterData[attr].value = selected
+            }
+
             $rootScope.$watch(
                 "globalFilterData",
                 () => {