azkaban-uncached

Support editing project description.

12/19/2013 9:17:51 AM

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 376d30c..a8d86f9 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -91,7 +91,7 @@
 					</div>
 					<div class="col-lg-6">
 						<div class="pull-right az-page-header-form">
-							<button type="button" class="btn btn-success" id="executebtn">Schedule / Execute Flow</button>
+							<button type="button" class="btn btn-sm btn-success" id="executebtn">Schedule / Execute Flow</button>
 						</div>
 						<div class="clearfix"></div>
 					</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
index 5fda594..4eddc0f 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
@@ -17,9 +17,17 @@
 		<div class="az-page-header">
 			<div class="container">
         <div class="row">
-          <div class="col-lg-6">
+          <div class="col-lg-6" id="project-page-header">
             <h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
-            <p>$project.description</p>
+            <p class="editable" id="project-description">$project.description</p>
+            <div id="project-description-form" class="editable-form">
+              <div class="input-group">
+                <input type="text" class="form-control input-sm" id="project-description-edit" placeholder="Project description">
+                <span class="input-group-btn">
+                  <button class="btn btn-primary btn-sm" type="button" id="project-description-btn">Save</button>
+                </span>
+              </div>
+            </div>
           </div>
           <div class="col-lg-6">
             <div class="pull-right az-page-header-form" id="project-options">
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index 2cf664b..65800d2 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -263,22 +263,35 @@ td.flow-summary-value {
 }
 
 .az-page-header {
-  padding: 5px 0 9px;
+  padding: 5px 0 10px;
   margin: 0 0 30px;
   border-bottom: 1px solid #dddddd;
   background-color: #f4f4f4;
 
   h1 {
     font-size: 32px;
+    margin-bottom: 5px;
+  }
+  
+  .az-page-header-form {
+    margin-top: 20px;
   }
-}
 
-.az-page-header-form {
-  margin-top: 20px;
-}
+  .az-exflow-stats {
+    margin-top: 10px;
+  }
 
-.az-exflow-stats {
-  margin-top: 10px;
+  .editable {
+    margin: 0px;
+    cursor: pointer;
+    &:hover {
+      background-color: #fcfcfc;
+    }
+  }
+
+  .editable-form {
+    display: none;
+  }
 }
 
 .contextMenu {
diff --git a/src/web/js/azkaban.projectmodals.view.js b/src/web/js/azkaban.projectmodals.view.js
index 0362b8a..499659b 100644
--- a/src/web/js/azkaban.projectmodals.view.js
+++ b/src/web/js/azkaban.projectmodals.view.js
@@ -77,63 +77,64 @@ azkaban.DeleteProjectView = Backbone.View.extend({
 	}
 });
 
-var projectSummary;
-azkaban.ProjectSummaryView = Backbone.View.extend({
+var projectDescription;
+azkaban.ProjectDescriptionView = Backbone.View.extend({
 	events: {
-		"click #edit": "handleDescriptionEdit"
+		"click #project-description": "handleDescriptionEdit",
+    "click #project-description-btn": "handleDescriptionSave"
 	},
 
 	initialize: function(settings) {
+    console.log("project description initialize");
 	},
 	
 	handleDescriptionEdit: function(evt) {
 		console.log("Edit description");
-		var editText = $("#edit").text();
-		var descriptionTD = $('#pdescription');
-		
-		if (editText != "Edit Description") {
-			var requestURL = contextURL + "/manager";
-			var newText = $("#descEdit").val();
-
-			$.get(
-				requestURL,
-				{
-					"project": projectName, 
-					"ajax":"changeDescription", 
-					"description":newText
-				},
-				function(data) {
-					if (data.error) {
-						alert(data.error);
-					}
-				},
-				"json"
-			);
-				
-			$(descriptionTD).remove("#descEdit");
-			$(descriptionTD).text(newText);
-			$("#edit").text("Edit Description");
-		}
-		else {
-			var text = $(descriptionTD).text();
-			var edit = document.createElement("textarea");
-			
-			$(edit).addClass("editTextArea");
-			$(edit).attr("id", "descEdit");
-			$(edit).val(text);
-			$(descriptionTD).text("");
-			$(descriptionTD).append(edit);
-			
-			$("#edit").text("Commit");
-		}
+    var description = $('#project-description').text();
+    $('#project-description-edit').attr("value", description);
+    $('#project-description').hide();
+    $('#project-description-form').show();
 	},
+
+  handleDescriptionSave: function(evt) {
+    var newText = $('#project-description-edit').val();
+    if ($('#project-description-edit').hasClass('has-error')) {
+      $('#project-description-edit').removeClass('has-error');
+    }
+		var requestURL = contextURL + "/manager";
+    var requestData = {
+      "project": projectName, 
+      "ajax":"changeDescription", 
+      "description": newText
+    };
+    var successHandler = function(data) {
+      if (data.error) {
+        $('#project-description-edit').addClass('has-error');
+        alert(data.error);
+        return;
+      }
+      $('#project-description').text(newText);
+      $('#project-description-form').hide();
+      $('#project-description').show();
+    };
+    $.get(requestURL, requestData, successHandler, "json");
+  },
+
 	render: function() {
 	}
 });
 
 $(function() {
-	projectView = new azkaban.ProjectView({el:$('#project-options')});
-	uploadView = new azkaban.UploadProjectView({el:$('#upload-project-modal')});
-	deleteProjectView = new azkaban.DeleteProjectView({el: $('#delete-project-modal')});
-	projectSummary = new azkaban.ProjectSummaryView({el:$('#project-summary')});
+	projectView = new azkaban.ProjectView({
+    el: $('#project-options')
+  });
+	uploadView = new azkaban.UploadProjectView({
+    el: $('#upload-project-modal')
+  });
+	deleteProjectView = new azkaban.DeleteProjectView({
+    el: $('#delete-project-modal')
+  });
+	projectDescription = new azkaban.ProjectDescriptionView({
+    el: $('#project-page-header')
+  });
 });