Sort order table

public/css/app.css

@@ -85,3 +85,15 @@ a.mui-btn.disabled {
   height: 48px;
   line-height: 48px;
 }
+
+.mui-appbar .nav .nav-item a.active {
+  background: navy;
+}
+
+.table-col-sort a.sort-button {
+  color: grey;
+}
+
+.table-col-sort a.sort-button.active {
+  color: blue;
+}

src/data/orders.ts

@@ -5,6 +5,8 @@ const ALL_ORDERS_COLUMNS = ['*'];
 
 interface AllOrdersOptions {
   page: number;
+  sort: string;
+  order: 'asc' | 'desc';
   perPage: number;
 }
 

src/helpers/link-to.ts

@@ -1,14 +1,34 @@
 import * as Handlebars from 'handlebars';
+import * as url from 'url';
+
+function isActive(currentUrl: string, linkUrl: string): boolean {
+  let current = url.parse(currentUrl, true);
+  let href = url.parse(linkUrl, true);
+  if (current.pathname !== href.pathname) {
+    return false;
+  }
+  for (let k in href.query) {
+    if (href.query[k] === undefined || href.query[k] !== current.query[k]) {
+      return false;
+    }
+  }
+  return true;
+}
 
 export default function linkTo(this: any, opts?: Handlebars.HelperOptions) {
   if (!opts) {
     throw new Error('No options were passed to {{link-to}}');
   }
   let { hash } = opts;
   let { disabled, classNames, href } = hash;
-  classNames = classNames.split(' ');
+  classNames = (classNames || '').split(' ');
   if (disabled) {
     classNames.push('disabled');
   }
+  let active = isActive(opts.data.root.request.url, href);
+
+  if (active) {
+    classNames.push('active');
+  }
   return new Handlebars.SafeString(`<a class='${classNames.join(' ')}' href='${href}'>${opts.fn(this)}</a>`);
 }

src/helpers/merge-qps.ts

@@ -1,5 +1,4 @@
 import { assign } from 'lodash';
-import * as querystring from 'querystring';
 import * as url from 'url';
 
 const mergeQps = (originalUrl: string, opts?: Handlebars.HelperOptions) => {

src/routers/orders.ts

@@ -5,8 +5,8 @@ import { logger } from '../log';
 const router = express.Router();
 
 router.get('/', async (req, res) => {
-  let { page = 1, perPage = 25 } = req.query;
-  let orders = await getAllOrders({ page, perPage });
+  let { page = 1, perPage = 25, sort, order } = req.query;
+  let orders = await getAllOrders({ page, perPage, sort, order });
   res.render('orders', { orders, page });
 });
 

views/orders/index.hbs

@@ -5,10 +5,10 @@
     <table class="mui-table">
       <thead>
         <tr>
-          <th>Id</th>
-          <th>CustomerId</th>
-          <th>EmployeeId</th>
-          <th>Ship To</th>
+          <th>Id {{> 'table-col-sort' by='Id'}} </th>
+          <th>CustomerId {{> 'table-col-sort' by='CustomerId'}} </th>
+          <th>EmployeeId {{> 'table-col-sort' by='EmployeeId'}} </th>
+          <th>Ship To {{> 'table-col-sort' by='ShipCountry'}} </th>
         </tr>
       </thead>
       <tbody>

views/partials/appbar.hbs

@@ -2,19 +2,19 @@
   <div class="mui-container">
     <ul class="nav">
       <li class='nav-item'>
-        <a class='mui--appbar-height' href="/employees">Employees</a>
+        {{#link-to classNames='mui--appbar-height' href="/employees"}}Employees{{/link-to}}
       </li>
       <li class='nav-item'>
-        <a class='mui--appbar-height' href="/customers">Customers</a>
+        {{#link-to classNames='mui--appbar-height' href="/customers"}}Customers{{/link-to}}
       </li>
       <li class='nav-item'>
-        <a class='mui--appbar-height' href="/suppliers">Suppliers</a>
+        {{#link-to classNames='mui--appbar-height' href="/suppliers"}}Suppliers{{/link-to}}
       </li>
       <li class='nav-item'>
-        <a class='mui--appbar-height' href="/orders">Orders</a>
+        {{#link-to classNames='mui--appbar-height' href="/orders"}}Orders{{/link-to}}
       </li>
       <li class='nav-item'>
-        <a class='mui--appbar-height' href="/products">Products</a>
+        {{#link-to classNames='mui--appbar-height' href="/products"}}Products{{/link-to}}
       </li>
     </ul>
   </div>

views/partials/table-col-sort.hbs

@@ -0,0 +1,4 @@
+<span class="table-col-sort mui--pull-right">
+  {{#link-to classNames='sort-button' href=(merge-qps request.url sort=by order='asc') }}⬆{{/link-to}} {{#link-to classNames='sort-button'
+  href=(merge-qps request.url sort=by order='desc') }}⬇{{/link-to}}
+</span>