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>
This commit is contained in:
Jonathan Druart 2024-03-21 12:42:24 +01:00 committed by Katrin Fischer
parent 7a85353be0
commit 2cdd43b97c
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
2 changed files with 48 additions and 0 deletions

View File

@ -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 %]

View File

@ -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);
}
});
});