Adding comments template on course-run detail page.

ECOM-6075

course_discovery/apps/publisher/migrations/0032_create_switch_for_comments.py

+from django.db import migrations
+
+
+def create_switch(apps, schema_editor):
+    """Create the publisher_comment_widget_feature switch if it does not already exist."""
+    Switch = apps.get_model('waffle', 'Switch')
+    Switch.objects.get_or_create(name='publisher_comment_widget_feature', defaults={'active': False})
+
+
+def delete_switch(apps, schema_editor):
+    """Delete the publisher_comment_widget_feature switch."""
+    Switch = apps.get_model('waffle', 'Switch')
+    Switch.objects.filter(name='publisher_comment_widget_feature').delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('publisher', '0031_courserunstate_coursestate_historicalcourserunstate_historicalcoursestate'),
+        ('waffle', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RunPython(create_switch, delete_switch),
+    ]

course_discovery/apps/publisher/tests/test_views.py

@@ -601,8 +601,7 @@ class SeatsCreateUpdateViewTests(TestCase):
         # add new and check the comment on edit page.
         comment = CommentFactory(content_object=self.seat, user=self.user, site=self.site)
         response = self.client.get(self.seat_edit_url)
-        self.assertContains(response, 'Total Comments 1')
-        self.assertContains(response, 'Add new comment')
+        self.assertContains(response, 'Comment:')
         self.assertContains(response, comment.comment)
 
     def test_edit_seat_page_with_non_staff(self):
@@ -861,7 +860,6 @@ class CourseRunDetailTests(TestCase):
         self._assert_cat(response)
         self._assert_drupal(response)
         self._assert_subjects(response)
-        self.assertContains(response, 'Total Comments 1')
         self.assertContains(response, comment.comment)
         self._assert_breadcrumbs(response, self.course_run)
 
@@ -990,22 +988,38 @@ class CourseRunDetailTests(TestCase):
         self.assertNotIn(response_string, '<button data-tab="#tab-4">DRUPAL</button>')
         self.assertNotIn(response_string, '<button data-tab="#tab-5">Salesforce</button>')
 
-    def test_page_enable_waffle_switch(self):
+    def test_page_enable_waffle_switch_pilot(self):
         """ Verify that user will see only studio fields when 'publisher_hide_features_for_pilot' is activated. """
         toggle_switch('publisher_hide_features_for_pilot', True)
         response = self.client.get(self.page_url)
 
-        self.assertContains(response, '<aside class="layout-col layout-col-a hidden">')
+        self.assertContains(response, '<div id="approval-widget" class="hidden">')
         self.assertContains(response, '<div class="non-studio-fields hidden">')
 
-    def test_page_disable_waffle_switch(self):
+    def test_page_disable_waffle_switch_pilot(self):
         """ Verify that user will see whole page when 'publisher_hide_features_for_pilot' is deactivated. """
         toggle_switch('publisher_hide_features_for_pilot', False)
         response = self.client.get(self.page_url)
 
-        response_string = response.content.decode('UTF-8')
-        self.assertNotIn(response_string, '<aside class="layout-col layout-col-a hidden">')
-        self.assertNotIn(response_string, '<div class="non-studio-fields hidden">')
+        self.assertContains(response, '<div id="approval-widget" class="">')
+        self.assertContains(response, '<div class="non-studio-fields ">')
+
+    def test_comments_with_enable_switch(self):
+        """ Verify that user will see the comments widget when
+        'publisher_comment_widget_feature' is enabled.
+        """
+        toggle_switch('publisher_comment_widget_feature', True)
+        response = self.client.get(self.page_url)
+
+        self.assertContains(response, '<div id="comments-widget" class="comment-container ">')
+
+    def test_comments_with_disable_switch(self):
+        """ Verify that user will not see the comments widget when
+        'publisher_comment_widget_feature' is disable.
+        """
+        toggle_switch('publisher_comment_widget_feature', False)
+        response = self.client.get(self.page_url)
+        self.assertContains(response, '<div id="comments-widget" class="comment-container hidden">')
 
 
 class ChangeStateViewTests(TestCase):

course_discovery/apps/publisher/views.py

@@ -168,6 +168,7 @@ class CourseRunDetailView(mixins.LoginRequiredMixin, mixins.PublisherPermissionM
 
         context['can_view_all_tabs'] = mixins.check_roles_access(self.request.user)
         context['publisher_hide_features_for_pilot'] = waffle.switch_is_active('publisher_hide_features_for_pilot')
+        context['publisher_comment_widget_feature'] = waffle.switch_is_active('publisher_comment_widget_feature')
 
         return context
 

course_discovery/conf/locale/en/LC_MESSAGES/django.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-02-08 23:51-0500\n"
+"POT-Creation-Date: 2017-02-09 15:57+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 
 #: apps/api/filters.py
 #, python-brace-format
@@ -828,12 +828,11 @@ msgid "modified"
 msgstr ""
 
 #: templates/comments/add_auth_comments.html
-msgid "Add new comment"
+msgid "Comment:"
 msgstr ""
 
 #: templates/comments/comments_list.html
-#, python-format
-msgid "Total Comments %(comment_count)s"
+msgid "Submitted by"
 msgstr ""
 
 #: templates/comments/edit_comment.html

course_discovery/conf/locale/en/LC_MESSAGES/djangojs.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-02-08 23:51-0500\n"
+"POT-Creation-Date: 2017-02-09 15:57+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 
 #: static/js/catalogs-change-form.js
 msgid "Preview"

course_discovery/conf/locale/eo/LC_MESSAGES/django.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-02-08 23:51-0500\n"
+"POT-Creation-Date: 2017-02-09 15:57+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
 #: apps/api/filters.py
@@ -982,13 +982,12 @@ msgid "modified"
 msgstr "mödïfïéd Ⱡ'σяєм ιρѕυм ∂#"
 
 #: templates/comments/add_auth_comments.html
-msgid "Add new comment"
-msgstr "Àdd néw çömmént Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт α#"
+msgid "Comment:"
+msgstr "Çömmént: Ⱡ'σяєм ιρѕυм ∂#"
 
 #: templates/comments/comments_list.html
-#, python-format
-msgid "Total Comments %(comment_count)s"
-msgstr "Tötäl Çömménts %(comment_count)s Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт#"
+msgid "Submitted by"
+msgstr "Süßmïttéd ßý Ⱡ'σяєм ιρѕυм ∂σłσя ѕ#"
 
 #: templates/comments/edit_comment.html
 msgid "Course Run Form"

course_discovery/conf/locale/eo/LC_MESSAGES/djangojs.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-02-08 23:51-0500\n"
+"POT-Creation-Date: 2017-02-09 15:57+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
 #: static/js/catalogs-change-form.js

course_discovery/static/js/publisher/comments.js

@@ -18,43 +18,48 @@ $(document).on('click', '.comment-edit', function (e) {
         editableControlsHtml = '<div class="edit-controls"><button class="btn-brand btn-small comment-save">Save</button>' +
             '<button class="btn-brand btn-small comment-cancel">Cancel</button></div>';
 
-    $(parentDt).next('dd').attr('contenteditable', 'True').addClass('editable-comment');
-    $(parentDt).after(editableControlsHtml);
-    $('.editable-comment').data('oldComment', $('.edit-controls').next().text());
+    $(parentDt).prev('dd').attr('contenteditable', 'True').addClass('editable-comment');
+    $(parentDt).prev('dd').after(editableControlsHtml);
+    $('.editable-comment').data('oldComment', $('.edit-controls').prev().text());
 
     $(parentDt).hide();
 });
 
 $(document).on('click', '.comment-cancel', function (e) {
     e.preventDefault();
-
-    var editableControls = $('.edit-controls'),
-        editableDd = $(editableControls).next();
-
-    editableDd.text($('.editable-comment').data('oldComment'));
-    editableControls.hide();
-    removeEditable(editableControls, editableDd)
+    cancelHtmlRender();
 });
 
 $(document).on('click', '.comment-save', function (e) {
     e.preventDefault();
 
     var editableControls = $('.edit-controls'),
-        editableDd = $(editableControls).next(),
-        updatedComment = $(editableDd).text();
+        editableDd = $(editableControls).prev(),
+        updatedComment = $(editableDd).text(),
+        oldComment = $('.editable-comment').data('oldComment');
+
+    if (updatedComment === ''){
+        $(editableDd).focus();
+        return
+    }
+
+     if (updatedComment === oldComment) {
+        cancelHtmlRender();
+        return
+    }
 
     $.ajax({
         type: "PATCH",
-        url: $(editableControls).prev().find('button').data('url'),
+        url: $(editableControls).next().find('button').data('url'),
         data: {'comment': updatedComment},
         success: function (response) {
             var formattedDatetime;
             removeEditable(editableControls, editableDd);
             $(editableDd).text(response['comment']);
 
-            //format datetime e.g. Dec. 15, 2016, 10:03 a.m.
-            formattedDatetime = $.format.date(response['modified'], 'MMM. dd, yyyy, hh:mm p');
-            $(editableDd).prev().find('span.datetime').text(formattedDatetime);
+            //format datetime e.g. February 08, 2017, 13:36:45 p.m.
+            formattedDatetime = $.format.date(response['modified'], 'MMMM dd, yyyy, hh:mm p');
+            $(editableDd).prev('dt').find('span.datetime').text(formattedDatetime);
         },
         error: function () {
             alert("Unable to edit comment this time, Please try again later.");
@@ -65,8 +70,17 @@ $(document).on('click', '.comment-save', function (e) {
 
 });
 
+function cancelHtmlRender(){
+    var editableControls = $('.edit-controls'),
+        editableDd = $(editableControls).prev();
+
+    editableDd.text($('.editable-comment').data('oldComment'));
+    editableControls.hide();
+    removeEditable(editableControls, editableDd)
+}
+
 function removeEditable(editableControls, editableDd) {
    $(editableControls).remove();
    $(editableDd).removeAttr('contenteditable').removeClass('editable-comment');
-    $(editableDd).prev().show();
+   $(editableDd).next('dt').show();
 }

course_discovery/static/sass/publisher/course_form.scss

@@ -18,9 +18,35 @@
   margin-bottom: 20px;
 }
 
-#comments dt {
-  font-weight: bold;
-  color: #757575;
+.comments{
+  @include margin(0px, 0px, 0px, 0px);
+  margin: 5% auto;
+
+  .align-right {
+    @include text-align(right);
+    margin: 10px auto;
+  }
+  .submitted-by {
+    overflow: auto;
+    @include text-align(right);
+    margin-bottom: 40px;
+
+    span {
+      @include float(left);
+      margin: 10px auto;
+    }
+  }
+}
+
+.add-comment {
+  @include text-align(right);
+  margin-top: 5px;
+}
+
+#id_comment {
+  width:  100%;
+  max-width:  100%;
+  rows: 6;
 }
 
 .editable-comment {

course_discovery/templates/comments/add_auth_comments.html

@@ -3,7 +3,7 @@
 
 {% if user.is_authenticated and comment_object %}
     <div>
-        <p>{% trans 'Add new comment' %}</p>
+        <p><div class="heading">{% trans 'Comment:' %}</div></p>
         <div>
             {% get_comment_form for comment_object as form %}
             <form id="frm_comment" action="{% comment_form_target %}" method="POST">
@@ -14,8 +14,8 @@
                 {{ form.timestamp }}
                 {{ form.security_hash }}
                 <input type="hidden" name="next" value="{% url 'publisher:publisher_course_run_detail' object.id %}"/>
-                <div>
-                    <input type="button" value="Add comment" id="id_submit" class="btn-brand btn-base" />
+                <div class="add-comment">
+                    <input type="button" value="Add comment" id="id_submit" class="btn btn-brand btn-small btn-course-add" />
                 </div>
             </form>
         </div>

course_discovery/templates/comments/comments_list.html

@@ -2,25 +2,21 @@
 {% load comments %}
 {% if comment_object %}
 <div>
-    {% get_comment_count for comment_object as comment_count %}
-    <h4 class="hd-4">
-        {% blocktrans with comment_count=comment_count trimmed %}
-            Total Comments {{ comment_count }}
-        {% endblocktrans %}
-    </h4>
-
     {% get_comment_list for comment_object as comment_list %}
     <dl class="comments">
       {% for comment in comment_list reversed %}
-        <dt>
-          <span class="datetime">{{ comment.modified }}</span> - <span>{{ comment.name }}</span>
+        <dt class="align-right"><span class="datetime">{{ comment.modified|date:"F d, Y, H:i:s a" }}&nbsp;</span></dt>
+        <dd class="edit-comment">
+          {{ comment.comment }}
+        </dd>
+        <dt class="submitted-by">
+            <span>
+                <em>{% trans 'Submitted by' %}&nbsp;{{ comment.name }}</em>
+            </span>
             {% ifequal user comment.user %}
-            - <button class="btn-brand btn-small btn-comment comment-edit" data-url="{% url 'publisher_comments:api:comments' comment.id %}">Edit</button>
+                <button class="align-right btn-neutral btn-small btn-comment comment-edit" data-url="{% url 'publisher_comments:api:comments' comment.id %}">Edit</button>
             {% endifequal %}
         </dt>
-        <dd>
-          {{ comment.comment }}
-        </dd>
       {% endfor %}
     </dl>
 </div>

course_discovery/templates/publisher/course_run_detail.html

@@ -9,8 +9,8 @@
 {% endblock title %}
 
 {% block page_content %}
-<div class="layout-1t2t layout-flush publisher-container course-detail">
-    <main class="layout-col layout-col-b">
+<div class="grid-manual">
+    <main class="col col-7">
         <nav class="administration-nav">
             <div class="tab-container">
                 {% if can_view_all_tabs %}
@@ -66,8 +66,14 @@
         </div>
     </main>
 
-    <aside class="layout-col layout-col-a {% if publisher_hide_features_for_pilot %}hidden{% endif %}">
+    <aside id="right-panel" class="col col-5">
+        <div id="approval-widget" class="{% if publisher_hide_features_for_pilot %}hidden{% endif %}">
           {% include 'publisher/course_run_detail/_approval_widget.html' %}
+        </div>
+        <div id="comments-widget" class="comment-container {% if not publisher_comment_widget_feature %}hidden{% endif %}">
+            {% include 'comments/add_auth_comments.html' %}
+            {% include 'comments/comments_list.html' %}
+        </div>
     </aside>
 </div>
 {% endblock %}

course_discovery/templates/publisher/course_run_detail/_approval_widget.html

@@ -44,9 +44,4 @@
             <button type="submit" value="{{ object.change_state_button.value }}" class="btn-brand btn-small btn-states" name="state">{{ object.change_state_button.text }}</button>
         </form>
     </div>
-
-    <div class="comment-container">
-        {% include 'comments/comments_list.html' %}
-        {% include 'comments/add_auth_comments.html' %}
-    </div>
 </div>