fix: correct image/icon dimension if there are multiple apis; api image visible in detail page even the user is not logged in
MODIFY
src/app/components/api-card-list/api-card-list.component.scss
src/app/components/api-card-list/api-card-list.component.scss
margin-top: 2rem;
text-align: right;
}
-

MODIFY
src/app/components/api-card-list/api-card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
@@ -88,7 +88,7 @@ export class ApiCardListComponent implements OnInit {
queryParams: {
page: 1,
pageSize: this.searchCriteria.paging.pageSize,
- searchTerm: `*${searchTerm}*`
+ searchTerm: `${searchTerm}`
}
});
}

MODIFY
src/app/components/home/home.component.ts
src/app/components/home/home.component.ts
@@ -3,7 +3,6 @@ import { HeroService } from '../../services/hero/hero.service';
import { TranslateService } from '@ngx-translate/core';
import { ConfigService } from '../../services/config/config.service';
import { IHero } from '../../interfaces/IConfig';
-import {Router} from "@angular/router";
@Component({
selector: 'app-home',

MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
<!-- Show img source if available -->
<img *ngIf="imgUrl; else withIcon"
id="img"
+ class="api-img"
alt="api logo"
[src]="this.configService.getEndpoint() + '/' + imgUrl">

MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
-import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {ConfigService} from "../../services/config/config.service";
@Component({
@@ -6,11 +6,17 @@ import {ConfigService} from "../../services/config/config.service";
templateUrl: './img-or-icon-selector.component.html',
styleUrls: ['./img-or-icon-selector.component.scss']
})
-export class ImgOrIconSelectorComponent implements AfterViewInit {
+export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
@Input() imgUrl?: string;
@Input() dimension?: string;
- constructor(public configService: ConfigService) { }
+ constructor(public configService: ConfigService, private cdr: ChangeDetectorRef) { }
+
+ ngOnChanges(changes: SimpleChanges) {
+ this.imgUrl = changes.imgUrl ? changes.imgUrl.currentValue : ''
+ this.cdr.detectChanges();
+ this.resize();
+ }
ngAfterViewInit(): void {
if (this.dimension)
@@ -19,13 +25,19 @@ export class ImgOrIconSelectorComponent implements AfterViewInit {
private resize() {
if (this.imgUrl) {
- // Had to use document because @View Child could not do it with the ngIf in template
- // TODO: Must fix this later, as multiple elements with these ids could be in document because this component could get used multiple times
- document.getElementById('img')!.style.width = this.dimension + 'px';
- document.getElementById('img')!.style.height = this.dimension + 'px';
+ const images = Array.from(document.getElementsByClassName('api-img') as HTMLCollectionOf<HTMLElement>)
+
+ images.forEach((img: HTMLElement) => {
+ img.style.width = this.dimension + 'px';
+ img.style.height = this.dimension + 'px'
+ });
}else{
- document.getElementById('icon')!.style.fontSize = this.dimension + 'px';
- document.getElementById('icon')!.style.height = this.dimension + 'px';
+ const icons = Array.from(document.getElementsByClassName('api-icon') as HTMLCollectionOf<HTMLElement>)
+
+ icons.forEach((icon: HTMLElement) => {
+ icon.style.fontSize = this.dimension + 'px';
+ icon.style.height = this.dimension + 'px'
+ });
}
}
}

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
@@ -4,7 +4,13 @@ import { ApiService } from '../../services/api/api.service';
import { HeroService } from '../../services/hero/hero.service';
import {map, switchMap} from 'rxjs/operators';
import {forkJoin} from 'rxjs';
-import { IApi, IApiVersion } from '../../interfaces/ICommunication';
+import {
+ IApi,
+ IApiSummary,
+ IApiVersion,
+ ISearchCriteria,
+ ISearchResultsApiSummary
+} from '../../interfaces/ICommunication';
import {SpinnerService} from "../../services/spinner/spinner.service";
import {IApiVersionExt} from "../../interfaces/IApiVersionExt";
import {BackendService} from "../../services/backend/backend.service";
@@ -27,7 +33,6 @@ export class MarketplaceApiDetailsComponent implements OnInit {
apis!: IApiVersionExt[];
ngOnInit(): void {
- this.getApiImage();
this.getApiVersions();
this.setUpHero();
}
@@ -70,15 +75,25 @@ export class MarketplaceApiDetailsComponent implements OnInit {
.subscribe((apiVersions) => {
this.spinnerService.stopWaiting();
this.apis = apiVersions;
+ this.getApiImage();
});
}
private getApiImage() {
- const orgId = this.route.snapshot.paramMap.get('orgId')!;
- const apiId = this.route.snapshot.paramMap.get('apiId')!;
+ const searchCriteria: ISearchCriteria = {
+ filters: [{name: 'name', value: this.apis[0].api.name, operator: 'eq'}],
+ paging: {page: 1, pageSize: 1}
+ };
- this.backend.getApi(orgId, apiId).subscribe((api: IApi) => {
- this.apiImgUrl = api.image;
+ // TODO: At the moment search endpoint returns every API
+ this.backend.searchApis(searchCriteria).subscribe((summary: ISearchResultsApiSummary) => {
+ const found = summary.beans.find((bean: IApiSummary) => {
+ return bean.name === this.apis[0].api.name;
+ })
+
+ if (found){
+ this.apiImgUrl = found.image;
+ }
});
}
}

MODIFY
src/app/services/api/api.service.ts
src/app/services/api/api.service.ts
@@ -3,7 +3,6 @@ import { BackendService } from '../backend/backend.service';
import {Observable, of, throwError} from 'rxjs';
import { catchError, map, retry, switchMap } from 'rxjs/operators';
import {
- IApi,
IApiSummary,
IApiVersion,
IApiVersionSummary,

MODIFY
src/app/services/backend/backend.service.ts
src/app/services/backend/backend.service.ts
@@ -51,23 +51,14 @@ export class BackendService {
/**
* Searches apis
*/
- public searchApis(
- searchCriteria: ISearchCriteria
- ): Observable<ISearchResultsApiSummary> {
+ public searchApis(searchCriteria: ISearchCriteria): Observable<ISearchResultsApiSummary> {
const path = 'devportal/apis/search';
- return this.http.post(
- this.generateUrl(path),
- searchCriteria,
- this.httpOptions
- ) as Observable<ISearchResultsApiSummary>;
+ return this.http.post(this.generateUrl(path), searchCriteria, this.httpOptions) as Observable<ISearchResultsApiSummary>;
}
public getFeaturedApis(): Observable<IApiSummary[]> {
const path = 'devportal/apis/featured';
- return this.http.get(
- this.generateUrl(path),
- this.httpOptions
- ) as Observable<IApiSummary[]>;
+ return this.http.get(this.generateUrl(path), this.httpOptions) as Observable<IApiSummary[]>;
}
/**

DELETE
src/assets/img/api-man-logo.png
src/assets/img/api-man-logo.png
Binary files a/src/assets/img/api-man-logo.png and /dev/null differ

DELETE
src/assets/img/hero.png
src/assets/img/hero.png
Binary files a/src/assets/img/hero.png and /dev/null differ

DELETE
src/assets/img/test-api-image.jpg
src/assets/img/test-api-image.jpg
Binary files a/src/assets/img/test-api-image.jpg and /dev/null differ

DELETE
src/assets/img/test-api-img.jpg
src/assets/img/test-api-img.jpg
Binary files a/src/assets/img/test-api-img.jpg and /dev/null differ

fix: correct image/icon dimension if there are multiple apis; api image visible in detail page even the user is not logged in