Эх сурвалжийг харах

HUE-7167 [search] Enable swapping dashboard columns

Enrico Berti 8 жил өмнө
parent
commit
ed61535232

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

@@ -58,6 +58,17 @@ var Column = function (size, rows, vm) {
     }
     return row;
   };
+
+  self.moveLeft = function (idx) {
+    vm.columns().move(idx, (idx > 0 ? idx - 1 : 0));
+    vm.columns.valueHasMutated();
+  }
+
+  self.moveRight = function (idx) {
+    vm.columns().move(idx, (idx == vm.columns().length ? 0 : idx + 1));
+    vm.columns.valueHasMutated();
+  }
+
   self.shrinkColumn = function () {
     if (self.size() > 1) {
       self.size(self.size() - 1);
@@ -68,6 +79,7 @@ var Column = function (size, rows, vm) {
       });
     }
   }
+
   self.expandColumn = function () {
     if (self.size() < 12) {
       self.size(self.size() + 1);
@@ -78,11 +90,13 @@ var Column = function (size, rows, vm) {
       });
     }
   }
+
   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()) {

+ 8 - 4
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -137,10 +137,14 @@
 <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>
+      <a href="javascript:void(0)" data-bind="visible: size() > 2, click: shrinkColumn" title="${ _('Make column smaller') }"><i class="fa fa-step-backward"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: size() < 12, click: expandColumn" title="${ _('Make column larger') }"><i class="fa fa-step-forward"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: $parent.columns().length < 2, click: addColumn" title="${ _('Add a column') }"><i class="fa fa-plus"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: true, click: removeColumn" title="${ _('Remove this column') }"><i class="fa fa-times"></i></a>
+    </div>
+    <div class="pull-left margin-left-10" data-bind="visible: $root.isEditing()">
+      <a href="javascript:void(0)" data-bind="visible: $index() == 0, click: function() { moveRight($index()) }" title="${ _('Move column to the right') }"><i class="fa fa-arrow-right"></i></a>
+      <a href="javascript:void(0)" data-bind="visible: $index() > 0, click: function() { moveLeft($index()) }" title="${ _('Move column to the left') }"><i class="fa fa-arrow-left"></i></a>
     </div>
     <div class="clearfix"></div>
     <div class="container-fluid" data-bind="visible: $root.isEditing()">