feat: items can now have a pre-defined order (#17)

Hesam Bahrami · web-flow · commit 0fbdf7d62a16 · 2020-08-09T15:18:02.000+01:00
diff --git a/demo.gif b/demo.gif
diff --git a/dev/index.html b/dev/index.html
@@ -17,6 +17,7 @@ <h1>Samples</h1>
     <li><a href="server-rendered-list.html" target="_blank">Server-rendered List</a></li>
     <li><a href="server-rendered-multiple-lists.html" target="_blank">Server-rendered Multiple Lists</a></li>
     <li><a href="data-driven-list.html" target="_blank">Data-driven List</a></li>
+    <li><a href="ordered-data-driven-list.html" target="_blank">Ordered Data-driven List</a></li>
     <li><a href="mapped-data-driven-list.html" target="_blank">Mapped Data-driven List</a></li>
     <li><a href="styling-data-driven-list.html" target="_blank">Styling</a></li>
   </ol>
diff --git a/dev/mapped-data-driven-list.html b/dev/mapped-data-driven-list.html
@@ -23,17 +23,15 @@ <h1>A mapped data-driven list</h1>
 <script>
   (function() {
     const data = [
-      { item_id: 1, item_title: 'One' },
-      { item_id: 11, item_title: 'One-One', item_parent: 1 },
-      { item_id: 2, item_title: 'Two' },
-      { item_id: 3, item_title: 'Three' },
-      { item_id: 1121, item_title: 'One-One-Two-One', item_parent: 112 },
-      { item_id: 1122, item_title: 'One-One-Two-Two', item_parent: 112 },
-      { item_id: 1123, item_title: 'One-One-Two-Three', item_parent: 112 },
-      { item_id: 12, item_title: 'One-Two', item_parent: 1 },
-      { item_id: 111, item_title: 'One-One-One', item_parent: 11 },
-      { item_id: 112, item_title: 'One-One-Two', item_parent: 11 },
-      { item_id: 113, item_title: 'One-One-Three', item_parent: 11 },
+      { item_id: 1, item_title: 'One', position: 5 },
+      { item_id: 11, item_title: 'One-One', item_parent: 1, position: 1 },
+      { item_id: 2, item_title: 'Two', position: 1 },
+      { item_id: 3, item_title: 'Three', position: 2 },
+      { item_id: 1121, item_title: 'One-One-Two-One', item_parent: 112, position: 2 },
+      { item_id: 1123, item_title: 'One-One-Two-Three', item_parent: 112, position: 4 },
+      { item_id: 12, item_title: 'One-Two', item_parent: 1, position: 2 },
+      { item_id: 111, item_title: 'One-One-One', item_parent: 11, position: 1 },
+      { item_id: 112, item_title: 'One-One-Two', item_parent: 11, position: 2 },
     ]
 
     new NestedSort({
@@ -47,6 +45,7 @@ <h1>A mapped data-driven list</h1>
         id: 'item_id',
         parent: 'item_parent',
         text: 'item_title',
+        order: 'position',
       },
       el: '#draggable',
       droppingEdge: 5,
diff --git a/dev/ordered-data-driven-list.html b/dev/ordered-data-driven-list.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Nested Sort Ordered Data-Driven List Demo</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+  <link href="css/main.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="container">
+  <h1>An ordered data-driven list</h1>
+
+  <p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
+
+  <div id="draggable"></div>
+</div>
+
+<!-- Scripts -->
+<script src="../dist/nested-sort.umd.js"></script>
+<script>
+  (function() {
+    const data = [
+      { id: 1, text: 'One', order: 2 },
+      { id: 11, text: 'One-One', parent: 1, order: 3 },
+      { id: 2, text: 'Two', order: 1 },
+      { id: 3, text: 'Three', order: 3 },
+      { id: 4, text: 'Four', order: 5 },
+      { id: 5, text: 'Five', order: 4 },
+      { id: 12, text: 'One-Two', parent: 1, order: 1 },
+      { id: 111, text: 'One-One-One', parent: 11, order: 3 },
+      { id: 112, text: 'One-One-Two', parent: 11, order: 1 },
+      { id: 113, text: 'One-One-Three', parent: 11, order: 2 },
+    ]
+
+    new NestedSort({
+      actions: {
+        onDrop: function (data) {
+          console.log(data)
+        }
+      },
+      data: data,
+      el: '#draggable',
+      droppingEdge: 5,
+      listClassNames: ['nested-sort']
+    });
+  })();
+</script>
+</body>
+</html>
diff --git a/src/data-engine.js b/src/data-engine.js
@@ -38,14 +38,39 @@ class DataEngine {
     return prop
   }
 
+  isTopLevelItem(item) {
+    return !item.parent
+  }
+
   /**
    * @returns {object[]}
    */
   sortListItems() {
-    this.sortedData = [...this.data].sort((item1, item2) => {
-      if (!item1.parent && item2.parent) return -1
-      return (!item2.parent && item1.parent) ? 1 : 0;
-    });
+    const items = [...this.data]
+
+    const topLevelItems = items
+      .filter(a => this.isTopLevelItem(a))
+      .sort((a, b) => a.order && b.order ? a.order - b.order : 0)
+
+    const childItems = items
+      .filter(a => !this.isTopLevelItem(a))
+      .reduce((groups, item) => {
+        if (groups.hasOwnProperty(item.parent)) {
+          groups[item.parent].push(item)
+        } else {
+          groups[item.parent] = [item]
+        }
+        return groups
+      }, {})
+
+    Object.keys(childItems).forEach(parentId => {
+      childItems[parentId].sort((a, b) => a.order && b.order ? a.order - b.order : 0)
+    })
+
+    this.sortedData = [
+      ...topLevelItems,
+      ...Object.values(childItems).flat()
+    ]
 
     return this.sortedData
   }
@@ -166,10 +191,12 @@ class DataEngine {
     return Array.from(ul.querySelectorAll('li')).map(li => {
       const parentListItem = li.parentNode
       const parent = parentListItem.dataset.id
+      const order = Array.from(parentListItem.children).findIndex(item => item === li) + 1
 
       return {
         [this.getItemPropProxyName('id')]: li.dataset.id,
         [this.getItemPropProxyName('parent')]: parent,
+        [this.getItemPropProxyName('order')]: order,
       }
     })
   }
diff --git a/src/data-engine.test.js b/src/data-engine.test.js
