Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
akariv committed Oct 17, 2024
1 parent 30dda17 commit ee98672
Show file tree
Hide file tree
Showing 13 changed files with 207 additions and 18 deletions.
4 changes: 3 additions & 1 deletion projects/srm/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ import { MenuPopupAccordionComponent } from './menu/menu-popup/menu-popup-accord
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';
import { SrpAreaSearchButtonsComponent } from './search-results-page/srp-area-search-buttons/srp-area-search-buttons.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -153,7 +154,8 @@ import { SrpMapToggleComponent } from './search-results-page/srp-map-toggle/srp-
MenuPopupAccordionComponent,
SearchResultsPageComponent,
SrpStaticFiltersComponent,
SrpMapToggleComponent
SrpMapToggleComponent,
SrpAreaSearchButtonsComponent
],
imports: [
BrowserModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class='container' [style.width]='width | async' *ngIf='state.showResults | async'
<div class='container' *ngIf='state.showResults | async'
[attr.aria-role]='layout.mobile() ? "modal" : null'
>
<div class='mobile-input' *ngIf='layout.mobile()'>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
background: @color-white;
.no-scrollbars;
overflow-y: scroll;
width: 100%;
.desktop({
max-height: calc(56px * 6);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,17 @@ export class AreaSearchSelectorResultsComponent implements OnInit {
{name: 'איזור באר-שבע', display: 'איזור באר-שבע', bounds: [34.5, 30.8, 35.5, 31.5]},
];

width: Observable<string>;
// width: Observable<string>;

constructor(public layout: LayoutService) {
}

ngOnInit(): void {
this.width = this.state.resultsWidth.pipe(
untilDestroyed(this),
map((w) => this.layout.mobile() ? '100%' : `${w}px`)
);
// this.width = '100%';
// this.state.resultsWidth.pipe(
// untilDestroyed(this),
// map((w) => this.layout.mobile() ? '100%' : `${w}px`)
// );
this.state.showResults.pipe(
untilDestroyed(this),
delay(0),
Expand Down
18 changes: 12 additions & 6 deletions projects/srm/src/app/area-search-selector/area-search-state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export class AreaSearchState {

// Layout and UI
resultsWidth = new BehaviorSubject<number>(200);
showResults = new BehaviorSubject<boolean>(false);
showResults = new BehaviorSubject<boolean>(true);
inputPlaceholder = new BehaviorSubject<string>('חיפוש');
selectorResize = new Subject<void>();

Expand Down Expand Up @@ -96,6 +96,10 @@ export class AreaSearchState {
this.selectorResize.next();
}

forceFocusInput() {
this.areaInputEl?.focus();
}

focusInput() {
this.inputFocus = true;
this.startSearching();
Expand Down Expand Up @@ -143,25 +147,27 @@ export class AreaSearchState {
}

startSearching(): void {
console.log('startSearching', this.searching_);
if (this.searching_) {
return;
}
this.searching_ = true;
this.inputPlaceholder_ = 'ניתן לחפש ישוב או איזור מוגדר';
this.selectorResize.next();
timer(500).subscribe(() => {
this.resultsWidth.next(this.areaInputEl.offsetWidth - 2);
this.showResults_ = true;
});
// timer(500).subscribe(() => {
// this.resultsWidth.next(this.areaInputEl.offsetWidth - 2);
// this.showResults_ = true;
// });
}

stopSearching(): void {
console.log('stopSearching', this.searching_);
if (!this.searching_) {
return;
}
this.searching_ = false;
this.inputPlaceholder_ = 'חיפוש';
this.showResults_ = false;
// this.showResults_ = false;
this.resultsFocus = 0;
this.query_ = null;
timer(500).subscribe(() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export class SearchResultsPageState {

resultsVisible = true;
areaSearchVisible = null;
areaSearchVisible = false;

}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
[class.map]='!state.resultsVisible'
>
<div class='sidebar'>
<app-srp-area-search-buttons
[areaSearchState]='areaSearchState'
[searchState]='searchState'
></app-srp-area-search-buttons>
<app-srp-map-toggle
[state]='state'
></app-srp-map-toggle>
Expand All @@ -24,9 +28,8 @@
></app-search-results>
</div>
<div class='extra'>

</div>
@if (filtersState.active || state.areaSearchVisible) {
@if (filtersState.active || areaSearchState.searching_) {
<div class='overlay'>
@if (filtersState.active) {
<div class='modal'>
Expand All @@ -38,6 +41,14 @@
></app-search-filters>
</div>
}
@if (areaSearchState.searching_) {
<div class='modal' appArrowToTab>
<div class='selection-widget' appArrowToTab>
<app-area-search-selector [state]='areaSearchState'></app-area-search-selector>
<app-area-search-selector-results [state]='areaSearchState'></app-area-search-selector-results>
</div>
</div>
}
</div>
}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
align-items: stretch;
gap: 8px;
}

.search-results {
Expand Down Expand Up @@ -72,7 +73,7 @@
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
pointer-events: all;
z-index: 10;

.modal {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ 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';
import { filter, take, timer } from 'rxjs';

@Component({
selector: 'app-search-results-page',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div class='status button'>
@if (areaSearchState.nationWide_ === false || areaSearchState.area_) {
<span class='icon map-region'></span>
<span class='text'>{{areaSearchState.area_ || 'באיזור המפה'}}</span>
@if (searchState.mapLoading()) {
<span class='count count-loading'></span>
} @else {
<span class='count'>{{searchState.mapCount()}}</span>
}
}
@else {
<span class='icon nation-wide'></span>
<span class='text'>בכל הארץ</span>
@if (searchState.nationalLoading()) {
<span class='count count-loading'></span>
} @else {
<span class='count'>{{searchState.nationWideCount()}}</span>
}
}

</div>
<div class='toggle button' (click)='areaSearch()'>
@if (areaSearchState.area_) {
<span class='icon nation-wide'></span>
<span class='text'>בכל הארץ</span>
@if (searchState.nationalLoading()) {
<span class='count count-loading'></span>
} @else {
<span class='count'>{{searchState.nationWideCount()}}</span>
}
}
@else {
<span class='icon search'></span>
<span class='text'>חיפוש ישוב</span>
}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@import '../../../common.less';

:host {
display: flex;
flex-flow: column;
align-items: stretch;
gap: 8px;

.button {
display: flex;
height: 36px;
padding: 0 2px 0 4px;
justify-content: flex-start;
align-items: center;
border-radius: 32px;

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

.text {
.font-rag-sans;
font-size: 16px;
line-height: 20px;
}

.count {
margin-right: auto;
width: fit-content;
border-radius: 12px;
background: @color-blue-6;
min-width: 24px;
padding: 0 6px;
height: 24px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
color: @color-blue-0;
.font-rag-sans;
font-size: 16px;
font-weight: 600;
line-height: 20px;

&.count-loading {
.background-image;
background-image: url(../../../assets/img/icon-count-loading.svg);
background-size: 7px;
}
}

&.status {
background: @color-white;
box-shadow: 0px 0px 5px 0px rgba(31, 55, 246, 0.20);

.icon {
&.nation-wide {
background-image: url(../../../assets/img/icon-nation-wide-blue-0.svg);
background-size: 32px;
}
&.map-region {
background-image: url(../../../assets/img/icon-map-region-blue-0.svg);
background-size: 32px;
}
}

.text {
color: @color-blue-0;
font-weight: 600;
}
}

&.toggle {
border: 1px solid @color-blue-5;
background: @color-blue-8;
box-shadow: 0px 4px 4px 0px rgba(31, 55, 246, 0.10) inset;
cursor: pointer;

.icon {
&.nation-wide {
background-image: url(../../../assets/img/icon-nation-wide-blue-3.svg);
background-size: 32px;
}
&.search {
background-image: url(../../../assets/img/icon-search-blue-3.svg);
background-size: 24px;
}
}

.text {
color: @color-blue-1;
font-weight: 300;
}

&:hover {
border: 1px solid @color-blue-3;
background: @color-white;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Component, Input } from '@angular/core';
import { AreaSearchState } from '../../area-search-selector/area-search-state';
import { timer } from 'rxjs';
import { SearchState } from '../../search-results/search-state';

@Component({
selector: 'app-srp-area-search-buttons',
templateUrl: './srp-area-search-buttons.component.html',
styleUrl: './srp-area-search-buttons.component.less'
})
export class SrpAreaSearchButtonsComponent {

@Input() areaSearchState: AreaSearchState;
@Input() searchState: SearchState;

areaSearch() {
if (this.areaSearchState.area_) {
this.areaSearchState.selectNationWide();
} else {
this.areaSearchState.startSearching();
timer(100).subscribe(() => {
this.areaSearchState.forceFocusInput();
});
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
align-self: stretch;

h3 {
margin: 0;
padding: 0 4px 4px 4px;
color: @color-gray-1;
.font-rag-sans;
Expand Down

0 comments on commit ee98672

Please sign in to comment.