Show API details
MODIFY
src/app/components/developer/api-list/api-list.component.html
src/app/components/developer/api-list/api-list.component.html
-<table mat-table [dataSource]="apiData">
+<table mat-table [dataSource]="apiData" multiTemplateDataRows>
<ng-container matColumnDef="api">
<th mat-header-cell *matHeaderCellDef>API</th>
<td mat-cell *matCellDef="let element"> {{element.api}} </td>
<th mat-header-cell *matHeaderCellDef>Client Version</th>
<td mat-cell *matCellDef="let element"> {{element.clientVersion}} </td>
</ng-container>
- <ng-container matColumnDef="endpoint">
- <th mat-header-cell *matHeaderCellDef>Endpoint</th>
- <td mat-cell *matCellDef="let element"><span class="cell-wrapper"><mat-icon class="button" (click)="this.copyEndpointToClipboard(element)" matTooltip="Copy to clipboard">file_copy</mat-icon> <div class="cell-content">{{element.endpoint}}</div></span></td>
- </ng-container>
<ng-container matColumnDef="apikey">
<th mat-header-cell *matHeaderCellDef>API Key</th>
<td mat-cell *matCellDef="let element"> {{element.apikey}} </td>
</ng-container>
- <ng-container matColumnDef="options">
+ <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">
<th mat-header-cell *matHeaderCellDef>Options</th>
- <td mat-cell *matCellDef="let element"> <mat-icon class="button" *ngIf="element.swaggerDefinitionType != null" (click)="this.openSwaggerView(element)" matTooltip="Test the API">play_arrow</mat-icon> </td>
+ <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>
+
+ <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+ <ng-container matColumnDef="expandedDetail">
+ <td mat-cell *matCellDef="let element" [attr.colspan]="columnHeaders.length" class="expandedTd" [ngClass]="element == expandedElement ? 'displayed': 'hidden'">
+ <div class="api-detail"
+ [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+ <div class="expand-content">
+ <div class="expanded-header">API Endpoint:</div>
+ <div>{{element.endpoint}}</div>
+ </div>
+ <div class="expand-content">
+ <div class="expanded-header">API Key:</div>
+ <div>{{element.apikey}}</div>
+ </div>
+ </div>
+ </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnHeaders"></tr>
<tr mat-row *matRowDef="let row; columns: columnHeaders;"></tr>
+ <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="api-detail-row"></tr>
</table>

MODIFY
src/app/components/developer/api-list/api-list.component.scss
src/app/components/developer/api-list/api-list.component.scss
@@ -13,3 +13,34 @@ table {
.button {
cursor: pointer;
}
+
+tr.api-detail-row {
+ height: 0;
+}
+
+.example-element-row td {
+ border-top-width: 0;
+ border-bottom-width: 0;
+}
+
+.api-detail {
+ overflow: hidden;
+ display: flex;
+}
+
+.expand-content {
+ padding: 24px;
+}
+
+.expandedTd {
+ border-top-width: 0;
+ border-bottom-width: 0;
+}
+
+.displayed {
+ border-bottom-width: 1px;
+}
+
+.expanded-header {
+ padding-bottom: 10px;
+}

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
@@ -7,6 +7,7 @@ import {emit} from 'cluster';
import {SpinnerService} from '../../../services/spinner.service';
import {Toast, ToasterService} from 'angular2-toaster';
import {Router} from '@angular/router';
+import {animate, state, style, transition, trigger} from '@angular/animations';
export interface ApiListElement {
id: string;
@@ -22,12 +23,20 @@ export interface ApiListElement {
@Component({
selector: 'app-api-list',
templateUrl: './api-list.component.html',
- styleUrls: ['./api-list.component.scss']
+ styleUrls: ['./api-list.component.scss'],
+ animations: [
+ trigger('detailExpand', [
+ state('collapsed', style({height: '0px', minHeight: '0'})),
+ state('expanded', style({height: '*'})),
+ transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+ ]),
+ ]
})
export class ApiListComponent implements OnChanges {
- columnHeaders: string[] = ['api', 'version', 'clientVersion', 'endpoint', 'apikey', 'options'];
+ columnHeaders: string[] = ['api', 'version', 'clientVersion', 'apikey', 'tryApi', 'endpoint'];
+ expandedElement: ApiListElement | null;
apiData: Array<ApiListElement> = [];

GW-278: Show API details