Add toasts service

app/components/icons/close.js

@@ -0,0 +1 @@
+export { Close as default } from 'ember-mdi';

app/components/icons/loading.js

@@ -1 +1 @@
-export { Heart as default } from 'ember-mdi';
+export { Loading as default } from 'ember-mdi';

app/components/toast.hbs

@@ -0,0 +1,25 @@
+{{#in-element this.toasts.destinationElement}}
+  <div
+    class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
+    role='alert'
+  >
+    <div
+      class='inline-flex flex-shrink-0 justify-center items-center self-start'
+    >
+      <Icons::Loading @spin={{true}} class='mr-4' />
+    </div>
+
+    <div>
+      {{@text}}
+    </div>
+
+    <button
+      type='button'
+      class='ml-auto self-start'
+      {{! data-dismiss-target='#toast-default' }}
+      aria-label='Close'
+    >
+      <Icons::Close />
+    </button>
+  </div>
+{{/in-element}}

app/components/toast.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ToastComponent extends Component {
+  @service toasts;
+}

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

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 
 export default class AdminIndexesItemEditController extends Controller {
   @service router;
+  @service toasts;
 
   @action
   save(event) {
@@ -13,6 +14,8 @@ export default class AdminIndexesItemEditController extends Controller {
     const data = Object.fromEntries(formData.entries());
 
     this.model.save(data);
+
+    this.toasts.add('Hello World!');
   }
 
   @action

app/services/toasts.js

@@ -0,0 +1,18 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ToastsService extends Service {
+  @tracked plate = [];
+
+  constructor() {
+    super();
+
+    this.destinationElement = document.createElement('div');
+
+    document.body.appendChild(this.destinationElement);
+  }
+
+  add() {
+
+  }
+}

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

@@ -1,4 +1,6 @@
-<Headers::H1 @title={{if @model.isNew 'Create new index' 'Edit'}} />
+{{#if @model.isNew}}
+  <Headers::H1 @title='Create new index' />
+{{/if}}
 
 <form {{on 'submit' this.save}}>
   {{#if @model.isNew}}
@@ -15,3 +17,5 @@
   <Button type='submit' @text='Save' @style='primary' />
   <Button @text='Cancel' @onClick={{this.cancel}} />
 </form>
+
+<Toast @text="HO-HO-HO" />

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

tests/unit/services/toasts-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'meiliadmin/tests/helpers';
+
+module('Unit | Service | toasts', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    let service = this.owner.lookup('service:toasts');
+    assert.ok(service);
+  });
+});