comp(sortable) improvements

.gitignore

@@ -31,6 +31,7 @@ npm-debug.log
 Thumbs.db
 
 
+/doc
 /demo/e2e/*.js
 /demo/e2e/*.map
 src/**/*.js

demo/src/app/components/+sortable/demos/complex-datamodel/complex-datamodel.component.html

@@ -1,23 +1,25 @@
 <div class="col-xs-6 col-md-3">
   <bs-sortable
     [(ngModel)]="itemObjectsLeft"
+    dropZoneGroup="complexDatamodel"
     fieldName="name"
     itemClass="sortable-item"
     itemActiveClass="sortable-item-active"
     placeholderItem="Drag here"
-    placeholderClass="sortable-item"
+    placeholderClass="sortable-item-placeholder"
     wrapperClass="sortable-wrapper"
   ></bs-sortable>
   <pre>{{ itemObjectsLeft | json }}</pre>
 </div>
 <div class="col-xs-6 col-md-3">
   <bs-sortable
     [(ngModel)]="itemObjectsRight"
+    dropZoneGroup="complexDatamodel"
     fieldName="name"
     itemClass="sortable-item"
     itemActiveClass="sortable-item-active"
     placeholderItem="Drag here"
-    placeholderClass="sortable-item"
+    placeholderClass="sortable-item-placeholder"
     wrapperClass="sortable-wrapper"
   ></bs-sortable>
   <pre>{{ itemObjectsRight | json }}</pre>

demo/src/app/components/+sortable/demos/custom-item-template/custom-item-template.html

@@ -1,25 +1,29 @@
-<template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></template>
+<template #itemTemplate let-item="item" let-index="index">
+  <div>{{index}}: {{item.name}}</div>
+  <div>
+    <a class="btn btn-default" *ngIf="item.url.startsWith('http')" [href]="item.url" target="_blank">know more</a>
+    <span *ngIf="!item.url.startsWith('http')">{{item.url}}</span>
+  </div>
+</template>
 
-<div class="col-xs-6 col-md-3">
-  <bs-sortable
-    [(ngModel)]="itemStringsLeft"
-    [itemTemplate]="itemTemplate"
-    itemClass="sortable-item"
-    itemActiveClass="sortable-item-active"
-    placeholderItem="Drag here"
-    placeholderClass="placeholderStyle"
-    wrapperClass="sortable-wrapper"
-  ></bs-sortable>
-  <pre>model: {{ itemStringsLeft | json }}</pre>
+<div class="col-xs-12 col-md-12">
+  <label><input type="checkbox" [(ngModel)]="disableItems"> disable items {{disabledItems | json}}</label><br>
+  <label><input type="checkbox" [(ngModel)]="fixDisabledItems"> fix disabled items on their positions</label>
 </div>
-<div class="col-xs-6 col-md-3">
+
+<div class="col-xs-12 col-md-12">
   <bs-sortable
-    [(ngModel)]="itemStringsRight"
-    itemClass="sortable-item"
+    [(ngModel)]="items"
+    [itemTemplate]="itemTemplate"
+    [isItemDisabled]="isItemDisabled"
+    [fixDisabledItems]="fixDisabledItems"
+    dropZoneGroup="customItemTemplate"
+    itemClass="sortable-item custom-item-template"
     itemActiveClass="sortable-item-active"
+    itemDisabledClass="sortable-item-disabled"
     placeholderItem="Drag here"
-    placeholderClass="sortable-item"
+    placeholderClass="sortable-item-placeholder"
     wrapperClass="sortable-wrapper"
   ></bs-sortable>
-  <pre>model: {{ itemStringsRight | json }}</pre>
+  <!--<pre>model: {{ items | json }}</pre>-->
 </div>

demo/src/app/components/+sortable/demos/custom-item-template/custom-item-template.ts

@@ -5,15 +5,38 @@ import { Component } from '@angular/core';
   templateUrl: './custom-item-template.html'
 })
 export class CustomItemTemplateDemoComponent {
-  public itemStringsLeft: any[] = [
-    'Windstorm',
-    'Bombasto',
-    'Magneta',
-    'Tornado'
+  public items: any[] = [
+    { name: 'Windstorm', url: 'http://comicvine.gamespot.com/windstorm/4005-10258/'},
+    { name: 'Mr. Nice', url: 'https://en.wikipedia.org/wiki/Mr._Nice' },
+    { name: 'Bombasto', url: 'no info' },
+    { name: 'Celeritas', url: 'http://eu.battle.net/d3/en/profile/Cyberlink-2400/hero/13514741' },
+    { name: 'Magneta', url: 'http://marvel.wikia.com/wiki/Magneta_(Earth-982)' },
+    { name: 'RubberMan', url: 'http://americanhorrorstory.wikia.com/wiki/Rubber_Man' },
+    { name: 'Dynama', url: 'https://en.wikipedia.org/wiki/Dynamo_(comics)' },
+    { name: 'Dr. IQ', url: 'http://www.imdb.com/title/tt0135089/' },
+    { name: 'Magma', url: 'https://en.wikipedia.org/wiki/Magma_(band)' },
+    { name: 'Tornado', url: 'https://en.wikipedia.org/wiki/Tornado' },
+    { name: 'Mr. O', url: 'no info' },
+    { name: 'Tomato', url: 'https://en.wikipedia.org/wiki/Tomato' }
   ];
 
-  public itemStringsRight: any[] = [
-    'Mr. O',
-    'Tomato'
-  ];
+  public fixDisabledItems: boolean = false;
+  public disabledItems: string[] = [ 'Windstorm', 'Tornado', 'Mr. O', 'Magneta' ];
+
+  public set disableItems(value: boolean) {
+    this._disableItems = value;
+    this.items
+      .filter((x: any) => this.disabledItems.indexOf(x.name) > -1)
+      .forEach((x: any) => x.disabled = value);
+  }
+
+  public get disableItems(): boolean {
+    return this._disableItems;
+  }
+
+  private _disableItems: boolean = false;
+
+  public isItemDisabled(item: any): boolean {
+    return item.disabled;
+  }
 }

demo/src/app/components/+sortable/demos/directives-usage/directives-usage.component.html

@@ -0,0 +1,21 @@
+<table
+  class="table table-striped"
+  [bsDropZone]="table"
+  ghostClassName="sortable-item-ghost"
+  [(items)]="rows"
+  (activeItemIndexChange)="activeItemIndex = $event"
+>
+  <thead>
+    <th *ngFor="let name of header">{{name}}</th>
+  </thead>
+  <tbody>
+    <tr bsDraggableElement *ngFor="let row of rows">
+      <td>{{row.id}}</td>
+      <td>{{row.company}}</td>
+      <td>{{row.contact}}</td>
+      <td>{{row.country}}</td>
+    </tr>
+  </tbody>
+</table>
+<pre>active item index: {{ activeItemIndex }}</pre>
+<pre>model: {{ rows | json }}</pre>

demo/src/app/components/+sortable/demos/directives-usage/directives-usage.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'directives-usage-demo',
+  templateUrl: './directives-usage.component.html'
+})
+export class DirectivesUsageDemoComponent {
+  public activeItemIndex: number = -1;
+  public header: string[] = ['ID', 'Company', 'Contact', 'Country'];
+  public rows: any[] = [
+    {
+      id: 1,
+      company: 'Alfreds Futterkiste',
+      contact: 'Maria Anders',
+      country: 'Germany'
+    },
+    {
+      id: 2,
+      company: 'Centro comercial Moctezuma',
+      contact: 'Francisco Chang',
+      country: 'Mexico'
+    },
+    {
+      id: 3,
+      company: 'Ernst Handel',
+      contact: 'Roland Mendel',
+      country: 'Austria'
+    },
+    {
+      id: 4,
+      company: 'Island Trading',
+      contact: 'Helen Bennett',
+      country: 'UK'
+    },
+    {
+      id: 5,
+      company: 'Laughing Bacchus Winecellars',
+      contact: 'Yoshi Tannamuri',
+      country: 'Canada'
+    },
+    {
+      id: 6,
+      company: 'Magazzini Alimentari Riuniti',
+      contact: 'Giovanni Rovelli',
+      country: 'Italy'
+    }
+  ];
+}

demo/src/app/components/+sortable/demos/index.ts

@@ -1,11 +1,15 @@
 import { ComplexDatamodelDemoComponent } from './complex-datamodel/complex-datamodel.component';
 import { SimpleItemsDemoComponent } from './simple-items/simple-items.component';
 import { CustomItemTemplateDemoComponent } from './custom-item-template/custom-item-template';
+import { OneWayDemoComponent } from './one-way/one-way.component';
+import { DirectivesUsageDemoComponent } from './directives-usage/directives-usage.component';
 
 export const DEMO_COMPONENTS = [
   SimpleItemsDemoComponent,
   ComplexDatamodelDemoComponent,
-  CustomItemTemplateDemoComponent
+  CustomItemTemplateDemoComponent,
+  OneWayDemoComponent,
+  DirectivesUsageDemoComponent
 ];
 
 export const DEMOS = {
@@ -20,5 +24,13 @@ export const DEMOS = {
   itemTemplate: {
     component: require('!!raw-loader?lang=typescript!./custom-item-template/custom-item-template.ts'),
     html: require('!!raw-loader?lang=markup!./custom-item-template/custom-item-template.html')
+  },
+  oneWay: {
+    component: require('!!raw-loader?lang=typescript!./one-way/one-way.component.ts'),
+    html: require('!!raw-loader?lang=markup!./one-way/one-way.component.html')
+  },
+  directivesUsage: {
+    component: require('!!raw-loader?lang=typescript!./directives-usage/directives-usage.component.ts'),
+    html: require('!!raw-loader?lang=markup!./directives-usage/directives-usage.component.html')
   }
 };

demo/src/app/components/+sortable/demos/one-way/one-way.component.html

@@ -0,0 +1,21 @@
+<div class="col-xs-6 col-md-3">
+  <bs-sortable
+    [(ngModel)]="itemStringsLeft"
+    dropZoneId="sortable1"
+    itemClass="sortable-item"
+    itemActiveClass="sortable-item-active"
+    placeholderItem="Oops, you can't drag here"
+    wrapperClass="sortable-wrapper"
+  ></bs-sortable>
+  <pre>model: {{ itemStringsLeft | json }}</pre>
+</div>
+<div class="col-xs-6 col-md-3">
+  <bs-sortable
+    [(ngModel)]="itemStringsRight"
+    [acceptFromZones]="['sortable1']"
+    itemClass="sortable-item"
+    itemActiveClass="sortable-item-active"
+    wrapperClass="sortable-wrapper"
+  ></bs-sortable>
+  <pre>model: {{ itemStringsRight | json }}</pre>
+</div>

demo/src/app/components/+sortable/demos/one-way/one-way.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'one-way-demo',
+  templateUrl: './one-way.component.html'
+})
+export class OneWayDemoComponent {
+  public itemStringsLeft: any[] = [
+    'Windstorm',
+    'Bombasto',
+    'Magneta',
+    'Tornado'
+  ];
+
+  public itemStringsRight: any[] = [
+    'Mr. O',
+    'Tomato'
+  ];
+}

demo/src/app/components/+sortable/demos/simple-items/simple-items.component.html

@@ -1,21 +1,35 @@
 <div class="col-xs-6 col-md-3">
   <bs-sortable
     [(ngModel)]="itemStringsLeft"
+    dropZoneGroup="simpleItems"
     itemClass="sortable-item"
     itemActiveClass="sortable-item-active"
     placeholderItem="Drag here"
-    placeholderClass="placeholderStyle"
+    placeholderClass="sortable-item-placeholder"
     wrapperClass="sortable-wrapper"
   ></bs-sortable>
   <pre>model: {{ itemStringsLeft | json }}</pre>
 </div>
 <div class="col-xs-6 col-md-3">
+  <bs-sortable
+    [(ngModel)]="itemStringsMiddle"
+    dropZoneGroup="simpleItems"
+    itemClass="sortable-item"
+    itemActiveClass="sortable-item-active"
+    placeholderItem="Drag here"
+    placeholderClass="sortable-item-placeholder"
+    wrapperClass="sortable-wrapper"
+  ></bs-sortable>
+  <pre>model: {{ itemStringsMiddle | json }}</pre>
+</div>
+<div class="col-md-3 hide-on-mobile">
   <bs-sortable
     [(ngModel)]="itemStringsRight"
+    dropZoneGroup="simpleItems"
     itemClass="sortable-item"
     itemActiveClass="sortable-item-active"
     placeholderItem="Drag here"
-    placeholderClass="sortable-item"
+    placeholderClass="sortable-item-placeholder"
     wrapperClass="sortable-wrapper"
   ></bs-sortable>
   <pre>model: {{ itemStringsRight | json }}</pre>

demo/src/app/components/+sortable/demos/simple-items/simple-items.component.ts

@@ -12,8 +12,11 @@ export class SimpleItemsDemoComponent {
     'Tornado'
   ];
 
-  public itemStringsRight: any[] = [
+  public itemStringsMiddle: any[] = [
     'Mr. O',
     'Tomato'
   ];
+
+  public itemStringsRight: any[] = [
+  ];
 }

demo/src/app/components/+sortable/docs/title.md

@@ -1 +1 @@
-The **sortable component** represents a list of items, with ability to sort them or move to another container via drag&drop. Input collection isn't mutated by the component, so events <code>ngModelChange</code>, <code>onChange</code> are using new collections.
+The **sortable component** represents a list of items, with ability to sort them or move to another container via drag&drop. This component supports touch devices. Input collection isn't mutated by the component, so events <code>ngModelChange</code>, <code>itemsChange</code> are using new collections. It is possible to use simple <code>Sortable</code> component if you need to sort just text values or to attach directives to html elements and use arbitrary template for items in list.