Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(selectEditors): add select grid editors #22

Merged
merged 4 commits into from
Mar 7, 2018
Merged

feat(selectEditors): add select grid editors #22

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad2a7e3
feat(selectEditors): add select grid editors
jmzagorski Mar 3, 2018
81be263
docs(demo): add singleSelect and multiSelect to example3
jmzagorski Mar 3, 2018
8219631
refactor(editors): use params not filter columnDef prop
jmzagorski Mar 5, 2018
8c32223
refactor(editors): add i18n and open select on cell click
jmzagorski Mar 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 36 additions & 38 deletions aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class MultipleSelectEditor implements Editor {
/**
* The JQuery DOM element
*/
$filterElm: any;
$editorElm: any;
/**
* The slick grid column being edited
*/
Expand All @@ -30,13 +30,13 @@ export class MultipleSelectEditor implements Editor {
/**
* The options label/value object to use in the select list
*/
optionCollection: SelectOption[] = [];
collection: SelectOption[] = [];
/**
* The property name for values in the optionCollection
* The property name for values in the collection
*/
valueName: string;
/**
* The property name for labels in the optionCollection
* The property name for labels in the collection
*/
labelName: string;

Expand All @@ -55,40 +55,39 @@ export class MultipleSelectEditor implements Editor {
}

/**
* The current selected values from the optionCollection
* The current selected values from the collection
*/
get currentValues() {
return this.optionCollection
.filter(c => this.$filterElm.val().indexOf(c[this.valueName].toString()) !== -1)
return this.collection
.filter(c => this.$editorElm.val().indexOf(c[this.valueName].toString()) !== -1)
.map(c => c[this.valueName]);
}

init() {
if (!this.args) {
throw new Error('[Aurelia-SlickGrid] A filter must always have an "init()" ' +
'with valid arguments.');
throw new Error('[Aurelia-SlickGrid] An editor must always have an "init()" with valid arguments.');
}

this.columnDef = this.args.column;

const filterTemplate = this.buildTemplateHtmlString();
const editorTemplate = this.buildTemplateHtmlString();

this.createDomElement(filterTemplate);
this.createDomElement(editorTemplate);
}

applyValue(item: any, state: any): void {
item[this.args.column.field] = state;
}

destroy() {
this.$filterElm.remove();
this.$editorElm.remove();
}

loadValue(item: any): void {
// convert to string because that is how the DOM will return these values
this.defaultValue = item[this.columnDef.field].map((i: any) => i.toString());

this.$filterElm.find('option').each((i: number, $e: any) => {
this.$editorElm.find('option').each((i: number, $e: any) => {
if (this.defaultValue.indexOf($e.value) !== -1) {
$e.selected = true;
} else {
Expand All @@ -104,11 +103,11 @@ export class MultipleSelectEditor implements Editor {
}

focus() {
this.$filterElm.focus();
this.$editorElm.focus();
}

isValueChanged(): boolean {
return !arraysEqual(this.$filterElm.val(), this.defaultValue);
return !arraysEqual(this.$editorElm.val(), this.defaultValue);
}

validate() {
Expand All @@ -126,23 +125,22 @@ export class MultipleSelectEditor implements Editor {
}

private buildTemplateHtmlString() {
if (!this.columnDef || !this.columnDef.filter || !this.columnDef.filter.collection) {
throw new Error('[Aurelia-SlickGrid] You need to pass a "collection" for ' +
'the MultipleSelect Filter to work correctly. Also each option should include ' +
'a value/label pair (or value/labelKey when using Locale). For example:: ' +
'{ filter: type: FilterType.multipleSelect, collection: [{ value: true, label: \'True\' }, ' +
'{ value: false, label: \'False\'}] }');
if (!this.columnDef || !this.columnDef.params || !this.columnDef.params.collection) {
throw new Error('[Aurelia-SlickGrid] You need to pass a "collection" on the params property in the column definition for ' +
'the MultipleSelect Editor to work correctly. Also each option should include ' +
'a value/label pair (or value/labelKey when using Locale). For example: { params: { ' +
'{ collection: [{ value: true, label: \'True\' },{ value: false, label: \'False\'}] } } }');
}
this.optionCollection = this.columnDef.filter.collection || [];
this.labelName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.label : 'label';
this.valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
this.collection = this.columnDef.params.collection || [];
this.labelName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.label : 'label';
this.valueName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.value : 'value';

let options = '';
this.optionCollection.forEach((option: SelectOption) => {
this.collection.forEach((option: SelectOption) => {
if (!option || (option[this.labelName] === undefined && option.labelKey === undefined)) {
throw new Error('A collection with value/label (or value/labelKey when using ' +
'Locale) is required to populate the Select list, for example:: { filter: ' +
'type: FilterType.multipleSelect, collection: [ { value: \'1\', label: \'One\' } ])');
'Locale) is required to populate the Select list, for example: ' +
'{ collection: [ { value: \'1\', label: \'One\' } ])');
}
const labelKey = (option.labelKey || option[this.labelName]) as string;
const textLabel = labelKey;
Expand All @@ -153,28 +151,28 @@ export class MultipleSelectEditor implements Editor {
return `<select class="ms-filter search-filter" multiple="multiple">${options}</select>`;
}

private createDomElement(filterTemplate: string) {
this.$filterElm = $(filterTemplate);
private createDomElement(editorTemplate: string) {
this.$editorElm = $(editorTemplate);

if (this.$filterElm && typeof this.$filterElm.appendTo === 'function') {
this.$filterElm.appendTo(this.args.container);
if (this.$editorElm && typeof this.$editorElm.appendTo === 'function') {
this.$editorElm.appendTo(this.args.container);
}

if (typeof this.$filterElm.multipleSelect !== 'function') {
if (typeof this.$editorElm.multipleSelect !== 'function') {
// fallback to bootstrap
this.$filterElm.addClass('form-control');
this.$editorElm.addClass('form-control');
} else {
const filterOptions = (this.columnDef.filter) ? this.columnDef.filter.filterOptions : {};
const options: MultipleSelectOption = { ...this.defaultOptions, ...filterOptions };
this.$filterElm = this.$filterElm.multipleSelect(options);
const elementOptions = (this.columnDef.params) ? this.columnDef.params.elementOptions : {};
const options: MultipleSelectOption = { ...this.defaultOptions, ...elementOptions };
this.$editorElm = this.$editorElm.multipleSelect(options);
}
}

// refresh the jquery object because the selected checkboxes were already set
// prior to this method being called
private refresh() {
if (typeof this.$filterElm.multipleSelect === 'function') {
this.$filterElm.data('multipleSelect').refresh();
if (typeof this.$editorElm.multipleSelect === 'function') {
this.$editorElm.data('multipleSelect').refresh();
}
}
}
74 changes: 36 additions & 38 deletions aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export class SingleSelectEditor implements Editor {
/**
* The JQuery DOM element
*/
$filterElm: any;
$editorElm: any;
/**
* The slick grid column being edited
*/
Expand All @@ -29,13 +29,13 @@ export class SingleSelectEditor implements Editor {
/**
* The options label/value object to use in the select list
*/
optionCollection: SelectOption[] = [];
collection: SelectOption[] = [];
/**
* The property name for values in the optionCollection
* The property name for values in the collection
*/
valueName: string;
/**
* The property name for labels in the optionCollection
* The property name for labels in the collection
*/
labelName: string;

Expand All @@ -52,39 +52,38 @@ export class SingleSelectEditor implements Editor {
}

/**
* The current selected value from the optionCollection
* The current selected value from the collection
*/
get currentValue() {
return this.optionCollection.findOrDefault(c =>
c[this.valueName].toString() === this.$filterElm.val())[this.valueName];
return this.collection.findOrDefault(c =>
c[this.valueName].toString() === this.$editorElm.val())[this.valueName];
}

init() {
if (!this.args) {
throw new Error('[Aurelia-SlickGrid] A filter must always have an "init()" ' +
'with valid arguments.');
throw new Error('[Aurelia-SlickGrid] An editor must always have an "init()" with valid arguments.');
}

this.columnDef = this.args.column;

const filterTemplate = this.buildTemplateHtmlString();
const editorTemplate = this.buildTemplateHtmlString();

this.createDomElement(filterTemplate);
this.createDomElement(editorTemplate);
}

applyValue(item: any, state: any): void {
item[this.args.column.field] = state;
}

destroy() {
this.$filterElm.remove();
this.$editorElm.remove();
}

loadValue(item: any): void {
// convert to string because that is how the DOM will return these values
this.defaultValue = item[this.columnDef.field].toString();

this.$filterElm.find('option').each((i: number, $e: any) => {
this.$editorElm.find('option').each((i: number, $e: any) => {
if (this.defaultValue.indexOf($e.value) !== -1) {
$e.selected = true;
} else {
Expand All @@ -100,11 +99,11 @@ export class SingleSelectEditor implements Editor {
}

focus() {
this.$filterElm.focus();
this.$editorElm.focus();
}

isValueChanged(): boolean {
return this.$filterElm.val() !== this.defaultValue;
return this.$editorElm.val() !== this.defaultValue;
}

validate() {
Expand All @@ -122,23 +121,22 @@ export class SingleSelectEditor implements Editor {
}

private buildTemplateHtmlString() {
if (!this.columnDef || !this.columnDef.filter || !this.columnDef.filter.collection) {
throw new Error('[Aurelia-SlickGrid] You need to pass a "collection" for ' +
'the MultipleSelect Filter to work correctly. Also each option should include ' +
'a value/label pair (or value/labelKey when using Locale). For example:: ' +
'{ filter: type: FilterType.multipleSelect, collection: [{ value: true, label: \'True\' }, ' +
'{ value: false, label: \'False\'}] }');
if (!this.columnDef || !this.columnDef.params || !this.columnDef.params.collection) {
throw new Error('[Aurelia-SlickGrid] You need to pass a "collection" on the params property in the column definition for ' +
'the SingleSelect Editor to work correctly. Also each option should include ' +
'a value/label pair (or value/labelKey when using Locale). For example: { params: { ' +
'{ collection: [{ value: true, label: \'True\' }, { value: false, label: \'False\'}] } } }');
}
this.optionCollection = this.columnDef.filter.collection || [];
this.labelName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.label : 'label';
this.valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
this.collection = this.columnDef.params.collection || [];
this.labelName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.label : 'label';
this.valueName = (this.columnDef.params.customStructure) ? this.columnDef.params.customStructure.value : 'value';

let options = '';
this.optionCollection.forEach((option: SelectOption) => {
this.collection.forEach((option: SelectOption) => {
if (!option || (option[this.labelName] === undefined && option.labelKey === undefined)) {
throw new Error('A collection with value/label (or value/labelKey when using ' +
'Locale) is required to populate the Select list, for example:: { filter: ' +
'type: FilterType.multipleSelect, collection: [ { value: \'1\', label: \'One\' } ])');
'Locale) is required to populate the Select list, for example: ' +
'{ collection: [ { value: \'1\', label: \'One\' } ])');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You added an open curly brace in your throw error, though I think it's missing an ending curly brace.

}
const labelKey = (option.labelKey || option[this.labelName]) as string;
const textLabel = labelKey;
Expand All @@ -149,28 +147,28 @@ export class SingleSelectEditor implements Editor {
return `<select class="ms-filter search-filter">${options}</select>`;
}

private createDomElement(filterTemplate: string) {
this.$filterElm = $(filterTemplate);
private createDomElement(editorTemplate: string) {
this.$editorElm = $(editorTemplate);

if (this.$filterElm && typeof this.$filterElm.appendTo === 'function') {
this.$filterElm.appendTo(this.args.container);
if (this.$editorElm && typeof this.$editorElm.appendTo === 'function') {
this.$editorElm.appendTo(this.args.container);
}

if (typeof this.$filterElm.multipleSelect !== 'function') {
if (typeof this.$editorElm.multipleSelect !== 'function') {
// fallback to bootstrap
this.$filterElm.addClass('form-control');
this.$editorElm.addClass('form-control');
} else {
const filterOptions = (this.columnDef.filter) ? this.columnDef.filter.filterOptions : {};
const options: MultipleSelectOption = { ...this.defaultOptions, ...filterOptions };
this.$filterElm = this.$filterElm.multipleSelect(options);
const elementOptions = (this.columnDef.params) ? this.columnDef.params.elementOptions : {};
const options: MultipleSelectOption = { ...this.defaultOptions, ...elementOptions };
this.$editorElm = this.$editorElm.multipleSelect(options);
}
}

// refresh the jquery object because the selected checkboxes were already set
// prior to this method being called
private refresh() {
if (typeof this.$filterElm.multipleSelect === 'function') {
this.$filterElm.data('multipleSelect').refresh();
if (typeof this.$editorElm.multipleSelect === 'function') {
this.$editorElm.data('multipleSelect').refresh();
}
}
}
4 changes: 1 addition & 3 deletions aurelia-slickgrid/src/examples/slickgrid/example3.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,6 @@ export class Example3 {
minWidth: 100,
params: {
formatters: [ Formatters.collection, Formatters.percentCompleteBar ],
},
filter: {
collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: `${k}%` }))
}
}, {
Expand Down Expand Up @@ -154,7 +152,7 @@ export class Example3 {
sortable: true,
type: FieldType.string,
editor: Editors.multipleSelect,
filter: {
params: {
collection: Array.from(Array(1001).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` }))
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

goes with the other comment, I would rather see params.collection instead of seeing filter.collection to be used in both multiSelect.

}
}];
Expand Down