lolmaus · November 15, 2017 08:12 · Nov 15, 2017 · Nov 15, 2017 · Nov 14, 2017 · Nov 13, 2017
diff --git a/models.item.js b/models.item.js
@@ -11,7 +11,7 @@ export default Model.extend({
   childrenSorted: Ember.computed.sort('children', 'childrenSortOrder'),
 
   childrenSortedBound: Ember.computed('childrenSorted.[]', function () {
-    const children = this.get('childrenSorted').toArray()
+    const children = this.get('childrenSorted').slice() // Making a shallow copy of the array, because CPs should never have side effects
     children.__parent__ = this
     return children
   })

diff --git a/controllers.application.js b/controllers.application.js
@@ -7,9 +7,36 @@ export default Ember.Controller.extend({
 
       const draggedItem = sourceList.objectAt(sourceIndex)
 
-      sourceList.removeAt(sourceIndex)
-      targetList.insertAt(targetIndex, draggedItem)
+      // Updating rowOrder of items in source list
+      sourceList
+        .slice(sourceIndex + 1)
+      	.forEach(item => {
+          const rowOrder = item.get('rowOrder')
+          item.set('rowOrder', rowOrder - 1)
+        })
+
+      // Updating rowOrder of items in target list
+      targetList
+        .slice(targetIndex)
+      	.forEach(item => {
+          const rowOrder = item.get('rowOrder')
+          item.set('rowOrder', rowOrder + 1)
+        })
+
+      // Updating rowOrder of dragged item
+      draggedItem.set('rowOrder', targetIndex)
+
+      // Moving dragged item into the target list
+      // We can't do it directly because the list is a derived one,
+      // so we need to access the original list using a hack from the model
+      targetList
+        .__parent__
+        .get('children')
+      	.addObject(draggedItem)
+
+      // Note, that we don't need to remove the item from the source list.
+      // Ember Data does this automatically because our relationship is
+      // two-way.
     },
   },
-
 })
diff --git a/models.item.js b/models.item.js
@@ -3,6 +3,16 @@ import attr from "ember-data/attr"
 import { belongsTo, hasMany } from "ember-data/relationships"
 
 export default Model.extend({  
+  rowOrder: attr('number'),
   parent: belongsTo('item', {inverse: 'children', async: false}),
   children: hasMany('item', {inverse: 'parent',   async: false}),
+
+  childrenSortOrder: ['rowOrder:asc'],
+  childrenSorted: Ember.computed.sort('children', 'childrenSortOrder'),
+
+  childrenSortedBound: Ember.computed('childrenSorted.[]', function () {
+    const children = this.get('childrenSorted').toArray()
+    children.__parent__ = this
+    return children
+  })
 })
diff --git a/routes.application.js b/routes.application.js
@@ -5,7 +5,7 @@ const payload = {
     {
       type: 'item',
       id: '0',
-      attributes: { isParent: true },
+      attributes: { rowOrder: 0 },
       relationships: {
         parent: { data: { type: 'item', id: '0' } },
         children: {
@@ -19,7 +19,7 @@ const payload = {
     {
       type: 'item',
       id: '1',
-      attributes: { isParent: true },
+      attributes: { rowOrder: 0 },
       relationships: {
         parent: { data: { type: 'item', id: '0' } },
         children: {
@@ -33,7 +33,7 @@ const payload = {
     {
       type: 'item',
       id: '2',
-      attributes: { isParent: false },
+      attributes: { rowOrder: 0 },
       relationships: {
         parent: { data: { type: 'item', id: '1' } },
         children: {
@@ -44,7 +44,7 @@ const payload = {
     {
       type: 'item',
       id: '3',
-      attributes: { isParent: false },
+      attributes: { rowOrder: 1 },
       relationships: {
         parent: { data: { type: 'item', id: '1' } },
         children: {
@@ -55,7 +55,7 @@ const payload = {
     {
       type: 'item',
       id: '4',
-      attributes: { isParent: true },
+      attributes: { rowOrder: 1 },
       relationships: {        parent: { data: { type: 'item', id: '0' } },
         children: {
           data: [
@@ -68,7 +68,7 @@ const payload = {
     {
       type: 'item',
       id: '5',
-      attributes: { isParent: false },
+      attributes: { rowOrder: 0 },
       relationships: {
         parent: { data: { type: 'item', id: '4' } },
         children: {
@@ -79,7 +79,7 @@ const payload = {
     {
       type: 'item',
       id: '6',
-      attributes: { isParent: false },
+      attributes: { rowOrder: 1 },
       relationships: {
         parent: { data: { type: 'item', id: '4' } },
         children: {

diff --git a/templates.components.the-item.hbs b/templates.components.the-item.hbs
@@ -4,16 +4,12 @@
   </h3>
 
   <p class = "the-item-title">
-    children count: {{item.children.length}}
-  </p>
-
-  <p class = "the-item-title">
-    parent id: {{or item.parent.id 'none'}}
+    order: {{item.rowOrder}}
   </p>
 </div>
 
 {{#drag-sort-list
-  items               = item.children
+  items               = item.childrenSortedBound
   group               = group
   dragEndAction       = dragEndAction
   as |child|

diff --git a/components.the-item.js b/components.the-item.js
@@ -1,5 +1,5 @@
-import Ember from 'ember';
+import Ember from 'ember'
 
 export default Ember.Component.extend({
   classNames: ['the-item'],
-});
+})
diff --git a/controllers.application.js b/controllers.application.js
@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from 'ember'
 
 export default Ember.Controller.extend({
   actions : {
@@ -10,6 +10,6 @@ export default Ember.Controller.extend({
       sourceList.removeAt(sourceIndex)
       targetList.insertAt(targetIndex, draggedItem)
     },
-  }
+  },
 
-});
+})
diff --git a/models.item.js b/models.item.js
@@ -1,15 +1,8 @@
-import Model from "ember-data/model";
-import attr from "ember-data/attr";
-import { belongsTo, hasMany } from "ember-data/relationships";
+import Model from "ember-data/model"
+import attr from "ember-data/attr"
+import { belongsTo, hasMany } from "ember-data/relationships"
 
-export default Model.extend({
-  isParent: attr('boolean'),
-
+export default Model.extend({  
   parent: belongsTo('item', {inverse: 'children', async: false}),
   children: hasMany('item', {inverse: 'parent',   async: false}),
-
-  updateParentState: Ember.observer('children.[]', function () {
-   const isParent = this.get('children.length') > 0
-    this.setProperties({isParent})
-  })
-});
+})
diff --git a/routes.application.js b/routes.application.js
@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from 'ember'
 
 const payload = {
   data: [
@@ -87,7 +87,7 @@ const payload = {
         }
       }
     },
-  ]
+  ],
 }
 
 export default Ember.Route.extend({
@@ -99,4 +99,4 @@ export default Ember.Route.extend({
 
     return store.peekRecord('item', '0')
   }
-});
+})
diff --git a/templates.components.the-item.hbs b/templates.components.the-item.hbs
@@ -1,6 +1,16 @@
-<p class = "the-item-title">
-  {{item.id}} {{item.isParent}}
-</p>
+<div>
+  <h3 class = "the-item-title">
+    id: {{item.id}}
+  </h3>
+
+  <p class = "the-item-title">
+    children count: {{item.children.length}}
+  </p>
+
+  <p class = "the-item-title">
+    parent id: {{or item.parent.id 'none'}}
+  </p>
+</div>
 
 {{#drag-sort-list
   items               = item.children

diff --git a/twiddle.json b/twiddle.json
@@ -15,6 +15,7 @@
   },
   "addons": {
     "ember-data": "2.12.1",
-    "ember-drag-sort": "1.0.2"
+    "ember-drag-sort": "1.0.2",
+    "ember-truth-helpers": "2.0.0"
   }
 }
diff --git a/controllers.application.js b/controllers.application.js
@@ -6,15 +6,9 @@ export default Ember.Controller.extend({
       if (sourceList === targetList && sourceIndex === targetIndex) return
 
       const draggedItem = sourceList.objectAt(sourceIndex)
-      const oldParent = draggedItem.get('parent')                     // <--
 
       sourceList.removeAt(sourceIndex)
       targetList.insertAt(targetIndex, draggedItem)
-
-      const newParent = draggedItem.get('parent')                     // <--
-
-      newParent.set('isParent', newParent.get('children.length') > 0) // <--
-      oldParent.set('isParent', oldParent.get('children.length') > 0) // <--
     },
   }
 

diff --git a/models.item.js b/models.item.js
@@ -8,8 +8,8 @@ export default Model.extend({
   parent: belongsTo('item', {inverse: 'children', async: false}),
   children: hasMany('item', {inverse: 'parent',   async: false}),
 
-  // updateParentState: Ember.observer('children.[]', function () {
-  //  const isParent = this.get('children.length') > 0
-  //   this.setProperties({isParent})
-  // })
+  updateParentState: Ember.observer('children.[]', function () {
+   const isParent = this.get('children.length') > 0
+    this.setProperties({isParent})
+  })
 });
diff --git a/controllers.application.js b/controllers.application.js
@@ -5,10 +5,16 @@ export default Ember.Controller.extend({
     dragEnd ({sourceList, sourceIndex, targetList, targetIndex}) {
       if (sourceList === targetList && sourceIndex === targetIndex) return
 
-      const item = sourceList.objectAt(sourceIndex)
+      const draggedItem = sourceList.objectAt(sourceIndex)
+      const oldParent = draggedItem.get('parent')                     // <--
 
       sourceList.removeAt(sourceIndex)
-      targetList.insertAt(targetIndex, item)
+      targetList.insertAt(targetIndex, draggedItem)
+
+      const newParent = draggedItem.get('parent')                     // <--
+
+      newParent.set('isParent', newParent.get('children.length') > 0) // <--
+      oldParent.set('isParent', oldParent.get('children.length') > 0) // <--
     },
   }
 

diff --git a/models.item.js b/models.item.js
@@ -7,4 +7,9 @@ export default Model.extend({
 
   parent: belongsTo('item', {inverse: 'children', async: false}),
   children: hasMany('item', {inverse: 'parent',   async: false}),
+
+  // updateParentState: Ember.observer('children.[]', function () {
+  //  const isParent = this.get('children.length') > 0
+  //   this.setProperties({isParent})
+  // })
 });
diff --git a/templates.components.the-item.hbs b/templates.components.the-item.hbs
@@ -1,5 +1,5 @@
 <p class = "the-item-title">
-  {{item.id}}
+  {{item.id}} {{item.isParent}}
 </p>
 
 {{#drag-sort-list

diff --git a/components.the-item.js b/components.the-item.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['the-item'],
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions : {
+    dragEnd ({sourceList, sourceIndex, targetList, targetIndex}) {
+      if (sourceList === targetList && sourceIndex === targetIndex) return
+
+      const item = sourceList.objectAt(sourceIndex)
+
+      sourceList.removeAt(sourceIndex)
+      targetList.insertAt(targetIndex, item)
+    },
+  }
+
+});
diff --git a/models.item.js b/models.item.js
@@ -0,0 +1,10 @@
+import Model from "ember-data/model";
+import attr from "ember-data/attr";
+import { belongsTo, hasMany } from "ember-data/relationships";
+
+export default Model.extend({
+  isParent: attr('boolean'),
+
+  parent: belongsTo('item', {inverse: 'children', async: false}),
+  children: hasMany('item', {inverse: 'parent',   async: false}),
+});
diff --git a/routes.application.js b/routes.application.js
@@ -0,0 +1,102 @@
+import Ember from 'ember';
+
+const payload = {
+  data: [
+    {
+      type: 'item',
+      id: '0',
+      attributes: { isParent: true },
+      relationships: {
+        parent: { data: { type: 'item', id: '0' } },
+        children: {
+          data: [
+            {type: 'item', id: '1'},
+            {type: 'item', id: '4'},
+          ]
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '1',
+      attributes: { isParent: true },
+      relationships: {
+        parent: { data: { type: 'item', id: '0' } },
+        children: {
+          data: [
+            {type: 'item', id: '2'},
+            {type: 'item', id: '3'},
+          ]
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '2',
+      attributes: { isParent: false },
+      relationships: {
+        parent: { data: { type: 'item', id: '1' } },
+        children: {
+          data: []
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '3',
+      attributes: { isParent: false },
+      relationships: {
+        parent: { data: { type: 'item', id: '1' } },
+        children: {
+          data: []
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '4',
+      attributes: { isParent: true },
+      relationships: {        parent: { data: { type: 'item', id: '0' } },
+        children: {
+          data: [
+            {type: 'item', id: '5'},
+            {type: 'item', id: '6'},
+          ]
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '5',
+      attributes: { isParent: false },
+      relationships: {
+        parent: { data: { type: 'item', id: '4' } },
+        children: {
+          data: []
+        }
+      }
+    },
+    {
+      type: 'item',
+      id: '6',
+      attributes: { isParent: false },
+      relationships: {
+        parent: { data: { type: 'item', id: '4' } },
+        children: {
+          data: []
+        }
+      }
+    },
+  ]
+}
+
+export default Ember.Route.extend({
+
+  model () {
+    const store = this.get('store')
+
+    store.push(payload)
+
+    return store.peekRecord('item', '0')
+  }
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,56 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.the-item {
+  margin: 4px;
+  padding: 1em;
+  border: 1px solid black;
+  display: flex;
+}
+
+.the-item-title {
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 100px;
+}
+
+.the-item .dragSortList {
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+
+.the-item .dragSortList.-isExpanded {
+  padding-top: 55px;
+}
+
+.the-item .dragSortList.-isDragging {
+  outline: 2px dashed black;
+  background-color: deepskyblue;
+}
+
+.the-item .dragSortList.-isExpanded.-isDraggingOver:before {
+  top: 15px;
+}
+
+.the-item {
+  background-color : #FFD0E9;
+}
+.the-item .the-item {
+  background-color: #FFAAD7;
+}
+
+.the-item .the-item .the-item {
+  background-color: #FF8CC9;
+}
+.the-item .the-item .the-item .the-item {
+  background-color: #FF74BD;
+}
+.the-item .the-item .the-item .the-item .the-item {
+  background-color: #FF60B4;
+}
+.the-item .the-item .the-item .the-item .the-item .the-item {
+  background-color: #FF50AD;
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,4 @@
+{{the-item
+  item = model
+  dragEndAction = (action 'dragEnd')
+}}
diff --git a/templates.components.the-item.hbs b/templates.components.the-item.hbs
@@ -0,0 +1,16 @@
+<p class = "the-item-title">
+  {{item.id}}
+</p>
+
+{{#drag-sort-list
+  items               = item.children
+  group               = group
+  dragEndAction       = dragEndAction
+  as |child|
+}}
+  {{the-item
+    item          = child
+    group         = group
+    dragEndAction = dragEndAction
+  }}
+{{/drag-sort-list}}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,20 @@
+{
+  "version": "0.12.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.12.0",
+    "ember-template-compiler": "2.12.0",
+    "ember-testing": "2.12.0"
+  },
+  "addons": {
+    "ember-data": "2.12.1",
+    "ember-drag-sort": "1.0.2"
+  }
+}