From 4f7a9b9d8b20ac25714071466e64038f37eab06a Mon Sep 17 00:00:00 2001 From: Tadei-Mykola Date: Wed, 13 Sep 2023 14:45:37 +0300 Subject: [PATCH 1/2] Added filter to events --- .../events-list/events-list.component.html | 26 ++- .../events-list/events-list.component.spec.ts | 79 ++++----- .../events-list/events-list.component.ts | 159 +++++++++++++----- .../component/events/models/event-consts.ts | 34 ++-- .../events/models/events.interface.ts | 6 + .../events/services/events.service.spec.ts | 10 +- .../events/services/events.service.ts | 9 +- src/app/store/actions/ecoEvents.actions.ts | 8 +- src/app/store/effects/ecoEvents.effects.ts | 10 +- 9 files changed, 223 insertions(+), 118 deletions(-) diff --git a/src/app/main/component/events/components/events-list/events-list.component.html b/src/app/main/component/events/components/events-list/events-list.component.html index 5a1a92fb31..ad5d77b225 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.html +++ b/src/app/main/component/events/components/events-list/events-list.component.html @@ -25,14 +25,14 @@
{{ 'homepage.events.time' | translate }} - + {{ 'homepage.events.time-any-time' | translate }} {{ getLangValue(eventTime.nameUa, eventTime.nameEn) }} @@ -41,14 +41,14 @@
{{ 'homepage.events.filter-location' | translate }} - {{ + {{ 'homepage.events.filter-location-аny-location' | translate }} {{ getLangValue(location.nameUa, location.nameEn) }} @@ -57,11 +57,15 @@
{{ 'homepage.events.filter-status' | translate }} - {{ + {{ 'homepage.events.filter-status-аny-status' | translate }} - + {{ getLangValue(status.nameUa, status.nameEn) }} @@ -69,11 +73,15 @@
{{ 'homepage.events.filter-type' | translate }} - {{ + {{ 'homepage.events.filter-аny-type' | translate }} - + {{ getLangValue(type.nameUa, type.nameEn) }} @@ -86,7 +94,7 @@

- {{ 'homepage.events.item-found-text' | translate }} {{ selectedFilters.length }} + {{ 'homepage.events.item-found-text' | translate }} {{ remaining }} {{ 'homepage.events.items-event-text' | translate }}

diff --git a/src/app/main/component/events/components/events-list/events-list.component.spec.ts b/src/app/main/component/events/components/events-list/events-list.component.spec.ts index 53c2d4ca5a..5d8abdeebd 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.spec.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.spec.ts @@ -13,14 +13,20 @@ import { Store } from '@ngrx/store'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { eventStatusList, TagsArray, eventTimeList } from '../../models/event-consts'; import { By } from '@angular/platform-browser'; -import { MatOption } from '@angular/material/core'; +import { MatOption, MatOptionSelectionChange } from '@angular/material/core'; import { FormControl } from '@angular/forms'; import { EventPageResponceDto } from '../../models/events.interface'; describe('EventsListComponent', () => { let component: EventsListComponent; let fixture: ComponentFixture; - + const eventStatusList = [ + { nameEn: 'Open', nameUa: 'Відкритa' }, + { nameEn: 'Closed', nameUa: 'Закритa' }, + { nameEn: 'Joined', nameUa: 'Вже доєднані' }, + { nameEn: 'Created', nameUa: 'Створенa' }, + { nameEn: 'Saved', nameUa: 'Збережена' } + ]; const MockReqest = { page: [], totalElements: 4 @@ -223,7 +229,7 @@ describe('EventsListComponent', () => { { nameEn: 'two', nameUa: 'два' }, { nameEn: 'three', nameUa: 'три' } ]; - const filterRemoved = [{ nameEn: 'three', nameUa: 'три' }]; + const filterRemoved = { nameEn: 'three', nameUa: 'три' }; const res = [ { nameEn: 'one', nameUa: 'один' }, { nameEn: 'two', nameUa: 'два' } @@ -240,6 +246,7 @@ describe('EventsListComponent', () => { expect(spy).toHaveBeenCalledTimes(1); expect(component.selectedFilters).toEqual(res); }); + it('should check weather getUniqueCities works correctly', () => { const expected = [ { nameEn: 'Kyiv', nameUa: 'Київ' }, @@ -280,57 +287,29 @@ describe('EventsListComponent', () => { }); }); - it('should subscribe to form control changes for all form controls', () => { - component.timeFilterControl = timeFilterControl; - component.locationFilterControl = locationFilterControl; - component.statusFilterControl = statusFilterControl; - component.typeFilterControl = typeFilterControl; - - const spy = spyOn(component, 'updateSelectedFilters'); - - component.subscribeOnFormControlsChanges(); - - timeFilterControl.setValue('Some value'); - locationFilterControl.setValue('Some value'); - statusFilterControl.setValue('Some value'); - typeFilterControl.setValue('Some value'); - - expect(spy).toHaveBeenCalledTimes(4); - }); - it('should remove existing filter when deselected', () => { - component.selectedFilters = ['filter1', 'filter2']; - const mockEvent = { isUserInput: true, source: { selected: false } }; - component.updateSelectedFilters('filter1', mockEvent); - expect(component.selectedFilters).toEqual(['filter2']); + let mockEvent: MatOptionSelectionChange = { + isUserInput: true, + source: { selected: true } as MatOption + }; + component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList); + component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList); + mockEvent = { isUserInput: true, source: { selected: false } as MatOption }; + component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList); + expect(component.selectedFilters).toEqual([{ nameEn: 'Open', nameUa: 'Відкритa' }]); }); it('should add new filter when selected', () => { - component.selectedFilters = ['filter1', 'filter2']; - const mockEvent = { isUserInput: true, source: { selected: true } }; - component.updateSelectedFilters('filter3', mockEvent); - expect(component.selectedFilters).toEqual(['filter1', 'filter2', 'filter3']); - }); - - it('should not modify selectedFilters when no user input', () => { - component.selectedFilters = ['filter1', 'filter2']; - const mockEvent = { isUserInput: false, source: { selected: true } }; - component.updateSelectedFilters('filter3', mockEvent); - expect(component.selectedFilters).toEqual(['filter1', 'filter2']); - }); - - it('should not modify selectedFilters when already deselected', () => { - component.selectedFilters = ['filter1', 'filter2']; - const mockEvent = { isUserInput: true, source: { selected: false } }; - component.updateSelectedFilters('filter3', mockEvent); - expect(component.selectedFilters).toEqual(['filter1', 'filter2']); - }); - - it('should not modify selectedFilters when already selected', () => { - component.selectedFilters = ['filter1', 'filter2']; - const mockEvent = { isUserInput: true, source: { selected: true } }; - component.updateSelectedFilters('filter2', mockEvent); - expect(component.selectedFilters).toEqual(['filter1', 'filter2']); + const mockEvent: MatOptionSelectionChange = { + isUserInput: true, + source: { selected: true } as MatOption + }; + component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList); + component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList); + expect(component.selectedFilters).toEqual([ + { nameEn: 'Open', nameUa: 'Відкритa' }, + { nameEn: 'Closed', nameUa: 'Закритa' } + ]); }); it('should check weather search works correctly', () => { diff --git a/src/app/main/component/events/components/events-list/events-list.component.ts b/src/app/main/component/events/components/events-list/events-list.component.ts index 1ea69804ed..f2de32a42a 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.ts @@ -1,5 +1,5 @@ import { Component, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { EventPageResponceDto } from '../../models/events.interface'; +import { EventFilterCriteriaIntarface, EventPageResponceDto } from '../../models/events.interface'; import { UserOwnAuthService } from '@auth-service/user-own-auth.service'; import { ReplaySubject } from 'rxjs'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; @@ -7,14 +7,23 @@ import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; import { IEcoEventsState } from 'src/app/store/state/ecoEvents.state'; import { GetEcoEventsByPageAction } from 'src/app/store/actions/ecoEvents.actions'; -import { TagsArray, eventTimeList, eventStatusList, OptionItem, allSelectedFlags, AllSelectedFlags } from '../../models/event-consts'; +import { + TagsArray, + eventTimeList, + eventStatusList, + OptionItem, + allSelectedFlags, + AllSelectedFlags, + EventFilterCriteria, + allSelectedFilter +} from '../../models/event-consts'; import { LanguageService } from '../../../../i18n/language.service'; import { Router } from '@angular/router'; import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; import { MatDialog } from '@angular/material/dialog'; import { FormControl } from '@angular/forms'; import { MatSelect } from '@angular/material/select'; -import { MatOption } from '@angular/material/core'; +import { MatOption, MatOptionSelectionChange } from '@angular/material/core'; import { UserFriendsService } from '@global-user/services/user-friends.service'; import { FriendModel } from '@global-user/models/friend.model'; import { takeUntil } from 'rxjs/operators'; @@ -40,7 +49,8 @@ export class EventsListComponent implements OnInit, OnDestroy { public isLoggedIn: string; private destroyed$: ReplaySubject = new ReplaySubject(1); ecoEvents$ = this.store.select((state: IAppState): IEcoEventsState => state.ecoEventsState); - + private eventFilterCriteria: EventFilterCriteriaIntarface = EventFilterCriteria; + private allSelectedFilter = allSelectedFilter; public page = 0; public hasNext = true; public remaining = 0; @@ -73,7 +83,6 @@ export class EventsListComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.subscribeOnFormControlsChanges(); this.localStorageService.setEditMode('canUserEdit', false); this.checkUserSingIn(); this.userOwnAuthService.getDataFromLocalStorage(); @@ -107,34 +116,78 @@ export class EventsListComponent implements OnInit, OnDestroy { } } - updateSelectedFilters(value: any, event): void { + public updateSelectedFilters( + value: OptionItem, + event: MatOptionSelectionChange, + optionsList: MatSelect, + dropdownName: string, + filterList: Array + ): void { const existingFilterIndex = this.selectedFilters.indexOf(value); - if (event.isUserInput && !event.source.selected && existingFilterIndex !== -1) { + const isUserInput = event.isUserInput && existingFilterIndex !== -1; + if (isUserInput && !event.source.selected) { this.selectedFilters.splice(existingFilterIndex, 1); + this.deleteFromEventFilterCriteria(value, dropdownName); + this.checkAllSelectedFilters(value, optionsList, dropdownName, filterList); + } else if (event.isUserInput && !event.source.selected) { + this.checkAllSelectedFilters(value, optionsList, dropdownName, filterList); + } else if (!event.source.selected) { + this.deleteFromEventFilterCriteria(value, dropdownName); } - if (event.isUserInput && event.source.selected && existingFilterIndex === -1) { + if (!isUserInput && event.source.selected) { this.selectedFilters.push(value); + this.addToEventFilterCriteria(value, dropdownName); + this.checkAllSelectedFilters(value, optionsList, dropdownName, filterList); } + this.dispatchStore(true); } - subscribeOnFormControlsChanges(): void { - const formControls = [ - { control: this.timeFilterControl }, - { control: this.locationFilterControl }, - { control: this.statusFilterControl }, - { control: this.typeFilterControl } - ]; - - formControls.forEach((formControl) => { - formControl.control.valueChanges.subscribe((value) => { - this.updateSelectedFilters(value, Event); + private checkAllSelectedFilters(value: OptionItem, optionsList: MatSelect, dropdownName: string, filterList: Array) { + if (this.allSelectedFlags[dropdownName]) { + optionsList.options.first.deselect(); + filterList.forEach((item) => { + if (item.nameEn !== value.nameEn) { + this.addToEventFilterCriteria(item, dropdownName); + } }); - }); + this.selectedFilters = this.selectedFilters.filter((item) => this.allSelectedFilter[dropdownName].nameEn !== item.nameEn); + this.selectedFilters = [...this.selectedFilters, ...filterList.filter((item) => item.nameEn !== value.nameEn)]; + } + + this.allSelectedFlags[dropdownName] = this.eventFilterCriteria[dropdownName].length >= filterList.length; + + if (this.allSelectedFlags[dropdownName]) { + optionsList.options.first.select(); + this.selectedFilters = this.selectedFilters.filter((item1) => !filterList.some((item2) => item2.nameEn === item1.nameEn)); + this.selectedFilters.push(this.allSelectedFilter[dropdownName]); + this.eventFilterCriteria[dropdownName] = []; + } + } + + private deleteFromEventFilterCriteria(value: OptionItem, dropdownName: string) { + this.eventFilterCriteria = { + ...this.eventFilterCriteria, + [dropdownName]: this.eventFilterCriteria[dropdownName].filter((item) => item !== value.nameEn) + }; + } + + private addToEventFilterCriteria(value: OptionItem, dropdownName: string) { + this.eventFilterCriteria = { + ...this.eventFilterCriteria, + [dropdownName]: [...this.eventFilterCriteria[dropdownName], value.nameEn] + }; } public dispatchStore(res: boolean): void { if (this.hasNext && this.page !== undefined) { - this.store.dispatch(GetEcoEventsByPageAction({ currentPage: this.page, numberOfEvents: this.eventsPerPage, reset: res })); + this.store.dispatch( + GetEcoEventsByPageAction({ + currentPage: this.page, + numberOfEvents: this.eventsPerPage, + reset: res, + filter: this.eventFilterCriteria + }) + ); } } @@ -154,26 +207,23 @@ export class EventsListComponent implements OnInit, OnDestroy { return cities; } - public toggleAllSelection(optionsList: any, dropdownName: string): void { + public toggleAllSelection(optionsList: MatSelect, dropdownName: string): void { this.allSelectedFlags[dropdownName] = !this.allSelectedFlags[dropdownName]; - this.isSelectedOptions(optionsList, dropdownName); - } - - public isSelectedOptions(optionsList: any, dropdownName: string): void { - this.optionsList = optionsList; if (this.allSelectedFlags[dropdownName]) { - this.optionsList.options.forEach((item: MatOption) => { - if (item.value !== 0) { - this.selectedFilters.push(item.value); + optionsList.options.forEach((item: MatOption) => { + if (item.value === 0) { + this.selectedFilters.push(allSelectedFilter[dropdownName]); } + if (!this.eventFilterCriteria[dropdownName]) { + this.eventFilterCriteria[dropdownName] = []; + } + this.selectedFilters = this.selectedFilters.filter((value) => value !== item.value); item.select(); - this.allSelectedFlags[dropdownName] = true; }); } else { - this.optionsList.options.forEach((item: MatOption) => { + optionsList.options.forEach((item: MatOption) => { item.deselect(); - this.allSelectedFlags[dropdownName] = false; - this.selectedFilters = this.selectedFilters.filter((value) => value !== item.value); + this.selectedFilters = this.selectedFilters.filter((value) => value !== item.value && value !== allSelectedFilter[dropdownName]); }); } } @@ -182,12 +232,33 @@ export class EventsListComponent implements OnInit, OnDestroy { this.searchToggle = !this.searchToggle; } - public deleteOneFilter(filter, index): void { - [this.timeList, this.statusesList, this.locationList, this.typesList].forEach((list) => { - const item = list.options.find((option: MatOption) => filter.nameEn === option.value.nameEn); - if (item) { + public deleteOneFilter(filter: OptionItem, index: number): void { + let deleted = true; + const keyMapping = { + eventTime: 0, + statuses: 1, + cities: 2, + tags: 3 + }; + [this.timeList, this.statusesList, this.locationList, this.typesList].forEach((list, arrayIndex) => { + Object.keys(this.allSelectedFilter).forEach((dropdownName) => { + if (this.allSelectedFilter[dropdownName].nameEn === filter.nameEn) { + list.options.forEach((item) => { + if (arrayIndex === keyMapping[dropdownName]) { + item.deselect(); + this.allSelectedFlags[dropdownName] = false; + } + }); + if (deleted) { + this.selectedFilters.splice(index, 1); + deleted = false; + } + } + }); + const item2 = list.options.find((option: MatOption) => filter.nameEn === option.value.nameEn); + if (item2) { this.selectedFilters.splice(index, 1); - item.deselect(); + item2.deselect(); } }); } @@ -199,6 +270,16 @@ export class EventsListComponent implements OnInit, OnDestroy { }); }); this.selectedFilters.splice(0, this.selectedFilters.length); + Object.keys(this.eventFilterCriteria).forEach((dropdownName) => { + if (this.eventFilterCriteria[dropdownName].length) { + this.eventFilterCriteria[dropdownName] = []; + } + }); + Object.keys(this.allSelectedFlags).forEach((dropdownName) => { + if (this.allSelectedFlags[dropdownName].length) { + this.allSelectedFlags[dropdownName] = false; + } + }); } private checkUserSingIn(): void { diff --git a/src/app/main/component/events/models/event-consts.ts b/src/app/main/component/events/models/event-consts.ts index ece532aec9..fde0c99a03 100644 --- a/src/app/main/component/events/models/event-consts.ts +++ b/src/app/main/component/events/models/event-consts.ts @@ -9,17 +9,24 @@ export interface OptionItem { } export interface AllSelectedFlags { - typeList: boolean; - timeList: boolean; - statusList: boolean; - locationList: boolean; + tags: boolean; + eventTime: boolean; + statuses: boolean; + cities: boolean; } export const allSelectedFlags = { - timeList: false, - statusList: false, - typeList: false, - locationList: false + eventTime: false, + statuses: false, + tags: false, + cities: false +}; + +export const allSelectedFilter = { + eventTime: { nameEn: 'Any time', nameUa: 'Будь-який час' }, + cities: { nameEn: 'All cites', nameUa: 'Всі міста' }, + statuses: { nameEn: 'Any status', nameUa: 'Будь-який статус' }, + tags: { nameEn: 'All types', nameUa: 'Всі типи' } }; export const TagsArray = [ @@ -29,8 +36,8 @@ export const TagsArray = [ ]; export const eventTimeList = [ - { nameEn: 'Upcoming', nameUa: 'Майбутній' }, - { nameEn: 'Passed', nameUa: 'Завершений' } + { nameEn: 'Future', nameUa: 'Майбутній' }, + { nameEn: 'Past', nameUa: 'Завершений' } ]; export const eventStatusList = [ @@ -63,3 +70,10 @@ export const WeekArray = [ { nameEn: '6 days', nameUa: '6 днів' }, { nameEn: '7 days', nameUa: '7 днів' } ]; + +export let EventFilterCriteria = { + eventTime: [], + cities: [], + statuses: [], + tags: [] +}; diff --git a/src/app/main/component/events/models/events.interface.ts b/src/app/main/component/events/models/events.interface.ts index cce9c3513b..3810cd51e4 100644 --- a/src/app/main/component/events/models/events.interface.ts +++ b/src/app/main/component/events/models/events.interface.ts @@ -159,3 +159,9 @@ export interface InitialStartDate { initialDate: Date; initialStartTime: string; } +export interface EventFilterCriteriaIntarface { + eventTime: Array; + cities: Array; + statuses: Array; + tags: Array; +} diff --git a/src/app/main/component/events/services/events.service.spec.ts b/src/app/main/component/events/services/events.service.spec.ts index 88b78f63cf..ac37973a67 100644 --- a/src/app/main/component/events/services/events.service.spec.ts +++ b/src/app/main/component/events/services/events.service.spec.ts @@ -2,12 +2,15 @@ import { TestBed } from '@angular/core/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; import { EventsService } from 'src/app/main/component/events/services/events.service'; import { environment } from '@environment/environment'; +import { EventFilterCriteriaIntarface } from '../models/events.interface'; +import { EventFilterCriteria } from '../models/event-consts'; describe('EventsService', () => { let service: EventsService; let httpTestingController: HttpTestingController; const url = environment.backendLink; const formData = new FormData(); + const eventFilterCriteria: EventFilterCriteriaIntarface = EventFilterCriteria; const data: any = { additionalImages: ['string'], dates: [ @@ -85,10 +88,13 @@ describe('EventsService', () => { }); it('should make GET request to get all events', () => { - service.getEvents(0, 1).subscribe((event: any) => { + service.getEvents(0, 1, eventFilterCriteria).subscribe((event: any) => { expect(event).toEqual(data); }); - const req = httpTestingController.expectOne(`${url}events?page=0&size=1`); + const req = httpTestingController.expectOne( + `${url}events?page=0&size=1&cities=${eventFilterCriteria.cities}&tags=${eventFilterCriteria.tags}` + + `&eventTime=${eventFilterCriteria.eventTime}&statuses=${eventFilterCriteria.statuses}` + ); expect(req.request.method).toEqual('GET'); req.flush(data); }); diff --git a/src/app/main/component/events/services/events.service.ts b/src/app/main/component/events/services/events.service.ts index 53116556f8..fb5a9b9360 100644 --- a/src/app/main/component/events/services/events.service.ts +++ b/src/app/main/component/events/services/events.service.ts @@ -2,7 +2,7 @@ import { Injectable, OnDestroy } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject, BehaviorSubject } from 'rxjs'; import { environment } from '@environment/environment'; -import { EventResponseDto, PagePreviewDTO, DateEvent } from '../models/events.interface'; +import { EventResponseDto, PagePreviewDTO, DateEvent, EventFilterCriteriaIntarface } from '../models/events.interface'; @Injectable({ providedIn: 'root' @@ -66,8 +66,11 @@ export class EventsService implements OnDestroy { return this.http.put(`${this.backEnd}events/update`, formData); } - public getEvents(page: number, quantity: number): Observable { - return this.http.get(`${this.backEnd}events?page=${page}&size=${quantity}`); + public getEvents(page: number, quantity: number, filter: EventFilterCriteriaIntarface): Observable { + return this.http.get( + `${this.backEnd}events?page=${page}&size=${quantity}&cities=${filter.cities}` + + `&tags=${filter.tags}&eventTime=${filter.eventTime}&statuses=${filter.statuses}` + ); } public getSubscribedEvents(page: number, quantity: number): Observable { diff --git a/src/app/store/actions/ecoEvents.actions.ts b/src/app/store/actions/ecoEvents.actions.ts index 650070d61f..8094954576 100644 --- a/src/app/store/actions/ecoEvents.actions.ts +++ b/src/app/store/actions/ecoEvents.actions.ts @@ -1,5 +1,9 @@ import { createAction, props } from '@ngrx/store'; -import { EventPageResponceDto, EventResponseDto } from 'src/app/main/component/events/models/events.interface'; +import { + EventFilterCriteriaIntarface, + EventPageResponceDto, + EventResponseDto +} from 'src/app/main/component/events/models/events.interface'; export enum EventsActions { GetEcoEventsByPage = '[Events] Get events by page', @@ -37,7 +41,7 @@ export const DeleteEcoEventSuccessAction = createAction(EventsActions.DeleteEcoE export const GetEcoEventsByPageAction = createAction( EventsActions.GetEcoEventsByPage, - props<{ currentPage: number; numberOfEvents: number; reset: boolean }>() + props<{ currentPage: number; numberOfEvents: number; reset: boolean; filter: EventFilterCriteriaIntarface }>() ); export const GetEcoEventsByPageSuccessAction = createAction( diff --git a/src/app/store/effects/ecoEvents.effects.ts b/src/app/store/effects/ecoEvents.effects.ts index 73160343b5..acc6760c17 100644 --- a/src/app/store/effects/ecoEvents.effects.ts +++ b/src/app/store/effects/ecoEvents.effects.ts @@ -3,7 +3,11 @@ import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Store } from '@ngrx/store'; import { of } from 'rxjs'; import { catchError, map, mergeMap } from 'rxjs/operators'; -import { EventPageResponceDto, EventResponseDto } from 'src/app/main/component/events/models/events.interface'; +import { + EventFilterCriteriaIntarface, + EventPageResponceDto, + EventResponseDto +} from 'src/app/main/component/events/models/events.interface'; import { EventsService } from 'src/app/main/component/events/services/events.service'; import { CreateEcoEventAction, @@ -32,8 +36,8 @@ export class EventsEffects { getEcoEventsByPage = createEffect(() => { return this.actions.pipe( ofType(GetEcoEventsByPageAction), - mergeMap((actions: { currentPage: number; numberOfEvents: number; reset: boolean }) => { - return this.eventsService.getEvents(actions.currentPage, actions.numberOfEvents).pipe( + mergeMap((actions: { currentPage: number; numberOfEvents: number; reset: boolean; filter: EventFilterCriteriaIntarface }) => { + return this.eventsService.getEvents(actions.currentPage, actions.numberOfEvents, actions.filter).pipe( map((ecoEvents: EventResponseDto) => GetEcoEventsByPageSuccessAction({ ecoEvents, reset: actions.reset })), catchError((error) => of(ReceivedFailureAction(error))) ); From 83473198dc504ad70bfb45b22f72fb630f706012 Mon Sep 17 00:00:00 2001 From: Tadei-Mykola Date: Thu, 14 Sep 2023 12:38:53 +0300 Subject: [PATCH 2/2] Changed the updateSelectedFilters method --- .../components/events-list/events-list.component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/main/component/events/components/events-list/events-list.component.ts b/src/app/main/component/events/components/events-list/events-list.component.ts index f2de32a42a..069ddd6ba1 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.ts @@ -129,11 +129,16 @@ export class EventsListComponent implements OnInit, OnDestroy { this.selectedFilters.splice(existingFilterIndex, 1); this.deleteFromEventFilterCriteria(value, dropdownName); this.checkAllSelectedFilters(value, optionsList, dropdownName, filterList); - } else if (event.isUserInput && !event.source.selected) { + } + + if (event.isUserInput && !event.source.selected) { this.checkAllSelectedFilters(value, optionsList, dropdownName, filterList); - } else if (!event.source.selected) { + } + + if (!event.source.selected) { this.deleteFromEventFilterCriteria(value, dropdownName); } + if (!isUserInput && event.source.selected) { this.selectedFilters.push(value); this.addToEventFilterCriteria(value, dropdownName);