Dummy drag and drop list

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.

app/components/recipe-list.hbs

@@ -0,0 +1,15 @@
+<SortableGroup
+  @model={{this.items}}
+  @onChange={{action this.reorderItems}}
+  as |group|>
+  {{#each group.model as |modelItem|}}
+    <group.item
+      @model={{modelItem}}
+      as |item|>
+      <item.handle>
+        <span class="handle">&varr;</span>
+        {{modelItem.name}}
+      </item.handle>
+    </group.item>
+  {{/each}}
+</SortableGroup>

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;
+  }
+}

app/styles/app.css

@@ -0,0 +1,6 @@
+.sortable-item {
+  transition: all .125s;
+}
+.sortable-item.is-dragging {
+  transition-duration: 0s;
+}

app/templates/application.hbs

@@ -1,6 +1 @@
-{{!-- The following component displays Ember's default welcome message. --}}
+<RecipeList />
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
-
-{{outlet}}
-

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",

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",

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`<RecipeList />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <RecipeList>
+        template block text
+      </RecipeList>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});