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
valor-software · Jan 6, 2017 · fab3df5 · fab3df5
1 parent 58ca445
commit fab3df5
Show file tree

Hide file tree

Showing 21 changed files with 982 additions and 2 deletions.
diff --git a/demo/src/app/app.module.ts b/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,

diff --git a/demo/src/app/app.routing.ts b/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'],

diff --git a/demo/src/app/components/sortable/demos/index.ts b/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')
+  }
+};
diff --git a/demo/src/app/components/sortable/demos/sortable-demo.component.html b/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>
diff --git a/demo/src/app/components/sortable/demos/sortable-demo.component.ts b/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' });
+}
diff --git a/demo/src/app/components/sortable/docs/title.md b/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.
diff --git a/demo/src/app/components/sortable/docs/usage.md b/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(){}
+```
diff --git a/demo/src/app/components/sortable/index.ts b/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 {
+}
diff --git a/demo/src/app/components/sortable/sortable-section.component.html b/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>
diff --git a/demo/src/app/components/sortable/sortable-section.component.ts b/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;
+}
diff --git a/demo/src/ng-api-doc.ts b/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",

diff --git a/src/index.ts b/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';

diff --git a/src/pagination/pager.component.ts b/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;

diff --git a/src/pagination/pagination.component.ts b/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;