From 72c3c2f6a0ff27544657a401ed389177ae48ed12 Mon Sep 17 00:00:00 2001 From: Henry Taeschner Date: Thu, 22 Feb 2024 10:45:59 +0100 Subject: [PATCH] feat: fix search of apps --- .../app-detail/app-detail.component.html | 4 +- .../app-detail/app-detail.component.ts | 29 ++++--- .../app-search/app-search.component.html | 2 +- .../app-search/app-search.component.scss | 6 ++ .../app-search/app-search.component.ts | 83 ++++++++++--------- .../product-search.component.ts | 13 +-- 6 files changed, 77 insertions(+), 60 deletions(-) diff --git a/src/app/product-store/app-detail/app-detail.component.html b/src/app/product-store/app-detail/app-detail.component.html index c6af714..66dc226 100644 --- a/src/app/product-store/app-detail/app-detail.component.html +++ b/src/app/product-store/app-detail/app-detail.component.html @@ -21,7 +21,7 @@ '600px': '100vw', }" > -
+ {{ 'ACTIONS.' + this.changeMode + '.MFE.HEADER' | translate }} @@ -293,7 +293,7 @@
-
+ {{ 'ACTIONS.' + this.changeMode + '.MS.HEADER' | translate }} diff --git a/src/app/product-store/app-detail/app-detail.component.ts b/src/app/product-store/app-detail/app-detail.component.ts index abf50f1..d8a2169 100644 --- a/src/app/product-store/app-detail/app-detail.component.ts +++ b/src/app/product-store/app-detail/app-detail.component.ts @@ -17,9 +17,7 @@ import { MicroservicesAPIService, GetMicroserviceByAppIdRequestParams } from 'src/app/shared/generated' -import { AppAbstract } from '../app-search/app-search.component' - -export type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT' | 'COPY' +import { AppAbstract, ChangeMode } from '../app-search/app-search.component' export interface MfeForm { appId: FormControl @@ -57,6 +55,7 @@ export class AppDetailComponent implements OnChanges { @Output() displayDialogChange = new EventEmitter() @Output() appChanged = new EventEmitter() + private debug = true public mfe: Microfrontend | undefined public ms: Microservice | undefined public formGroupMfe: FormGroup @@ -101,16 +100,20 @@ export class AppDetailComponent implements OnChanges { } ngOnChanges() { - if (this.appAbstract?.id && this.displayDialog) { - if (this.changeMode !== 'CREATE') { - if (this.appAbstract.appType === 'MFE') this.getMfe() - if (this.appAbstract.appType === 'MS') this.getMs() - } else if (this.changeMode === 'CREATE') { - this.ms = undefined - this.mfe = undefined - this.formGroupMs.reset() - this.formGroupMfe.reset() - } + if (this.changeMode === 'CREATE') { + this.ms = undefined + this.mfe = undefined + this.formGroupMs.reset() + this.formGroupMfe.reset() + } else if (this.appAbstract?.id) { + if (this.appAbstract.appType === 'MFE') this.getMfe() + if (this.appAbstract.appType === 'MS') this.getMs() + } + } + private log(text: string, obj?: object): void { + if (this.debug) { + if (obj) console.log('app detail: ' + text, obj) + else console.log('app detail: ' + text) } } diff --git a/src/app/product-store/app-search/app-search.component.html b/src/app/product-store/app-search/app-search.component.html index 32b4bd1..317b659 100644 --- a/src/app/product-store/app-search/app-search.component.html +++ b/src/app/product-store/app-search/app-search.component.html @@ -53,7 +53,7 @@ div { min-height: 60px; &.listview-row { diff --git a/src/app/product-store/app-search/app-search.component.ts b/src/app/product-store/app-search/app-search.component.ts index 5bcbc0c..0e151d7 100644 --- a/src/app/product-store/app-search/app-search.component.ts +++ b/src/app/product-store/app-search/app-search.component.ts @@ -1,10 +1,9 @@ import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core' -import { HttpErrorResponse } from '@angular/common/http' import { FormControl, FormGroup } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { TranslateService } from '@ngx-translate/core' import { DataView } from 'primeng/dataview' -import { combineLatest, finalize, map, Observable, Subject, takeUntil } from 'rxjs' +import { combineLatest, finalize, map, of, Observable, Subject, startWith, catchError } from 'rxjs' import { Action, DataViewControlTranslations, UserService } from '@onecx/portal-integration-angular' import { @@ -16,15 +15,16 @@ import { MicroservicesAPIService } from 'src/app/shared/generated' import { limitText } from 'src/app/shared/utils' -import { ChangeMode } from '../app-detail/app-detail.component' export interface AppSearchCriteria { appId: FormControl appName: FormControl + // appType: FormControl productName: FormControl } export type AppType = 'MS' | 'MFE' export type AppAbstract = MicrofrontendAbstract & Microservice & { appType: AppType } +export type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT' | 'COPY' @Component({ templateUrl: './app-search.component.html', @@ -33,7 +33,6 @@ export type AppAbstract = MicrofrontendAbstract & Microservice & { appType: AppT export class AppSearchComponent implements OnInit, OnDestroy { private readonly destroy$ = new Subject() private readonly debug = true // to be removed after finalization - public dataAccessIssue = false public exceptionKey = '' public loading = true public actions$: Observable | undefined @@ -103,7 +102,15 @@ export class AppSearchComponent implements OnInit, OnDestroy { pageSize: 100 } }) - .pipe(finalize(() => (this.searchInProgress = false))) + .pipe( + startWith({} as MicrofrontendPageResult), + catchError((err) => { + this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + err.status + '.APPS' + console.error('searchMicrofrontends():', err) + return of({} as MicrofrontendPageResult) + }), + finalize(() => (this.searchInProgress = false)) + ) this.mss$ = this.msApi .searchMicroservice({ @@ -114,37 +121,36 @@ export class AppSearchComponent implements OnInit, OnDestroy { pageSize: 100 } }) - .pipe(finalize(() => (this.searchInProgress = false))) + .pipe( + startWith({} as MicroservicePageResult), + catchError((err) => { + this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + err.status + '.APPS' + console.error('searchMicroservice():', err) + return of({} as MicroservicePageResult) + }), + finalize(() => (this.searchInProgress = false)) + ) - this.apps = [] - combineLatest(this.mfes$, this.mss$) - .pipe(takeUntil(this.destroy$)) - .subscribe(([microfrontends, microservices]) => { - // mfe - if (microfrontends instanceof HttpErrorResponse) { - this.dataAccessIssue = true - this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + microfrontends.status + '.WORKSPACES' - console.error('searchMicrofrontends():', microfrontends) - } else if (microfrontends instanceof Object) { - if (microfrontends?.stream) - for (let app of microfrontends.stream) this.apps?.push({ ...app, appType: 'MFE' } as AppAbstract) - this.log('searchMicrofrontends():', microfrontends.stream) - } else console.error('searchMicrofrontends() => unknown response:', microfrontends) - // ms - if (!this.dataAccessIssue) { - if (microservices instanceof HttpErrorResponse) { - this.dataAccessIssue = true - this.exceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + microservices.status + '.WORKSPACES' - console.error('searchMicroservice():', microservices) - } else if (microservices instanceof Object) { - if (microservices?.stream) - for (let app of microservices.stream) this.apps?.push({ ...app, appType: 'MS' } as AppAbstract) - this.log('searchMicroservice():', microservices?.stream) - } else console.error('searchMicroservice() => unknown response:', microservices) - } - this.log('searchApps():', this.apps) - this.loading = false - }) + this.apps$ = combineLatest([ + this.mfes$.pipe( + map((a) => { + return a.stream + ? a.stream?.map((mfe) => { + return { ...mfe, appType: 'MFE' } as AppAbstract + }) + : [] + }) + ), + this.mss$.pipe( + map((a) => { + return a.stream + ? a.stream?.map((ms) => { + return { ...ms, appType: 'MS' } as AppAbstract + }) + : [] + }) + ) + ]).pipe(map(([mfes, mss]) => mfes.concat(mss))) } private prepareActionButtons(): void { @@ -237,14 +243,15 @@ export class AppSearchComponent implements OnInit, OnDestroy { this.displayDeleteDialog = true } + /** + * trigger search after any change on detail level + */ public appChanged(changed: any) { this.displayDetailDialog = false if (changed) this.searchApps() } public appDeleted(deleted: any) { this.displayDeleteDialog = false - if (deleted && this.app?.id) { - this.apps = this.apps.filter((app) => app.id !== this.app?.id) - } + if (deleted) this.searchApps() } } diff --git a/src/app/product-store/product-search/product-search.component.ts b/src/app/product-store/product-search/product-search.component.ts index 3c8c3f8..3df1703 100644 --- a/src/app/product-store/product-search/product-search.component.ts +++ b/src/app/product-store/product-search/product-search.component.ts @@ -46,10 +46,10 @@ export class ProductSearchComponent implements OnInit { ngOnInit(): void { this.prepareDialogTranslations() this.prepareActionButtons() - this.searchData() + this.searchProducts() } - public searchData(): void { + public searchProducts(): void { this.searchInProgress = true this.products$ = this.productApi .searchProducts({ @@ -136,16 +136,17 @@ export class ProductSearchComponent implements OnInit { public onSortDirChange(asc: boolean): void { this.sortOrder = asc ? -1 : 1 } + public onSearch() { - this.searchData() + this.searchProducts() } public onSearchReset() { this.productSearchCriteriaGroup.reset() } - public onNewProduct() { - this.router.navigate(['./new'], { relativeTo: this.route }) - } public onAppSearch() { this.router.navigate(['./apps'], { relativeTo: this.route }) } + public onNewProduct() { + this.router.navigate(['./new'], { relativeTo: this.route }) + } }