Improved user UI for rest demo (TrilonIO#199)

Author: LiverpoolOwen

Client/app/app.module.ts

@@ -14,6 +14,7 @@ import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
 import { UsersComponent } from './containers/users/users.component';
+import { UserDetailComponent } from './components/user-detail/user-detail.component';
 import { CounterComponent } from './containers/counter/counter.component';
 import { ChatComponent } from './containers/chat/chat.component';
 import { NgxBootstrapComponent } from './containers/ngx-bootstrap-demo/ngx-bootstrap.component';
@@ -39,6 +40,7 @@ export function createTranslateLoader(http: Http, baseHref) {
         NavMenuComponent,
         CounterComponent,
         UsersComponent,
+        UserDetailComponent,
         HomeComponent,
         ChatComponent,
         NgxBootstrapComponent

Client/app/components/user-detail/user-detail.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="user">
+  <h2>{{user.name}} details:</h2>
+  <div><label>id: </label>{{user.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="user.name" placeholder="name" #details="ngModel" />
+  </div>
+  <button [class.disabled]="details.pristine" class="btn btn-success" (click)="updateUser(user)">Save</button>
+</div>

Client/app/components/user-detail/user-detail.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { IUser } from '../../models/User';
+import { UserService } from '../../shared/user.service';
+
+@Component({
+    selector: 'user-detail',
+    templateUrl: './user-detail.component.html'
+})
+export class UserDetailComponent {
+    @Input() user: IUser;
+
+    constructor(private userService: UserService) { }
+
+
+    updateUser(user) {
+        this.userService.updateUser(user).subscribe(result => {
+            console.log('Put user result: ', result);
+            if (!result.ok) {
+                alert('There was an issue, Could not edit user');
+            }
+        });
+    }
+}

Client/app/containers/users/users.component.css

@@ -0,0 +1,64 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+
+.users {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+
+  .users li {
+    cursor: pointer;
+    position: relative;
+    left: 0;
+    background-color: #EEE;
+    margin: .5em;
+    padding: .3em 0;
+    height: 2.4em;
+    border-radius: 4px;
+  }
+
+    .users li:hover {
+      color: #607D8B;
+      background-color: #DDD;
+      left: .1em;
+    }
+
+    .users li.selected:hover {
+      background-color: #BBD8DC !important;
+      color: white;
+    }
+
+  .users .text {
+    position: relative;
+    top: -3px;
+  }
+
+  .users .badge {
+    display: inline-block;
+    font-size: small;
+    color: white;
+    padding: 0.8em 0.7em 0 0.7em;
+    background-color: #607D8B;
+    line-height: 1em;
+    position: relative;
+    left: -1px;
+    top: -4px;
+    height: 2.5em;
+    margin-right: .8em;
+    border-radius: 4px 0 0 4px;
+  }
+button.delete {
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  float: right;
+  margin-top: 2px;
+  margin-right: .8em;
+  background-color: gray !important;
+  color: white;
+}

Client/app/containers/users/users.component.html

@@ -5,39 +5,25 @@
   You can find the Web API Routes in <code>{{ "/Server/RestAPI/ ... "}}</code>
 </blockquote>
 
-<p *ngIf="!users"><em>Loading...</em></p>
+<div>
+  <label>User name:</label> <input #userName />
+  <button class="btn btn-default" (click)="addUser(userName.value); userName.value=''">
+    Add
+  </button>
+</div>
 
-<table class="table" *ngIf="users">
-  <thead>
-    <tr>
-      <th>User ID</th>
-      <th>Name</th>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let user of users" [@flyInOut]>
-      <td>{{ user.id }}</td>
-      <td>
-        <input class="form-control" [(ngModel)]="user.name" #name="ngModel" />
-      </td>
-      <td>
-        <button *ngIf="name.dirty" class="btn btn-success" (click)="updateUser(user)">Save</button>
-      </td>
-      <td>
-        <button class="btn btn-danger" (click)="deleteUser(user)">Delete</button>
-      </td>
-    </tr>
-    <tr>
-      <td><b>Add new user</b></td>
-      <td>
-        <input class="form-control" [(ngModel)]="newUserName" #newUser="ngModel" />
-      </td>
-      <td></td>
-      <td>
-        <button *ngIf="newUser.dirty" class="btn glyphicon-plus" (click)="addUser(newUserName)">+ Add New User</button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<p *ngIf="!users"><em>Loading...</em></p>
+<h2>Users</h2>
+<ul class="users">
+  <li *ngFor="let user of users"
+      [class.selected]="user === selectedUser"
+      (click)="onSelect(user)"
+      [@flyInOut]>
+    <span class="badge">{{user.id}}</span> {{user.name}}
+    <button class="delete"
+            (click)="deleteUser(user); $event.stopPropagation()">
+      x
+    </button>
+  </li>
+</ul>
+<user-detail [user]="selectedUser"></user-detail>

Client/app/containers/users/users.component.ts

@@ -7,8 +7,9 @@ import { IUser } from '../../models/User';
 import { UserService } from '../../shared/user.service';
 
 @Component({
-    selector: 'fetchdata',
+    selector: 'users',
     templateUrl: './users.component.html',
+    styleUrls: ['./users.component.css'],
     animations: [
         // Animation example
         // Triggered in the ngFor with [@flyInOut]
@@ -26,23 +27,26 @@ import { UserService } from '../../shared/user.service';
 })
 export class UsersComponent implements OnInit {
 
-    public newUserName: string;
-    public users: IUser[];
+    private users: IUser[];
+    private selectedUser: IUser;
 
     // Use "constructor"s only for dependency injection
     constructor(private userService: UserService) { }
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up
     ngOnInit() {
-        this.newUserName = '';
         this.userService.getUsers().subscribe(result => {
             console.log('Get user result: ', result);
             console.log('TransferHttp [GET] /api/users/allresult', result);
             this.users = result as IUser[];
         });
     }
 
+    onSelect(user: IUser): void {
+        this.selectedUser = user;
+    }
+
     deleteUser(user) {
         this.userService.deleteUser(user).subscribe(result => {
             console.log('Delete user result: ', result);
@@ -55,21 +59,11 @@ export class UsersComponent implements OnInit {
         });
     }
 
-    updateUser(user) {
-        this.userService.updateUser(user).subscribe(result => {
-            console.log('Put user result: ', result);
-            if (!result.ok) {
-                alert('There was an issue, Could not edit user');
-            }
-        });
-    }
-
     addUser(newUserName) {
         this.userService.addUser(newUserName).subscribe(result => {
             console.log('Post user result: ', result);
             if (result.ok) {
                 this.users.push(result.json());
-                this.newUserName = '';
             } else {
                 alert('There was an issue, Could not edit user');
             }