Refactor edit of developers
MODIFY
src/app/components/admin/admin.component.html
src/app/components/admin/admin.component.html
<h1>Developers</h1>
+<h3>Create Developer</h3>
<button id="createDeveloperButton" routerLink="/admin/create/developer"><mat-icon>add</mat-icon><span class="button-text">Developer</span></button>
-<app-developer-list #developerList></app-developer-list>
+<h3>Edit Developers</h3>
+<app-developer-list></app-developer-list>

MODIFY
src/app/components/admin/developer-list.component.html
src/app/components/admin/developer-list.component.html
-<div class="wrapper">
- <mat-nav-list>
- <mat-list-item *ngFor="let developer of developers">
- {{ developer.name }}
- <span *ngIf="developer.clients.length > 0">(</span>
- <div class="developer-list-client-list" *ngFor="let client of developer.clients"> {{client.organizationId}}
- /{{client.clientId}}</div>
- <span *ngIf="developer.clients.length > 0">)</span>
- <mat-icon [routerLink]="['/admin/edit/developer', developer.id]">edit</mat-icon>
- <mat-icon class="deleteIcon" (click)="deleteDeveloper(developer)">delete</mat-icon>
- </mat-list-item>
- </mat-nav-list>
+<table *ngIf="developers && developers.length > 0" mat-table matSort [dataSource]="dataSource" matSortActive="id" matSortDirection="asc">
+ <!-- Developer ID Column -->
+ <ng-container matColumnDef="id">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header>Developer ID</th>
+ <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+ </ng-container>
+
+ <!-- Client Mapping Column -->
+ <ng-container matColumnDef="clients">
+ <th mat-header-cell *matHeaderCellDef>Client-Mapping</th>
+ <td mat-cell *matCellDef="let element">
+ <ul>
+ <li *ngFor="let client of element.clients">{{client.organizationId}} / {{client.clientId}}</li>
+ </ul>
+ </td>
+ </ng-container>
+
+ <!-- Options Buttons Column -->
+ <ng-container matColumnDef="options">
+ <th mat-header-cell *matHeaderCellDef>Options</th>
+ <td mat-cell *matCellDef="let element">
+ <mat-icon [routerLink]="['/admin/edit/developer', element.id]" matTooltip="Edit Client-Mapping for this user">edit</mat-icon>
+ <mat-icon (click)="deleteDeveloper(element)" matTooltip="Delete Client-Mapping for this user">delete</mat-icon>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+
+<p>
<mat-card
class="scheer-box-info"
*ngIf="!developers || developers.length === 0">
<mat-icon>info</mat-icon>
- <div class="scheer-box-content">No developers there, click button above to create one.</div>
+ <div class="scheer-box-content">No developers there, click the button above to create one.</div>
</mat-card>
-</div>
+</p>

MODIFY
src/app/components/admin/developer-list.component.scss
src/app/components/admin/developer-list.component.scss
-.deleteIcon {
+p {
+ text-align: center;
+ vertical-align: bottom;
+}
+
+.cell-wrapper {
+ display: flex;
+}
+
+.cell-content {
+ padding-top: 4px;
+}
+
+.mat-icon {
+ z-index: 1;
+}
+
+.button, .mat-icon {
cursor: pointer;
}
-.developer-list-client-list {
- margin: 0 5px;
+table.mat-table {
+ width: 50%;
}
-.wrapper {
- min-width: 150px;
- max-width: 700px;
- width: 100%;
+ul {
+ margin: 0;
+ padding: 0;
+ list-style-position: inside;
}

MODIFY
src/app/components/admin/developer-list.component.ts
src/app/components/admin/developer-list.component.ts
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import {AdminService} from './services/admin.service';
import {Developer} from '../../services/api-data.service';
import {DeveloperDataCacheService} from './services/developer-data-cache.service';
import {Toast, ToasterService} from 'angular2-toaster';
import {SpinnerService} from '../../services/spinner.service';
+import {MatTableDataSource} from '@angular/material/table';
+import {MatSort} from '@angular/material/sort';
@Component({
selector: 'app-developer-list',
templateUrl: './developer-list.component.html',
styleUrls: ['./developer-list.component.scss']
})
+
export class DeveloperListComponent implements OnInit {
developers: Array<Developer> = [];
+ displayedColumns: string[] = ['id', 'clients', 'options'];
+ dataSource = new MatTableDataSource<Developer>(this.developers);
constructor(private adminService: AdminService,
private developerDataCache: DeveloperDataCacheService,
@@ -20,6 +25,12 @@ export class DeveloperListComponent implements OnInit {
private loadingSpinnerService: SpinnerService) {
}
+ // Fix sorting if table has *ngIf attribute
+ // https://github.com/angular/components/issues/15008#issuecomment-516386055
+ @ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
+ this.dataSource.sort = sort;
+ }
+
/**
* load data on initialization
*/
@@ -27,6 +38,12 @@ export class DeveloperListComponent implements OnInit {
this.load();
}
+ refreshTable() {
+ // Reload data table as recommend here in step 2:
+ // https://github.com/angular/components/issues/15972#issuecomment-490235603
+ this.dataSource.data = this.developers;
+ }
+
/**
* Load developer data
*/
@@ -34,11 +51,13 @@ export class DeveloperListComponent implements OnInit {
this.loadingSpinnerService.startWaiting();
// set data from cache
this.developers = this.developerDataCache.developers;
+ this.refreshTable();
if (!this.developers) {
this.developerDataCache.load()
.subscribe(() => {
// set data from cache
this.developers = this.developerDataCache.developers;
+ this.refreshTable();
this.loadingSpinnerService.stopWaiting();
}, (httpErrorResponse) => {
const errorMessage = 'Error loading developer list';
@@ -60,6 +79,7 @@ export class DeveloperListComponent implements OnInit {
this.adminService.deleteDeveloper(developer)
.subscribe(response => {
this.developers.splice(this.developers.indexOf(developer), 1);
+ this.refreshTable();
this.loadingSpinnerService.stopWaiting();
}, error => {
const errorMessage = 'Error deleting developer';

MODIFY
src/app/components/admin/edit-developer/edit-developer.component.html
src/app/components/admin/edit-developer/edit-developer.component.html
-<h1 *ngIf="developer">Edit Client Mapping for {{developer.name}}</h1>
+<h1 *ngIf="developer">Edit Developer&#58; {{developer.name}}</h1>
<div class="wrapper">
+ <h3>Update Client-Mapping</h3>
<app-client-mapping #clientmapping [assignedClients]="assignedClients"></app-client-mapping>
- <button (click)="updateDeveloper()">Save</button>
+ <p>
+ <button (click)="updateDeveloper()">Update</button>
<button routerLink="/admin">Cancel</button>
+ </p>
</div>

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

GW-335: Refactor edit of developers