Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
akariv committed Oct 16, 2024
1 parent 2df5820 commit d77717b
Show file tree
Hide file tree
Showing 19 changed files with 527 additions and 2 deletions.
3 changes: 2 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"schematics": {
"@schematics/angular:component": {
"style": "less",
"skipTests": true
"skipTests": true,
"standalone": false
},
"@schematics/angular:service": {
"skipTests": true
Expand Down
6 changes: 6 additions & 0 deletions projects/srm/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ import { SearchFiltersBarComponent } from './search-filters-bar/search-filters-b
import { AreaSearchNationalServicesCountComponent } from './area-search-national-services-count/area-search-national-services-count.component';
import { AreaSearchNationalServicesNotificationComponent } from './area-search-national-services-notification/area-search-national-services-notification.component';
import { MenuPopupAccordionComponent } from './menu/menu-popup/menu-popup-accordion/menu-popup-accordion.component';
import { SearchResultsPageComponent } from './search-results-page/search-results-page.component';
import { SrpStaticFiltersComponent } from './search-results-page/srp-static-filters/srp-static-filters.component';
import { SrpMapToggleComponent } from './search-results-page/srp-map-toggle/srp-map-toggle.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -148,6 +151,9 @@ import { MenuPopupAccordionComponent } from './menu/menu-popup/menu-popup-accord
AreaSearchNationalServicesCountComponent,
AreaSearchNationalServicesNotificationComponent,
MenuPopupAccordionComponent,
SearchResultsPageComponent,
SrpStaticFiltersComponent,
SrpMapToggleComponent
],
imports: [
BrowserModule,
Expand Down
16 changes: 15 additions & 1 deletion projects/srm/src/app/page/page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,21 @@
[query]='query'
[searchParams]='searchParams'
></app-searchbox-header>
<div class='main-content' *ngIf='stage === "search-results" || stage === "card" || stage === "point"'>
<div class='main-content' *ngIf='layout.desktop() && stage === "search-results"'>
<!-- TODO: Incorporate in the other 'main-content' element -->
<app-search-results-page
[searchParams]='searchParams'
[serachResultsActive]="stage === 'search-results'"
[didYouMean]='didYouMean'
[searchState]='searchState'
[filtersState]='filtersState'
(zoomout)='zoomOutMap($event)'
(visibleCount)='visibleCount = $event'
(nationalCount)='nationalCount = $event'
(hoverCard)='hoverCard($event)'
></app-search-results-page>
</div>
<div class='main-content' *ngIf='(stage === "search-results" && layout.mobile()) || stage === "card" || stage === "point"'>
<div class='search-results'>
<app-searchbox-header *ngIf='layout.mobile() && stage === "search-results"' class='layout-mobile'
[query]='query'
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export class SearchResultsPageState {

resultsVisible = true;
filtersVisible = false;
areaSearchState = null;

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div class='content'
[class.results]='state.resultsVisible'
[class.map]='!state.resultsVisible'
>
<div class='sidebar'>
<app-srp-map-toggle
[state]='state'
></app-srp-map-toggle>
<app-srp-static-filters
[filtersState]='filtersState'>
</app-srp-static-filters>
</div>
<div class='search-results'>
<app-search-results
class='full'
[searchParams]='searchParams'
[active]="serachResultsActive"
[didYouMean]='didYouMean'
[searchState]='searchState'
(zoomout)='zoomout.emit($event)'
(visibleCount)='visibleCount.emit($event)'
(nationalCount)='nationalCount.emit($event)'
(hoverCard)='hoverCard.emit($event)'
></app-search-results>
</div>
<div class='extra'>

</div>
@if (state.filtersVisible) {
<div class='overlay'></div>
<div class='filters'>

</div>
}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
@import '../../common.less';

:host {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: flex-start;
pointer-events: none;

.content {
padding: 16px;
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: stretch;
height: 100%;
gap: 24px;
background-color: @color-blue-8;
pointer-events: all;

&.results {
width: 100%;
}

&.map {
width: fit-content;
}

.sidebar {
flex: 0 0 auto;
width: 186px;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
}

.search-results {
flex: 1 1 100%;
overflow: scroll;
.no-scrollbars;
}

.extra {
flex: 0 0 auto;
width: 364px;
@media only screen and (max-width: (1199px)) {
display: none;
}
}

&.map {
.search-results, .extra {
display: none;
}
}
}
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
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';

@Component({
selector: 'app-search-results-page',
templateUrl: './search-results-page.component.html',
styleUrl: './search-results-page.component.less'
})
export class SearchResultsPageComponent {

@Input() searchParams: SearchParams;
@Input() serachResultsActive = false;
@Input() didYouMean: {display: string, link: string} | null = null;
@Input() searchState: SearchState;
@Input() filtersState: FiltersState;
@Output() zoomout = new EventEmitter<ViewPort>();
@Output() nationalCount = new EventEmitter<number>();
@Output() visibleCount = new EventEmitter<number>();
@Output() hoverCard = new EventEmitter<Card>();

state = new SearchResultsPageState();

constructor() { }

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class='widget' [class.results]='state.resultsVisible' [class.map]='!state.resultsVisible' (click)='state.resultsVisible = !state.resultsVisible'>
<div class='img'></div>
<div class='msg'>
<div class='icon'></div>
<div class='text'>
@if (state.resultsVisible) {
תצוגת מפה
} @else {
הסתר מפה
}
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
@import '../../../common.less';

:host {
width: 100%;
height: 120px;

.widget {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
cursor: pointer;

border-radius: 8px;
border: 1px solid @color-blue-5;
background-color: @color-blue-0;
position: relative;
overflow: hidden;

.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.95;
}

.msg {
height: 36px;
width: fit-content;
padding: 0px 14px 0px 12px;
align-items: center;
display: flex;
flex-flow: row;
border-radius: 20px;
border: 1px solid @color-blue-5;
background: @color-blue-8;
position: relative;
z-index: 1;

.icon {
width: 32px;
height: 32px;
.background-image;
}

.text {
color: @color-blue-1;
.font-rag-sans;
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
}

&.map {
.img {
background: url(../../../assets/img/srp-bg-map.svg);
}
border-color: @color-blue-4;
.msg {
.icon {
background-image: url(../../../assets/img/icon-close-blue-3.svg);
background-size: 24px;
}
}
}

&.results {
.img {
background: url(../../../assets/img/srp-bg-results.svg);
}
.msg {
.icon {
background-image: url(../../../assets/img/icon-map-region-blue-2.svg);
background-size: 32px;
}
}
}
&:hover {
.img {
opacity: 1;
}

.msg {
border-color: @color-blue-3;

.text {
color: @color-blue-0;
}
}

&.map {
.msg {
.icon {
background-image: url(../../../assets/img/icon-close-blue-1.svg);
}
}
}

&.results {
.msg {
.icon {
background-image: url(../../../assets/img/icon-map-region-blue-1.svg);
}
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Component, Input } from '@angular/core';
import { SearchResultsPageState } from '../search-results-page-state';

@Component({
selector: 'app-srp-map-toggle',
templateUrl: './srp-map-toggle.component.html',
styleUrl: './srp-map-toggle.component.less'
})
export class SrpMapToggleComponent {
@Input() state: SearchResultsPageState;

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<h3>סינון מהיר:</h3>
<div class='items'>
@for (item of filtersState.staticFilters; track item.key) {
@if (item.key?.indexOf('human_situation') === 0 && item.key && filtersState.situationsMap[item.key]) {
<div class='item' [class.checked]='checkedSituation(item)'
(click)='filtersState.toggleSituation(filtersState.situationsMap[item.key])'
>
<div class='checkbox'></div>
<span class='name'>{{filtersState.situationsMap[item.key].name}}</span>
<span class='count'>{{count((filtersState.allFilteredSituations || []).indexOf(item.key) > -1 ? null : item)}}</span>
</div>
} @else if (item.key?.indexOf('human_service') === 0 && item.key && filtersState.responsesMap[item.key]) {
<div class='item' [class.checked]='checkedResponse(item)'
(click)='filtersState.toggleResponse(filtersState.responsesMap[item.key])'
>
<div class='checkbox'></div>
<span class='name'>{{filtersState.responsesMap[item.key].name}}</span>
<span class='count'>{{count((filtersState.currentSearchParams?.filter_responses || []).indexOf(item.key) > -1 ? null : item)}}</span>
</div>
}
}

@for (response of filtersState.currentSearchParams?.filter_responses; track response) {
@if (filtersState.staticFiltersIds.indexOf(response) === -1) {
<div class='item checked'
(click)='filtersState.toggleResponse(filtersState.responsesMap[response])'
>
<div class='checkbox checked'></div>
<span class='name'>{{filtersState.responsesMap[response].name}}</span>
</div>
}
}
@for (situation of filtersState.allFilteredSituations; track situation) {
@if (filtersState.staticFiltersIds.indexOf(situation) === -1) {
<div class='item checked'
(click)='filtersState.toggleSituation(filtersState.situationsMap[situation])'
>
<div class='checkbox checked'></div>
<span class='name'>{{filtersState.situationsMap[situation].name}}</span>
</div>
}
}

</div>
Loading

0 comments on commit d77717b

Please sign in to comment.