浏览代码

HUE-3749 [editor] Let the user pick which session properties to configure

Johan Ahlen 9 年之前
父节点
当前提交
ad1400b

+ 81 - 0
desktop/core/src/desktop/templates/config_ko_components.mako

@@ -49,6 +49,87 @@ from desktop.views import _ko
     }
   </style>
 
+  <script type="text/html" id="property-selector-template">
+    <!-- ko foreach: selectedProperties -->
+    <!-- ko template: {
+      name: 'property',
+      data: {
+        type: type(),
+        label: nice_name,
+        helpText: help_text,
+        value: value,
+        visibleObservable: $parent.visibleObservable
+      }
+    } --><!-- /ko -->
+    <!-- /ko -->
+    <div data-bind="visible: availableProperties().length > 0">
+      <select data-bind="options: availableProperties, optionsText: 'nice_name', optionsCaption: 'Choose a property...', value: propertyToAdd"></select>
+      <div style="display: inline-block; vertical-align: top; margin-top: 6px; margin-left: 6px;">
+        <a class="inactive-action pointer" data-bind="click: addProperty">
+          <i class="fa fa-plus"></i>
+        </a>
+      </div>
+    </div>
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function (factory) {
+      if(typeof require === "function") {
+        require(['knockout'], factory);
+      } else {
+        factory(ko);
+      }
+    }(function (ko) {
+      (function () {
+
+        function PropertySelectorViewModel(params) {
+          var self = this;
+          var allProperties = params.properties;
+
+          self.selectedProperties = ko.observableArray();
+          self.availableProperties = ko.observableArray();
+          self.propertyToAdd = ko.observable();
+
+          var setInitialProperties = function () {
+            self.selectedProperties([]);
+            self.availableProperties([]);
+            allProperties().forEach(function (property) {
+              if (property.value().length > 0) {
+                self.selectedProperties.push(property);
+              } else {
+                self.availableProperties.push(property);
+              }
+            });
+          };
+
+          setInitialProperties();
+          self.selectedProperties = ko.observableArray();
+          self.visibleObservable = params.visibleObservable || ko.observable();
+
+          self.visibleObservable.subscribe(function (newValue) {
+            if (!newValue) {
+              setInitialProperties();
+            }
+          });
+        }
+
+        PropertySelectorViewModel.prototype.addProperty = function () {
+          var self = this;
+          if (self.propertyToAdd()) {
+            self.selectedProperties.push(self.propertyToAdd());
+            self.availableProperties.remove(self.propertyToAdd());
+            self.propertyToAdd(null);
+          }
+        };
+
+        ko.components.register('property-selector', {
+          viewModel: PropertySelectorViewModel,
+          template: { element: 'property-selector-template' }
+        });
+      }());
+    }));
+  </script>
+
   <script type="text/html" id="property">
     <div data-bind="visibleOnHover: { selector: '.hover-actions' }, css: { 'config-property' : typeof inline === 'undefined' || inline, 'control-group' : typeof inline !== 'undefined' && ! inline }">
       <label class="control-label" data-bind="style: { 'width' : typeof inline === 'undefined' || inline ? '120px' : '' }">

+ 17 - 28
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1813,35 +1813,24 @@ ${ hueIcons.symbols() }
             </div>
             <!-- /ko -->
             <div style="width:100%;">
-                <!-- ko foreach: properties -->
-                  <!-- ko template: {
-                    name: 'property',
-                    data: {
-                      type: type(),
-                      label: nice_name,
-                      helpText: help_text,
-                      value: value,
-                      visibleObservable: ko.observable()
-                    }
-                  } --><!-- /ko -->
-                <!-- /ko -->
-              </div>
-              <div style="clear:both; padding-left: 120px;">
-                <!-- ko if: availableNewProperties().length -->
-                <select data-bind="options: availableNewProperties,
-                         optionsText: 'nice_name',
-                         optionsValue: 'name',
-                         value: selectedSessionProperty,
-                         optionsCaption: '${ _ko('Choose a property...') }'"></select>
-                <a class="pointer" style="padding:5px;" data-bind="click: selectedSessionProperty() && function() {
-                    properties.push(ko.mapping.fromJS({'name': selectedSessionProperty(), 'value': ''}));
-                    selectedSessionProperty('');
-                  }" style="margin-left:10px;vertical-align: text-top;">
-                  <i class="fa fa-plus"></i>
-                </a>
-                <!-- /ko -->
-              </div>
+              <!-- ko component: { name: 'property-selector', params: { properties: properties } } --><!-- /ko -->
+            </div>
+            <div style="clear:both; padding-left: 120px;">
+              <!-- ko if: availableNewProperties().length -->
+              <select data-bind="options: availableNewProperties,
+                       optionsText: 'nice_name',
+                       optionsValue: 'name',
+                       value: selectedSessionProperty,
+                       optionsCaption: '${ _ko('Choose a property...') }'"></select>
+              <a class="pointer" style="padding:5px;" data-bind="click: selectedSessionProperty() && function() {
+                  properties.push(ko.mapping.fromJS({'name': selectedSessionProperty(), 'value': ''}));
+                  selectedSessionProperty('');
+                }" style="margin-left:10px;vertical-align: text-top;">
+                <i class="fa fa-plus"></i>
+              </a>
               <!-- /ko -->
+            </div>
+            <!-- /ko -->
             <!-- /ko -->
             <br/>
           </fieldset>