From 3d30b40da074591ccb0ccda905b5bc87efdc5be1 Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Mon, 12 Sep 2022 17:49:25 +0300 Subject: [PATCH 01/11] Add toasts service --- app/components/icons/close.js | 1 + app/components/icons/loading.js | 2 +- app/components/toast.hbs | 25 +++++++++++++++++++++ app/components/toast.js | 6 +++++ app/controllers/admin/indexes/item/edit.js | 3 +++ app/services/toasts.js | 18 +++++++++++++++ app/templates/admin/indexes/item/edit.hbs | 6 ++++- tests/integration/components/toast-test.js | 26 ++++++++++++++++++++++ tests/unit/services/toasts-test.js | 12 ++++++++++ 9 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 app/components/icons/close.js create mode 100644 app/components/toast.hbs create mode 100644 app/components/toast.js create mode 100644 app/services/toasts.js create mode 100644 tests/integration/components/toast-test.js create mode 100644 tests/unit/services/toasts-test.js diff --git a/app/components/icons/close.js b/app/components/icons/close.js new file mode 100644 index 0000000..a956cb2 --- /dev/null +++ b/app/components/icons/close.js @@ -0,0 +1 @@ +export { Close as default } from 'ember-mdi'; diff --git a/app/components/icons/loading.js b/app/components/icons/loading.js index 2ff4aa1..5642ac5 100644 --- a/app/components/icons/loading.js +++ b/app/components/icons/loading.js @@ -1 +1 @@ -export { Heart as default } from 'ember-mdi'; +export { Loading as default } from 'ember-mdi'; diff --git a/app/components/toast.hbs b/app/components/toast.hbs new file mode 100644 index 0000000..5888e94 --- /dev/null +++ b/app/components/toast.hbs @@ -0,0 +1,25 @@ +{{#in-element this.toasts.destinationElement}} + +{{/in-element}} diff --git a/app/components/toast.js b/app/components/toast.js new file mode 100644 index 0000000..08ffc1d --- /dev/null +++ b/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; +} diff --git a/app/controllers/admin/indexes/item/edit.js b/app/controllers/admin/indexes/item/edit.js index b19a38a..c4bde3e 100644 --- a/app/controllers/admin/indexes/item/edit.js +++ b/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 diff --git a/app/services/toasts.js b/app/services/toasts.js new file mode 100644 index 0000000..ec73718 --- /dev/null +++ b/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() { + + } +} diff --git a/app/templates/admin/indexes/item/edit.hbs b/app/templates/admin/indexes/item/edit.hbs index 5c088c9..2e044ef 100644 --- a/app/templates/admin/indexes/item/edit.hbs +++ b/app/templates/admin/indexes/item/edit.hbs @@ -1,4 +1,6 @@ - +{{#if @model.isNew}} + +{{/if}}
{{#if @model.isNew}} @@ -15,3 +17,5 @@
+ diff --git a/app/components/toast.js b/app/components/toast.js index 08ffc1d..375ab55 100644 --- a/app/components/toast.js +++ b/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(); + } } diff --git a/app/components/toasts-container.hbs b/app/components/toasts-container.hbs new file mode 100644 index 0000000..50c7cc6 --- /dev/null +++ b/app/components/toasts-container.hbs @@ -0,0 +1,7 @@ +{{#in-element this.toasts.destinationElement}} +
+ {{#each this.toasts.plate as |Item|}} + + {{/each}} +
+{{/in-element}} diff --git a/app/components/toasts-container.js b/app/components/toasts-container.js new file mode 100644 index 0000000..8c53aaf --- /dev/null +++ b/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; +} diff --git a/app/controllers/admin/indexes/item/edit.js b/app/controllers/admin/indexes/item/edit.js index c4bde3e..8afec84 100644 --- a/app/controllers/admin/indexes/item/edit.js +++ b/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 diff --git a/app/services/toasts.js b/app/services/toasts.js index ec73718..0499ba9 100644 --- a/app/services/toasts.js +++ b/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``; + console.log('successToast', toast); + this.addToPlate(toast); + } + + addToPlate(toast) { + this.plate = this.plate.concat(toast); } } diff --git a/app/templates/admin/indexes/item/edit.hbs b/app/templates/admin/indexes/item/edit.hbs index 2e044ef..4588e83 100644 --- a/app/templates/admin/indexes/item/edit.hbs +++ b/app/templates/admin/indexes/item/edit.hbs @@ -18,4 +18,4 @@ - +
+ +
+ +
+ {{@text}} +
+ + + +{{/in-element}} diff --git a/app/components/toast.js b/app/components/toast.js index 375ab55..d6c10ba 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -6,14 +6,17 @@ import { action } from '@ember/object'; export default class ToastComponent extends Component { @service toasts; - constructor(owner, args) { - super(owner, args); - - // registerDestructor(this, this.destroy); + @action + triggerOnClose() { + this.args.onClose?.(); } @action - destroyFromPlate() { - this.args?.willDestroy(); + registerInPlate() { + this.toasts.add(this); + + registerDestructor(this, () => { + this.toasts.remove(this); + }); } } diff --git a/app/components/toasts-container.hbs b/app/components/toasts-container.hbs index 50c7cc6..0b8f949 100644 --- a/app/components/toasts-container.hbs +++ b/app/components/toasts-container.hbs @@ -1,7 +1,5 @@ -{{#in-element this.toasts.destinationElement}} -
- {{#each this.toasts.plate as |Item|}} - - {{/each}} -
-{{/in-element}} +
+ {{#each this.toasts.container as |Item|}} + + {{/each}} +
diff --git a/app/services/toasts.js b/app/services/toasts.js index 0499ba9..02ddae5 100644 --- a/app/services/toasts.js +++ b/app/services/toasts.js @@ -4,51 +4,8 @@ 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 container = []; @tracked plate = []; constructor() { @@ -60,16 +17,20 @@ export default class ToastsService extends Service { } successToast({ text }) { - const removeFromPlate = (toast) => { - this.plate = this.plate.filter((item) => item !== toast); + const onClose = () => { + this.container = this.container.filter((item) => item !== wrapper); }; - const toast = hbs``; - console.log('successToast', toast); - this.addToPlate(toast); + const wrapper = hbs``; + + this.container = this.container.concat([wrapper]); } - addToPlate(toast) { - this.plate = this.plate.concat(toast); + add(toast) { + this.queue = this.queue.concat(toast); + } + + remove(toast) { + this.queue = this.queue.filter((item) => item !== toast); } } diff --git a/app/templates/admin/indexes/item/edit.hbs b/app/templates/admin/indexes/item/edit.hbs index 4588e83..e2707cb 100644 --- a/app/templates/admin/indexes/item/edit.hbs +++ b/app/templates/admin/indexes/item/edit.hbs @@ -18,4 +18,6 @@ + diff --git a/app/components/success-toast.js b/app/components/success-toast.js new file mode 100644 index 0000000..13720d8 --- /dev/null +++ b/app/components/success-toast.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class SuccessToastComponent extends Component {} diff --git a/app/components/toast.hbs b/app/components/toast.hbs index c54621e..b30487e 100644 --- a/app/components/toast.hbs +++ b/app/components/toast.hbs @@ -2,26 +2,8 @@ {{/in-element}} diff --git a/app/components/toast.js b/app/components/toast.js index d6c10ba..4005348 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -12,7 +12,7 @@ export default class ToastComponent extends Component { } @action - registerInPlate() { + registerInQueue() { this.toasts.add(this); registerDestructor(this, () => { diff --git a/app/services/toasts.js b/app/services/toasts.js index 02ddae5..73ffdde 100644 --- a/app/services/toasts.js +++ b/app/services/toasts.js @@ -1,12 +1,12 @@ import Service from '@ember/service'; import { tracked } from '@glimmer/tracking'; -import Toast from '../components/toast'; +import SuccessToast from '../components/success-toast'; import { hbs } from 'ember-template-imports'; import { fn } from '@ember/helper'; export default class ToastsService extends Service { @tracked container = []; - @tracked plate = []; + @tracked queue = []; constructor() { super(); @@ -21,7 +21,7 @@ export default class ToastsService extends Service { this.container = this.container.filter((item) => item !== wrapper); }; - const wrapper = hbs``; + const wrapper = hbs``; this.container = this.container.concat([wrapper]); } diff --git a/tests/integration/components/success-toast-test.js b/tests/integration/components/success-toast-test.js new file mode 100644 index 0000000..6c99445 --- /dev/null +++ b/tests/integration/components/success-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 | success-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``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +}); From c40cf6b64eb606813d643efd8fbe00b89af5ab86 Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Tue, 13 Sep 2022 17:34:42 +0300 Subject: [PATCH 05/11] Add ResizeObserver for tracking widht and height --- app/components/toast.hbs | 2 +- app/components/toast.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/app/components/toast.hbs b/app/components/toast.hbs index b30487e..f78c633 100644 --- a/app/components/toast.hbs +++ b/app/components/toast.hbs @@ -2,7 +2,7 @@ diff --git a/app/components/toast.js b/app/components/toast.js index 4005348..0059650 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -2,16 +2,40 @@ import Component from '@glimmer/component'; import { inject as service } from '@ember/service'; import { registerDestructor } from '@ember/destroyable'; import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; export default class ToastComponent extends Component { @service toasts; + @tracked width; + @tracked height; + @action triggerOnClose() { this.args.onClose?.(); } @action + didInsert(el) { + this.registerInQueue(); + this.registerResizeObserver(el); + } + + registerResizeObserver(el) { + const ro = new ResizeObserver((entries) => { + for (let entry of entries) { + this.width = entry.contentRect.width; + this.height = entry.contentRect.height; + } + }); + + ro.observe(el); + + registerDestructor(this, () => { + ro.disconnect(); + }); + } + registerInQueue() { this.toasts.add(this); From 99ce95a9cc4da579c7dc74d693c4cbb511b38d27 Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Tue, 13 Sep 2022 18:28:41 +0300 Subject: [PATCH 06/11] Add positional observer --- app/components/toast.hbs | 4 +++- app/components/toast.js | 33 +++++++++++++++++++++++++++++---- app/services/toasts.js | 3 +-- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/app/components/toast.hbs b/app/components/toast.hbs index f78c633..8d261a0 100644 --- a/app/components/toast.hbs +++ b/app/components/toast.hbs @@ -1,8 +1,10 @@ {{#in-element this.toasts.destinationElement insertBefore=null}} diff --git a/app/components/toast.js b/app/components/toast.js index 0059650..ad4db55 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -3,6 +3,9 @@ import { inject as service } from '@ember/service'; import { registerDestructor } from '@ember/destroyable'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; +import { htmlSafe } from '@ember/template'; + +const margin = 16; export default class ToastComponent extends Component { @service toasts; @@ -10,6 +13,30 @@ export default class ToastComponent extends Component { @tracked width; @tracked height; + get top() { + const queue = this.toasts.queue; + + for (let i = 0, height = 0; i < queue.length; i++) { + height += margin; + + if (queue[i] === this) { + return `top: ${height}px`; + } + + height += queue[i].height; + } + + return `top: ${margin}px`; + } + + get right() { + return `right: ${margin}px`; + } + + get style() { + return htmlSafe([this.top, this.right].join('; ')); + } + @action triggerOnClose() { this.args.onClose?.(); @@ -23,10 +50,8 @@ export default class ToastComponent extends Component { registerResizeObserver(el) { const ro = new ResizeObserver((entries) => { - for (let entry of entries) { - this.width = entry.contentRect.width; - this.height = entry.contentRect.height; - } + this.width = entries[0].borderBoxSize[0].inlineSize; + this.height = entries[0].borderBoxSize[0].blockSize; }); ro.observe(el); diff --git a/app/services/toasts.js b/app/services/toasts.js index 73ffdde..a1bb947 100644 --- a/app/services/toasts.js +++ b/app/services/toasts.js @@ -1,8 +1,7 @@ import Service from '@ember/service'; import { tracked } from '@glimmer/tracking'; -import SuccessToast from '../components/success-toast'; import { hbs } from 'ember-template-imports'; -import { fn } from '@ember/helper'; +import SuccessToast from '../components/success-toast'; export default class ToastsService extends Service { @tracked container = []; From 605ab6a63d4f6e4f5585c5229e819e9b7e5af40a Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Wed, 14 Sep 2022 10:29:58 +0300 Subject: [PATCH 07/11] Add task-toast --- app/components/form/element.hbs | 2 +- app/components/task-toast.hbs | 22 +++++ app/components/task-toast.js | 84 +++++++++++++++++++ app/controllers/admin/indexes/item/edit.js | 10 +-- app/services/toasts.js | 11 +++ app/templates/admin/indexes/item/edit.hbs | 4 - app/templates/login.hbs | 2 +- config/tailwind.config.js | 19 +++-- .../integration/components/task-toast-test.js | 26 ++++++ 9 files changed, 162 insertions(+), 18 deletions(-) create mode 100644 app/components/task-toast.hbs create mode 100644 app/components/task-toast.js create mode 100644 tests/integration/components/task-toast-test.js diff --git a/app/components/form/element.hbs b/app/components/form/element.hbs index f2e39d5..c1c75c1 100644 --- a/app/components/form/element.hbs +++ b/app/components/form/element.hbs @@ -3,7 +3,7 @@ diff --git a/app/components/task-toast.hbs b/app/components/task-toast.hbs new file mode 100644 index 0000000..7615204 --- /dev/null +++ b/app/components/task-toast.hbs @@ -0,0 +1,22 @@ + + {{#if this.icon}} +
+ +
+ {{/if}} + +
+
Task {{this.taskType}} Uid:{{this.taskUid}}
+ Status: {{this.taskStatus}} +
+ + + diff --git a/app/components/task-toast.js b/app/components/task-toast.js new file mode 100644 index 0000000..fd94574 --- /dev/null +++ b/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); + } + } +} diff --git a/app/controllers/admin/indexes/item/edit.js b/app/controllers/admin/indexes/item/edit.js index 8afec84..991e287 100644 --- a/app/controllers/admin/indexes/item/edit.js +++ b/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 diff --git a/app/services/toasts.js b/app/services/toasts.js index a1bb947..dade19a 100644 --- a/app/services/toasts.js +++ b/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``; + + this.container = this.container.concat([wrapper]); + } + add(toast) { this.queue = this.queue.concat(toast); } diff --git a/app/templates/admin/indexes/item/edit.hbs b/app/templates/admin/indexes/item/edit.hbs index e2707cb..130ec11 100644 --- a/app/templates/admin/indexes/item/edit.hbs +++ b/app/templates/admin/indexes/item/edit.hbs @@ -17,7 +17,3 @@ +
+
Task {{this.taskType}} Uid:{{this.taskUid}}
+
+ Status: + {{this.taskStatus}} +
+ {{#if this.task.error}} + Error: + {{this.task.error.message}} + {{/if}} +
+ + + diff --git a/app/components/toast.hbs b/app/components/toast.hbs index 8d261a0..4a519aa 100644 --- a/app/components/toast.hbs +++ b/app/components/toast.hbs @@ -1,11 +1,16 @@ {{#in-element this.toasts.destinationElement insertBefore=null}} {{/in-element}} diff --git a/app/components/toast.js b/app/components/toast.js index ad4db55..13db2ac 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -13,6 +13,14 @@ export default class ToastComponent extends Component { @tracked width; @tracked height; + get autoCloseValue() { + return this.args?.autoCloseDuration ?? 3000; + } + + get autoCloseDuration() { + return this.args?.autoCloseDuration ?? 3000; + } + get top() { const queue = this.toasts.queue; diff --git a/tests/integration/components/progress-bar-test.js b/tests/integration/components/progress-bar-test.js new file mode 100644 index 0000000..d296fdc --- /dev/null +++ b/tests/integration/components/progress-bar-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 | progress-bar', 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``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +}); From cfdfbdfac8471bca7fff166841065533161858ca Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Wed, 14 Sep 2022 12:55:48 +0300 Subject: [PATCH 10/11] Add progress-bar --- app/components/progress-bar.hbs | 10 ++++++-- app/components/task-toast.hbs | 4 +-- app/components/task-toast.js | 45 ++++++++++++++++++++++++++------- app/components/toast.hbs | 10 +++++--- app/components/toast.js | 4 --- app/modifiers/animate.js | 15 +++++++++++ package.json | 1 + 7 files changed, 69 insertions(+), 20 deletions(-) create mode 100644 app/modifiers/animate.js diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs index 1ed2eb9..ced0b62 100644 --- a/app/components/progress-bar.hbs +++ b/app/components/progress-bar.hbs @@ -1,3 +1,9 @@ -
-
+
+
diff --git a/app/components/task-toast.hbs b/app/components/task-toast.hbs index 226d98c..f21b865 100644 --- a/app/components/task-toast.hbs +++ b/app/components/task-toast.hbs @@ -1,4 +1,4 @@ - +
{{#if this.icon}}
diff --git a/app/components/task-toast.js b/app/components/task-toast.js index 748ab51..ff3a782 100644 --- a/app/components/task-toast.js +++ b/app/components/task-toast.js @@ -9,6 +9,7 @@ export default class TaskToastComponent extends Component { @service meilisearch; @tracked task; + @tracked autoClose; constructor(owner, args) { super(owner, args); @@ -31,16 +32,41 @@ export default class TaskToastComponent extends Component { } } + get status() { + if (this.isEnqueued) { + return 'info'; + } else if (this.isFailed) { + return 'danger'; + } else if (this.isSucceeded) { + return 'success'; + } else { + 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; + // Current classes need for taiwind builder + if (this.isEnqueued) { + return 'text-info'; + } else if (this.isFailed) { + return 'text-danger'; + } else if (this.isSucceeded) { + return 'text-success'; + } else { + return null; + } + } + + get bg() { + // Current classes need for taiwind builder + if (this.isEnqueued) { + return 'bg-info'; + } else if (this.isFailed) { + return 'bg-danger'; + } else if (this.isSucceeded) { + return 'bg-success'; + } else { + return null; } } @@ -75,6 +101,7 @@ export default class TaskToastComponent extends Component { if (this.isSucceeded) { this.clearInterval(); + this.autoClose = true; } }); } diff --git a/app/components/toast.hbs b/app/components/toast.hbs index 4a519aa..afa82a2 100644 --- a/app/components/toast.hbs +++ b/app/components/toast.hbs @@ -9,8 +9,12 @@
{{yield (hash triggerOnClose=this.triggerOnClose)}}
- {{!-- {{#if this.autoCloseDuration}} --}} - - {{!-- {{/if}} --}} + {{#if @autoClose}} + + {{/if}}
{{/in-element}} diff --git a/app/components/toast.js b/app/components/toast.js index 13db2ac..8ea3b3f 100644 --- a/app/components/toast.js +++ b/app/components/toast.js @@ -13,10 +13,6 @@ export default class ToastComponent extends Component { @tracked width; @tracked height; - get autoCloseValue() { - return this.args?.autoCloseDuration ?? 3000; - } - get autoCloseDuration() { return this.args?.autoCloseDuration ?? 3000; } diff --git a/app/modifiers/animate.js b/app/modifiers/animate.js new file mode 100644 index 0000000..d033b91 --- /dev/null +++ b/app/modifiers/animate.js @@ -0,0 +1,15 @@ +import { modifier } from 'ember-modifier'; + +export default modifier( + (element, [keyframes, timing], { onFinish, onCancel }) => { + const animation = element.animate(keyframes, timing); + + animation.finished + .then(() => onFinish?.()) + .catch((error) => onCancel?.(error)); + + return () => { + animation.cancel(); + }; + } +); diff --git a/package.json b/package.json index b3599c3..5eacaa5 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "ember-headlessui": "^0.13.0", "ember-load-initializers": "^2.1.2", "ember-mdi": "2.0.0-beta.1", + "ember-modifier": "4.0.0-beta.1", "ember-qunit": "^5.1.5", "ember-resolver": "^8.0.3", "ember-resources": "^4.7.1", From b7791572bfa33a1ebce5ad807719e84ba6c5b4e6 Mon Sep 17 00:00:00 2001 From: Stanislav Romanov Date: Wed, 14 Sep 2022 14:43:09 +0300 Subject: [PATCH 11/11] Small fixes --- app/components/task-toast.hbs | 9 +++++++-- app/components/task-toast.js | 5 ++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/components/task-toast.hbs b/app/components/task-toast.hbs index f21b865..71c4812 100644 --- a/app/components/task-toast.hbs +++ b/app/components/task-toast.hbs @@ -1,4 +1,9 @@ - +
{{#if this.icon}}
-
Task {{this.taskType}} Uid:{{this.taskUid}}
+
Task {{this.taskType}} uid:{{this.taskUid}}
Status: {{this.taskStatus}} diff --git a/app/components/task-toast.js b/app/components/task-toast.js index ff3a782..3a2c86b 100644 --- a/app/components/task-toast.js +++ b/app/components/task-toast.js @@ -99,8 +99,11 @@ export default class TaskToastComponent extends Component { this.meilisearch.getTask(this.taskUid).then((task) => { this.task = task; - if (this.isSucceeded) { + if (!this.isEnqueued) { this.clearInterval(); + } + + if (this.isSucceeded) { this.autoClose = true; } });