feat: show image for api if an image was stored. otherwise show default icon (api cards)
MODIFY
src/app/components/api-card/api-card.component.html
src/app/components/api-card/api-card.component.html
<mat-card class="api-card">
- <mat-card-header class="api-card-header">
- <div
- mat-card-avatar
- class="api-card-icon"
- [style]="'background-image: url(' + tmpUrl + ')'"
- ></div>
- <div class="api-card-title">{{ api.name }}</div>
- </mat-card-header>
+ <div class="api-card-header">
+ <!-- Show img source if available -->
+ <img *ngIf="api.image; else withIcon"
+ class="api-card-img"
+ alt="api logo"
+ [src]="configService.getEndpoint() + '/' + api.image">
+
+ <!-- OR show icon if img not available -->
+ <ng-template #withIcon>
+ <div class="icon-wrapper"><mat-icon color="primary" class="api-card-icon">api</mat-icon></div>
+ </ng-template>
+
+ <div class="api-card-title primary">{{ api.name }}</div>
+ </div>
<mat-card-content class="api-card-content">
<p class="content-text">{{ api.description }}</p>
</mat-card-content>

MODIFY
src/app/components/api-card/api-card.component.scss
src/app/components/api-card/api-card.component.scss
}
.api-card-header {
- padding-left: 3% ;
+ display: grid;
+ grid-template-columns: 1fr 8fr;
+ grid-column-gap: 0.8rem;
}
-.api-card-title {
- margin-left: -10px;
+.api-card-img {
+ background-size: cover;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+
+ // for alt attribute
+ font-size: 0.6rem;
+}
+
+.icon-wrapper{
+ margin: auto;
+ // border: 1px solid green;
}
.api-card-icon{
- background-size: cover;
+ display: flex;
+ align-items: center;
+ font-size: 30px;
+ height: 32px;
}
.api-card-title {
- margin-top: 5px;
font-size: 1.2rem;
text-overflow: ellipsis;
overflow: hidden;
.api-card-content {
padding: 16px;
- height: 4em;
+ height: 4rem;
}
.content-text {

MODIFY
src/app/components/api-card/api-card.component.ts
src/app/components/api-card/api-card.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {IApiSummaryExt} from "../../interfaces/IApiSummaryExt";
+import {ConfigService} from "../../services/config/config.service";
@Component({
selector: 'app-api-card',
@@ -8,9 +9,8 @@ import {IApiSummaryExt} from "../../interfaces/IApiSummaryExt";
})
export class ApiCardComponent implements OnInit {
@Input() api!: IApiSummaryExt;
- tmpUrl = 'https://github.com/apiman/apiman/raw/master/manager/ui/war/plugins/api-manager/img/about-logo.png';
- constructor() {}
+ constructor(public configService: ConfigService) {}
ngOnInit(): void {}
}

MODIFY
src/app/components/home/home.component.html
src/app/components/home/home.component.html
<div class="home-container">
- <h2>Featured APIs</h2>
<app-api-card-list [listType]="'featuredApi'"></app-api-card-list>
</div>

MODIFY
src/app/interfaces/ICommunication.ts
src/app/interfaces/ICommunication.ts
@@ -329,6 +329,7 @@ export interface IApiSummary {
id: string;
name: string;
description: string;
+ image: string;
/** @format date-time */
createdOn: string;

MODIFY
src/assets/i18n/de.json
src/assets/i18n/de.json
},
"HOME": {
"TITLE": "KoolBank Api Entwickler Portal",
- "SUBTITLE": "Willkommen",
+ "SUBTITLE": "Featured APIs",
"SHOW_ALL": "Zeige alles"
},
"MPLACE": {

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
},
"HOME": {
"TITLE": "KoolBank Api Developer Portal",
- "SUBTITLE": "Welcome",
+ "SUBTITLE": "Featured APIs",
"SHOW_ALL": "Show all"
},
"MPLACE": {

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

ADD
src/assets/img/test-api-img.jpg
src/assets/img/test-api-img.jpg
Binary files /dev/null and b/src/assets/img/test-api-img.jpg differ

feat: show image for api if an image was stored. otherwise show default icon (api cards)