diff --git a/README.md b/README.md index d4e298e38..c40a1a226 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,10 @@ To get started you must run (also once) an initial TS build so that all necessar ```bash yarn run build ``` +Every subsequent occurence should be called with the `rebuild` task which is nearly the same as `build`, the only diffence is that it will empty every `dist` folders prior to running the `build` command. +```bash +yarn run rebuild +``` 4. Run Dev (Vanilla Implementation) @@ -147,9 +151,9 @@ yarn run test:watch - [x] Build and run on every PR - [x] Add full bundler (all types) build step in CircleCI build - [x] Bundle Creation (vanilla bundle) - - [ ] Eventually add Unit Tests as a Pre-Bundle task + - [x] Eventually add Unit Tests as a Pre-Bundle task - [x] Remove any Deprecated code - - [ ] Create and Update the [Migration Guide](https://github.com/ghiscoding/slickgrid-universal/wiki/Migration-for-Angular-Aurelia-Slickgrid) for Angular/Aurelia + - [x] Create and Update the [Migration Guide](https://github.com/ghiscoding/slickgrid-universal/wiki/Migration-for-Angular-Aurelia-Slickgrid) for Angular/Aurelia - [x] Add simple input bindings in the demo (e.g. pinned rows input) - [x] Add possibility to use SVG instead of Font Family - [x] Add Typings (interfaces) for Slick Grid & DataView objects @@ -159,6 +163,8 @@ yarn run test:watch - [x] The Pagination/Footer width is a little off sometime compare to the width of the grid container - [x] See if we can add the number of chars (text counter) typed in `Editors.longText` - [x] Upgrade to latest jQuery version `3.5.1` +- [x] Change `index` file of `Editors`, `Filters`, ... to regular barel export and rename previous files to `editors.index`, ... + - [x] Also add all `Editors`, `Filters`, ... to the Vanilla Grid Bundle - [ ] See if we can get `DOM Purify` to work in SF, else keep the custom sanitizer - [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members -- [ ] change `Filters` and `Editors` to default index export but move the previous export into the vanilla grid bundle +- [ ] See if adding `lerna-changelog` make sense diff --git a/package.json b/package.json index f26422d9c..e28ddd946 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,10 @@ "scripts": { "bootstrap": "lerna bootstrap --use-workspaces", "bundle": "lerna run bundle --stream", + "prebundle:zip": "npm run bundle", + "bundle:zip": "lerna run bundle:zip --stream", + "prebundle:with-tests": "npm run bundle", + "bundle:with-tests": "npm run test", "build": "lerna run build --stream", "build:demo": "lerna run build:demo --stream", "rebuild": "run-s clean build", diff --git a/packages/common/src/aggregators/aggregators.index.ts b/packages/common/src/aggregators/aggregators.index.ts new file mode 100644 index 000000000..d57cc983f --- /dev/null +++ b/packages/common/src/aggregators/aggregators.index.ts @@ -0,0 +1,31 @@ +import { AvgAggregator } from './avgAggregator'; +import { CloneAggregator } from './cloneAggregator'; +import { CountAggregator } from './countAggregator'; +import { DistinctAggregator } from './distinctAggregator'; +import { MinAggregator } from './minAggregator'; +import { MaxAggregator } from './maxAggregator'; +import { SumAggregator } from './sumAggregator'; + +/** Provides a list of different Aggregators for the Group Formatter */ +export const Aggregators = { + /** Average Aggregator which calculate the average of a given group */ + Avg: AvgAggregator, + + /** Clone Aggregator will simply clone (copy) over the last defined value of a given group */ + Clone: CloneAggregator, + + /** Count Aggregator will count the number of rows in the group */ + Count: CountAggregator, + + /** Distinct Aggregator will return an array of distinct values found inside the given group */ + Distinct: DistinctAggregator, + + /** Minimum Aggregator which will find the minimum value inside the given group */ + Min: MinAggregator, + + /** Maximum Aggregator which will find the maximum value inside the given group */ + Max: MaxAggregator, + + /** Sum Aggregator which calculate the sum of a given group */ + Sum: SumAggregator +}; diff --git a/packages/common/src/aggregators/index.ts b/packages/common/src/aggregators/index.ts index d57cc983f..39427f380 100644 --- a/packages/common/src/aggregators/index.ts +++ b/packages/common/src/aggregators/index.ts @@ -1,31 +1,8 @@ -import { AvgAggregator } from './avgAggregator'; -import { CloneAggregator } from './cloneAggregator'; -import { CountAggregator } from './countAggregator'; -import { DistinctAggregator } from './distinctAggregator'; -import { MinAggregator } from './minAggregator'; -import { MaxAggregator } from './maxAggregator'; -import { SumAggregator } from './sumAggregator'; - -/** Provides a list of different Aggregators for the Group Formatter */ -export const Aggregators = { - /** Average Aggregator which calculate the average of a given group */ - Avg: AvgAggregator, - - /** Clone Aggregator will simply clone (copy) over the last defined value of a given group */ - Clone: CloneAggregator, - - /** Count Aggregator will count the number of rows in the group */ - Count: CountAggregator, - - /** Distinct Aggregator will return an array of distinct values found inside the given group */ - Distinct: DistinctAggregator, - - /** Minimum Aggregator which will find the minimum value inside the given group */ - Min: MinAggregator, - - /** Maximum Aggregator which will find the maximum value inside the given group */ - Max: MaxAggregator, - - /** Sum Aggregator which calculate the sum of a given group */ - Sum: SumAggregator -}; +export * from './sumAggregator'; +export * from './maxAggregator'; +export * from './distinctAggregator'; +export * from './minAggregator'; +export * from './countAggregator'; +export * from './cloneAggregator'; +export * from './avgAggregator'; +export * from './aggregators.index'; diff --git a/packages/common/src/editors/editors.index.ts b/packages/common/src/editors/editors.index.ts new file mode 100644 index 000000000..d74c0899d --- /dev/null +++ b/packages/common/src/editors/editors.index.ts @@ -0,0 +1,46 @@ +import { AutoCompleteEditor } from './autoCompleteEditor'; +import { CheckboxEditor } from './checkboxEditor'; +import { DateEditor } from './dateEditor'; +import { DualInputEditor } from './dualInputEditor'; +import { FloatEditor } from './floatEditor'; +import { IntegerEditor } from './integerEditor'; +import { LongTextEditor } from './longTextEditor'; +import { MultipleSelectEditor } from './multipleSelectEditor'; +import { SingleSelectEditor } from './singleSelectEditor'; +import { SliderEditor } from './sliderEditor'; +import { TextEditor } from './textEditor'; + +export const Editors = { + /** AutoComplete Editor (using jQuery UI autocomplete feature) */ + autoComplete: AutoCompleteEditor, + + /** Checkbox Editor (uses native checkbox DOM element) */ + checkbox: CheckboxEditor, + + /** Date Picker Editor (which uses 3rd party lib "flatpickr") */ + date: DateEditor, + + /** Dual Input Editor, default input type is text but it could be (integer/float/number/password/text) */ + dualInput: DualInputEditor, + + /** Float Number Editor */ + float: FloatEditor, + + /** Integer Editor */ + integer: IntegerEditor, + + /** Long Text Editor (uses a textarea) */ + longText: LongTextEditor, + + /** Multiple Select editor (which uses 3rd party lib "multiple-select.js") */ + multipleSelect: MultipleSelectEditor, + + /** Single Select editor (which uses 3rd party lib "multiple-select.js") */ + singleSelect: SingleSelectEditor, + + /** Slider Editor */ + slider: SliderEditor, + + /** Text Editor */ + text: TextEditor +}; diff --git a/packages/common/src/editors/index.ts b/packages/common/src/editors/index.ts index d74c0899d..3f287c074 100644 --- a/packages/common/src/editors/index.ts +++ b/packages/common/src/editors/index.ts @@ -1,46 +1,13 @@ -import { AutoCompleteEditor } from './autoCompleteEditor'; -import { CheckboxEditor } from './checkboxEditor'; -import { DateEditor } from './dateEditor'; -import { DualInputEditor } from './dualInputEditor'; -import { FloatEditor } from './floatEditor'; -import { IntegerEditor } from './integerEditor'; -import { LongTextEditor } from './longTextEditor'; -import { MultipleSelectEditor } from './multipleSelectEditor'; -import { SingleSelectEditor } from './singleSelectEditor'; -import { SliderEditor } from './sliderEditor'; -import { TextEditor } from './textEditor'; - -export const Editors = { - /** AutoComplete Editor (using jQuery UI autocomplete feature) */ - autoComplete: AutoCompleteEditor, - - /** Checkbox Editor (uses native checkbox DOM element) */ - checkbox: CheckboxEditor, - - /** Date Picker Editor (which uses 3rd party lib "flatpickr") */ - date: DateEditor, - - /** Dual Input Editor, default input type is text but it could be (integer/float/number/password/text) */ - dualInput: DualInputEditor, - - /** Float Number Editor */ - float: FloatEditor, - - /** Integer Editor */ - integer: IntegerEditor, - - /** Long Text Editor (uses a textarea) */ - longText: LongTextEditor, - - /** Multiple Select editor (which uses 3rd party lib "multiple-select.js") */ - multipleSelect: MultipleSelectEditor, - - /** Single Select editor (which uses 3rd party lib "multiple-select.js") */ - singleSelect: SingleSelectEditor, - - /** Slider Editor */ - slider: SliderEditor, - - /** Text Editor */ - text: TextEditor -}; +export * from './textEditor'; +export * from './sliderEditor'; +export * from './singleSelectEditor'; +export * from './selectEditor'; +export * from './multipleSelectEditor'; +export * from './longTextEditor'; +export * from './integerEditor'; +export * from './floatEditor'; +export * from './editors.index'; +export * from './dualInputEditor'; +export * from './dateEditor'; +export * from './checkboxEditor'; +export * from './autoCompleteEditor'; diff --git a/packages/common/src/filter-conditions/executeMappedCondition.ts b/packages/common/src/filter-conditions/executeMappedCondition.ts index d100435f2..bccbdc258 100644 --- a/packages/common/src/filter-conditions/executeMappedCondition.ts +++ b/packages/common/src/filter-conditions/executeMappedCondition.ts @@ -113,4 +113,4 @@ function executeAssociatedDateCondition(options: FilterConditionOption): boolean return (resultCondition1 && resultCondition2); } return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch1.format('X'), 10)); -}; +} diff --git a/packages/common/src/filter-conditions/filterConditions.index.ts b/packages/common/src/filter-conditions/filterConditions.index.ts new file mode 100644 index 000000000..ef3b7e45b --- /dev/null +++ b/packages/common/src/filter-conditions/filterConditions.index.ts @@ -0,0 +1,16 @@ +import { FilterConditionOption } from './../interfaces/filterConditionOption.interface'; +import { booleanFilterCondition } from './booleanFilterCondition'; +import { executeMappedCondition } from './executeMappedCondition'; +import { collectionSearchFilterCondition } from './collectionSearchFilterCondition'; +import { numberFilterCondition } from './numberFilterCondition'; +import { stringFilterCondition } from './stringFilterCondition'; +import { testFilterCondition } from './filterUtilities'; + +export const FilterConditions = { + executeMappedCondition, + booleanFilter: booleanFilterCondition, + collectionSearchFilter: collectionSearchFilterCondition, + numberFilter: numberFilterCondition, + stringFilter: stringFilterCondition, + testFilter: testFilterCondition +}; diff --git a/packages/common/src/filter-conditions/index.ts b/packages/common/src/filter-conditions/index.ts index ef3b7e45b..a1519b12a 100644 --- a/packages/common/src/filter-conditions/index.ts +++ b/packages/common/src/filter-conditions/index.ts @@ -1,16 +1,8 @@ -import { FilterConditionOption } from './../interfaces/filterConditionOption.interface'; -import { booleanFilterCondition } from './booleanFilterCondition'; -import { executeMappedCondition } from './executeMappedCondition'; -import { collectionSearchFilterCondition } from './collectionSearchFilterCondition'; -import { numberFilterCondition } from './numberFilterCondition'; -import { stringFilterCondition } from './stringFilterCondition'; -import { testFilterCondition } from './filterUtilities'; - -export const FilterConditions = { - executeMappedCondition, - booleanFilter: booleanFilterCondition, - collectionSearchFilter: collectionSearchFilterCondition, - numberFilter: numberFilterCondition, - stringFilter: stringFilterCondition, - testFilter: testFilterCondition -}; +export * from './stringFilterCondition'; +export * from './objectFilterCondition'; +export * from './numberFilterCondition'; +export * from './filterUtilities'; +export * from './filterConditions.index'; +export * from './executeMappedCondition'; +export * from './collectionSearchFilterCondition'; +export * from './booleanFilterCondition'; diff --git a/packages/common/src/filters/filters.index.ts b/packages/common/src/filters/filters.index.ts new file mode 100644 index 000000000..a7f17894f --- /dev/null +++ b/packages/common/src/filters/filters.index.ts @@ -0,0 +1,76 @@ +// import { Column, Filter } from '../interfaces/index'; +import { AutoCompleteFilter } from './autoCompleteFilter'; +import { CompoundDateFilter } from './compoundDateFilter'; +import { CompoundInputFilter } from './compoundInputFilter'; +import { CompoundInputNumberFilter } from './compoundInputNumberFilter'; +import { CompoundInputPasswordFilter } from './compoundInputPasswordFilter'; +import { CompoundSliderFilter } from './compoundSliderFilter'; +import { InputFilter } from './inputFilter'; +import { InputMaskFilter } from './inputMaskFilter'; +import { InputNumberFilter } from './inputNumberFilter'; +import { InputPasswordFilter } from './inputPasswordFilter'; +import { MultipleSelectFilter } from './multipleSelectFilter'; +import { NativeSelectFilter } from './nativeSelectFilter'; +import { DateRangeFilter } from './dateRangeFilter'; +import { SingleSelectFilter } from './singleSelectFilter'; +import { SliderFilter } from './sliderFilter'; +import { SliderRangeFilter } from './sliderRangeFilter'; + +export const Filters = { + /** AutoComplete Filter (using jQuery UI autocomplete feature) */ + autoComplete: AutoCompleteFilter, + + /** Compound Date Filter (compound of Operator + Date picker) */ + compoundDate: CompoundDateFilter, + + /** Alias to compoundInputText to Compound Input Filter (compound of Operator + Input Text) */ + compoundInput: CompoundInputFilter, + + /** Compound Input Number Filter (compound of Operator + Input of type Number) */ + compoundInputNumber: CompoundInputNumberFilter, + + /** Compound Input Password Filter (compound of Operator + Input of type Password, also note that only the text shown in the UI will be masked, filter query is still plain text) */ + compoundInputPassword: CompoundInputPasswordFilter, + + /** Compound Input Text Filter (compound of Operator + Input Text) */ + compoundInputText: CompoundInputFilter, + + /** Compound Slider Filter (compound of Operator + Slider) */ + compoundSlider: CompoundSliderFilter, + + /** Range Date Filter (uses the Flactpickr Date picker with range option) */ + dateRange: DateRangeFilter, + + /** Alias to inputText, input type text filter */ + input: InputFilter, + + /** + * Input Filter of type text that will be formatted with a mask output + * e.g.: column: { filter: { model: Filters.inputMask }, params: { mask: '(000) 000-0000' }} + */ + inputMask: InputMaskFilter, + + /** Input Filter of type Number */ + inputNumber: InputNumberFilter, + + /** Input Filter of type Password (note that only the text shown in the UI will be masked, filter query is still plain text) */ + inputPassword: InputPasswordFilter, + + /** Default Filter, input type text filter */ + inputText: InputFilter, + + /** Multiple Select filter, which uses 3rd party lib "multiple-select.js" */ + multipleSelect: MultipleSelectFilter, + + /** Select filter, which uses native DOM element select */ + select: NativeSelectFilter, + + /** Single Select filter, which uses 3rd party lib "multiple-select.js" */ + singleSelect: SingleSelectFilter, + + /** Slider Filter (only 1 value) */ + slider: SliderFilter, + + /** Slider Range Filter, uses jQuery UI Range Slider (2 values, lowest/highest search range) */ + sliderRange: SliderRangeFilter, +}; diff --git a/packages/common/src/filters/index.ts b/packages/common/src/filters/index.ts index a7f17894f..6619b11c3 100644 --- a/packages/common/src/filters/index.ts +++ b/packages/common/src/filters/index.ts @@ -1,76 +1,19 @@ -// import { Column, Filter } from '../interfaces/index'; -import { AutoCompleteFilter } from './autoCompleteFilter'; -import { CompoundDateFilter } from './compoundDateFilter'; -import { CompoundInputFilter } from './compoundInputFilter'; -import { CompoundInputNumberFilter } from './compoundInputNumberFilter'; -import { CompoundInputPasswordFilter } from './compoundInputPasswordFilter'; -import { CompoundSliderFilter } from './compoundSliderFilter'; -import { InputFilter } from './inputFilter'; -import { InputMaskFilter } from './inputMaskFilter'; -import { InputNumberFilter } from './inputNumberFilter'; -import { InputPasswordFilter } from './inputPasswordFilter'; -import { MultipleSelectFilter } from './multipleSelectFilter'; -import { NativeSelectFilter } from './nativeSelectFilter'; -import { DateRangeFilter } from './dateRangeFilter'; -import { SingleSelectFilter } from './singleSelectFilter'; -import { SliderFilter } from './sliderFilter'; -import { SliderRangeFilter } from './sliderRangeFilter'; - -export const Filters = { - /** AutoComplete Filter (using jQuery UI autocomplete feature) */ - autoComplete: AutoCompleteFilter, - - /** Compound Date Filter (compound of Operator + Date picker) */ - compoundDate: CompoundDateFilter, - - /** Alias to compoundInputText to Compound Input Filter (compound of Operator + Input Text) */ - compoundInput: CompoundInputFilter, - - /** Compound Input Number Filter (compound of Operator + Input of type Number) */ - compoundInputNumber: CompoundInputNumberFilter, - - /** Compound Input Password Filter (compound of Operator + Input of type Password, also note that only the text shown in the UI will be masked, filter query is still plain text) */ - compoundInputPassword: CompoundInputPasswordFilter, - - /** Compound Input Text Filter (compound of Operator + Input Text) */ - compoundInputText: CompoundInputFilter, - - /** Compound Slider Filter (compound of Operator + Slider) */ - compoundSlider: CompoundSliderFilter, - - /** Range Date Filter (uses the Flactpickr Date picker with range option) */ - dateRange: DateRangeFilter, - - /** Alias to inputText, input type text filter */ - input: InputFilter, - - /** - * Input Filter of type text that will be formatted with a mask output - * e.g.: column: { filter: { model: Filters.inputMask }, params: { mask: '(000) 000-0000' }} - */ - inputMask: InputMaskFilter, - - /** Input Filter of type Number */ - inputNumber: InputNumberFilter, - - /** Input Filter of type Password (note that only the text shown in the UI will be masked, filter query is still plain text) */ - inputPassword: InputPasswordFilter, - - /** Default Filter, input type text filter */ - inputText: InputFilter, - - /** Multiple Select filter, which uses 3rd party lib "multiple-select.js" */ - multipleSelect: MultipleSelectFilter, - - /** Select filter, which uses native DOM element select */ - select: NativeSelectFilter, - - /** Single Select filter, which uses 3rd party lib "multiple-select.js" */ - singleSelect: SingleSelectFilter, - - /** Slider Filter (only 1 value) */ - slider: SliderFilter, - - /** Slider Range Filter, uses jQuery UI Range Slider (2 values, lowest/highest search range) */ - sliderRange: SliderRangeFilter, -}; +export * from './sliderRangeFilter'; +export * from './sliderFilter'; +export * from './singleSelectFilter'; +export * from './selectFilter'; +export * from './nativeSelectFilter'; +export * from './multipleSelectFilter'; +export * from './inputPasswordFilter'; +export * from './inputNumberFilter'; +export * from './inputMaskFilter'; +export * from './inputFilter'; +export * from './filters.index'; +export * from './filterFactory'; +export * from './dateRangeFilter'; +export * from './compoundSliderFilter'; +export * from './compoundInputPasswordFilter'; +export * from './compoundInputNumberFilter'; +export * from './compoundInputFilter'; +export * from './compoundDateFilter'; +export * from './autoCompleteFilter'; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts new file mode 100644 index 000000000..0b72aec05 --- /dev/null +++ b/packages/common/src/formatters/formatters.index.ts @@ -0,0 +1,228 @@ +import { FieldType } from '../enums/index'; +import { getAssociatedDateFormatter } from './formatterUtilities'; +import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; +import { arrayToCsvFormatter } from './arrayToCsvFormatter'; +import { boldFormatter } from './boldFormatter'; +import { checkboxFormatter } from './checkboxFormatter'; +import { checkmarkFormatter } from './checkmarkFormatter'; +import { checkmarkMaterialFormatter } from './checkmarkMaterialFormatter'; +import { collectionFormatter } from './collectionFormatter'; +import { collectionEditorFormatter } from './collectionEditorFormatter'; +import { complexObjectFormatter } from './complexObjectFormatter'; +import { decimalFormatter } from './decimalFormatter'; +import { deleteIconFormatter } from './deleteIconFormatter'; +import { dollarColoredBoldFormatter } from './dollarColoredBoldFormatter'; +import { dollarColoredFormatter } from './dollarColoredFormatter'; +import { dollarFormatter } from './dollarFormatter'; +import { editIconFormatter } from './editIconFormatter'; +import { hyperlinkFormatter } from './hyperlinkFormatter'; +import { iconFormatter } from './iconFormatter'; +import { infoIconFormatter } from './infoIconFormatter'; +import { italicFormatter } from './italicFormatter'; +import { lowercaseFormatter } from './lowercaseFormatter'; +import { maskFormatter } from './maskFormatter'; +import { multipleFormatter } from './multipleFormatter'; +import { percentFormatter } from './percentFormatter'; +import { percentCompleteBarFormatter } from './percentCompleteBarFormatter'; +import { percentCompleteBarWithTextFormatter } from './percentCompleteBarWithTextFormatter'; +import { percentCompleteFormatter } from './percentCompleteFormatter'; +import { percentSymbolFormatter } from './percentSymbolFormatter'; +import { progressBarFormatter } from './progressBarFormatter'; +import { translateFormatter } from './translateFormatter'; +import { treeFormatter } from './treeFormatter'; +import { translateBooleanFormatter } from './translateBooleanFormatter'; +import { uppercaseFormatter } from './uppercaseFormatter'; +import { yesNoFormatter } from './yesNoFormatter'; + +/** Provides a list of different Formatters that will change the cell value displayed in the UI */ +export const Formatters = { + /** + * Takes an array of complex objects converts it to a comma delimited string. + * Requires to pass an array of "propertyNames" in the column definition the generic "params" property + * For example, if we have an array of user objects that have the property of firstName & lastName then we need to pass in your column definition:: + * params: { propertyNames: ['firtName', 'lastName'] } => 'John Doe, Jane Doe' + */ + arrayObjectToCsv: arrayObjectToCsvFormatter, + + /** Takes an array of string and converts it to a comma delimited string */ + arrayToCsv: arrayToCsvFormatter, + + /** show value in bold font weight */ + bold: boldFormatter, + + /** When value is filled (true), it will display a checkbox Unicode icon */ + checkbox: checkboxFormatter, + + /** + * When value is filled, or if the value is a number and is bigger than 0, it will display a Font-Awesome icon (fa-check). + * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) + * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. + * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important + */ + checkmark: checkmarkFormatter, + + /** + * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). + * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) + * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. + * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important + */ + checkmarkMaterial: checkmarkMaterialFormatter, + + /** + * Takes a complex data object and return the data under that property (for example: "user.firstName" will return the first name "John") + * You can pass the complex structure in the "field" or the "params: { complexField: string }" properties. + * For example:: + * this.columnDefs = [{ id: 'username', field: 'user.firstName', ... }] + * OR this.columnDefs = [{ id: 'username', field: 'user', params: { complexField: 'user.firstName' }, ... }] + */ + complexObject: complexObjectFormatter, + + /** + * 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 = [1, 2]; + */ + collection: collectionFormatter, + + /** + * Roughly the same as the "collectionFormatter" except that it + * looks up values from the columnDefinition.editor.collection (instead of params) 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 + * { editor: { collection: [{ value: 1, label: 'foo'}, {value: 2, label: 'bar' }] }} + * const dataset = [1, 2]; + */ + collectionEditor: collectionEditorFormatter, + + /** Takes a Date object and displays it as an ISO Date format (YYYY-MM-DD) */ + dateIso: getAssociatedDateFormatter(FieldType.dateIso, '-'), + + /** Takes a Date object and displays it as an ISO Date+Time format (YYYY-MM-DD HH:mm:ss) */ + dateTimeIso: getAssociatedDateFormatter(FieldType.dateTimeIso, '-'), + + /** Takes a Date object and displays it as an ISO Date+Time (without seconds) format (YYYY-MM-DD HH:mm) */ + dateTimeShortIso: getAssociatedDateFormatter(FieldType.dateTimeShortIso, '-'), + + /** Takes a Date object and displays it as an ISO Date+Time+(am/pm) format (YYYY-MM-DD h:mm:ss a) */ + dateTimeIsoAmPm: getAssociatedDateFormatter(FieldType.dateTimeIsoAmPm, '-'), + + /** Takes a Date object and displays it as an Euro Date format (DD/MM/YYYY) */ + dateEuro: getAssociatedDateFormatter(FieldType.dateEuro, '/'), + + /** Takes a Date object and displays it as an Euro Date+Time format (DD/MM/YYYY HH:mm:ss) */ + dateTimeEuro: getAssociatedDateFormatter(FieldType.dateTimeEuro, '/'), + + /** Takes a Date object and displays it as an Euro Date+Time (without seconds) format (DD/MM/YYYY HH:mm) */ + dateTimeShortEuro: getAssociatedDateFormatter(FieldType.dateTimeShortEuro, '/'), + + /** Takes a Date object and displays it as an Euro Date+Time+(am/pm) format (DD/MM/YYYY hh:mm:ss a) */ + dateTimeEuroAmPm: getAssociatedDateFormatter(FieldType.dateTimeEuroAmPm, '/'), + + /** Takes a Date object and displays it as an US Date format (MM/DD/YYYY) */ + dateUs: getAssociatedDateFormatter(FieldType.dateUs, '/'), + + /** Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss) */ + dateTimeUs: getAssociatedDateFormatter(FieldType.dateTimeUs, '/'), + + /** Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss) */ + dateTimeShortUs: getAssociatedDateFormatter(FieldType.dateTimeShortUs, '/'), + + /** Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a) */ + dateTimeUsAmPm: getAssociatedDateFormatter(FieldType.dateTimeUsAmPm, '/'), + + /** Displays a Font-Awesome delete icon (fa-trash) */ + deleteIcon: deleteIconFormatter, + + /** + * Display the value as x decimals formatted, defaults to 2 decimals. + * You can pass "minDecimal" and/or "maxDecimal" to the "params" property. + * For example:: `{ formatter: Formatters.decimal, params: { minDecimal: 2, maxDecimal: 4 }}` + */ + decimal: decimalFormatter, + + /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value */ + dollar: dollarFormatter, + + /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value */ + dollarColored: dollarColoredFormatter, + + /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value, show it in bold font weight as well */ + dollarColoredBold: dollarColoredBoldFormatter, + + /** Displays a Font-Awesome edit icon (fa-pencil) */ + editIcon: editIconFormatter, + + /** + * Takes an hyperlink cell value and transforms it into a real hyperlink, given that the value starts with 1 of these (http|ftp|https). + * The structure will be "hyperlink" + * + * You can optionally change the hyperlink text displayed by using the generic params "hyperlinkText" in the column definition + * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website' } } will display "Company Website" + * + * You can also optionally provide the hyperlink URL by using the generic params "hyperlinkUrl" in the column definition + * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website', hyperlinkUrl: 'http://www.somewhere.com' } } will display "Company Website" + */ + hyperlink: hyperlinkFormatter, + + /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ + icon: iconFormatter, + + /** Displays a Font-Awesome edit icon (fa-info-circle) */ + infoIcon: infoIconFormatter, + + /** show input text value as italic text */ + italic: italicFormatter, + + /** Takes a value and displays it all lowercase */ + lowercase: lowercaseFormatter, + + /** + * Takes a value display it according to a mask provided + * e.: 1234567890 with mask "(000) 000-0000" will display "(123) 456-7890" + */ + mask: maskFormatter, + + /** + * You can pipe multiple formatters (executed in sequence), use params to pass the list of formatters. + * Requires to pass an array of "formatters" in the column definition the generic "params" property + * For example:: + * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.lowercase, Formatters.uppercase ] } + */ + multiple: multipleFormatter, + + /** Takes a cell value number (between 0.0-1.0) and displays a red (<50) or green (>=50) bar */ + percent: percentFormatter, + + /** Takes a cell value number (between 0.0-100) and displays a red (<50) or green (>=50) bar */ + percentComplete: percentCompleteFormatter, + + /** Takes a cell value number (between 0-100) and displays a SlickGrid custom "percent-complete-bar" a red (<30), silver (>30 & <70) or green (>=70) bar */ + percentCompleteBar: percentCompleteBarFormatter, + + /** Takes a cell value number (between 0-100) and displays SlickGrid custom "percent-complete-bar" with Text a red (<30), silver (>30 & <70) or green (>=70) bar */ + percentCompleteBarWithText: percentCompleteBarWithTextFormatter, + + /** Takes a cell value number (between 0-100) and add the "%" after the number */ + percentSymbol: percentSymbolFormatter, + + /** Takes a cell value number (between 0-100) and displays Bootstrap "progress-bar" a red (<30), silver (>30 & <70) or green (>=70) bar */ + progressBar: progressBarFormatter, + + /** Takes a cell value and translates it (i18n). Requires an instance of the Translate Service:: `i18n: this.translate */ + translate: translateFormatter, + + /** Takes a boolean value, cast it to upperCase string and finally translates it (i18n). */ + translateBoolean: translateBooleanFormatter, + + /** Formatter that must be use with a Tree Data column */ + tree: treeFormatter, + + /** Takes a value and displays it all uppercase */ + uppercase: uppercaseFormatter, + + /** Takes a boolean value and display a string 'Yes' or 'No' */ + yesNo: yesNoFormatter +}; diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts index 0b72aec05..dacfced9e 100644 --- a/packages/common/src/formatters/index.ts +++ b/packages/common/src/formatters/index.ts @@ -1,228 +1,35 @@ -import { FieldType } from '../enums/index'; -import { getAssociatedDateFormatter } from './formatterUtilities'; -import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; -import { arrayToCsvFormatter } from './arrayToCsvFormatter'; -import { boldFormatter } from './boldFormatter'; -import { checkboxFormatter } from './checkboxFormatter'; -import { checkmarkFormatter } from './checkmarkFormatter'; -import { checkmarkMaterialFormatter } from './checkmarkMaterialFormatter'; -import { collectionFormatter } from './collectionFormatter'; -import { collectionEditorFormatter } from './collectionEditorFormatter'; -import { complexObjectFormatter } from './complexObjectFormatter'; -import { decimalFormatter } from './decimalFormatter'; -import { deleteIconFormatter } from './deleteIconFormatter'; -import { dollarColoredBoldFormatter } from './dollarColoredBoldFormatter'; -import { dollarColoredFormatter } from './dollarColoredFormatter'; -import { dollarFormatter } from './dollarFormatter'; -import { editIconFormatter } from './editIconFormatter'; -import { hyperlinkFormatter } from './hyperlinkFormatter'; -import { iconFormatter } from './iconFormatter'; -import { infoIconFormatter } from './infoIconFormatter'; -import { italicFormatter } from './italicFormatter'; -import { lowercaseFormatter } from './lowercaseFormatter'; -import { maskFormatter } from './maskFormatter'; -import { multipleFormatter } from './multipleFormatter'; -import { percentFormatter } from './percentFormatter'; -import { percentCompleteBarFormatter } from './percentCompleteBarFormatter'; -import { percentCompleteBarWithTextFormatter } from './percentCompleteBarWithTextFormatter'; -import { percentCompleteFormatter } from './percentCompleteFormatter'; -import { percentSymbolFormatter } from './percentSymbolFormatter'; -import { progressBarFormatter } from './progressBarFormatter'; -import { translateFormatter } from './translateFormatter'; -import { treeFormatter } from './treeFormatter'; -import { translateBooleanFormatter } from './translateBooleanFormatter'; -import { uppercaseFormatter } from './uppercaseFormatter'; -import { yesNoFormatter } from './yesNoFormatter'; - -/** Provides a list of different Formatters that will change the cell value displayed in the UI */ -export const Formatters = { - /** - * Takes an array of complex objects converts it to a comma delimited string. - * Requires to pass an array of "propertyNames" in the column definition the generic "params" property - * For example, if we have an array of user objects that have the property of firstName & lastName then we need to pass in your column definition:: - * params: { propertyNames: ['firtName', 'lastName'] } => 'John Doe, Jane Doe' - */ - arrayObjectToCsv: arrayObjectToCsvFormatter, - - /** Takes an array of string and converts it to a comma delimited string */ - arrayToCsv: arrayToCsvFormatter, - - /** show value in bold font weight */ - bold: boldFormatter, - - /** When value is filled (true), it will display a checkbox Unicode icon */ - checkbox: checkboxFormatter, - - /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Font-Awesome icon (fa-check). - * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) - * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. - * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important - */ - checkmark: checkmarkFormatter, - - /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). - * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) - * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. - * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important - */ - checkmarkMaterial: checkmarkMaterialFormatter, - - /** - * Takes a complex data object and return the data under that property (for example: "user.firstName" will return the first name "John") - * You can pass the complex structure in the "field" or the "params: { complexField: string }" properties. - * For example:: - * this.columnDefs = [{ id: 'username', field: 'user.firstName', ... }] - * OR this.columnDefs = [{ id: 'username', field: 'user', params: { complexField: 'user.firstName' }, ... }] - */ - complexObject: complexObjectFormatter, - - /** - * 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 = [1, 2]; - */ - collection: collectionFormatter, - - /** - * Roughly the same as the "collectionFormatter" except that it - * looks up values from the columnDefinition.editor.collection (instead of params) 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 - * { editor: { collection: [{ value: 1, label: 'foo'}, {value: 2, label: 'bar' }] }} - * const dataset = [1, 2]; - */ - collectionEditor: collectionEditorFormatter, - - /** Takes a Date object and displays it as an ISO Date format (YYYY-MM-DD) */ - dateIso: getAssociatedDateFormatter(FieldType.dateIso, '-'), - - /** Takes a Date object and displays it as an ISO Date+Time format (YYYY-MM-DD HH:mm:ss) */ - dateTimeIso: getAssociatedDateFormatter(FieldType.dateTimeIso, '-'), - - /** Takes a Date object and displays it as an ISO Date+Time (without seconds) format (YYYY-MM-DD HH:mm) */ - dateTimeShortIso: getAssociatedDateFormatter(FieldType.dateTimeShortIso, '-'), - - /** Takes a Date object and displays it as an ISO Date+Time+(am/pm) format (YYYY-MM-DD h:mm:ss a) */ - dateTimeIsoAmPm: getAssociatedDateFormatter(FieldType.dateTimeIsoAmPm, '-'), - - /** Takes a Date object and displays it as an Euro Date format (DD/MM/YYYY) */ - dateEuro: getAssociatedDateFormatter(FieldType.dateEuro, '/'), - - /** Takes a Date object and displays it as an Euro Date+Time format (DD/MM/YYYY HH:mm:ss) */ - dateTimeEuro: getAssociatedDateFormatter(FieldType.dateTimeEuro, '/'), - - /** Takes a Date object and displays it as an Euro Date+Time (without seconds) format (DD/MM/YYYY HH:mm) */ - dateTimeShortEuro: getAssociatedDateFormatter(FieldType.dateTimeShortEuro, '/'), - - /** Takes a Date object and displays it as an Euro Date+Time+(am/pm) format (DD/MM/YYYY hh:mm:ss a) */ - dateTimeEuroAmPm: getAssociatedDateFormatter(FieldType.dateTimeEuroAmPm, '/'), - - /** Takes a Date object and displays it as an US Date format (MM/DD/YYYY) */ - dateUs: getAssociatedDateFormatter(FieldType.dateUs, '/'), - - /** Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss) */ - dateTimeUs: getAssociatedDateFormatter(FieldType.dateTimeUs, '/'), - - /** Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss) */ - dateTimeShortUs: getAssociatedDateFormatter(FieldType.dateTimeShortUs, '/'), - - /** Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a) */ - dateTimeUsAmPm: getAssociatedDateFormatter(FieldType.dateTimeUsAmPm, '/'), - - /** Displays a Font-Awesome delete icon (fa-trash) */ - deleteIcon: deleteIconFormatter, - - /** - * Display the value as x decimals formatted, defaults to 2 decimals. - * You can pass "minDecimal" and/or "maxDecimal" to the "params" property. - * For example:: `{ formatter: Formatters.decimal, params: { minDecimal: 2, maxDecimal: 4 }}` - */ - decimal: decimalFormatter, - - /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value */ - dollar: dollarFormatter, - - /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value */ - dollarColored: dollarColoredFormatter, - - /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value, show it in bold font weight as well */ - dollarColoredBold: dollarColoredBoldFormatter, - - /** Displays a Font-Awesome edit icon (fa-pencil) */ - editIcon: editIconFormatter, - - /** - * Takes an hyperlink cell value and transforms it into a real hyperlink, given that the value starts with 1 of these (http|ftp|https). - * The structure will be "hyperlink" - * - * You can optionally change the hyperlink text displayed by using the generic params "hyperlinkText" in the column definition - * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website' } } will display "Company Website" - * - * You can also optionally provide the hyperlink URL by using the generic params "hyperlinkUrl" in the column definition - * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website', hyperlinkUrl: 'http://www.somewhere.com' } } will display "Company Website" - */ - hyperlink: hyperlinkFormatter, - - /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ - icon: iconFormatter, - - /** Displays a Font-Awesome edit icon (fa-info-circle) */ - infoIcon: infoIconFormatter, - - /** show input text value as italic text */ - italic: italicFormatter, - - /** Takes a value and displays it all lowercase */ - lowercase: lowercaseFormatter, - - /** - * Takes a value display it according to a mask provided - * e.: 1234567890 with mask "(000) 000-0000" will display "(123) 456-7890" - */ - mask: maskFormatter, - - /** - * You can pipe multiple formatters (executed in sequence), use params to pass the list of formatters. - * Requires to pass an array of "formatters" in the column definition the generic "params" property - * For example:: - * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.lowercase, Formatters.uppercase ] } - */ - multiple: multipleFormatter, - - /** Takes a cell value number (between 0.0-1.0) and displays a red (<50) or green (>=50) bar */ - percent: percentFormatter, - - /** Takes a cell value number (between 0.0-100) and displays a red (<50) or green (>=50) bar */ - percentComplete: percentCompleteFormatter, - - /** Takes a cell value number (between 0-100) and displays a SlickGrid custom "percent-complete-bar" a red (<30), silver (>30 & <70) or green (>=70) bar */ - percentCompleteBar: percentCompleteBarFormatter, - - /** Takes a cell value number (between 0-100) and displays SlickGrid custom "percent-complete-bar" with Text a red (<30), silver (>30 & <70) or green (>=70) bar */ - percentCompleteBarWithText: percentCompleteBarWithTextFormatter, - - /** Takes a cell value number (between 0-100) and add the "%" after the number */ - percentSymbol: percentSymbolFormatter, - - /** Takes a cell value number (between 0-100) and displays Bootstrap "progress-bar" a red (<30), silver (>30 & <70) or green (>=70) bar */ - progressBar: progressBarFormatter, - - /** Takes a cell value and translates it (i18n). Requires an instance of the Translate Service:: `i18n: this.translate */ - translate: translateFormatter, - - /** Takes a boolean value, cast it to upperCase string and finally translates it (i18n). */ - translateBoolean: translateBooleanFormatter, - - /** Formatter that must be use with a Tree Data column */ - tree: treeFormatter, - - /** Takes a value and displays it all uppercase */ - uppercase: uppercaseFormatter, - - /** Takes a boolean value and display a string 'Yes' or 'No' */ - yesNo: yesNoFormatter -}; +export * from './collectionFormatter'; +export * from './italicFormatter'; +export * from './infoIconFormatter'; +export * from './iconFormatter'; +export * from './hyperlinkFormatter'; +export * from './formatterUtilities'; +export * from './lowercaseFormatter'; +export * from './formatters.index'; +export * from './editIconFormatter'; +export * from './dollarFormatter'; +export * from './maskFormatter'; +export * from './dollarColoredFormatter'; +export * from './dollarColoredBoldFormatter'; +export * from './deleteIconFormatter'; +export * from './multipleFormatter'; +export * from './decimalFormatter'; +export * from './complexObjectFormatter'; +export * from './collectionEditorFormatter'; +export * from './percentCompleteFormatter'; +export * from './percentCompleteBarWithTextFormatter'; +export * from './percentCompleteBarFormatter'; +export * from './percentFormatter'; +export * from './checkmarkMaterialFormatter'; +export * from './checkmarkFormatter'; +export * from './checkboxFormatter'; +export * from './boldFormatter'; +export * from './arrayToCsvFormatter'; +export * from './arrayObjectToCsvFormatter'; +export * from './yesNoFormatter'; +export * from './uppercaseFormatter'; +export * from './treeFormatter'; +export * from './translateFormatter'; +export * from './translateBooleanFormatter'; +export * from './progressBarFormatter'; +export * from './percentSymbolFormatter'; diff --git a/packages/common/src/grouping-formatters/groupingFormatters.index.ts b/packages/common/src/grouping-formatters/groupingFormatters.index.ts new file mode 100644 index 000000000..b5a63eadc --- /dev/null +++ b/packages/common/src/grouping-formatters/groupingFormatters.index.ts @@ -0,0 +1,88 @@ +import { Column } from './../interfaces/index'; +import { avgTotalsPercentageFormatter } from './avgTotalsPercentageFormatter'; +import { avgTotalsDollarFormatter } from './avgTotalsDollarFormatter'; +import { avgTotalsFormatter } from './avgTotalsFormatter'; +import { minTotalsFormatter } from './minTotalsFormatter'; +import { maxTotalsFormatter } from './maxTotalsFormatter'; +import { sumTotalsColoredFormatter } from './sumTotalsColoredFormatter'; +import { sumTotalsDollarColoredBoldFormatter } from './sumTotalsDollarColoredBoldFormatter'; +import { sumTotalsDollarColoredFormatter } from './sumTotalsDollarColoredFormatter'; +import { sumTotalsDollarBoldFormatter } from './sumTotalsDollarBoldFormatter'; +import { sumTotalsDollarFormatter } from './sumTotalsDollarFormatter'; +import { sumTotalsFormatter } from './sumTotalsFormatter'; +import { sumTotalsBoldFormatter } from './sumTotalsBoldFormatter'; + +/** Provides a list of different Formatters that will change the cell value displayed in the UI */ +export const GroupTotalFormatters = { + /** + * Average all the column totals + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + avgTotals: avgTotalsFormatter, + + /** + * Average all the column totals and display '$' at the end of the value + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + avgTotalsDollar: avgTotalsDollarFormatter, + + /** + * Average all the column totals and display '%' at the end of the value + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + avgTotalsPercentage: avgTotalsPercentageFormatter, + + /** + * Show max value of all the column totals + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + maxTotals: maxTotalsFormatter, + + /** + * Show min value of all the column totals + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + minTotals: minTotalsFormatter, + + /** + * Sums up all the column totals + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotals: sumTotalsFormatter, + + /** + * Sums up all the column totals and display it in bold font weight + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsBold: sumTotalsBoldFormatter, + + /** + * Sums up all the column totals, change color of text to red/green on negative/positive value + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsColored: sumTotalsColoredFormatter, + + /** + * Sums up all the column totals and display dollar sign + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsDollar: sumTotalsDollarFormatter, + + /** + * Sums up all the column totals and display dollar sign and show it in bold font weight + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsDollarBold: sumTotalsDollarBoldFormatter, + + /** + * Sums up all the column totals, change color of text to red/green on negative/positive value + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsDollarColored: sumTotalsDollarColoredFormatter, + + /** + * Sums up all the column totals, change color of text to red/green on negative/positive value, show it in bold font weight as well + * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } + */ + sumTotalsDollarColoredBold: sumTotalsDollarColoredBoldFormatter, +}; diff --git a/packages/common/src/grouping-formatters/index.ts b/packages/common/src/grouping-formatters/index.ts index b5a63eadc..4b3543ebc 100644 --- a/packages/common/src/grouping-formatters/index.ts +++ b/packages/common/src/grouping-formatters/index.ts @@ -1,88 +1,13 @@ -import { Column } from './../interfaces/index'; -import { avgTotalsPercentageFormatter } from './avgTotalsPercentageFormatter'; -import { avgTotalsDollarFormatter } from './avgTotalsDollarFormatter'; -import { avgTotalsFormatter } from './avgTotalsFormatter'; -import { minTotalsFormatter } from './minTotalsFormatter'; -import { maxTotalsFormatter } from './maxTotalsFormatter'; -import { sumTotalsColoredFormatter } from './sumTotalsColoredFormatter'; -import { sumTotalsDollarColoredBoldFormatter } from './sumTotalsDollarColoredBoldFormatter'; -import { sumTotalsDollarColoredFormatter } from './sumTotalsDollarColoredFormatter'; -import { sumTotalsDollarBoldFormatter } from './sumTotalsDollarBoldFormatter'; -import { sumTotalsDollarFormatter } from './sumTotalsDollarFormatter'; -import { sumTotalsFormatter } from './sumTotalsFormatter'; -import { sumTotalsBoldFormatter } from './sumTotalsBoldFormatter'; - -/** Provides a list of different Formatters that will change the cell value displayed in the UI */ -export const GroupTotalFormatters = { - /** - * Average all the column totals - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - avgTotals: avgTotalsFormatter, - - /** - * Average all the column totals and display '$' at the end of the value - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - avgTotalsDollar: avgTotalsDollarFormatter, - - /** - * Average all the column totals and display '%' at the end of the value - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - avgTotalsPercentage: avgTotalsPercentageFormatter, - - /** - * Show max value of all the column totals - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - maxTotals: maxTotalsFormatter, - - /** - * Show min value of all the column totals - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - minTotals: minTotalsFormatter, - - /** - * Sums up all the column totals - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g.: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotals: sumTotalsFormatter, - - /** - * Sums up all the column totals and display it in bold font weight - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsBold: sumTotalsBoldFormatter, - - /** - * Sums up all the column totals, change color of text to red/green on negative/positive value - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsColored: sumTotalsColoredFormatter, - - /** - * Sums up all the column totals and display dollar sign - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsDollar: sumTotalsDollarFormatter, - - /** - * Sums up all the column totals and display dollar sign and show it in bold font weight - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsDollarBold: sumTotalsDollarBoldFormatter, - - /** - * Sums up all the column totals, change color of text to red/green on negative/positive value - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsDollarColored: sumTotalsDollarColoredFormatter, - - /** - * Sums up all the column totals, change color of text to red/green on negative/positive value, show it in bold font weight as well - * Extra options available in "params":: "groupFormatterPrefix" and "groupFormatterSuffix", e.g: params: { groupFormatterPrefix: 'Total: ', groupFormatterSuffix: '$' } - */ - sumTotalsDollarColoredBold: sumTotalsDollarColoredBoldFormatter, -}; +export * from './sumTotalsFormatter'; +export * from './sumTotalsDollarFormatter'; +export * from './sumTotalsDollarColoredFormatter'; +export * from './sumTotalsDollarColoredBoldFormatter'; +export * from './sumTotalsDollarBoldFormatter'; +export * from './sumTotalsColoredFormatter'; +export * from './sumTotalsBoldFormatter'; +export * from './minTotalsFormatter'; +export * from './maxTotalsFormatter'; +export * from './groupingFormatters.index'; +export * from './avgTotalsPercentageFormatter'; +export * from './avgTotalsFormatter'; +export * from './avgTotalsDollarFormatter'; diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index abf39b7d6..7e261aa9e 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -7,21 +7,29 @@ export * from './enums/index'; export * from './interfaces/index'; export * from './services/index'; export * from './aggregators/index'; +export * from './aggregators/aggregators.index'; export * from './editors/index'; +export * from './editors/editors.index'; export * from './extensions/index'; export * from './filter-conditions/index'; +export * from './filter-conditions/filterConditions.index'; export * from './filters/index'; +export * from './filters/filters.index'; export * from './filters/filterFactory'; export * from './formatters/index'; +export * from './formatters/formatters.index'; export * from './grouping-formatters/index'; +export * from './grouping-formatters/groupingFormatters.index'; export * from './sortComparers/index'; +export * from './sortComparers/sortComparers.index'; import * as Enums from './enums/index'; +import * as Interfaces from './interfaces/index'; import * as BackendUtilities from './services/backend-utilities'; import * as ServiceUtilities from './services/utilities'; import * as SortUtilities from './sortComparers/sortUtilities'; const Utilities = { ...BackendUtilities, ...ServiceUtilities, ...SortUtilities }; -export { Enums }; +export { Enums, Interfaces }; export { Utilities }; export { SlickgridConfig } from './slickgrid-config'; diff --git a/packages/common/src/sortComparers/index.ts b/packages/common/src/sortComparers/index.ts index fa0e9c408..f6533c06e 100644 --- a/packages/common/src/sortComparers/index.ts +++ b/packages/common/src/sortComparers/index.ts @@ -1,105 +1,6 @@ -import { numericSortComparer } from './numericSortComparer'; -import { objectStringSortComparer } from './objectStringSortComparer'; -import { stringSortComparer } from './stringSortComparer'; -import { getAssociatedDateSortComparer } from './dateUtilities'; -import { FieldType } from '../enums/fieldType.enum'; - -// export the Sort Utilities so they could be used by others +export * from './objectStringSortComparer'; +export * from './stringSortComparer'; export * from './sortUtilities'; - -export const SortComparers = { - /** SortComparer method to sort values by Date object type (uses Moment.js ISO_8601 standard format, optionally include time) */ - date: getAssociatedDateSortComparer(FieldType.date), - - /** - * SortComparer method to sort values by Date formatted as ISO date (excluding time), - * If you wish to optionally include time simply use the "SortComparers.date" which work with/without time - */ - dateIso: getAssociatedDateSortComparer(FieldType.dateIso), - - /** SortComparer method to sort values by Date formatted as (YYYY-MM-DDTHH:mm:ss.SSSZ) */ - dateUtc: getAssociatedDateSortComparer(FieldType.dateUtc), - - /** SortComparer method to sort values by Date and Time (native Date object) */ - dateTime: getAssociatedDateSortComparer(FieldType.dateTime), - - /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD HH:mm:ss) */ - dateTimeIso: getAssociatedDateSortComparer(FieldType.dateTimeIso), - - /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD h:mm:ss a) */ - dateTimeIsoAmPm: getAssociatedDateSortComparer(FieldType.dateTimeIsoAmPm), - - /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD h:mm:ss A) */ - dateTimeIsoAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeIsoAM_PM), - - /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD HH:mm) */ - dateTimeShortIso: getAssociatedDateSortComparer(FieldType.dateTimeShortIso), - - /** SortComparer method to sort values by Date formatted as Euro date (DD/MM/YYYY) */ - dateEuro: getAssociatedDateSortComparer(FieldType.dateEuro), - - /** SortComparer method to sort values by Date formatted as Euro short date (D/M/YY) */ - dateEuroShort: getAssociatedDateSortComparer(FieldType.dateEuroShort), - - /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY HH:mm) */ - dateTimeShortEuro: getAssociatedDateSortComparer(FieldType.dateTimeShortEuro), - - /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY HH:mm:ss) */ - dateTimeEuro: getAssociatedDateSortComparer(FieldType.dateTimeEuro), - - /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY hh:mm:ss a) */ - dateTimeEuroAmPm: getAssociatedDateSortComparer(FieldType.dateTimeEuroAmPm), - - /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY hh:mm:ss A) */ - dateTimeEuroAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeEuroAM_PM), - - /** SortComparer method to sort values by Date formatted as (D/M/YY H:m:s) */ - dateTimeEuroShort: getAssociatedDateSortComparer(FieldType.dateTimeEuroShort), - - /** SortComparer method to sort values by Date formatted as (D/M/YY h:m:s a) */ - dateTimeEuroShortAmPm: getAssociatedDateSortComparer(FieldType.dateTimeEuroShortAmPm), - - /** SortComparer method to sort values by Date formatted as (D/M/YY h:m:s A) */ - dateTimeEuroShortAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeEuroShortAM_PM), - - /** SortComparer method to sort values by Date formatted as US date (MM/DD/YYYY) */ - dateUs: getAssociatedDateSortComparer(FieldType.dateUs), - - /** SortComparer method to sort values by Date formatted as US short date (M/D/YY) */ - dateUsShort: getAssociatedDateSortComparer(FieldType.dateUsShort), - - /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY HH:mm) */ - dateTimeShortUs: getAssociatedDateSortComparer(FieldType.dateTimeShortUs), - - /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY HH:mm:s) */ - dateTimeUs: getAssociatedDateSortComparer(FieldType.dateTimeUs), - - /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY hh:mm:ss a) */ - dateTimeUsAmPm: getAssociatedDateSortComparer(FieldType.dateTimeUsAmPm), - - /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY hh:mm:ss A) */ - dateTimeUsAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeUsAM_PM), - - /** SortComparer method to sort values by Date formatted as (M/D/YY H:m:s) */ - dateTimeUsShort: getAssociatedDateSortComparer(FieldType.dateTimeUsShort), - - /** SortComparer method to sort values by Date formatted as (M/D/YY h:m:s a) */ - dateTimeUsShortAmPm: getAssociatedDateSortComparer(FieldType.dateTimeUsShortAmPm), - - /** SortComparer method to sort values by Date formatted as (M/D/YY h:m:s A) */ - dateTimeUsShortAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeUsShortAM_PM), - - /** SortComparer method to sort values as numeric fields */ - numeric: numericSortComparer, - - /** - * SortComparer method to sort object values with a "dataKey" provided in your column definition, it's data content must be of type string - * Example: - * columnDef = { id='user', field: 'user', ..., dataKey: 'firstName', SortComparer: SortComparers.objectString } - * collection = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Bob', lastName: 'Cash' }] - */ - objectString: objectStringSortComparer, - - /** SortComparer method to sort values as regular strings */ - string: stringSortComparer -}; +export * from './sortComparers.index'; +export * from './numericSortComparer'; +export * from './dateUtilities'; diff --git a/packages/common/src/sortComparers/sortComparers.index.ts b/packages/common/src/sortComparers/sortComparers.index.ts new file mode 100644 index 000000000..fa0e9c408 --- /dev/null +++ b/packages/common/src/sortComparers/sortComparers.index.ts @@ -0,0 +1,105 @@ +import { numericSortComparer } from './numericSortComparer'; +import { objectStringSortComparer } from './objectStringSortComparer'; +import { stringSortComparer } from './stringSortComparer'; +import { getAssociatedDateSortComparer } from './dateUtilities'; +import { FieldType } from '../enums/fieldType.enum'; + +// export the Sort Utilities so they could be used by others +export * from './sortUtilities'; + +export const SortComparers = { + /** SortComparer method to sort values by Date object type (uses Moment.js ISO_8601 standard format, optionally include time) */ + date: getAssociatedDateSortComparer(FieldType.date), + + /** + * SortComparer method to sort values by Date formatted as ISO date (excluding time), + * If you wish to optionally include time simply use the "SortComparers.date" which work with/without time + */ + dateIso: getAssociatedDateSortComparer(FieldType.dateIso), + + /** SortComparer method to sort values by Date formatted as (YYYY-MM-DDTHH:mm:ss.SSSZ) */ + dateUtc: getAssociatedDateSortComparer(FieldType.dateUtc), + + /** SortComparer method to sort values by Date and Time (native Date object) */ + dateTime: getAssociatedDateSortComparer(FieldType.dateTime), + + /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD HH:mm:ss) */ + dateTimeIso: getAssociatedDateSortComparer(FieldType.dateTimeIso), + + /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD h:mm:ss a) */ + dateTimeIsoAmPm: getAssociatedDateSortComparer(FieldType.dateTimeIsoAmPm), + + /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD h:mm:ss A) */ + dateTimeIsoAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeIsoAM_PM), + + /** SortComparer method to sort values by Date formatted as (YYYY-MM-DD HH:mm) */ + dateTimeShortIso: getAssociatedDateSortComparer(FieldType.dateTimeShortIso), + + /** SortComparer method to sort values by Date formatted as Euro date (DD/MM/YYYY) */ + dateEuro: getAssociatedDateSortComparer(FieldType.dateEuro), + + /** SortComparer method to sort values by Date formatted as Euro short date (D/M/YY) */ + dateEuroShort: getAssociatedDateSortComparer(FieldType.dateEuroShort), + + /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY HH:mm) */ + dateTimeShortEuro: getAssociatedDateSortComparer(FieldType.dateTimeShortEuro), + + /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY HH:mm:ss) */ + dateTimeEuro: getAssociatedDateSortComparer(FieldType.dateTimeEuro), + + /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY hh:mm:ss a) */ + dateTimeEuroAmPm: getAssociatedDateSortComparer(FieldType.dateTimeEuroAmPm), + + /** SortComparer method to sort values by Date formatted as (DD/MM/YYYY hh:mm:ss A) */ + dateTimeEuroAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeEuroAM_PM), + + /** SortComparer method to sort values by Date formatted as (D/M/YY H:m:s) */ + dateTimeEuroShort: getAssociatedDateSortComparer(FieldType.dateTimeEuroShort), + + /** SortComparer method to sort values by Date formatted as (D/M/YY h:m:s a) */ + dateTimeEuroShortAmPm: getAssociatedDateSortComparer(FieldType.dateTimeEuroShortAmPm), + + /** SortComparer method to sort values by Date formatted as (D/M/YY h:m:s A) */ + dateTimeEuroShortAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeEuroShortAM_PM), + + /** SortComparer method to sort values by Date formatted as US date (MM/DD/YYYY) */ + dateUs: getAssociatedDateSortComparer(FieldType.dateUs), + + /** SortComparer method to sort values by Date formatted as US short date (M/D/YY) */ + dateUsShort: getAssociatedDateSortComparer(FieldType.dateUsShort), + + /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY HH:mm) */ + dateTimeShortUs: getAssociatedDateSortComparer(FieldType.dateTimeShortUs), + + /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY HH:mm:s) */ + dateTimeUs: getAssociatedDateSortComparer(FieldType.dateTimeUs), + + /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY hh:mm:ss a) */ + dateTimeUsAmPm: getAssociatedDateSortComparer(FieldType.dateTimeUsAmPm), + + /** SortComparer method to sort values by Date formatted as (MM/DD/YYYY hh:mm:ss A) */ + dateTimeUsAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeUsAM_PM), + + /** SortComparer method to sort values by Date formatted as (M/D/YY H:m:s) */ + dateTimeUsShort: getAssociatedDateSortComparer(FieldType.dateTimeUsShort), + + /** SortComparer method to sort values by Date formatted as (M/D/YY h:m:s a) */ + dateTimeUsShortAmPm: getAssociatedDateSortComparer(FieldType.dateTimeUsShortAmPm), + + /** SortComparer method to sort values by Date formatted as (M/D/YY h:m:s A) */ + dateTimeUsShortAM_PM: getAssociatedDateSortComparer(FieldType.dateTimeUsShortAM_PM), + + /** SortComparer method to sort values as numeric fields */ + numeric: numericSortComparer, + + /** + * SortComparer method to sort object values with a "dataKey" provided in your column definition, it's data content must be of type string + * Example: + * columnDef = { id='user', field: 'user', ..., dataKey: 'firstName', SortComparer: SortComparers.objectString } + * collection = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Bob', lastName: 'Cash' }] + */ + objectString: objectStringSortComparer, + + /** SortComparer method to sort values as regular strings */ + string: stringSortComparer +}; diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip index d7bd9714b..8786290e2 100644 Binary files a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip and b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip differ diff --git a/packages/vanilla-bundle/package.json b/packages/vanilla-bundle/package.json index 59c2c1113..bfbe16857 100644 --- a/packages/vanilla-bundle/package.json +++ b/packages/vanilla-bundle/package.json @@ -17,13 +17,14 @@ "dev": "webpack --env.development", "dev:watch": "run-p build:watch", "build": "cross-env tsc --build", - "postbuild": "npm-run-all bundle:commonjs", + "postbuild": "npm run bundle:commonjs", "build:watch": "cross-env tsc --incremental --watch", + "prebundle": "npm run delete:dist", "bundle": "npm-run-all bundle:commonjs bundle:es2020 webpack:prod", "bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs", "bundle:es2020": "cross-env tsc --project tsconfig.build.json --outDir dist/es2020 --module es2015 --target es2020", - "prebundle": "npm-run-all delete:dist delete:zip", - "postbundle": "npm-run-all zip:dist", + "prebundle:zip": "npm run delete:zip", + "bundle:zip": "npm run zip:dist", "delete:dist": "cross-env rimraf --maxBusyTries=10 dist", "delete:zip": "cross-env rimraf --maxBusyTries=10 dist-bundle-zip", "webpack:prod": "webpack --env.production", diff --git a/packages/vanilla-bundle/src/index.ts b/packages/vanilla-bundle/src/index.ts index 30b70acc9..6033d53ba 100644 --- a/packages/vanilla-bundle/src/index.ts +++ b/packages/vanilla-bundle/src/index.ts @@ -15,13 +15,20 @@ const Slicker = { Utilities, }; -// expose the bundle on the global "window" object +// expose the bundle on the global "window" object as Slicker if (typeof window !== 'undefined') { (window as any).Slicker = Slicker; } export { BindingService }; -export { Slicker }; +export { Aggregators, Editors, Enums, Filters, Formatters, GroupTotalFormatters, SortComparers, Utilities }; export { SlickVanillaGridBundle }; // just to export the interface +export { Slicker }; export * from './interfaces/index'; export * from './services/index'; + +// re-export all Enums & Interfaces into the Vanilla Grid Bundle, so that we can import any of the models from Package/common or Vanilla Bundle +// for example, we can import Column from the Common Package OR the Vanilla-bundle Package +// import { Column } from '@slickgrid-universal/common'; OR import { Column } from '@slickgrid-universal/vanilla-bundle'; +export * from '@slickgrid-universal/common/dist/commonjs/enums/index'; +export * from '@slickgrid-universal/common/dist/commonjs/interfaces/index';