mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2026-04-04 23:49:57 +00:00
Add drag and drop to phrase details (#7772)
* Add drag and drop to phrase details * Update phrase_edit.php
This commit is contained in:
@@ -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)." </td>\n";
|
||||
echo " <td class='vtable'>".escape($phrase_detail_data)." </td>\n";
|
||||
echo " <td class='vtable' style='text-align: center;'>".$field['phrase_detail_order']." </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
|
||||
|
||||
Reference in New Issue
Block a user