backbone collection to fetch the allowances for the course

edx_proctoring/serializers.py

@@ -47,7 +47,6 @@ class ProctoredExamStudentAttemptSerializer(serializers.ModelSerializer):
     Serializer for the ProctoredExamStudentAttempt Model.
     """
     proctored_exam_id = serializers.IntegerField(source="proctored_exam_id")
-    user_id = serializers.IntegerField(source='user_id')
 
     class Meta:
         """
@@ -65,11 +64,13 @@ class ProctoredExamStudentAllowanceSerializer(serializers.ModelSerializer):
     """
     Serializer for the ProctoredExamStudentAllowance Model.
     """
+    proctored_exam = ProctoredExamSerializer()
+
     class Meta:
         """
         Meta Class
         """
         model = ProctoredExamStudentAllowance
         fields = (
-            "id", "created", "modified", "user", "key", "value"
+            "id", "created", "modified", "user", "key", "value", "proctored_exam"
         )

edx_proctoring/static/proctoring/js/proctored_exam_allowance_model.js → edx_proctoring/static/proctoring/js/models/proctored_exam_allowance_model.js

@@ -8,12 +8,8 @@ var edx = edx || {};
     edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
 
     edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel = Backbone.Model.extend({
-        /* we should probably pull this from a data attribute on the HTML */
-        url: '/api/edx_proctoring/v1/proctored_exam/allowance',
-
-        defaults: {
 
-        }
+        /* we should probably pull this from a data attribute on the HTML */
     });
     this.edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel = edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel;
 }).call(this, Backbone);

edx_proctoring/static/proctoring/js/proctored_exam_allowance_view.js → edx_proctoring/static/proctoring/js/views/proctored_exam_allowance_view.js

@@ -11,13 +11,13 @@ var edx = edx || {};
             this.collection = new edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection();
 
             /* unfortunately we have to make some assumptions about what is being set up in HTML */
-            this.$el = $('.special-allowance-container');
+            this.setElement($('.special-allowance-container'));
             this.course_id = this.$el.data('course-id');
 
             /* this should be moved to a 'data' attribute in HTML */
             this.tempate_url = '/static/proctoring/templates/add-allowance.underscore';
             this.template = null;
-
+            this.allowance_url = this.collection.url;
             /* re-render if the model changes */
             this.listenTo(this.collection, 'change', this.collectionChanged);
 
@@ -26,9 +26,44 @@ var edx = edx || {};
             /* will call into the rendering */
             this.loadTemplateData();
 
-            this.collection.url = this.collection.url + '/' + this.course_id;
+            this.collection.url = this.allowance_url + '/' + this.course_id;
 
         },
+        events: {
+            'click #add-allowance': 'showAddModal',
+            'click #remove_allowance': 'removeAllowance'
+        },
+        showAddModal: function(){
+          alert('here');
+        },
+        removeAllowance: function(event){
+            var element = $(event.currentTarget);
+            var userID = element.data('user-id');
+            var examID = element.data('exam-id');
+            var key = element.data('key-name');
+            var self = this;
+            self.collection.url = this.allowance_url;
+            self.collection.fetch(
+                {
+                    headers: {
+                        "X-CSRFToken": this.getCSRFToken()
+                    },
+                    type: 'DELETE',
+                    data: {
+                        'exam_id': examID,
+                        'user_id': userID,
+                        'key': key
+                    },
+                    success: function () {
+                        // fetch the user preferences again.
+                        self.collection.url = self.notification_preferences_all;
+                        self.render();
+                    }
+                }
+            );
+            event.stopPropagation();
+            event.preventDefault();
+        },
         /*
             This entry point is required for Instructor Dashboard
             See setup_instructor_dashboard_sections() in
@@ -62,10 +97,11 @@ var edx = edx || {};
             /* we might - at some point - add a visual element to the */
             /* loading, like a spinner */
             var self = this;
-            this.collection.fetch({
-                success: function(){
+            self.collection.fetch().done(
+                function(){
                     self.render();
-                }
+                }).fail(function(){
+                    console.log('fail');
                 });
         },
         collectionChanged: function() {
@@ -73,7 +109,7 @@ var edx = edx || {};
         },
         render: function () {
             if (this.template !== null) {
-                var html = this.template(this.collection.toJSON());
+                var html = this.template({proctored_exam_allowances: this.collection.toJSON()});
                 this.$el.html(html);
                 this.$el.show();
             }

edx_proctoring/static/proctoring/js/proctored_exam_view.js → edx_proctoring/static/proctoring/js/views/proctored_exam_view.js

@@ -4,7 +4,7 @@ var edx = edx || {};
     'use strict';
 
     edx.coursware = edx.coursware || {};
-    edx.coursware.proctored_exam = {};
+    edx.coursware.proctored_exam = edx.coursware.proctored_exam || {};
 
     edx.coursware.proctored_exam.ProctoredExamView = Backbone.View.extend({
         initialize: function (options) {

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

-<span class="tip"> <%- gettext("Add Allowance for User: ") %> <span>
-<a id="add-allowance" href="#"  class="add blue-button">+ <%- gettext("Add Allowance") %></a>
+<span class="tip"> <%- gettext("Add Allowance for User: ") %>
+    <span>
+        <a id="add-allowance" href="#"  class="add blue-button">+ <%- gettext("Add Allowance") %></a>
+    </span>
 </span>
+<div class="wrapper-content wrapper">
+   <section class="content">
+      <table class="allowance-table">
+         <thead>
+            <tr class="allowance-headings">
+               <th class="exam-name">Exam Name</th>
+               <th class="username">Username</th>
+               <th class="email">Email</th>
+               <th class="allowance-name">Allowance Name </th>
+               <th class="allowance-value">Allowance Value</th>
+               <th class="c_action">Actions</th>
+            </tr>
+         </thead>
+         <tbody>
+            <% _.each(proctored_exam_allowances, function(proctored_exam_allowance){ %>
+                <tr class="allowance-items">
+                    <td><%= proctored_exam_allowance.proctored_exam.exam_name %></td>
+                    <td> Dummy Username </td>
+                    <td>muhammad.shoaib@gmail.com</td>
+                    <td><%= proctored_exam_allowance.key %></td>
+                   <td><%= proctored_exam_allowance.value %></td>
+                   <td>
+                   <a data-exam-id="<%= proctored_exam_allowance.proctored_exam.id %>"
+                    data-key-name="<%= proctored_exam_allowance.key %>"
+                    data-user-id="<%= proctored_exam_allowance.user_id %>"
+                   class="remove_allowance" href="#">[x]</a>
+                   </td>
+                </tr>
+            <% }); %>
+
+         </tbody>
+      </table>
+   </section>
+</div>
 
 

edx_proctoring/views.py

@@ -358,13 +358,16 @@ class ExamAllowanceView(AuthenticatedAPIView):
     **Response Values**
         * returns Nothing. deletes the allowance for the user proctored exam.
     """
+    # @method_decorator(require_staff)
     def get(self, request, course_id):  # pylint: disable=unused-argument
         """
         HTTP GET handler. Get all allowances for a course.
         """
-        return Response(get_allowances_for_course(
+
+        result_set = get_allowances_for_course(
             course_id=course_id
-        ))
+        )
+        return Response(result_set)
 
     @method_decorator(require_staff)
     def put(self, request):