New filter button and bar - fixes kolzchut/srm#661 (#10)

kolzchut · Dec 13, 2023 · 98f6f32 · 98f6f32
1 parent b5d32a9
commit 98f6f32
Show file tree

Hide file tree

Showing 27 changed files with 436 additions and 186 deletions.
diff --git a/angular.json b/angular.json
@@ -111,7 +111,10 @@
               "buildTarget": "srm:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "host": "127.0.0.1"
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

diff --git a/projects/srm/src/app/analytics.service.ts b/projects/srm/src/app/analytics.service.ts
@@ -162,7 +162,7 @@ export class AnalyticsService {
         },
         ...eventParams
       });
-    }
+    } 
   }
 
   interactionEvent(what: string, where: string, content: string, params: SearchParams | null) {

diff --git a/projects/srm/src/app/consts.ts b/projects/srm/src/app/consts.ts
@@ -217,6 +217,7 @@ export class SearchParams {
     national?: boolean;
 
     selectedTaxonomyIds: string[] | null = null;
+    filteredSituationIds: string[] | null = null;
 
     get searchHash(): string {
       return [this.query, this.response, this.situation, this.org_id,
@@ -234,12 +235,9 @@ export class SearchParams {
                 !!this.filter_response_categories?.length;
     }
 
-    get allTaxonomyIds(): string[] {
-        if (!this.selectedTaxonomyIds) {
-            this.selectedTaxonomyIds = [
-                this.response || '',
-                this.situation || '',
-                ...(this.filter_responses || []),
+    get allFilteredSituations(): string[] {
+        if (!this.filteredSituationIds) {
+            this.filteredSituationIds = [
                 ...(this.filter_age_groups || []),
                 ...(this.filter_benefit_holders || []),
                 ...(this.filter_community || []),
@@ -253,6 +251,19 @@ export class SearchParams {
                 ...(this.filter_urgency || [])
             ];
         }
+        return this.filteredSituationIds;
+    }
+
+
+    get allTaxonomyIds(): string[] {
+        if (!this.selectedTaxonomyIds) {
+            this.selectedTaxonomyIds = [
+                this.response || '',
+                this.situation || '',
+                ...(this.filter_responses || []),
+                ...(this.filteredSituationIds || []),
+            ];
+        }
         return this.selectedTaxonomyIds;
     }
 };
diff --git a/projects/srm/src/app/page/page.component.html b/projects/srm/src/app/page/page.component.html
@@ -12,9 +12,11 @@
                     [query]='query'
                     [showCity]='!mapMoved'
                     [searchParams]='searchParams'
-            ></app-searchbox-header>
+            >
+                <app-search-filters-bar [filtersState]='filtersState' *ngIf='layout.mobile()'></app-search-filters-bar>
+            </app-searchbox-header>
             <app-results-drawer
-                [state]='stage === "point" ? (searchParams && searchParams.ac_query && !card ? DrawerState.Minimal : DrawerState.Hidden) : (searchParams && searchParams.national ? DrawerState.National : drawerState)'
+                [state]='filtersVisible ? DrawerState.Full : (stage === "point" ? (searchParams && searchParams.ac_query && !card ? DrawerState.Minimal : DrawerState.Hidden) : (searchParams && searchParams.national ? DrawerState.National : drawerState))'
                 [nationalCount]='nationalCount'
                 [areaSearchState]='areaSearchState'
                 *ngIf='searchParams'
@@ -27,7 +29,7 @@
                     [class.visible]='stage === "search-results" || (stage === "point" && !card)'
                     [class.filters]='filtersVisible'
                 >
-                    <app-search-filters-bar *ngIf='!filtersVisible' [filtersState]='filtersState'></app-search-filters-bar>
+                    <app-search-filters-bar [filtersState]='filtersState' *ngIf='layout.desktop()'></app-search-filters-bar>
                     <app-search-filters 
                         *ngIf='filtersVisible'
                         [searchParams]='searchParams'

diff --git a/projects/srm/src/app/page/page.component.less b/projects/srm/src/app/page/page.component.less
@@ -77,6 +77,7 @@
                     flex: 0 0 auto;
                     pointer-events: all;
                 }
+
 
                 app-results-drawer {
                     width: 100%;

diff --git a/projects/srm/src/app/response/response.component.less b/projects/srm/src/app/response/response.component.less
@@ -29,6 +29,9 @@
             font-weight: 400;
             height: 18px;
         }
+        &.dynamic {
+            height: 28px;
+        }
 
         .name {
             .font-rag-sans;

diff --git a/projects/srm/src/app/search-filters-bar/search-filters-bar.component.html b/projects/srm/src/app/search-filters-bar/search-filters-bar.component.html
@@ -1,13 +1,40 @@
-<app-search-filters-button [totalFilters]='filtersState.totalFilters' [showDiscovery]='!!filtersState.showDiscovery' (activate)='filtersState.active = true'
-interactionEvent='open-filters' [interactionEventWhere]='location.path(false)' [searchParams]='filtersState.searchParams'
-
+<button *ngIf='filtersState.active && !filtersState.totalFilters && layout.desktop()' class='back' (activated)='filtersState.toggle()' aria-label='סגירת הסינון וחזרה לרשימת התוצאות' clickOnReturn></button>
+<app-search-filters-button
+    [filtersState]='filtersState'
+    (activate)='filtersState.toggle()'
+    interactionEvent='open-filters' 
+    [interactionEventWhere]='location.path(false)' 
+    [searchParams]='filtersState.searchParams'
 ></app-search-filters-button>
-<div class='tags header' *ngIf='filtersState.responseCategoryItems && false'> <!-- todo #483 -->
-<app-response *ngFor='let response of filtersState.responseCategoryItems' 
-        [response]='response' 
-        [selected]='filtersState.isResponseCategorySelected(response)'
-        [disabled]='filtersState.isResponseCategoryDisabled(response)'
-        [dynamic]='true'
-        (clicked)='filtersState.toggleResponseCategory(response)'
-></app-response>
-</div>
+<ng-container *ngIf='filtersState.totalFilters > 0'>
+    <div class='selected' #scrolledList>
+        @for (response of filtersState.currentSearchParams.filter_responses; track response) {
+            <app-response
+                *ngIf='filtersState.responsesMap[response]'
+                [response]='filtersState.responsesMap[response]'
+                [selected]='true'
+                [dynamic]='true'
+                [active]='true'
+                (clicked)='filtersState.toggleResponse(filtersState.responsesMap[response])'
+            ></app-response>
+        }
+        @for (situation of filtersState.currentSearchParams.allFilteredSituations; track situation) {
+            <app-situation
+                *ngIf='filtersState.situationsMap[situation]'
+                [situation]='filtersState.situationsMap[situation]'
+                [selected]='true'
+                (clicked)='filtersState.clearOne(filtersState.situationsMap[situation])'
+            ></app-situation>
+        }
+    </div>
+    <div class='controls' [style.width]='scrolledList.clientWidth + "px"' *ngIf='layout.desktop()'>
+        <div class='shader right' (click)='scrolledList.scrollBy({behavior: "smooth", left: 100})'
+             *ngIf='scrolledList.scrollWidth > scrolledList.clientWidth && scrolledList.scrollLeft < 0'></div>
+        <div class='shader left' (click)='scrolledList.scrollBy({behavior: "smooth", left: -100})'
+             *ngIf='scrolledList.scrollWidth > scrolledList.clientWidth && scrolledList.scrollLeft > scrolledList.clientWidth - scrolledList.scrollWidth'></div>
+    </div>
+    <div class='controls' [style.width]='scrolledList.clientWidth + "px"' *ngIf='layout.mobile()'>
+        <div class='shader right' *ngIf='scrolledList.scrollWidth > scrolledList.clientWidth && scrolledList.scrollLeft < 0'></div>
+        <div class='shader left' *ngIf='scrolledList.scrollWidth > scrolledList.clientWidth && scrolledList.scrollLeft > scrolledList.clientWidth - scrolledList.scrollWidth'></div>
+    </div>
+</ng-container>
diff --git a/projects/srm/src/app/search-filters-bar/search-filters-bar.component.less b/projects/srm/src/app/search-filters-bar/search-filters-bar.component.less
@@ -2,16 +2,108 @@
 
 :host {
     width: 100%;
-    height: 100%;
+    .desktop({
+        height: 56px;
+        padding: 0 16px;
+    });
+    .mobile({
+        height: 28px;
+        padding: 0 8px;
+    });
     display: flex;
 
     flex-flow: row;
     align-items: center;
+    justify-content: stretch;
     gap: 4px;
-    padding: 8px 6px;
-    padding-left: 0;
-    .mobile({
-        padding-top: 0;
-    });
     background: @color-white;
+    position: relative;
+
+    button.back {
+        flex: 0 0 auto;
+        .button-image(@color-blue-8, @color-blue-7);
+        width: 40px;
+        height: 40px;
+        margin-left: 4px;
+        border-radius: 24px;
+        border: 1px solid @color-blue-6;
+        &, &:hover {
+            background-size: 30px;
+            background-image: url('../../assets/img/icon-back-blue-1.svg');
+        }
+    }
+
+    padding-left: 8px;
+
+    app-search-filters-button {
+        flex: 1 1 auto;
+    }
+
+    &.active {
+        padding-left: 0px;
+        app-search-filters-button {
+            flex: 0 0 auto;
+        }
+    }
+
+    .selected {
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: scroll;
+        align-items: center;
+        gap: 4px;
+        .no-scrollbars;
+        position: relative;
+        height: 100%;
+        width: 100%;
+
+        app-response, app-situation {
+            flex: 0 0 auto;
+            cursor: pointer;
+        }
+    }
+
+    .controls {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+
+        & > * {
+            pointer-events: all;
+        }
+        .shader {
+            position: absolute;
+            width: 24px;
+            height: 100%;
+            background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
+
+            .desktop({
+                &::after {
+                    content: '';
+                    position: absolute;
+                    width: 24px;
+                    height: 100%;
+                    .background-image;
+                    background-image: url('../../assets/img/chevron-left-blue-1.svg');
+                    background-size: 24px;
+                }
+                cursor: pointer;
+            });
+
+            &.left {
+                left: 0;
+            }
+            &.right {
+                right: 0;
+                transform: rotate(180deg);
+                transform-origin: center;
+            }
+            top: 0;
+            z-index: 1;
+        }
+    }
 }
diff --git a/projects/srm/src/app/search-filters-bar/search-filters-bar.component.ts b/projects/srm/src/app/search-filters-bar/search-filters-bar.component.ts
@@ -1,17 +1,21 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FiltersState } from '../search-filters/filters-state';
 import { Location } from '@angular/common';
+import { LayoutService } from '../layout.service';
 
 @Component({
   selector: 'app-search-filters-bar',
   templateUrl: './search-filters-bar.component.html',
-  styleUrls: ['./search-filters-bar.component.less']
+  styleUrls: ['./search-filters-bar.component.less'],
+  host: {
+    '[class.active]' : 'filtersState.totalFilters > 0',
+  }
 })
 export class SearchFiltersBarComponent implements OnInit {
 
   @Input() filtersState: FiltersState;
 
-  constructor(public location: Location) { }
+  constructor(public location: Location, public layout: LayoutService) { }
 
   ngOnInit(): void {
   }

diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.html b/projects/srm/src/app/search-filters-button/search-filters-button.component.html
@@ -1,12 +1,9 @@
-<button class='open-modal' [class.active]='!!totalFilters' (click)='activate.next()' aria-label='פתיחת אפשרויות הסינון'>
-    <img *ngIf='!totalFilters' src='assets/img/icon-filter-white.svg' class='hover' alt='אייקון סינון'>
-    <img *ngIf='!totalFilters' src='assets/img/icon-filter-gray-3.svg' class='nohover' alt='אייקון סינון'>
-    <img *ngIf='!!totalFilters' src='assets/img/icon-filter-white.svg' class='hover' [alt]='"אייקון סינון עם " + totalFilters + " מסננים פעילים"'>
-    <img *ngIf='!!totalFilters' src='assets/img/icon-filter-gray-1.svg' class='nohover' [alt]='"אייקון סינון עם " + totalFilters + " מסננים פעילים"'>
-    <span>סינון</span>
-    <div class='count' *ngIf='totalFilters'>{{totalFilters}}</div>
+<button class='open-modal' [class]='"state-" + state' (click)='activate.next()' aria-label='פתיחת אפשרויות הסינון'>
+    <div class='img' *ngIf='state !== "inactive"'></div>
+    <span>{{message}}</span>
+    <!-- <div class='count' *ngIf='totalFilters'>{{totalFilters}}</div> -->
 </button>
-<div class='discovery' *ngIf='showDiscovery' (click)='activate.next()' (mousedown)='$event.stopPropagation()' (touchstart)='$event.stopPropagation()'>
+<div class='discovery' *ngIf='filtersState.showDiscovery && !filtersState.active' (click)='activate.next()' (mousedown)='$event.stopPropagation()' (touchstart)='$event.stopPropagation()'>
     <span class='text'>
         וואו, המון תוצאות… שווה אולי למקד את המפה או <strong>להפעיל סינון</strong>
     </span>