Add task-toast

app/components/form/element.hbs

@@ -3,7 +3,7 @@
     <label
       for={{@for}}
       class='block font-medium mb-1 text-base-2
-        {{if @required "after:content-['*'] after:text-red-500"}}'
+        {{if @required "after:content-['*'] after:text-danger"}}'
     >
       {{~@label~}}
     </label>

app/components/task-toast.hbs

@@ -0,0 +1,22 @@
+<Toast>
+  {{#if this.icon}}
+    <div class='inline-flex flex-shrink-0 justify-center items-center self-start'>
+      <this.icon @spin={{this.isEnqueued}} class='mr-4 {{this.color}}' />
+    </div>
+  {{/if}}
+
+  <div>
+    <div class='mb-2'>Task {{this.taskType}} Uid:{{this.taskUid}}</div>
+    Status: <span class={{this.color}}>{{this.taskStatus}}</span>
+  </div>
+
+  <button
+    type='button'
+    class='ml-auto self-start'
+    {{! data-dismiss-target='#toast-default' }}
+    aria-label='Close'
+    {{on 'click' @onClose}}
+  >
+    <Icons::Close />
+  </button>
+</Toast>

app/components/task-toast.js

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { Loading, Check, AlertOctagonOutline } from 'ember-mdi';
+
+export default class TaskToastComponent extends Component {
+  @service meilisearch;
+
+  @tracked task;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    this.interval = setInterval(this.reloadTask, 1000);
+
+    registerDestructor(this, this.clearInterval);
+  }
+
+  get icon() {
+    switch (this.taskStatus) {
+      case 'enqueued':
+        return Loading;
+      case 'succeeded':
+        return Check;
+      case 'failed':
+        return AlertOctagonOutline;
+      default:
+        return null;
+    }
+  }
+
+  get color() {
+    switch (this.taskStatus) {
+      case 'enqueued':
+        return 'text-info';
+      case 'succeeded':
+        return 'text-success';
+      case 'failed':
+        return 'text-danger';
+      default:
+        return null;
+    }
+  }
+
+  get isEnqueued() {
+    return this.taskStatus === 'enqueued';
+  }
+
+  get isFailed() {
+    return this.taskStatus === 'failed';
+  }
+
+  get isSucceeded() {
+    return this.taskStatus === 'succeeded';
+  }
+
+  get taskUid() {
+    return this.task?.taskUid ?? this.args.task.taskUid;
+  }
+
+  get taskType() {
+    return this.task?.type ?? this.args.task.type;
+  }
+
+  get taskStatus() {
+    return this.task?.status ?? this.args.task.status;
+  }
+
+  @action
+  reloadTask() {
+    this.meilisearch.getTask(this.taskUid).then((task) => {
+      this.task = task;
+    });
+  }
+
+  @action
+  clearInterval() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+}

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

@@ -7,15 +7,15 @@ export default class AdminIndexesItemEditController extends Controller {
   @service toasts;
 
   @action
-  save(event) {
+  async save(event) {
     event.preventDefault();
 
-    // const formData = new FormData(event.currentTarget);
-    // const data = Object.fromEntries(formData.entries());
+    const formData = new FormData(event.currentTarget);
+    const data = Object.fromEntries(formData.entries());
 
-    // this.model.save(data);
+    const task = await this.model.save(data);
 
-    this.toasts.successToast({ text: 'Hello World!' });
+    this.toasts.taskToast(task);
   }
 
   @action

app/services/toasts.js

@@ -2,6 +2,7 @@ import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { hbs } from 'ember-template-imports';
 import SuccessToast from '../components/success-toast';
+import TaskToast from '../components/task-toast';
 
 export default class ToastsService extends Service {
   @tracked container = [];
@@ -25,6 +26,16 @@ export default class ToastsService extends Service {
     this.container = this.container.concat([wrapper]);
   }
 
+  taskToast(task) {
+    const onClose = () => {
+      this.container = this.container.filter((item) => item !== wrapper);
+    };
+
+    const wrapper = hbs`<TaskToast @task={{task}} @onClose={{onClose}} />`;
+
+    this.container = this.container.concat([wrapper]);
+  }
+
   add(toast) {
     this.queue = this.queue.concat(toast);
   }

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

@@ -17,7 +17,3 @@
   <Button type='submit' @text='Save' @style='primary' />
   <Button @text='Cancel' @onClick={{this.cancel}} />
 </form>
-
-{{!-- {{#unless this.show}}
-  <Toast @text="HO-HO-HO" @onClose={{fn (set this 'show') true}} />
-{{/unless}} --}}

app/templates/login.hbs

@@ -26,7 +26,7 @@
         />
 
         {{#if this.errorMessage}}
-          <p class="text-red">
+          <p class="text-danger">
             {{this.errorMessage}}
           </p>
         {{/if}}

config/tailwind.config.js

@@ -23,21 +23,26 @@ module.exports = {
           DEFAULT: colors.pink['500'],
           dark: colors.pink['800'],
         },
-        yellow: {
-          light: colors.yellow['100'],
-          DEFAULT: colors.yellow['400'],
-          dark: colors.yellow['700'],
-        },
-        green: {
+        success: {
           light: colors.green['100'],
           DEFAULT: colors.green['400'],
           dark: colors.green['800'],
         },
-        red: {
+        danger: {
           light: colors.red['100'],
           DEFAULT: colors.red['500'],
           dark: colors.red['800'],
         },
+        warning: {
+          light: colors.yellow['100'],
+          DEFAULT: colors.yellow['400'],
+          dark: colors.yellow['700'],
+        },
+        info: {
+          light: colors.blue['100'],
+          DEFAULT: colors.blue['400'],
+          dark: colors.blue['700'],
+        },
       },
       zIndex: {
         'scroll-link': '10',

tests/integration/components/task-toast-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 | task-toast', 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`<TaskToast />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <TaskToast>
+        template block text
+      </TaskToast>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});