gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Dummy drag and drop list

Browse source
This commit is contained in:
Jo Wroten 2019-12-21 14:58:10 -06:00
parent 351c12241a
commit 4380c9cb52
8 changed files with 260 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -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.

15
app/components/recipe-list.hbs Normal file
View file

@ -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>

19
app/components/recipe-list.js Normal file
View file

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

6
app/styles/app.css
View file

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

7
app/templates/application.hbs
View file

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

186
package-lock.json generated
View file

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

3
package.json
View file

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

26
tests/integration/components/recipe-list-test.js Normal file
View file

@ -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');
});
});