feat/style: my apps summary section shows message if no policies for api were found / border for my apps summary and my apps policies grids adjusted
MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
</ng-container>
<ng-template #NoDataMsg>
<div *ngIf="this.ready; else ErrorMsg" class="dp-center">
- <app-no-data [text]="'COMMON.NO_DATA_FOUND' | translate"></app-no-data>
+ <app-no-data [text]="'COMMON.NO_DATA_FOUND' | translate" [textClass]="'text-big2'"></app-no-data>
</div>
</ng-template>
<ng-template #ErrorMsg>
<div *ngIf="error" class="dp-center">
- <app-no-data [text]="'COMMON.ERROR' | translate"></app-no-data>
+ <app-no-data [text]="'COMMON.ERROR' | translate" [textClass]="'text-big2'"></app-no-data>
</div>
</ng-template>
<div *ngIf="listType === 'api' && totalSize > searchCriteria.paging.pageSize" class="align">

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.html
src/app/components/my-apps-policies/my-apps-policies.component.html
<div class="summary mb-40" *ngFor="let policy of policies">
- <div class="policies mr-40" *ngIf="policies">
+ <div class="policies" *ngIf="policies">
<app-policy-card [policy]="policy"></app-policy-card>
</div>
- <div class="divider-left">
+ <div class="grid-divider"><div></div></div>
<div class="policy-charts-grid">
<div>
<app-gauge-chart [gaugeData]="policy.mainGaugeData" [icon]="policy.icon"></app-gauge-chart>
</div>
</div>
</div>
-</div>

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.scss
src/app/components/my-apps-policies/my-apps-policies.component.scss
display: grid;
justify-content: space-between;
align-items: center;
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: 1.24fr auto 2.2fr;
}
.policies {
@@ -21,6 +21,6 @@ h2, h3 {
.policy-charts-grid{
display: flex;
- justify-content: center;
+ justify-content: space-evenly;
grid-column-gap: 4rem;
}

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.html
src/app/components/my-apps-summary/my-apps-summary.component.html
<div class="summary">
- <div class="endpoints divider-right">
+ <div class="endpoints">
<div class="api-endpoint">
<div>
<mat-icon class="form-field-pre-icon" color="primary">public</mat-icon>
<mat-form-field>
<input matInput readonly value="{{contract!.managedEndpoint}}" />
<button
- [cdkCopyToClipboard]="'test'"
+ [cdkCopyToClipboard]="contract!.managedEndpoint"
mat-icon-button
matSuffix
class="input-icon-btn"
</div>
<div>
<mat-form-field>
- <input matInput readonly value="{{contract ? contract.client.apikey : ''}}" />
+ <input matInput readonly value="{{contract!.client.apikey}}" />
<button
- [cdkCopyToClipboard]="''"
+ [cdkCopyToClipboard]="contract!.client.apikey"
mat-icon-button
matSuffix
- class="input-icon-btn"
- >
- <mat-icon class="input-icon-btn" color="primary"
- >content_copy</mat-icon
- >
+ class="input-icon-btn">
+ <mat-icon class="input-icon-btn" color="primary">content_copy</mat-icon>
</button>
</mat-form-field>
</div>
</a>
</div>
</div>
- <div class="policies">
+ <div class="grid-divider"><div></div></div>
+ <div *ngIf="contract!.policies.length > 0; else noPolicies" class="policies">
<ng-container *ngFor="let policy of contract!.policies">
<app-policy-card-light [policy]="policy" [contract]="contract"></app-policy-card-light>
</ng-container>
</div>
+
+ <!-- No policies found for this API -->
+ <ng-template #noPolicies>
+ <app-no-data class="dp-center" [textClass]="'text-big2'" [text]="'APPS.NO_POLICIES_FOR_API' | translate"></app-no-data>
+ </ng-template>
</div>

MODIFY
src/app/components/my-apps-summary/my-apps-summary.component.scss
src/app/components/my-apps-summary/my-apps-summary.component.scss
.summary{
display: grid;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
- grid-template-columns: 4fr 9fr;
+ grid-template-columns: 4.2fr auto 9fr;
margin-bottom: 1rem;
}

MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
</div>
<div *ngIf="contractsLoaded && noDataFound" class="dp-center">
- <app-no-data [text]="'APPS.NO_CLIENTS' | translate"></app-no-data>
+ <app-no-data [text]="'APPS.NO_CLIENTS' | translate" [textClass]="'text-big2'"></app-no-data>
</div>

MODIFY
src/app/components/my-apps/my-apps.component.ts
src/app/components/my-apps/my-apps.component.ts
@@ -124,7 +124,7 @@ export class MyAppsComponent implements OnInit {
return {
...contract,
policies: planPolicies.concat(apiPolicies),
- section: 'policies',
+ section: 'summary',
managedEndpoint: endpoint.managedEndpoint,
docsAvailable: docsAvailable
} as IContractExt;

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

MODIFY
src/app/components/no-data/no-data.component.scss
src/app/components/no-data/no-data.component.scss
-#text{
- font-size: 1.8rem;
-}

MODIFY
src/app/components/no-data/no-data.component.ts
src/app/components/no-data/no-data.component.ts
@@ -7,6 +7,7 @@ import {Component, Input, OnInit} from '@angular/core';
})
export class NoDataComponent implements OnInit {
@Input() text!: string;
+ @Input() textClass?: string;
constructor() { }

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"USED": "used",
"RESETS_AT": "Resets at",
"FIRST_OF": "1st of",
- "RESETS_EVERY_SECOND": "Resets every second"
+ "RESETS_EVERY_SECOND": "Resets every second",
+ "NO_POLICIES_FOR_API": "No policies were found for this API"
},
"CLIENT_CREATE" : {
"SELECT": "Select from available Applications"

MODIFY
src/styles.scss
src/styles.scss
.accent-border-color{border-color: $accent !important}
.warn-border-color{border-color: $warn !important}
+ .grid-divider{
+ width: 4rem;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ div{
+ height: 100%;
+ border-right: 2px solid $primary;
+ }
+ }
+
.form-field-pre-icon{
min-width: 40px;
}

feat/style: my apps summary section shows message if no policies for api were found / border for my apps summary and my apps policies grids adjusted