Bug 41995: Autocomplete for syspref search

This patch adds autocompletion to the syspref search in the header.

Test plan:
1. Go to the admin home page - /cgi-bin/koha/admin/admin-home.pl
2. In the header start typing the name of a syspref and notice that
   there is now autocompletion (you need at least 3 chars)
3. Select an entry and confirm that you are correctly redirected to the
   correct search result

Signed-off-by: Anneli Österman <anneli.osterman@koha-suomi.fi>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>

koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc

@@ -98,6 +98,16 @@
     </script>
 [% END %]
 
+[% IF ( CAN_user_parameters_manage_sysprefs ) %]
+    <script>
+        $(document).ready(function () {
+            if ($("#syspref_searchfield").length) {
+                syspref_autocomplete($("#syspref_searchfield"));
+            }
+        });
+    </script>
+[% END %]
+
 [% IF Koha.Preference( 'CookieConsent' ) %]
     [% Asset.js("js/cookieconsent.js") | $raw %]
 [% END %]

koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc

@@ -11,11 +11,11 @@
                 <input type="hidden" name="op" value="search" />
 
                 <div class="form-title">
-                    <label class="control-label" for="searchfield"><span class="control-text">Search system preferences</span> <i class="fa fa-fw fa-cogs" aria-hidden="true"></i></label>
+                    <label class="control-label" for="syspref_searchfield"><span class="control-text">Search system preferences</span> <i class="fa fa-fw fa-cogs" aria-hidden="true"></i></label>
                 </div>
 
                 <div class="form-content">
-                    <input class="head-searchbox form-control" type="text" name="searchfield" id="searchfield" value="" placeholder="System preference search" />
+                    <input class="head-searchbox form-control" type="text" name="searchfield" id="syspref_searchfield" value="" placeholder="System preference search" />
                 </div>
 
                 <button type="submit" aria-label="Search"><i class="fa fa-arrow-right"></i></button>

koha-tmpl/intranet-tmpl/prog/js/fetch/system-preferences-api-client.js

@@ -1,7 +1,7 @@
 export class SysprefAPIClient {
     constructor(HttpClient) {
         this.httpClient = new HttpClient({
-            baseURL: "/cgi-bin/koha/svc/config/systempreferences",
+            baseURL: "",
         });
     }
 
@@ -9,7 +9,16 @@ export class SysprefAPIClient {
         return {
             get: variable =>
                 this.httpClient.get({
-                    endpoint: "/?pref=" + variable,
+                    endpoint:
+                        "/cgi-bin/koha/svc/config/systempreferences/?pref=" +
+                        variable,
+                }),
+            getAll: (query, params) =>
+                this.httpClient.getAll({
+                    endpoint: "/api/v1/sysprefs",
+                    query,
+                    params: { _order_by: "name", ...params },
+                    headers: {},
                 }),
             getAll: variables =>
                 this.httpClient.get({
@@ -17,7 +26,7 @@ export class SysprefAPIClient {
                 }),
             update: (variable, value) =>
                 this.httpClient.post({
-                    endpoint: "",
+                    endpoint: "/cgi-bin/koha/svc/config/systempreferences",
                     body: "pref_%s=%s".format(
                         encodeURIComponent(variable),
                         encodeURIComponent(value)
@@ -29,7 +38,7 @@ export class SysprefAPIClient {
                 }),
             update_all: sysprefs =>
                 this.httpClient.post({
-                    endpoint: "",
+                    endpoint: "/cgi-bin/koha/svc/config/systempreferences",
                     body: Object.keys(sysprefs)
                         .map(variable =>
                             sysprefs[variable].length

koha-tmpl/intranet-tmpl/prog/js/staff-global.js

@@ -1162,3 +1162,53 @@ function validatePatronSearch(form) {
     }
     return true;
 }
+
+function syspref_autocomplete(node) {
+    const client = APIClient.sysprefs;
+    node
+        .autocomplete({
+            source: function (request, response) {
+                let patterns = request.term
+                    .split(/[\s,]+/)
+                    .filter(function (s) {
+                        return s.length;
+                    });
+
+                var table_prefix = "me";
+                let search_fields = ["variable"];
+                let term_subquery_or = [];
+                search_fields.forEach(function (field, i) {
+                    term_subquery_or.push({
+                        [table_prefix + "." + field]: {
+                            like: "%" + request.term + "%",
+                        },
+                    });
+                });
+                let query = [{ "-or": term_subquery_or }];
+
+                let params = {
+                    _page: 1,
+                    _per_page: 10,
+                    _order_by: "+me.variable",
+                };
+                client.sysprefs.getAll(query, params).then(data => {
+                    return response(data);
+                });
+            },
+            minLength: 3,
+            select: function (event, ui) {
+                window.location.href = ui.item.link;
+            },
+            focus: function (event, ui) {
+                event.preventDefault(); // Don't replace the text field
+            },
+        })
+        .data("ui-autocomplete")._renderItem = function (ul, item) {
+        item.link = `/cgi-bin/koha/admin/preferences.pl?op=search&searchfield=${item.variable}`;
+        item.value = item.variable; // Or we replace the input with the syspref's value when the item is selected
+        return $("<li></li>")
+            .data("ui-autocomplete-item", item)
+            .append(`<a href="${item.link}">${item.variable}</a>`)
+            .appendTo(ul);
+    };
+}