wip(card-list): make getList() optional, allow setting children manually

vastly simplifies the 'simple' example. now it's actually simple.

Author: cormacrelf

packages/angular-skyhook-card-list/src/card-list.component.ts

@@ -2,6 +2,7 @@ import {
     Component,
     Input,
     TemplateRef,
+    ChangeDetectorRef,
     ChangeDetectionStrategy,
     ContentChildren,
     QueryList,
@@ -25,7 +26,7 @@ import { CardListDirective } from './card-list.directive';
     selector: "skyhook-card-list",
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-    <ng-container *ngFor="let card of children$ | async;
+    <ng-container *ngFor="let card of children;
                           let i = index;
                           trackBy: trackById" >
         <ng-container *ngTemplateOutlet="template;
@@ -64,8 +65,9 @@ export class CardListComponent<Data>
     constructor(
         dnd: SkyhookDndService,
         el: ElementRef<HTMLElement>,
+        cdr: ChangeDetectorRef,
     ) {
-        super(dnd, el);
+        super(dnd, el, cdr);
     }
 
     /** @ignore */

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

@@ -7,6 +7,7 @@ import {
     AfterViewInit,
     ElementRef,
     SimpleChanges,
+    ChangeDetectorRef,
 } from '@angular/core';
 // @ts-ignore
 import { Subscription, Observable, BehaviorSubject } from "rxjs";
@@ -39,8 +40,7 @@ export class CardListDirective<Data> implements OnInit, OnChanges, OnDestroy, Af
         }
     }
 
-    /** @ignore */
-    private children?: Iterable<Data>;
+    @Input('cardListChildren') children?: Iterable<Data>;
     /** @ignore */
     private childrenSubject$ = new BehaviorSubject<Iterable<Data>>([]);
     /**
@@ -86,27 +86,31 @@ export class CardListDirective<Data> implements OnInit, OnChanges, OnDestroy, Af
     constructor(
         protected dnd: SkyhookDndService,
         protected el: ElementRef<HTMLElement>,
+        protected cdr: ChangeDetectorRef,
     ) {
     }
 
     private updateSubscription() {
-        const anyListId = (typeof this.listId !== 'undefined')
-            && (this.listId !== null);
+        const anyListId =
+            (typeof this.listId !== 'undefined') && (this.listId !== null);
         if (anyListId && this.spec) {
             if (this.listSubs) {
                 this.subs.remove(this.listSubs);
                 this.listSubs.unsubscribe();
             }
 
-            const cs$ = this.spec.getList(this.listId);
-            this.listSubs = cs$ && cs$.subscribe(l => {
-                if (l) {
-                    this.childrenSubject$.next(l);
-                    this.children = l;
-                }
-            });
-
-            this.subs.add(this.listSubs);
+            if (this.spec.getList)  {
+                const cs$ = this.spec.getList(this.listId);
+                this.listSubs = cs$ && cs$.subscribe(l => {
+                    if (l) {
+                        this.childrenSubject$.next(l);
+                        this.children = l;
+                        this.cdr.markForCheck();
+                    }
+                });
+
+                this.subs.add(this.listSubs);
+            }
         }
     }
 

packages/angular-skyhook-card-list/src/types.ts

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 
 export interface SortableSpec<Data, Type = string|symbol> {
     trackBy: (data: Data) => any;
-    getList: (listId: any) => Observable<Iterable<Data> | undefined>;
+    getList?: (listId: any) => Observable<Iterable<Data> | undefined>;
     canDrag?: (data: Data, listId: any) => boolean;
     canDrop?: (item: DraggedItem<Data, Type>) => boolean;
     isDragging?: (ground: Data, inFlight: DraggedItem<Data, Type>) => boolean;

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

@@ -4,6 +4,7 @@ import { Component } from "@angular/core";
     selector: 'simple-sortable-container',
     template:
     `
+    <app-example-link path="sortable/simple"></app-example-link>
     <p> Note: uses unreleased code. </p>
 
     <p> This example is like the 'Basic Sortable', except you don't have to

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

@@ -1,8 +1,18 @@
-.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); }
+.person {
+    min-width: 0;
+    width: 100%;
+    max-width: 300px;
+    margin: 4px;
+    border: 1px dashed #333;
+    cursor: move;
+}
+pre {
+    margin: 0;
+    color: #1111a7;
+    background: rgba(30, 30, 255, 0.1);
+}
+.person--placeholder pre {
+    opacity: 0.4;
+    background: #eee;
+}
+

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

@@ -16,14 +16,15 @@ interface SimpleData {
     <skyhook-card-list class="list"
         cardListType="SIMPLE"
         cardListId="simple-demo"
+        [cardListChildren]="tempList"
         [cardListSpec]="simpleSpec">
 
         <ng-template cardTemplate let-context>
             <!-- cardRenderer configures a DragSource for you, but you have to attach it. -->
-            <div class="card"
+            <div class="person"
                 [cardRenderer]="context"
                 #render="cardRenderer"
-                [class.placeholder]="render.isDragging$|async"
+                [class.person--placeholder]="render.isDragging$|async"
                 [dragSource]="render.source"> <!-- <<< attached here! -->
 
                 <pre>{{ render.data.name | json }}</pre>
@@ -43,10 +44,8 @@ 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);
+    // for holding modifications while dragging
+    tempList: SimpleData[] = this.list;
 
     move(item: DraggedItem<SimpleData>) {
         // shallow clone the list
@@ -62,21 +61,14 @@ export class SimpleComponent {
     simpleSpec: SortableSpec<SimpleData> = {
         // required.
         trackBy: x => x.id,
-        // required. MUST return an Observable.
-        // conceptually, this.list$ is in flux, but this.list is the 'saved' version.
-        getList: _listId => this.list$,
-        hover: (item) => {
-            // fire off a new list$ but don't save yet
-            this.list$.next(this.move(item));
+        hover: item => { // don't save yet
+            this.tempList = this.move(item)
         },
-        drop: (item) => {
-            // 'save the changes'
-            this.list = this.move(item);
-            this.list$.next(this.list);
+        drop: item => { // save the changes
+            this.tempList = this.list = this.move(item);
         },
-        endDrag: item => {
-            // revert
-            this.list$.next(this.list);
+        endDrag: item => { // revert
+            this.tempList = this.list;
         }
     }