Standardize sorting on all c-resource-list-table

client/web/admin/src/components/faIcons.js

@@ -23,6 +23,8 @@ import {
   faSync,
   faEye,
   faKey,
+  faAngleUp,
+  faAngleDown,
   faAngleDoubleLeft,
   faAngleRight,
   faAngleLeft,
@@ -118,5 +120,7 @@ library.add(
   faEllipsisV,
   faTrashRestore,
   faEdit,
-  faLocationArrow
+  faLocationArrow,
+  faAngleUp,
+  faAngleDown
 )

client/web/admin/src/components/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import PortalVue from 'portal-vue'
 import './faIcons'
 import CContentHeader from './CContentHeader'
@@ -28,6 +28,7 @@ Vue.use(PortalVue)
 Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
 Vue.component('c-permissions-button', CPermissionsButton)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-content-header', CContentHeader)
 Vue.component('c-resource-list-status-filter', CResourceListStatusFilter)
 Vue.component('c-input-confirm', CInputConfirm)

client/web/admin/src/views/System/SensitivityLevel/List.vue

@@ -27,6 +27,7 @@
       clickable
       sticky-header
       hide-search
+      hide-per-page-option
       class="custom-resource-list-height flex-fill"
       @row-clicked="handleRowClicked"
     >
@@ -130,11 +131,9 @@ export default {
         },
         {
           key: 'level',
-          sortable: true,
         },
         {
           key: 'createdAt',
-          sortable: true,
           formatter: (v) => moment(v).fromNow(),
         },
         {

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -279,7 +279,7 @@
                     >
                       <font-awesome-icon
                         :icon="['fas', 'angle-up']"
-                        class="mb-1 text-grey"
+                        class="mb-1"
                         :class="{ 'text-primary': isSortedBy(field, 'ASC') }"
                       />
                       <font-awesome-icon

client/web/privacy/src/components/faIcons.js

@@ -8,6 +8,8 @@ import {
   faThLarge,
   faCheck,
   faTimes,
+  faAngleUp,
+  faAngleDown,
   faAngleLeft,
   faAngleRight,
   faAngleDoubleLeft,
@@ -36,4 +38,6 @@ library.add(
   faAngleDoubleLeft,
   faAngleDoubleRight,
   faSearch,
+  faAngleUp,
+  faAngleDown,
 )

client/web/workflow/src/components/faIcons.js

@@ -20,6 +20,8 @@ import {
   faPlus,
   faQuestion,
   faAngleDoubleLeft,
+  faAngleUp,
+  faAngleDown,
   faAngleRight,
   faAngleLeft,
   faEllipsisV,
@@ -68,4 +70,6 @@ library.add(
   faFileExport,
   faToggleOn,
   faToggleOff,
+  faAngleUp,
+  faAngleDown,
 )

lib/vue/src/components/resourceList/CResourceList.vue

@@ -70,6 +70,37 @@
         @sort-changed="pagination.page = 1"
         @row-clicked="$emit('row-clicked', $event)"
       >
+      <template #head()="field">
+        <div class="d-flex align-items-center">
+          <div
+            class="d-flex align-self-center text-nowrap"
+          >
+            {{ field.label }}
+          </div>
+
+          <b-button
+            v-if="field.field.sortable"
+            variant="outline-extra-light"
+            class="d-flex align-items-center text-secondary d-print-none border-0 px-1 ml-1"
+            @click="handleSort(field)"
+            >
+            <font-awesome-layers
+              class="d-print-none"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'angle-up']"
+                class="mb-1"
+                :class="{ 'text-primary': field.column === sorting.sortBy && !sorting.sortDesc }"
+              />
+              <font-awesome-icon
+                :icon="['fas', 'angle-down']"
+                class="mt-1"
+                :class="{ 'text-primary': field.column === sorting.sortBy && sorting.sortDesc }"
+              />
+            </font-awesome-layers>
+          </b-button>
+        </div>
+      </template>
         <template #empty>
           <p
             data-test-id="no-matches"
@@ -391,7 +422,7 @@ export default {
 
     showFooter () {
       return !(this.hideTotal && this.hidePagination && this.hidePerPageOption)
-    }
+    },
   },
 
   methods: {
@@ -462,6 +493,11 @@ export default {
       this.selected = [],
       this.selectableItemIDs = []
     },
+
+    handleSort ({ field }) {
+      this.sorting.sortBy = field.key
+      this.sorting.sortDesc = !this.sorting.sortDesc
+    },
   },
 }
 </script>
@@ -483,6 +519,12 @@ export default {
     z-index: 1;
     background-color: var(--light);
   }
+
+  & > thead > tr > [aria-sort=ascending],
+  & > thead > tr > [aria-sort=descending],
+  & > thead > tr > [aria-sort=none] {
+    background-image: none !important;
+  }
 }
 
 .resource-list-footer {