Merge pull request #5032 from mlkwaqas/waqas/tnl148-reset-newpost-form-on-cancel

Forums new post form should reset state when user cancels

common/static/coffee/spec/discussion/view/new_post_view_spec.coffee

@@ -4,7 +4,10 @@ describe "NewPostView", ->
         DiscussionSpecHelper.setUpGlobals()
         DiscussionSpecHelper.setUnderscoreFixtures()
         window.$$course_id = "edX/999/test"
-        spyOn(DiscussionUtil, "makeWmdEditor")
+        spyOn(DiscussionUtil, "makeWmdEditor").andCallFake(
+          ($content, $local, cls_identifier) ->
+            $local("." + cls_identifier).html("<textarea></textarea>")
+        )
         @discussion = new Discussion([], {pages: 1})
 
     describe "Drop down works correct", ->
@@ -168,6 +171,79 @@ describe "NewPostView", ->
             $.ajax.reset()
         )
 
+    describe "cancel post resets form ", ->
+      beforeEach ->
+        @course_settings = new DiscussionCourseSettings({
+          "allow_anonymous_to_peers":true,
+          "allow_anonymous":true,
+          "category_map": {
+            "subcategories": {
+              "Week 1": {
+                "subcategories": {},
+                "children": [
+                  "Topic-Level Student-Visible Label"
+                ],
+                "entries": {
+                  "Topic-Level Student-Visible Label": {
+                    "sort_key": null,
+                    "is_cohorted": false,
+                    "id": "2b3a858d0c884eb4b272dbbe3f2ffddd"
+                  }
+                }
+              }
+            },
+            "children": [
+              "General",
+              "Week 1"
+            ],
+            "entries": {
+              "General": {
+                "sort_key": "General",
+                "is_cohorted": false,
+                "id": "i4x-waqastest-waqastest-course-waqastest"
+              }
+            }
+          }
+        })
+
+      checkPostCancelReset = (mode, discussion, course_settings) ->
+        view = new NewPostView(
+          el: $("#fixture-element"),
+          collection: discussion,
+          course_settings: course_settings,
+          mode: mode
+        )
+        view.render()
+        eventSpy = jasmine.createSpy('eventSpy')
+        view.listenTo(view, "newPost:cancel", eventSpy)
+        view.$(".post-errors").html("<li class='post-error'>Title can't be empty</li>")
+        view.$("#tab-post-type-discussion").click()
+        view.$(".js-post-title").val("Test Title")
+        view.$(".js-post-body textarea").val("Test body")
+        view.$(".wmd-preview p").html("Test body")
+        view.$(".js-follow").prop("checked", false)
+        view.$(".js-anon").prop("checked", true)
+        view.$(".js-anon-peers").prop("checked", true)
+        if mode == "tab"
+          view.$("a[data-discussion-id='2b3a858d0c884eb4b272dbbe3f2ffddd']").click()
+        view.$(".cancel").click()
+        expect(eventSpy).toHaveBeenCalled()
+        expect(view.$(".post-errors").html()).toEqual("");
+        expect($("##{mode}-post-type-question").prop("checked")).toBe(true)
+        expect($("##{mode}-post-type-discussion").prop("checked")).toBe(false)
+        expect(view.$(".js-post-title").val()).toEqual("");
+        expect(view.$(".js-post-body textarea").val()).toEqual("");
+        expect(view.$(".js-follow").prop("checked")).toBe(true)
+        expect(view.$(".js-anon").prop("checked")).toBe(false)
+        expect(view.$(".js-anon-peers").prop("checked")).toBe(false)
+        if mode == "tab"
+          expect(view.$(".js-selected-topic").text()).toEqual("General")
+
+      _.each(["tab", "inline"], (mode) =>
+        it "resets the form in #{mode} mode", ->
+          checkPostCancelReset(mode, @discussion, @course_settings)
+      )
+
     it "posts to the correct URL", ->
       topicId = "test_topic"
       spyOn($, "ajax").andCallFake(

common/static/coffee/src/discussion/discussion_module_view.coffee

@@ -7,7 +7,6 @@ if Backbone?
       "click .new-post-btn": "toggleNewPost"
       "keydown .new-post-btn":
         (event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost)
-      "click .cancel": "hideNewPost"
       "click .discussion-paginator a": "navigateToPage"
 
     paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
@@ -36,9 +35,8 @@ if Backbone?
       @$("section.discussion").slideDown()
       @showed = true
 
-    hideNewPost: (event) ->
-      event.preventDefault()
-      @newPostForm.slideUp(300)
+    hideNewPost: =>
+     @newPostForm.slideUp(300)
 
     hideDiscussion: =>
       @$("section.discussion").slideUp()
@@ -111,6 +109,7 @@ if Backbone?
         topicId: discussionId
       )
       @newPostView.render()
+      @listenTo( @newPostView, 'newPost:cancel', @hideNewPost )
       @discussion.on "add", @addThread
 
       @retrieved = true

common/static/coffee/src/discussion/discussion_router.coffee

@@ -27,9 +27,9 @@ if Backbone?
           mode: "tab"
         )
         @newPostView.render()
+        @listenTo( @newPostView, 'newPost:cancel', @hideNewPost )
         $('.new-post-btn').bind "click", @showNewPost
         $('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost)
-        @newPostView.$('.cancel').bind "click", @hideNewPost
 
     allThreads: ->
       @nav.updateSidebar()
@@ -74,10 +74,9 @@ if Backbone?
           $('.new-post-title').focus()
       )
 
-    hideNewPost: (event) =>
+    hideNewPost: =>
       @newPost.fadeOut(
         duration: 200
         complete: =>
           $('.forum-content').fadeIn(200)
       )
-

common/static/coffee/src/discussion/views/new_post_view.coffee

@@ -55,6 +55,8 @@ if Backbone?
           "click .topic-filter-label": "ignoreClick"
           "keyup .topic-filter-input": DiscussionFilter.filterDrop
           "change .post-option-input": "postOptionChange"
+          "click .cancel": "cancel"
+          "reset .forum-new-post-form": "updateStyles"
 
       # Because we want the behavior that when the body is clicked the menu is
       # closed, we need to ignore clicks in the search field and stop propagation.
@@ -102,11 +104,8 @@ if Backbone?
               success: (response, textStatus) =>
                   # TODO: Move this out of the callback, this makes it feel sluggish
                   thread = new Thread response['content']
-                  DiscussionUtil.clearFormErrors(@$(".post-errors"))
                   @$el.hide()
-                  @$(".js-post-title").val("").attr("prev-text", "")
-                  @$(".js-post-body textarea").val("").attr("prev-text", "")
-                  @$(".wmd-preview p").html("") # only line not duplicated in new post inline view
+                  @resetForm()
                   @collection.add thread
 
 
@@ -199,3 +198,24 @@ if Backbone?
               name =  gettext("…") + " / " + rawName + " " + gettext("…")
 
           return name
+
+      cancel: (event) ->
+        event.preventDefault()
+        if not confirm gettext("Your post will be discarded.")
+          return
+        @trigger('newPost:cancel')
+        @resetForm()
+
+      resetForm: =>
+        @$(".forum-new-post-form")[0].reset()
+        DiscussionUtil.clearFormErrors(@$(".post-errors"))
+        @$(".wmd-preview p").html("")
+        if @mode is "tab"
+          @setTopic(@$("a.topic-title").first())
+
+      updateStyles: =>
+        # form reset doesn't change the style of checkboxes so this event is to do that job
+        setTimeout(
+          (=> @$(".post-option-input").trigger("change")),
+          1
+        )