diff --git a/projects/srm/src/app/consts.ts b/projects/srm/src/app/consts.ts index ccad14e8..03450e29 100644 --- 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 index ae791883..436f232e 100644 --- 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' - > + > + + - + + +
+ @for (response of filtersState.currentSearchParams.filter_responses; track response) { + + } + @for (situation of filtersState.currentSearchParams.allFilteredSituations; track situation) { + + } +
+
+
+
+
+
+
+
+
+ \ No newline at end of file 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 index 1516a8bb..1b355608 100644 --- 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; + } + } } \ No newline at end of file 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 index 44b23679..81330905 100644 --- 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 index 2f908f62..54299d16 100644 --- 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,9 +1,9 @@ - -
+
וואו, המון תוצאות… שווה אולי למקד את המפה או להפעיל סינון diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.less b/projects/srm/src/app/search-filters-button/search-filters-button.component.less index 7405b8f1..5c36b2bf 100644 --- a/projects/srm/src/app/search-filters-button/search-filters-button.component.less +++ b/projects/srm/src/app/search-filters-button/search-filters-button.component.less @@ -3,64 +3,11 @@ :host { position: relative; - width: 100%; - padding-left: 8px; .open-modal { - // position: relative; - // background-color: @color-white; - // cursor: pointer; - - // display: flex; - // flex-direction: row; - // justify-content: center; - // align-items: center; - - // .font-rag-sans; - // font-weight: 600; - // font-size: 16px; - // line-height: 21px; - // color: @color-gray-3; - - // height: 32px; - // padding-left: 16px; - // padding-right: 4px; - - // border: 1px solid @color-gray-5; - // border-radius: 16px; - - // &.active { - // border: 1px solid @color-gray-1; - // color: @color-gray-1; - // } - - // img { - // display: none; - // } - // &:hover { - // color: @color-white; - // background-color: @color-gray-1; - // transform: translateY(-1px); - // img.hover { - // display: block; - // } - - // .count { - // top: -3px; - // left: -3px; - // width: 18px; - // height: 18px; - // border: 1px solid @color-white; - // } - // } - // &:not(:hover) { - // img.nohover { - // display: block; - // } - // } position: relative; width: 100%; - height: 32px; + height: 28px; cursor: pointer; @@ -77,21 +24,49 @@ width: 24px; height: 24px; .background-image; - background-image: url('../../assets/img/icon-filter-blue-2.svg'); background-size: 24px; background-position: center; } border-radius: 4px; - border: 1px solid @color-blue-5; - background-color: @color-blue-8; - color: @color-blue-2; .font-rag-sans; font-size: 16px; - font-weight: 600; line-height: 20px; + &.state-default { + border: 1px solid @color-blue-5; + background-color: @color-blue-8; + + color: @color-blue-2; + font-weight: 600; + + .img { + background-image: url('../../assets/img/icon-filter-blue-2.svg'); + } + } + + &.state-active { + border: 1px solid @color-blue-0; + background-color: @color-blue-8; + + color: @color-blue-0; + font-weight: 600; + + .img { + background-image: url('../../assets/img/icon-filter-blue-0.svg'); + } + } + + &.state-inactive { + border: 1px solid @color-gray-6; + background: @color-white; + + color: @color-gray-3; + font-weight: 300; + } + + } .discovery { position: absolute; diff --git a/projects/srm/src/app/search-filters-button/search-filters-button.component.ts b/projects/srm/src/app/search-filters-button/search-filters-button.component.ts index 857d29d6..6548d0be 100644 --- a/projects/srm/src/app/search-filters-button/search-filters-button.component.ts +++ b/projects/srm/src/app/search-filters-button/search-filters-button.component.ts @@ -1,18 +1,48 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { FiltersState } from '../search-filters/filters-state'; +import { LayoutService } from '../layout.service'; @Component({ selector: 'app-search-filters-button', templateUrl: './search-filters-button.component.html', styleUrls: ['./search-filters-button.component.less'] }) -export class SearchFiltersButtonComponent implements OnInit { +export class SearchFiltersButtonComponent { - @Input() totalFilters: number; - @Input() showDiscovery: boolean; + @Input() filtersState: FiltersState; @Output() activate = new EventEmitter(); - constructor() { } - ngOnInit(): void { + constructor(private layout: LayoutService) { } + + get message(): string { + if (this.filtersState.active) { + if (!this.filtersState.totalFilters) { + return 'ללא סינון'; + } + } + if (this.filtersState.totalFilters) { + if (this.layout.mobile()) { + return `${this.filtersState.totalFilters}`; + } + if (this.filtersState.totalFilters > 1) { + return `${this.filtersState.totalFilters} מסננים:`; + } else { + return `מסנן אחד:`; + } + } + return `סינון`; + } + + get state() { + if (!!this.filtersState.totalFilters) { + return 'active'; + } else { + if (!this.filtersState.active) { + return 'default'; + } else { + return 'inactive'; + } + } } } diff --git a/projects/srm/src/app/search-filters/filters-state.ts b/projects/srm/src/app/search-filters/filters-state.ts index 6825c536..fd34bcd6 100644 --- a/projects/srm/src/app/search-filters/filters-state.ts +++ b/projects/srm/src/app/search-filters/filters-state.ts @@ -84,8 +84,8 @@ export class FiltersState { } = {}; responseItems: TaxonomyItem[]; responseCategoryItems: TaxonomyItem[]; - situationsMap: any = {}; - responsesMap: any = {}; + situationsMap: {[key: string]: TaxonomyItem} = {}; + responsesMap: {[key: string]: TaxonomyItem} = {}; currentSearchParams: SearchParams; resultCount = -1; @@ -320,6 +320,13 @@ export class FiltersState { this.params.next(sp); } + clearOne(item: TaxonomyItem) { + SITUATION_FILTERS.forEach(f => { + (this.currentSearchParams as any)['filter_' + f] = (this.currentSearchParams as any)['filter_' + f].filter((x: string) => x !== item.id); + }); + this.closeWithParams(); + } + clear() { SITUATION_FILTERS.forEach(f => (this.currentSearchParams as any)['filter_' + f] = []); this.currentSearchParams.filter_responses = []; @@ -333,6 +340,14 @@ export class FiltersState { this.active = false; } + toggle() { + if (!this.active) { + this.active = true; + } else { + this.closeWithParams(); + } + } + checkDiscoveryNeeded(result: QueryCardResult): void { const THRESHOLD = 40; if (this.platform.server()) { diff --git a/projects/srm/src/app/search-filters/search-filters.component.html b/projects/srm/src/app/search-filters/search-filters.component.html index 7d9c3482..ba488bec 100644 --- a/projects/srm/src/app/search-filters/search-filters.component.html +++ b/projects/srm/src/app/search-filters/search-filters.component.html @@ -1,6 +1,3 @@ -
- -
diff --git a/projects/srm/src/app/search-filters/search-filters.component.less b/projects/srm/src/app/search-filters/search-filters.component.less index 746a6452..f7e594c4 100644 --- a/projects/srm/src/app/search-filters/search-filters.component.less +++ b/projects/srm/src/app/search-filters/search-filters.component.less @@ -13,31 +13,6 @@ flex-flow: column; align-items: center; - .filtering-header { - width: 100%; - display: flex; - flex-flow: row; - gap: 8px; - align-items: center; - border-bottom: 1px solid @color-blue-7; - background: @color-white; - .desktop({ - height: 56px; - padding: 0 8px; - .back { - flex: 0 0 auto; - .button-image(@color-blue-8, @color-blue-7); - width: 40px; - height: 40px; - border-radius: 24px; - border: 1px solid @color-blue-6; - &, &:hover { - background-size: 30px; - background-image: url('../../assets/img/icon-back-blue-1.svg'); - } - } - }); - } .situations-container { width: 100%; display: flex; diff --git a/projects/srm/src/app/searchbox-header/searchbox-header.component.html b/projects/srm/src/app/searchbox-header/searchbox-header.component.html index 9972a387..00d6a9ad 100644 --- a/projects/srm/src/app/searchbox-header/searchbox-header.component.html +++ b/projects/srm/src/app/searchbox-header/searchbox-header.component.html @@ -1,43 +1,46 @@ - -
- - -
- {{placeholder}} -
-
- -

{{searchParams.query}}

- - -

{{responseDisplay}}

-

כל שירות

-
- - עבור {{situationDisplay}} - - - עבור כולם - - - - באיזור {{searchParams.city_name}} - - - - באיזור המפה - - - - של {{orgDisplay}} - -
- -
-
- +
+ +
+ + +
+ {{placeholder}} +
+
+ +

{{searchParams.query}}

+ + +

{{responseDisplay}}

+

כל שירות

+
+ + עבור {{situationDisplay}} + + + עבור כולם + + + + באיזור {{searchParams.city_name}} + + + + באיזור המפה + + + + של {{orgDisplay}} + +
+ +
+
+ +
+
- \ No newline at end of file + \ No newline at end of file diff --git a/projects/srm/src/app/searchbox-header/searchbox-header.component.less b/projects/srm/src/app/searchbox-header/searchbox-header.component.less index bfd2b886..0bcf3312 100644 --- a/projects/srm/src/app/searchbox-header/searchbox-header.component.less +++ b/projects/srm/src/app/searchbox-header/searchbox-header.component.less @@ -3,14 +3,24 @@ :host { width: 100%; display: flex; + flex-flow: column; + align-items: stretch; background: @color-white; - .mobile({ border-bottom: 1px solid @color-gray-6; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); - padding: 8px; + padding: 8px 0; gap: 8px; + }); + +} +.wrapper { + width: 100%; + display: flex; + + .mobile({ + padding: 0 8px; flex-flow: column; }); .desktop({ diff --git a/projects/srm/src/app/situation/situation.component.html b/projects/srm/src/app/situation/situation.component.html index f8ad45e7..d65283f1 100644 --- a/projects/srm/src/app/situation/situation.component.html +++ b/projects/srm/src/app/situation/situation.component.html @@ -1,4 +1,4 @@ -
←
+
+ + +
diff --git a/projects/srm/src/app/situation/situation.component.less b/projects/srm/src/app/situation/situation.component.less index 89ae0a56..f7347968 100644 --- a/projects/srm/src/app/situation/situation.component.less +++ b/projects/srm/src/app/situation/situation.component.less @@ -76,4 +76,29 @@ line-height: 13px; } } + + &.selected { + height: 28px; + border-color: @color-blue-3; + cursor: pointer; + color: @color-black; + font-weight: 600; + background-image: url(../../assets/img/icon-person-blue-4.svg); + background-position: center right 2px; + padding-right: 22px; + + .icon { + flex: 0 0 auto; + .background-image; + display: inline-block; + + &.close { + background-image: url(../../assets/img/icon-response-deselect.svg); + } + background-size: 16px; + width: 16px; + height: 16px; + margin-left: 2px; + } + } } \ No newline at end of file diff --git a/projects/srm/src/app/situation/situation.component.ts b/projects/srm/src/app/situation/situation.component.ts index c0b3327b..0676f30f 100644 --- a/projects/srm/src/app/situation/situation.component.ts +++ b/projects/srm/src/app/situation/situation.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { TaxonomyItem } from '../consts'; import { LayoutService } from '../layout.service'; @@ -12,6 +12,9 @@ export class SituationComponent implements OnInit { @Input() situation: TaxonomyItem = {}; @Input() small = false; @Input() link = false; + @Input() selected = false; + + @Output() clicked = new EventEmitter(); hover = false; @@ -24,4 +27,7 @@ export class SituationComponent implements OnInit { return this.small || this.layout.mobile(); } + onClick() { + this.clicked.emit(); + } } diff --git a/projects/srm/src/assets/img/chevron-left-blue-1.svg b/projects/srm/src/assets/img/chevron-left-blue-1.svg new file mode 100644 index 00000000..eb512c0c --- /dev/null +++ b/projects/srm/src/assets/img/chevron-left-blue-1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/projects/srm/src/assets/img/icon-person-blue-4.svg b/projects/srm/src/assets/img/icon-person-blue-4.svg new file mode 100644 index 00000000..11cec545 --- /dev/null +++ b/projects/srm/src/assets/img/icon-person-blue-4.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/tsconfig.json b/tsconfig.json index 6c5298f4..6fb4cda7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,8 @@ "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, @@ -16,18 +18,18 @@ "importHelpers": true, "target": "ES2022", "module": "ES2022", + "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ], "strictPropertyInitialization": false, - "useDefineForClassFields": false + "emitDecoratorMetadata": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, - "strictTemplates": true, - "strictPropertyInitialization": false + "strictTemplates": true } }