Copy Endpoint to Clipboard
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -24,7 +24,14 @@ import {DeveloperListComponent} from './components/admin/developer-list.componen
import {CreateDeveloperComponent} from './components/admin/create-developer/create-developer.component';
import {ClientMappingComponent} from './components/admin/create-developer/client-mapping.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
-import {MatButtonModule, MatInputModule, MatOptionModule, MatAutocompleteModule, MatProgressSpinnerModule} from '@angular/material';
+import {
+ MatButtonModule,
+ MatInputModule,
+ MatOptionModule,
+ MatAutocompleteModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule
+} from '@angular/material';
import {EditDeveloperComponent} from './components/admin/edit-developer/edit-developer.component';
import {NotAuthorizedComponent} from './components/not-authorized/not-authorized.component';
import {ToasterModule} from 'angular2-toaster';
@@ -62,6 +69,7 @@ import {SwaggerComponent} from './components/swagger/swagger.component';
MatOptionModule,
MatAutocompleteModule,
MatProgressSpinnerModule,
+ MatTooltipModule,
],
providers: [
{

MODIFY
src/app/components/developer/api-list/api-list.component.html
src/app/components/developer/api-list/api-list.component.html
</ng-container>
<ng-container matColumnDef="endpoint">
<th mat-header-cell *matHeaderCellDef>Endpoint</th>
- <td mat-cell *matCellDef="let element"> {{element.endpoint}} </td>
+ <td mat-cell *matCellDef="let element"><span class="cell-wrapper"><mat-icon class="copyButton" (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">
<th mat-header-cell *matHeaderCellDef>Options</th>
<td mat-cell *matCellDef="let element"> <a [routerLink]="element.swaggerURL">Swagger</a> </td>

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;
+}
+
+.cell-content {
+ padding-top: 4px;
+}
+
+.copyButton {
+ cursor: pointer;
+ margin-right: 5px;
+}

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
@@ -13,6 +13,7 @@ export interface ApiListElement {
version: string;
endpoint: string;
organizationName: string;
+ apikey: string;
swaggerURL: string;
}
@@ -24,7 +25,7 @@ export interface ApiListElement {
export class ApiListComponent implements OnChanges {
- columnHeaders: string[] = ['organization', 'name', 'version', 'endpoint', 'options'];
+ columnHeaders: string[] = ['organization', 'name', 'version', 'endpoint', 'apikey', 'options'];
apiData: Array<ApiListElement> = [];
@@ -100,6 +101,7 @@ export class ApiListComponent implements OnChanges {
version: contract.apiVersion,
endpoint: this.buildApiEndpoint(gateway.endpoint, contract.apiOrganizationId, contract.apiId, contract.apiVersion, clientVersion.apiKey),
organizationName: contract.apiOrganizationId,
+ apikey: clientVersion.apiKey,
swaggerURL: '/swagger/developer/' + this.developerId + '/organizations/' + contract.apiOrganizationId + '/apis/' + contract.apiId + '/versions/' + contract.apiVersion + '/apiKey/' + clientVersion.apiKey
};
}
@@ -113,7 +115,16 @@ export class ApiListComponent implements OnChanges {
* @param apiKey: apikey of api
*/
buildApiEndpoint(gatewayEndpoint: string, organizationId: string, apiId: string, apiVersion: string, apiKey: string): string {
- return gatewayEndpoint + [organizationId, apiId, apiVersion].join('/') + '?apiKey=' + apiKey;
+ return gatewayEndpoint + [organizationId, apiId, apiVersion].join('/');
+ }
+
+ copyEndpointToClipboard(entry: ApiListElement) {
+ const el = document.createElement('textarea');
+ document.body.appendChild(el);
+ el.value = entry.endpoint + '?apiKey=' + entry.apikey;
+ el.select();
+ document.execCommand('copy');
+ document.body.removeChild(el);
}
}

GW-270: Copy Endpoint to Clipboard