Sort Table
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -30,7 +30,7 @@ import {
MatOptionModule,
MatAutocompleteModule,
MatProgressSpinnerModule,
- MatTooltipModule
+ MatTooltipModule, MatSortModule
} from '@angular/material';
import {EditDeveloperComponent} from './components/admin/edit-developer/edit-developer.component';
import {NotAuthorizedComponent} from './components/not-authorized/not-authorized.component';
@@ -70,6 +70,7 @@ import {SwaggerComponent} from './components/swagger/swagger.component';
MatAutocompleteModule,
MatProgressSpinnerModule,
MatTooltipModule,
+ MatSortModule,
],
providers: [
{

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" multiTemplateDataRows>
+<table matSort matSortStart="desc" (matSortChange)="sortData($event)" mat-table [dataSource]="sortedApiData" multiTemplateDataRows>
<ng-container matColumnDef="api">
- <th mat-header-cell *matHeaderCellDef>API</th>
+ <th mat-header-cell mat-sort-header="api" *matHeaderCellDef>API</th>
<td mat-cell *matCellDef="let element"> {{element.api}} </td>
</ng-container>
<ng-container matColumnDef="version">
- <th mat-header-cell *matHeaderCellDef>API Version</th>
+ <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 *matHeaderCellDef>Client Version</th>
+ <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">

MODIFY
src/app/components/developer/api-list/api-list.component.scss
src/app/components/developer/api-list/api-list.component.scss
@@ -44,3 +44,9 @@ tr.api-detail-row {
.expanded-header {
padding-bottom: 10px;
}
+
+:host ::ng-deep .mat-sort-header-button:hover,
+:host ::ng-deep .mat-sort-header-button:focus {
+ background-color: inherit;
+ color: inherit;
+}

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
@@ -8,6 +8,7 @@ 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';
+import {Sort} from '@angular/material';
export interface ApiListElement {
id: string;
@@ -39,6 +40,7 @@ export class ApiListComponent implements OnChanges {
expandedElement: ApiListElement | null;
apiData: Array<ApiListElement> = [];
+ sortedApiData: Array<ApiListElement>;
@Input('developerId') developerId;
@@ -46,6 +48,7 @@ export class ApiListComponent implements OnChanges {
private apiDataService: ApiDataService,
private toasterService: ToasterService,
private loadingSpinnerService: SpinnerService) {
+ this.sortedApiData = this.apiData;
}
/**
@@ -83,7 +86,8 @@ 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);
+ this.apiData = this.apiData.concat(data).sort(((a, b) => this.compare(a.api, b.api, true)));
+ this.sortedApiData = this.apiData;
this.loadingSpinnerService.stopWaiting();
}, error => {
const errorMessage = 'Error loading api list';
@@ -131,6 +135,10 @@ export class ApiListComponent implements OnChanges {
return gatewayEndpoint + [organizationId, apiId, apiVersion].join('/');
}
+ /**
+ * Copies endpoint to clipboard
+ * @param entry the table entry
+ */
copyEndpointToClipboard(entry: ApiListElement) {
const el = document.createElement('textarea');
document.body.appendChild(el);
@@ -140,6 +148,10 @@ export class ApiListComponent implements OnChanges {
document.body.removeChild(el);
}
+ /**
+ * Navigate to swagger view
+ * @param entry the table entry
+ */
openSwaggerView(entry: ApiListElement) {
this.router.navigate([entry.swaggerURL], {
state: {
@@ -150,4 +162,36 @@ export class ApiListComponent implements OnChanges {
});
}
+ /**
+ * Sorting data
+ * @param sort sort event
+ */
+ sortData(sort: Sort) {
+ const dataToSort = this.apiData.slice();
+ if (!sort.active || sort.direction === '') {
+ this.sortedApiData = dataToSort;
+ return;
+ }
+
+ 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 'clientVersion': return this.compare(a.clientVersion, b.clientVersion, isAsc);
+ default: return 0;
+ }
+ });
+ }
+
+ /**
+ * Compares two values
+ * @param a value
+ * @param b value
+ * @param isAsc is ascending sort
+ */
+ private compare(a: number | string, b: number | string, isAsc: boolean) {
+ return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+ }
+
}

GW-278: Sort Table