Merge pull request #263 from edx/clintonb/verification-deadline-fix

Fixed display of verification deadline on course form

ecommerce/static/js/models/course_model.js

@@ -9,7 +9,8 @@ define([
         'collections/product_collection',
         'models/course_seats/course_seat',
         'models/course_seats/honor_seat',
-        'utils/course_utils'
+        'utils/course_utils',
+        'utils/utils'
     ],
     function (Backbone,
               BackboneRelational,
@@ -21,7 +22,8 @@ define([
               ProductCollection,
               CourseSeat,
               HonorSeat,
-              CourseUtils) {
+              CourseUtils,
+              Utils) {
         'use strict';
 
         Backbone.Validation.configure({
@@ -59,13 +61,6 @@ define([
                 type: {
                     required: true,
                     msg: gettext('You must select a course type.')
-                },
-                verification_deadline: {
-                    msg: gettext('Verification deadline is required for course types with verified modes.'),
-                    required: function (value, attr, computedState) {
-                        // TODO Return true if one of the products requires ID verification.
-                        return false;
-                    }
                 }
             },
 
@@ -100,6 +95,26 @@ define([
                 this.on('sync', this.removeParentProducts, this);
             },
 
+            parse: function (response) {
+                response = this._super(response);
+
+                // Form fields display date-times in the user's local timezone. We want all
+                // times to be displayed in UTC to avoid confusion. Strip the timezone data to workaround the UI
+                // deficiencies. We will restore the UTC timezone in toJSON().
+                response.verification_deadline = Utils.stripTimezone(response.verification_deadline);
+
+                return response;
+            },
+
+            toJSON: function () {
+                var data = this._super();
+
+                // Restore the timezone component, and output the ISO 8601 format expected by the server.
+                data.verification_deadline = Utils.restoreTimezone(data.verification_deadline);
+
+                return data;
+            },
+
             /**
              * Alerts listeners that this Course's ID verification status MAY have changed.
              */

ecommerce/static/js/models/product_model.js

@@ -3,13 +3,15 @@ define([
         'backbone.relational',
         'backbone.validation',
         'moment',
-        'underscore'
+        'underscore',
+        'utils/utils'
     ],
     function (Backbone,
               BackboneRelational,
               BackboneValidation,
               moment,
-              _) {
+              _,
+              Utils) {
         'use strict';
 
         _.extend(Backbone.Model.prototype, Backbone.Validation.mixin);
@@ -27,12 +29,10 @@ define([
 
                 delete response.attribute_values;
 
-                // The view displaying the expires value assumes times are in the user's local timezone. We want all
+                // Form fields display date-times in the user's local timezone. We want all
                 // times to be displayed in UTC to avoid confusion. Strip the timezone data to workaround the UI
                 // deficiencies. We will restore the UTC timezone in toJSON().
-                if (response.expires) {
-                    response.expires = moment.utc(response.expires).format('YYYY-MM-DDTHH:mm:ss');
-                }
+                response.expires = Utils.stripTimezone(response.expires);
 
                 return response;
             },
@@ -54,9 +54,7 @@ define([
                 }, this);
 
                 // Restore the timezone component, and output the ISO 8601 format expected by the server.
-                if (data.expires) {
-                    data.expires = moment.utc(data.expires + 'Z').format();
-                }
+                data.expires = Utils.restoreTimezone(data.expires);
 
                 return data;
             }

ecommerce/static/js/test/specs/utils/utils_spec.js

+define([
+        'utils/utils'],
+    function (Utils) {
+        describe('stripTimezone', function(){
+            it('should return the input value if the input is empty', function(){
+                expect(Utils.stripTimezone('')).toEqual('');
+                expect(Utils.stripTimezone(null)).toBeNull();
+                expect(Utils.stripTimezone(undefined)).toBeUndefined();
+            });
+
+            it('should return the datetime without the timezone component', function(){
+                var dt = '2015-01-01T00:00:00';
+                expect(Utils.stripTimezone(dt + 'Z')).toEqual(dt);
+            });
+        });
+
+        describe('restoreTimezone', function(){
+            it('should return the input value if the input is empty', function(){
+                expect(Utils.restoreTimezone('')).toEqual('');
+                expect(Utils.restoreTimezone(null)).toBeNull();
+                expect(Utils.restoreTimezone(undefined)).toBeUndefined();
+            });
+
+            it('should return the datetime with the timezone component', function(){
+                var dt = '2015-01-01T00:00:00';
+                expect(Utils.restoreTimezone(dt)).toEqual(dt + '+00:00');
+            });
+        });
+    }
+);
\ No newline at end of file

ecommerce/static/js/utils/utils.js

-define(['underscore'], function (_) {
-    'use strict';
+define([
+        'moment',
+        'underscore'],
+    function (moment,
+              _) {
+        'use strict';
 
-    var utils = {
-        /**
-         * Returns the attributes of a node.
-         *
-         * @param nodeAttributes Attributes of the node.
-         * @param startsWithAndStrip Filters only attributes that start with
-         *   this string and strips it off the attribute.
-         * @param blackList Exclude attributes in this array of strings.
-         * @returns Hash of found attributes.
-         */
-        getNodeProperties: function (nodeAttributes, startsWithAndStrip, blackList) {
-            var properties = {};
+        return {
+            /**
+             * Returns the attributes of a node.
+             *
+             * @param nodeAttributes Attributes of the node.
+             * @param startsWithAndStrip Filters only attributes that start with
+             *   this string and strips it off the attribute.
+             * @param blackList Exclude attributes in this array of strings.
+             * @returns Hash of found attributes.
+             */
+            getNodeProperties: function (nodeAttributes, startsWithAndStrip, blackList) {
+                var properties = {};
 
-            // fill in defaults
-            startsWithAndStrip = startsWithAndStrip || '';
-            blackList = blackList || [];
+                // fill in defaults
+                startsWithAndStrip = startsWithAndStrip || '';
+                blackList = blackList || [];
 
-            _(_(nodeAttributes.length).range()).each(function (i) {
-                var nodeName = nodeAttributes.item(i).nodeName,
-                    strippedName;
-                // filter the attributes to just the ones that start with our
-                // selection and aren't in our blacklist
-                if (nodeName.indexOf(startsWithAndStrip) === 0 && !_(blackList).contains(nodeName)) {
-                    // remove the
-                    strippedName = nodeName.replace(startsWithAndStrip, '');
-                    properties[strippedName] =
-                        nodeAttributes.item(i).value;
+                _(_(nodeAttributes.length).range()).each(function (i) {
+                    var nodeName = nodeAttributes.item(i).nodeName,
+                        strippedName;
+                    // filter the attributes to just the ones that start with our
+                    // selection and aren't in our blacklist
+                    if (nodeName.indexOf(startsWithAndStrip) === 0 && !_(blackList).contains(nodeName)) {
+                        // remove the
+                        strippedName = nodeName.replace(startsWithAndStrip, '');
+                        properties[strippedName] =
+                            nodeAttributes.item(i).value;
+                    }
+                });
+                return properties;
+            },
+
+            /**
+             * Strips the timezone component from a datetime string.
+             *
+             * Input is assumed to be in UTC timezone. Output datetime is formatted as
+             * ISO 8601 without the timezone component.
+             *
+             * @param {String} datetime - String representing a UTC datetime
+             * @returns {String}
+             */
+            stripTimezone: function (datetime) {
+                if (datetime) {
+                    datetime = moment.utc(datetime).format('YYYY-MM-DDTHH:mm:ss');
                 }
-            });
-            return properties;
-        }
-    };
 
-    return utils;
-});
+                return datetime;
+            },
+
+
+            /**
+             * Adds the UTC timezone to a given datetime string.
+             *
+             * Output is formatted as ISO 8601.
+             *
+             * @param {String} datetime - String representing a datetime WITHOUT a timezone component
+             * @returns {String}
+             */
+            restoreTimezone: function (datetime) {
+                if (datetime) {
+                    datetime = moment.utc(datetime + 'Z').format();
+                }
+                return datetime;
+            }
+        };
+    });

ecommerce/static/js/views/course_form_view.js

@@ -118,12 +118,7 @@ define([
                         validate: true
                     }
                 },
-                'input[name=verification_deadline]': {
-                    observe: 'verification_deadline',
-                    setOptions: {
-                        validate: true
-                    }
-                }
+                'input[name=verification_deadline]': 'verification_deadline'
             },
 
             initialize: function (options) {

ecommerce/static/templates/course_form.html

@@ -40,7 +40,7 @@
 
 <div class="fields">
     <div class="form-group verification-deadline hidden">
-        <label class="hd-4" for="verification_deadline"><%= gettext('Verification Deadline') %></label>
+        <label class="hd-4" for="verificationDeadline"><%= gettext('Verification Deadline') %></label>
 
         <div class="input-group">
             <div class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></div>