Added REST API and used them on the users component

Author: LiverpoolOwen

Client/app/app.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './containers/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
-import { FetchDataComponent } from './containers/fetchdata/fetchdata.component';
+import { UsersComponent } from './containers/users/users.component';
 import { CounterComponent } from './containers/counter/counter.component';
 import { ChatComponent } from './containers/chat/chat.component';
 
@@ -18,13 +19,14 @@ import { ConnectionResolver } from './shared/route.resolver';
         AppComponent,
         NavMenuComponent,
         CounterComponent,
-        FetchDataComponent,
+        UsersComponent,
         HomeComponent,
         ChatComponent
     ],
     imports: [
         CommonModule,
         HttpModule,
+        FormsModule,
         // App Routing
         RouterModule.forRoot([
             {
@@ -61,13 +63,13 @@ import { ConnectionResolver } from './shared/route.resolver';
                 }
             },
             {
-                path: 'fetch-data', component: FetchDataComponent,
+                path: 'users', component: UsersComponent,
                 data: {
-                    title: 'REST demo',
-                    meta: [{ name: 'description', content: `We're hitting REST in this Demo!` }],
+                    title: 'Users REST example',
+                    meta: [{ name: 'description', content: 'This is User REST API example page Description!' }],
                     links: [
-                        { rel: 'canonical', href: 'http://blogs.example.com/%3Cspan%20class="x x-first x-last">fetch-data/canonicaldemo' },
-                        { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/%3Cspan%20class="x x-first x-last">fetchstuff' }
+                        { rel: 'canonical', href: 'http://blogs.example.com/%3Cspan%20class="x x-first x-last">chat/something' },
+                        { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/%3Cspan%20class="x x-first x-last">users' }
                     ]
                 }
             },

Client/app/containers/fetchdata/fetchdata.component.html

@@ -23,8 +23,8 @@
                     </a>
                 </li>
                 <li [routerLinkActive]="['link-active']">
-                    <a [routerLink]="['/fetch-data']">
-                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
+                    <a [routerLink]="['/users']">
+                        <span class='glyphicon glyphicon-user'></span> Users
                     </a>
                 </li>
                 <li [routerLinkActive]="['link-active']">

Client/app/containers/fetchdata/fetchdata.component.ts

@@ -0,0 +1,43 @@
+<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
+
+<blockquote>
+    Let's get some fake users from Rest:<br>
+    You can find the Web API Routes in <code>{{ "/Server/RestAPI/ ... "}}</code>
+</blockquote>
+
+<p *ngIf="!users"><em>Loading...</em></p>
+
+<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)="editUser(user)">Save</button>
+            </td>
+            <td>
+                <button class="btn btn-danger" (click)="deleteUser(user)">Delete</button>
+            </td>
+        </tr>
+        <tr>
+            <td></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)"></button>
+            </td>
+        </tr>
+    </tbody>
+</table>

Client/app/containers/navmenu/navmenu.component.html

@@ -0,0 +1,86 @@
+import {
+    Component, OnInit,
+    // animation imports
+    trigger, state, style, transition, animate
+} from '@angular/core';
+
+import { Http, URLSearchParams } from '@angular/http';
+
+@Component({
+    selector: 'fetchdata',
+    templateUrl: './users.component.html',
+    animations: [
+        // Animation example
+        // Triggered in the ngFor with [@flyInOut]
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [
+                style({ transform: 'translateY(-100%)' }),
+                animate(1000)
+            ]),
+            transition('* => void', [
+                animate(1000, style({ transform: 'translateY(100%)' }))
+            ])
+        ])
+    ]
+})
+export class UsersComponent implements OnInit {
+
+    public newUserName: string;
+    public users: IUser[];
+
+    // Use "constructor"s only for dependency injection
+    constructor(private http: Http) { }
+
+    // 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.http.get('http://localhost:5000/api/user/all').map(res => res.json()).subscribe(result => {
+            console.log(result);
+            this.users = result as IUser[];
+        });
+    }
+
+    deleteUser(user) {
+        this.http.delete("http://localhost:5000/api/user/delete/" + user.id).subscribe(result => {
+            if (result.ok) {
+                let position = this.users.indexOf(user);
+                this.users.splice(position, 1);
+            }
+            else {
+                alert("There was an issue, Could not delete user");
+            }
+        });
+    }
+
+    editUser(user) {
+        let urlSearchParams = new URLSearchParams();
+        urlSearchParams.append('id', user.id);
+        urlSearchParams.append('name', user.name);
+        this.http.put('http://localhost:5000/api/user/update', urlSearchParams).subscribe(result => {
+            if (!result.ok) {
+                alert("There was an issue, Could not edit user");
+            }
+        });
+    }
+
+    addUser(newUserName) {
+        let urlSearchParams = new URLSearchParams();
+        urlSearchParams.append('name', newUserName);
+        this.http.post('http://localhost:5000/api/user/insert', urlSearchParams).subscribe(result => {
+            if (result.ok) {
+                this.users.push(result.json());
+                this.newUserName = "";
+            }
+            else {
+                alert("There was an issue, Could not edit user");
+            }
+        });
+    }
+}
+
+interface IUser {
+    id: number;
+    name: string;
+}

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

@@ -0,0 +1,105 @@
+using AspCoreServer.Data;
+using AspCoreServer.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AspCoreServer.Controllers
+{
+    [Route("api/user/[action]")]
+    public class UserController : Controller
+    {
+        private readonly SpaDbContext _context;
+
+        public UserController(SpaDbContext context)
+        {
+            _context = context;
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> All(int currentPageNo = 1, int pageSize = 20)
+        {
+            var users = await _context.User
+                .OrderByDescending(u => u.EntryTime)
+                .Skip((currentPageNo - 1) * pageSize)
+                .Take(pageSize)
+                .ToArrayAsync();
+
+            return Ok(users);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> Details(int? id)
+        {
+            var user = await _context.User
+                .Where(u => u.ID == id)
+                .AsNoTracking()
+                .SingleOrDefaultAsync(m => m.ID == id);
+
+            if (user == null)
+            {
+                return NotFound("User not Found");
+            }
+            else
+            {
+                return Ok(user);
+            }
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Insert([Bind("Name")] Users user)
+        {
+            if (user.Name != null)
+            {
+                _context.Add(user);
+                await _context.SaveChangesAsync();
+                return Ok(user);
+            }
+            else
+            {
+                return NotFound("Name not given");
+            }
+        }
+
+        [HttpPut]
+        public async Task<IActionResult> Update([Bind("ID,Name")] Users userUpdateValue)
+        {
+            try
+            {
+                userUpdateValue.EntryTime = DateTime.Now;
+                _context.Update(userUpdateValue);
+                await _context.SaveChangesAsync();
+                return Ok(userUpdateValue);
+            }
+            catch (DbUpdateException)
+            {
+                //Log the error (uncomment ex variable name and write a log.)
+                ModelState.AddModelError("", "Unable to save changes. " +
+                    "Try again, and if the problem persists, " +
+                    "see your system administrator.");
+                return NotFound("User not Found");
+            }
+        }
+
+        [HttpDelete]
+        [Route("{id:int}")]
+        public async Task<IActionResult> Delete(int? id)
+        {
+            var userToRemove = await _context.User
+                .AsNoTracking()
+            .SingleOrDefaultAsync(m => m.ID == id);
+            if (userToRemove == null)
+            {
+                return NotFound("User not Found");
+            }
+            else
+            {
+                _context.User.Remove(userToRemove);
+                await _context.SaveChangesAsync();
+                return Ok("Deleted user - " + userToRemove.Name);
+            }
+        }
+    }
+}