UI: CURD labels

- fix update lable break connection with repository

conf/locale/locale_en-US.ini

@@ -143,6 +143,11 @@ invalid_code = Sorry, your confirmation code has expired or not valid.
 reset_password_helper = Click here to reset your password
 password_too_short = Password length cannot be less then 6.
 
+[modal]
+yes = Yes
+no = No
+modify = Modify
+
 [form]
 UserName = Username
 RepoName = Repository name
@@ -372,14 +377,18 @@ issues.filter_type.assigned_to_you = Assigned to you
 issues.filter_type.created_by_you = Created by you
 issues.filter_type.mentioning_you = Mentioning you
 issues.opened_by = opened %s by <a href="/%[2]s">%[2]s</a>
+issues.previous = Previous Page
+issues.next = Next Page
 issues.label_title = Label name
 issues.label_color = Label color
 issues.label_count = %d labels
 issues.label_open_issues = %d open issues
 issues.label_edit = Edit
 issues.label_delete = Delete
-issues.previous = Previous Page
+issues.label_modify = Label Modification
-issues.next = Next Page
+issues.label_deletion = Label Deletion
+issues.label_deletion_desc = Delete label will remove it's information in all related issues. Do you want to continue?
+issues.label_deletion_success = Label has been deleted successfully!
 
 settings = Settings
 settings.options = Options

config.codekit

@@ -86,15 +86,6 @@
 		"randomFootnoteNumbers": 0,
 		"useCompatibilityMode": 0
 		},
-	"\/public\/css\/bootstrap-colorpicker.min.css": {
-		"fileType": 16,
-		"ignore": 0,
-		"ignoreWasSetByUser": 0,
-		"inputAbbreviatedPath": "\/public\/css\/bootstrap-colorpicker.min.css",
-		"outputAbbreviatedPath": "No Output Path",
-		"outputPathIsOutsideProject": 0,
-		"outputPathIsSetByUser": 0
-		},
 	"\/public\/css\/bootstrap.min.css": {
 		"fileType": 16,
 		"ignore": 0,

models/issue.go

@@ -242,10 +242,9 @@ const (
 )
 
 // GetIssuesByLabel returns a list of issues by given label and repository.
-func GetIssuesByLabel(repoId int64, label string) ([]*Issue, error) {
+func GetIssuesByLabel(repoID, labelID int64) ([]*Issue, error) {
 	issues := make([]*Issue, 0, 10)
-	err := x.Where("repo_id=?", repoId).And("label_ids like '%$" + label + "|%'").Find(&issues)
+	return issues, x.Where("repo_id=?", repoID).And("label_ids like '%$" + com.ToStr(labelID) + "|%'").Find(&issues)
-	return issues, err
 }
 
 // GetIssueCountByPoster returns number of issues of repository by poster.
@@ -577,9 +576,8 @@ func UpdateLabel(l *Label) error {
 }
 
 // DeleteLabel delete a label of given repository.
-func DeleteLabel(repoId int64, strId string) error {
+func DeleteLabel(repoID, labelID int64) error {
-	id, _ := com.StrTo(strId).Int64()
+	l, err := GetLabelById(labelID)
-	l, err := GetLabelById(id)
 	if err != nil {
 		if err == ErrLabelNotExist {
 			return nil
@@ -587,27 +585,25 @@ func DeleteLabel(repoId int64, strId string) error {
 		return err
 	}
 
-	issues, err := GetIssuesByLabel(repoId, strId)
+	issues, err := GetIssuesByLabel(repoID, labelID)
 	if err != nil {
 		return err
 	}
 
 	sess := x.NewSession()
-	defer sess.Close()
+	defer sessionRelease(sess)
 	if err = sess.Begin(); err != nil {
 		return err
 	}
 
 	for _, issue := range issues {
-		issue.LabelIds = strings.Replace(issue.LabelIds, "$"+strId+"|", "", -1)
+		issue.LabelIds = strings.Replace(issue.LabelIds, "$"+com.ToStr(labelID)+"|", "", -1)
 		if _, err = sess.Id(issue.ID).AllCols().Update(issue); err != nil {
-			sess.Rollback()
 			return err
 		}
 	}
 
 	if _, err = sess.Delete(l); err != nil {
-		sess.Rollback()
 		return err
 	}
 	return sess.Commit()

modules/auth/repo_form.go

@@ -134,6 +134,7 @@ func (f *CreateMilestoneForm) Validate(ctx *macaron.Context, errs binding.Errors
 //         \/    \/    \/     \/
 
 type CreateLabelForm struct {
+	ID    int64
 	Title string `binding:"Required;MaxSize(50)" locale:"repo.issues.label_name"`
 	Color string `binding:"Required;Size(7)" locale:"repo.issues.label_color"`
 }

public/css/bootstrap-colorpicker.min.css

@@ -1,9 +0,0 @@
-/*!
- * Bootstrap Colorpicker
- * http://mjolnic.github.io/bootstrap-colorpicker/
- *
- * Originally written by (c) 2012 Stefan Petre
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0.txt
- *
- */.colorpicker-saturation{float:left;width:100px;height:100px;cursor:crosshair;background-image:url("../img/bootstrap-colorpicker/saturation.png")}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-hue,.colorpicker-alpha{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-hue i,.colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue.png")}.colorpicker-alpha{display:none;background-image:url("../img/bootstrap-colorpicker/alpha.png")}.colorpicker{top:0;left:0;z-index:2500;min-width:130px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1}.colorpicker:before,.colorpicker:after{display:table;line-height:0;content:""}.colorpicker:after{clear:both}.colorpicker:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.colorpicker:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url("../img/bootstrap-colorpicker/alpha.png");background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-element .input-group-addon i,.colorpicker-element .add-on i{display:inline-block;width:16px;height:16px;vertical-align:text-top;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;z-index:auto;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue-horizontal.png")}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url("../img/bootstrap-colorpicker/alpha-horizontal.png")}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}

public/js/gogs.js

@@ -1,3 +1,5 @@
+var csrf;
+
 function initInstall() {
     if ($('.install').length == 0) {
         return;
@@ -37,7 +39,8 @@ function initRepository(){
         return;
     }
 
-    if ($('.labels').length == 0) {
+    // Labels
+    if ($('.repository.labels').length == 0) {
         return;
     }
     $('.color-picker').each(function () {
@@ -48,9 +51,38 @@ function initRepository(){
         $('.color-picker').val(color_hex);
         $('.minicolors-swatch-color').css("background-color", color_hex);
     });
+    $('.delete-label-button').click(function () {
+        var $this = $(this);
+        $('.delete-label.modal').modal({
+            closable: false,
+            onApprove: function () {
+                $.post($this.data('url'), {
+                    "_csrf": csrf,
+                    "id": $this.data("id")
+                }).done(function (data) {
+                    window.location.href = data.redirect;
+                });
+            }
+        }).modal('show');
+        return false;
+    });
+    $('.edit-label-button').click(function () {
+        $('#label-modal-id').val($(this).data('id'));
+        $('#label-modal-title').val($(this).data('title'));
+        $('#label-modal-color').val($(this).data('color'))
+        $('.minicolors-swatch-color').css("background-color", $(this).data('color'));
+        $('.edit-label.modal').modal({
+            onApprove: function () {
+                $('.edit-label.form').submit();
+            }
+        }).modal('show');
+        return false;
+    });
 };
 
 $(document).ready(function () {
+    csrf = $('meta[name=_csrf]').attr("content");
+
     // Semantic UI modules.
     $('.dropdown').dropdown();
     $('.jump.dropdown').dropdown({

public/less/_repository.less

@@ -138,3 +138,31 @@
 		}
 	}
 }
+
+.edit-label.modal {
+	.color-picker {
+		margin-top: -8px!important;
+		height: 35px;
+		width: auto!important;
+		padding-left: 30px!important;
+	}
+	.minicolors-swatch.minicolors-sprite {
+		top: 1px;
+		left: 10px;
+		width: 15px;
+		height: 15px;
+	}
+	.precolors {
+		margin-bottom: -11px!important;
+		padding-left: 0!important;
+		padding-right: 0!important;
+		margin-right: 10px!important;
+		width: 120px!important;
+		.color {
+			float: left;
+			margin: 0!important;
+			width: 15px;
+			height: 15px;
+		}
+	}
+}

routers/repo/issue.go

@@ -936,44 +936,40 @@ func NewLabel(ctx *middleware.Context, form auth.CreateLabelForm) {
 }
 
 func UpdateLabel(ctx *middleware.Context, form auth.CreateLabelForm) {
-	id := com.StrTo(ctx.Query("id")).MustInt64()
+	l, err := models.GetLabelById(form.ID)
-	if id == 0 {
+	if err != nil {
+		switch err {
+		case models.ErrLabelNotExist:
 			ctx.Error(404)
+		default:
+			ctx.Handle(500, "UpdateLabel", err)
+		}
 		return
 	}
 
-	l := &models.Label{
+	l.Name = form.Title
-		ID:    id,
+	l.Color = form.Color
-		Name:  form.Title,
-		Color: form.Color,
-	}
 	if err := models.UpdateLabel(l); err != nil {
-		ctx.Handle(500, "issue.UpdateLabel(UpdateLabel)", err)
+		ctx.Handle(500, "UpdateLabel", err)
 		return
 	}
-	ctx.Redirect(ctx.Repo.RepoLink + "/issues")
+	ctx.Redirect(ctx.Repo.RepoLink + "/labels")
 }
 
 func DeleteLabel(ctx *middleware.Context) {
-	removes := ctx.Query("remove")
+	id := ctx.QueryInt64("id")
-	if len(strings.TrimSpace(removes)) == 0 {
+	if id > 0 {
-		ctx.JSON(200, map[string]interface{}{
+		if err := models.DeleteLabel(ctx.Repo.Repository.Id, id); err != nil {
-			"ok": true,
+			ctx.Flash.Error("DeleteLabel: " + err.Error())
-		})
+		} else {
-		return
+			ctx.Flash.Success(ctx.Tr("repo.issues.label_deletion_success"))
-	}
-
-	strIds := strings.Split(removes, ",")
-	for _, strId := range strIds {
-		if err := models.DeleteLabel(ctx.Repo.Repository.Id, strId); err != nil {
-			ctx.Handle(500, "issue.DeleteLabel(DeleteLabel)", err)
-			return
 		}
 	}
 
 	ctx.JSON(200, map[string]interface{}{
-		"ok": true,
+		"redirect": ctx.Repo.RepoLink + "/labels",
 	})
+	return
 }
 
 func Milestones(ctx *middleware.Context) {

templates/base/alert.tmpl

@@ -3,3 +3,8 @@
   <p>{{.Flash.ErrorMsg}}</p>
 </div>
 {{end}}
+{{if .Flash.SuccessMsg}}
+<div class="ui positive message">
+  <p>{{.Flash.SuccessMsg}}</p>
+</div>
+{{end}}

templates/repo/issue/label_precolors.tmpl

@@ -0,0 +1,16 @@
+<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
+<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
+<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
+<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
+<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
+<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
+<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
+<a class="color" style="background-color:#53e917" data-color-hex="#53e917"></a>
+<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
+<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
+<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
+<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
+<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
+<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
+<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
+<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>

templates/repo/issue/labels.tmpl

@@ -19,22 +19,7 @@
 			    	</div>
 					</div>
 					<div class="item precolors">
-						<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
+						{{template "repo/issue/label_precolors"}}
-						<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
-						<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
-						<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
-						<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
-						<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
-						<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
-						<a class="color" style="background-color:#53e917" data-color-hex="#53e917"></a>
-						<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
-						<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
-						<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
-						<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
-						<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
-						<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
-						<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
-						<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
 					</div>
 					<button class="ui green button">{{.i18n.Tr "repo.issues.new_label"}}</button>
 				</div>
@@ -52,8 +37,8 @@
 			<li class="item">
 				<div class="ui label" style="background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
 				{{if $.IsRepositoryAdmin}}
-				<a class="ui right" href="#"><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+				<a class="ui right delete-label-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}"><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
-				<a class="ui right" href="#"><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
+				<a class="ui right edit-label-button" href="#" data-id={{.ID}} data-title={{.Name}} data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
 				{{end}}
 				<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}"><i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
 			</li>
@@ -61,4 +46,64 @@
 		</div>
 	</div>
 </div>
+
+{{if .IsRepositoryAdmin}}
+<div class="ui basic delete-label modal">
+  <div class="header">
+    {{.i18n.Tr "repo.issues.label_deletion"}}
+  </div>
+  <div class="content">
+    <div class="image">
+      <i class="trash icon"></i>
+    </div>
+    <div class="description">
+      <p>{{.i18n.Tr "repo.issues.label_deletion_desc"}}</p>
+    </div>
+  </div>
+  <div class="actions">
+    <div class="two fluid ui inverted buttons">
+      <div class="ui red basic inverted button">
+        <i class="remove icon"></i>
+        {{.i18n.Tr "modal.no"}}
+      </div>
+      <div class="ui green basic inverted positive button">
+        <i class="checkmark icon"></i>
+        {{.i18n.Tr "modal.yes"}}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ui small edit-label modal">
+  <div class="header">
+    {{.i18n.Tr "repo.issues.label_modify"}}
+  </div>
+  <div class="content">
+		<form class="ui edit-label form" action="{{$.RepoLink}}/labels/edit" method="post">
+			{{.CsrfTokenHtml}}
+			<input id="label-modal-id" name="id" type="hidden">
+			<div class="inline fields">
+				<div class="field">
+					<input id="label-modal-title" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" required>
+				</div>
+				<div class="field">
+		      <input id="label-modal-color" class="color-picker" name="color" value="#70c24a" required>
+				</div>
+				<div class="field precolors">
+					{{template "repo/issue/label_precolors"}}
+				</div>
+			</div>
+		</form>
+  </div>
+  <div class="actions">
+    <div class="ui negative button">
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui positive right labeled icon button">
+      {{.i18n.Tr "modal.modify"}}
+      <i class="checkmark icon"></i>
+    </div>
+  </div>
+</div>
+{{end}}
 {{template "base/footer" .}}