Add component button-group

app/components/button-group.hbs

@@ -0,0 +1,7 @@
+<div class="flex items-center -space-x-px" role="group" ...attributes>
+  {{yield
+    (hash
+      button=(component "button" group=this onClick=this.buttonPressed)
+    )
+  }}
+</div>

app/components/button-group.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+// import { tracked } from '@glimmer/tracking';
+
+export default class ButtonGroupComponent extends Component {
+  @action
+  buttonPressed(value) {
+    if (typeof this.args.onClick !== 'function') {
+      return;
+    }
+
+    this.args.onClick(value);
+  }
+}

app/components/button.hbs

@@ -1,9 +1,23 @@
 <button
   disabled={{this.disabled}}
   type={{this.type}}
-  class="inline-flex items-center px-3 py-2 cursor-pointer border border-gray-300 rounded-md shadow-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"
-  ...attributes
+  class="
+    inline-flex
+    items-center
+    px-3
+    py-2
+    cursor-pointer
+    border
+    border-gray-300
+    bg-white
+    {{if @group "first:rounded-l-md last:rounded-r-md" "rounded-md"}}
+    text-gray-700
+    hover:bg-gray-50
+    focus:outline-none
+    {{if this.isActive "bg-gray-50"}}
+  "
   {{on "click" this.handleClick}}
+  ...attributes
 >
   {{#if this.icon}}
     <MdIcon @icon={{this.icon}} class="mx-1"/>

app/components/button.js

@@ -5,6 +5,14 @@ import { tracked } from '@glimmer/tracking';
 export default class ButtonComponent extends Component {
   @tracked _state = 'default';
 
+  get isActive() {
+    return (
+      this.args.group &&
+      this.args.value &&
+      this.args.group.args.value === this.args.value
+    );
+  }
+
   get disabled() {
     if (this.args.disabled !== undefined) {
       return this.args.disabled;
@@ -67,7 +75,7 @@ export default class ButtonComponent extends Component {
     this.state = 'pending';
 
     try {
-      await this.args.onClick();
+      await this.args.onClick(this.args.value);
 
       if (!this.isDestroyed) {
         this.state = 'fulfilled';

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

@@ -6,6 +6,7 @@ export default class AdminIndexesItemDataController extends Controller {
   @tracked q = null;
   @tracked limit = 20;
   @tracked page = 1;
+  @tracked dataView = 'table';
 
   queryParams = ['q', 'page', 'limit'];
 

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

@@ -15,9 +15,31 @@
 </div>
 
 {{#if (gt @model.nbHits 0)}}
-  <div class="mb-4">
-    <h2 class="text-xl mb-4">Results:</h2>
-    <div class=" ">
+  <div class="mb-4 flex items-center">
+    <ButtonGroup @value={{this.dataView}} @onClick={{set this 'dataView'}} as |bg|>
+      <bg.button
+        @text="Table"
+        @icon="table"
+        @value="table"
+      />
+      <bg.button
+        @text="Map"
+        @icon="map-outline"
+        @value="map"
+      />
+    </ButtonGroup>
+  </div>
+
+  {{#if (eq this.dataView 'table')}}
+   table
+  {{/if}}
+
+  {{#if (eq this.dataView 'map')}}
+    map
+  {{/if}}
+
+  {{!-- {{#if (eq this.dataView 'card')}}
+    <div class="mb-4">
       {{#each @model.hits as |item|}}
         <div class="mb-8 rounded-md border overflow-hidden shadow">
           {{#each-in item as |key value|}}
@@ -31,11 +53,11 @@
         </div>
       {{/each}}
     </div>
-  </div>
 
-  <Pagination
-    @count={{@model.nbHits}}
-    @current={{this.page}}
-    @perPage={{@model.limit}}
-  />
+    <Pagination
+      @count={{@model.nbHits}}
+      @current={{this.page}}
+      @perPage={{@model.limit}}
+    />
+  {{/if}} --}}
 {{/if}}

tests/integration/components/button-group-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | button-group', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ButtonGroup />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <ButtonGroup>
+        template block text
+      </ButtonGroup>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});