improve multiple list

GeotrekCE · Dec 14, 2023 · 63445e4 · 63445e4
1 parent add1164
commit 63445e4
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 42 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -96,11 +96,6 @@ export namespace Components {
         "isLargeView": boolean;
         "touristicContent": TouristicContent;
     }
-    interface GrwTouristicContentCardProvider {
-        "api": string;
-        "languages": string;
-        "touristicContentId": string;
-    }
     interface GrwTouristicContentDetail {
         "colorBackground": string;
         "colorOnPrimaryContainer": string;
@@ -112,6 +107,11 @@ export namespace Components {
         "colorSurfaceContainerLow": string;
         "isLargeView": boolean;
     }
+    interface GrwTouristicContentProvider {
+        "api": string;
+        "languages": string;
+        "touristicContentId": string;
+    }
     interface GrwTouristicContentsList {
         "colorOnSecondaryContainer": string;
         "colorOnSurface": string;
@@ -292,18 +292,18 @@ declare global {
         prototype: HTMLGrwTouristicContentCardElement;
         new (): HTMLGrwTouristicContentCardElement;
     };
-    interface HTMLGrwTouristicContentCardProviderElement extends Components.GrwTouristicContentCardProvider, HTMLStencilElement {
-    }
-    var HTMLGrwTouristicContentCardProviderElement: {
-        prototype: HTMLGrwTouristicContentCardProviderElement;
-        new (): HTMLGrwTouristicContentCardProviderElement;
-    };
     interface HTMLGrwTouristicContentDetailElement extends Components.GrwTouristicContentDetail, HTMLStencilElement {
     }
     var HTMLGrwTouristicContentDetailElement: {
         prototype: HTMLGrwTouristicContentDetailElement;
         new (): HTMLGrwTouristicContentDetailElement;
     };
+    interface HTMLGrwTouristicContentProviderElement extends Components.GrwTouristicContentProvider, HTMLStencilElement {
+    }
+    var HTMLGrwTouristicContentProviderElement: {
+        prototype: HTMLGrwTouristicContentProviderElement;
+        new (): HTMLGrwTouristicContentProviderElement;
+    };
     interface HTMLGrwTouristicContentsListElement extends Components.GrwTouristicContentsList, HTMLStencilElement {
     }
     var HTMLGrwTouristicContentsListElement: {
@@ -375,8 +375,8 @@ declare global {
         "grw-select-language": HTMLGrwSelectLanguageElement;
         "grw-sensitive-area-detail": HTMLGrwSensitiveAreaDetailElement;
         "grw-touristic-content-card": HTMLGrwTouristicContentCardElement;
-        "grw-touristic-content-card-provider": HTMLGrwTouristicContentCardProviderElement;
         "grw-touristic-content-detail": HTMLGrwTouristicContentDetailElement;
+        "grw-touristic-content-provider": HTMLGrwTouristicContentProviderElement;
         "grw-touristic-contents-list": HTMLGrwTouristicContentsListElement;
         "grw-touristic-contents-provider": HTMLGrwTouristicContentsProviderElement;
         "grw-touristic-event-card": HTMLGrwTouristicEventCardElement;
@@ -485,11 +485,6 @@ declare namespace LocalJSX {
         "onTouristicContentCardPress"?: (event: GrwTouristicContentCardCustomEvent<number>) => void;
         "touristicContent"?: TouristicContent;
     }
-    interface GrwTouristicContentCardProvider {
-        "api"?: string;
-        "languages"?: string;
-        "touristicContentId"?: string;
-    }
     interface GrwTouristicContentDetail {
         "colorBackground"?: string;
         "colorOnPrimaryContainer"?: string;
@@ -501,6 +496,11 @@ declare namespace LocalJSX {
         "colorSurfaceContainerLow"?: string;
         "isLargeView"?: boolean;
     }
+    interface GrwTouristicContentProvider {
+        "api"?: string;
+        "languages"?: string;
+        "touristicContentId"?: string;
+    }
     interface GrwTouristicContentsList {
         "colorOnSecondaryContainer"?: string;
         "colorOnSurface"?: string;
@@ -615,8 +615,8 @@ declare namespace LocalJSX {
         "grw-select-language": GrwSelectLanguage;
         "grw-sensitive-area-detail": GrwSensitiveAreaDetail;
         "grw-touristic-content-card": GrwTouristicContentCard;
-        "grw-touristic-content-card-provider": GrwTouristicContentCardProvider;
         "grw-touristic-content-detail": GrwTouristicContentDetail;
+        "grw-touristic-content-provider": GrwTouristicContentProvider;
         "grw-touristic-contents-list": GrwTouristicContentsList;
         "grw-touristic-contents-provider": GrwTouristicContentsProvider;
         "grw-touristic-event-card": GrwTouristicEventCard;
@@ -643,8 +643,8 @@ declare module "@stencil/core" {
             "grw-select-language": LocalJSX.GrwSelectLanguage & JSXBase.HTMLAttributes<HTMLGrwSelectLanguageElement>;
             "grw-sensitive-area-detail": LocalJSX.GrwSensitiveAreaDetail & JSXBase.HTMLAttributes<HTMLGrwSensitiveAreaDetailElement>;
             "grw-touristic-content-card": LocalJSX.GrwTouristicContentCard & JSXBase.HTMLAttributes<HTMLGrwTouristicContentCardElement>;
-            "grw-touristic-content-card-provider": LocalJSX.GrwTouristicContentCardProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicContentCardProviderElement>;
             "grw-touristic-content-detail": LocalJSX.GrwTouristicContentDetail & JSXBase.HTMLAttributes<HTMLGrwTouristicContentDetailElement>;
+            "grw-touristic-content-provider": LocalJSX.GrwTouristicContentProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicContentProviderElement>;
             "grw-touristic-contents-list": LocalJSX.GrwTouristicContentsList & JSXBase.HTMLAttributes<HTMLGrwTouristicContentsListElement>;
             "grw-touristic-contents-provider": LocalJSX.GrwTouristicContentsProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicContentsProviderElement>;
             "grw-touristic-event-card": LocalJSX.GrwTouristicEventCard & JSXBase.HTMLAttributes<HTMLGrwTouristicEventCardElement>;

diff --git a/src/components/grw-app/grw-app.scss b/src/components/grw-app/grw-app.scss
@@ -106,6 +106,7 @@ grw-app {
 .init-loader-container,
 .loader-container,
 .large-view-loader-container {
+  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -212,14 +213,14 @@ grw-app {
 }
 
 grw-treks-list,
-grw-touristic-contents-list,
-grw-touristic-content-detail,
-grw-touristic-event-detail {
+grw-touristic-contents-list {
   max-height: calc(100vh - var(--header-height));
 }
 
-grw-trek-detail {
-  max-height: calc(100vh - var(--header-height) - 48px);
+grw-trek-detail,
+grw-touristic-content-detail,
+grw-touristic-event-detail {
+  max-height: calc(100vh - 64px);
 }
 
 .app-map-container {

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -300,15 +300,15 @@ export class GrwApp {
 
   changeMode(mode: mode) {
     state.searchValue = '';
-    if (mode === 'treks') {
+    if (mode === 'treks' && state.currentTreks) {
       treksFilters.forEach(filter => {
         state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
       });
       state.selectedActivitiesFilters = 0;
       state.selectedThemesFilters = 0;
       state.selectedLocationFilters = 0;
       state.currentTreks = handleTreksFiltersAndSearch();
-    } else if (mode === 'touristicContents') {
+    } else if (mode === 'touristicContents' && state.currentTouristicContents) {
       touristicContentsFilters.forEach(filter => {
         state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
       });
@@ -343,12 +343,12 @@ export class GrwApp {
           '--header-height': Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 ? '136px' : '64px',
         }}
       >
-        {!state.currentTreks && !state.currentTrek && !state.currentTouristicContent && !state.currentTouristicEvent && !state.touristicContents && (
+        {!state.currentTreks && !state.currentTrek && !state.currentTouristicContent && !state.currentTouristicEvent && !state.currentTouristicContents && (
           <div class="init-loader-container">
             <span class="loader"></span>
           </div>
         )}
-        {this.treks && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && !state.treks && (
+        {this.treks && state.mode === 'treks' && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && !state.currentTreks && (
           <grw-treks-provider
             api={this.api}
             languages={this.languages}
@@ -371,7 +371,7 @@ export class GrwApp {
         {this.showTouristicEvent && this.currentTouristicEventId && (
           <grw-touristic-event-provider api={this.api} languages={this.languages} touristic-event-id={this.currentTouristicEventId}></grw-touristic-event-provider>
         )}
-        {this.touristicContents && !state.touristicContents && !this.showTouristicContent && (
+        {this.touristicContents && state.mode === 'touristicContents' && !state.currentTouristicContents && !this.showTouristicContent && (
           <grw-touristic-contents-provider
             api={this.api}
             languages={this.languages}
@@ -431,7 +431,7 @@ export class GrwApp {
               )}
             </div>
 
-            <div class={`content-container ${this.showTrek ? 'content-trek' : 'content-treks'}`}>
+            <div class={`content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'content-trek' : 'content-treks'}`}>
               <div
                 class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}
                 style={{ display: this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}
@@ -459,13 +459,15 @@ export class GrwApp {
                   ></grw-touristic-contents-list>
                 )}
               </div>
-              {((this.showTrek && !state.currentTrek) ||
+              {(this.showTrek && !state.currentTrek) ||
                 (this.showTouristicContent && !state.currentTouristicContent) ||
-                (this.showTouristicEvent && !state.currentTouristicEvent)) && (
-                <div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>
-                  <span class="loader"></span>
-                </div>
-              )}
+                (this.showTouristicEvent && !state.currentTouristicEvent) ||
+                (!state.currentTreks && state.mode === 'treks') ||
+                (!state.touristicContents && state.mode === 'touristicContents' && (
+                  <div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>
+                    <span class="loader"></span>
+                  </div>
+                ))}
               {state.currentTrek && (
                 <div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>
                   <grw-trek-detail

diff --git a/src/components/grw-touristic-content/grw-touristic-content-card.tsx b/src/components/grw-touristic-content/grw-touristic-content-card.tsx
@@ -91,7 +91,7 @@ export class GrwTouristicContentCard {
             {this.isInsideHorizontalList ? (
               <div class="swiper" ref={el => (this.swiperTouristicContentRef = el)}>
                 <div class="swiper-wrapper">
-                  {this.touristicContent.attachments.length > 0 ? (
+                  {this.touristicContent.attachments.filter(attachment => attachment.type === 'image').length > 0 ? (
                     this.touristicContent.attachments
                       .filter(attachment => attachment.type === 'image')
                       .map(attachment => (

diff --git a/src/store/grw-touristic-content-provider.tsx b/src/store/grw-touristic-content-provider.tsx
@@ -2,7 +2,7 @@ import { Build, Component, h, Host, Prop } from '@stencil/core';
 import state from 'store/store';
 
 @Component({
-  tag: 'grw-touristic-content-card-provider',
+  tag: 'grw-touristic-content-provider',
   shadow: true,
 })
 export class GrwTouristicContentProvider {

diff --git a/src/store/grw-touristic-contents-provider.tsx b/src/store/grw-touristic-contents-provider.tsx
@@ -62,9 +62,8 @@ export class GrwTouristicContentsProvider {
         if (touristicContentCategory) {
           state.touristicContentCategories = touristicContentCategory.results;
         }
-        state.currentTouristicContents = touristicContents.results;
-        state.touristicContentsWithinBounds = touristicContents.results;
         state.touristicContents = touristicContents.results;
+        state.currentTouristicContents = touristicContents.results;
       })
       .catch(() => {
         state.trekNetworkError = true;

diff --git a/src/store/grw-treks-provider.tsx b/src/store/grw-treks-provider.tsx
@@ -84,11 +84,10 @@ export class GrwTreksProvider {
           { id: 1, name: '0 - 500m', minValue: 0, maxValue: 500, selected: false },
           { id: 2, name: '500m - 1km', minValue: 500, maxValue: 1000, selected: false },
         ];
-        state.currentTreks = treks.results;
-        state.treksWithinBounds = treks.results;
         state.labels = labels.results;
         state.districts = districts.results;
         state.treks = treks.results;
+        state.currentTreks = treks.results;
       })
       .catch(() => (state.treksNetworkError = true));
   }