From 0cd5e10520702206995bbb38015b1cab3199b06e Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Fri, 16 Sep 2022 12:05:56 +0300
Subject: [PATCH] Add form/listbox as component

---
 app/components/form/element.hbs               |  2 +-
 app/components/form/listbox.hbs               | 30 +++++++++++++++++++
 app/components/form/listbox.js                | 20 +++++++++++++
 app/templates/admin/tasks/index.hbs           | 14 +++++++++
 .../components/form/listbox-test.js           | 26 ++++++++++++++++
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 app/components/form/listbox.hbs
 create mode 100644 app/components/form/listbox.js
 create mode 100644 tests/integration/components/form/listbox-test.js

diff --git a/app/components/form/element.hbs b/app/components/form/element.hbs
index 79872bd..25ad642 100644
--- a/app/components/form/element.hbs
+++ b/app/components/form/element.hbs
@@ -1,4 +1,4 @@
-<div class='mb-4 max-w-lg' ...attributes>
+<div class='relative mb-4 max-w-lg' ...attributes>
   {{#if @label}}
     <label
       for={{@for}}
diff --git a/app/components/form/listbox.hbs b/app/components/form/listbox.hbs
new file mode 100644
index 0000000..ab01f03
--- /dev/null
+++ b/app/components/form/listbox.hbs
@@ -0,0 +1,30 @@
+<Form::Element
+  @label={{@label}}
+  @for={{this.id}}
+  @required={{@required}}
+  @helper={{@helper}}
+  ...attributes
+>
+  <Listbox @value={{@value}} @onChange={{@onChange}} as |listbox|>
+    <listbox.Button
+      class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
+    >
+      {{@listboxLabel}}
+      {{@value}}
+    </listbox.Button>
+    <listbox.Options
+      class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
+      as |options|
+    >
+      {{#each @values as |item|}}
+        <options.Option @value={{item}} class='outline-none'>
+          <div
+            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+          >
+            {{item}}
+          </div>
+        </options.Option>
+      {{/each}}
+    </listbox.Options>
+  </Listbox>
+</Form::Element>
diff --git a/app/components/form/listbox.js b/app/components/form/listbox.js
new file mode 100644
index 0000000..2278186
--- /dev/null
+++ b/app/components/form/listbox.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+// import { action } from '@ember/object';
+
+export default class FormListboxComponent extends Component {
+  get guid() {
+    return guidFor(this);
+  }
+
+  get id() {
+    return this.args.id ?? this.guid;
+  }
+
+  // @action
+  // onChange(event) {
+  //   if (this.args.onChange) {
+  //     this.args.onChange(event.target.value, event);
+  //   }
+  // }
+}
diff --git a/app/templates/admin/tasks/index.hbs b/app/templates/admin/tasks/index.hbs
index aea482a..eaa3e6f 100644
--- a/app/templates/admin/tasks/index.hbs
+++ b/app/templates/admin/tasks/index.hbs
@@ -2,8 +2,22 @@
 
 <div class='sm:flex sm:flex-nowrap'>
   {{! indexUid }}
+  <Form::Listbox
+    @listboxLabel={{"Index: "}}
+    @value={{nu-co this.indexUid 'none'}}
+    @values={{map-by 'uid' @model.indexes.results}}
+    @onChange={{set this 'indexUid'}}
+  />
 
   {{! limit }}
+  <Form::Listbox
+    @listboxLabel={{concat "Limit: " this.limit}}
+    @value={{this.limit}}
+    @values={{array 20 50 100 500}}
+    @onChange={{set this 'limit'}}
+    class='sm:ml-4 sm:flex-none'
+  />
+
   <div class='relative mb-4 sm:ml-4 sm:flex-none'>
     <Listbox @value={{this.limit}} @onChange={{set this 'limit'}} as |listbox|>
       <listbox.Button
diff --git a/tests/integration/components/form/listbox-test.js b/tests/integration/components/form/listbox-test.js
new file mode 100644
index 0000000..f7582b8
--- /dev/null
+++ b/tests/integration/components/form/listbox-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/listbox', 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`<Form::Listbox />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Form::Listbox>
+        template block text
+      </Form::Listbox>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});