From 75eb1eca9d9a14064bb0d73efc0bb067d646e994 Mon Sep 17 00:00:00 2001
From: ValdikSS <iam@valdikss.org.ru>
Date: Tue, 26 Dec 2023 04:52:53 +0300
Subject: [PATCH] Web Ui: add filter by printer model in PPD driver list

Implement JavaScript filter for the PPD list in "Add Printer"
and "Modify Printer" dialogs.

Sometimes there are too many models in the list that it's hard to find
the one you want.
---
 templates/choose-model.tmpl       | 21 +++++++++++++++++++++
 templates/da/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/de/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/es/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/fr/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/ja/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/pl/choose-model.tmpl    | 21 +++++++++++++++++++++
 templates/pt_BR/choose-model.tmpl | 21 +++++++++++++++++++++
 templates/ru/choose-model.tmpl    | 21 +++++++++++++++++++++
 9 files changed, 189 insertions(+)

diff --git a/templates/choose-model.tmpl b/templates/choose-model.tmpl
index 63d93e2615..5eeee1cd76 100644
--- a/templates/choose-model.tmpl
+++ b/templates/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Select Another Make/Manufacturer"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filter by Model:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Model:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/da/choose-model.tmpl b/templates/da/choose-model.tmpl
index f8ef250549..22eff2aa5f 100644
--- a/templates/da/choose-model.tmpl
+++ b/templates/da/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Rediger {printer_name}:Tilføj printer}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@ Del {?printer_is_shared=?ikke:{?printer_is_shared=0?ikke:}} printeren</TD>
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Vælg en anden producent"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filtrer efter model:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Model:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/de/choose-model.tmpl b/templates/de/choose-model.tmpl
index 62dc8ca0c6..e936fe0300 100644
--- a/templates/de/choose-model.tmpl
+++ b/templates/de/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?{printer_name} ändern:Drucker hinzufügen (Schritt 5/5)}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@ Drucker {?printer_is_shared=?nicht:{?printer_is_shared=0?nicht:}} im Netzwerk fr
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Anderen Hersteller/Marke wählen"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Nach Modell filtern:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Modell:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/es/choose-model.tmpl b/templates/es/choose-model.tmpl
index 7e97a11923..d78a95b217 100644
--- a/templates/es/choose-model.tmpl
+++ b/templates/es/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Modificar {printer_name}:A&ntilde;adir impresora}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Seleccione otra marca/fabricante"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filtrar por modelo:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Modelo:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/fr/choose-model.tmpl b/templates/fr/choose-model.tmpl
index f54e9bc8c0..f298cd9acc 100644
--- a/templates/fr/choose-model.tmpl
+++ b/templates/fr/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Modifier  {printer_name}:Ajouter une imprimante}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Choisir un autre fabricant"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filtrer par modèle :</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Modèle :</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/ja/choose-model.tmpl b/templates/ja/choose-model.tmpl
index d0f387f983..92194480b8 100644
--- a/templates/ja/choose-model.tmpl
+++ b/templates/ja/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?{printer_name}の変更:プリンターの追加}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="他のメーカー/製造元を選択"></TD>
 </TR>
 <TR>
+<TH CLASS="label">モデルフィルター:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">モデル:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/pl/choose-model.tmpl b/templates/pl/choose-model.tmpl
index d9b19d4429..090fa895a2 100644
--- a/templates/pl/choose-model.tmpl
+++ b/templates/pl/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Modyfikowanie {printer_name}:Dodawanie drukarki}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Wybierz innego producenta"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filtruj według modelu:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Model:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/pt_BR/choose-model.tmpl b/templates/pt_BR/choose-model.tmpl
index 1b48523e9d..fac006647f 100644
--- a/templates/pt_BR/choose-model.tmpl
+++ b/templates/pt_BR/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Modificar {printer_name}:Adicionar impressora}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Selecione outro fabricante"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Filtrar por modelo:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Modelo:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">
diff --git a/templates/ru/choose-model.tmpl b/templates/ru/choose-model.tmpl
index a5b878ec4f..8f68858c60 100644
--- a/templates/ru/choose-model.tmpl
+++ b/templates/ru/choose-model.tmpl
@@ -1,5 +1,22 @@
 <H2 CLASS="title">{op=modify-printer?Изменение {printer_name}:Добавление принтера}</H2>
 
+<SCRIPT TYPE="text/javascript"><!--
+function filterItems(el) {
+  var value = el.value.toLowerCase();
+  var form = el.form;
+  var sel = form.PPD_NAME;
+  var opt = sel.options;
+
+  for (var i=0; i<opt.length; i++) {
+    if (value && opt[i].text.toLowerCase().indexOf(value) == -1) {
+      opt[i].hidden = true;
+    } else {
+      opt[i].hidden = false;
+    }
+  }
+}
+--></SCRIPT>
+
 <FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
 <INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
 <INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
@@ -35,6 +52,10 @@
 <TD>{PPD_MAKE} <INPUT TYPE="SUBMIT" NAME="SELECT_MAKE" VALUE="Выбрать другую модель"></TD>
 </TR>
 <TR>
+<TH CLASS="label">Фильтр по модели:</TH>
+<TD><INPUT TYPE="TEXT" NAME="PPD_FILTER" PLACEHOLDER="🔍" ONKEYUP="filterItems(this);"></TD>
+</TR>
+<TR>
 <TH CLASS="label">Модель:</TH>
 <TD>
 <SELECT NAME="PPD_NAME" SIZE="10">