Merge branch 'sort-elements' into 'master'

Allow sorting elements

Closes #704

See merge request !1031

config.json

@@ -625,6 +625,18 @@
       "css": "export",
       "code": 59421,
       "src": "elusive"
+    },
+    {
+      "uid": "0cd2582b8c93719d066ee0affd02ac78",
+      "css": "sort-asc",
+      "code": 61792,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "27b13eff5eb0ca15e01a6e65ffe6eeec",
+      "css": "sort-desc",
+      "code": 61793,
+      "src": "fontawesome"
     }
   ]
 }
\ No newline at end of file

font/arkindex.svg

@@ -96,7 +96,11 @@
 
 <glyph glyph-name="doc-plain" unicode="&#xf15c;" d="M819 584q8-7 16-20h-264v264q13-8 21-16z m-265-91h303v-589q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h446v-304q0-22 16-37t38-16z m89-411v36q0 8-5 13t-13 5h-393q-8 0-13-5t-5-13v-36q0-8 5-13t13-5h393q8 0 13 5t5 13z m0 143v36q0 8-5 13t-13 5h-393q-8 0-13-5t-5-13v-36q0-8 5-13t13-5h393q8 0 13 5t5 13z m0 143v36q0 7-5 12t-13 5h-393q-8 0-13-5t-5-12v-36q0-8 5-13t13-5h393q8 0 13 5t5 13z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="sort-asc" unicode="&#xf160;" d="M411 46q0-6-6-13l-178-178q-5-5-13-5-6 0-12 5l-179 179q-8 9-4 19 4 11 17 11h107v768q0 8 5 13t13 5h107q8 0 13-5t5-13v-768h107q8 0 13-5t5-13z m589-71v-107q0-8-5-13t-13-5h-464q-8 0-13 5t-5 13v107q0 8 5 13t13 5h464q8 0 13-5t5-13z m-107 286v-107q0-8-5-13t-13-5h-357q-8 0-13 5t-5 13v107q0 8 5 13t13 5h357q8 0 13-5t5-13z m-107 285v-107q0-7-5-12t-13-6h-250q-8 0-13 6t-5 12v107q0 8 5 13t13 5h250q8 0 13-5t5-13z m-107 286v-107q0-8-5-13t-13-5h-143q-8 0-13 5t-5 13v107q0 8 5 13t13 5h143q8 0 13-5t5-13z" horiz-adv-x="1000" />
+
+<glyph glyph-name="sort-desc" unicode="&#xf161;" d="M679-25v-107q0-8-5-13t-13-5h-143q-8 0-13 5t-5 13v107q0 8 5 13t13 5h143q8 0 13-5t5-13z m-268 71q0-6-6-13l-178-178q-5-5-13-5-6 0-12 5l-179 179q-8 9-4 19 4 11 17 11h107v768q0 8 5 13t13 5h107q8 0 13-5t5-13v-768h107q8 0 13-5t5-13z m375 215v-107q0-8-5-13t-13-5h-250q-8 0-13 5t-5 13v107q0 8 5 13t13 5h250q8 0 13-5t5-13z m107 285v-107q0-7-5-12t-13-6h-357q-8 0-13 6t-5 12v107q0 8 5 13t13 5h357q8 0 13-5t5-13z m107 286v-107q0-8-5-13t-13-5h-464q-8 0-13 5t-5 13v107q0 8 5 13t13 5h464q8 0 13-5t5-13z" horiz-adv-x="1000" />
+
 <glyph glyph-name="hand-pointer" unicode="&#xf25a;" d="M357 779q-29 0-50-21t-21-51v-500l-84 113q-23 30-60 30-29 0-50-21t-21-50q0-24 15-43l214-286q21-29 57-29h401q12 0 22 8t12 19l52 206q13 53 13 108v121q0 23-15 40t-38 16-38-15-16-38h-18v34q0 27-18 45t-44 19q-26 0-44-18t-19-45v-35h-18v50q0 31-20 53t-51 22q-30 0-51-21t-21-51v-53h-17v318q0 31-21 53t-51 22z m0 71q60 0 101-43t42-103v-123q12 1 18 1 55 0 96-38 27 11 56 11 63 0 102-48 15 4 32 4 52 0 88-38t37-90v-121q0-65-16-126l-51-205q-9-36-38-58t-66-23h-401q-33 0-64 15t-50 42l-214 286q-29 38-29 86 0 58 42 100t100 42q39 0 72-19v305q0 59 42 101t101 42z m72-786v215h-18v-215h18z m142 0v215h-17v-215h17z m143 0v215h-18v-215h18z" horiz-adv-x="1000" />
 </font>
 </defs>
-</svg>
\ No newline at end of file
+</svg>

vue/Navigation/ElementList.vue

 <template>
   <div>
-    <div class="field is-marginless" v-if="!useSelection">
+    <div class="field has-addons is-marginless" v-if="!useSelection">
       <FilterBar
         class="is-expanded"
         placeholder="Filter elements…"
@@ -10,6 +10,20 @@
         v-model="selectedFilters"
         v-on:submit="submitFilters"
       />
+      <div class="control has-tooltip-bottom" data-tooltip="Sort elements by a field">
+        <span class="select">
+          <select v-model="order" title="Sort field">
+            <option value="position" v-if="elementId">Position</option>
+            <option value="name">Name</option>
+            <option value="created">Creation date</option>
+          </select>
+        </span>
+      </div>
+      <div class="control has-tooltip-bottom" data-tooltip="Sort direction">
+        <button class="button" v-on:click="toggleOrderDirection">
+          <i :class="`icon-sort-${orderDirection}`"></i>
+        </button>
+      </div>
     </div>
     <div v-if="error" class="notification is-danger mt-3">
       {{ error }}
@@ -143,7 +157,9 @@ export default {
     error: null,
     deleteModal: false,
     deleteLoading: false,
-    childToDelete: null
+    childToDelete: null,
+    order: null,
+    orderDirection: 'asc'
   }),
   computed: {
     ...mapGetters('auth', ['isLoggedOn', 'isVerified', 'hasFeature']),
@@ -216,6 +232,9 @@ export default {
       this.deleteLoading = false
       this.deleteModal = false
     },
+    toggleOrderDirection () {
+      this.orderDirection = this.orderDirection === 'asc' ? 'desc' : 'asc'
+    },
     // The submit event of the FilterBar. Reset the page number to 1 before making a new query
     submitFilters () {
       this.pageNumber = 1
@@ -236,6 +255,8 @@ export default {
       if (this.navigationPageSize) query.page_size = this.navigationPageSize.toString()
       if (query.recursive === 'false') delete query.recursive
       if (this.pageNumber !== 1) query.page = this.pageNumber.toString()
+      if (this.order) query.order = this.order
+      if (this.orderDirection) query.order_direction = this.orderDirection
 
       /*
        * If this is not the same route, update the route.
@@ -252,7 +273,9 @@ export default {
       try {
         await this.list({
           ...this.selectedFilters,
-          page: this.pageNumber
+          page: this.pageNumber,
+          order: this.order,
+          order_direction: this.orderDirection
         })
       } catch (err) {
         this.error = err
@@ -279,17 +302,33 @@ export default {
         if (page) this.pageNumber = page
         delete newQuery.page
       }
+      if (query.order) {
+        const allowedOrders = ['name', 'created']
+        if (this.elementId) allowedOrders.push('position')
+        if (allowedOrders.includes(query.order.toLowerCase())) this.order = query.order
+        else this.order = this.elementId ? 'position' : 'name'
+        delete newQuery.order
+      } else {
+        this.order = this.elementId ? 'position' : 'name'
+      }
+      if (query.order_direction) {
+        if (['asc', 'desc'].includes(query.order_direction.toLowerCase())) this.orderDirection = query.order_direction
+        else this.orderDirection = 'asc'
+        delete newQuery.order_direction
+      } else this.orderDirection = 'asc'
       this.selectedFilters = newQuery
     }
   },
   watch: {
-    withBestClasses: 'onFilterUpdate',
     navigationPageSize (newValue, oldValue) {
       if (newValue !== (oldValue || 20) && this.pageNumber !== 1) {
         this.pageNumber = Math.ceil((this.pageNumber - 1) * (oldValue || 20) / newValue)
       } else this.onFilterUpdate()
     },
     pageNumber: 'onFilterUpdate',
+    withBestClasses: 'onFilterUpdate',
+    order: 'onFilterUpdate',
+    orderDirection: 'onFilterUpdate',
     deleteModal () {
       if (!this.deleteModal) this.childToDelete = null
     },
@@ -340,7 +379,7 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
+<style scoped>
 .is-two-third-table {
   width: 66%;
 }
@@ -356,4 +395,7 @@ export default {
 .field.has-addons .button {
   height: 100%;
 }
+.field.has-addons .select select {
+  height: 100% !important;
+}
 </style>