From 0f1e66100d0ab9ccc3c703ec66ac84d984d35c09 Mon Sep 17 00:00:00 2001 From: Jeremy Zagorski Date: Sun, 11 Mar 2018 14:11:56 -0400 Subject: [PATCH 1/3] fix(utilities): move findOrDefault to a function having it on the Array.prototype causes issues with jquery extend and overall is risky closes #27 --- .../editors/singleSelectEditor.ts | 5 +++-- .../formatters/collectionFormatter.ts | 17 +++++++++-------- .../services/global-utilities.ts | 15 --------------- .../src/aurelia-slickgrid/services/utilities.ts | 12 ++++++++++++ .../src/examples/slickgrid/example3.ts | 2 +- 5 files changed, 25 insertions(+), 26 deletions(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts index 75fdd835b..861036a80 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts @@ -4,7 +4,8 @@ import { Column, MultipleSelectOption, SelectOption -} from './../models/index'; +} from '../models/index'; +import { findOrDefault } from '../services'; import * as $ from 'jquery'; /** @@ -63,7 +64,7 @@ export class SingleSelectEditor implements Editor { * The current selected value from the collection */ get currentValue() { - return this.collection.findOrDefault(c => + return findOrDefault(this.collection, (c: any) => c[this.valueName].toString() === this.$editorElm.val())[this.valueName]; } diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/collectionFormatter.ts b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/collectionFormatter.ts index 84a400168..1548b32a3 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/collectionFormatter.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/collectionFormatter.ts @@ -1,26 +1,27 @@ import { arrayToCsvFormatter } from './arrayToCsvFormatter'; import { Column, Formatter } from './../models/index'; +import { findOrDefault } from '../services'; /** - * A formatter to show the label property value of a filter.collection + * A formatter to show the label property value of a params collection */ export const collectionFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => { - if (!value || !columnDef || !columnDef.filter || !columnDef.filter.collection - || !columnDef.filter.collection.length) { + if (!value || !columnDef || !columnDef.params || !columnDef.params.collection + || !columnDef.params.collection.length) { return ''; } - const { filter, filter: { collection } } = columnDef; - const labelName = (filter.customStructure) ? filter.customStructure.label : 'label'; - const valueName = (filter.customStructure) ? filter.customStructure.value : 'value'; + const { params, params: { collection } } = columnDef; + const labelName = (params.customStructure) ? params.customStructure.label : 'label'; + const valueName = (params.customStructure) ? params.customStructure.value : 'value'; if (Array.isArray(value)) { return arrayToCsvFormatter(row, cell, - value.map((v: any) => collection.findOrDefault((c: any) => c[valueName] === v)[labelName]), + value.map((v: any) => findOrDefault(collection, (c: any) => c[valueName] === v)[labelName]), columnDef, dataContext); } - return collection.findOrDefault((c: any) => c[valueName] === value)[labelName] || ''; + return findOrDefault(collection, (c: any) => c[valueName] === value)[labelName] || ''; }; diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/services/global-utilities.ts b/aurelia-slickgrid/src/aurelia-slickgrid/services/global-utilities.ts index a9dadc9d6..e176bd6dd 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/services/global-utilities.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/services/global-utilities.ts @@ -5,10 +5,6 @@ declare interface StringConstructor { titleCase(inputStr: string): string; } -declare interface Array { - findOrDefault(logic: (item: any) => boolean): {}; -} - String.format = (format: string, ...args): string => { // const args = (Array.isArray(arguments[1])) ? arguments[1] : Array.prototype.slice.call(arguments, 1); @@ -45,14 +41,3 @@ String.allTitleCase = (inputStr: string): string => { String.titleCase = (inputStr: string): string => { return inputStr.charAt(0).toUpperCase() + inputStr.slice(1); }; - -/** - * Uses the logic function to find an item in an array or returns the default - * value provided (empty object by default) - * @param function logic the logic to find the item - * @param any [defaultVal={}] the default value to return - * @return object the found object or deafult value - */ -Array.prototype.findOrDefault = function(logic: (item: any) => boolean, defaultVal = {}): any { - return this.find(logic) || defaultVal; -}; diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/services/utilities.ts b/aurelia-slickgrid/src/aurelia-slickgrid/services/utilities.ts index 83a748ec6..81cafdc1a 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/services/utilities.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/services/utilities.ts @@ -363,3 +363,15 @@ export function arraysEqual(a: any[], b: any[], orderMatters: boolean = false): return true; } + +/** + * Uses the logic function to find an item in an array or returns the default + * value provided (empty object by default) + * @param any[] array the array to filter + * @param function logic the logic to find the item + * @param any [defaultVal={}] the default value to return + * @return object the found object or deafult value + */ +export function findOrDefault(array: any[], logic: (item: any) => boolean, defaultVal = {}): any { + return array.find(logic) || defaultVal; +} diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.ts b/aurelia-slickgrid/src/examples/slickgrid/example3.ts index ec70aa3d4..89974f846 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example3.ts +++ b/aurelia-slickgrid/src/examples/slickgrid/example3.ts @@ -114,7 +114,7 @@ export class Example3 { minWidth: 100, params: { formatters: [ Formatters.collection, Formatters.percentCompleteBar ], - collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: `${k}%` })) + collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })) } }, { id: 'start', From 0cdf3b29fc81e4b821c902424401e0b795a2543e Mon Sep 17 00:00:00 2001 From: Jeremy Zagorski Date: Sun, 11 Mar 2018 14:38:03 -0400 Subject: [PATCH 2/3] docs(formatters): change filter to params for collectionFormatter --- aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts index 3220b1d80..8f527d4b1 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts @@ -49,7 +49,7 @@ export const Formatters = { /** Takes a complex data object and return the data under that property (for example: "user.firstName" will return the first name "John") */ complexObject: complexObjectFormatter, - /** Looks up values from the filter.collection property and convert it to a CSV or string */ + /** Looks up values from the params.collection property and convert it to a CSV or string */ collection: collectionFormatter, /** Takes a Date object and displays it as an ISO Date format */ From 582e11cc823b46301137cd5ae60286f94b81cf57 Mon Sep 17 00:00:00 2001 From: Jeremy Zagorski Date: Sun, 11 Mar 2018 15:24:26 -0400 Subject: [PATCH 3/3] docs(formatters): add @example to collectionFormatter description --- .../src/aurelia-slickgrid/formatters/index.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts index 8f527d4b1..d0df34097 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/formatters/index.ts @@ -49,7 +49,17 @@ export const Formatters = { /** Takes a complex data object and return the data under that property (for example: "user.firstName" will return the first name "John") */ complexObject: complexObjectFormatter, - /** Looks up values from the params.collection property and convert it to a CSV or string */ + /** + * Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format + * @example + * // the grid will display 'foo' and 'bar' and not 1 and 2 from your dataset + * { + * params: { + * collection: [{ value: 1, label: 'foo'}, {value: 2, label: 'bar' }] + * } + * } + * const dataset = [{ value: 1 },{ value: 2 }]; + */ collection: collectionFormatter, /** Takes a Date object and displays it as an ISO Date format */