Use old ember-sortable for presentation
This commit is contained in:
Ava Wroten
parent
790515b024
commit
02bddc4f66
5 changed files with 21 additions and 202 deletions
|
|
@ -1,17 +1,14 @@
|
|||
<div class="rounded-md shadow-md bg-gray-200">
|
||||
<SortableGroup
|
||||
@model={{this.sortedItems}}
|
||||
@onChange={{action this.reorderMeals}}
|
||||
as |group|>
|
||||
{{#each group.model as |meal|}}
|
||||
<group.item
|
||||
{{#each this.sortedItems as |meal|}}
|
||||
<SortableItem
|
||||
@model={{meal}}
|
||||
data-test-id="meal-item"
|
||||
as |item|>
|
||||
<item.handle>
|
||||
@group={{group}}
|
||||
data-test-id="meal-item">
|
||||
<MealItem @meal={{meal}} {{on "click" this.openMealDetails}} />
|
||||
</item.handle>
|
||||
</group.item>
|
||||
</SortableItem>
|
||||
{{/each}}
|
||||
</SortableGroup>
|
||||
</div>
|
||||
|
|
|
|||
159
ember-ui/package-lock.json
generated
159
ember-ui/package-lock.json
generated
|
|
@ -13250,15 +13250,13 @@
|
|||
}
|
||||
},
|
||||
"ember-sortable": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ember-sortable/-/ember-sortable-2.1.3.tgz",
|
||||
"integrity": "sha512-6aczdWbtTbloHW/kZr8Rr3AlywMy1GDs8q5A+1ka3RapqSuPDPBNCvXlzBLcPJGbnyR/OxV7w1yZO9gR+fCAhQ==",
|
||||
"version": "1.12.10",
|
||||
"resolved": "https://registry.npmjs.org/ember-sortable/-/ember-sortable-1.12.10.tgz",
|
||||
"integrity": "sha512-QYgm5IQtXvbsk9/MOTb/ECGuX57wEsVBuYxdc4OZ+ZXzgx4HnujBDn4zz+0eLFkopVnuqRy7TRMQsZEeMzvTAA==",
|
||||
"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"
|
||||
"ember-cli-htmlbars": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ember-cli-htmlbars": {
|
||||
|
|
@ -13646,155 +13644,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
"ember-maybe-import-regenerator": "^0.1.6",
|
||||
"ember-qunit": "^4.6.0",
|
||||
"ember-resolver": "^7.0.0",
|
||||
"ember-sortable": "^2.1.3",
|
||||
"ember-sortable": "^1.12.10",
|
||||
"ember-source": "^3.16.3",
|
||||
"ember-template-lint": "^2.0.1",
|
||||
"eslint": "^6.8.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||
import { render, find, findAll, focus, triggerKeyEvent } from '@ember/test-helpers';
|
||||
import { drag } from 'ember-sortable/test-support/helpers';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | meal-list', function(hooks) {
|
||||
|
|
@ -17,40 +16,7 @@ module('Integration | Component | meal-list', function(hooks) {
|
|||
assert.dom('[data-test-id=meal-item]').exists({ count: 2 });
|
||||
});
|
||||
|
||||
test('it can focus meal wrappers', async function(assert) {
|
||||
await render(hbs`<MealList />`);
|
||||
|
||||
await focus('[data-sortable-handle]');
|
||||
|
||||
assert.equal(find('[data-sortable-handle]'), document.activeElement);
|
||||
});
|
||||
|
||||
test('it can reorder meals via keyboard shortcuts', async function(assert) {
|
||||
await render(hbs`<MealList />`);
|
||||
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 1');
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 2');
|
||||
|
||||
await focus('[data-sortable-handle]'); // Not technically required, but emulates user interaction
|
||||
await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'Enter');
|
||||
await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'ArrowDown');
|
||||
await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'Enter');
|
||||
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 2');
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 1');
|
||||
});
|
||||
|
||||
test('it can drag and drop meals', async function(assert) {
|
||||
await render(hbs`<MealList />`);
|
||||
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 1');
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 2');
|
||||
|
||||
await drag('mouse', '[data-sortable-handle]', () => { return { dy: 100, dx: 0 } });
|
||||
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 2');
|
||||
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 1');
|
||||
});
|
||||
// TODO Add sortable tests
|
||||
|
||||
async function initMeals() {
|
||||
let store = this.owner.lookup('service:store');
|
||||
|
|
|
|||
|
|
@ -81,7 +81,14 @@
|
|||
</section>
|
||||
|
||||
<section data-background-iframe="http://localhost:4201/52958" data-background-interactive>
|
||||
<p>Latest ember-sortable</p>
|
||||
<p>v2.x.x ember-sortable</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Where do we go from here?</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/adopted-ember-addons/ember-sortable/pull/345">ember-sortable v2.2.x modifiers</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue