Merge pull request #492 from edx/tasawer/ecom-6525-front-end-for-comment-edit

Tasawer/ecom 6525 front end for comment edit

course_discovery/apps/publisher_comments/api/serializers.py

@@ -6,4 +6,5 @@ class CommentSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Comments
-        fields = ('comment', )
+        fields = ('comment', 'modified', )
+        readonly_fields = ('modified', )

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

@@ -5,10 +5,12 @@ from course_discovery.apps.publisher_comments.tests.factories import CommentFact
 
 
 class CommentSerializerTests(TestCase):
-
     def test_data(self):
         """ Verify that CommentsSerializer serialize the comment object. """
+
         comment = CommentFactory.create(comment='test comment')
         serializer = CommentSerializer(comment)
-        expected = {'comment': 'test comment'}
+        expected = {'comment': 'test comment',
+                    'modified': comment.modified.strftime("%Y-%m-%dT%H:%M:%S.%fZ")}
+
         self.assertDictEqual(serializer.data, expected)

course_discovery/static/js/publisher/comments.js

@@ -11,3 +11,62 @@ $(document).ready(function() {
 
    });
 });
+
+$(document).on('click', '.comment-edit', function (e) {
+    e.preventDefault();
+    var parentDt = this.closest('dt'),
+        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).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)
+});
+
+$(document).on('click', '.comment-save', function (e) {
+    e.preventDefault();
+
+    var editableControls = $('.edit-controls'),
+        editableDd = $(editableControls).next(),
+        updatedComment = $(editableDd).text();
+
+    $.ajax({
+        type: "PATCH",
+        url: $(editableControls).prev().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);
+        },
+        error: function () {
+            alert("Unable to edit comment this time, Please try again later.");
+            removeEditable(editableControls, editableDd);
+
+        }
+    });
+
+});
+
+function removeEditable(editableControls, editableDd) {
+    $(editableControls).remove();
+    $(editableDd).removeAttr('contenteditable').removeClass('editable-comment');
+    $(editableDd).prev().show();
+}

course_discovery/static/js/publisher/jquery-dateFormat.min.js

+var DateFormat={};!function(a){var b=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],f={Jan:"01",Feb:"02",Mar:"03",Apr:"04",May:"05",Jun:"06",Jul:"07",Aug:"08",Sep:"09",Oct:"10",Nov:"11",Dec:"12"},g=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.?\d{0,3}[Z\-+]?(\d{2}:?\d{2})?/;a.format=function(){function a(a){return b[parseInt(a,10)]||a}function h(a){return c[parseInt(a,10)]||a}function i(a){var b=parseInt(a,10)-1;return d[b]||a}function j(a){var b=parseInt(a,10)-1;return e[b]||a}function k(a){return f[a]||a}function l(a){var b,c,d,e,f,g=a,h="";return-1!==g.indexOf(".")&&(e=g.split("."),g=e[0],h=e[e.length-1]),f=g.split(":"),3===f.length?(b=f[0],c=f[1],d=f[2].replace(/\s.+/,"").replace(/[a-z]/gi,""),g=g.replace(/\s.+/,"").replace(/[a-z]/gi,""),{time:g,hour:b,minute:c,second:d,millis:h}):{time:"",hour:"",minute:"",second:"",millis:""}}function m(a,b){for(var c=b-String(a).length,d=0;c>d;d++)a="0"+a;return a}return{parseDate:function(a){var b,c,d={date:null,year:null,month:null,dayOfMonth:null,dayOfWeek:null,time:null};if("number"==typeof a)return this.parseDate(new Date(a));if("function"==typeof a.getFullYear)d.year=String(a.getFullYear()),d.month=String(a.getMonth()+1),d.dayOfMonth=String(a.getDate()),d.time=l(a.toTimeString()+"."+a.getMilliseconds());else if(-1!=a.search(g))b=a.split(/[T\+-]/),d.year=b[0],d.month=b[1],d.dayOfMonth=b[2],d.time=l(b[3].split(".")[0]);else switch(b=a.split(" "),6===b.length&&isNaN(b[5])&&(b[b.length]="()"),b.length){case 6:d.year=b[5],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[3]);break;case 2:c=b[0].split("-"),d.year=c[0],d.month=c[1],d.dayOfMonth=c[2],d.time=l(b[1]);break;case 7:case 9:case 10:d.year=b[3],d.month=k(b[1]),d.dayOfMonth=b[2],d.time=l(b[4]);break;case 1:c=b[0].split(""),d.year=c[0]+c[1]+c[2]+c[3],d.month=c[5]+c[6],d.dayOfMonth=c[8]+c[9],d.time=l(c[13]+c[14]+c[15]+c[16]+c[17]+c[18]+c[19]+c[20]);break;default:return null}return d.date=d.time?new Date(d.year,d.month-1,d.dayOfMonth,d.time.hour,d.time.minute,d.time.second,d.time.millis):new Date(d.year,d.month-1,d.dayOfMonth),d.dayOfWeek=String(d.date.getDay()),d},date:function(b,c){try{var d=this.parseDate(b);if(null===d)return b;for(var e,f=d.year,g=d.month,k=d.dayOfMonth,l=d.dayOfWeek,n=d.time,o="",p="",q="",r=!1,s=0;s<c.length;s++){var t=c.charAt(s),u=c.charAt(s+1);if(r)"'"==t?(p+=""===o?"'":o,o="",r=!1):o+=t;else switch(o+=t,q="",o){case"ddd":p+=a(l),o="";break;case"dd":if("d"===u)break;p+=m(k,2),o="";break;case"d":if("d"===u)break;p+=parseInt(k,10),o="";break;case"D":k=1==k||21==k||31==k?parseInt(k,10)+"st":2==k||22==k?parseInt(k,10)+"nd":3==k||23==k?parseInt(k,10)+"rd":parseInt(k,10)+"th",p+=k,o="";break;case"MMMM":p+=j(g),o="";break;case"MMM":if("M"===u)break;p+=i(g),o="";break;case"MM":if("M"===u)break;p+=m(g,2),o="";break;case"M":if("M"===u)break;p+=parseInt(g,10),o="";break;case"y":case"yyy":if("y"===u)break;p+=o,o="";break;case"yy":if("y"===u)break;p+=String(f).slice(-2),o="";break;case"yyyy":p+=f,o="";break;case"HH":p+=m(n.hour,2),o="";break;case"H":if("H"===u)break;p+=parseInt(n.hour,10),o="";break;case"hh":e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=m(e,2),o="";break;case"h":if("h"===u)break;e=0===parseInt(n.hour,10)?12:n.hour<13?n.hour:n.hour-12,p+=parseInt(e,10),o="";break;case"mm":p+=m(n.minute,2),o="";break;case"m":if("m"===u)break;p+=n.minute,o="";break;case"ss":p+=m(n.second.substring(0,2),2),o="";break;case"s":if("s"===u)break;p+=n.second,o="";break;case"S":case"SS":if("S"===u)break;p+=o,o="";break;case"SSS":var v="000"+n.millis.substring(0,3);p+=v.substring(v.length-3),o="";break;case"a":p+=n.hour>=12?"PM":"AM",o="";break;case"p":p+=n.hour>=12?"p.m.":"a.m.",o="";break;case"E":p+=h(l),o="";break;case"'":o="",r=!0;break;default:p+=t,o=""}}return p+=q}catch(w){return console&&console.log&&console.log(w),b}},prettyDate:function(a){var b,c,d;return("string"==typeof a||"number"==typeof a)&&(b=new Date(a)),"object"==typeof a&&(b=new Date(a.toString())),c=((new Date).getTime()-b.getTime())/1e3,d=Math.floor(c/86400),isNaN(d)||0>d?void 0:60>c?"just now":120>c?"1 minute ago":3600>c?Math.floor(c/60)+" minutes ago":7200>c?"1 hour ago":86400>c?Math.floor(c/3600)+" hours ago":1===d?"Yesterday":7>d?d+" days ago":31>d?Math.ceil(d/7)+" weeks ago":d>=31?"more than 5 weeks ago":void 0},toBrowserTimeZone:function(a,b){return this.date(new Date(a),b||"MM/dd/yyyy HH:mm:ss")}}}()}(DateFormat),function(a){a.format=DateFormat.format}(jQuery);

course_discovery/static/sass/publisher/course_form.scss

@@ -22,3 +22,23 @@
   font-weight: bold;
   color: #757575;
 }
+
+.editable-comment {
+  border: 2px solid #d3d3d3;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.edit-controls {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.comment-save {
+  margin: 2px;
+}
+
+.btn-comment, .comment-cancel, .comment-save{
+  padding-bottom: 2px;
+  padding-top: 2px;
+}

course_discovery/templates/comments/comments_list.html

@@ -12,14 +12,14 @@
     {% get_comment_list for comment_object as comment_list %}
     <dl class="comments">
       {% for comment in comment_list reversed %}
-        <dt id="c{{ comment.comment_list }}">
-          {{ comment.modified }} - {{ comment.name }}
+        <dt>
+          <span class="datetime">{{ comment.modified }}</span> - <span>{{ comment.name }}</span>
           {% ifequal user comment.user %}
-            - <a href="{% url 'publisher_comments:comment_edit' comment.id %}" class="">Edit</a>
+            - <button class="btn-brand btn-small btn-comment comment-edit" data-url="{% url 'publisher_comments:api:comments' comment.id %}">Edit</button>
           {% endifequal %}
         </dt>
         <dd>
-          <p>{{ comment.comment }}</p>
+          {{ comment.comment }}
         </dd>
       {% endfor %}
     </dl>

course_discovery/templates/publisher/course_run_detail.html

@@ -69,6 +69,7 @@
 
 {% block extra_js %}
     <script src="{% static 'bower_components/clipboard/dist/clipboard.min.js' %}"></script>
+    <script src="{% static 'js/publisher/jquery-dateFormat.min.js' %}"></script>
     <script src="{% static 'js/publisher/views/course_detail.js' %}"></script>
     <script src="{% static 'js/publisher/publisher.js' %}"></script>
     <script src="{% static 'js/publisher/comments.js' %}"></script>