소스 검색

[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>