wip kolzchut/srm#812

kolzchut · Oct 17, 2024 · 30dda17 · 30dda17
1 parent d77717b
commit 30dda17
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 17 deletions.
diff --git a/projects/srm/src/app/page/page.component.html b/projects/srm/src/app/page/page.component.html
@@ -14,6 +14,7 @@
             [didYouMean]='didYouMean'
             [searchState]='searchState'
             [filtersState]='filtersState'
+            [areaSearchState]='areaSearchState'
             (zoomout)='zoomOutMap($event)'
             (visibleCount)='visibleCount = $event'
             (nationalCount)='nationalCount = $event'

diff --git a/projects/srm/src/app/search-filters/search-filters.component.html b/projects/srm/src/app/search-filters/search-filters.component.html
@@ -4,12 +4,12 @@
             <div class='section-header'>
                 <!-- <div class='title' *ngIf='!searchParams.response'>סוגי שירות:</div>
                 <div class='title' *ngIf='!!searchParams.response'>סוגי שירות נוספים:</div> -->
-                <div class='title'>סוגי שירות:</div>
+                <div class='title'>סינון סוגי שירותים:</div>
                 <a class='clear' (activated)='filtersState.currentSearchParams.filter_responses = []; filtersState.pushSearchParams()' clickOnReturn role='button' tabindex="0" aria-label="ניקוי המסננים לסוגי השירותים">ניקוי</a>
             </div>
             <app-response-selection-widget [responses]='filtersState.responseItems' [selectedResponses]='(this.filtersState.currentSearchParams && this.filtersState.currentSearchParams.filter_responses) || []' (toggle)='filtersState.toggleResponse($event)'></app-response-selection-widget>
         </div>
-        <app-search-filters-situation-section title='קהלי יעד' [situations]='filtersState.audiences' [filtersState]='filtersState' [field]='"filter_audiences"'></app-search-filters-situation-section>
+        <app-search-filters-situation-section title='סינון קהלי יעד' [situations]='filtersState.audiences' [filtersState]='filtersState' [field]='"filter_audiences"'></app-search-filters-situation-section>
         <app-search-filters-situation-section title='מצבים רפואיים ומוגבלויות' [situations]='filtersState.health_issues' [filtersState]='filtersState' [field]='"filter_health_issues"'></app-search-filters-situation-section>
         <app-search-filters-situation-section title='מוכרות ממשלתית' [situations]='filtersState.others.benefit_holders' [filtersState]='filtersState' [field]='"filter_benefit_holders"'></app-search-filters-situation-section>
         <app-search-filters-situation-section title='מצב תעסוקתי' [situations]='filtersState.others.employment' [filtersState]='filtersState' [field]='"filter_employment"'></app-search-filters-situation-section>

diff --git a/projects/srm/src/app/search-filters/search-filters.component.less b/projects/srm/src/app/search-filters/search-filters.component.less
@@ -19,8 +19,7 @@
         flex-flow: column;
         align-items: center;
         .desktop({
-            padding: 16px 56px;
-            padding-bottom: 48px;
+            padding: 16px;
         });
         .mobile({
             padding: 16px 16px;
@@ -62,15 +61,17 @@
     }
 
     .submit {
-        position: fixed;
-        bottom: 0;
-        right: 0;
-        z-index: 100;
         .mobile({
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            z-index: 100;
             width: 100%;
         });
         .desktop({
-            width: @desktop-right-side-width;
+            position: sticky;
+            bottom: 0;
+            width: 100%;
         });
         height: 48px;
 
@@ -79,7 +80,7 @@
         align-items: center;
         justify-content: center;
         .desktop({
-            padding: 0 56px;
+            padding: 16px;
         });
         .mobile({
             padding: 0 16px;

diff --git a/projects/srm/src/app/search-results-page/search-results-page-state.ts b/projects/srm/src/app/search-results-page/search-results-page-state.ts
@@ -1,7 +1,6 @@
 export class SearchResultsPageState {
 
   resultsVisible = true;
-  filtersVisible = false;
-  areaSearchState = null;
+  areaSearchVisible = null;
 
 }
diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.html b/projects/srm/src/app/search-results-page/search-results-page.component.html
@@ -26,10 +26,18 @@
     <div class='extra'>
 
     </div>
-    @if (state.filtersVisible) {
-        <div class='overlay'></div>
-        <div class='filters'>
-
+    @if (filtersState.active || state.areaSearchVisible) {
+        <div class='overlay'>
+            @if (filtersState.active) {
+                <div class='modal'>
+                    <app-search-filters 
+                        [searchParams]='searchParams'
+                        [areaSearchState]='areaSearchState'
+                        [filtersState]='filtersState'
+                        [searchState]='searchState'
+                    ></app-search-filters>
+                </div>
+            }
         </div>
     }
 </div>
diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.less b/projects/srm/src/app/search-results-page/search-results-page.component.less
@@ -59,6 +59,35 @@
                 display: none;
             }
         }
+
+        .overlay {
+            background: rgba(0, 0, 0, 0.20);
+            backdrop-filter: blur(4px);
+            display: flex;
+            flex-flow: column;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 10;
+
+            .modal {
+                min-width: 400px;
+                width: 40%;
+                max-height: 75%;
+                pointer-events: all;
+                position: relative;
+                background-color: white;
+                padding: 8px;
+                padding-bottom: 0;
+                border-radius: 8px;
+                box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
+            }
+        }
     }
 }
 
diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.ts b/projects/srm/src/app/search-results-page/search-results-page.component.ts
@@ -3,6 +3,7 @@ import { SearchResultsPageState } from './search-results-page-state';
 import { Card, SearchParams, ViewPort } from '../consts';
 import { SearchState } from '../search-results/search-state';
 import { FiltersState } from '../search-filters/filters-state';
+import { AreaSearchState } from '../area-search-selector/area-search-state';
 
 @Component({
   selector: 'app-search-results-page',
@@ -16,6 +17,7 @@ export class SearchResultsPageComponent {
   @Input() didYouMean: {display: string, link: string} | null = null;
   @Input() searchState: SearchState;
   @Input() filtersState: FiltersState;
+  @Input() areaSearchState: AreaSearchState;
   @Output() zoomout = new EventEmitter<ViewPort>();
   @Output() nationalCount = new EventEmitter<number>();
   @Output() visibleCount = new EventEmitter<number>();

diff --git a/...ects/srm/src/app/search-results-page/srp-static-filters/srp-static-filters.component.html b/...ects/srm/src/app/search-results-page/srp-static-filters/srp-static-filters.component.html
@@ -40,5 +40,5 @@ <h3>סינון מהיר:</h3>
             </div>
         }
     }
-
 </div>
+<div class='extra-filters' clickOnReturn (activated)='filtersState.active = true'>מסננים נוספים</div>
diff --git a/...ects/srm/src/app/search-results-page/srp-static-filters/srp-static-filters.component.less b/...ects/srm/src/app/search-results-page/srp-static-filters/srp-static-filters.component.less
@@ -98,4 +98,26 @@
             }
         }
     }
+
+    .extra-filters {
+        width: 100%;
+        display: flex;
+        padding: 4px 8px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        border: 1px solid @color-blue-5;
+        background: @color-blue-8;
+        color: @color-blue-1;
+        .font-rag-sans;
+        font-size: 13px;
+        font-weight: 300;
+        line-height: 16px;
+        cursor: pointer;
+
+        &:hover {
+            background: @color-blue-7;
+            border-color: @color-blue-4;
+        }
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,5 +40,5 @@ <h3>סינון מהיר:</h3> @@
                 </div>
             }
         }
     </div>
+    <div class='extra-filters' clickOnReturn (activated)='filtersState.active = true'>מסננים נוספים</div>