Api View Changes
MODIFY
src/app/components/developer/api-list/api-list.component.html
src/app/components/developer/api-list/api-list.component.html
<table matSort matSortStart="desc" (matSortChange)="sortData($event)" mat-table [dataSource]="sortedApiData" multiTemplateDataRows>
<ng-container matColumnDef="api">
<th mat-header-cell mat-sort-header="api" *matHeaderCellDef>API</th>
- <td mat-cell *matCellDef="let element"> {{element.api}} </td>
+ <td mat-cell *matCellDef="let element" (click)="expandedElement = expandedElement=== element ? null : element" class="clickable"> {{element.apiOrganization}} / <b>{{element.apiName}}</b> </td>
</ng-container>
- <ng-container matColumnDef="version">
+ <ng-container matColumnDef="apiVersion">
<th mat-header-cell mat-sort-header="version" *matHeaderCellDef>API Version</th>
- <td mat-cell *matCellDef="let element"> {{element.version}} </td>
- </ng-container>
- <ng-container matColumnDef="clientVersion">
- <th mat-header-cell mat-sort-header="clientVersion" *matHeaderCellDef>Client Version</th>
- <td mat-cell *matCellDef="let element"> {{element.clientVersion}} </td>
- </ng-container>
- <ng-container matColumnDef="apikey">
- <th mat-header-cell *matHeaderCellDef>API Key</th>
- <td mat-cell *matCellDef="let element"> {{element.apikey}} </td>
+ <td mat-cell *matCellDef="let element"> {{element.apiVersion}} </td>
</ng-container>
<ng-container matColumnDef="tryApi">
<th mat-header-cell *matHeaderCellDef>Try API</th>
<td mat-cell *matCellDef="let element"> <mat-icon class="button" *ngIf="element.swaggerDefinitionType != null" (click)="this.openSwaggerView(element)" matTooltip="Try the API">play_arrow</mat-icon> </td>
</ng-container>
- <ng-container matColumnDef="endpoint">
+ <ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef>Options</th>
<td mat-cell *matCellDef="let element">
<mat-icon class="button" (click)="this.copyEndpointToClipboard(element)" matTooltip="Copy endpoint to clipboard" [matTooltipClass]="'tooltip'">file_copy</mat-icon>
- <mat-icon class="button" (click)="expandedElement = expandedElement=== element ? null : element" matTooltip="Get details">help_outline</mat-icon>
</td>
</ng-container>
<div class="api-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="expand-content">
- <div class="expanded-header">API Endpoint:</div>
+ <div class="expanded-header">API Endpoint</div>
<div>{{element.endpoint}}</div>
</div>
<div class="expand-content">
- <div class="expanded-header">API Key:</div>
+ <div class="expanded-header">API Key</div>
<div>{{element.apikey}}</div>
</div>
+ <div class="expand-content">
+ <div class="expanded-header">Client</div>
+ <div>{{element.clientOrganization}} / {{element.clientName}}</div>
+ </div>
+ <div class="expand-content">
+ <div class="expanded-header">Client Version</div>
+ <div>{{element.clientVersion}}</div>
+ </div>
</div>
</td>
</ng-container>

MODIFY
src/app/components/developer/api-list/api-list.component.scss
src/app/components/developer/api-list/api-list.component.scss
-table {
- width: 100%;
-}
-
.cell-wrapper {
display: flex;
}
@@ -10,7 +6,7 @@ table {
padding-top: 4px;
}
-.button {
+.button, .clickable {
cursor: pointer;
}
@@ -42,9 +38,15 @@ tr.api-detail-row {
}
.expanded-header {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 12px;
padding-bottom: 10px;
}
+:host ::ng-deep .mat-sort-header-button {
+ margin-left: 0px;
+}
+
:host ::ng-deep .mat-sort-header-button:hover,
:host ::ng-deep .mat-sort-header-button:focus {
background-color: inherit;

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
@@ -12,8 +12,11 @@ import {Sort} from '@angular/material';
export interface ApiListElement {
id: string;
- api: string;
- version: string;
+ apiName: string;
+ apiOrganization: string;
+ apiVersion: string;
+ clientOrganization: string;
+ clientName: string;
clientVersion: string;
endpoint: string;
apikey: string;
@@ -36,7 +39,7 @@ export interface ApiListElement {
export class ApiListComponent implements OnChanges {
- columnHeaders: string[] = ['api', 'version', 'clientVersion', 'apikey', 'tryApi', 'endpoint'];
+ columnHeaders: string[] = ['api', 'apiVersion', 'tryApi', 'options'];
expandedElement: ApiListElement | null;
apiData: Array<ApiListElement> = [];
@@ -86,7 +89,7 @@ export class ApiListComponent implements OnChanges {
this.loadingSpinnerService.startWaiting();
// subscribe for the private api data to fill the view
this.getDeveloperData(this.developerId).subscribe(data => {
- this.apiData = this.apiData.concat(data).sort(((a, b) => this.compare(a.api, b.api, true)));
+ this.apiData = this.apiData.concat(data).sort(((a, b) => this.compare(a.apiOrganization + a.apiName, b.apiOrganization + b.apiName, true)));
this.sortedApiData = this.apiData;
this.loadingSpinnerService.stopWaiting();
}, error => {
@@ -113,8 +116,11 @@ export class ApiListComponent implements OnChanges {
private buildViewData(contract: Contract, gateway, clientVersion: Client, apiVersionDetails: ApiVersion): ApiListElement {
return {
id: contract.apiId,
- api: [contract.apiOrganizationName, contract.clientName, contract.apiName].join(' / '),
- version: contract.apiVersion,
+ apiName: contract.apiName,
+ apiOrganization: contract.apiOrganizationName,
+ apiVersion: contract.apiVersion,
+ clientOrganization: contract.clientOrganizationName,
+ clientName: contract.clientName,
clientVersion: contract.clientVersion,
endpoint: this.buildApiEndpoint(gateway.endpoint, contract.apiOrganizationId, contract.apiId, contract.apiVersion, clientVersion.apiKey),
apikey: clientVersion.apiKey,
@@ -176,8 +182,8 @@ export class ApiListComponent implements OnChanges {
this.sortedApiData = dataToSort.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
- case 'api': return this.compare(a.api, b.api, isAsc);
- case 'version': return this.compare(a.version, b.version, isAsc);
+ case 'api': return this.compare(a.apiOrganization + a.apiName, b.apiOrganization + b.apiName, isAsc);
+ case 'version': return this.compare(a.apiVersion, b.apiVersion, isAsc);
case 'clientVersion': return this.compare(a.clientVersion, b.clientVersion, isAsc);
default: return 0;
}

GW-278: Api View Changes