diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cf210ab6..c06e19126 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ the detailed section referring to by linking pull requests or issues. #### Minor +- Broker UI: Added query params for the connector endpoints filter + #### Patch #### Deployment Migration Notes diff --git a/src/app/core/services/api/fake-backend/broker-fake-impl/catalog-fake-impl.ts b/src/app/core/services/api/fake-backend/broker-fake-impl/catalog-fake-impl.ts index 05bd1f2be..74ff6b9b5 100644 --- a/src/app/core/services/api/fake-backend/broker-fake-impl/catalog-fake-impl.ts +++ b/src/app/core/services/api/fake-backend/broker-fake-impl/catalog-fake-impl.ts @@ -112,6 +112,20 @@ export const getCatalogPage = (query: CatalogPageQuery): CatalogPageResult => { {id: '', title: ''}, ], }, + { + id: 'connectorEndpoint', + title: 'Connector', + values: [ + { + id: 'https://example-connector/api/dsp', + title: 'https://example-connector/api/dsp', + }, + { + id: 'https://example-connector2/api/dsp', + title: 'https://example-connector2/api/dsp', + }, + ], + }, ], }, paginationMetadata: { diff --git a/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts b/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts index b99f2cb69..85a3a784b 100644 --- a/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts +++ b/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts @@ -1,6 +1,7 @@ import {Component, HostBinding, OnDestroy, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; import {PageEvent} from '@angular/material/paginator'; +import {ActivatedRoute, Params, Router} from '@angular/router'; import {BehaviorSubject, Subject} from 'rxjs'; import {filter, map, takeUntil} from 'rxjs/operators'; import {Store} from '@ngxs/store'; @@ -14,6 +15,7 @@ import { } from '../../../../component-library/catalog/view-selection/view-mode-enum'; import {BrokerServerApiService} from '../../../../core/services/api/broker-server-api.service'; import {FilterBoxItem} from '../filter-box/filter-box-item'; +import {FilterBoxModel} from '../filter-box/filter-box-model'; import {FilterBoxVisibleState} from '../filter-box/filter-box-visible-state'; import {CatalogActiveFilterPill} from '../state/catalog-active-filter-pill'; import {CatalogPage} from '../state/catalog-page-actions'; @@ -50,10 +52,13 @@ export class CatalogPageComponent implements OnInit, OnDestroy { private assetDetailDialogService: AssetDetailDialogService, private brokerServerApiService: BrokerServerApiService, private store: Store, + private route: ActivatedRoute, + private router: Router, ) {} ngOnInit(): void { this.store.dispatch(CatalogPage.Reset); + this.setConnectorEndpointFiltersFromQueryParamsOnce(); this.startListeningToStore(); this.startEmittingSearchText(); this.startEmittingSortBy(); @@ -98,6 +103,49 @@ export class CatalogPageComponent implements OnInit, OnDestroy { }); } + private setConnectorEndpointFiltersFromQueryParamsOnce() { + const connectorEndpoints = this.parseConnectorEndpoints( + this.route.snapshot.queryParams, + ); + if (!connectorEndpoints?.length) { + return; + } + + this.store.dispatch( + new CatalogPage.AddFilterBox( + this.buildConnectorEndpointFilterBoxModel(connectorEndpoints), + ), + ); + this.expandedFilterId = 'connectorEndpoint'; + // remove query params from url + this.router.navigate([]); + } + + private parseConnectorEndpoints(params: Params): string[] { + if (!('connectorEndpoint' in params)) { + return []; + } + const endpoints = params.connectorEndpoint; + return Array.isArray(endpoints) ? [...new Set(endpoints)] : [endpoints]; + } + + private buildConnectorEndpointFilterBoxModel( + endpoints: string[], + ): FilterBoxModel { + const items: FilterBoxItem[] = endpoints.map((x) => ({ + type: 'ITEM', + id: x, + label: x, + })); + return { + id: 'connectorEndpoint', + title: 'Connector', + selectedItems: items, + availableItems: items, + searchText: '', + }; + } + onDataOfferClick(dataOffer: CatalogDataOfferMapped) { const data = this.assetDetailDialogDataService.brokerDataOfferDetails(dataOffer); diff --git a/src/app/routes/broker-ui/catalog-page/state/catalog-page-actions.ts b/src/app/routes/broker-ui/catalog-page/state/catalog-page-actions.ts index 9d8932483..896c8f452 100644 --- a/src/app/routes/broker-ui/catalog-page/state/catalog-page-actions.ts +++ b/src/app/routes/broker-ui/catalog-page/state/catalog-page-actions.ts @@ -1,5 +1,6 @@ import {CatalogPageSortingItem} from '@sovity.de/broker-server-client'; import {FilterBoxItem} from '../filter-box/filter-box-item'; +import {FilterBoxModel} from '../filter-box/filter-box-model'; import {CatalogActiveFilterPill} from './catalog-active-filter-pill'; export namespace CatalogPage { @@ -35,6 +36,12 @@ export namespace CatalogPage { constructor(public sorting: CatalogPageSortingItem | null) {} } + export class AddFilterBox { + static readonly type = `[${tag}] Add Filter Box`; + + constructor(public filterBox: FilterBoxModel) {} + } + export class UpdateFilterSelectedItems { static readonly type = `[${tag}] Update a Filter's selected Items`; diff --git a/src/app/routes/broker-ui/catalog-page/state/catalog-page-state.ts b/src/app/routes/broker-ui/catalog-page/state/catalog-page-state.ts index fc2724fa2..2e67202d6 100644 --- a/src/app/routes/broker-ui/catalog-page/state/catalog-page-state.ts +++ b/src/app/routes/broker-ui/catalog-page/state/catalog-page-state.ts @@ -102,6 +102,25 @@ export class CatalogPageState implements OnDestroy { ctx.dispatch(CatalogPage.NeedFetch); } + @Action(CatalogPage.AddFilterBox) + onAddFilterBox(ctx: Ctx, action: CatalogPage.AddFilterBox) { + const state = ctx.getState(); + if (action.filterBox.id in state.filters) { + return; + } + ctx.setState( + this._recalculateActiveFilterItems({ + ...state, + filters: { + ...state.filters, + [action.filterBox.id]: FilterBoxVisibleState.buildVisibleState( + action.filterBox, + ), + }, + }), + ); + } + @Action(CatalogPage.UpdateFilterSelectedItems) onUpdateFilterSelectedItems( ctx: Ctx,