Category listing from JSON file, sorting each column and category details with Types.

Author: ragupathyt

src/app/about/about.component.html

@@ -3,13 +3,9 @@
     <h1>Products</h1>
   </header>
 
-</div>
 
-<main>
-	<router-outlet></router-outlet>
-</main>
+  <main>
+    <home></home>
+  </main>
 
-
-<footer>
- 
-</footer>
+</div>

src/app/app.component.html

@@ -8,25 +8,26 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 
-import { AboutComponent } from './about/about.component';
+
 import { HomeComponent } from './home/home.component';
+import { CategoriesComponent } from './categories/categories.component';
+import { DetailsComponent } from './details/details.component';
 import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
 import { RepoListComponent } from './github/repo-list/repo-list.component';
 import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
-import { ContactComponent } from './contact/contact.component';
 import { SortPipe } from './app.sort';
 
 @NgModule({
   declarations: [
     SortPipe,
     AppComponent,
-    AboutComponent,
+    CategoriesComponent,
+    DetailsComponent,
     RepoBrowserComponent,
     RepoListComponent,
     RepoDetailComponent,
-    HomeComponent,
-    ContactComponent
+    HomeComponent
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -1,16 +1,17 @@
 import { Routes } from '@angular/router';
 
-import { AboutComponent } from './about/about.component';
+import { CategoriesComponent } from './categories/categories.component';
+import { DetailsComponent } from './details/details.component';
 import { HomeComponent } from './home/home.component';
 import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
 import { RepoListComponent } from './github/repo-list/repo-list.component';
 import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
-import { ContactComponent } from './contact/contact.component';
 
 export const rootRouterConfig: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent },
-  { path: 'about', component: AboutComponent },
+  { path: 'home', component: CategoriesComponent },
+  { path: 'categories', component: CategoriesComponent },
+  { path: 'details', component: DetailsComponent },
   { path: 'github', component: RepoBrowserComponent,
     children: [
       { path: '', component: RepoListComponent },
@@ -20,7 +21,6 @@ export const rootRouterConfig: Routes = [
           { path: ':repo', component: RepoDetailComponent }
         ]
       }]
-  },
-  { path: 'contact', component: ContactComponent }
+  }
 ];
 

src/app/app.routes.ts

@@ -0,0 +1,21 @@
+
+<div>
+    <h3>Category List</h3>
+
+    <table>
+        <thead>
+            <tr>
+                <td><a href="#" (click)="setSortBy('name')">Name</a></td>
+                <td><a href="#" (click)="setSortBy('category')">Category</a></td>
+                <td><span><a href="#" (click)="setSortBy('amount')">amount</a></span></td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let category of categories">
+                <td>{{category.name}}</td>
+                <td>{{category.category}}</td>
+                <td><span>${{category.amount}}</span></td>
+            </tr>
+        </tbody>
+    </table>
+</div>

src/app/about/about.component.css renamed to src/app/categories/categories.component.css

@@ -0,0 +1,30 @@
+import {Component, OnInit} from '@angular/core';
+import { CategoriesService } from '../categories.service';
+import { Http } from '@angular/http';
+import * as _ from "lodash";
+
+@Component({
+  selector: 'categories',
+  styleUrls: ['./categories.component.css'],
+  templateUrl: './categories.component.html'
+})
+export class CategoriesComponent implements OnInit {
+  categories = [];
+  sortBy = '';
+  reverseSort = false;
+  constructor(private _categoriesService: CategoriesService){}
+  ngOnInit() {
+    this._categoriesService.getCategories()
+      .subscribe(resCategoriesData => this.categories = resCategoriesData);
+  }
+
+  sortedCategories = function() {
+    let orderSort = this.reverseSort ? 'desc' : 'asc';
+    this.categories = _.orderBy(this.categories, [this.sortBy], [orderSort]);
+  }
+  setSortBy = function(value) {
+    this.reverseSort = this.sortBy == value ? !this.reverseSort : false;
+    this.sortBy = value;
+    this.sortedCategories();
+  }
+}