Merge pull request #5970 from edx/anton/fix-course-times-settings

TNL-772: Fix course time settings.

cms/static/coffee/spec/main.coffee

@@ -244,6 +244,8 @@ define([
     "js/spec/views/modals/edit_xblock_spec",
     "js/spec/views/modals/validation_error_modal_spec",
 
+    "js/spec/views/settings/main_spec",
+
     "js/spec/factories/xblock_validation_spec",
 
     "js/spec/xblock/cms.runtime.v1_spec",

cms/static/js/models/settings/course_details.js

@@ -1,4 +1,4 @@
-define(["backbone", "underscore", "gettext", "date"], function(Backbone, _, gettext, date) {
+define(["backbone", "underscore", "gettext"], function(Backbone, _, gettext) {
 
 var CourseDetails = Backbone.Model.extend({
     defaults: {
@@ -18,23 +18,6 @@ var CourseDetails = Backbone.Model.extend({
         course_image_asset_path: '' // the full URL (/c4x/org/course/num/asset/filename)
     },
 
-    // When init'g from html script, ensure you pass {parse: true} as an option (2nd arg to reset)
-    parse: function(attributes) {
-        if (attributes['start_date']) {
-            attributes.start_date = date.parse(attributes.start_date);
-        }
-        if (attributes['end_date']) {
-            attributes.end_date = date.parse(attributes.end_date);
-        }
-        if (attributes['enrollment_start']) {
-            attributes.enrollment_start = date.parse(attributes.enrollment_start);
-        }
-        if (attributes['enrollment_end']) {
-            attributes.enrollment_end = date.parse(attributes.enrollment_end);
-        }
-        return attributes;
-    },
-
     validate: function(newattrs) {
         // Returns either nothing (no return call) so that validate works or an object of {field: errorstring} pairs
         // A bit funny in that the video key validation is asynchronous; so, it won't stop the validation.

cms/static/js/spec/views/settings/main_spec.js

@@ -0,0 +1,63 @@
+define([
+    'jquery', 'js/models/settings/course_details', 'js/views/settings/main',
+    'js/common_helpers/ajax_helpers'
+], function($, CourseDetailsModel, MainView, AjaxHelpers) {
+    'use strict';
+    describe('Settings/Main', function () {
+        var urlRoot = '/course-details',
+            modelData = {
+                start_date: "2014-10-05T00:00:00Z",
+                end_date: "2014-11-05T20:00:00Z",
+                enrollment_start: "2014-10-00T00:00:00Z",
+                enrollment_end: "2014-11-05T00:00:00Z",
+                org : '',
+                course_id : '',
+                run : '',
+                syllabus : null,
+                short_description : '',
+                overview : '',
+                intro_video : null,
+                effort : null,
+                course_image_name : '',
+                course_image_asset_path : ''
+            },
+            mockSettingsPage = readFixtures('mock/mock-settings-page.underscore');
+
+        beforeEach(function () {
+            setFixtures(mockSettingsPage);
+
+            this.model = new CourseDetailsModel(modelData, {parse: true});
+            this.model.urlRoot = urlRoot;
+            this.view = new MainView({
+                el: $('.settings-details'),
+                model: this.model
+            }).render();
+        });
+
+        afterEach(function () {
+            // Clean up after the $.datepicker
+            $("#start_date").datepicker("destroy");
+            $("#due_date").datepicker("destroy");
+            $('.ui-datepicker').remove();
+        });
+
+        it('Changing the time field do not affect other time fields', function () {
+            var requests = AjaxHelpers.requests(this),
+                expectedJson = $.extend(true, {}, modelData, {
+                    // Expect to see changes just in `start_date` field.
+                    start_date: "2014-10-05T22:00:00.000Z"
+                });
+
+            this.view.$el.find('#course-start-time')
+                .val('22:00')
+                .trigger('input');
+
+            this.view.saveView();
+            // It sends `POST` request, because the model doesn't have `id`. In
+            // this case, it is considered to be new according to Backbone documentation.
+            AjaxHelpers.expectJsonRequest(
+                requests, 'POST', '/course-details', expectedJson
+            );
+        });
+    });
+});

cms/static/js/views/settings/main.js

@@ -97,9 +97,10 @@ var DetailsView = ValidatingView.extend({
         var timefield = $(div).find("input:.time");
         var cachethis = this;
         var setfield = function () {
-            var newVal = DateUtils.getDate(datefield, timefield);
+            var newVal = DateUtils.getDate(datefield, timefield),
+                oldTime = new Date(cacheModel.get(fieldName)).getTime();
             if (newVal) {
-                if (!cacheModel.has(fieldName) || cacheModel.get(fieldName).getTime() !== newVal.getTime()) {
+                if (!cacheModel.has(fieldName) || oldTime !== newVal.getTime()) {
                     cachethis.clearValidationErrors();
                     cachethis.setAndValidate(fieldName, newVal);
                 }

cms/templates/js/mock/mock-settings-page.underscore

@@ -0,0 +1,67 @@
+<form id="settings_details" class="settings-details" method="post" action="">
+<section class="group-settings schedule">
+  <header>
+    <h2 class="title-2">Course Schedule</h2>
+  </header>
+
+  <ol class="list-input">
+    <li class="field-group field-group-course-start" id="course-start">
+      <div class="field date" id="field-course-start-date">
+        <label for="course-start-date">Course Start Date</label>
+        <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+        <span class="tip tip-stacked">First day the course begins</span>
+      </div>
+
+      <div class="field time" id="field-course-start-time">
+        <label for="course-start-time">Course Start Time</label>
+        <input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
+        <span class="tip tip-stacked timezone">(UTC)</span>
+      </div>
+    </li>
+
+    <li class="field-group field-group-course-end" id="course-end">
+      <div class="field date" id="field-course-end-date">
+        <label for="course-end-date">Course End Date</label>
+        <input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+        <span class="tip tip-stacked">Last day your course is active</span>
+      </div>
+
+      <div class="field time" id="field-course-end-time">
+        <label for="course-end-time">Course End Time</label>
+        <input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off" />
+        <span class="tip tip-stacked timezone">(UTC)</span>
+      </div>
+    </li>
+  </ol>
+
+  <ol class="list-input">
+    <li class="field-group field-group-enrollment-start" id="enrollment-start">
+      <div class="field date" id="field-enrollment-start-date">
+        <label for="course-enrollment-start-date">Enrollment Start Date</label>
+        <input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+        <span class="tip tip-stacked">First day students can enroll</span>
+      </div>
+
+      <div class="field time" id="field-enrollment-start-time">
+        <label for="course-enrollment-start-time">Enrollment Start Time</label>
+        <input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off" />
+        <span class="tip tip-stacked timezone">(UTC)</span>
+      </div>
+    </li>
+
+    <li class="field-group field-group-enrollment-end" id="enrollment-end">
+      <div class="field date" id="field-enrollment-end-date">
+        <label for="course-enrollment-end-date">Enrollment End Date</label>
+        <input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+        <span class="tip tip-stacked">Last day students can enroll</span>
+      </div>
+
+      <div class="field time" id="field-enrollment-end-time">
+        <label for="course-enrollment-end-time">Enrollment End Time</label>
+        <input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off" />
+        <span class="tip tip-stacked timezone">(UTC)</span>
+      </div>
+    </li>
+  </ol>
+</section>
+</form>