Add the ability to sort the tables

Author: mprahl

src/app/mbs/base-components/base-list.component.ts

@@ -0,0 +1,42 @@
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+
+
+export class BaseListComponent {
+  orderBy: string;
+  orderDirection: string;
+  currentPage: number;
+  loading: boolean = false;
+  exhausted: boolean = false;
+
+  processRouteParams(params: ParamMap) {
+    // TODO: Add validation here
+    if (params.get('orderBy')) {
+        this.orderBy = params.get('orderBy');
+      } else {
+        this.orderBy = 'id';
+      }
+      if (params.get('orderDirection')) {
+        this.orderDirection = params.get('orderDirection');
+      } else {
+        this.orderDirection = 'desc';
+      }
+  }
+
+  getOrderDirection(header): string {
+    if (header.toLowerCase().replace(' ', '_') == this.orderBy && this.orderDirection == 'desc') {
+        return 'asc';
+    }
+    return 'desc';
+  }
+
+  getArrowClass(header: string): string {
+    if (header.toLowerCase().replace(' ', '_') == this.orderBy) {
+      if (this.orderDirection == 'asc') {
+        return 'orderAsc';
+      } else {
+        return 'orderDesc';
+      }
+    }
+    return '';
+  }
+}

src/app/mbs/module-components/module-components.component.html

@@ -2,15 +2,19 @@
 
 <h2 class="title">Components</h2>
 
-<table *ngIf="components.length || exhausted" class="table table-responsive-sm table-hover table-bordered" infinite-scroll (scrolled)="onScrollDown()">
+<table class="table table-responsive-sm table-hover table-bordered mbs-list-table" infinite-scroll (scrolled)="onScrollDown()">
   <thead>
-    <td scope="col">Module Build</td>
-    <td scope="col">Package</td>
-    <td scope="col">Task ID</td>
-    <td scope="col">State</td>
+    <th *ngFor="let header of ['ID', 'Module Build', 'Package', 'Task ID', 'State']" scope="col">
+      <a *ngIf="header != 'Module Build'" [routerLink]="['/components', {'orderBy': header.toLowerCase().replace(' ', '_'), 'orderDirection': getOrderDirection(header)}]"
+          [ngClass]="getArrowClass(header)">
+        {{ header }}
+      </a>
+      <span *ngIf="header == 'Module Build'">{{ header }}</span>
+    </th>
   </thead>
   <tbody>
     <tr *ngFor="let component of components">
+      <td scope="row">{{ component.id }}</td>
       <td scope="row"><a [routerLink]="['/module', component.module_build]">{{ component.module_build }}</a></td>
       <td scope="row">{{ component.package }}</td>
       <td scope="row">

src/app/mbs/module-components/module-components.component.scss

@@ -1,7 +1,9 @@
-table thead td {
-    width: 20%;
+table thead {
+    th {
+        width: 15%;
+        white-space: nowrap;
+    }
+    th:nth-child(3) {
+        width: 25%;
+    }
 }
-
-table thead td:nth-child(2) {
-    width: 40%;
-}

src/app/mbs/module-components/module-components.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { NgProgress } from 'ngx-progressbar';
 
+import { BaseListComponent } from 'mbs/base-components/base-list.component';
 import { ModuleService } from 'mbs/services/module.service';
 import { MbsComponent } from 'mbs/types/mbs.type';
 
@@ -10,25 +12,30 @@ import { MbsComponent } from 'mbs/types/mbs.type';
   templateUrl: './module-components.component.html',
   styleUrls: ['./module-components.component.scss']
 })
-export class ModuleComponentsComponent implements OnInit {
+export class ModuleComponentsComponent extends BaseListComponent implements OnInit {
 
   readonly koji_url: string = 'https://koji.fedoraproject.org/koji/';
   components: Array<MbsComponent> = [];
-  currentPage: number = 1;
-  loading: boolean = false;
-  exhausted: boolean = false;
 
-  constructor(public ngProgress: NgProgress,
-              private moduleService: ModuleService) { }
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              public ngProgress: NgProgress,
+              private moduleService: ModuleService) {super();}
 
   ngOnInit() {
-    this.getComponents();
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      this.processRouteParams(params);
+      this.components = [];
+      this.exhausted = false;
+      this.currentPage = 1;
+      this.getComponents();
+    })
   }
 
   getComponents(): void {
     if (!this.exhausted && !this.loading) {
       this.loading = true;
-      this.moduleService.getComponents(this.currentPage).subscribe(
+      this.moduleService.getComponents(this.currentPage, this.orderBy, this.orderDirection).subscribe(
         data => {
           if (data.items.length) {
             this.components = this.components.concat(data.items);

src/app/mbs/modules/modules.component.html

@@ -2,13 +2,14 @@
 
 <h2 class="title">Modules</h2>
 
-<table *ngIf="modules.length || exhausted" class="table table-responsive-sm table-hover table-bordered" infinite-scroll (scrolled)="onScrollDown()">
+<table class="table table-responsive-sm table-hover table-bordered mbs-list-table" infinite-scroll (scrolled)="onScrollDown()">
   <thead>
-    <td scope="col">ID</td>
-    <td scope="col">Name</td>
-    <td scope="col">Stream</td>
-    <td scope="col">Version</td>
-    <td scope="col">State</td>
+    <th *ngFor="let header of ['ID', 'Name', 'Stream', 'Version', 'State']" scope="col">
+      <a [routerLink]="['/modules', {'orderBy': header.toLowerCase(), 'orderDirection': getOrderDirection(header)}]"
+          [ngClass]="getArrowClass(header)">
+        {{ header }}
+      </a>
+    </th>
   </thead>
   <tbody>
     <tr *ngFor="let module of modules">

src/app/mbs/modules/modules.component.scss

@@ -0,0 +1,9 @@
+table thead {
+    th {
+        width: 20%;
+        white-space: nowrap;
+    }
+    th:nth-child(2) {
+        width:40%;
+    }
+}

src/app/mbs/modules/modules.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { NgProgress } from 'ngx-progressbar';
 
+import { BaseListComponent } from 'mbs/base-components/base-list.component';
 import { ModuleService } from 'mbs/services/module.service';
 import { MbsModuleShort } from 'mbs/types/mbs.type';
 
@@ -10,24 +12,29 @@ import { MbsModuleShort } from 'mbs/types/mbs.type';
   templateUrl: './modules.component.html',
   styleUrls: ['./modules.component.scss'],
 })
-export class ModulesComponent implements OnInit {
+export class ModulesComponent extends BaseListComponent implements OnInit {
 
-  modules: Array<MbsModuleShort> = [];
-  currentPage: number = 1;
-  loading: boolean = false;
-  exhausted: boolean = false;
+  modules: Array<MbsModuleShort>;
 
-  constructor(public ngProgress: NgProgress,
-              private moduleService: ModuleService) { }
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              public ngProgress: NgProgress,
+              private moduleService: ModuleService) {super();}
 
   ngOnInit() {
-    this.getModules();
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      this.processRouteParams(params);
+      this.modules = [];
+      this.exhausted = false;
+      this.currentPage = 1;
+      this.getModules();
+    })
   }
 
   getModules(): void {
     if (!this.exhausted && !this.loading) {
       this.loading = true;
-      this.moduleService.getModules(this.currentPage).subscribe(
+      this.moduleService.getModules(this.currentPage, this.orderBy, this.orderDirection).subscribe(
         data => {
           if (data.items.length) {
             this.modules = this.modules.concat(data.items);

src/app/mbs/services/module.service.ts

@@ -11,19 +11,31 @@ export class ModuleService {
   private readonly mbsUrl: string = 'https://mbs.fedoraproject.org/module-build-service/1/'
   constructor(private http: HttpClient) { }
 
-  getModules (page: number = 1): Observable<MbsModulesShortApi> {
-    return this.http.get<MbsModulesShortApi>(this.mbsUrl + 'module-builds/?short=true&per_page=40&page=' + page);
+  private getOrderKey(orderDirection: string): string {
+    if (orderDirection == 'desc') {
+      return 'order_desc_by';
+    } else {
+      return 'order_by';
+    }
   }
 
-  getModule (id: number): Observable<MbsModule> {
+  getModules(page: number = 1, orderBy: string = 'id', orderDirection: string = 'desc'): Observable<MbsModulesShortApi> {
+    let orderKey = this.getOrderKey(orderDirection);
+    let url = this.mbsUrl + 'module-builds/?short=true&per_page=40&page=' + page + '&' + orderKey + '=' + orderBy;
+    return this.http.get<MbsModulesShortApi>(url);
+  }
+
+  getModule(id: number): Observable<MbsModule> {
     return this.http.get<MbsModule>(this.mbsUrl + 'module-builds/' + id);
   }
 
-  getComponents (page: number = 1): Observable<MbsComponentsApi> {
-    return this.http.get<MbsComponentsApi>(this.mbsUrl + 'component-builds/?per_page=40&page=' + page);
+  getComponents(page: number = 1, orderBy: string = 'id', orderDirection: string = 'desc'): Observable<MbsComponentsApi> {
+    let orderKey = this.getOrderKey(orderDirection);
+    let url = this.mbsUrl + 'component-builds/?per_page=40&page=' + page + '&' + orderKey + '=' + orderBy;
+    return this.http.get<MbsComponentsApi>(url);
   }
 
-  getComponent (id: number): Observable<MbsComponent> {
+  getComponent(id: number): Observable<MbsComponent> {
     return this.http.get<MbsComponent>(this.mbsUrl + 'component-builds/' + id);
   }
 }

src/styles.scss

@@ -13,10 +13,30 @@ $fa-font-path: "../node_modules/font-awesome/fonts";
 }
 }
 
-table {
-    thead {
-        td {
-            font-weight: bold;
+table.mbs-list-table thead {
+    th {
+        a {
+            text-decoration: none;
+            color: #212529;
+            display:inline-block;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        a.orderAsc:after {
+            font-family: FontAwesome;
+            content: '\f077';
+            font-weight: lighter;
+            display:inline-block;
+        }
+
+        a.orderDesc:after {
+            font-family: FontAwesome;
+            content: '\f078';
+            font-weight: lighter;
+            display:inline-block;
         }
     }
 }