feat: no api description default texts / cleaned console logs (change detection in spinner service)
MODIFY
src/app/app.component.html
src/app/app.component.html
<app-footer></app-footer>
-<div id="spinner" [hidden]="!this.loadingSpinnerService.isWaiting()">
+<div id="spinner" [hidden]="!this.loadingSpinnerService.waiting">
<mat-spinner strokeWidth="3" diameter="50"></mat-spinner>
</div>

MODIFY
src/app/components/api-card/api-card.component.html
src/app/components/api-card/api-card.component.html
<div class="api-card-title primary">{{ api.name }}</div>
</div>
<mat-card-content class="api-card-content">
- <p class="content-text">{{ api.description }}</p>
+ <p *ngIf="api.description; else noDescription" class="content-text">{{ api.description }}</p>
+ <ng-template #noDescription>
+ <app-no-data [text]="'MPLACE.NO_DESC' | translate"></app-no-data>
+ </ng-template>
</mat-card-content>
<div>
<mat-card-actions class="api-card-actions">

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<app-img-or-icon-selector [imgUrl]="apiImgUrl"
[dimension]="'44'">
</app-img-or-icon-selector>
- <div>{{ api.api.description }}</div>
+ <div *ngIf="api.api.description; else noDesc">{{ api.api.description }}</div>
+ <ng-template #noDesc>
+ <div>
+ <app-no-data [text]="'MPLACE.NO_DESC' | translate"></app-no-data>
+ </div>
+ </ng-template>
</div>
<h2 class="primary mt-rem-3">{{'API_DETAILS.EXTENDED_DESCRIPTION' | translate}}</h2>

MODIFY
src/app/components/no-data/no-data.component.html
src/app/components/no-data/no-data.component.html
-<p id="text" class="accent {{textClass}}">{{text}}</p>
+<span id="text" class="accent {{textClass}}">{{text}}</span>

MODIFY
src/app/services/spinner/spinner.service.ts
src/app/services/spinner/spinner.service.ts
@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
providedIn: 'root',
})
export class SpinnerService {
- private waiting = false;
+ public waiting = false;
constructor() {}
@@ -12,20 +12,23 @@ export class SpinnerService {
* Start waiting and show spinner
*/
public startWaiting(): void {
- this.waiting = true;
+ this.setWaiting(true)
}
/**
* Stop waiting and hide spinner
*/
public stopWaiting(): void {
- this.waiting = false;
+ this.setWaiting(false)
}
/**
- * Checks waiting state of spinner
+ * Because of change detection we need a timeout, otherwise console would show several errors
+ * @param waiting
*/
- public isWaiting(): boolean {
- return this.waiting;
+ setWaiting(waiting: boolean){
+ setTimeout(() => {
+ this.waiting = waiting;
+ })
}
}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"TITLE": "Marketplace",
"SUBTITLE": "Discover our APIs",
"SEARCH": "APIs and tags",
- "LEARN_MORE": "Learn more"
+ "LEARN_MORE": "Learn more",
+ "NO_DESC": "No API description available"
},
"ACCOUNT": {
"TITLE": "Account",

feat: no api description default texts / cleaned console logs (change detection in spinner service)