From 2cdd43b97cbfba4dfd076f0d9ff0bf959b5c47c9 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 21 Mar 2024 12:42:24 +0100
Subject: [PATCH] Bug 35138: UI changes to add/remove a facet

Sponsored-by: The Research University in the Helmholtz Association (KIT)
Signed-off-by: Clemens Tubach <clemens.tubach@kit.edu>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../searchengine/elasticsearch/mappings.tt    | 18 +++++++++++
 .../prog/js/elasticsearch-mappings.js         | 30 +++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
index 85095ec944..5ee9404227 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
@@ -498,6 +498,7 @@ a.add, a.delete {
                                             <th>Order</th>
                                             <th class="NoSort">Search field</th>
                                             <th class="NoSort">Label</th>
+                                            <th class="NoSort">&nbsp;</th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -523,9 +524,26 @@ a.add, a.delete {
                                                     [% END %]
                                                     <input type="hidden" name="facet_name" value="[% f.name | html %]" />
                                                 </td>
+                                                <td>
+                                                    <a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
+                                                </td>
                                             </tr>
                                         [% END %]
                                     </tbody>
+                                    <tfoot>
+                                        <tr>
+                                            <td></td>
+                                            <td>
+                                                <select data-id="facet-search-field">
+                                                    [% FOREACH search_field IN all_search_fields %]
+                                                        <option value="[% search_field.name | html %]" data-label="[% search_field.label | html %]">[% search_field.name | html %]</option>
+                                                    [% END %]
+                                                </select>
+                                            </td>
+                                            <td></td>
+                                            <td><a class="btn btn-default btn-xs add-facet"><i class="fa fa-plus"></i> Add</a></td>
+                                        </tr>
+                                    </tfoot>
                                 </table>
                             </div>
                         [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
index d0f27a46d2..d4806d16e0 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
@@ -156,4 +156,34 @@ $(document).ready(function () {
             clean_line(line);
         }
     });
+
+    $('.add-facet').click(function() {
+        var table = $(this).closest('table');
+        let table_id = table.attr('id');
+        let dt = $('#' + table_id).DataTable();
+        var line = $(this).closest('tr');
+        let selected_option = $(line).find('select[data-id="facet-search-field"] option:selected');
+        var search_field_name = selected_option.val();
+        let dt_data = dt.data();
+        let already_exists = dt_data.filter((row, idx) => row[1] === search_field_name);
+        if ( already_exists.length ) {
+            alert(__("Facet '%s' already exist".format(search_field_name)));
+            return;
+        }
+        if (search_field_name.length > 0) {
+            const next_id = Math.max.apply(null, dt_data.map(row => row[0])) + 1;
+            const label = selected_option.data('label');
+            new_line = [next_id, search_field_name, '<span>%s</span><input type="hidden" name="facet_name" value="%s" />'.format(label.escapeHtml(), search_field_name.escapeHtml()), '<a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> %s</a>'.format(__("Delete"))];
+            dt.row.add(new_line).draw();
+
+            $(table).on( 'click', '.delete', function () {
+                var table = $(this).closest('table');
+                let dt = $(table).DataTable();
+                dt.row( $(this).closest('tr') ).remove().draw();
+            } );
+
+            clean_line(line);
+        }
+    });
+
 });
-- 
2.39.5