docs(examples): re-enable simple sortable, with many comments

Author: cormacrelf

packages/angular-skyhook-card-list/src/card-renderer.directive.ts

@@ -81,7 +81,7 @@ export class CardRendererDirective<Data> implements OnInit, OnDestroy {
         },
         endDrag: monitor => {
             const item = monitor.getItem();
-            if (item) {
+            if (item && !monitor.didDrop()) {
                 this.spec && this.spec.endDrag && this.spec.endDrag(item);
             }
         }

packages/examples/src/app/app.component.html

@@ -78,9 +78,9 @@ <h3>Sortable</h3>
           <li>
             <a [routerLink]="['sortable', 'kanban']" routerLinkActive="active">Kanban board</a>
           </li>
-          <!-- <li> -->
-          <!--   <a [routerLink]="['sortable', 'simple']" routerLinkActive="active">Ad&#45;hoc sharing</a> -->
-          <!-- </li> -->
+          <li>
+            <a [routerLink]="['sortable', 'simple']" routerLinkActive="active">Simple list</a>
+          </li>
         </ul>
       </section>
     </nav>

packages/examples/src/app/sortable/simple/container.component.ts

@@ -1,27 +1,16 @@
-import { Component, ViewChild, ElementRef } from "@angular/core";
-import { SkyhookDndService } from "angular-skyhook";
-import { DraggedItem, SharedSortableService, Size } from "angular-skyhook-card-list";
+import { Component } from "@angular/core";
 
 @Component({
     selector: 'simple-sortable-container',
     template:
     `
+    <p> Note: uses unreleased code. </p>
+
+    <p> This example is like the 'Basic Sortable', except you don't have to
+    write a complicated hover function. You can focus on the model data. </p>
+
     <app-simple-sortable></app-simple-sortable>
     `
 })
 export class ContainerComponent {
-    id = 1000;
-    source = this.dnd.dragSource<DraggedItem<any>>("SIMPLE", {
-        beginDrag: monitor => {
-            return {
-                data: { id: this.id++, name: "whatever" },
-                type: "SIMPLE",
-                index: 0,
-                listId: "somewhere EXTERNAL",
-                size: new Size(0,0),
-                hover: { index: 0, listId: "somewhere EXTERNAL" }
-            }
-        }
-    });
-    constructor(private dnd: SkyhookDndService) { }
 }

packages/examples/src/app/sortable/simple/simple.component.scss

@@ -0,0 +1,8 @@
+.flex { display: flex; }
+.flex > * { flex-grow: 1; flex-shrink: 0; min-width: 0; }
+.card { min-width: 0; width: 100%; max-width: 300px; margin: 4px; border: 1px dashed #333; }
+.card { cursor: move; }
+pre { margin: 0; }
+.placeholder pre { opacity: 0.4; background: #eee; }
+.list--right pre { color: #a70000; }
+.list--right pre { background: rgba(255, 0, 0, 0.1); }

packages/examples/src/app/sortable/simple/simple.component.ts

@@ -1,7 +1,7 @@
-import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { Component } from "@angular/core";
 import * as faker from 'faker';
 import { SortableSpec, DraggedItem } from "angular-skyhook-card-list";
-import { BehaviorSubject, combineLatest } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 
 interface SimpleData {
     id: number;
@@ -10,36 +10,31 @@ interface SimpleData {
 
 @Component({
     selector: 'app-simple-sortable',
-    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['./simple.component.scss'],
     template: `
+    <!-- this thing will make a list for you, using simpleSpec.getList(), and the cardTemplate provided. -->
     <skyhook-card-list class="list"
         cardListType="SIMPLE"
         cardListId="simple-demo"
         [cardListSpec]="simpleSpec">
+
         <ng-template cardTemplate let-context>
+            <!-- cardRenderer configures a DragSource for you, but you have to attach it. -->
             <div class="card"
                 [cardRenderer]="context"
                 #render="cardRenderer"
                 [class.placeholder]="render.isDragging$|async"
-                [dragSource]="render.source">
+                [dragSource]="render.source"> <!-- <<< attached here! -->
+
                 <pre>{{ render.data.name | json }}</pre>
             </div>
         </ng-template>
     </skyhook-card-list>
     `,
-    styles: [`
-        .flex { display: flex; }
-        .flex > * { flex-grow: 1; flex-shrink: 0; min-width: 0; }
-        .card { min-width: 0; width: 100%; max-width: 300px; margin: 4px; border: 1px dashed #333; }
-        .card { cursor: move; }
-        pre { margin: 0; }
-        .placeholder pre { opacity: 0.4; background: #eee; }
-        .list--right pre { color: #a70000; }
-        .list--right pre { background: rgba(255, 0, 0, 0.1); }
-    `]
 })
 export class SimpleComponent {
 
+    // you need data types that have a unique value, like SimpleData.id
     list: SimpleData[] = [
         { id: 1, name: faker.name.firstName() },
         { id: 2, name: faker.name.firstName() },
@@ -48,26 +43,39 @@ export class SimpleComponent {
         { id: 5, name: faker.name.firstName() },
     ];
 
+    // BehaviorSubject is great for simple pieces of changing state.
+    // It will happily replay the latest value to new subscribers, and behaves a bit
+    // like an @ngrx/store does.
     list$ = new BehaviorSubject(this.list);
 
     move(item: DraggedItem<SimpleData>) {
+        // shallow clone the list
+        // do this so we can avoid overwriting our 'saved' list.
         const temp = this.list.slice(0);
+        // delete where it was previously
         temp.splice(item.index, 1);
+        // add it back in at the new location
         temp.splice(item.hover.index, 0, item.data);
-        this.list$.next(temp);
         return temp;
     }
 
     simpleSpec: SortableSpec<SimpleData> = {
+        // required.
         trackBy: x => x.id,
-        getList: _ => this.list$,
+        // required. MUST return an Observable.
+        // conceptually, this.list$ is in flux, but this.list is the 'saved' version.
+        getList: _listId => this.list$,
         hover: (item) => {
-            this.move(item);
+            // fire off a new list$ but don't save yet
+            this.list$.next(this.move(item));
         },
         drop: (item) => {
+            // 'save the changes'
             this.list = this.move(item);
+            this.list$.next(this.list);
         },
         endDrag: item => {
+            // revert
             this.list$.next(this.list);
         }
     }