[WIP] Update dummy examples

lvegerano · lvegerano · commit ecfe1ba7f5b3 · 2020-03-13T08:28:51.000-05:00
diff --git a/addon/components/sortable-js.hbs b/addon/components/sortable-js.hbs
@@ -2,9 +2,10 @@
   <Element
     class="ember-sortable-js"
     {{did-insert this.didInsert}}
+    {{did-update this.setList @items}}
     {{did-update this.setOptions @options}}
     ...attributes
   >
-    {{yield this.internalList}}
+    {{yield this.mappedList}}
   </Element>
 {{/let}}
diff --git a/addon/components/sortable-js.js b/addon/components/sortable-js.js
@@ -9,6 +9,7 @@ import { inject as service } from '@ember/service';
 
 export default class SortableJsComponent extends Component {
   @service dragStore;
+
   @tracked list = [];
 
   #sortableContainer = null;
@@ -38,8 +39,12 @@ export default class SortableJsComponent extends Component {
   }
 
   get internalList() {
+    return [...this.list];
+  }
+
+  get mappedList() {
     // fix identity diffing
-    return this.list.map((item, i) => ({ id: i += 1, item }))
+    return this.internalList.map((item, i) => ({ id: i += 1, value: item }))
   }
 
   @action
@@ -62,20 +67,25 @@ export default class SortableJsComponent extends Component {
 
     next(this, () => {
       this.#sortableInstance = Sortable.create(element, options);
-      this.list = [...(this.args.items || [])];
       this.setupEventHandlers();
       this.setupInternalEventHandlers();
+      this.setList();
     });
   }
 
+  @action
+  setList() {
+    this.list = [...(this.args.items || [])];
+  }
+
   willDestroy() {
     this.#sortableInstance.destroy();
   }
 
   onUpdate(evt) {
     const {
-      oldDraggableIndex,
       newDraggableIndex,
+      oldDraggableIndex,
     } = evt;
 
     this.list = move(this.list, oldDraggableIndex, newDraggableIndex);
@@ -87,12 +97,15 @@ export default class SortableJsComponent extends Component {
       oldDraggableIndex,
     } = evt;
 
-    this.list = removeFrom(this.list, oldDraggableIndex);
+    if (evt.pullMode !== 'clone') {
+      this.list = removeFrom(this.list, oldDraggableIndex);
+    }
+
     this.args?.onRemove?.(evt);
   }
 
   onAdd(evt) {
-    // evt.item.remove(); // without this DOM is wrong
+    evt.item.remove(); // without this DOM is wrong
     const {
       oldDraggableIndex,
       newDraggableIndex,
diff --git a/tests/dummy/app/controllers/shared.js b/tests/dummy/app/controllers/shared.js
@@ -1,15 +1,64 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 
+class Employee {
+  @tracked id;
+  @tracked name;
+  @tracked type;
+
+  constructor(id, { name, type }) {
+    this.id = id;
+    this.name = name;
+    this.type = type;
+  }
+}
+
 export default class SharedController extends Controller {
-  @tracked listA = [];
+  @tracked list = [];
+  @tracked devSort = [1, 2, 3];
+  @tracked pmSort = [1, 2, 3];
+
+  constructor() {
+    super(...arguments);
+    setTimeout(() => {
+      const all = [
+        { name: 'Luis', type: 'dev' },
+        { name: 'Jaden', type: 'dev' },
+        { name: 'Gustavo', type: 'dev' },
+        { name: 'Lance', type: 'pm' },
+        { name: 'Britni', type: 'pm' },
+        { name: 'Kelly', type: 'pm' }
+      ];
+      this.list = all.map((person, i) => new Employee(i += 1, person));
+    }, 5000);
+  }
+
+  get devList() {
+    return this.list.filter(employee => employee.type === 'dev');
+  }
+
+  get sortedDevList() {
+    return [...this.devList].sort((a, b) => a.id - b.id);
+  }
+
+  get pmList() {
+    return this.list.filter(employee => employee.type === 'pm');
+  }
+
+  get sortedPmList() {
+    return [...this.pmList].sort((a, b) => a.id - b.id);
+  }
+
+  onSort(evt) {
+    console.log('*** Action *** - onSort', evt);
+  }
 
-  onAdd() {
-    console.log('*** Action *** - onAdd');
+  onAdd(evt) {
+    console.log('*** Action *** - onAdd', evt);
   }
 
-  onRemove() {
-    console.log('*** Action *** - onRemove');
+  onRemove(evt) {
+    console.log('*** Action *** - onRemove', evt);
   }
 
   onEnd(evt) {
diff --git a/tests/dummy/app/templates/clone.hbs b/tests/dummy/app/templates/clone.hbs
@@ -8,71 +8,39 @@
   <div class="col">
     <SortableJs
       class="list-group"
+      @items={{array "one-a" "two-a" "three-a" "four-a" "five-a"}}
       @options={{hash
         animation=150
         ghostClass="ghost-class"
         group=(hash name="shared" pull="clone")
       }}
       @onClone={{fn this.onClone}}
+      as |list|
     >
-      <div data-testid="one" class="list-group-item">Item 1</div>
-      <div data-testid="two" class="list-group-item">Item 2</div>
-      <div data-testid="three" class="list-group-item">Item 3</div>
-      <div data-testid="four" class="list-group-item">Item 4</div>
-      <div data-testid="five" class="list-group-item">Item 5</div>
+      {{log 'running a' list}}
+      {{#each list as |item index| }}
+        <div data-list-item={{index}} class="list-group-item">{{item.item}}</div>
+      {{/each}}
     </SortableJs>
     <br>
     <SortableJs
       class="list-group"
+      @items={{array "one-b" "two-b" "three-b" "four-b" "five-b"}}
       @options={{hash
         animation=150
         ghostClass="ghost-class"
         group=(hash name="shared" pull="clone")
       }}
       @onClone={{fn this.onClone}}
+      as |list|
     >
-      <div data-testid="one" class="list-group-item bg-yellow">Item 1</div>
-      <div data-testid="two" class="list-group-item bg-yellow">Item 2</div>
-      <div data-testid="three" class="list-group-item bg-yellow">Item 3</div>
-      <div data-testid="four" class="list-group-item bg-yellow">Item 4</div>
-      <div data-testid="five" class="list-group-item bg-yellow">Item 5</div>
+      {{log 'running b' list}}
+      {{#each list as |item index| }}
+        <div data-list-item={{index}} class="list-group-item bg-yellow">{{item.item}}</div>
+      {{/each}}
     </SortableJs>
   </div>
   <div class="col">
-    <pre>
-      <code>
-        &lt;SortableJs
-          class="list-group"
-          @options=&#123;&#123;hash
-            animation=150
-            ghostClass="ghost-class"
-            group=(hash name="shared" pull="clone")
-          &#125;&#125;
-          @onRemove=&#123;&#123;fn this.onRemove&#125;&#125;
-        &gt;
-          &lt;div class="list-group-item">Item 1&lt;/div&gt;
-          &lt;div class="list-group-item">Item 2&lt;/div&gt;
-          &lt;div class="list-group-item">Item 3&lt;/div&gt;
-          &lt;div class="list-group-item">Item 4&lt;/div&gt;
-          &lt;div class="list-group-item">Item 5&lt;/div&gt;
-        &lt;/SortableJs&gt;
-
-        &lt;SortableJs
-          class="list-group"
-          @options=&#123;&#123;hash
-            animation=150
-            ghostClass="ghost-class"
-            group=(hash name="shared" pull="clone")
-          &#125;&#125;
-          @onAdd=&#123;&#123;fn this.onAdd&#125;&#125;
-        &gt;
-          &lt;div class="list-group-item">Item 1&lt;/div&gt;
-          &lt;div class="list-group-item">Item 2&lt;/div&gt;
-          &lt;div class="list-group-item">Item 3&lt;/div&gt;
-          &lt;div class="list-group-item">Item 4&lt;/div&gt;
-          &lt;div class="list-group-item">Item 5&lt;/div&gt;
-        &lt;/SortableJs&gt;
-      </code>
-    </pre>
+    <div class="clone-gist"></div>
   </div>
 </div>
diff --git a/tests/dummy/app/templates/disable.hbs b/tests/dummy/app/templates/disable.hbs
@@ -5,54 +5,43 @@
   </div>
 </div>
 <div class="row">
-  <div class="col">
+    <div class="col-1">
     <SortableJs
       class="list-group"
-      @options={{hash animation=150 ghostClass="ghost-class" group="shared" sort=false}}
+      @items={{array "one-a" "two-a" "three-a" "four-a" "five-a"}}
+      @options={{hash
+        animation=150
+        ghostClass="ghost-class"
+        group=(hash name="shared" pull="clone")
+      }}
+      @onClone={{this.onClone}}
+      as |list|
     >
-      <div data-testid="one" class="list-group-item">Item 1</div>
-      <div data-testid="two" class="list-group-item">Item 2</div>
-      <div data-testid="three" class="list-group-item">Item 3</div>
-      <div data-testid="four" class="list-group-item">Item 4</div>
-      <div data-testid="five" class="list-group-item">Item 5</div>
+      {{#each list as |item index| }}
+        <div data-list-item={{index}} class="list-group-item">{{item.item}}</div>
+      {{/each}}
     </SortableJs>
+    </div>
     <br>
+    <div class="col-1">
     <SortableJs
       class="list-group"
-      @options={{hash animation=150 ghostClass="ghost-class" group="shared" sort=false}}
+      @items={{array "one-b" "two-b" "three-b" "four-b" "five-b"}}
+      @options={{hash
+        animation=150
+        ghostClass="ghost-class"
+        group=(hash name="shared" pull="clone")
+      }}
+      @onClone={{this.onClone}}
+      as |list|
     >
-      <div data-testid="one" class="list-group-item bg-yellow">Item 1</div>
-      <div data-testid="two" class="list-group-item bg-yellow">Item 2</div>
-      <div data-testid="three" class="list-group-item bg-yellow">Item 3</div>
-      <div data-testid="four" class="list-group-item bg-yellow">Item 4</div>
-      <div data-testid="five" class="list-group-item bg-yellow">Item 5</div>
+      {{#each list as |item index| }}
+        <div data-list-item={{index}} class="list-group-item bg-yellow">{{item.item}}</div>
+      {{/each}}
     </SortableJs>
-  </div>
-  <div class="col">
-    <pre>
-      <code>
-        &lt;SortableJs
-          class="list-group"
-          @options=&#123;&#123;hash animation=150 ghostClass="ghost-class" group="shared" sort=fasle&#125;&#125;
-        &gt;
-          &lt;div class="list-group-item">Item 1&lt;/div&gt;
-          &lt;div class="list-group-item">Item 2&lt;/div&gt;
-          &lt;div class="list-group-item">Item 3&lt;/div&gt;
-          &lt;div class="list-group-item">Item 4&lt;/div&gt;
-          &lt;div class="list-group-item">Item 5&lt;/div&gt;
-        &lt;/SortableJs&gt;
+    </div>
+</div>
 
-        &lt;SortableJs
-          class="list-group"
-          @options=&#123;&#123;hash animation=150 ghostClass="ghost-class" group="shared" sort=fasle&#125;&#125;
-        &gt;
-          &lt;div class="list-group-item">Item 1&lt;/div&gt;
-          &lt;div class="list-group-item">Item 2&lt;/div&gt;
-          &lt;div class="list-group-item">Item 3&lt;/div&gt;
-          &lt;div class="list-group-item">Item 4&lt;/div&gt;
-          &lt;div class="list-group-item">Item 5&lt;/div&gt;
-        &lt;/SortableJs&gt;
-      </code>
-    </pre>
-  </div>
+<div class="col">
+  <div class="delete-gist"></div>
 </div>
diff --git a/tests/dummy/app/templates/shared.hbs b/tests/dummy/app/templates/shared.hbs
@@ -8,33 +8,36 @@
   <div class="col">
     <SortableJs
       class="list-group"
-      @items={{array "one-a" "two-a" "three-a" "four-a" "five-a"}}
+      @items={{this.sortedDevList}}
       @options={{hash animation=150 ghostClass="ghost-class" group="shared"}}
       @onRemove={{this.onRemove}}
       @onEnd={{this.onEnd}}
+      @onSort={{this.onSort}}
       as |list|
     >
       {{log 'running a' list}}
-      {{#each list as |item index| }}
-        <div data-list-item={{index}} class="list-group-item">{{item.item}}</div>
+      {{#each list as |item| }}
+        <div data-record-id={{item.value.id}} class="list-group-item">{{item.value.name}}</div>
       {{/each}}
     </SortableJs>
-    <br>
+  </div>
+  <div class="col">
     <SortableJs
       class="list-group"
-      @items={{array "one-b" "two-b" "three-b" "four-b" "five-b"}}
+      @items={{this.sortedPmList}}
       @options={{hash animation=150 ghostClass="ghost-class" group="shared"}}
       @onAdd={{fn this.onAdd}}
+      @onEnd={{this.onEnd}}
+      @onSort={{this.onSort}}
       as |list|
     >
       {{log 'running b' list}}
-      {{#each list as |item index| }}
-        <div data-list-item={{index}} class="list-group-item bg-yellow">{{item.item}}</div>
+      {{#each list as |item| }}
+        <div data-record-id={{item.value.id}} class="list-group-item bg-yellow">{{item.value.name}}</div>
       {{/each}}
     </SortableJs>
   </div>
   <div class="col">
-    <h1>Code</h1>
     <script type="application/javascript" src="https://gist.github.com/lvegerano/b3118b59c5bb32fe928f957444ef6203.js"></script>
   </div>
 </div>
