From 6dec04ba0fbc0f2df08362f431b8994f9c816cea Mon Sep 17 00:00:00 2001 From: Waqas Khalid Date: Mon, 1 Sep 2014 17:37:14 +0500 Subject: [PATCH] Cancel the new post resets the state of form When user is creating new post and then cancel it the data remains in the form which appears when we click on new post again. The state of form should be reset. TNL-148 --- .../discussion/view/new_post_view_spec.coffee | 78 ++++++++++++++++++- .../discussion/discussion_module_view.coffee | 7 +- .../src/discussion/discussion_router.coffee | 5 +- .../src/discussion/views/new_post_view.coffee | 28 ++++++- 4 files changed, 106 insertions(+), 12 deletions(-) diff --git a/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee b/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee index a634221803..ad7dc9ff66 100644 --- a/common/static/coffee/spec/discussion/view/new_post_view_spec.coffee +++ b/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("") + ) @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("
  • Title can't be empty
    • ") + 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( diff --git a/common/static/coffee/src/discussion/discussion_module_view.coffee b/common/static/coffee/src/discussion/discussion_module_view.coffee index 741276e6b2..9dc15f7e47 100644 --- a/common/static/coffee/src/discussion/discussion_module_view.coffee +++ b/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 diff --git a/common/static/coffee/src/discussion/discussion_router.coffee b/common/static/coffee/src/discussion/discussion_router.coffee index 5309602bba..27c227f386 100644 --- a/common/static/coffee/src/discussion/discussion_router.coffee +++ b/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) ) - diff --git a/common/static/coffee/src/discussion/views/new_post_view.coffee b/common/static/coffee/src/discussion/views/new_post_view.coffee index 87eb067c7e..8453ea017c 100644 --- a/common/static/coffee/src/discussion/views/new_post_view.coffee +++ b/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 + )