Merge branch '149-improve-content-discoverability-with-dynamic-empty-…

…state-cta-s-2' into 'main' improve content discoverability with dynamic empty state CTA's See merge request decidim/decidim-module-geo!143
octree-gva · Oct 16, 2024 · 5de8c98 · 5de8c98
2 parents 0bacb67 + cfca307
commit 5de8c98
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 32 deletions.
diff --git a/app/cells/decidim/geo/content_blocks/geo_maps_cell.rb b/app/cells/decidim/geo/content_blocks/geo_maps_cell.rb
@@ -113,8 +113,8 @@ def geo_i18n
             "decidim_geo.filters.type.meetings": t("decidim.geo.filters.type.only_meetings"),
             "decidim_geo.filters.type.debates": t("decidim.geo.filters.type.only_debates"),
             "decidim_geo.filters.type.accountability": t("decidim.geo.filters.type.only_accountabilities"),
-            "decidim_geo.filters.empty_message": t("decidim.geo.filters.empty.message"),
-            "decidim_geo.filters.empty_reset_button": t("decidim.geo.filters.empty.reset_button"),
+            "decidim_geo.filters.empty.message": t("decidim.geo.filters.empty.message"),
+            "decidim_geo.filters.empty.update_button": t("decidim.geo.filters.empty.update_button"),
             "decidim_geo.actions.view": t("decidim.geo.actions.view")
           }
         end

diff --git a/app/packs/src/decidim/geo/stores/dropdownFilterStore.js b/app/packs/src/decidim/geo/stores/dropdownFilterStore.js
@@ -145,7 +145,11 @@ const store = createStore(
     },
     close() {
       set(() => ({ isOpen: false }));
+    },
+    open() {
+      set(() => ({ isOpen: true }));
     }
+
   }))
 );
 

diff --git a/app/packs/src/decidim/geo/stores/pointStore.js b/app/packs/src/decidim/geo/stores/pointStore.js
@@ -34,14 +34,15 @@ const store = createStore(
     isLoading: 0,
     _lastFilter: "",
     _lastResponse: [],
+    lastResponseCount: 0,
     fetchesRunning: 0,
     scopeForId: (scopeId) => {
       const scope = get().scopes.find(({ data }) => `${data.id}` === `${scopeId}`);
       if (!scope || scope.isEmpty()) return null;
       return scope;
     },
     clearCache: () => {
-      set(() => ({ _lastFilter: "", _lastResponse: [] }));
+      set(() => ({ _lastFilter: "", _lastResponse: [], lastResponseCount: 0 }));
     },
     addProcess: () => {
       set(({ isLoading }) => ({ isLoading: isLoading + 1 }));
@@ -72,13 +73,14 @@ const store = createStore(
           return geoScope;
         })
         .filter(Boolean);
-
+        const responsePoints = filteredPoints
+        .map(({ id: needleId }) => {
+          return points.find(({ id }) => `${needleId}` === `${id}`);
+        })
+        .filter(Boolean)
       set(() => ({
-        _lastResponse: filteredPoints
-          .map(({ id: needleId }) => {
-            return points.find(({ id }) => `${needleId}` === `${id}`);
-          })
-          .filter(Boolean),
+        _lastResponse: responsePoints,
+        lastResponseCount: responsePoints.length,
         scopes: geoScopes
       }));
       scopeLayer.eachLayer(function (layer) {

diff --git a/app/packs/src/decidim/geo/ui/Drawer.js b/app/packs/src/decidim/geo/ui/Drawer.js
@@ -49,13 +49,13 @@ export default class Drawer {
       "decidimGeo__emptyDrawer__paragraph",
       emptyContainer
     );
-    emptyParagraph.textContent = this.i18n()["decidim_geo.filters.empty_message"];
+    emptyParagraph.textContent = i18n["decidim_geo.filters.empty.message"];
     const emptyAction = L.DomUtil.create(
       "button",
       "decidimGeo__emptyDrawer__button",
       emptyContainer
     );
-    emptyAction.textContent = this.i18n()["decidim_geo.filters.empty_reset_button"];
+    emptyAction.textContent = i18n["decidim_geo.filters.empty.update_button"];
     emptyAction.onclick = this.emptyActionHandler.bind(this);
   }
 
@@ -67,25 +67,8 @@ export default class Drawer {
     return configStore.getState();
   }
   emptyActionHandler() {
-    const { resetFilters } = filterStore.getState();
-    const { resetFilters: resetDropdownFilter } = dropdownFilterStore.getState();
-    const { selectScope } = geoStore.getState();
-    const { space_ids } = configStore.getState();
-    const { scopeForId } = pointStore.getState();
-
-    resetFilters();
-    resetDropdownFilter();
-    const scopes = space_ids.map((scope) => scopeForId(scope)).filter(Boolean);
-    if (scopes.length === 1) {
-      const scope = scopeForId(scopes[0]);
-      if (scope) {
-        selectScope(scope);
-        scope.repaint();
-      }
-    } else {
-      selectScope(null);
-    }
-    this.repaint();
+    const { open } = dropdownFilterStore.getState();
+    open();
   }
   repaintLoading() {
     const loadingElement = this.loadingDom();

diff --git a/app/packs/src/decidim/geo/ui/FilterButton.js b/app/packs/src/decidim/geo/ui/FilterButton.js
@@ -3,6 +3,7 @@ import dropdownFilterStore from "../stores/dropdownFilterStore";
 import geoStore from "../stores/geoStore";
 import configStore from "../stores/configStore";
 import filterStore from "../stores/filterStore";
+import pointStore from "../stores/pointStore";
 
 class FilterButton {
   constructor(parent) {
@@ -29,6 +30,8 @@ class FilterButton {
 <path d="M4.198 0.548096H2.198V6.5481H4.198V0.548096ZM16.198 0.548096H14.198V10.5481H16.198V0.548096ZM0.197998 10.5481H2.198V18.5481H4.198V10.5481H6.198V8.5481H0.197998V10.5481ZM12.198 4.5481H10.198V0.548096H8.198V4.5481H6.198V6.5481H12.198V4.5481ZM8.198 18.5481H10.198V8.5481H8.198V18.5481ZM12.198 12.5481V14.5481H14.198V18.5481H16.198V14.5481H18.198V12.5481H12.198Z" fill="currentColor"/>
 </svg>`;
     this.title.onclick = this.handleFilterButtonClick.bind(this);
+
+    this.alertBadFilter = false;
   }
   handleFilterButtonClick() {
     this.toggle();
@@ -42,6 +45,14 @@ class FilterButton {
 
   repaint() {
     const { selectedPoint } = geoStore.getState();
+    if(!selectedPoint && this.alertBadFilter){
+      this.title.onclick = this.handleFilterButtonClick.bind(this);
+      this.countBadge.className = "decidimGeo__filterToggle__counter";
+      this.countBadge.textContent = "!";
+      this.title.className = "decidimGeo__filterToggle__button";
+      this.titleContainer.className = "decidimGeo__filterToggle";
+      return;
+    }
     const { filterCount } = dropdownFilterStore.getState();
     const badgeCount = filterCount();
     this.title.onclick = selectedPoint
@@ -72,6 +83,15 @@ class FilterButton {
   }
 
   onAdd(_map) {
+    pointStore.subscribe(
+      (state) => [state.lastResponseCount],
+      ([count]) => {
+        const alertBadFilter = count == 0;
+        if(alertBadFilter === this.alertBadFilter) return;
+        this.alertBadFilter = alertBadFilter;
+        this.repaint();
+      }
+    );
     dropdownFilterStore.subscribe(
       (state) => [state.isOpen, state.selectedFilters],
       () => this.repaint()

diff --git a/config/locales/decidim-geo.en.yml b/config/locales/decidim-geo.en.yml
@@ -118,8 +118,8 @@ en:
           one: 1 result
           other: "%count% results"
         empty:
-          message: "No data with these filters"
-          reset_button: "Reset filters"
+          message: "Nothing here, change filters to update"
+          update_button: "Update"
         geo:
           label: Show
           all: All