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

Jump to bottom

Grid Select Improvements #138

Merged
merged 6 commits into from
May 17, 2018
Merged

Grid Select Improvements #138

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bc88934
Remove NaN values form number fields in grids
stdavis May 11, 2018
3069659
Fix [other] option bug in grid selects
stdavis May 11, 2018
0ab2215
Prevent entering an existing option in the "Other" dialog
stdavis May 11, 2018
8de25c0
switch to agrc/grunt-contrib-jasmine
stdavis May 17, 2018
8338feb
Upgrade permissions on travis to help with Chrome Headless
stdavis May 17, 2018
bbbdff6
fix tests
stdavis May 17, 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
27 changes: 8 additions & 19 deletions _src/app/Domains.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ define([
'app/config',
'app/OtherOptionHandler',

'dojo/dom-construct',
'dojo/_base/array'
'dojo/dom-construct'
], function (
agrcDomains,

config,
OtherOptionHandler,

domConstruct,
array
domConstruct
) {
// summary:
// Used to feed options to comboboxes
Expand Down Expand Up @@ -67,29 +65,20 @@ define([
// fires when a select is changed to the "other" option
console.log('app/Domains:onOtherSelected', arguments);

var existingOptions = [];

array.forEach(select.children, function (option) {
if (option.value !== '' && option.value !== this.otherTxt) {
existingOptions.push({
code: option.value,
name: option.innerHTML
});
}
}, this);
var existingOptions = Array.from(select.children).map(option => option.value);
Copy link
Member

Choose a reason for hiding this comment

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

This might need to be polyfilled if people are using IE at all.

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah, I thought that Babel would take care of this one for me. I'm not too worried about supporting IE at this point for this project.


var ooh = new OtherOptionHandler({
existingOptions: existingOptions,
existingOptions,
otherTxt: this.otherTxt
}, domConstruct.create('div', null, document.body));
ooh.startup();

ooh.on('add-new-value', function (newValue) {
ooh.on('add-new-value', function (event) {
domConstruct.create('option', {
innerHTML: newValue.name,
value: newValue.code
innerHTML: event.code,
value: event.code
}, select);
select.value = newValue.code;
select.value = event.code;

$(select).combobox('refresh');
});
Expand Down
21 changes: 12 additions & 9 deletions _src/app/OtherOptionHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,8 @@ define([
console.log('app/OtherOptionHandler:postCreate', arguments);

this.existingOptions.forEach(function (option) {
if (option.code !== '' && option.code !== this.otherTxt) {
var txt = option.name + ' (' + option.code + ')';
domConstruct.create('li', {innerHTML: txt}, this.existingOptionsList);
if (option !== '' && option !== this.otherTxt) {
domConstruct.create('li', {innerHTML: option}, this.existingOptionsList);
}
}, this);
},
Expand All @@ -71,23 +70,27 @@ define([

$(this.modal).modal('hide');

this.emit('add-new-value', {
name: this.descTxt.value,
code: this.codeTxt.value
});
this.emit('add-new-value', { code: this.codeTxt.value });
},
onCancel: function () {
// summary:
// user has clicked the close button
// param or return
console.log('app/OtherOptionHandler:onCancel', arguments);
},
onTxtChange: function () {
onTxtChange: function (event) {
// summary:
// sets the disabled state of the submit button
// event: Event Object
console.log('app/OtherOptionHandler:onTxtChange', arguments);

this.submitBtn.disabled = !(this.codeTxt.value.length > 0 && this.descTxt.value.length > 0);
const value = this.codeTxt.value.toUpperCase();
this.submitBtn.disabled = !value || !(value.length > 0) ||
this.existingOptions.map(v => v.toUpperCase()).includes(value);

if (!this.submitBtn.disabled && event.key === 'Enter') {
this.onSubmit();
}
},
destroyRecursive: function () {
// summary:
Expand Down
31 changes: 31 additions & 0 deletions _src/app/_GridMixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
define([
'./catch/NoFishException',

'dgrid/Editor',
'dgrid/Keyboard',
'dgrid/OnDemandGrid',
'dgrid/Selection',

'dijit/form/NumberSpinner',

'dojo/keys',
'dojo/on',
'dojo/topic',
'dojo/_base/array',
'dojo/_base/declare',
'dojo/_base/lang',
Expand All @@ -15,13 +19,17 @@ define([
'dstore/Trackable'
], function (
NoFishException,

Editor,
Keyboard,
DGrid,
Selection,

NumberSpinner,

keys,
on,
topic,
array,
declare,
lang,
Expand All @@ -32,6 +40,16 @@ define([
// summary:
// Mixin to add dgrid to a widget.
return declare(null, {
// this is to remove the default NaN value if there is an empty string
// it's used as a column editor in classes that use this mixin
NewNumberSpinner: declare([NumberSpinner], {
value: null,
_getValueAttr() {
const inheritedValue = this.inherited(arguments);

return isNaN(inheritedValue) ? null : inheritedValue;
Copy link
Member

Choose a reason for hiding this comment

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

does this mess up the data submission or any of the local storage stuff?

Copy link
Member Author

Choose a reason for hiding this comment

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

No. In fact, it fixes problems such as attempting to write a string (NaN) to numeric fields.

Copy link
Member

@steveoh steveoh May 15, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Does 0 get written to the db for empty records?

}
}),

// grid: DGrid
grid: null,
Expand Down Expand Up @@ -63,6 +81,19 @@ define([
on(this.grid, 'dgrid-deselect', lang.hitch(this, this.onRowDeselected));

this.setGridData([]);

this.own(
topic.subscribe(`refocus_${this.id}`, (columnIndex) => {
for (var id in this.grid.selection) {
if (this.grid.selection.hasOwnProperty(id)) {
// columnIndex needs to be a string
const cell = this.grid.cell(id, columnIndex + '');
console.log(cell);
this.grid.edit(cell);
}
}
})
);
},
onRowSelected: function (evt) {
// summary:
Expand Down
22 changes: 6 additions & 16 deletions _src/app/catch/Catch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ define([
'app/GridTab',
'app/_GridMixin',

'dijit/form/NumberSpinner',
'dijit/_TemplatedMixin',
'dijit/_WidgetBase',
'dijit/_WidgetsInTemplateMixin',
Expand Down Expand Up @@ -43,7 +42,6 @@ define([
GridTab,
_GridMixin,

NumberSpinner,
_TemplatedMixin,
_WidgetBase,
_WidgetsInTemplateMixin,
Expand Down Expand Up @@ -158,7 +156,8 @@ define([
editorArgs: {
domainFieldName: fn.SPECIES_CODE,
domainLayerUrl: config.urls.fishFeatureService,
grid: this.grid
parentId: this.id,
columnIndex: 5
}
}, {
autoSave: true,
Expand All @@ -170,13 +169,14 @@ define([
editorArgs: {
domainFieldName: fn.LENGTH_TYPE,
domainLayerUrl: config.urls.fishFeatureService,
grid: this.grid
parentId: this.id,
columnIndex: 6
}
}, {
autoSave: true,
label: 'Length (millimeters)',
field: fn.LENGTH,
editor: NumberSpinner,
editor: this.NewNumberSpinner,
sortable: false,
autoSelect: true,
editOn: 'focus',
Expand All @@ -189,7 +189,7 @@ define([
autoSave: true,
label: 'Weight (grams)',
field: fn.WEIGHT,
editor: NumberSpinner,
editor: this.NewNumberSpinner,
sortable: false,
autoSelect: true,
editOn: 'focus',
Expand Down Expand Up @@ -231,16 +231,6 @@ define([
$(that.batchBtn).popover('hide');
});

this.own(
topic.subscribe('refocus', function () {
for (var id in that.grid.selection) {
if (that.grid.selection.hasOwnProperty(id)) {
that.grid.edit(that.grid.cell(id, '6'));
}
}
})
);

localforage.getItem(this.cacheId).then(function (inProgressData) {
if (inProgressData) {
if (inProgressData.gridData) {
Expand Down
85 changes: 66 additions & 19 deletions _src/app/catch/FilteringSelectForGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,54 +28,101 @@ define([
return declare([FilteringSelect], {
searchAttr: 'name',
labelAttr: 'name',
otherOptionHandler: null,


// params pass via constructor

// domainFieldName: String
// the name of the field to get the domain values from
domainFieldName: null,

// domainLayerUrl: String
// URL to the feature service for the layer associated with this field
domainLayerUrl: null,

// parentId: String
// the id of the widget that this widget is a child of
// used in the refocus method
parentId: null,

// columnIndex: Number
// the index of the column within the grid
columnIndex: null,

postCreate: function () {
// summary:
// description
// param or return
console.log('app/catch/FilteringSelectForGrid:postCreate', arguments);

var that = this;
Domains.getCodedValues(this.domainLayerUrl, this.domainFieldName).then(function (values) {
Domains.getCodedValues(this.domainLayerUrl, this.domainFieldName).then((values) => {
// add "other" option
values.push({
name: appDomains.otherTxt,
code: appDomains.otherTxt
});

that.store = new Memory({
this.store = new Memory({
data: values,
idProperty: 'code'
});

that.set('store', that.store);
this.set('store', this.store);
});

this.on('change', function () {
if (that.get('value') === appDomains.otherTxt) {
var otherOptionHandler = new OtherOptionHandler({
existingOptions: that.store.query(function (d) {
this.on('change', () => {
if (this.otherOptionHandler) {
// don't create to dialogs
return;
}

if (this.get('value') === appDomains.otherTxt) {
this.otherOptionHandler = new OtherOptionHandler({
existingOptions: this.store.query(function (d) {
return d.code !== appDomains.otherTxt;
}),
}).map(item => item.code),
otherTxt: appDomains.otherTxt
}, domConstruct.create('div', null, document.body));
otherOptionHandler.startup();
otherOptionHandler.on('add-new-value', function (newValue) {
topic.publish('refocus');
this.otherOptionHandler.startup();
this.otherOptionHandler.on('add-new-value', (event) => {
this.refocusGridCell();
var item = {
name: newValue.name,
code: newValue.code
name: event.code,
code: event.code
};
that.store.put(item);
that.set('item', item);
this.store.put(item);
this.set('value', item.code);
this.destroyOtherOptionHandler();
});
otherOptionHandler.on('cancel', function () {
topic.publish('refocus');
that.set('value', '');
this.otherOptionHandler.on('cancel', () => {
this.refocusGridCell();
this.set('value', '');
this.destroyOtherOptionHandler();
});
}
});

this.inherited(arguments);
},

refocusGridCell: function () {
// summary:
// refocus puts the focus back in the appropriate grid cell after
// it is lost when the OtherOptionsHandler dialog opens
console.log('app/catch/FilteringSelect:refocusGridCell', arguments);

topic.publish(`refocus_${this.parentId}`, this.columnIndex);
},

destroyOtherOptionHandler: function () {
// summary:
// destroys the widget and reference to it
// param or return
console.log('app/catch/FilteringSelect:destroyOtherOptionHandler', arguments);

this.otherOptionHandler.destroy();
this.otherOptionHandler = null;
}
});
});
Loading