Integrate google diff with hitory widget ECOM-6994

course_discovery/apps/publisher/api/serializers.py

@@ -80,12 +80,13 @@ class CourseRevisionSerializer(serializers.ModelSerializer):
     primary_subject = serializers.SerializerMethodField()
     secondary_subject = serializers.SerializerMethodField()
     tertiary_subject = serializers.SerializerMethodField()
+    level_type = serializers.SerializerMethodField()
 
     class Meta:
         model = apps.get_model('publisher', 'historicalcourse')
         fields = (
             'history_id', 'title', 'number', 'short_description', 'full_description', 'expected_learnings',
-            'prerequisites', 'primary_subject', 'secondary_subject', 'tertiary_subject',
+            'prerequisites', 'primary_subject', 'secondary_subject', 'tertiary_subject', 'level_type',
         )
 
     def get_primary_subject(self, obj):
@@ -100,6 +101,10 @@ class CourseRevisionSerializer(serializers.ModelSerializer):
         if obj.tertiary_subject:
             return obj.tertiary_subject.name
 
+    def get_level_type(self, obj):
+        if obj.level_type:
+            return obj.level_type.name
+
 
 class CourseStateSerializer(serializers.ModelSerializer):
     """Serializer for `CourseState` model to change course workflow state. """

course_discovery/apps/publisher/api/tests/test_serializers.py

@@ -98,7 +98,8 @@ class CourseRevisionSerializerTests(TestCase):
             'prerequisites': revision.prerequisites,
             'primary_subject': revision.primary_subject.name,
             'secondary_subject': revision.secondary_subject.name,
-            'tertiary_subject': revision.tertiary_subject.name
+            'tertiary_subject': revision.tertiary_subject.name,
+            'level_type': revision.level_type.name
         }
 
         self.assertDictEqual(serializer.data, expected)
@@ -108,7 +109,7 @@ class CourseRevisionSerializerTests(TestCase):
         even if subject fields are not available.
         """
 
-        course = CourseFactory(primary_subject=None, secondary_subject=None, tertiary_subject=None)
+        course = CourseFactory(primary_subject=None, secondary_subject=None, tertiary_subject=None, level_type=None)
         course.title = 'updated title'
         course.save()
         revision = course.history.first()
@@ -122,9 +123,10 @@ class CourseRevisionSerializerTests(TestCase):
             'full_description': revision.full_description,
             'expected_learnings': revision.expected_learnings,
             'prerequisites': revision.prerequisites,
-            'primary_subject': revision.primary_subject,
+            'primary_subject': None,
             'secondary_subject': None,
-            'tertiary_subject': None
+            'tertiary_subject': None,
+            'level_type': None
         }
 
         self.assertDictEqual(serializer.data, expected)

course_discovery/apps/publisher/api/tests/test_views.py

@@ -349,7 +349,8 @@ class CourseRevisionDetailViewTests(TestCase):
             'prerequisites': revision.prerequisites,
             'primary_subject': revision.primary_subject.name,
             'secondary_subject': revision.secondary_subject.name,
-            'tertiary_subject': revision.tertiary_subject.name
+            'tertiary_subject': revision.tertiary_subject.name,
+            'level_type': revision.level_type.name
         }
 
         response = self._get_response(revision.history_id)

course_discovery/static/js/publisher/publisher.js

@@ -239,10 +239,41 @@ $(document).on('change', '#id_type', function (e) {
 });
 
 $(document).on('change', '#id_select_revisions', function (e) {
+    var revisionUrl = $(this.selectedOptions).data('revisionUrl');
     // on changing the revision from dropdown set the href of button.
     $('#id_open_revision').prop("href", this.value);
+
+    if (revisionUrl) {
+        loadRevisionHistory(revisionUrl);
+    } else {
+        $('.show-diff').hide();
+        $('.current').show();
+    }
 });
 
+function loadRevisionHistory(revisionUrl) {
+
+    $.getJSON({
+        url: revisionUrl,
+        success: function (data) {
+            $.each(data, function(key, value) {
+              var currentObject = $('.history-field-container').find('.' + key);
+                if (currentObject.length) {
+                    showDiff(value, currentObject.text(), currentObject.siblings('.show-diff'));
+                    currentObject.hide();
+                }
+            });
+        }
+    });
+}
+
+var dmp = new diff_match_patch();
+function showDiff(currentObject, historyObject, $outputDiv) {
+    var d = dmp.diff_main(historyObject, currentObject);
+    $outputDiv.html(dmp.diff_prettyHtml(d));
+    $outputDiv.show();
+}
+
 function addModalError(errorMessage) {
     var errorHtml = '<div class="alert alert-error" role="alert" aria-labelledby="alert-title-error" tabindex="-1">' +
         '<div><p class="alert-copy">' + errorMessage + '</p></div></div>';

course_discovery/templates/publisher/_history_widget.html

@@ -8,7 +8,7 @@
             {% if forloop.first %}
                 <option value="{% url 'publisher:publisher_course_revision' course.id history.history_id %}">{% trans "Latest version" %}</option>
             {% else %}
-                <option value="{% url 'publisher:publisher_course_revision' course.id history.history_id %}">
+                <option data-revision-url="{% url 'publisher:api:course_revisions' history.history_id  %}" value="{% url 'publisher:publisher_course_revision' course.id history.history_id %}">
                     {% blocktrans with history.history_date|date:'d-m-Y' as history_date and history.changed_by as changed_by trimmed %}
                         {{ history_date }}&nbsp;by&nbsp;{{ changed_by}}
                     {% endblocktrans %}

course_discovery/templates/publisher/course_detail.html

@@ -25,53 +25,60 @@
                 <div>{{ object.course_team_admin.full_name }}</div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Course Title" %}
                 </div>
-                <div>{{ object.title }}</div>
+                <div class="current title">{{ object.title }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Brief Description" %}
                 </div>
-                <div>{{ object.short_description }}</div>
+                <div class="current short_description">{{ object.short_description }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Full Description" %}
                 </div>
-                <div>{{ object.full_description }}</div>
+                <div class="current full_description">{{ object.full_description }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Expected Learnings" %}
                 </div>
-                <div>{{ object.expected_learnings }}</div>
+                <div class="current expected_learnings">{{ object.expected_learnings }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Primary Subject" %}
                 </div>
-                <div>{{ object.primary_subject }}</div>
+                <div class="current primary_subject">{{ object.primary_subject }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Secondary Subject" %}
                 </div>
-                <div>{{ object.secondary_subject }}</div>
+                <div class="current secondary_subject">{{ object.secondary_subject }}</div>
+                <div class="show-diff"></div>
             </div>
 
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Tertiary Subject" %}
                 </div>
-                <div>{{ object.tertiary_subject }}</div>
+                <div class="current tertiary_subject">{{ object.tertiary_subject }}</div>
+                <div class="show-diff"></div>
             </div>
             <div class="info-item">
                 <div class="heading course-image-heading">
@@ -81,16 +88,18 @@
                     <img class="course-image" src="{{ object.image.url }}" alt="{% trans 'Course Image' %}">
                 {% endif %}
             </div>
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">
                     {% trans "Prerequisites" %}
                 </div>
-                <div>{{ object.prerequisites }}</div>
+                <div class="current prerequisites">{{ object.prerequisites }}</div>
+                <div class="show-diff"></div>
             </div>
-            <div class="info-item">
+            <div class="info-item history-field-container">
                 <div class="heading">{% trans "Course Level" %}
                 </div>
-                <div>{{ object.level_type }}</div>
+                <div class="current level_type">{{ object.level_type }}</div>
+                <div class="show-diff"></div>
             </div>
         </div>
     </main>
@@ -101,5 +110,6 @@
 </div>
 {% endblock %}
 {% block extra_js %}
+    <script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script>
     <script src="{% static 'js/publisher/publisher.js' %}"></script>
 {% endblock %}