Add table info

app/assets/styles.css

@@ -35,7 +35,7 @@
       }
 
       td {
-        @apply px-4 py-2 text-text;
+        @apply px-4 py-2 text-text align-top;
       }
     }
   }

app/components/pagination.hbs

@@ -1,7 +1,12 @@
 {{#if (gt this.totalPages 1)}}
-  <nav class="flex justify-center relative z-0 my-4" aria-label="Pagination">
+  <nav
+    class='flex justify-center relative z-0'
+    aria-label='Pagination'
+    ...attributes
+  >
     {{#let
-      'inline-flex items-center justify-center px-2 mx-1 font-display text-lg' as |commonClasses|
+      'inline-flex items-center justify-center px-2 mx-1 font-display text-lg'
+      as |commonClasses|
     }}
       {{#if this.previousPage}}
         <LinkTo
@@ -9,14 +14,14 @@
           @models={{if @model (array @model) (array)}}
           @query={{hash page=this.previousPage}}
           class={{commonClasses}}
-          title="Previous page"
+          title='Previous page'
         >
           <MdIcon::ChevronLeft />
         </LinkTo>
       {{/if}}
       {{#each this.availablePages as |i|}}
         {{#if (eq @current i)}}
-          <span class="{{commonClasses}} border rounded">
+          <span class='{{commonClasses}} border rounded'>
             {{i}}
           </span>
         {{else if (eq '...' i)}}
@@ -40,7 +45,7 @@
           @models={{if @model (array @model) (array)}}
           @query={{hash page=this.nextPage}}
           class={{commonClasses}}
-          title="Next page"
+          title='Next page'
         >
           <MdIcon::ChevronRight />
         </LinkTo>

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

@@ -20,6 +20,14 @@ export default class AdminIndexesItemDataController extends Controller {
     map: MapOutline,
   };
 
+  get fromHits() {
+    return 1 + this.model.data.offset;
+  }
+
+  get toHits() {
+    return this.model.data.offset + this.model.data.hits.length;
+  }
+
   get sortedFields() {
     const fields = Object.keys(this.model.stats.fieldDistribution);
     const primaryKey = this.model.index.primaryKey ?? 'id';

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

@@ -1,64 +1,60 @@
 {{page-title 'Data'}}
 <InputText
-  @placeholder="Search"
+  @placeholder='Search'
   @prefixIcon={{this.Magnify}}
   @value={{this.q}}
   @onChange={{this.searchTextChanged}}
 />
 
-<div class="flex items-center mb-4">
-  {{#if (gt @model.data.estimatedTotalHits 0)}}
-    <ButtonGroup
-      @value={{this.dataView}}
-      @onClick={{set this 'dataView'}} as |bg|
-    >
-      {{#each-in this.views as |viewType Icon|}}
-        <bg.button
-          @text={{capitalize viewType}}
-          @icon={{Icon}}
-          @value={{viewType}}
-        />
-      {{/each-in}}
-    </ButtonGroup>
-  {{/if}}
-
-  <div class="flex items-center ml-auto">
-    <MdIcon::Check class="mr-1" @size="18" />
+{{!-- <div class='flex items-center mb-4'>
+  <div class='flex items-center ml-auto'>
+    <MdIcon::Check class='mr-1' @size='18' />
     Hits:
     {{@model.data.estimatedTotalHits}}
-    <MdIcon::ClockOutline class="ml-6 mr-1" @size="18" />
+    <MdIcon::ClockOutline class='ml-6 mr-1' @size='18' />
     Time spent:
     {{@model.data.processingTimeMs}}
     ms
   </div>
-</div>
+</div> --}}
 
 {{#if (gt @model.data.estimatedTotalHits 0)}}
-  {{#if (eq this.dataView 'table')}}
-    <RoyalTable
-      @data={{@model.data.hits}}
-      @sortingProp={{this.sort}}
-      @onSort={{this.onSort}}
-      class="w-full" as |Row data|
-    >
-      <Row as |Column|>
-        {{#each this.sortedFields as |field|}}
-          <Column @name={{capitalize field}} @prop={{field}} @sortable={{includes field @model.sortableAttributes}}>
-            {{#let (get data field) as |value|}}
-              {{if (eq (type-of value) 'object') (stringify value) value}}
-            {{/let}}
-          </Column>
-        {{/each}}
-      </Row>
-    </RoyalTable>
-  {{/if}}
-  {{!-- {{#if (eq this.dataView 'map')}}
-    map
-  {{/if}} --}}
+  <RoyalTable
+    @data={{@model.data.hits}}
+    @sortingProp={{this.sort}}
+    @onSort={{this.onSort}}
+    class='w-full'
+    as |Row data|
+  >
+    <Row as |Column|>
+      {{#each-in @model.stats.fieldDistribution as |field|}}
+        <Column
+          @name={{capitalize field}}
+          @prop={{field}}
+          @sortable={{includes field @model.sortableAttributes}}
+        >
+          {{#let (get data field) as |value|}}
+            {{if (eq (type-of value) 'object') (stringify value) value}}
+          {{/let}}
+        </Column>
+      {{/each-in}}
+    </Row>
+  </RoyalTable>
 
-  <Pagination
-    @count={{@model.data.estimatedTotalHits}}
-    @current={{this.page}}
-    @perPage={{@model.data.limit}}
-  />
+  <div class='flex items-center'>
+    {{this.fromHits}}
+    —
+    {{this.toHits}}
+    of
+    {{@model.data.estimatedTotalHits}}
+
+    <Pagination
+      @count={{@model.data.estimatedTotalHits}}
+      @current={{this.page}}
+      @perPage={{@model.data.limit}}
+      class='ml-auto'
+    />
+  </div>
+{{else}}
+  No results found
 {{/if}}