penambahan templaet AutoCompletMS

opensipkd/base/views/base_views.py

@@ -625,6 +625,7 @@ class BaseView(object):
         return self.route_list(**kwargs)
 
     def after_add(self, row=None, **kwargs):
+        """Digunakan untuk memproses setelah data tersimpan ke database"""
         return self.route_list(**kwargs)
 
     def after_edit(self, row=None, **kwargs):

opensipkd/base/views/widget_os.py

+from iso8601.iso8601 import ISO8601_REGEX
+from deform.widget import string_types
 import json
 import logging
 
@@ -7,10 +9,10 @@ from deform import widget
 from deform.compat import sequence_types, text_type
 from deform.form import Button
 from deform.i18n import _
-from deform.widget import Widget, _StrippedString, Select2Widget, \
-    DateInputWidget as WidgetDateInputWidget, _normalize_choices, OptGroup
-from deform.widget import string_types
-from iso8601.iso8601 import ISO8601_REGEX
+from deform.widget import (
+    Widget, _StrippedString, Select2Widget,  _normalize_choices, OptGroup,
+    DateInputWidget as WidgetDateInputWidget, AutocompleteInputWidget)
+
 
 _logging = logging.getLogger(__name__)
 
@@ -208,6 +210,87 @@ class Select2MsWidget(Select2Widget):
     template = "select2_ms.pt"
 
 
+class AutocompleteMsInputWidget(AutocompleteInputWidget):
+    """
+    Renders ``<select>`` field based on a predefined set of values using
+    `select2 <https://select2.org/>`_ library.
+
+    **Attributes/Arguments**
+
+    Same as :func:`~deform.widget.Select2Widget`, with some extra options
+    listed here.
+    url: url for slave select
+    slave: id of slave  select
+    widget = widget_os.AutocompleteMsInputWidget(url="https://slave_item_url?item_key=selected_value,
+                                        slave="slave_id")
+
+    Saat ini untuk slave baru bisa ke select2ms atau select2 atau select
+
+    """
+
+    url = ""
+    slave = ""
+    template = "autocomplete_input_ms.pt"
+
+    _pstruct_schema = SchemaNode(
+        Mapping(),
+        SchemaNode(_StrippedString(), name="auto_id"),
+        SchemaNode(_StrippedString(), name="auto_value"),
+    )
+
+    def serialize(self, field, cstruct, **kw):
+        if "delay" in kw or getattr(self, "delay", None):
+            raise ValueError(
+                "AutocompleteWidget does not support *delay* parameter "
+                "any longer."
+            )
+
+        if cstruct is null:
+            auto_id = ""
+            auto_value = ""
+        else:
+            auto_id, auto_value = cstruct.split("|", 2)
+
+        kw.setdefault("auto_id", auto_id)
+        kw.setdefault("auto_value", auto_value)
+        self.values = self.values or []
+        readonly = kw.get("readonly", self.readonly)
+
+        options = {}
+        if isinstance(self.values, string_types):
+            options["remote"] = "%s?term=%%QUERY" % self.values
+        else:
+            options["local"] = self.values
+
+        options["minLength"] = kw.pop("min_length", self.min_length)
+        options["limit"] = kw.pop("items", self.items)
+        kw["options"] = json.dumps(options)
+
+        template = readonly and self.readonly_template or self.template
+        tmpl_values = self.get_template_values(field, cstruct, kw)
+        return field.renderer(template, **tmpl_values)
+
+    def deserialize(self, field, pstruct):
+        if pstruct is null:
+            return null
+        else:
+            try:
+                validated = self._pstruct_schema.deserialize(pstruct)
+            except Invalid as exc:
+                raise Invalid(field.schema, text_("Invalid pstruct: %s" % exc))
+            auto_id = validated["auto_id"]
+            auto_value = validated["auto_value"]
+
+            if not auto_id and not auto_value:
+                return null
+
+            result = "|".join([auto_id, auto_value])
+            if not auto_id or not auto_value:
+                raise Invalid(field.schema, _("Incomplete Data"), result)
+
+            return result
+
+
 class QtyWidget(Widget):
     template = "opensipkd.base:/views/widgets/qty.pt"
     readonly_template = "opensipkd.base:/views/widgets/readonly/qty.pt"

opensipkd/base/views/widgets/autocomplete_input.pt

@@ -11,7 +11,7 @@
       '${field.oid}',
       function (oid) {
         $('#' + oid).typeahead(${ options });
-              ${ structure: js }
+        ${ structure: js };
       }
     );
   </script>

opensipkd/base/views/widgets/autocomplete_input_ms.pt

+<span tal:define="name name|field.name;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  style style|field.widget.style;
+                  autofocus autofocus|field.autofocus;
+                  url url|field.widget.url;
+                  slave slave|field.widget.slave;
+                  " tal:omit-tag="">
+  ${field.start_mapping()}
+  <input type="hidden" name="auto_id" id="${oid}-auto_id" value="${auto_id}" />
+  <input type="text" name="auto_value" value="${auto_value}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
+                           style style;
+                           autofocus autofocus;
+                           attributes|field.widget.attributes|{};" id="${oid}-auto_value" />
+  ${field.end_mapping()}
+
+  <script tal:condition="field.widget.values" type="text/javascript">
+    deform.addCallback(
+      '${oid}',
+      function (oid) {
+        $('#' + oid + '-auto_value').typeahead(${ structure: options });
+        if ("${autofocus}" == "autofocus") {
+          $('#' + oid + '-auto_value').focus();
+        }
+
+        $('#' + oid + '-auto_value').bind('typeahead:selected', function (obj, datum, name) {
+          $('#' + oid + '-auto_id').val(datum.id);
+          $('#' + oid + '-auto_id').change();
+        });
+
+        $('#' + oid + '-auto_value').on('input',
+          function (e) {
+            let val = $('#' + oid + '-auto_value').val();
+            if (val === null || val === "") {
+              $('#' + oid + '-auto_id').val("");
+            }
+          });
+      });
+  </script>
+
+  <script type="text/javascript" tal:condition="url and slave">
+    deform.addCallback(
+      '${oid}',
+      function (oid) {
+        $('#' + oid + "-auto_id").change(function () {
+          $("#${slave}").val("");
+          $("#${slave}").empty();
+          $("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
+          let value = $(this).val();
+          if (value) {
+            $.ajax({
+              type: "GET",
+              url: "${url}" + value,
+              success: function (res) {
+                if (res) {
+                  var def_value = null;
+                  if (res.hasOwnProperty("default")) {
+                    values = res.values;
+                    def_value = res.default;
+                  }
+                  else
+                    values = res;
+
+                  $.each(values, function (key, value) {
+                    if (key === def_value)
+                      $("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
+                    else
+                      $("#${slave}").append('<option value="' + key + '">' + value + '</option>');
+                  });
+                } else {
+                  $("#${slave}").empty();
+                }
+              }
+            });
+          }
+          $("#${slave}").change();
+        });
+      });
+  </script>
+
+
+</span>
\ No newline at end of file

opensipkd/base/views/widgets/select2_ms.pt

@@ -19,6 +19,7 @@
       border: 1px solid #ccc;
     }
   </style>
+
   <input type="hidden" name="__start__" value="${name}:sequence" tal:condition="multiple" />
 
   <select tal:attributes="
@@ -53,7 +54,8 @@
           containerCssClass: 'form-control',
           placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}" || undefined,
           allowClear: "${hasattr(field.widget, 'placeholder')}",
-          tags: ${str(getattr(field.widget, 'tags', 'undefined')).lower()}
+          tags: ${ str(getattr(field.widget, 'tags', 'undefined')).lower()
+      }
           });
         }
     );

opensipkd/base/views/widgets/selectize_ms.pt

+<span tal:define="name name|field.name;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  style style|field.widget.style;
+                  autofocus autofocus|field.autofocus" tal:omit-tag="">
+  <input type="text" name="${name}" value="${cstruct}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
+                           style style;
+                           autofocus autofocus;
+                           attributes|field.widget.attributes|{};" id="${oid}" />
+  <script tal:condition="field.widget.values" type="text/javascript">
+    deform.addCallback(
+      '${field.oid}',
+      function (oid) {
+        $('#' + oid).typeahead(${ structure: options });
+        if ("${autofocus}" == "autofocus") {
+          $('#' + oid).focus();
+        }
+      }
+    );
+  </script>
+</span>
+
+
+<div tal:define="
+     name name|field.name;
+     style field.widget.style;
+     oid oid|field.oid;
+     css_class css_class|field.widget.css_class;
+     unicode unicode|str;
+     optgroup_class optgroup_class|field.widget.optgroup_class;
+     multiple multiple|field.widget.multiple;
+     autofocus autofocus|field.autofocus;
+     url url|field.widget.url;
+     slave slave|field.widget.slave;" tal:omit-tag="">
+
+  <style>
+    .select2-selection.form-control {
+      padding: 0px 0px;
+    }
+
+    .select2-container--default .select2-selection--multiple,
+    .select2-container--default .select2-selection--single {
+      border: 1px solid #ccc;
+    }
+  </style>
+  <input type="hidden" name="__start__" value="${name}:sequence" tal:condition="multiple" />
+
+  <select tal:attributes="
+          name name;
+          id oid;
+          class string: form-control ${css_class or ''};
+          data-placeholder field.widget.placeholder|None;
+          multiple multiple;
+          style style;
+          autofocus autofocus;
+          attributes|field.widget.attributes|{};">
+    <tal:loop tal:repeat="item values">
+      <optgroup tal:condition="isinstance(item, optgroup_class)" tal:attributes="label item.label">
+        <option tal:repeat="(value, description) item.options" tal:attributes="
+                selected python:field.widget.get_select_value(cstruct, value);
+                readonly 'readonly' in getattr(field.widget, 'attributes', {}) and field.widget.get_select_value(cstruct, item[0]);
+                disabled 'readonly' in getattr(field.widget, 'attributes', {}) and not field.widget.get_select_value(cstruct, item[0]);
+                class css_class;
+                label field.widget.long_label_generator and description;
+                value value"
+          tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description" />
+      </optgroup>
+      <option tal:condition="not isinstance(item, optgroup_class)" tal:attributes="
+              selected python:field.widget.get_select_value(cstruct, item[0]);
+              readonly 'readonly' in getattr(field.widget, 'attributes', {}) and field.widget.get_select_value(cstruct, item[0]);
+              disabled 'readonly' in getattr(field.widget, 'attributes', {}) and not field.widget.get_select_value(cstruct, item[0]);
+              class css_class;
+              value item[0]">${item[1]}</option>
+    </tal:loop>
+  </select>
+
+  <script type="text/javascript">
+    deform.addCallback(
+      "${field.oid}",
+      function (oid) {
+        $("#" + oid).selectize(${ selectize_options_json });
+        if ($("#" + oid).is("[readonly]")) {
+          $("#" + oid)[0].selectize.lock();
+        }
+        if ($("#" + oid).prop("autofocus")) {
+          $("#" + oid).selectize("focus");
+        }
+      }
+    );
+  </script>
+  <script type="text/javascript" tal:condition="url and slave">
+    deform.addCallback(
+      '${field.oid}',
+      function (oid) {
+        $('#' + oid).change(function () {
+          $("#${slave}").val("");
+          $("#${slave}").empty();
+          $("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
+          let value = $(this).val();
+          if (value) {
+            $.ajax({
+              type: "GET",
+              url: "${url}" + value,
+              success: function (res) {
+                if (res) {
+                  var def_value = null;
+                  if (res.hasOwnProperty("default")) {
+                    values = res.values;
+                    def_value = res.default;
+                  }
+                  else
+                    values = res;
+
+                  $.each(values, function (key, value) {
+                    if (key === def_value)
+                      $("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
+                    else
+                      $("#${slave}").append('<option value="' + key + '">' + value + '</option>');
+                  });
+                } else {
+                  $("#${slave}").empty();
+                }
+              }
+            });
+          }
+          $("#${slave}").change();
+        });
+      });
+  </script>
+  <input type="hidden" name="__end__" value="${name}:sequence" tal:condition="multiple" />
+</div>
\ No newline at end of file