Преглед на файлове

[core] Add csv list input ko component

This turns the list input that we use into a ko component. If the parameter value is an observableArray it will add the list values to the array, if it's just an observable it will set the values as csv.
Johan Ahlen преди 10 години
родител
ревизия
03ebde7
променени са 1 файла, в които са добавени 65 реда и са изтрити 0 реда
  1. 65 0
      desktop/core/src/desktop/templates/ko_components.mako

+ 65 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -562,4 +562,69 @@ from django.utils.translation import ugettext as _
       });
     }());
   </script>
+</%def>
+
+
+<%def name="csvListInput()">
+  <script type="text/html" id="csv-list-input-template">
+    <ul data-bind="sortable: values, visible: values().length" class="unstyled">
+      <li style="margin-bottom: 4px">
+        <div class="input-append">
+          <input type="text" data-bind="textInput: value, valueUpdate: 'afterkeydown', attr: { placeholder: $parent.placeholder }"/>
+          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+        </div>
+        <a href="#" data-bind="click: function(){ $parent.removeValue(this); }">
+          <i class="fa fa-minus"></i>
+        </a>
+      </li>
+    </ul>
+    <div style="min-width: 280px; margin-top: 5px;">
+      <a class="pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
+        <i class="fa fa-plus"></i>
+      </a>
+    </div>
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function() {
+      function CsvListInputViewModel (params) {
+        this.valueObservable = params.value;
+        this.isArray = $.isArray(this.valueObservable());
+        this.placeholder = params.placeholder || '';
+
+        var initialValues = this.isArray ? this.valueObservable() : this.valueObservable().split(",");
+        for (var i = 0; i < initialValues.length; i++) {
+          initialValues[i] = { value: ko.observable(initialValues[i].trim()) };
+          initialValues[i].value.subscribe(this.updateValueObservable, this);
+        }
+        this.values = ko.observableArray(initialValues);
+        this.values.subscribe(this.updateValueObservable, this);
+      }
+
+      CsvListInputViewModel.prototype.addValue = function () {
+        var newValue = { value: ko.observable('') };
+        newValue.value.subscribe(this.updateValueObservable, this);
+        this.values.push(newValue);
+      };
+
+      CsvListInputViewModel.prototype.removeValue = function (valueToRemove) {
+        this.values.remove(valueToRemove);
+      };
+
+      CsvListInputViewModel.prototype.updateValueObservable = function () {
+        var cleanValues = $.map(this.values(), function (item) {
+          return item.value();
+        });
+        cleanValues = $.grep(cleanValues, function (value) {
+          return value;
+        });
+        this.valueObservable(this.isArray ? cleanValues : cleanValues.join(','));
+      };
+
+      ko.components.register('csv-list-input', {
+        viewModel: CsvListInputViewModel,
+        template: { element: 'csv-list-input-template' }
+      });
+    }());
+  </script>
 </%def>