Merge pull request #263 from edx/afzaledx/SOL-1480_new_allowance_ui

SOL-1480 Allowance Section UI changes

edx_proctoring/static/proctoring/js/views/proctored_exam_add_allowance_view.js

@@ -21,7 +21,9 @@ var edx = edx || {};
             //Backbone.Validation.bind( this,  {valid:this.hideError, invalid:this.showError});
         },
         events: {
-            "submit form": "addAllowance"
+            "submit form": "addAllowance",
+            "change #proctored_exam": 'selectExam',
+            "change #allowance_type": 'selectAllowance'
         },
         loadTemplateData: function () {
             var self = this;
@@ -34,6 +36,7 @@ var edx = edx || {};
                     self.render();
                     self.showModal();
                     self.updateCss();
+                    self.selectExamAtIndex(0);
                 });
         },
         updateCss: function() {
@@ -56,7 +59,11 @@ var edx = edx || {};
             $el.find('form label').css({
                 "display": "block",
                 "font-size": "14px",
-                "margin": 0
+                "margin": 0,
+                "cursor": "default"
+            });
+            $el.find('form #minutes_label').css({
+                "display": "inline-block"
             });
             $el.find('form input[type="text"]').css({
                 "height": "26px",
@@ -155,6 +162,48 @@ var edx = edx || {};
                 });
             }
         },
+        selectExamAtIndex: function (index) {
+            var selectedExam = this.proctored_exams[index];
+
+            if (selectedExam.is_proctored) {
+                // Selected Exam is a Proctored or Practice-Proctored exam.
+                if (selectedExam.is_practice_exam)
+                    $('#exam_type_label').text(gettext('Practice Exam'));
+                else
+                    $('#exam_type_label').text(gettext('Proctored Exam'));
+
+                // In case of Proctored Exams, we hide the Additional Time label and show the Allowance Types Select
+                $('#additional_time_label').hide();
+                $('select#allowance_type').val('additional_time_granted').show();
+            }
+            else {
+                // Selected Exam is a Timed Exam.
+                $('#exam_type_label').text(gettext('Timed Exam'));
+
+                // In case of Timed Exams, we show the "Additional Time" label and hide the Allowance Types Select
+                $('#additional_time_label').show();
+                // Even though we have the Select element hidden, the backend will still be using
+                // the Select's value for the allowance type (key).
+                $('select#allowance_type').val('additional_time_granted').hide();
+            }
+            this.updateAllowanceLabels('additional_time_granted');
+        },
+        selectExam: function (event) {
+            this.selectExamAtIndex($('#proctored_exam')[0].selectedIndex);
+        },
+        selectAllowance: function (event) {
+            this.updateAllowanceLabels($('#allowance_type').val());
+        },
+        updateAllowanceLabels: function (selectedAllowanceType) {
+            if (selectedAllowanceType == 'additional_time_granted') {
+                $('#minutes_label').show();
+                $('#allowance_value_label').text(gettext('Additional Time'));
+            }
+            else {
+                $('#minutes_label').hide();
+                $('#allowance_value_label').text(gettext('Value'));
+            }
+        },
 
         render: function () {
             $(this.el).html(this.template({

edx_proctoring/static/proctoring/spec/proctored_exam_add_allowance_spec.js

@@ -29,44 +29,63 @@ describe('ProctoredExamAddAllowanceView', function () {
         }
     ];
 
+    var expectedTimedAllowanceJson = [
+        {
+            created: "2015-08-10T09:15:45Z",
+            id: 1,
+            modified: "2015-08-10T09:15:45Z",
+            key: "additional_time_granted",
+            value: "1",
+            proctored_exam: {
+                content_id: "i4x://edX/DemoX/sequential/9f5e9b018a244ea38e5d157e0019e60c",
+                course_id: "edX/DemoX/Demo_Course",
+                exam_name: "Test Exam",
+                external_id: null,
+                id: 6,
+                is_active: true,
+                is_practice_exam: false,
+                is_proctored: false,
+                time_limit_mins: 1
+            },
+            user: {
+                username: 'testuser1',
+                email: 'testuser1@test.com'
+            }
+        }
+    ];
+
     var proctoredExamJson = [
         {
             exam_name: "Midterm Exam",
+            is_proctored: true,
+            is_practice: false,
             id: 5
         },
         {
             exam_name: "Final Exam",
+            is_proctored: false,
+            is_practice: false,
             id: 6
         },
         {
             exam_name: "Test Exam",
+            is_proctored: true,
+            is_practice: true,
             id: 7
         }
     ];
 
+    var allowanceTypes = [
+        ['additional_time_granted', gettext('Additional Time (minutes)')],
+        ['review_policy_exception', gettext('Review Policy Exception')]
+    ];
+
     beforeEach(function () {
-        html =
-            '<div class="modal-header">Add a New Allowance</div>' +
-            '<form><h3 class="error-response"><h3><table class="compact"><tr>' +
-            '<td><label>Proctored Exam</label></td><td>' +
-            '<select id="proctored_exam">' +
-            '<% _.each(proctored_exams, function(proctored_exam){ %>' +
-            '<option value="<%= proctored_exam.id %>">' +
-            '<%- interpolate(gettext(" %(exam_display_name)s "), { exam_display_name: proctored_exam.exam_name }, true) %>' +
-            '</option>' +
-            '<% }); %>' +
-            '</select></td></tr><tr><td>' +
-            '<label>Allowance Type</label>' +
-            '</td><td><select id="allowance_type">' +
-            '<% _.each(allowance_types, function(allowance_type){ %>' +
-            '<option value="<%= allowance_type[0] %>">' +
-            '<%= allowance_type[1] %>' +
-            '</option>' +
-            '<% }); %>' +
-            '</select></td></tr><tr><td>' +
-            '<label>Value</label></td><td><input type="text" id="allowance_value" /></td></tr><tr>' +
-            '<td> <label>Username or Email</label> </td> <td> <input type="text" id="user_info" /> </td> </tr> ' +
-            '<tr><td></td> <td> <input id="addNewAllowance" type="submit" value="Save" /> </td> </tr> </table> </form>';
+
+        // We have converted the edx_proctoring/static/proctoring/templates/add-new-allowance.underscore template
+        // from http://www.howtocreate.co.uk/tutorials/jsexamples/syntax/prepareInline.html
+
+        html = '<div class=\'modal-header\'><%- gettext(\"Add a New Allowance\") %><\/div>\n<form>\n    <h3 class=\'error-response\'><h3>\n    <table class=\'compact\'>\n        <tr>\n            <td>\n                <label><%- gettext(\"Special Exam\") %><\/label>\n            <\/td>\n            <td>\n                <select id=\'proctored_exam\'>\n                    <% _.each(proctored_exams, function(proctored_exam){ %>\n                    <option value=\"<%= proctored_exam.id %>\">\n                    <%- interpolate(gettext(\' %(exam_display_name)s \'), { exam_display_name: proctored_exam.exam_name }, true) %>\n                    <\/option>\n                    <% }); %>\n                <\/select>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label><%- gettext(\"Exam Type\") %><\/label>\n            <\/td>\n            <td>\n                <label id=\'exam_type_label\'>\n                    <%- gettext(\"Timed Exam\") %>\n                <\/label>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label><%- gettext(\"Allowance Type\") %><\/label>\n            <\/td>\n            <td>\n                <select id=\"allowance_type\">\n                    <% _.each(allowance_types, function(allowance_type){ %>\n                    <option value=\"<%= allowance_type[0] %>\">\n                        <%= allowance_type[1] %>\n                    <\/option>\n                    <% }); %>\n                <\/select>\n\n                <label id=\'timed_exam_allowance_type\'>\n                    <%- gettext(\"Additional Time (minutes)\") %>\n                <\/label>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label id=\'allowance_value_label\'><%- gettext(\"Value\") %><\/label>\n            <\/td>\n            <td>\n                <input type=\"text\" id=\"allowance_value\" \/>\n                <label id=\'timed_exam_mins_label\'><%- gettext(\"minutes\") %><\/label>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label><%- gettext(\"Username or Email\") %><\/label>\n            <\/td>\n            <td>\n                <input type=\"text\" id=\"user_info\" \/>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td>\n                <input id=\'addNewAllowance\' type=\'submit\' value=\'Save\' \/>\n            <\/td>\n        <\/tr>\n    <\/table>\n<\/form>\n';
 
         allowancesHtml = '<span class="tip">' +
             '<%- gettext("Allowances") %>' +
@@ -151,7 +170,8 @@ describe('ProctoredExamAddAllowanceView', function () {
         var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
             course_id: 'test_course_id',
             proctored_exams: proctoredExamJson,
-            proctored_exam_allowance_view: this.proctored_exam_allowance
+            proctored_exam_allowance_view: this.proctored_exam_allowance,
+            allowance_types: allowanceTypes
         });
         this.server.respond();
         this.server.respond();
@@ -160,7 +180,45 @@ describe('ProctoredExamAddAllowanceView', function () {
         expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Midterm Exam');
         expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Final Exam');
         expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Test Exam');
+        expect(add_allowance_view.$el.find('#exam_type_label')).toExist();
+        $('#proctored_exam').val('5');
+        $('#proctored_exam').trigger( "change" );
+        expect(add_allowance_view.$el.find('#exam_type_label').html()).toContain('Proctored Exam');
     });
+
+
+    it("should render the timed exam add allowance view properly", function () {
+        this.server.respondWith('GET', '/api/edx_proctoring/v1/proctored_exam/test_course_id/allowance',
+            [
+                200,
+                {
+                    "Content-Type": "application/json"
+                },
+                JSON.stringify(expectedTimedAllowanceJson)
+            ]
+        );
+
+        this.proctored_exam_allowance = new edx.instructor_dashboard.proctoring.ProctoredExamAllowanceView();
+        var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
+            course_id: 'test_course_id',
+            proctored_exams: proctoredExamJson,
+            proctored_exam_allowance_view: this.proctored_exam_allowance,
+            allowance_types: allowanceTypes
+        });
+        this.server.respond();
+        this.server.respond();
+        this.server.respond();
+
+        expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Midterm Exam');
+        expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Final Exam');
+        expect(add_allowance_view.$el.find('#proctored_exam').html()).toContain('Test Exam');
+        expect(add_allowance_view.$el.find('#exam_type_label')).toExist();
+        $('#proctored_exam').val('6');
+        $('#proctored_exam').trigger( "change" );
+        expect(add_allowance_view.$el.find('#exam_type_label').html()).toContain('Timed Exam');
+    });
+
+
     it("should add the proctored exam allowance", function () {
         this.server.respondWith('GET', '/api/edx_proctoring/v1/proctored_exam/test_course_id/allowance',
             [
@@ -176,7 +234,8 @@ describe('ProctoredExamAddAllowanceView', function () {
         var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
             course_id: 'test_course_id',
             proctored_exams: proctoredExamJson,
-            proctored_exam_allowance_view: this.proctored_exam_allowance
+            proctored_exam_allowance_view: this.proctored_exam_allowance,
+            allowance_types: allowanceTypes
         });
 
         this.server.respond();
@@ -245,7 +304,8 @@ describe('ProctoredExamAddAllowanceView', function () {
         var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView({
             course_id: 'test_course_id',
             proctored_exams: proctoredExamJson,
-            proctored_exam_allowance_view: this.proctored_exam_allowance
+            proctored_exam_allowance_view: this.proctored_exam_allowance,
+            allowance_types: allowanceTypes
         });
 
         this.server.respond();

edx_proctoring/static/proctoring/templates/add-new-allowance.underscore

@@ -18,6 +18,16 @@
         </tr>
         <tr>
             <td>
+                <label><%- gettext("Exam Type") %></label>
+            </td>
+            <td>
+                <label id='exam_type_label'>
+                    <%- gettext("Timed Exam") %>
+                </label>
+            </td>
+        </tr>
+        <tr>
+            <td>
                 <label><%- gettext("Allowance Type") %></label>
             </td>
             <td>
@@ -28,14 +38,19 @@
                     </option>
                     <% }); %>
                 </select>
+
+                <label id='additional_time_label'>
+                    <%- gettext("Additional Time (minutes)") %>
+                </label>
             </td>
         </tr>
         <tr>
             <td>
-                <label><%- gettext("Value") %></label>
+                <label id='allowance_value_label'><%- gettext("Value") %></label>
             </td>
             <td>
                 <input type="text" id="allowance_value" />
+                <label id='minutes_label'><%- gettext("minutes") %></label>
             </td>
         </tr>
         <tr>