Fix #314 and also add it to the developer help for #480

hawtio · Aug 15, 2013 · 22fd068 · 22fd068
1 parent 4bab8e3
commit 22fd068
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 69 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -67,20 +67,6 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
         }).
         constant('layoutTree', 'app/core/html/layoutTree.html').
         constant('layoutFull', 'app/core/html/layoutFull.html').
-        constant('editablePropertyTemplate',
-                '<div ng-mouseenter="showEdit()" ng-mouseleave="hideEdit()" class="ep" ng-hide="editing">' +
-                        '{{text}}&nbsp;<i class="ep-edit icon-pencil" title="Edit this item" ng-click="doEdit()"></i>' +
-                        '</div>' +
-                        '<div class="ep" ng-show="editing">' +
-                        '<form class="form-inline no-bottom-margin" ng-submit="saveEdit()">' +
-                        '<fieldset>' +
-                        '<input type="text" value="{{text}}">' +
-                        '<i class="green clickable icon-ok icon1point5x" title="Save changes" ng-click="saveEdit()"></i>' +
-                        '<i class="red clickable icon-remove icon1point5x" title="Discard changes" ng-click="stopEdit()"></i>' +
-                        '</fieldset>' +
-                        '</form>' +
-                        '</div>').
-
         service('localStorage',function () {
           // TODO Create correct implementation of windowLocalStorage
           var storage:WindowLocalStorage = window.localStorage || <any> (function () {
@@ -345,60 +331,6 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
             );
           };
         }]).
-        directive('editableProperty', ['$compile', 'editablePropertyTemplate', function ($compile, editablePropertyTemplate) {
-          var editableProperty = {
-            restrict: 'E',
-            scope: true,
-            template: editablePropertyTemplate,
-            require: 'ngModel',
-            link: function (scope, element, attrs, ngModel) {
-
-              scope.editing = false;
-              $(element.find(".icon-pencil")[0]).hide();
-
-              ngModel.$render = function () {
-                var propertyName = attrs['property'];
-                if (propertyName && ngModel.$viewValue) {
-                  scope.text = ngModel.$viewValue[propertyName];
-                } else {
-                  scope.text = ngModel.$viewValue;
-                }
-              };
-
-              scope.showEdit = function () {
-                $(element.find(".icon-pencil")[0]).show();
-              };
-
-              scope.hideEdit = function () {
-                $(element.find(".icon-pencil")[0]).hide();
-              };
-
-              scope.doEdit = function () {
-                scope.editing = true;
-              };
-
-              scope.stopEdit = function () {
-                scope.editing = false;
-              };
-
-              scope.saveEdit = function () {
-                var value = $(element.find(":input[type=text]")[0]).val();
-                var obj = ngModel.$viewValue;
-                if (angular.isDefined(attrs['property'])) {
-                  obj[attrs['property']] = value;
-                } else {
-                  obj = value;
-                }
-                ngModel.$setViewValue(obj);
-                ngModel.$render();
-                scope.editing = false;
-                scope.$parent.$eval(attrs['onSave']);
-              }
-
-            }
-          };
-          return editableProperty;
-        }]).
         directive('gridStyle', function($window) {
           return new Core.GridStyle($window);
         });

diff --git a/hawtio-web/src/main/webapp/app/dashboard/js/dashboardPlugin.ts b/hawtio-web/src/main/webapp/app/dashboard/js/dashboardPlugin.ts
@@ -1,6 +1,6 @@
 module Dashboard {
   var pluginName = 'dashboard';
-  angular.module(pluginName, ['bootstrap', 'ngResource', 'hawtioCore']).
+  angular.module(pluginName, ['bootstrap', 'ngResource', 'hawtioCore', 'hawtio-ui']).
           config(($routeProvider) => {
 
             $routeProvider.

diff --git a/hawtio-web/src/main/webapp/app/ui/html/editableProperty.html b/hawtio-web/src/main/webapp/app/ui/html/editableProperty.html
@@ -0,0 +1,12 @@
+<div ng-mouseenter="showEdit()" ng-mouseleave="hideEdit()" class="ep" ng-hide="editing">
+  {{text}}&nbsp;<i class="ep-edit icon-pencil" title="Edit this item" ng-click="doEdit()"></i>
+</div>
+<div class="ep" ng-show="editing">
+  <form class="form-inline no-bottom-margin" ng-submit="saveEdit()">
+    <fieldset>
+      <input type="text" value="{{text}}">
+      <i class="green clickable icon-ok icon1point5x" title="Save changes" ng-click="saveEdit()"></i>
+      <i class="red clickable icon-remove icon1point5x" title="Discard changes" ng-click="stopEdit()"></i>
+    </fieldset>
+  </form>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/ui/html/test.html b/hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -12,6 +12,16 @@ <h3>Expandable</h3>
       <hr>
     </div>
 
+    <div class="row-fluid">
+      <h3>Editable Property</h3>
+      <p>Use to display a value that the user can edit at will</p>
+      <div hawtio-editor="editablePropertyEx1" mode="fileUploadExMode"></div>
+      <div class="directive-example">
+        <div compile="editablePropertyEx1"></div>
+      </div>
+      <hr>
+    </div>
+
     <div class="row-fluid">
       <h3>File upload</h3>
       <p>Use to upload files to the hawtio webapp backend.  Files are stored in a temporary directory and managed via the UploadManager JMX MBean</p>

diff --git a/hawtio-web/src/main/webapp/app/ui/js/editablePropertyDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/editablePropertyDirective.ts
@@ -0,0 +1,59 @@
+module UI {
+
+  export class EditableProperty {
+
+    public restrict = 'E';
+    public scope = true;
+    public templateUrl = UI.templatePath + 'editableProperty.html';
+    public require = 'ngModel';
+
+    public link = function (scope, element, attrs, ngModel) {
+
+      scope.editing = false;
+      $(element.find(".icon-pencil")[0]).hide();
+
+      ngModel.$render = function () {
+        var propertyName = attrs['property'];
+        if (propertyName && ngModel.$viewValue) {
+          scope.text = ngModel.$viewValue[propertyName];
+        } else {
+          scope.text = ngModel.$viewValue;
+        }
+      };
+
+      scope.showEdit = function () {
+        $(element.find(".icon-pencil")[0]).show();
+      };
+
+      scope.hideEdit = function () {
+        $(element.find(".icon-pencil")[0]).hide();
+      };
+
+      scope.doEdit = function () {
+        scope.editing = true;
+      };
+
+      scope.stopEdit = function () {
+        scope.editing = false;
+      };
+
+      scope.saveEdit = function () {
+        var value = $(element.find(":input[type=text]")[0]).val();
+        var obj = ngModel.$viewValue;
+        if (angular.isDefined(attrs['property'])) {
+          obj[attrs['property']] = value;
+        } else {
+          obj = value;
+        }
+        ngModel.$setViewValue(obj);
+        ngModel.$render();
+        scope.editing = false;
+        scope.$parent.$eval(attrs['onSave']);
+      };
+
+    };
+
+  }
+
+
+}
diff --git a/hawtio-web/src/main/webapp/app/ui/js/testController.ts b/hawtio-web/src/main/webapp/app/ui/js/testController.ts
@@ -12,6 +12,13 @@ module UI {
         '   </div>\n' +
         '</div>'
 
+
+    $scope.editablePropertyEx1 = '<editable-property ng-model="editablePropertyModelEx1" property="property"></editable-property>';
+
+    $scope.editablePropertyModelEx1 = {
+      property: "This is editable (hover to edit)"
+    };
+
     $scope.showDeleteOne = new Core.Dialog();
     $scope.showDeleteTwo = new Core.Dialog();
 

diff --git a/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts b/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
@@ -26,6 +26,8 @@ module UI {
         return new UI.FileUpload();
       }).directive('expandable', () => {
         return new UI.Expandable();
+      }).directive('editableProperty', () => {
+        return new UI.EditableProperty();
       }).run(function (helpRegistry) {
         helpRegistry.addDevDoc("ui", 'app/ui/doc/developer.md');
       });