diff --git a/angular.json b/angular.json index 1e148816..da447ab7 100644 --- 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 index 5a41bfdb..d92bfa28 100644 --- 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 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 1c784fa8..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,12 +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 ca440925..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,77 @@ :host { position: relative; + .open-modal { position: relative; - background-color: @color-white; + width: 100%; + height: 28px; + cursor: pointer; - + display: flex; - flex-direction: row; - justify-content: center; + flex-flow: row; align-items: center; + justify-content: center; + gap: 4px; + + padding: 0 8px; + padding-right: 4px; + + .img { + width: 24px; + height: 24px; + .background-image; + background-size: 24px; + background-position: center; + } + border-radius: 4px; + .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; + line-height: 20px; + + &.state-default { + border: 1px solid @color-blue-5; + background-color: @color-blue-8; - &.active { - border: 1px solid @color-gray-1; - color: @color-gray-1; + 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; - img { - display: none; - } - &:hover { - color: @color-white; - background-color: @color-gray-1; - transform: translateY(-1px); - img.hover { - display: block; - } + color: @color-blue-0; + font-weight: 600; - .count { - top: -3px; - left: -3px; - width: 18px; - height: 18px; - border: 1px solid @color-white; + .img { + background-image: url('../../assets/img/icon-filter-blue-0.svg'); } } - &:not(:hover) { - img.nohover { - display: block; - } + + &.state-inactive { + border: 1px solid @color-gray-6; + background: @color-white; + + color: @color-gray-3; + font-weight: 300; } + + } .discovery { position: absolute; - right: 0; + right: 50%; + transform: translateX(50%); width: 160px; - background: rgba(0, 0, 0, 0.7); + background: rgba(31, 55, 246, 0.70); border-radius: 4px; padding: 4px 8px; cursor: pointer; @@ -91,34 +104,19 @@ height: 16px; border-top-left-radius: 4px; transform-origin: 8px 8px; - background: rgba(0, 0, 0, 0.7); + background: rgba(31, 55, 246, 0.70); } } - .mobile({ + top: 44px; + .arrow { top: -16px; - transform: translateY(-100%); - .arrow { - right: 20px; - top: 100%; - &::after { - transform: rotate(-135deg); - top: -9px; - left: 2px; - } - } - }); - .desktop({ - top: 48px; - .arrow { - top: -16px; - right: 20px; - &::after { - transform: rotate(45deg); - top: 9px; - left: 2px; - } + right: calc(50% ~'-' 16px); + &::after { + transform: rotate(45deg); + top: 9px; + left: 2px; } - }) + } } } 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 9fbfa328..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,19 +1,48 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +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-filter-blue-0.svg b/projects/srm/src/assets/img/icon-filter-blue-0.svg new file mode 100644 index 00000000..c07b3a26 --- /dev/null +++ b/projects/srm/src/assets/img/icon-filter-blue-0.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/projects/srm/src/assets/img/icon-filter-blue-1.svg b/projects/srm/src/assets/img/icon-filter-blue-1.svg new file mode 100644 index 00000000..45427738 --- /dev/null +++ b/projects/srm/src/assets/img/icon-filter-blue-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/projects/srm/src/assets/img/icon-filter-blue-2.svg b/projects/srm/src/assets/img/icon-filter-blue-2.svg new file mode 100644 index 00000000..22011b8a --- /dev/null +++ b/projects/srm/src/assets/img/icon-filter-blue-2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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/projects/srm/src/common.less b/projects/srm/src/common.less index 9bac99b5..19b482c7 100644 --- a/projects/srm/src/common.less +++ b/projects/srm/src/common.less @@ -5,7 +5,7 @@ @color-gray-2: #555452; // neutral-600 @color-gray-3: #767573; // neutral-500 @color-gray-35: #989693; // neutral-400 -@color-gray-4: #B9B7B4; // neutral-300 +@color-gray-4: #b9b7b4; // neutral-300 @color-gray-5: #E1DEDB; // neutral-200 @color-gray-6: #F1EEEA; // neutral-150 @color-gray-7: #FFFDF5; // neutral-100 diff --git a/tsconfig.json b/tsconfig.json index 6c5298f4..0f68bbe9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,8 @@ "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, + "noImplicitOverride": false, + "noPropertyAccessFromIndexSignature": false, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, @@ -16,12 +18,13 @@ "importHelpers": true, "target": "ES2022", "module": "ES2022", + "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ], "strictPropertyInitialization": false, - "useDefineForClassFields": false + "emitDecoratorMetadata": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false,