Allow reordering extra keys with drag and drop #2526

This commit is contained in:
Kijin Sung 2025-05-22 21:20:59 +09:00
parent 82fa67be5b
commit a1e5a51b06
8 changed files with 260 additions and 33 deletions

View file

@ -110,7 +110,7 @@
<a class="x_btn" href="{getUrl('type','insertExtraForm','selected_var_idx','')}">{$lang->cmd_insert}</a>
</div>
</div>
<table class="x_table x_table-striped x_table-hover">
<table class="x_table x_table-striped x_table-hover sortable extra_keys" data-module-srl="{$module_srl}">
<thead>
<tr class="nowr">
<th>{$lang->no}</th>
@ -123,10 +123,15 @@
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tbody class="uDrag">
<block loop="$extra_keys => $key,$val">
<tr>
<td rowspan="2"|cond="$val->desc">{$val->idx}</td>
<tr data-eid="{$val->eid}" data-idx="{$val->idx}">
<td>
<div class="wrap" style="user-select:none">
<button type="button" class="dragBtn">Move to</button>
{$val->idx}
</div>
</td>
<td>{$val->eid}</td>
<td class="nowr"><strong>{$val->name}</strong></td>
<td class="nowr">{$lang->column_type_list[$val->type]}</td>
@ -144,9 +149,6 @@
<button type="button" class="x_icon-trash" onclick="return doDeleteExtraKey('{$module_srl}','{$val->idx}');">{$lang->cmd_delete}</button>
</td>
</tr>
<tr cond="$val->desc">
<td colspan="7">{$val->desc}</td>
</tr>
</block>
</tbody>
</table>

View file

@ -1,5 +1,24 @@
(function($) {
$(function() {
// Reorder extra keys
$('table.extra_keys.sortable').on('after-drag.st', function(e) {
let order = [];
let i = 1;
$(this).find('tbody > tr').each(function() {
order.push({
eid: $(this).data('eid'),
old_idx: parseInt($(this).data('idx'), 10),
new_idx: i++
});
});
Rhymix.ajax('document.procDocumentAdminReorderExtraVars', {
module_srl: $(this).data('moduleSrl'),
order: order
});
});
// Show or hide fields depending on the type of variable
$('select#type').on('change', function() {
const selected_type = $(this).val();
$(this).parents('form').find('.x_control-group').each(function() {
@ -21,5 +40,6 @@
}
});
}).triggerHandler('change');
});
})(jQuery);