feat(demo): update demo pages with latest features

ghiscoding · Mar 7, 2018 · 5d4587d · 5d4587d
1 parent 407ba66
commit 5d4587d
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 70 deletions.
diff --git a/doc/github-demo/src/examples/slickgrid/custom-inputFilter.ts b/doc/github-demo/src/examples/slickgrid/custom-inputFilter.ts
@@ -48,6 +48,15 @@ export class CustomInputFilter implements Filter {
     }
   }
 
+  /**
+   * Set value(s) on the DOM element
+   */
+  setValues(values) {
+    if (values) {
+      this.$filterElm.val(values);
+    }
+  }
+
   //
   // private functions
   // ------------------

diff --git a/doc/github-demo/src/examples/slickgrid/example3.html b/doc/github-demo/src/examples/slickgrid/example3.html
@@ -37,4 +37,4 @@ <h2>${title}</h2>
       grid-options.bind="gridOptions" dataset.bind="dataset">
     </aurelia-slickgrid>
   </div>
-</template>
+</template>
diff --git a/doc/github-demo/src/examples/slickgrid/example3.ts b/doc/github-demo/src/examples/slickgrid/example3.ts
@@ -1,6 +1,21 @@
-import { I18N } from 'aurelia-i18n';
-import { autoinject, bindable } from 'aurelia-framework';
-import { Column, Editors, FieldType, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from 'aurelia-slickgrid';
+import {
+  I18N
+} from 'aurelia-i18n';
+import {
+  autoinject,
+  bindable
+} from 'aurelia-framework';
+import {
+  Column,
+  Editors,
+  FieldType,
+  Formatters,
+  GridExtraService,
+  GridExtraUtils,
+  GridOption,
+  OnEventArgs,
+  ResizerService
+} from 'aurelia-slickgrid';
 
 // using external non-typed js libraries
 declare var Slick: any;
@@ -47,40 +62,101 @@ export class Example3 {
 
   /* Define grid Options and Columns */
   defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'edit', field: 'id',
-        formatter: Formatters.editIcon,
-        minWidth: 30,
-        maxWidth: 30,
-        // use onCellClick OR grid.onClick.subscribe which you can see down below
-        onCellClick: (args: OnEventArgs) => {
-          console.log(args);
-          this.alertWarning = `Editing: ${args.dataContext.title}`;
-          this.gridExtraService.highlightRow(args.row, 1500);
-          this.gridExtraService.setSelectedRow(args.row);
-        }
-      },
-      {
-        id: 'delete', field: 'id',
-        formatter: Formatters.deleteIcon,
-        minWidth: 30,
-        maxWidth: 30,
-        // use onCellClick OR grid.onClick.subscribe which you can see down below
-        /*
-        onCellClick: (args: OnEventArgs) => {
-          console.log(args);
-          this.alertWarning = `Deleting: ${args.dataContext.title}`;
-        }
-        */
-      },
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText, minWidth: 100 },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text, minWidth: 100 },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer, minWidth: 100 },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 100, type: FieldType.date, editor: Editors.date, params: { i18n: this.i18n } },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, minWidth: 100, type: FieldType.date, editor: Editors.date },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox, minWidth: 100 }
-    ];
+    this.columnDefinitions = [{
+      id: 'edit',
+      field: 'id',
+      formatter: Formatters.editIcon,
+      minWidth: 30,
+      maxWidth: 30,
+      // use onCellClick OR grid.onClick.subscribe which you can see down below
+      onCellClick: (args: OnEventArgs) => {
+        console.log(args);
+        this.alertWarning = `Editing: ${args.dataContext.title}`;
+        this.gridExtraService.highlightRow(args.row, 1500);
+        this.gridExtraService.setSelectedRow(args.row);
+      }
+    }, {
+      id: 'delete',
+      field: 'id',
+      formatter: Formatters.deleteIcon,
+      minWidth: 30,
+      maxWidth: 30,
+      // use onCellClick OR grid.onClick.subscribe which you can see down below
+      /*
+      onCellClick: (args: OnEventArgs) => {
+        console.log(args);
+        this.alertWarning = `Deleting: ${args.dataContext.title}`;
+      }
+      */
+    }, {
+      id: 'title',
+      name: 'Title',
+      field: 'title',
+      sortable: true,
+      type: FieldType.string,
+      editor: Editors.longText,
+      minWidth: 100
+    }, {
+      id: 'duration',
+      name: 'Duration (days)',
+      field: 'duration',
+      sortable: true,
+      type: FieldType.number,
+      editor: Editors.text,
+      minWidth: 100
+    }, {
+      id: 'complete',
+      name: '% Complete',
+      field: 'percentComplete',
+      formatter: Formatters.multiple,
+      type: FieldType.number,
+      editor: Editors.singleSelect,
+      minWidth: 100,
+      params: {
+        formatters: [Formatters.collection, Formatters.percentCompleteBar],
+        collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: `${k}%` }))
+      }
+    }, {
+      id: 'start',
+      name: 'Start',
+      field: 'start',
+      formatter: Formatters.dateIso,
+      sortable: true,
+      minWidth: 100,
+      type: FieldType.date,
+      editor: Editors.date,
+      params: {
+        i18n: this.i18n
+      }
+    }, {
+      id: 'finish',
+      name: 'Finish',
+      field: 'finish',
+      formatter: Formatters.dateIso,
+      sortable: true,
+      minWidth: 100,
+      type: FieldType.date,
+      editor: Editors.date
+    }, {
+      id: 'effort-driven',
+      name: 'Effort Driven',
+      field: 'effortDriven',
+      formatter: Formatters.checkmark,
+      type: FieldType.number,
+      editor: Editors.checkbox,
+      minWidth: 100
+    }, {
+      id: 'prerequisites',
+      name: 'Prerequisites',
+      field: 'prerequisites',
+      sortable: true,
+      type: FieldType.string,
+      editor: Editors.multipleSelect,
+      params: {
+        collection: Array.from(Array(10).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
+        i18n: this.i18n
+      }
+    }];
 
     this.gridOptions = {
       asyncEditorLoading: false,
@@ -119,7 +195,8 @@ export class Example3 {
         percentCompleteNumber: randomPercent,
         start: new Date(randomYear, randomMonth, randomDay),
         finish: new Date(randomYear, (randomMonth + 1), randomDay),
-        effortDriven: (i % 5 === 0)
+        effortDriven: (i % 5 === 0),
+        prerequisites: (i % 5 === 0) && i > 0 ? [`Task ${i}`, `Task ${i - 1}`] : []
       };
     }
     this.dataset = mockedDataset;
@@ -166,7 +243,9 @@ export class Example3 {
 
   setAutoEdit(isAutoEdit) {
     this.isAutoEdit = isAutoEdit;
-    this.gridObj.setOptions({ autoEdit: isAutoEdit });
+    this.gridObj.setOptions({
+      autoEdit: isAutoEdit
+    });
     return true;
   }
 

diff --git a/doc/github-demo/src/examples/slickgrid/example4.ts b/doc/github-demo/src/examples/slickgrid/example4.ts
@@ -1,11 +1,13 @@
+import { autoinject } from 'aurelia-framework';
 import { CustomInputFilter } from './custom-inputFilter';
-import { Column, FieldType, FilterType, Formatter, Formatters, GridOption } from 'aurelia-slickgrid';
+import { Column, FieldType, FilterType, Formatter, Formatters, GridOption, GridStateService } from 'aurelia-slickgrid';
 
 function randomBetween(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
 const NB_ITEMS = 500;
 
+@autoinject()
 export class Example4 {
   title = 'Example 4: Client Side Sort/Filter';
   subTitle = `
@@ -31,7 +33,7 @@ export class Example4 {
   gridOptions: GridOption;
   dataset: any[];
 
-  constructor() {
+  constructor(private gridStateService: GridStateService) {
     this.defineGrid();
   }
 
@@ -40,6 +42,10 @@ export class Example4 {
     this.getData();
   }
 
+  detached() {
+    this.saveCurrentGridState();
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     // prepare a multiple-select array to filter with
@@ -51,31 +57,30 @@ export class Example4 {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', filterable: true, sortable: true, type: FieldType.string, minWidth: 45 },
       {
-        id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 50,
+        id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
         type: FieldType.string,
         filter: {
           type: FilterType.custom,
           customFilter: new CustomInputFilter() // create a new instance to make each Filter independent from each other
         }
       },
       {
-        id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number,
+        id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
         minWidth: 55,
         filterable: true,
         filter: {
           collection: multiSelectFilterArray,
           type: FilterType.multipleSelect,
-          searchTerms: [1, 10, 20], // default selection
-
+          searchTerms: [1, 33, 50], // default selection
           // we could add certain option(s) to the "multiple-select" plugin
           filterOptions: {
             maxHeight: 250,
             width: 175
           }
         }
       },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 55, type: FieldType.number, filterable: true, sortable: true },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, filterable: true, sortable: true, type: FieldType.date, minWidth: 60 },
+      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, filterable: true, sortable: true },
+      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, filterable: true, sortable: true, type: FieldType.date, minWidth: 60, exportWithFormatter: true },
       { id: 'usDateShort', name: 'US Date Short', field: 'usDateShort', filterable: true, sortable: true, type: FieldType.dateUsShort, minWidth: 55 },
       { id: 'utcDate', name: 'UTC Date', field: 'utcDate', formatter: Formatters.dateTimeIsoAmPm, filterable: true, sortable: true, minWidth: 115, type: FieldType.dateUtc, filterSearchType: FieldType.dateTimeIso },
       { id: 'utcDate2', name: 'UTC Date (filterSearchType: dateUS)', field: 'utcDate', filterable: true, sortable: true, minWidth: 115, type: FieldType.dateUtc, filterSearchType: FieldType.dateUs },
@@ -95,12 +100,26 @@ export class Example4 {
         }
       }
     ];
+
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
         sidePadding: 15
       },
-      enableFiltering: true
+      enableFiltering: true,
+
+      // use columnDef searchTerms OR use presets as shown below
+      presets: {
+        filters: [
+          { columnId: 'duration', searchTerms: [2, 22, 44] },
+          { columnId: 'complete', searchTerm: '>5' },
+          { columnId: 'effort-driven', searchTerm: true }
+        ],
+        sorters: [
+          { columnId: 'duration', direction: 'DESC' },
+          { columnId: 'complete', direction: 'ASC' }
+        ],
+      }
     };
   }
 
@@ -121,7 +140,7 @@ export class Example4 {
       this.dataset[i] = {
         id: i,
         title: 'Task ' + i,
-        description: (i % 28 === 1) ? null : 'desc ' + i, // also add some random to test NULL field
+        description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field
         duration: randomDuration,
         percentComplete: randomPercent,
         percentCompleteNumber: randomPercent,
@@ -132,4 +151,9 @@ export class Example4 {
       };
     }
   }
+
+  /** Save current Filters, Sorters in LocaleStorage or DB */
+  saveCurrentGridState() {
+    console.log('Client current grid state', this.gridStateService.getCurrentGridState());
+  }
 }