Add more filters to tasks list

app/components/form/listbox.hbs

@@ -25,6 +25,17 @@
           </div>
         </options.Option>
       {{/each}}
+      {{#if @allowClear}}
+        <Divider class='my-1' />
+
+        <options.Option @value={{null}} class='outline-none'>
+          <div
+            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+          >
+            Clear
+          </div>
+        </options.Option>
+      {{/if}}
     </listbox.Options>
   </Listbox>
 </Form::Element>

app/controllers/admin/tasks/index.js

@@ -1,8 +1,12 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { taskStatuses, taskTypes } from 'meiliadmin/models/task';
 
 export default class AdminTasksIndexController extends Controller {
+  taskStatuses = taskStatuses;
+  taskTypes = taskTypes;
+
   @tracked limit = 20;
   @tracked from;
   @tracked status;

app/models/task.js

@@ -1,3 +1,14 @@
+export const taskStatuses = ['enqueued', 'processing', 'succeeded', 'failed'];
+export const taskTypes = [
+  'indexCreation',
+  'indexUpdate',
+  'indexDeletion',
+  'documentAdditionOrUpdate',
+  'documentDeletion',
+  'settingsUpdate',
+  'dumpCreation',
+];
+
 export default class Task {
   constructor(data = {}) {
     for (const key in data) {

app/templates/admin/tasks/index.hbs

@@ -7,41 +7,37 @@
     @value={{nu-co this.indexUid 'none'}}
     @values={{map-by 'uid' @model.indexes.results}}
     @onChange={{set this 'indexUid'}}
+    @allowClear={{true}}
+  />
+
+  {{! status }}
+  <Form::Listbox
+    @listboxLabel={{"Status: "}}
+    @value={{nu-co this.status 'none'}}
+    @values={{this.taskStatuses}}
+    @onChange={{set this 'status'}}
+    @allowClear={{true}}
+    class='sm:ml-4 sm:flex-none'
+  />
+
+  {{! status }}
+  <Form::Listbox
+    @listboxLabel={{"Type: "}}
+    @value={{nu-co this.type 'none'}}
+    @values={{this.taskTypes}}
+    @onChange={{set this 'type'}}
+    @allowClear={{true}}
+    class='sm:ml-4 sm:flex-none'
   />
 
   {{! limit }}
   <Form::Listbox
-    @listboxLabel={{concat "Limit: " this.limit}}
-    @value={{this.limit}}
+    @listboxLabel={{"Limit: "}}
+    @value={{nu-co this.limit 'none'}}
     @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
-        class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
-      >
-        Limit:
-        {{this.limit}}
-      </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 (array 20 50 100 500) 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>
-  </div>
 </div>
 
 {{#if @model.tasks.results.length}}