Fix [other] option bug in grid selects

Related to #75
agrc · May 11, 2018 · 3069659 · 3069659
1 parent bc88934
commit 3069659
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 142 deletions.
diff --git a/_src/app/Domains.js b/_src/app/Domains.js
@@ -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
@@ -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);
 
             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');
             });

diff --git a/_src/app/OtherOptionHandler.js b/_src/app/OtherOptionHandler.js
@@ -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);
         },
@@ -71,23 +70,25 @@ 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);
+            this.submitBtn.disabled = !(this.codeTxt.value.length > 0);
+
+            if (event.key === 'Enter') {
+                this.onSubmit();
+            }
         },
         destroyRecursive: function () {
             // summary:

diff --git a/_src/app/_GridMixin.js b/_src/app/_GridMixin.js
@@ -10,6 +10,7 @@ define([
 
     'dojo/keys',
     'dojo/on',
+    'dojo/topic',
     'dojo/_base/array',
     'dojo/_base/declare',
     'dojo/_base/lang',
@@ -28,6 +29,7 @@ define([
 
     keys,
     on,
+    topic,
     array,
     declare,
     lang,
@@ -79,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:

diff --git a/_src/app/catch/Catch.js b/_src/app/catch/Catch.js
@@ -156,7 +156,8 @@ define([
                     editorArgs: {
                         domainFieldName: fn.SPECIES_CODE,
                         domainLayerUrl: config.urls.fishFeatureService,
-                        grid: this.grid
+                        parentId: this.id,
+                        columnIndex: 5
                     }
                 }, {
                     autoSave: true,
@@ -168,7 +169,8 @@ define([
                     editorArgs: {
                         domainFieldName: fn.LENGTH_TYPE,
                         domainLayerUrl: config.urls.fishFeatureService,
-                        grid: this.grid
+                        parentId: this.id,
+                        columnIndex: 6
                     }
                 }, {
                     autoSave: true,
@@ -229,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) {

diff --git a/_src/app/catch/FilteringSelectForGrid.js b/_src/app/catch/FilteringSelectForGrid.js
@@ -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;
         }
     });
 });
diff --git a/_src/app/habitat/Habitat.js b/_src/app/habitat/Habitat.js
@@ -184,7 +184,8 @@ define([
                 editorArgs: {
                     domainFieldName: FN.transectMeasurements.SUBSTRATE,
                     domainLayerUrl: config.urls.transectMeasurementsFeatureService,
-                    grid: this.grid
+                    parentId: this.id,
+                    columnIndex: 4
                 }
             }, {
                 autoSave: true,

diff --git a/_src/app/templates/OtherOptionHandler.html b/_src/app/templates/OtherOptionHandler.html
@@ -1,35 +1,29 @@
 <div>
-    <div class="modal fade" data-dojo-attach-point='modal'>
+    <div class="modal fade" data-dojo-attach-point="modal">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button class="close" data-dismiss='modal'>&times;</button>
+                    <button class="close" data-dismiss="modal">&times;</button>
                     <h4>Add Additional Option</h4>
                 </div>
                 <div class="modal-body">
                     <fieldset>
                         <legend>Existing Options</legend>
-                        <ul data-dojo-attach-point='existingOptionsList'></ul>
+                        <ul data-dojo-attach-point="existingOptionsList"></ul>
                     </fieldset>
                     <fieldset>
                         <legend>New Option</legend>
-                        <label>Code</label>
                         <div class="form-group">
-                            <input data-dojo-attach-point='codeTxt' class='form-control' type="text"
-                                data-dojo-attach-event='keyup: onTxtChange' tabindex="1">
-                        </div>
-                        <div class="form-group">
-                            <label>Description</label>
-                            <input data-dojo-attach-point='descTxt' class='form-control' type="text"
-                                data-dojo-attach-event='keyup: onTxtChange' tabindex="2">
+                            <input data-dojo-attach-point="codeTxt" class="form-control" type="text"
+                                data-dojo-attach-event="keyup: onTxtChange" tabindex="1">
                         </div>
                     </fieldset>
                 </div>
                 <div class="modal-footer">
-                    <button class="btn btn-default" data-dismiss='modal' data-dojo-attach-event='click: onCancel' tabindex="4">Cancel</button>
+                    <button class="btn btn-default" data-dismiss="modal" data-dojo-attach-event="click: onCancel" tabindex="4">Cancel</button>
                     <button class="btn btn-primary" disabled tabindex="3"
                         data-dojo-attach-event="click: onSubmit"
-                        data-dojo-attach-point='submitBtn'>Submit</button>
+                        data-dojo-attach-point="submitBtn">Submit</button>
                 </div>
             </div>
         </div>