feat(sortable): added new sortable component (#1295)

* Added sortable-list module

* added sortable-list module into the main module

* renamed sortable-list to sortable

* removed sortable module from root index.ts
export everything from sortable module

* inlined html template

* created docs page for sortable component

* removed console.log
fixed lint warning
added basic tests

* added tests for reordering

* added tests for onZoneDragover method

* added test for insert item from another container

* fixed quotes

* fixed insertion test

* finished component covering
implemented tests for service

* changed dirs structure
fixed compatibility with ie11

* use dumb object instead of Event

* updated docs

* update docs (added doc comments)

* fixed compatibility with firefox

demo/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { DemoPaginationModule } from './components/pagination';
 import { DemoPopoverModule } from './components/popover/index';
 import { DemoProgressbarModule } from './components/progressbar';
 import { DemoRatingModule } from './components/rating';
+import { DemoSortableModule } from './components/sortable';
 import { DemoTabsModule } from './components/tabs';
 import { DemoTimepickerModule } from './components/timepicker/index';
 import { DemoTooltipModule } from './components/tooltip/index';
@@ -59,6 +60,7 @@ import { ngdoc } from '../ng-api-doc';
  DemoPopoverModule,
  DemoProgressbarModule,
  DemoRatingModule,
+ DemoSortableModule,
  DemoTabsModule,
  DemoTimepickerModule,
  DemoTooltipModule,

demo/src/app/app.routing.ts

@@ -10,6 +10,7 @@ import { ModalSectionComponent } from './components/modal/modal-section.componen
 import { ProgressbarSectionComponent } from './components/progressbar/progressbar-section.component';
 import { PaginationSectionComponent } from './components/pagination/pagination-section.component';
 import { RatingSectionComponent } from './components/rating/rating-section.component';
+import { SortableSectionComponent } from './components/sortable/sortable-section.component';
 import { TabsSectionComponent } from './components/tabs/tabs-section.component';
 import { TimepickerSectionComponent } from './components/timepicker/timepicker-section.component';
 import { TooltipSectionComponent } from './components/tooltip/tooltip-section.component';
@@ -92,6 +93,11 @@ export const routes = [
  data: ['Timepicker'],
  component: TimepickerSectionComponent
  },
+ {
+ path: 'sortable',
+ data: ['Sortable'],
+ component: SortableSectionComponent
+ },
  {
  path: 'tooltip',
  data: ['Tooltip'],

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

@@ -0,0 +1,10 @@
+import { SortableDemoComponent } from './sortable-demo.component';
+
+export const DEMO_COMPONENTS = [SortableDemoComponent];
+
+export const DEMOS = {
+ basic: {
+ component: require('!!raw?lang=typescript!./sortable-demo.component.ts'),
+ html: require('!!raw?lang=markup!./sortable-demo.component.html')
+ }
+};

demo/src/app/components/sortable/demos/sortable-demo.component.html

@@ -0,0 +1,63 @@
+<div [ngStyle]="{ display: 'flex' }">
+ <div>
+ <!-- Example with strings -->
+ <h3>String items:</h3>
+ <div [ngStyle]="{ display: 'flex' }">
+ <div [ngStyle]="{ width: '200px', 'margin-right': '10px' }">
+ <ng2-sortable
+ [(ngModel)]="itemStringsLeft"
+ [itemStyle]="itemStyle"
+ [itemActiveStyle]="itemActiveStyle"
+ [placeholderItem]="'Drag here'"
+ [placeholderStyle]="placeholderStyle"
+ [wrapperStyle]="wrapperStyle"
+ ></ng2-sortable>
+ <pre>model: {{ itemStringsLeft | json }}</pre>
+ </div>
+ <div [ngStyle]="{ width: '200px' }">
+ <ng2-sortable
+ [(ngModel)]="itemStringsRight"
+ [itemStyle]="itemStyle"
+ [itemActiveStyle]="itemActiveStyle"
+ [placeholderItem]="'Drag here'"
+ [placeholderStyle]="placeholderStyle"
+ [wrapperStyle]="wrapperStyle"
+ ></ng2-sortable>
+ <pre>model: {{ itemStringsRight | json }}</pre>
+ </div>
+ </div>
+ </div>
+
+ <div [ngStyle]="{ 'margin-left': '50px' }">
+ <!-- Example with objects -->
+ <h3>Complex data model:</h3>
+ <div [ngStyle]="{ display: 'flex' }">
+ <div [ngStyle]="{ width: '200px', 'margin-right': '10px' }">
+ <ng2-sortable
+ [(ngModel)]="itemObjectsLeft"
+ [fieldName]="'name'"
+ [itemStyle]="itemStyle"
+ [itemActiveStyle]="itemActiveStyle"
+ [placeholderItem]="'Drag here'"
+ [placeholderStyle]="itemStyle"
+ [wrapperStyle]="wrapperStyle"
+ ></ng2-sortable>
+ <pre>model: {{ itemObjectsLeft | json }}</pre>
+ </div>
+ <div [ngStyle]="{ width: '200px' }">
+ <ng2-sortable
+ [(ngModel)]="itemObjectsRight"
+ [fieldName]="'name'"
+ [itemStyle]="itemStyle"
+ [itemActiveStyle]="itemActiveStyle"
+ [placeholderItem]="'Drag here'"
+ [placeholderStyle]="itemStyle"
+ [wrapperStyle]="wrapperStyle"
+ ></ng2-sortable>
+ <pre>model: {{ itemObjectsRight | json }}</pre>
+ </div>
+ </div>
+ </div>
+</div>
+<div>
+</div>

demo/src/app/components/sortable/demos/sortable-demo.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'sortable-demo',
+ templateUrl: './sortable-demo.component.html'
+})
+export class SortableDemoComponent {
+ public itemStringsLeft: any[] = [
+ 'Windstorm',
+ 'Bombasto',
+ 'Magneta',
+ 'Tornado'
+ ];
+
+ public itemStringsRight: any[] = [
+ 'Mr. O',
+ 'Tomato'
+ ];
+
+ public itemObjectsLeft: any[] = [
+ { id: 1, name: 'Windstorm' },
+ { id: 2, name: 'Bombasto' },
+ { id: 3, name: 'Magneta' }
+ ];
+
+ public itemObjectsRight: any[] = [
+ { id: 4, name: 'Tornado' },
+ { id: 5, name: 'Mr. O' },
+ { id: 6, name: 'Tomato' }
+ ];
+
+ public itemStyle: {} = {
+ display: 'block',
+ padding: '6px 12px',
+ 'margin-bottom': '4px',
+ 'font-size': '14px',
+ 'font-weight': 400,
+ 'line-height': '1.4em',
+ 'text-align': 'center',
+ cursor: 'grab',
+ border: '1px solid transparent',
+ 'border-radius': '4px',
+ 'border-color': '#adadad'
+ };
+
+ public itemActiveStyle: {} = {
+ 'background-color': '#e6e6e6',
+ 'box-shadow': 'inset 0 3px 5px rgba(0,0,0,.125)'
+ };
+
+ public wrapperStyle: {} = {
+ 'min-height': '150px'
+ };
+
+ public placeholderStyle: {} = Object.assign({}, this.itemStyle, { height: '150px' });
+}

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

@@ -0,0 +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.

demo/src/app/components/sortable/docs/usage.md

@@ -0,0 +1,11 @@
+```typescript
+// RECOMMENDED
+import { SortableModule } from 'ng2-bootstrap/sortable';
+// or
+import { SortableModule } from 'ng2-bootstrap';
+
+@NgModule({
+ imports: [SortableModule,...]
+})
+export class AppModule(){}
+```

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared';
+
+import { SortableSectionComponent } from './sortable-section.component';
+import { DEMO_COMPONENTS } from './demos';
+import { SortableModule } from 'ng2-bootstrap/sortable';
+
+@NgModule({
+ declarations: [
+ SortableSectionComponent,
+ ...DEMO_COMPONENTS
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ SharedModule,
+ SortableModule
+ ],
+ exports: [SortableSectionComponent]
+})
+export class DemoSortableModule {
+}

demo/src/app/components/sortable/sortable-section.component.html

@@ -0,0 +1,25 @@
+<demo-section [name]="name" [src]="src" [titleDoc]="titleDoc">
+ <h2>Contents</h2>
+ <ul>
+ <li><a pageScroll href="#usage">Usage</a></li>
+ <li><a pageScroll href="#examples">Examples</a></li>
+ <li><a pageScroll href="#api-reference">API Reference</a>
+ <ul>
+ <li><a pageScroll href="#sortable-component">SortableComponent</a></li>
+ </ul>
+ </li>
+ </ul>
+
+ <h2 id="usage">Usage</h2>
+
+ <p [innerHtml]="usageDoc"></p>
+
+ <h2 id="examples">Examples</h2>
+
+ <ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
+ <sortable-demo></sortable-demo>
+ </ng-sample-box>
+
+ <h2 id="api-reference">API Reference</h2>
+ <ng-api-doc id="sortable-component" directive="SortableComponent"></ng-api-doc>
+</demo-section>

demo/src/app/components/sortable/sortable-section.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { DEMOS } from './demos';
+
+// webpack html imports
+let titleDoc = require('html!markdown!./docs/title.md');
+let usageDoc = require('html!markdown!./docs/usage.md');
+
+@Component({
+ selector: 'sortable-section',
+ templateUrl: './sortable-section.component.html'
+})
+export class SortableSectionComponent {
+ public name:string = 'Sortable';
+ public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/sortable';
+ public titleDoc:string = titleDoc;
+ public usageDoc:string = usageDoc;
+ public demos: any = DEMOS;
+}

demo/src/ng-api-doc.ts

@@ -1463,6 +1463,93 @@ export const ngdoc = {
  "properties": [],
  "methods": []
  },
+ "DraggableItemService": {
+ "fileName": "src/sortable/draggable-item.service.ts",
+ "className": "DraggableItemService",
+ "description": "",
+ "methods": [],
+ "properties": []
+ },
+ "DraggableItem": {
+ "fileName": "src/sortable/draggable-item.ts",
+ "className": "DraggableItem",
+ "description": "",
+ "methods": [],
+ "properties": []
+ },
+ "SortableComponent": {
+ "fileName": "src/sortable/sortable.component.ts",
+ "className": "SortableComponent",
+ "description": "",
+ "selector": "ng2-sortable",
+ "inputs": [
+ {
+ "name": "fieldName",
+ "type": "string",
+ "description": "<p>field name if input array consists of objects </p>\n"
+ },
+ {
+ "name": "itemActiveClass",
+ "type": "string",
+ "description": "<p>class name for active item </p>\n"
+ },
+ {
+ "name": "itemActiveStyle",
+ "type": "{ [key: string]: string; }",
+ "description": "<p>style object for active item </p>\n"
+ },
+ {
+ "name": "itemClass",
+ "type": "string",
+ "description": "<p>class name for item </p>\n"
+ },
+ {
+ "name": "itemStyle",
+ "type": "{ [key: string]: string; }",
+ "description": "<p>style object for item </p>\n"
+ },
+ {
+ "name": "placeholderClass",
+ "type": "string",
+ "description": "<p>class name for placeholder </p>\n"
+ },
+ {
+ "name": "placeholderItem",
+ "type": "string",
+ "description": "<p>placeholder item which will be shown if collection is empty </p>\n"
+ },
+ {
+ "name": "placeholderStyle",
+ "type": "{ [key: string]: string; }",
+ "description": "<p>style object for placeholder </p>\n"
+ },
+ {
+ "name": "wrapperClass",
+ "type": "string",
+ "description": "<p>class name for items wrapper </p>\n"
+ },
+ {
+ "name": "wrapperStyle",
+ "type": "{ [key: string]: string; }",
+ "description": "<p>style object for items wrapper </p>\n"
+ }
+ ],
+ "outputs": [
+ {
+ "name": "onChange",
+ "description": "<p>fired on array change (reordering, insert, remove), same as <code>ngModelChange</code>.\n Returns new items collection as a payload.</p>\n"
+ }
+ ],
+ "properties": [],
+ "methods": []
+ },
+ "SortableItem": {
+ "fileName": "src/sortable/sortable.component.ts",
+ "className": "SortableItem",
+ "description": "",
+ "methods": [],
+ "properties": []
+ },
  "NgTranscludeDirective": {
  "fileName": "src/tabs/ng-transclude.directive.ts",
  "className": "NgTranscludeDirective",

src/index.ts

@@ -58,6 +58,7 @@ export * from './dropdown';
 export * from './pagination';
 export * from './progressbar';
 export * from './rating';
+export * from './sortable';
 export * from './tabs';
 export * from './timepicker';
 export * from './tooltip';

src/pagination/pager.component.ts

@@ -123,7 +123,7 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
  protected _totalItems: number;
  protected _totalPages: number;
  protected inited: boolean = false;
- protected _page: number;
+ protected _page: number = 1;
 
  public constructor(renderer: Renderer, elementRef: ElementRef, paginationConfig: PaginationConfig) {
  this.renderer = renderer;

src/pagination/pagination.component.ts

@@ -150,7 +150,7 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
  protected _totalItems:number;
  protected _totalPages:number;
  protected inited:boolean = false;
- protected _page:number;
+ protected _page:number = 1;
 
  public constructor(renderer:Renderer, elementRef:ElementRef, paginationConfig: PaginationConfig) {
  this.renderer = renderer;