Add sorting

app/controllers/admin/indexes/item/data.js

@@ -7,8 +7,9 @@ export default class AdminIndexesItemDataController extends Controller {
   @tracked limit = 20;
   @tracked page = 1;
   @tracked dataView = 'table';
+  @tracked sort;
 
-  queryParams = ['q', 'page', 'limit'];
+  queryParams = ['q', 'page', 'limit', 'sort'];
 
   get sortedFields() {
     const fields = Object.keys(this.model.stats.fieldDistribution);
@@ -34,4 +35,13 @@ export default class AdminIndexesItemDataController extends Controller {
   searchTextChanged(value) {
     this.q = value === '' ? null : value;
   }
+
+  @action
+  onSort(newSort) {
+    if (`${newSort}:asc` === this.sort) {
+      this.sort = `${newSort}:desc`;
+    } else {
+      this.sort = `${newSort}:asc`;
+    }
+  }
 }

app/routes/admin/indexes/item/data.js

@@ -12,16 +12,26 @@ export default class AdminIndexesItemDataRoute extends Route {
     page: {
       refreshModel: true,
     },
+    sort: {
+      refreshModel: true,
+    },
   };
 
-  async model({ q, page, limit }) {
+  async model({ q, page, limit, sort }) {
     const offset = limit * --page;
     const index = this.modelFor('admin.indexes.item');
+    const sortableAttributes = index.getSortableAttributes();
     const stats = index.getStats();
+    const options = { offset, limit };
+
+    if (sort) {
+      options.sort = [sort];
+    }
 
     return hash({
-      data: index.search(q, { offset, limit }),
+      data: index.search(q, options),
       index,
+      sortableAttributes,
       stats,
     });
   }

app/styles/app.css

@@ -8,7 +8,7 @@
 }
 
 .royal-table {
-  @apply table-auto w-full border border-gray text-left mb-4;
+  @apply table-auto border border-gray text-left mb-4;
 
   thead {
     @apply bg-light;

app/templates/admin/indexes/item/data.hbs

@@ -25,11 +25,16 @@
     </ButtonGroup>
   </div>
   {{#if (eq this.dataView 'table')}}
-    <RoyalTable @data={{@model.data.hits}} as |Column rowData|>
+    <RoyalTable
+      @data={{@model.data.hits}}
+      @sortingProp={{this.sort}}
+      @onSort={{this.onSort}}
+      class="w-full" as |Column rowData|
+    >
       {{#each this.sortedFields as |field|}}
-        <Column @name={{capitalize field}}>
+        <Column @name={{capitalize field}} @prop={{field}} @sortable={{includes field @model.sortableAttributes}}>
           {{#let (get rowData field) as |value|}}
-            {{if (eq (type-of value) "object") (stringify value) value}}
+            {{if (eq (type-of value) 'object') (stringify value) value}}
           {{/let}}
         </Column>
       {{/each}}