handle touristic contents search and filters

GeotrekCE · Dec 12, 2023 · f51c165 · f51c165
1 parent 5d9d653
commit f51c165
Show file tree

Hide file tree

Showing 17 changed files with 442 additions and 230 deletions.
diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -147,6 +147,11 @@ export class GrwApp {
   }
 
   componentWillLoad() {
+    if (this.treks) {
+      state.mode = 'treks';
+    } else if (this.touristicContents) {
+      state.mode = 'touristicContents';
+    }
     const url = new URL(window.location.toString());
     const trekParam = url.searchParams.get('trek');
     const parentTrekId = url.searchParams.get('parenttrek');

diff --git a/src/components/grw-app/readme.md b/src/components/grw-app/readme.md
@@ -42,7 +42,7 @@
 | `themes`                    | `themes`                       |             | `string`  | `undefined` |
 | `touristicContents`         | `touristic-contents`           |             | `boolean` | `false`     |
 | `touristicEvents`           | `touristic-events`             |             | `boolean` | `false`     |
-| `treks`                     | `treks`                        |             | `boolean` | `false`     |
+| `treks`                     | `treks`                        |             | `boolean` | `true`      |
 | `urlLayer`                  | `url-layer`                    |             | `string`  | `undefined` |
 | `useGradient`               | `use-gradient`                 |             | `boolean` | `false`     |
 | `weather`                   | `weather`                      |             | `boolean` | `false`     |

diff --git a/src/components/grw-filter/grw-filter.scss b/src/components/grw-filter/grw-filter.scss
@@ -34,7 +34,7 @@
     font-size: 14px;
     font-weight: 500;
     margin: 8px 0px 0px 8px;
-    padding: 8px 16px;
+    padding: 8px 0px;
     .choices__inner {
       border: 1px solid var(--color-outline);
       border-radius: 8px;
@@ -67,7 +67,7 @@
     }
     .choices__list--dropdown,
     .choices__list[aria-expanded] {
-      width: calc(100% - 32px);
+      width: 100%;
       color: var(--color-on-secondary-container);
       background-color: var(--color-secondary-container);
       border: 1px solid var(--color-outline);

diff --git a/src/components/grw-filter/grw-filter.tsx b/src/components/grw-filter/grw-filter.tsx
@@ -1,6 +1,6 @@
 import { Component, Host, h, Prop, Listen, forceUpdate, Element } from '@stencil/core';
 import state from 'store/store';
-import { filters, handleFiltersAndSearch } from 'utils/utils';
+import { treksFilters, handleTreksFiltersAndSearch, touristicContentsFilters, handleTouristicContentsFiltersAndSearch } from 'utils/utils';
 import 'choices.js/public/assets/scripts/choices.min.js';
 
 @Component({
@@ -32,13 +32,24 @@ export class GrwFilter {
     state[this.filterType] = filterFromState;
 
     state[this.segment] = 0;
-    filters
-      .filter(filter => filter.segment === this.segment)
-      .forEach(filter => {
-        state[this.segment] += state[filter.property].filter(filter => filter.selected).length;
-      });
 
-    state.currentTreks = handleFiltersAndSearch();
+    if (state.mode === 'treks') {
+      treksFilters
+        .filter(filter => filter.segment === this.segment)
+        .forEach(filter => {
+          state[this.segment] += state[filter.property].filter(filter => filter.selected).length;
+        });
+
+      state.currentTreks = handleTreksFiltersAndSearch();
+    } else if (state.mode === 'touristicContents') {
+      touristicContentsFilters
+        .filter(filter => filter.segment === this.segment)
+        .forEach(filter => {
+          state[this.segment] += state[filter.property].filter(filter => filter.selected).length;
+        });
+
+      state.currentTouristicContents = handleTouristicContentsFiltersAndSearch();
+    }
   }
 
   resetFilter() {

diff --git a/src/components/grw-filters/grw-filters.scss b/src/components/grw-filters/grw-filters.scss
@@ -12,6 +12,10 @@
   width: 100%;
   height: 100%;
   z-index: 1100;
+  .filters-treks-container,
+  .filters-touristic-contents-container {
+    height: 100%;
+  }
   .segmented-buttons-container {
     display: flex;
     justify-content: center;
@@ -56,9 +60,9 @@
 }
 
 .filters-segment-container {
-  overflow-y: scroll;
-  padding-bottom: 32px;
-  height: calc(100% - 64px - 42px - 32px);
+  overflow-y: visible;
+  height: 100%;
+  max-height: calc(100% - 64px - 42px - 32px);
 }
 
 .back-filters-container {
@@ -104,7 +108,8 @@
 }
 
 .segment-container {
-  margin-bottom: 64px;
+  overflow: scroll;
+  height: 100%;
 }
 
 .filter-container {
@@ -116,4 +121,7 @@
       border-top: 1px solid var(--color-outline);
     }
   }
+  &:last-child {
+    margin-bottom: 16px;
+  }
 }