sorting arrows for multiple columns

front/core/components/smart-table/index.js

@@ -6,7 +6,7 @@ export default class SmartTable extends Component {
     constructor($element, $, $transclude) {
         super($element, $);
         this.$transclude = $transclude;
-        // stuff
+        this.sortCriteria = [];
     }
 
     /*    $onDestroy() {
@@ -53,7 +53,40 @@ export default class SmartTable extends Component {
 
     orderHandler(element) {
         const field = element.getAttribute('field');
-        console.log(`You clicked to ` + field);
+        const existingCriteria = this.sortCriteria.find(criteria => {
+            return criteria.field == field;
+        });
+
+        if (!existingCriteria) {
+            this.sortCriteria.push({field: field, sortType: 'ASC'});
+            element.classList.remove('desc');
+            element.classList.add('asc');
+        }
+
+        if (existingCriteria && existingCriteria.sortType == 'DESC') {
+            this.sortCriteria.splice(this.sortCriteria.findIndex(criteria => {
+                return criteria.field == field;
+            }), 1);
+            element.classList.remove('desc');
+            element.classList.remove('asc');
+        }
+        if (existingCriteria && existingCriteria.sortType == 'ASC') {
+            existingCriteria.sortType = 'DESC';
+            element.classList.remove('asc');
+            element.classList.add('desc');
+        }
+
+        this.applySort();
+    }
+
+    applySort() {
+        let order = this.sortCriteria.map(criteria => `${criteria.field} ${criteria.sortType}`);
+        order = order.join(', ');
+
+        if (order)
+            this.model.order = order;
+
+        this.model.refresh();
     }
 
     createRow() {

front/core/components/smart-table/style.scss

@@ -2,6 +2,38 @@
 @import "variables";
 
 smart-table {
+    th[field] {
+        overflow: visible;
+        cursor: pointer;
+
+        &.asc > :after, &.desc > :after {
+            color: $color-font;
+            opacity: 1;
+        }
+
+        &.asc > :after {
+            content: 'arrow_drop_up';
+        }
+
+        &.desc > :after {
+            content: 'arrow_drop_down';
+        }
+
+        & > :after {
+            font-family: 'Material Icons';
+            content: 'arrow_drop_down';
+            position: absolute;
+            color: $color-spacer;
+            font-size: 1.5em;
+            margin-top: -2px;
+            opacity: 0
+        
+        }
+        &:hover > :after {
+            opacity: 1;
+        }
+    }
+
     .actions-left {
         display: flex;
         justify-content: flex-start;

front/core/directives/index.js

@@ -16,5 +16,4 @@ import './droppable';
 import './http-click';
 import './http-submit';
 import './anchor';
-import './smart-table2';
 

front/core/directives/smart-table2.js

@@ -1,54 +0,0 @@
-import ngModule from '../module';
-import Component from '../lib/component';
-import './smart-table.scss';
-
-class Controller extends Component {
-    constructor($element, $, $attrs) {
-        super($element, $);
-        // this.element = $element[0];
-
-        this.$attrs = $attrs;
-
-        this.registerColumns();
-        this.registerEvents();
-    }
-
-    registerColumns() {
-        const header = this.element.querySelector('thead > tr');
-        if (!header) return;
-        const columns = header.querySelectorAll('th');
-
-        // TODO: Add arrow icon and so on..
-        // Click handler
-        for (let column of columns)
-            column.addEventListener('click', () => this.orderHandler(column));
-    }
-
-    registerEvents() {
-        this.$.$on('addRow', () => this.addRow());
-        this.$.$on('displaySearch', () => this.displaySearch());
-    }
-
-    orderHandler(element) {
-        const field = element.getAttribute('field');
-        console.log(`You clicked to ` + field);
-    }
-
-    displaySearch() {
-        console.log('Display the search!');
-    }
-
-    addRow() {
-        console.log('Add new row element');
-        this.$.model.insert({});
-    }
-}
-Controller.$inject = ['$element', '$scope', '$attrs'];
-
-ngModule.directive('smartTable2', () => {
-    return {
-        controller: Controller,
-        bindings: {
-        }
-    };
-});

modules/ticket/front/index/index.html

@@ -22,8 +22,12 @@
                                 model="model">
                             </vn-multi-check>
                         </th>
-                        <th field="myfield1" translate>ID</th>
-                        <th field="myfield2" translate>Nickname</th>
+                        <th field="id">
+                            <span translate>#ID</span>
+                        </th>
+                        <th field="nickname">
+                            <span translate>Nickname</span>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>