Commit 7978f8dd2b62baacb0d045b65282b758a76da118

Authored by Riyad Preukschas
1 parent c1ffee4e

Fix handling form errors.

app/assets/javascripts/notes.js
@@ -69,12 +69,10 @@ var NoteList = { @@ -69,12 +69,10 @@ var NoteList = {
69 ".js-note-delete", 69 ".js-note-delete",
70 NoteList.removeNote); 70 NoteList.removeNote);
71 71
72 - // clean up previews for forms  
73 - $(document).on("ajax:complete", ".js-main-target-form", function(){  
74 - $(this).find('.error').remove();  
75 - $(this).find('.js-note-text').val("");  
76 - $(this).show();  
77 - }); 72 + // clean up previews for main target form
  73 + $(document).on("ajax:complete",
  74 + ".js-main-target-form",
  75 + NoteList.cleanupMainTargetForm);
78 }, 76 },
79 77
80 78
@@ -84,6 +82,26 @@ var NoteList = { @@ -84,6 +82,26 @@ var NoteList = {
84 82
85 83
86 /** 84 /**
  85 + *
  86 + */
  87 + cleanupMainTargetForm: function(){
  88 + var form = $(this);
  89 +
  90 + // remove validation errors
  91 + form.find(".js-errors").remove();
  92 +
  93 + // reset text and preview
  94 + var previewContainer = form.find(".js-toggler-container.note_text_and_preview");
  95 + if (previewContainer.is(".on")) {
  96 + previewContainer.removeClass("on");
  97 + }
  98 + form.find(".js-note-text").val("").trigger("input");
  99 +
  100 + // re-enable submit button
  101 + form.find(".js-comment-button").enable();
  102 + },
  103 +
  104 + /**
87 * Called when clicking on the "add a comment" button on the side of a diff line. 105 * Called when clicking on the "add a comment" button on the side of a diff line.
88 * 106 *
89 * Inserts a temporary row for the form below the line. 107 * Inserts a temporary row for the form below the line.
@@ -219,6 +237,27 @@ var NoteList = { @@ -219,6 +237,27 @@ var NoteList = {
219 237
220 238
221 /** 239 /**
  240 + * Called in response to creating a note failing validation.
  241 + *
  242 + * Adds the rendered errors to the respective form.
  243 + * If "discussionId" is null or undefined, the main target form is assumed.
  244 + */
  245 + errorsOnForm: function(errorsHtml, discussionId) {
  246 + // find the form
  247 + if (discussionId) {
  248 + var form = $("form[rel='"+discussionId+"']");
  249 + } else {
  250 + var form = $(".js-main-target-form");
  251 + }
  252 +
  253 + form.find(".js-errors").remove();
  254 + form.prepend(errorsHtml);
  255 +
  256 + form.find(".js-note-text").focus();
  257 + },
  258 +
  259 +
  260 + /**
222 * Shows the diff/discussion form and does some setup on it. 261 * Shows the diff/discussion form and does some setup on it.
223 * 262 *
224 * Sets some hidden fields in the form. 263 * Sets some hidden fields in the form.
@@ -235,8 +274,6 @@ var NoteList = { @@ -235,8 +274,6 @@ var NoteList = {
235 274
236 NoteList.setupNoteForm(form); 275 NoteList.setupNoteForm(form);
237 276
238 - // cleanup after successfully creating a diff/discussion note  
239 - form.on("ajax:success", NoteList.removeDiscussionNoteForm);  
240 }, 277 },
241 278
242 /** 279 /**
@@ -449,19 +486,26 @@ var NoteList = { @@ -449,19 +486,26 @@ var NoteList = {
449 486
450 /** 487 /**
451 * Adds a single discussion note to #notes-list. 488 * Adds a single discussion note to #notes-list.
  489 + *
  490 + * Also removes the corresponding form.
452 */ 491 */
453 appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) { 492 appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) {
  493 + var form = $("form[rel='"+discussionId+"']");
  494 + var row = form.closest("tr");
  495 +
454 // is this the first note of discussion? 496 // is this the first note of discussion?
455 - var row = $("form[rel='"+discussionId+"']").closest("tr");  
456 if (row.is(".js-temp-notes-holder")) { 497 if (row.is(".js-temp-notes-holder")) {
457 - // insert the note and the reply button after it 498 + // insert the note and the reply button after the temp row
458 row.after(diffRowHtml); 499 row.after(diffRowHtml);
459 - // will be added again below 500 + // remove the note (will be added again below)
460 row.next().find(".note").remove(); 501 row.next().find(".note").remove();
461 } 502 }
462 503
463 // append new note to all matching discussions 504 // append new note to all matching discussions
464 $(".notes[rel='"+discussionId+"']").append(noteHtml); 505 $(".notes[rel='"+discussionId+"']").append(noteHtml);
  506 +
  507 + // cleanup after successfully creating a diff/discussion note
  508 + $.proxy(NoteList.removeDiscussionNoteForm, form).call();
465 }, 509 },
466 510
467 /** 511 /**
app/views/notes/_form.html.haml
@@ -5,11 +5,6 @@ @@ -5,11 +5,6 @@
5 = f.hidden_field :noteable_id 5 = f.hidden_field :noteable_id
6 = f.hidden_field :noteable_type 6 = f.hidden_field :noteable_type
7 7
8 - - if @note.errors.any?  
9 - .alert-message.block-message.error  
10 - - @note.errors.full_messages.each do |msg|  
11 - %div= msg  
12 -  
13 .note_text_and_preview.js-toggler-container 8 .note_text_and_preview.js-toggler-container
14 %a.js-note-preview-button.js-toggler-target.turn-on{ href: "javascript:;", data: {title: "Preview", url: preview_project_notes_path(@project)} } 9 %a.js-note-preview-button.js-toggler-target.turn-on{ href: "javascript:;", data: {title: "Preview", url: preview_project_notes_path(@project)} }
15 %i.icon-eye-open 10 %i.icon-eye-open
app/views/notes/_form_errors.html.haml 0 → 100644
@@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
  1 +.error_message.js-errors
  2 + - note.errors.full_messages.each do |msg|
  3 + %div= msg
app/views/notes/create.js.haml
@@ -7,10 +7,15 @@ @@ -7,10 +7,15 @@
7 - else 7 - else
8 NoteList.appendNewNote(#{@note.id}, noteHtml); 8 NoteList.appendNewNote(#{@note.id}, noteHtml);
9 - else 9 - else
10 - var firstDiscussionNoteHtml = "#{escape_javascript(render "notes/diff_notes_with_reply", notes: [@note])}";  
11 - NoteList.appendNewDiscussionNote("#{@note.discussion_id}", firstDiscussionNoteHtml, noteHtml); 10 + :plain
  11 + var firstDiscussionNoteHtml = "#{escape_javascript(render "notes/diff_notes_with_reply", notes: [@note])}";
  12 + NoteList.appendNewDiscussionNote("#{@note.discussion_id}",
  13 + firstDiscussionNoteHtml,
  14 + noteHtml);
12 15
13 - else 16 - else
14 - -# TODO: insert form correctly  
15 - $(".js-main-target-note").replaceWith("#{escape_javascript(render 'notes/common_form')}");  
16 - GitLab.GfmAutoComplete.setup();  
17 \ No newline at end of file 17 \ No newline at end of file
  18 + var errorsHtml = "#{escape_javascript(render 'notes/form_errors', note: @note)}";
  19 + - if note_for_main_target?(@note)
  20 + NoteList.errorsOnForm(errorsHtml);
  21 + - else
  22 + NoteList.errorsOnForm(errorsHtml, "#{@note.discussion_id}");
18 \ No newline at end of file 23 \ No newline at end of file