Add form/listbox as component

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}}

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>

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);
+  //   }
+  // }
+}

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

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');
+  });
+});