docs(examples): simple sortable rewritten simply

Author: cormacrelf

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

@@ -1,56 +1,27 @@
 import { Component, ViewChild, ElementRef } from "@angular/core";
 import { SkyhookDndService } from "angular-skyhook";
-import { DraggedItem, SharedSortableService } from "angular-skyhook-card-list";
+import { DraggedItem, SharedSortableService, Size } from "angular-skyhook-card-list";
 
 @Component({
     selector: 'simple-sortable-container',
     template:
     `
-    <div [dragSource]="source">
-        <input #text value="drag me in" />
-    </div>
     <app-simple-sortable></app-simple-sortable>
     `
 })
 export class ContainerComponent {
     id = 1000;
-    @ViewChild('text') text: ElementRef<HTMLInputElement>;
     source = this.dnd.dragSource<DraggedItem<any>>("SIMPLE", {
         beginDrag: monitor => {
-            // TODO: provide static method for implementing beginDrag
             return {
-                data: {
-                    id: this.id++,
-                    name: this.text.nativeElement.value
-                },
+                data: { id: this.id++, name: "whatever" },
                 type: "SIMPLE",
                 index: 0,
-                isCopy: false,
-                // TODO: allow string IDs
-                listId: -1,
-                // TODO: remove size
-                size: { width: 0, height: 0, style: () => ({ width: '', height: '' }) },
-                hover: { index: 1, listId: -1 }
+                listId: "somewhere EXTERNAL",
+                size: new Size(0,0),
+                hover: { index: 0, listId: "somewhere EXTERNAL" }
             }
         }
     });
-    constructor(private dnd: SkyhookDndService, private sortable: SharedSortableService<any>) {
-    }
-    ngOnInit() {
-        this.sortable.register("SIMPLE", {
-            trackBy: (data) => data.id,
-            // copy: (item) => {
-            //     return item.listId === 'me';
-            // },
-            // clone: (data: { name: string; }) => {
-            //     return { name: data.name + ' cloned' };
-            // },
-            // canDrag: (data, listId) => {
-            //     return listId === 'me';
-            // },
-            // canDrop: (item) => {
-            //     return item.hover.listId === 'you';
-            // }
-        });
-    }
+    constructor(private dnd: SkyhookDndService) { }
 }

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

@@ -1,57 +1,75 @@
 import { Component, ChangeDetectionStrategy } from "@angular/core";
 import * as faker from 'faker';
+import { SortableSpec, DraggedItem } from "angular-skyhook-card-list";
+import { BehaviorSubject, combineLatest } from "rxjs";
+
+interface SimpleData {
+    id: number;
+    name: string;
+}
 
 @Component({
     selector: 'app-simple-sortable',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-    <ng-template #card cardTemplate let-context>
-        <div [cardRenderer]="context"
-             #render="cardRenderer"
-             [class.dragging]="render.isDragging$|async"
-             [dragSource]="render.source">
-
-            <div class="card">
+    <skyhook-card-list class="list"
+        cardListType="SIMPLE"
+        cardListId="simple-demo"
+        [cardListSpec]="simpleSpec">
+        <ng-template cardTemplate let-context>
+            <div class="card"
+                [cardRenderer]="context"
+                #render="cardRenderer"
+                [class.placeholder]="render.isDragging$|async"
+                [dragSource]="render.source">
                 <pre>{{ render.data.name | json }}</pre>
             </div>
-
-        </div>
-    </ng-template>
-
-    <div class="flex">
-        <skyhook-card-list class="list" cardListType="SIMPLE" cardListId="me" [(shared)]="list" [template]="card">
-        </skyhook-card-list>
-        <skyhook-card-list class="list list--right" cardListType="SIMPLE" cardListId="you" [(shared)]="list2" [template]="card">
-        </skyhook-card-list>
-    </div>
-    <div class="flex">
-        <pre>{{list|json}}</pre>
-        <pre>{{list2|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; }
-        .dragging pre { opacity: 0.4; background: #eee; }
+        .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 {
 
-    list = [
+    list: SimpleData[] = [
         { id: 1, name: faker.name.firstName() },
         { id: 2, name: faker.name.firstName() },
         { id: 3, name: faker.name.firstName() },
         { id: 4, name: faker.name.firstName() },
         { id: 5, name: faker.name.firstName() },
     ];
 
-    list2 = [
-        { id: 11, name: faker.name.firstName() },
-        { id: 12, name: faker.name.firstName() },
-        { id: 13, name: faker.name.firstName() },
-    ];
+    list$ = new BehaviorSubject(this.list);
+
+    move(item: DraggedItem<SimpleData>) {
+        const temp = this.list.slice(0);
+        temp.splice(item.index, 1);
+        temp.splice(item.hover.index, 0, item.data);
+        this.list$.next(temp);
+        return temp;
+    }
+
+    simpleSpec: SortableSpec<SimpleData> = {
+        trackBy: x => x.id,
+        getList: _ => this.list$,
+        hover: (item) => {
+            this.move(item);
+        },
+        drop: (item) => {
+            this.list = this.move(item);
+        },
+        endDrag: item => {
+            this.list$.next(this.list);
+        }
+    }
+
 }