fields: possibility to order items of Item(s)Field (#57251)
gitea-wip/wcs/pipeline/head There was a failure building this commit Details

This commit is contained in:
Lauréline Guérin 2021-09-30 17:03:01 +02:00
parent 1e9f5ec3f3
commit ff771c9ded
No known key found for this signature in database
GPG Key ID: 1FAB9B9B4F93D473
4 changed files with 41 additions and 14 deletions

View File

@ -1793,6 +1793,7 @@ class ItemFieldMixin:
element_kwargs={'render_br': False, 'size': 50},
add_element_label=_('Add item'),
attrs={'data-dynamic-display-child-of': 'data_mode', 'data-dynamic-display-value': 'simple-list'},
extra_css_class='sortable',
)
form.add(
data_sources.DataSourceSelectionWidget,

View File

@ -1681,6 +1681,8 @@ class WidgetList(quixote.form.widget.WidgetList):
if add_element_label == 'Add row':
add_element_label = str(_('Add row'))
self.extra_css_class = kwargs.pop('extra_css_class', None)
CompositeWidget.__init__(self, name, value=value, **kwargs)
self.element_type = element_type
self.element_kwargs = element_kwargs or {}
@ -1728,7 +1730,7 @@ class WidgetList(quixote.form.widget.WidgetList):
self.element_names.append(name)
def add_media(self):
get_response().add_javascript(['jquery.js', 'widget_list.js'])
get_response().add_javascript(['jquery.js', 'jquery-ui.js', 'widget_list.js'])
def transfer_form_value(self, request):
for widget in self.get_widgets():

View File

@ -33,7 +33,8 @@ ul.biglist {
padding: 0.5em 0;
}
ul.biglist span.handle {
ul.biglist span.handle,
.widget span.handle {
cursor: move;
display: inline-block;
padding: 0.5ex;
@ -43,6 +44,12 @@ ul.biglist span.handle {
box-sizing: border-box;
}
.widget span.handle {
padding-left: 2px;
width: 1.5em;
text-align: left;
}
ul.biglist li,
li.biglistitem {
list-style-type: none;

View File

@ -21,7 +21,6 @@ function prepare_widget_list_elements() {
*/
return true;
}
if ($(row).find('[name$=add_element], [data-dynamic-display-value]').length > 0) {
/* this has complex widgets, don't use
* javascript in that case */
@ -34,19 +33,18 @@ function prepare_widget_list_elements() {
/* fix up form element name */
$(new_row).find('[name^=' + prefix + ']').each(
function() {
var cur_name = $(this).attr('name');
var $element = $(this);
if ($element.attr('type') == 'text') {
$element.attr('value', '');
}
var cur_name = $element.attr('name');
var pos = cur_name.indexOf('element', prefix.length) + 7; // 7 == len(element)
var index = cur_name.substring(pos, cur_name.length);
var after_pos = Math.max(index.indexOf('-'), index.indexOf('$'));
var after = '';
if (after_pos != -1) {
after = index.substring(after_pos, index.length);
}
var new_name = cur_name.substring(0, cur_name.length-index.length) +
(parseInt(index)+1) + after;
$(this).attr('name', new_name);
if ($(this).attr('type') == 'text') {
$(this).attr('value', '');
var element_regex = RegExp(`\\$element(\\d)`, 'g');
index = parseInt(index) + 1;
$(new_row).html($(new_row).html().replace(element_regex, `$element${index}`));
if ($(new_row).attr('data-widget-name')) {
$(new_row).attr('data-widget-name', $(new_row).attr('data-widget-name').replace(element_regex, `$element${index}`));
}
}
);
@ -65,6 +63,25 @@ function prepare_widget_list_elements() {
return false;
}
);
$('.widget.sortable input').each(function () {
$('<span class="handle">⣿</span>').insertBefore($(this));
});
$('.widget.sortable .content').sortable({
handle: '.handle',
start: function(event, ui) {
$('.widget.StringWidget input', $(this)).each(function () {
$(this).attr('value', $(this).val()); // save potential new values before the move
});
},
update : function(event, ui) {
$('.widget.StringWidget', $(this)).each(function (index) {
var element_regex = RegExp(`\\$element(\\d)`, 'g');
$(this).html($(this).html().replace(element_regex, `$element${index}`));
$(this).attr('data-widget-name', $(this).attr('data-widget-name').replace(element_regex, `$element${index}`));
});
},
});
}
$(document).ready(prepare_widget_list_elements);