Filter-ngFor example

.gitignore

@@ -2,6 +2,7 @@
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 /node_modules
 npm-debug.log
+package-lock.json
 
 # WebStorm
 .idea

demo/src/app/app.component.ts

@@ -19,6 +19,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
       <wow-example></wow-example>
 
       <repeat-example></repeat-example>
+
+      <filter-example></filter-example>
 
       <nested-repeat-example></nested-repeat-example>
     </div>

demo/src/app/app.module.ts

@@ -5,10 +5,12 @@ import { CommonModule } from '@angular/common';
 import { DragulaModule } from 'ng2-dragula';
 
 import { EXAMPLES } from './examples';
+import { CallbackparamsPipe } from './callback.pipe';
 import { DemoComponent } from './app.component';
 
 @NgModule({
   declarations: [
+    CallbackparamsPipe,
     DemoComponent,
     ...EXAMPLES
   ],

demo/src/app/callback.pipe.ts

@@ -0,0 +1,15 @@
+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({
+    name: 'callbackparams',
+    pure: false
+})
+export class CallbackparamsPipe implements PipeTransform {
+    public transform(items: any[], callback: (item: any, params: any) => boolean, params: any): any {
+        if (!items || !callback) {
+            return items;
+        }
+        const _params = params || {};
+        return items.filter((item: any) => callback(item, _params));
+    }
+}

demo/src/app/examples.ts

@@ -177,6 +177,49 @@ export class RepeatExampleComponent {
   }
 }
 
+@Component({
+  selector: 'filter-example',
+  templateUrl: './templates/filter-example.html'
+})
+export class FilterExampleComponent {
+  public searchMany: string;
+  public searchMany2: string;
+  public many:Array<string> = ['The', 'possibilities', 'are', 'endless!', 'Try', 'filtering!'];
+  public many2:Array<string> = ['Explore', 'them'];
+
+  public constructor(private dragulaService:DragulaService) {
+    dragulaService.dropModel.subscribe((value:any) => {
+      this.onDropModel(value.slice(1));
+    });
+    dragulaService.removeModel.subscribe((value:any) => {
+      this.onRemoveModel(value.slice(1));
+    });
+  }
+
+  public filterMany(item: string, searchValue: string) {
+    if (searchValue && (searchValue.length >= 0)) {
+      return (item.indexOf(searchValue) !== -1);
+    } else {
+      return true;
+    }
+  }
+
+  private onDropModel(args:any):void {
+    let [el, target, source] = args;
+    console.log('onDropModel:');
+    console.log(el);
+    console.log(target);
+    console.log(source);
+  }
+
+  private onRemoveModel(args:any):void {
+    let [el, source] = args;
+    console.log('onRemoveModel:');
+    console.log(el);
+    console.log(source);
+  }
+}
+
 @Component({
   selector: 'nested-repeat-example',
   templateUrl: './templates/nested-repeat-example.html'
@@ -203,5 +246,6 @@ export const EXAMPLES:any[] = [
   MuchExampleComponent,
   WowExampleComponent,
   RepeatExampleComponent,
+  FilterExampleComponent,
   NestedRepeatExampleComponent
 ];

demo/src/app/templates/filter-example.html

@@ -0,0 +1,80 @@
+<div class='parent'>
+  <label for='hy'><strong>Angular-specific filter example.</strong> Fancy some <code>ngFor</code>?</label>
+  <div class='wrapper'>
+      <div class='container'>
+        <input type='text' [(ngModel)]='searchMany' placeholder='Search many'>
+        <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
+            <div *ngFor='let text of many | callbackparams: filterMany: searchMany' [innerHtml]='text' [attr.filter-index]='many.indexOf(text)'></div>
+        </div>
+      </div>
+      <div class='container'>
+          <input type='text' [(ngModel)]='searchMany2' placeholder='Search many2'>
+          <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
+              <div *ngFor='let text of many2 | callbackparams: filterMany: searchMany2' [innerHtml]='text' [attr.filter-index]='many2.indexOf(text)'></div>
+          </div>
+      </div>
+  </div>
+  <div class='wrapper'>
+      <div class='container'>
+          <pre>{{many | json}}</pre>
+      </div>
+      <div class='container'>
+          <pre>{{many2 | json}}</pre>
+      </div>
+  </div>
+  <pre>
+    <code>
+&lt;div class='wrapper'&gt;
+  &lt;div class='container'&gt;
+    &lt;input type='text' [(ngModel)]='searchMany' placeholder='Search many'&gt;
+    &lt;div class='container' [dragula]='&quot;another-bag&quot;' [dragulaModel]='many'&gt;
+      &lt;div *ngFor='let text of many | callbackparams: filterMany: searchMany'
+              [innerHtml]='text'
+              [attr.filter-index]='many.indexOf(text)'&gt;&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;div class='container'&gt;
+    &lt;input type='text' [(ngModel)]='searchMany2' placeholder='Search many2'&gt;
+    &lt;div class='container' [dragula]='&quot;another-bag&quot;' [dragulaModel]='many2'&gt;
+      &lt;div *ngFor='let text of many2 | callbackparams: filterMany: searchMany2'
+              [innerHtml]='text'
+              [attr.filter-index]='many2.indexOf(text)'&gt;&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+class RepeatExample &#123;
+public searchMany: string;
+public searchMany2: string;
+public many: Array&lt;string&gt; = ['The', 'possibilities', 'are', 'endless!', 'Try', 'filtering!'];
+public many2: Array&lt;string&gt; = ['Explore', 'them'];
+
+constructor(private dragulaService: DragulaService) &#123;
+  dragulaService.dropModel.subscribe((value) => &#123;
+    this.onDropModel(value.slice(1));
+  });
+  dragulaService.removeModel.subscribe((value) => &#123;
+    this.onRemoveModel(value.slice(1));
+  });
+}
+
+public filterMany(item: string, searchValue: string) &#123;
+  if (searchValue &amp;&amp; (searchValue.length >= 0)) &#123;
+    return (item.indexOf(searchValue) !== -1);
+  } else &#123;
+    return true;
+  }
+}
+
+private onDropModel(args) &#123;
+  let [el, target, source] = args;
+  // do something else
+}
+
+private onRemoveModel(args) &#123;
+  let [el, source] = args;
+  // do something else
+}
+}
+    </code>
+  </pre>
+</div>

demo/src/assets/css/example.css

@@ -104,7 +104,8 @@ input {
   border: 0;
   margin: 5px 0;
   display: block;
-  width: 100%;
+  width: calc(100% - 1em);
+  margin: .5em;
 }
 
 button {

package.json

@@ -29,7 +29,7 @@
     "lite-server": "lite-server -c demo/bs-config.json",
     "demo.serve": "run-s build link demo.build lite-server",
     "demo.gh-pages": "run-s build demo.build demo.deploy",
-    "demo.build": "ng build -prod --aot",
+    "demo.build": "ng build --env=prod",
     "demo.deploy": "gh-pages -d demo/dist",
     "link": "ngm link -p src --here",
     "lint": "exit 0",
@@ -54,6 +54,7 @@
     "@angular/forms": "^2.3.1 || >=4.0.0"
   },
   "devDependencies": {
+    "@angular/cli": "1.0.0",
     "@angular/common": "2.4.3",
     "@angular/compiler": "2.4.3",
     "@angular/compiler-cli": "2.4.3",
@@ -65,12 +66,11 @@
     "@angular/platform-browser-dynamic": "2.4.3",
     "@angular/router": "3.4.3",
     "@angular/tsc-wrapped": "0.5.1",
-    "@types/jasmine": "2.5.40",
     "@types/dragula": "2.1.29",
+    "@types/jasmine": "2.5.40",
     "@types/marked": "0.0.28",
     "@types/node": "7.0.0",
     "@types/webpack": "2.2.0",
-    "@angular/cli": "1.0.0",
     "bootstrap": "3.3.7",
     "chokidar-cli": "1.2.0",
     "classlist-polyfill": "1.0.3",
@@ -93,17 +93,17 @@
     "karma": "1.4.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "^1.0.2",
-    "karma-jasmine-html-reporter" : "^0.2.2",
-    "karma-coverage-istanbul-reporter" : "^0.2.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
     "karma-sauce-launcher": "1.1.0",
     "lite-server": "2.2.2",
     "lodash": "4.17.4",
     "markdown-loader": "github:valorkin/markdown-loader",
     "marked": "0.3.6",
     "ng2-page-scroll": "4.0.0-beta.2",
-    "ngx-bootstrap": "1.6.6",
     "ngm-cli": "0.5.0",
+    "ngx-bootstrap": "1.6.6",
     "npm-run-all": "4.0.0",
     "pre-commit": "1.2.2",
     "protractor": "5.0.0",
@@ -121,4 +121,4 @@
     "webdriver-manager": "11.1.1",
     "zone.js": "0.7.5"
   }
-}
+}

src/components/dragula.provider.ts

@@ -73,7 +73,7 @@ export class DragulaService {
     });
     drake.on('drag', (el: any, source: any) => {
       dragElm = el;
-      dragIndex = this.domIndexOf(el, source);
+      dragIndex = (el.getAttribute('filter-index')) ? +el.getAttribute('filter-index') : this.domIndexOf(el, source);
     });
     drake.on('drop', (dropElm: any, target: any, source: any) => {
       if (!drake.models || !target) {