From 737a6fd7365f560a5435008f6445416794764b20 Mon Sep 17 00:00:00 2001
From: Moritz Bunkus <m.bunkus@linet.de>
Date: Mon, 16 Nov 2020 15:16:19 +0100
Subject: [PATCH] =?utf8?q?L/P.select=5Ftag:=20Unterst=C3=BCtzung=20f=C3=BC?=
 =?utf8?q?r=20Text-Filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Gedacht für Selects mit size="123"-Attribut, die also als Liste und
nicht als Combobox gerendert werden.

Es wird direkt oberhalb der Select eine Text-Eingabezeile angezeigt,
die als dynamischer Filter für die Optionen verwendet wird. Bei jeder
Änderung (keyup) werden nur noch diejenigen Einträge in der Select
angezeigt, in deren Text der Suchfilter-Begriff irgendwo
vorkommt (ohne Berücksichtigung von Groß-/Kleinschreibung).

• with_filter=1 schaltet den Filter an
• filter_placeholder=LxERP.t8("Placeholder text") gibt einen
  Platzhalter-Text an
---
 SL/Presenter/Tag.pm        |  25 ++++++++++++++++++++++++-
 css/kivitendo/main.css     |  22 ++++++++++++++++++++++
 css/lx-office-erp/main.css |  22 ++++++++++++++++++++++
 image/glass14x14.png       | Bin 0 -> 505 bytes
 js/kivi.js                 |  16 ++++++++++++++++
 5 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 image/glass14x14.png

diff --git a/SL/Presenter/Tag.pm b/SL/Presenter/Tag.pm
index 5b261e66c..2b45d97d1 100644
--- a/SL/Presenter/Tag.pm
+++ b/SL/Presenter/Tag.pm
@@ -113,6 +113,8 @@ sub select_tag {
 
   $collection         = [] if defined($collection) && !ref($collection) && ($collection eq '');
 
+  my $with_filter     = delete($attributes{with_filter});
+  my $fil_placeholder = delete($attributes{filter_placeholder});
   my $value_key       = delete($attributes{value_key})   || 'id';
   my $title_key       = delete($attributes{title_key})   || $value_key;
   my $default_key     = delete($attributes{default_key}) || 'selected';
@@ -208,7 +210,28 @@ sub select_tag {
     } @{ $collection };
   }
 
-  html_tag('select', $code, %attributes, name => $name);
+  my $select_html = html_tag('select', $code, %attributes, name => $name);
+
+  if ($with_filter) {
+    my $input_style;
+
+    if (($attributes{style} // '') =~ m{width: *(\d+) *px}i) {
+      $input_style = "width: " . ($1 - 22) . "px";
+    }
+
+    my $input_html = html_tag(
+      'input', undef,
+      autocomplete     => 'off',
+      type             => 'text',
+      id               => $attributes{id} . '_filter',
+      'data-select-id' => $attributes{id},
+      (placeholder     => $fil_placeholder) x !!$fil_placeholder,
+      (style           => $input_style)     x !!$input_style,
+    );
+    $select_html = html_tag('div', $input_html . $select_html, class => "filtered_select");
+  }
+
+  return $select_html;
 }
 
 sub checkbox_tag {
diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css
index 0c2249314..563bda962 100644
--- a/css/kivitendo/main.css
+++ b/css/kivitendo/main.css
@@ -614,3 +614,25 @@ body > div.admin {
 .cke_button {
   padding: 0px; 6px !important;
 }
+
+/* selects with text filters */
+div.filtered_select input, div.filtered_select select {
+  display: block;
+}
+
+div.filtered_select input {
+  background-image: url(../../image/glass14x14.png);
+  background-repeat: no-repeat;
+  background-position: 2px 2px;
+  border-radius: 0px;
+  border: solid #a0a0a0 1px;
+  border-bottom: none;
+  padding: 0px;
+  padding-left: 20px;
+  margin: 0;
+  width: 500px;
+}
+
+div.filtered_select select {
+  width: 522px;
+}
diff --git a/css/lx-office-erp/main.css b/css/lx-office-erp/main.css
index a2a4ad02e..36fe035b1 100644
--- a/css/lx-office-erp/main.css
+++ b/css/lx-office-erp/main.css
@@ -611,3 +611,25 @@ div.layout-actionbar .layout-actionbar-default-action {
 .cke_button {
   padding: 0px; 6px !important;
 }
+
+/* selects with text filters */
+div.filtered_select input, div.filtered_select select {
+  display: block;
+}
+
+div.filtered_select > input {
+  background-image: url(../../image/glass14x14.png);
+  background-repeat: no-repeat;
+  background-position: 2px 2px;
+  border-radius: 0px;
+  border: solid #a0a0a0 1px;
+  border-bottom: none;
+  padding: 0px;
+  padding-left: 20px;
+  margin: 0;
+  width: 500px;
+}
+
+div.filtered_select select {
+  width: 522px;
+}
diff --git a/image/glass14x14.png b/image/glass14x14.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6c9d1b95145d07067e37fdb7b41347242650563
GIT binary patch
literal 505
zcmV<V0S5kwP)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00009a7bBm0009M
z0009M0X=4e#{d8Ut4TybR45f?Qp=73Q4p<eP2!obmC$1)SRuiht)%B$<~zoZSP*L;
zAi~Z@f*A`-3Gt>|Pn{Zl!%QVNxB7OSbLyqJu1no+*Yx}SpX|RAk#@h|Nz*iTf9>JB
ze0OfQ+lOUY-&(KNd((BjZx}}Aa=8$Qn1lefZJT^PpNFSFAb__8|7#fh+5+f&K2t0f
zqg*aW(P)$$$D!3~MYGvVNT7PXUIEVV-O?FoK`9&#Q>|7L_Q_;I^ZA@i)1*S7pcLT%
z%w|DR7*nYffnYcsiW*Yg?RHeHR)yqnIK0#iMKPqeUawVMsB^pBib5z9lG?pk+zJTB
zcsx$rDAkxqBqHC(<MBmJ0TH}hE(y$~Qi&3Y1SOM6DwoTWHX8TWL=hd^@Aotq3}h6=
zVv(}htbm}J&*%T8D$NmTR^4ni0>->B4rEfPRHVC5old9nCh-`!X9&dM?GOdr<MCL!
ziwx4~wA2p_Qtd$D*&ZvV8Z#P==yW<s?T^@wtQ-gSx&7FPXT0(;(_k<tM4a-16&rf9
v+5F=DtMh3y0Tx*SJO}&A%i;2ABNmt+aRBX;=#=xk00000NkvXXu0mjf@XO-!

literal 0
HcmV?d00001

diff --git a/js/kivi.js b/js/kivi.js
index a76ad8a99..b2b39e180 100644
--- a/js/kivi.js
+++ b/js/kivi.js
@@ -350,6 +350,19 @@ namespace("kivi", function(ns) {
       editor.on('instanceReady', function() { ns.focus_ckeditor($e); });
   };
 
+  ns.filter_select = function() {
+    var $input  = $(this);
+    var $select = $('#' + $input.data('select-id'));
+    var filter  = $input.val().toLocaleLowerCase();
+
+    $select.find('option').each(function() {
+      if ($(this).text().toLocaleLowerCase().indexOf(filter) != -1)
+        $(this).show();
+      else
+        $(this).hide();
+    });
+  };
+
   ns.reinit_widgets = function() {
     ns.run_once_for('.datepicker', 'datepicker', function(elt) {
       $(elt).datepicker();
@@ -369,6 +382,9 @@ namespace("kivi", function(ns) {
         kivi.ChartPicker($(elt));
       });
 
+    ns.run_once_for('div.filtered_select input', 'filtered_select', function(elt) {
+      $(elt).bind('change keyup', ns.filter_select);
+    });
 
     var func = kivi.get_function_by_name('local_reinit_widgets');
     if (func)
-- 
2.20.1