Implementing label editing form.

src/main/scala/app/LabelsController.scala

@@ -32,6 +32,13 @@ trait LabelsControllerBase extends ControllerBase {
     redirect("/%s/%s/issues".format(owner, repository))
   })
 
+  get("/:owner/:repository/issues/label/edit")(writableRepository {
+    val owner      = params("owner")
+    val repository = params("repository")
+
+    issues.html.labellist(getLabels(owner, repository), getRepository(owner, repository, baseUrl).get)
+  })
+
   get("/:owner/:repository/issues/label/:labelId/edit")(writableRepository {
     val owner      = params("owner")
     val repository = params("repository")
@@ -50,7 +57,7 @@ trait LabelsControllerBase extends ControllerBase {
 
 //    createLabel(owner, repository, form.labelName, form.color.substring(1))
 //
-    Ok("label updated.")
+    issues.html.labellist(getLabels(owner, repository), getRepository(owner, repository, baseUrl).get)
   })
 
 }

src/main/twirl/issues/issues.scala.html

@@ -15,41 +15,21 @@
       No milestone selected
       <hr/>
       <strong>Labels</strong>
-      <ul id="label-list" class="label-list nav nav-pills nav-stacked">
-        @labels.map { label =>
-          <li>
-            <a href="#">
-              <span class="count-right">0</span>
-              <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
-              @label.labelName
-            </a>
-          </li>
-        }
-      </ul>
-      <ul id="label-edit" class="label-list nav nav-pills nav-stacked" style="display: none;">
-        @labels.map { label =>
-        <li style="border: 1px solid white;">
-          <a href="javascript:void(0);" class="label-edit-link" labelId="@label.labelId" labelName="@label.labelName" color="#@label.color">
-            <span class="count-right"><i class="icon-remove-circle" onclick="alert('delete!');"></i></span>
-            <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
-            @label.labelName
-          </a>
-        </li>
-        }
-        @*
-        <form id="editLabelForm" style="display: none; margin-bottom: 8px;">
-          <span id="error-editLabelName" class="error"></span>
-          <input type="text" name="editLabelName" id="editLabelName" value="" style="width: 180px; margin-left: 8px; margin-bottom: 0px;"/>
-          <span id="error-editColor" class="error"></span>
-          <div class="input-append color bscp" data-color="#888888" data-color-format="hex" id="editColor" style="width: 180px; margin-bottom: 0px;">
-            <input type="text" class="span3" name="editColor" value="" readonly style="width: 168px; margin-left: 8px;"/>
-            <span class="add-on"><i style="background-color: #888888;"></i></span>
-          </div>
-          <input type="hidden" name="editLabelId"/>
-          <input type="submit" class="btn label-submit" value="Save" style="margin-left: 8px; margin-bottom: 0px;"/>
-        </form>
-        *@
-      </ul>
+      <div>
+        <div id="label-list">
+          <ul class="label-list nav nav-pills nav-stacked">
+            @labels.map { label =>
+              <li>
+                <a href="#">
+                  <span class="count-right">0</span>
+                  <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
+                  @label.labelName
+                </a>
+              </li>
+             }
+          </ul>
+        </div>
+      </div>
       <hr/>
       <input type="button" class="btn btn-block" id="manageLabel" data-toggle="button" value="Manage Labels"/>
       <br/>
@@ -102,50 +82,18 @@
 }
 <script>
 $(function(){
-  $('#editColor').colorpicker();
-
   $('#manageLabel').click(function(){
     if($(this).data('toggle-state')){
       location.href = '@path/@repository.owner/@repository.name/issues';
     } else {
       $(this).data('toggle-state', 'on');
-      $('#label-list').hide();
-      $('#label-edit').show();
+      $.get('@path/@repository.owner/@repository.name/issues/label/edit', function(data){
+        var parent = $('#label-list').parent();
+        $('#label-list').remove();
+        parent.append(data);
+      });
     }
   });
-
-  $('a.label-edit-link').click(function(e){
-    e.stopPropagation();
-    if($('input[name=editLabelId]').val() != $(this).attr('labelId')){
-      showEditLabelForm(this);
-    } else {
-      hideEditLabelForm();
-    }
-  });
-
-  $('body').click(function(){
-    hideEditLabelForm();
-  });
-
-  function showEditLabelForm(element){
-    $('#editLabelForm').remove();
-
-    $.ajax({
-      method: 'GET',
-      url: '@path/@repository.owner/@repository.name/issues/label/' + $(element).attr('labelId') + '/edit',
-      dataType: 'html',
-      success: function(data){
-        $(element).parent().append(data);
-        $('ul#label-edit li').css('border', '1px solid white');
-        $(element).parent().css('border', '1px solid #eee');
-      }
-    });
-  }
-
-  function hideEditLabelForm(){
-    $('#editLabelForm').remove();
-    $('ul#label-edit li').css('border', '1px solid white');
-  }
 });
 </script>
 <style type="text/css">
@@ -156,7 +104,7 @@ ul.label-list {
   font-size: 90%;
 }
 
-ul.label-list li a {
+ul.label-list a {
   padding-left: 6px;
   padding-top: 4px;
   padding-bottom: 4px;

src/main/twirl/issues/labeledit.scala.html

@@ -1,8 +1,8 @@
 @(label: Option[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import context._
 @defining((if(label.isEmpty) ("new", 190, 4) else ("edit", 180, 8))){ case (mode, width, margin) =>
-<div id="@(mode)LabelForm">
-  <form method="POST"
+<div id="@(mode)LabelArea">
+  <form method="POST" id="edit-label-form"
         action="@path/@repository.owner/@repository.name/issues/label/@{if(mode == "new") "new" else label.get.labelId + "/edit"}"
         validate="true" @if(mode == "edit"){ style="margin-bottom: 8px;"}>
     <span id="error-@(mode)LabelName" class="error"></span>
@@ -25,12 +25,25 @@
   } else {
     $('#editColor').colorpicker();
 
-    $('#editLabelForm').click(function(e){
-      e.stopPropagation();
-    });
+    $('#edit-label-form').submit(function(e){
+      var form = $(e.target);
+      $.post(form.attr('action') + '/validate', $(form).serialize(), function(data){
+        // clear all error messages
+        $('.error').text('');
 
-    $.each($('form[validate=true]'), function(i, form){
-      $(form).submit(validate);
+        if($.isEmptyObject(data)){
+          $.post(form.attr('action'), $(form).serialize(), function(data){
+            var parent = $('#label-edit').parent();
+            $('#label-edit').remove();
+            parent.append(data);
+          });
+        } else {
+          $.each(data, function(key, value){
+            $('#error-' + key).text(value);
+          });
+        }
+      }, 'json');
+      return false;
     });
   }
   </script>

src/main/twirl/issues/labellist.scala.html

@@ -0,0 +1,39 @@
+@(labels: List[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+<div id="label-edit">
+  <ul class="label-list nav nav-pills nav-stacked">
+    @labels.map { label =>
+    <li style="border: 1px solid white;">
+      <a href="javascript:void(0);" class="label-edit-link" labelId="@label.labelId" labelName="@label.labelName" color="#@label.color">
+        <span class="count-right"><i class="icon-remove-circle" labelId="@label.labelId"></i></span>
+        <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
+        @label.labelName
+      </a>
+    </li>
+    }
+  </ul>
+  <script>
+  $('i.icon-remove-circle').click(function(e){
+    e.stopPropagation();
+    // TODO Delete label
+    alert('Delete this label. Are you Sure?');
+  });
+
+  $('a.label-edit-link').click(function(e){
+    if($('input[name=editLabelId]').val() != $(this).attr('labelId')){
+      $('#editLabelArea').remove();
+      var element = this;
+      $.get('@path/@repository.owner/@repository.name/issues/label/' + $(this).attr('labelId') + '/edit',
+        function(data){
+          $(element).parent().append(data);
+          $('div#label-edit li').css('border', '1px solid white');
+          $(element).parent().css('border', '1px solid #eee');
+        }
+      );
+    } else {
+      $('#editLabelArea').remove();
+      $('div#label-edit li').css('border', '1px solid white');
+    }
+  });
+  </script>
+</div>