Use stepper for creating Developers
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -30,7 +30,7 @@ import {
MatOptionModule,
MatAutocompleteModule,
MatProgressSpinnerModule,
- MatTooltipModule, MatSortModule, _MatMenuDirectivesModule, MatMenuModule
+ MatTooltipModule, MatSortModule, _MatMenuDirectivesModule, MatMenuModule, MatStepperModule
} from '@angular/material';
import {EditDeveloperComponent} from './components/admin/edit-developer/edit-developer.component';
import {NotAuthorizedComponent} from './components/not-authorized/not-authorized.component';
@@ -77,6 +77,7 @@ import { AboutComponent } from './about/about.component';
MatSortModule,
_MatMenuDirectivesModule,
MatMenuModule,
+ MatStepperModule,
],
providers: [
{

MODIFY
src/app/components/admin/create-developer/create-developer.component.html
src/app/components/admin/create-developer/create-developer.component.html
<h1>Create Developer</h1>
<div class="wrapper">
+ <mat-horizontal-stepper linear #stepper>
+ <mat-step [stepControl]="userFormGroup">
<form id="userForm" [formGroup]="userFormGroup">
+ <ng-template matStepLabel>Create User</ng-template>
<mat-form-field class="input-form-field">
<input matInput placeholder="Username" formControlName="username" [matAutocomplete]="auto" (input)="usernameKeyUp.next($event.target.value)" required>
</mat-form-field>
</mat-form-field>
</span>
</form>
-
- <br/>
+ <div>
+ <button matStepperNext>Next</button>
+ <button routerLink="/admin">Cancel</button>
+ </div>
+ </mat-step>
+ <mat-step>
+ <ng-template matStepLabel>Create Client Mapping</ng-template>
<app-client-mapping #clientmapping></app-client-mapping>
<p>
- <button [disabled]="!this.checkDeveloperNotExists(this.userFormGroup.get('username').value) || !userFormGroup.valid || clientMapping.assignedClients.length === 0" (click)="insertDeveloper()">Save</button>
+ <button [disabled]="!this.checkDeveloperNotExists(this.userFormGroup.get('username').value) || !userFormGroup.valid" (click)="insertDeveloper()">Save</button>
+ <button matStepperPrevious>Back</button>
<button routerLink="/admin">Cancel</button>
</p>
+ </mat-step>
+ </mat-horizontal-stepper>
+
</div>

MODIFY
src/app/components/admin/create-developer/create-developer.component.scss
src/app/components/admin/create-developer/create-developer.component.scss
.wrapper {
min-width: 150px;
- max-width: 600px;
+ max-width: 650px;
width: 100%;
}

MODIFY
src/app/components/admin/edit-developer/edit-developer.component.html
src/app/components/admin/edit-developer/edit-developer.component.html
-<h1>Edit Developer {{developerId}}</h1>
+<h1>Edit Client Mapping (Developer {{developerId}})</h1>
<div class="wrapper">
<app-client-mapping #clientmapping [assignedClients]="assignedClients"></app-client-mapping>
- <button [disabled]="clientMapping && clientMapping.assignedClients && clientMapping.assignedClients.length === 0" (click)="updateDeveloper()">Save</button>
+ <button (click)="updateDeveloper()">Save</button>
<button routerLink="/admin">Cancel</button>
</div>

MODIFY
src/app/components/admin/edit-developer/edit-developer.component.ts
src/app/components/admin/edit-developer/edit-developer.component.ts
@@ -59,7 +59,7 @@ export class EditDeveloperComponent implements OnInit {
*/
updateDeveloper() {
this.loadingSpinnerService.startWaiting();
- if (this.developer && this.clientMapping.assignedClients.length > 0) {
+ if (this.developer) {
return this.adminService.updateDeveloper(this.developer).subscribe(() => {
//delete developer from cache
this.developerDataCache.developers
@@ -80,6 +80,14 @@ export class EditDeveloperComponent implements OnInit {
this.toasterService.pop(errorToast);
this.loadingSpinnerService.stopWaiting();
});
+ } else {
+ this.loadingSpinnerService.stopWaiting();
+ this.toasterService.pop({
+ type: 'error',
+ title: 'Developer is not defined',
+ timeout: 0,
+ showCloseButton: true
+ });
}
}

MODIFY
src/app/components/developer/api-list/api-list.component.ts
src/app/components/developer/api-list/api-list.component.ts
import {Component, Input, SimpleChanges, OnChanges} from '@angular/core';
-import {forkJoin, Observable, from, pipe} from 'rxjs';
+import {forkJoin, Observable, from, pipe, ObservedValueOf} from 'rxjs';
import {map, mergeMap, toArray, mergeAll} from 'rxjs/operators';
import {ApiDataService, ApiVersion, Client, Contract} from '../../../services/api-data.service';
import {element} from 'protractor';
@@ -73,6 +73,7 @@ export class ApiListComponent implements OnChanges {
this.getGatewayDataObservable)
.pipe(mergeMap(forkedData => {
const [clients, contracts, apiVersions, gateways] = forkedData;
+ this.checkReceivedData(clients, contracts, apiVersions, gateways);
return from(contracts)
.pipe(map(contract => {
const apiVersion = apiVersions.find(version => version.api.id === contract.apiId);
@@ -200,4 +201,57 @@ export class ApiListComponent implements OnChanges {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
+ /**
+ * Check the received data and provide user feedback
+ * @param clients the loaded clients
+ * @param contracts the loaded contracts
+ * @param apiVersions the loaded api versions
+ * @param gateways the loaded gateways
+ */
+ private checkReceivedData(clients: Array<Client>,
+ contracts: Array<Contract>,
+ apiVersions: Array<ApiVersion>,
+ gateways: ObservedValueOf<Observable<{ endpoint: string; id: any }>>[]) {
+ let hasError = false;
+ if (clients.length === 0) {
+ hasError = true;
+ this.loadingSpinnerService.stopWaiting();
+ this.toasterService.pop({
+ type: 'info',
+ title: 'No clients available',
+ body: 'Check client mapping',
+ timeout: 0,
+ showCloseButton: true
+ });
+ }
+ if (!hasError && contracts.length === 0) {
+ hasError = true;
+ this.loadingSpinnerService.stopWaiting();
+ this.toasterService.pop({
+ type: 'info',
+ title: 'No contracts available',
+ timeout: 0,
+ showCloseButton: true
+ });
+ }
+ if (!hasError && apiVersions.length === 0) {
+ hasError = true;
+ this.loadingSpinnerService.stopWaiting();
+ this.toasterService.pop({
+ type: 'info',
+ title: 'No api versions available',
+ timeout: 0,
+ showCloseButton: true
+ });
+ }
+ if (gateways.length === 0) {
+ this.loadingSpinnerService.stopWaiting();
+ this.toasterService.pop({
+ type: 'info',
+ title: 'No gateway data available',
+ timeout: 0,
+ showCloseButton: true
+ });
+ }
+ }
}

GW-281: Use stepper for creating Developers