diff --git a/README.md b/README.md index d7d7610..ce1953b 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,11 @@ This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here. +This example apps uses: + +* Ember-Sortable +* Ember-Concurrency + ## Prerequisites You will need the following things properly installed on your computer. diff --git a/app/components/recipe-list.hbs b/app/components/recipe-list.hbs new file mode 100644 index 0000000..a725546 --- /dev/null +++ b/app/components/recipe-list.hbs @@ -0,0 +1,15 @@ + + {{#each group.model as |modelItem|}} + + + ↕ + {{modelItem.name}} + + + {{/each}} + diff --git a/app/components/recipe-list.js b/app/components/recipe-list.js new file mode 100644 index 0000000..a702917 --- /dev/null +++ b/app/components/recipe-list.js @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; +import { A } from '@ember/array'; + +export default class RecipeListComponent extends Component { + @tracked items = A([ + { + name: 'foo', + }, { + name: 'bar', + }, + ]); + + @action + reorderItems(reorderedItems) { + this.items = reorderedItems; + } +} diff --git a/app/styles/app.css b/app/styles/app.css index e69de29..dc82234 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -0,0 +1,6 @@ +.sortable-item { + transition: all .125s; +} +.sortable-item.is-dragging { + transition-duration: 0s; +} diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 72ba6f0..1e3e8e3 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,6 +1 @@ -{{!-- The following component displays Ember's default welcome message. --}} - -{{!-- Feel free to remove this! --}} - -{{outlet}} - + diff --git a/package-lock.json b/package-lock.json index bdac0ab..dd7a2f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7434,6 +7434,17 @@ } } }, + "ember-concurrency": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/ember-concurrency/-/ember-concurrency-1.1.3.tgz", + "integrity": "sha512-U/a345q6OjkcRa3ziXHYFD9yB5V8guX68k1EAlLLtbtbswWAawvT/mKiPnhejuENiG6jICEc9AT0IXmVamu1+w==", + "dev": true, + "requires": { + "ember-cli-babel": "^7.7.3", + "ember-compatibility-helpers": "^1.2.0", + "ember-maybe-import-regenerator": "^0.1.6" + } + }, "ember-data": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/ember-data/-/ember-data-3.14.1.tgz", @@ -8078,6 +8089,32 @@ "recast": "^0.18.1" } }, + "ember-sortable": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ember-sortable/-/ember-sortable-2.1.1.tgz", + "integrity": "sha512-YIPcPbJV7WptI6L4VguHM2dsgeYe66bufMeAgw8GY1anxxY3zUy3RmNfE04BAEF7UCMUHtGRxVYaaZ1vN+cz5g==", + "dev": true, + "requires": { + "ember-cli-babel": "^7.1.2", + "ember-cli-htmlbars": "^3.0.0", + "ember-test-selectors": "^2.1.0", + "ember-test-waiters": "^1.1.1" + }, + "dependencies": { + "ember-cli-htmlbars": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz", + "integrity": "sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==", + "dev": true, + "requires": { + "broccoli-persistent-filter": "^2.3.1", + "hash-for-dep": "^1.5.1", + "json-stable-stringify": "^1.0.1", + "strip-bom": "^3.0.0" + } + } + } + }, "ember-source": { "version": "https://s3.amazonaws.com/builds.emberjs.com/beta/shas/bdd219f7c716d6a7a4731ca739e04d1dac43a9cd.tgz", "integrity": "sha512-xmAcfDXMopogefR2hkpZKwHIVYbV280ibvQhDuJly00Es0wOsyk5m7lSD0oIU9Qai73p51sfH1+5nzUrZL9N3g==", @@ -8242,6 +8279,155 @@ } } }, + "ember-test-selectors": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/ember-test-selectors/-/ember-test-selectors-2.1.0.tgz", + "integrity": "sha512-c5HmvefmeABH8hg380TSNZiE9VAK1CBeXWrgyXy+IXHtsew4lZHHw7GnqCAqsakxwvmaMARbAKY9KfSAE91s1g==", + "dev": true, + "requires": { + "ember-cli-babel": "^6.8.2", + "ember-cli-version-checker": "^3.1.2" + }, + "dependencies": { + "amd-name-resolver": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz", + "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==", + "dev": true, + "requires": { + "ensure-posix-path": "^1.0.1" + } + }, + "babel-plugin-debug-macros": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz", + "integrity": "sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==", + "dev": true, + "requires": { + "semver": "^5.3.0" + } + }, + "broccoli-babel-transpiler": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-6.5.1.tgz", + "integrity": "sha512-w6GcnkxvHcNCte5FcLGEG1hUdQvlfvSN/6PtGWU/otg69Ugk8rUk51h41R0Ugoc+TNxyeFG1opRt2RlA87XzNw==", + "dev": true, + "requires": { + "babel-core": "^6.26.0", + "broccoli-funnel": "^2.0.1", + "broccoli-merge-trees": "^2.0.0", + "broccoli-persistent-filter": "^1.4.3", + "clone": "^2.0.0", + "hash-for-dep": "^1.2.3", + "heimdalljs-logger": "^0.1.7", + "json-stable-stringify": "^1.0.0", + "rsvp": "^4.8.2", + "workerpool": "^2.3.0" + } + }, + "broccoli-merge-trees": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-2.0.1.tgz", + "integrity": "sha512-WjaexJ+I8BxP5V5RNn6um/qDRSmKoiBC/QkRi79FT9ClHfldxRyCDs9mcV7mmoaPlsshmmPaUz5jdtcKA6DClQ==", + "dev": true, + "requires": { + "broccoli-plugin": "^1.3.0", + "merge-trees": "^1.0.1" + } + }, + "broccoli-persistent-filter": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz", + "integrity": "sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==", + "dev": true, + "requires": { + "async-disk-cache": "^1.2.1", + "async-promise-queue": "^1.0.3", + "broccoli-plugin": "^1.0.0", + "fs-tree-diff": "^0.5.2", + "hash-for-dep": "^1.0.2", + "heimdalljs": "^0.2.1", + "heimdalljs-logger": "^0.1.7", + "mkdirp": "^0.5.1", + "promise-map-series": "^0.2.1", + "rimraf": "^2.6.1", + "rsvp": "^3.0.18", + "symlink-or-copy": "^1.0.1", + "walk-sync": "^0.3.1" + }, + "dependencies": { + "rsvp": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz", + "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==", + "dev": true + } + } + }, + "ember-cli-babel": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz", + "integrity": "sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==", + "dev": true, + "requires": { + "amd-name-resolver": "1.2.0", + "babel-plugin-debug-macros": "^0.2.0-beta.6", + "babel-plugin-ember-modules-api-polyfill": "^2.6.0", + "babel-plugin-transform-es2015-modules-amd": "^6.24.0", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.7.0", + "broccoli-babel-transpiler": "^6.5.0", + "broccoli-debug": "^0.6.4", + "broccoli-funnel": "^2.0.0", + "broccoli-source": "^1.1.0", + "clone": "^2.0.0", + "ember-cli-version-checker": "^2.1.2", + "semver": "^5.5.0" + }, + "dependencies": { + "ember-cli-version-checker": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz", + "integrity": "sha512-G+KtYIVlSOWGcNaTFHk76xR4GdzDLzAS4uxZUKdASuFX0KJE43C6DaqL+y3VTpUFLI2FIkAS6HZ4I1YBi+S3hg==", + "dev": true, + "requires": { + "resolve": "^1.3.3", + "semver": "^5.3.0" + } + } + } + }, + "merge-trees": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-1.0.1.tgz", + "integrity": "sha1-zL5nRWl4f53vF/1G5lJfVwC70j4=", + "dev": true, + "requires": { + "can-symlink": "^1.0.0", + "fs-tree-diff": "^0.5.4", + "heimdalljs": "^0.2.1", + "heimdalljs-logger": "^0.1.7", + "rimraf": "^2.4.3", + "symlink-or-copy": "^1.0.0" + } + }, + "rsvp": { + "version": "4.8.5", + "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", + "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==", + "dev": true + }, + "workerpool": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-2.3.3.tgz", + "integrity": "sha512-L1ovlYHp6UObYqElXXpbd214GgbEKDED0d3sj7pRdFXjNkb2+un/AUcCkceHizO0IVI6SOGGncrcjozruCkRgA==", + "dev": true, + "requires": { + "object-assign": "4.1.1" + } + } + } + }, "ember-test-waiters": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ember-test-waiters/-/ember-test-waiters-1.1.1.tgz", diff --git a/package.json b/package.json index 76a1574..121069e 100644 --- a/package.json +++ b/package.json @@ -32,15 +32,16 @@ "ember-cli-inject-live-reload": "^2.0.1", "ember-cli-sri": "^2.1.1", "ember-cli-uglify": "^3.0.0", + "ember-concurrency": "^1.1.3", "ember-data": "~3.14.0", "ember-export-application-global": "^2.0.0", "ember-load-initializers": "^2.0.0", "ember-maybe-import-regenerator": "^0.1.6", "ember-qunit": "^4.4.1", "ember-resolver": "^6.0.0", + "ember-sortable": "^2.1.1", "ember-source": "https://s3.amazonaws.com/builds.emberjs.com/beta/shas/bdd219f7c716d6a7a4731ca739e04d1dac43a9cd.tgz", "ember-template-lint": "^1.5.0", - "ember-welcome-page": "^4.0.0", "eslint": "^6.1.0", "eslint-plugin-ember": "^7.1.0", "eslint-plugin-node": "^10.0.0", diff --git a/tests/integration/components/recipe-list-test.js b/tests/integration/components/recipe-list-test.js new file mode 100644 index 0000000..fff2b41 --- /dev/null +++ b/tests/integration/components/recipe-list-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | recipe-list', 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.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +});