From d5cdbd723fe098ce2ca598f356bd643b0378a6ae Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Mon, 28 Nov 2016 16:04:38 -0300
Subject: [PATCH] Ivan - Add sorting arrows to table and list users [skip ci]

---
 .../panel/users/admin-panel-list-users.js     | 30 +++++++++++++++++--
 client/src/core-components/table.js           | 19 +++++++++++-
 client/src/core-components/table.scss         | 12 ++++++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.js b/client/src/app/admin/panel/users/admin-panel-list-users.js
index dd7b27ea..9944e66f 100644
--- a/client/src/app/admin/panel/users/admin-panel-list-users.js
+++ b/client/src/app/admin/panel/users/admin-panel-list-users.js
@@ -14,6 +14,8 @@ class AdminPanelListUsers extends React.Component {
     state = {
         loading: true,
         users: [],
+        orderBy: 'id',
+        desc: true,
         page: 1,
         pages: 1
     };
@@ -65,12 +67,18 @@ class AdminPanelListUsers extends React.Component {
             {
                 key: 'tickets',
                 value: i18n('TICKETS'),
-                className: 'admin-panel-list-users__table-tickets col-md-2'
+                className: 'admin-panel-list-users__table-tickets col-md-2',
+                order: true,
+                onOrderUp: this.orderByTickets.bind(this, false),
+                onOrderDown: this.orderByTickets.bind(this, true)
             },
             {
                 key: 'signupDate',
                 value: i18n('SIGNUP_DATE'),
-                className: 'admin-panel-list-users__table-date col-md-2'
+                className: 'admin-panel-list-users__table-date col-md-2',
+                order: true,
+                onOrderUp: this.orderById.bind(this, false),
+                onOrderDown: this.orderById.bind(this, true)
             }
         ];
     }
@@ -110,6 +118,24 @@ class AdminPanelListUsers extends React.Component {
         });
     }
 
+    orderByTickets(desc) {
+        this.retrieveUsers({
+            page: 1,
+            orderBy: 'tickets',
+            desc: desc,
+            search: this.state.search
+        });
+    }
+
+    orderById(desc) {
+        this.retrieveUsers({
+            page: 1,
+            orderBy: 'id',
+            desc: desc,
+            search: this.state.search
+        });
+    }
+
     retrieveUsers(data) {
         this.setState({
             loading: true
diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js
index 449d2b63..2d0fc757 100644
--- a/client/src/core-components/table.js
+++ b/client/src/core-components/table.js
@@ -3,6 +3,7 @@ import _ from 'lodash';
 import classNames from 'classnames';
 
 import Menu from 'core-components/menu';
+import Icon from 'core-components/icon';
 import Loading from 'core-components/loading';
 
 class Table extends React.Component {
@@ -56,7 +57,23 @@ class Table extends React.Component {
         };
         
         return (
-            <th className={classNames(classes)} key={header.key}>{header.value}</th>
+            <th className={classNames(classes)} key={header.key}>
+                {header.value}
+                {(header.order) ? this.renderHeaderArrows(header.onOrderUp, header.onOrderDown) : null}
+            </th>
+        );
+    }
+
+    renderHeaderArrows(onArrowUp, onArrowDown) {
+        return (
+            <span className="table__header-arrows">
+                <span className="table__header-arrow-up" onClick={onArrowUp}>
+                    <Icon name="arrow-up"/>
+                </span>
+                <span className="table__header-arrow-down" onClick={onArrowDown}>
+                    <Icon name="arrow-down"/>
+                </span>
+            </span>
         );
     }
 
diff --git a/client/src/core-components/table.scss b/client/src/core-components/table.scss
index fe29d346..079b941d 100644
--- a/client/src/core-components/table.scss
+++ b/client/src/core-components/table.scss
@@ -7,6 +7,18 @@
         background-color: $primary-blue;
         color: white;
         font-weight: normal;
+
+        &-arrow-up {
+            cursor: pointer;
+            font-size: $font-size--xs;
+            margin-left: 10px;
+        }
+
+        &-arrow-down {
+            cursor: pointer;
+            font-size: $font-size--xs;
+            margin-left: 3px;
+        }
     }
 
     &__header-column {