wip kolzchut/srm#812

kolzchut · Oct 29, 2024 · 5ed9ef5 · 5ed9ef5
1 parent f0a778f
commit 5ed9ef5
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 74 deletions.
diff --git a/projects/srm/src/app/area-search-selector/area-search-state.ts b/projects/srm/src/app/area-search-selector/area-search-state.ts
@@ -6,6 +6,7 @@ import { computed, effect, signal } from "@angular/core";
 import { SearchState } from "../search-results/search-state";
 import { FocusOnRequest } from "../map/map.component";
 import { PlatformService } from "../platform.service";
+import { LayoutService } from "../layout.service";
 
 export class AreaSearchState {
 
@@ -33,7 +34,10 @@ export class AreaSearchState {
   areaInputEl: HTMLInputElement;
   mapMoveSubscription: Subscription | null = null;
 
-  constructor(private api: ApiService, private searchParams: Observable<SearchParams>, public searchState: SearchState, private platform: PlatformService) {
+  constructor(private api: ApiService, private searchParams: Observable<SearchParams>, public searchState: SearchState, private platform: PlatformService, private layout: LayoutService) {
+    effect(() => {
+      this.showResults.next(this.layout.desktop());
+    });
     this.queries.pipe(
       filter((value) => !!value && value.length > 1),
       debounceTime(this.platform.browser() ? 200 : 0),

diff --git a/projects/srm/src/app/page/page.component.html b/projects/srm/src/app/page/page.component.html
@@ -7,80 +7,78 @@
         [searchParams]='searchParams'
     ></app-searchbox-header>
     <div class='main-content' *ngIf='stage === "search-results" || stage === "card" || stage === "point"'>
-        @if (layout.mobile() &&  stage === "search-results") {
-            <app-searchbox-header class='layout-mobile'
-                    [query]='query'
-                    [searchParams]='searchParams'
-            >
-                <app-search-filters-bar [filtersState]='filtersState'></app-search-filters-bar>
-            </app-searchbox-header>
-        }
-        <div class='search-results'>
-            @if (searchParams) {
-                @if (layout.mobile()) {
-                    <app-results-drawer
-                        [state]='stage === "point" ? DrawerState.Hidden : (searchState.onlyNational() ? DrawerState.Most : drawerState)'
-                        [nationalCount]='nationalCount'
-                        [searchState]='searchState'
-                        [areaSearchState]='areaSearchState'
-                        [class.visible]='stage === "point" || stage === "search-results"'
-                        [scrollAll]='false'
-                        (handle)='handleDrawer($event)'
-                        (size)='drawerSize = $event'
-                    >
-                        <div class='content search-filters' ngProjectAs='content-header' 
-                            [class.visible]='stage === "search-results" || (stage === "point" && !card)'
-                            [class.filters]='filtersVisible'
-                        >
-                            <app-search-filters-bar class='layout-desktop' [filtersState]='filtersState' *ngIf='layout.desktop()'></app-search-filters-bar>
-                            <app-search-filters 
-                                *ngIf='filtersVisible'
-                                [searchParams]='searchParams'
-                                [areaSearchState]='areaSearchState'
-                                [filtersState]='filtersState'
-                                [searchState]='searchState'
-                                #searchFilters
-                            ></app-search-filters>
-                        </div>
-                        <div class='content main' ngProjectAs='content' 
-                            [class.visible]='stage === "search-results" && !filtersVisible'
-                            [class.filters]='filtersVisible'
-                        >
-                            <app-search-results
-                                [class.hidden]='filtersVisible === true' 
-                                [class.shown]='filtersVisible === false' 
-                                [searchParams]='searchParams'
-                                [active]="stage === 'search-results'"
-                                [didYouMean]='didYouMean'
-                                [searchState]='searchState'
-                                (zoomout)='zoomOutMap($event)'
-                                (visibleCount)='visibleCount = $event'
-                                (nationalCount)='nationalCount = $event'
-                                (hoverCard)='hoverCard($event)'
-                            ></app-search-results>
-                            <app-disclaimer-footer [homepage]='true'></app-disclaimer-footer>
-                        </div>
-                <!-- (handle)='handleEvent($event)' (height)='updateDrawerHeight($event)' (scrollTop)='drawerScrolled = !$event'
-                                    [class.away]='disclaimerVisible || infoPage'> -->
-                    </app-results-drawer>
-                }
-                @if (layout.desktop()) {
-                    <app-search-results-page
-                        [class.visible]='stage === "search-results"'
+        @if (layout.mobile()) {
+            <div class='search-results'>
+                @if (stage === 'search-results') {
+                    <app-searchbox-header class='layout-mobile'
+                        [query]='query'
                         [searchParams]='searchParams'
-                        [serachResultsActive]="stage === 'search-results'"
-                        [didYouMean]='didYouMean'
-                        [searchState]='searchState'
-                        [filtersState]='filtersState'
-                        [areaSearchState]='areaSearchState'
-                        (zoomout)='zoomOutMap($event)'
-                        (visibleCount)='visibleCount = $event'
-                        (nationalCount)='nationalCount = $event'
-                        (hoverCard)='hoverCard($event)'
-                    ></app-search-results-page>
+                    >
+                        <app-search-filters-bar [filtersState]='filtersState'></app-search-filters-bar>
+                    </app-searchbox-header>
                 }
-            }
-        </div>
+                <app-results-drawer
+                    [state]='stage === "point" ? DrawerState.Hidden : (searchState.onlyNational() ? DrawerState.Most : drawerState)'
+                    [nationalCount]='nationalCount'
+                    [searchState]='searchState'
+                    [areaSearchState]='areaSearchState'
+                    [class.visible]='stage === "point" || stage === "search-results"'
+                    [scrollAll]='false'
+                    (handle)='handleDrawer($event)'
+                    (size)='drawerSize = $event'
+                >
+                    <div class='content search-filters' ngProjectAs='content-header' 
+                        [class.visible]='stage === "search-results" || (stage === "point" && !card)'
+                        [class.filters]='filtersVisible'
+                    >
+                        <app-search-filters-bar class='layout-desktop' [filtersState]='filtersState' *ngIf='layout.desktop()'></app-search-filters-bar>
+                        <app-search-filters 
+                            *ngIf='filtersVisible'
+                            [searchParams]='searchParams'
+                            [areaSearchState]='areaSearchState'
+                            [filtersState]='filtersState'
+                            [searchState]='searchState'
+                            #searchFilters
+                        ></app-search-filters>
+                    </div>
+                    <div class='content main' ngProjectAs='content' 
+                        [class.visible]='stage === "search-results" && !filtersVisible'
+                        [class.filters]='filtersVisible'
+                    >
+                        <app-search-results
+                            [class.hidden]='filtersVisible === true' 
+                            [class.shown]='filtersVisible === false' 
+                            [searchParams]='searchParams'
+                            [active]="stage === 'search-results'"
+                            [didYouMean]='didYouMean'
+                            [searchState]='searchState'
+                            (zoomout)='zoomOutMap($event)'
+                            (visibleCount)='visibleCount = $event'
+                            (nationalCount)='nationalCount = $event'
+                            (hoverCard)='hoverCard($event)'
+                        ></app-search-results>
+                        <app-disclaimer-footer [homepage]='true'></app-disclaimer-footer>
+                    </div>
+            <!-- (handle)='handleEvent($event)' (height)='updateDrawerHeight($event)' (scrollTop)='drawerScrolled = !$event'
+                                [class.away]='disclaimerVisible || infoPage'> -->
+                </app-results-drawer>                
+            </div>
+        }
+        @if (layout.desktop() && searchParams) {
+            <app-search-results-page
+                [class.visible]='stage === "search-results"'
+                [searchParams]='searchParams'
+                [serachResultsActive]="stage === 'search-results'"
+                [didYouMean]='didYouMean'
+                [searchState]='searchState'
+                [filtersState]='filtersState'
+                [areaSearchState]='areaSearchState'
+                (zoomout)='zoomOutMap($event)'
+                (visibleCount)='visibleCount = $event'
+                (nationalCount)='nationalCount = $event'
+                (hoverCard)='hoverCard($event)'
+            ></app-search-results-page>
+        }
         @if (stage === 'point') {
             <app-branch-container
                 [cardId]='card' 

diff --git a/projects/srm/src/app/page/page.component.ts b/projects/srm/src/app/page/page.component.ts
@@ -438,7 +438,7 @@ export class PageComponent implements OnInit, AfterViewInit, OnDestroy {
       this.showLandingPageOverlay = false;
     }
     this.searchState = new SearchState();
-    this.areaSearchState = new AreaSearchState(api, this.searchParamsQueue, this.searchState, this.platform);
+    this.areaSearchState = new AreaSearchState(api, this.searchParamsQueue, this.searchState, this.platform, this.layout);
     this.areaSearchState.bounds.pipe(
       untilDestroyed(this),
     ).subscribe((bounds) => {