From 7021718ab206883c2ac507a7c47d937834b13dce Mon Sep 17 00:00:00 2001
From: Timur Sufiev <tsufiev@mirantis.com>
Date: Wed, 22 Jul 2015 21:03:15 +0300
Subject: [PATCH] Rewrite <labeled> directive to render editable labels

Common part of <labeled>, <panel> and <collapsible-group> is moved to
a separate <editable-title> directive.

Implements blueprint: composable-templates

Change-Id: If5f8da39aad0f4f3195e9af18e384de9f3ed2d75
---
 .../mistral/templates/mistral/create.html     |  2 +-
 merlin/static/merlin/js/merlin.directives.js  | 29 ++++++++++++-------
 .../merlin/templates/collapsible-group.html   |  4 +--
 .../merlin/templates/collapsible-panel.html   |  4 +--
 .../merlin/templates/fields/dictionary.html   | 11 ++-----
 .../merlin/templates/fields/frozendict.html   |  7 ++---
 merlin/static/merlin/templates/labeled.html   |  4 ++-
 merlin/static/merlin/templates/title.html     |  3 ++
 8 files changed, 33 insertions(+), 31 deletions(-)
 create mode 100644 merlin/static/merlin/templates/title.html

diff --git a/extensions/mistral/templates/mistral/create.html b/extensions/mistral/templates/mistral/create.html
index 4ee0011..931f969 100644
--- a/extensions/mistral/templates/mistral/create.html
+++ b/extensions/mistral/templates/mistral/create.html
@@ -73,7 +73,7 @@
             <div ng-repeat="row in panel | extractFields | chunks:2 track by $index">
               <div ng-repeat="(label, field) in row track by field.uid()">
                 <div ng-if="field.isAtomic()" class="col-xs-6">
-                  <labeled label="{$ label $}" for="{$ field.uid() $}">
+                  <labeled label="label" for="{$ field.uid() $}">
                     <typed-field value="field" type="{$ field.getType() $}"></typed-field>
                   </labeled>
                 </div>
diff --git a/merlin/static/merlin/js/merlin.directives.js b/merlin/static/merlin/js/merlin.directives.js
index ace9c56..fa0e69d 100644
--- a/merlin/static/merlin/js/merlin.directives.js
+++ b/merlin/static/merlin/js/merlin.directives.js
@@ -41,6 +41,7 @@
      * */
     .directive('typedField', typedField)
 
+    .directive('editableTitle', editableTitle)
     .directive('labeled', labeled);
 
   function labeled() {
@@ -49,12 +50,27 @@
       templateUrl: '/static/merlin/templates/labeled.html',
       transclude: true,
       scope: {
-        label: '@',
+        label: '=',
         for: '@'
       }
     };
   }
 
+  function editableTitle() {
+    return {
+      restrict: 'E',
+      templateUrl: '/static/merlin/templates/title.html',
+      scope: {
+        ngModel: '='
+      },
+      link: function(scope) {
+        if (angular.isFunction(scope.ngModel)) {
+          scope.editable = true;
+        }
+      }
+    };
+  }
+
   function editable() {
     return {
       restrict: 'E',
@@ -136,12 +152,7 @@
         panel: '=content'
       },
       link: function(scope) {
-        if (angular.isDefined(scope.panel)) {
-          scope.isCollapsed = false;
-          if (angular.isFunction(scope.panel.title)) {
-            scope.editable = true;
-          }
-        }
+        scope.isCollapsed = false;
       }
     };
   }
@@ -152,16 +163,12 @@
       templateUrl: '/static/merlin/templates/collapsible-group.html',
       transclude: true,
       scope: {
-        group: '=content',
         title: '=',
         onAdd: '&',
         onRemove: '&'
       },
       link: function(scope, element, attrs) {
         scope.isCollapsed = false;
-        if (angular.isFunction(scope.title)) {
-          scope.editable = true;
-        }
         if ( attrs.onAdd && attrs.additive !== 'false' ) {
           scope.additive = true;
         }
diff --git a/merlin/static/merlin/templates/collapsible-group.html b/merlin/static/merlin/templates/collapsible-group.html
index b549d9b..a29f3c4 100644
--- a/merlin/static/merlin/templates/collapsible-group.html
+++ b/merlin/static/merlin/templates/collapsible-group.html
@@ -3,9 +3,7 @@
     <div class="col-xs-10">
       <h5><a ng-click="isCollapsed = !isCollapsed" class="collapse-entries" href="">
         <i class="fa" ng-class="isCollapsed ? 'fa-plus-square-o' : 'fa-minus-square-o'"></i></a>
-        <editable ng-if="editable" ng-model="title"
-                  ng-model-options="{getterSetter: true}"></editable>
-        <span ng-if="!editable">{$ ::title $}</span>
+        <editable-title ng-model="title"></editable-title>
       </h5>
     </div>
     <div ng-if="additive" class="add-btn col-xs add-entry">
diff --git a/merlin/static/merlin/templates/collapsible-panel.html b/merlin/static/merlin/templates/collapsible-panel.html
index e321d6f..b38798e 100644
--- a/merlin/static/merlin/templates/collapsible-panel.html
+++ b/merlin/static/merlin/templates/collapsible-panel.html
@@ -3,9 +3,7 @@
     <h4 class="panel-title">
       <a ng-click="isCollapsed = !isCollapsed" href="">
         <i class="fa fa-lg" ng-class="isCollapsed ? 'fa-caret-right' : 'fa-caret-down'"></i></a>
-      <editable ng-if="editable" ng-model="panel.title"
-                ng-model-options="{getterSetter: true}"></editable>
-      <span ng-if="!editable">{$ ::panel.title $}</span>
+      <editable-title ng-model="panel.title"></editable-title>
       <a href="" ng-show="panel.removable" ng-click="panel.remove()">
         <i class="fa fa-times-circle pull-right"></i></a>
     </h4>
diff --git a/merlin/static/merlin/templates/fields/dictionary.html b/merlin/static/merlin/templates/fields/dictionary.html
index 33017ac..858d4dc 100644
--- a/merlin/static/merlin/templates/fields/dictionary.html
+++ b/merlin/static/merlin/templates/fields/dictionary.html
@@ -1,10 +1,7 @@
 <div class="row bottom-xs dictionary">
   <div ng-class="value.inline ? 'col-xs-10' : 'col-xs-12'">
     <div ng-repeat="(key, field) in value | extractFields track by field.uid()">
-      <div ng-if="field.isAtomic()" class="form-group">
-        <label for="{$ field.uid() $}">
-          <editable ng-model="field.keyValue" ng-model-options="{getterSetter: true}"></editable>
-        </label>
+      <labeled ng-if="field.isAtomic()" label="field.keyValue" for="{$ field.uid() $}">
         <div class="input-group">
           <typed-field id="{$ field.uid() $}" value="field" type="{$ field.getType() $}"></typed-field>
         <span class="input-group-btn">
@@ -13,11 +10,9 @@
           </button>
         </span>
         </div>
-      </div>
+      </labeled>
       <div ng-if="!field.isAtomic()">
-        <collapsible-group ng-if="!field.inline" content="field"
-                           class="col-xs-12"
-                           title="field.keyValue"
+        <collapsible-group ng-if="!field.inline" class="col-xs-12" title="field.keyValue"
                            on-remove="value.removeItem(field.keyValue())"
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>
diff --git a/merlin/static/merlin/templates/fields/frozendict.html b/merlin/static/merlin/templates/fields/frozendict.html
index 97b4c0f..f4c5264 100644
--- a/merlin/static/merlin/templates/fields/frozendict.html
+++ b/merlin/static/merlin/templates/fields/frozendict.html
@@ -2,20 +2,19 @@
   <div ng-repeat="row in value | extractFields | chunks:2 track by $index">
     <div ng-repeat="(key, field) in row track by field.uid()">
       <div ng-if="field.isAtomic()" class="col-xs-6">
-        <labeled label="{$ key $}" for="{$ field.uid() $}">
+        <labeled label="key" for="{$ field.uid() $}">
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>
         </labeled>
       </div>
       <div ng-if="!field.isAtomic()">
-        <collapsible-group ng-if="!field.inline" class="col-xs-12"
-                           content="field" title="key"
+        <collapsible-group ng-if="!field.inline" class="col-xs-12" title="key"
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
           <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
             <typed-field value="field" type="{$ field.getType() $}"></typed-field>
           </div>
         </collapsible-group>
         <labeled ng-if="field.inline" class="col-xs-6"
-                 label="{$ key $}" for="{$ field.uid() $}">
+                 label="key" for="{$ field.uid() $}">
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>
         </labeled>
       </div>
diff --git a/merlin/static/merlin/templates/labeled.html b/merlin/static/merlin/templates/labeled.html
index f011b06..1920581 100644
--- a/merlin/static/merlin/templates/labeled.html
+++ b/merlin/static/merlin/templates/labeled.html
@@ -1,4 +1,6 @@
 <div class="form-group">
-  <label for="{$ for $}">{$ label $}</label>
+  <label for="{$ for $}">
+    <editable-title ng-model="label"></editable-title>
+  </label>
   <div ng-transclude></div>
 </div>
diff --git a/merlin/static/merlin/templates/title.html b/merlin/static/merlin/templates/title.html
new file mode 100644
index 0000000..b5740aa
--- /dev/null
+++ b/merlin/static/merlin/templates/title.html
@@ -0,0 +1,3 @@
+<editable ng-if="editable" ng-model="ngModel"
+          ng-model-options="{getterSetter: true}"></editable>
+<span ng-if="!editable">{$ ::ngModel $}</span>