Add toast-container

app/components/toast.hbs

@@ -1,25 +1,22 @@
-{{#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
+  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>
-{{/in-element}}
+
+  <div>
+    {{@text}}
+  </div>
+
+  <button
+    type='button'
+    class='ml-auto self-start'
+    {{! data-dismiss-target='#toast-default' }}
+    aria-label='Close'
+    {{on 'click' this.destroyFromPlate}}
+  >
+    <Icons::Close />
+  </button>
+</div>

app/components/toast.js

@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
 
 export default class ToastComponent extends Component {
   @service toasts;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    // registerDestructor(this, this.destroy);
+  }
+
+  @action
+  destroyFromPlate() {
+    this.args?.willDestroy();
+  }
 }

app/components/toasts-container.hbs

@@ -0,0 +1,7 @@
+{{#in-element this.toasts.destinationElement}}
+  <div ...attributes>
+    {{#each this.toasts.plate as |Item|}}
+      <Item />
+    {{/each}}
+  </div>
+{{/in-element}}

app/components/toasts-container.js

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

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

@@ -10,12 +10,12 @@ export default class AdminIndexesItemEditController extends Controller {
   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);
+    // this.model.save(data);
 
-    this.toasts.add('Hello World!');
+    this.toasts.successToast({ text: 'Hello World!' });
   }
 
   @action

app/services/toasts.js

@@ -1,6 +1,53 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import Toast from '../components/toast';
+import { hbs } from 'ember-template-imports';
+import { fn } from '@ember/helper';
 
+// const toast = hbs`
+//   {{component Toast text="hel"}}
+// `;
+
+// import { RenderingTestCase, moduleFor, strip } from 'internal-test-helpers';
+
+// import { precompileJSON } from '@glimmer/compiler';
+// import { getTemplateLocals } from '@glimmer/syntax';
+// import { createTemplateFactory } from '@ember/template-factory';
+
+// // import { Helper } from '../../index';
+// import { setComponentTemplate } from '@glimmer/manager';
+// import { templateOnlyComponent } from '@glimmer/runtime';
+
+// function precompileTemplate(source, { moduleName, scope = {} }) {
+//   let locals = getTemplateLocals(source);
+
+//   let options = {
+//     strictMode: true,
+//     moduleName,
+//     locals,
+//     isProduction: false,
+//     meta: { moduleName },
+//   };
+
+//   // Copied from @glimmer/compiler/lib/compiler#precompile
+//   let [block, usedLocals] = precompileJSON(source, options);
+//   let usedScope = usedLocals.map((key) => scope[key]);
+
+//   let blockJSON = JSON.stringify(block);
+//   let templateJSONObject = {
+//     id: moduleName,
+//     block: blockJSON,
+//     moduleName: moduleName ?? '(unknown template module)',
+//     scope: () => usedScope,
+//     isStrictMode: true,
+//   };
+
+//   let factory = createTemplateFactory(templateJSONObject);
+
+//   return factory;
+// }
+
+// console.log(toast);
 export default class ToastsService extends Service {
   @tracked plate = [];
 
@@ -12,7 +59,17 @@ export default class ToastsService extends Service {
     document.body.appendChild(this.destinationElement);
   }
 
-  add() {
+  successToast({ text }) {
+    const removeFromPlate = (toast) => {
+      this.plate = this.plate.filter((item) => item !== toast);
+    };
 
+    const toast = hbs`<Toast @text={{text}} @willDestroy={{fn removeFromPlate toast}} />`;
+    console.log('successToast', toast);
+    this.addToPlate(toast);
+  }
+
+  addToPlate(toast) {
+    this.plate = this.plate.concat(toast);
   }
 }

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

@@ -18,4 +18,4 @@
   <Button @text='Cancel' @onClick={{this.cancel}} />
 </form>
 
-<Toast @text="HO-HO-HO" />
+{{!-- <Toast @text="HO-HO-HO" /> --}}

app/templates/application.hbs

@@ -1 +1,3 @@
 {{outlet}}
+
+<ToastsContainer />

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