From e99b771c2886671700b06dbea2a2c3749bd18ff5 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Wed, 13 Apr 2022 14:16:52 +0300
Subject: [PATCH] Add sorting

---
 app/controllers/admin/indexes/item/data.js | 12 +++++++++++-
 app/routes/admin/indexes/item/data.js      | 14 ++++++++++++--
 app/styles/app.css                         |  2 +-
 app/templates/admin/indexes/item/data.hbs  | 11 ++++++++---
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/controllers/admin/indexes/item/data.js b/app/controllers/admin/indexes/item/data.js
index 4234f50..596aaea 100644
--- a/app/controllers/admin/indexes/item/data.js
+++ b/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`;
+    }
+  }
 }
diff --git a/app/routes/admin/indexes/item/data.js b/app/routes/admin/indexes/item/data.js
index 3cc91ea..c5ff2de 100644
--- a/app/routes/admin/indexes/item/data.js
+++ b/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,
     });
   }
diff --git a/app/styles/app.css b/app/styles/app.css
index 94ded93..aacd82e 100644
--- a/app/styles/app.css
+++ b/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;
diff --git a/app/templates/admin/indexes/item/data.hbs b/app/templates/admin/indexes/item/data.hbs
index 4a168b9..af252a9 100644
--- a/app/templates/admin/indexes/item/data.hbs
+++ b/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}}