Просмотр исходного кода

HUE-7061 [search] Add the possibility of add/remove the left layout column

Enrico Berti 8 лет назад
Родитель
Сommit
e0ea9378cf

+ 36 - 0
desktop/core/src/desktop/static/desktop/js/ko.common-dashboard.js

@@ -58,6 +58,42 @@ var Column = function (size, rows, vm) {
     }
     return row;
   };
+  self.shrinkColumn = function () {
+    if (self.size() > 1) {
+      self.size(self.size() - 1);
+      vm.columns().forEach(function (col) {
+        if (col.id() !== self.id()) {
+          col.size(col.size() + 1);
+        }
+      });
+    }
+  }
+  self.expandColumn = function () {
+    if (self.size() < 12) {
+      self.size(self.size() + 1);
+      vm.columns().forEach(function (col) {
+        if (col.id() !== self.id()) {
+          col.size(col.size() - 1);
+        }
+      });
+    }
+  }
+  self.addColumn = function () {
+    var col = new Column(0, [], vm);
+    vm.columns.push(col);
+    col.expandColumn();
+  }
+  self.removeColumn = function () {
+    vm.columns().forEach(function (col) {
+      if (col.id() !== self.id()) {
+        self.rows().forEach(function (row) {
+          col.rows.push(row);
+        });
+        col.size(col.size() + self.size());
+      }
+    });
+    vm.columns.remove(self);
+  }
 }
 
 var Row = function (widgets, vm, columns) {

+ 7 - 0
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -136,6 +136,13 @@
 
 <script type="text/html" id="column-template${ suffix }">
   <div data-bind="css: klass">
+    <div class="pull-right margin-right-10" data-bind="visible: $root.isEditing()">
+      <a href="javascript:void(0)" data-bind="visible: size() > 2, click: shrinkColumn"><i class="fa fa-step-backward"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: size() < 12, click: expandColumn"><i class="fa fa-step-forward"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: $parent.columns().length < 2, click: addColumn"><i class="fa fa-plus"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: true, click: removeColumn"><i class="fa fa-times"></i></a>
+    </div>
+    <div class="clearfix"></div>
     <div class="container-fluid" data-bind="visible: $root.isEditing()">
       <div data-bind="click: function(){$data.addEmptyRow(true)}, css: {'add-row': true, 'is-editing': $root.isEditing}, sortable: { data: drops, isEnabled: $root.isEditing, 'afterMove': function(event){var widget=event.item; var _r = $data.addEmptyRow(true); _r.addWidget(widget);$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)}); columnDropAdditionalHandler(widget)}, options: {'placeholder': 'add-row-highlight', 'greedy': true, 'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"></div>
     </div>

+ 8 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1551,7 +1551,14 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
     });
 
     self.previewColumns = ko.observable("");
-    self.columns = ko.observable([]);
+    self.columns = ko.observableArray([]);
+    self.columnsTotalSize = ko.pureComputed(function () {
+      var totalSize = 0;
+      self.columns().forEach(function (col) {
+        totalSize += col.size();
+      });
+      return totalSize;
+    });
     loadSearchLayout(self, self.collectionJson.layout);
 
     self.additionalMustache = null;