Add drag and drop to phrase details (#7772)

* Add drag and drop to phrase details

* Update phrase_edit.php
This commit is contained in:
Alex
2026-03-04 12:56:22 -07:00
committed by GitHub
parent 1068cf70c4
commit 39fcc171c7

View File

@@ -17,7 +17,7 @@
The Initial Developer of the Original Code is
Mark J Crane <markjcrane@fusionpbx.com>
Portions created by the Initial Developer are Copyright (C) 2008-2025
Portions created by the Initial Developer are Copyright (C) 2008-2026
the Initial Developer. All Rights Reserved.
Contributor(s):
@@ -217,6 +217,22 @@
}
}
//update phrase detail order if drag and drop was used
if (!empty($_POST['phrase_details_order'])) {
$phrase_details_order = explode(",", $_POST["phrase_details_order"]);
$x = 0;
foreach ($phrase_details_order as $phrase) {
list($uuid, $order) = explode("|", $phrase);
$array['phrase_details'][$x]['phrase_detail_uuid'] = $uuid;
$array['phrase_details'][$x]['phrase_detail_order'] = $order;
$x++;
}
$p = permissions::new();
$p->add('phrase_detail_edit', 'temp');
}
//execute update/insert
$p = permissions::new();
$p->add('phrase_detail_add', 'temp');
@@ -224,6 +240,7 @@
$database->save($array);
unset($array);
$p->delete('phrase_detail_edit', 'temp');
$p->delete('phrase_detail_add', 'temp');
//remove checked phrase details
@@ -484,6 +501,7 @@
echo "<td class='vncell' valign='top'>".$text['label-structure']."</td>";
echo "<td class='vtable' align='left'>";
echo " <table border='0' cellpadding='0' cellspacing='0'>\n";
echo " <tbody id='sortable'>\n";
echo " <tr>\n";
echo " <td class='vtable'><strong>".$text['label-function']."</strong></td>\n";
echo " <td class='vtable'><strong>".$text['label-action']."</strong></td>\n";
@@ -517,7 +535,7 @@
$phrase_detail_function = $field['phrase_detail_function'];
$phrase_detail_data = $field['phrase_detail_data'];
}
echo "<tr>\n";
echo "<tr class='draggable' data-detail-uuid='".$field['phrase_detail_uuid']."'>\n";
echo " <td class='vtable'>".escape($phrase_detail_function)."&nbsp;</td>\n";
echo " <td class='vtable'>".escape($phrase_detail_data)."&nbsp;</td>\n";
echo " <td class='vtable' style='text-align: center;'>".$field['phrase_detail_order']."&nbsp;</td>\n";
@@ -525,12 +543,16 @@
if (is_uuid($field['phrase_detail_uuid'])) {
echo " <input type='checkbox' name='phrase_details_delete[".$x."][checked]' value='true' class='chk_delete checkbox_details' onclick=\"edit_delete_action('details');\">\n";
echo " <input type='hidden' name='phrase_details_delete[".$x."][uuid]' value='".escape($field['phrase_detail_uuid'])."' />\n";
echo " <td class='vtable' style='text-align: center;'>\n";
echo " <span class='drag_handle' style='color: #00000055; cursor: grab;'><i class='fa-solid fa-grip-lines' style='width: 15px;'></i></span>\n";
echo " </td>\n";
}
echo " </td>\n";
echo "</tr>\n";
}
}
unset($phrase_details, $field);
echo "<tr>\n";
echo " <td class='vtable' style='border-bottom: none;' align='left' nowrap='nowrap'>\n";
echo " <select name='phrase_detail_function' id='phrase_detail_function' class='formfld' onchange=\"load_action_options(this.selectedIndex);\">\n";
@@ -561,6 +583,7 @@
echo " </td>\n";
echo " </tr>\n";
echo "</tbody>\n";
echo "</table>\n";
echo " ".$text['description-structure']."\n";
@@ -633,6 +656,50 @@
}
echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
//include sortablejs
echo "<script src='/resources/sortablejs/sortable.min.js'></script>";
//phrase details drag and drop
echo "<input type='hidden' id='phrase_details_order' name='phrase_details_order' value='' />\n";
?>
<style>
.selected td:has(.drag_handle) {
background-color: #00000015;
}
</style>
<script>
const sortable_list = document.getElementById('sortable');
Sortable.create(sortable_list, {
animation: 150,
draggable: '.draggable',
handle: '.drag_handle',
onSort: update_phrase_details_order,
multiDrag: true,
selectedClass: 'selected',
});
function update_phrase_details_order() {
const phrase_details_list = [];
const phrase_details = sortable_list.querySelectorAll('.draggable');
let order = 10;
//add the phrase details to the list
phrase_details.forEach(function(phrase_detail) {
let uuid = phrase_detail.getAttribute('data-detail-uuid');
phrase_details_list.push(`${uuid}|${order}`);
order += 10;
});
document.getElementById('phrase_details_order').value = phrase_details_list;
}
</script>
<?php
echo "</form>";
//include the footer