Skip to content

Commit ca3cc33

Browse files
authored
Refactor table sorting code (hestiacp#3598)
* Use data attribute in list sorting * Use data attribute in list sorting * Remove unused v_unit_id and v_section attributes * Tidy
1 parent 3e49283 commit ca3cc33

17 files changed

+243
-92
lines changed

web/js/src/listSorting.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export default function handleListSorting() {
4747
.forEach((s) => s.classList.remove('active'));
4848
this.classList.add('active');
4949
const parentLi = this.closest('li');
50-
state.sort_par = parentLi.getAttribute('entity');
51-
state.sort_as_int = Boolean(parentLi.getAttribute('sort_as_int'));
50+
state.sort_par = parentLi.dataset.entity;
51+
state.sort_as_int = Boolean(parentLi.dataset.sortAsInt);
5252
state.sort_direction = this.classList.contains('up') ? 1 : -1;
5353

5454
const toggle = document.querySelector('.toolbar-sorting-toggle');

web/templates/pages/list_access_keys.php

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,15 @@
1515
<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
1616
</button>
1717
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
18-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
19-
<li entity="sort-key"><span class="name"><?= _("Access Key") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
20-
<li entity="sort-comment"><span class="name"><?= _("Comment") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
18+
<li data-entity="sort-date" data-sort-as-int="1">
19+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
20+
</li>
21+
<li data-entity="sort-key">
22+
<span class="name"><?= _("Access Key") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
23+
</li>
24+
<li data-entity="sort-comment">
25+
<span class="name"><?= _("Comment") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
26+
</li>
2127
</ul>
2228
<form x-data x-bind="BulkEdit" action="/bulk/access-key/" method="post">
2329
<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
@@ -63,8 +69,8 @@
6369
$key_date = !empty($value['DATE']) ? $value['DATE'] : '-';
6470
$key_time = !empty($value['TIME']) ? $value['TIME'] : '-';
6571
?>
66-
<div class="l-unit animate__animated animate__fadeIn" v_unit_id="<?=$key?>"
67-
v_section="key" sort-key="<?=strtolower($key)?>"
72+
<div class="l-unit animate__animated animate__fadeIn"
73+
sort-key="<?=strtolower($key)?>"
6874
sort-comment="<?=strtolower($key_comment)?>"
6975
sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>">
7076

web/templates/pages/list_cron.php

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@
2727
</b>
2828
</button>
2929
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
30-
<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Command") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
31-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
30+
<li data-entity="sort-name">
31+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Command") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
32+
</li>
33+
<li data-entity="sort-date" data-sort-as-int="1">
34+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
35+
</li>
3236
</ul>
3337
<?php if ($read_only !== "true") { ?>
3438
<form x-data x-bind="BulkEdit" action="/bulk/cron/" method="post">
@@ -95,8 +99,9 @@
9599
$spnd_confirmation = _('Are you sure you want to suspend the cron job?') ;
96100
}
97101
?>
98-
<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn" v_unit_id="<?=$key?>" v_section="cron"
99-
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>" sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
102+
<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
103+
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
104+
sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
100105
<div class="l-unit__col l-unit__col--right">
101106
<div class="clearfix l-unit__stat-col--left super-compact">
102107
<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="job[]" value="<?= $key ?>" <?= $display_mode ?>>

web/templates/pages/list_db.php

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,24 @@
4646
</b>
4747
</button>
4848
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
49-
<li entity="sort-charset"><span class="name"><?= _("Charset") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
50-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
51-
<li entity="sort-disk" sort_as_int="1"><span class="name"><?= _("Disk") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
52-
<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
53-
<li entity="sort-server"><span class="name"><?= _("Host") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
54-
<li entity="sort-user"><span class="name"><?= _("Username") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
49+
<li data-entity="sort-charset">
50+
<span class="name"><?= _("Charset") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
51+
</li>
52+
<li data-entity="sort-date" data-sort-as-int="1">
53+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
54+
</li>
55+
<li data-entity="sort-disk" data-sort-as-int="1">
56+
<span class="name"><?= _("Disk") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
57+
</li>
58+
<li data-entity="sort-name">
59+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
60+
</li>
61+
<li data-entity="sort-server">
62+
<span class="name"><?= _("Host") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
63+
</li>
64+
<li data-entity="sort-user">
65+
<span class="name"><?= _("Username") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
66+
</li>
5567
</ul>
5668
<?php if ($read_only !== "true") { ?>
5769
<form x-data x-bind="BulkEdit" action="/bulk/db/" method="post">
@@ -127,9 +139,13 @@
127139
if ($data[$key]['TYPE'] == 'pgsql') $db_admin_link = "https://".$http_host."/phppgadmin/";
128140
if (($data[$key]['TYPE'] == 'pgsql') && (!empty($_SESSION['DB_PGA_ALIAS']))) $db_admin_link = $_SESSION['DB_PGA_ALIAS'];
129141
?>
130-
<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn" v_unit_id="<?=$key?>" v_section="db"
131-
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>" sort-name="<?=$key?>" sort-disk="<?=$data[$key]['U_DISK']?>"
132-
sort-user="<?=$data[$key]['DBUSER']?>" sort-server="<?=$data[$key]['HOST']?>" sort-charset="<?=$data[$key]['CHARSET']?>">
142+
<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
143+
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
144+
sort-name="<?=$key?>"
145+
sort-disk="<?=$data[$key]['U_DISK']?>"
146+
sort-user="<?=$data[$key]['DBUSER']?>"
147+
sort-server="<?=$data[$key]['HOST']?>"
148+
sort-charset="<?=$data[$key]['CHARSET']?>">
133149
<div class="l-unit__col l-unit__col--right">
134150
<div>
135151
<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_dns.php

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,21 @@
1818
</b>
1919
</button>
2020
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
21-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
22-
<li entity="sort-expire" sort_as_int="1"><span class="name"><?= _("Expire") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
23-
<li entity="sort-ip"><span class="name"><?= _("IP Address") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
24-
<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
25-
<li entity="sort-records"><span class="name"><?= _("Records") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
21+
<li data-entity="sort-date" data-sort-as-int="1">
22+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
23+
</li>
24+
<li data-entity="sort-expire" data-sort-as-int="1">
25+
<span class="name"><?= _("Expire") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
26+
</li>
27+
<li data-entity="sort-ip">
28+
<span class="name"><?= _("IP Address") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
29+
</li>
30+
<li data-entity="sort-name">
31+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
32+
</li>
33+
<li data-entity="sort-records">
34+
<span class="name"><?= _("Records") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
35+
</li>
2636
</ul>
2737
<?php if ($read_only !== "true") { ?>
2838
<form x-data x-bind="BulkEdit" action="/bulk/dns/" method="post">
@@ -96,9 +106,12 @@
96106
}
97107
}
98108
?>
99-
<div class="l-unit <?php if ($status == 'suspended') echo ' l-unit--suspended'; ?> animate__animated animate__fadeIn" v_unit_id="<?=htmlentities($key);?>"
100-
v_section="dns" sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>" sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>" sort-name="<?=htmlentities($key);?>"
101-
sort-expire="<?=strtotime($data[$key]['EXP'])?>" sort-records="<?=(int)$data[$key]['RECORDS']?>">
109+
<div class="l-unit <?php if ($status == 'suspended') echo ' l-unit--suspended'; ?> animate__animated animate__fadeIn"
110+
sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
111+
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
112+
sort-name="<?=htmlentities($key);?>"
113+
sort-expire="<?=strtotime($data[$key]['EXP'])?>"
114+
sort-records="<?=(int)$data[$key]['RECORDS']?>">
102115
<div class="l-unit__col l-unit__col--right">
103116
<div class="clearfix l-unit__stat-col--left super-compact">
104117
<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>

web/templates/pages/list_dns_public.php

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,21 @@
1818
</b>
1919
</button>
2020
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
21-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
22-
<li entity="sort-expire" sort_as_int="1"><span class="name"><?= _("Expire") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
23-
<li entity="sort-ip"><span class="name"><?= _("IP Address") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
24-
<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
25-
<li entity="sort-records"><span class="name"><?= _("Records") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
21+
<li data-entity="sort-date" data-sort-as-int="1">
22+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
23+
</li>
24+
<li data-entity="sort-expire" data-sort-as-int="1">
25+
<span class="name"><?= _("Expire") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
26+
</li>
27+
<li data-entity="sort-ip">
28+
<span class="name"><?= _("IP Address") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
29+
</li>
30+
<li data-entity="sort-name">
31+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Name") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
32+
</li>
33+
<li data-entity="sort-records">
34+
<span class="name"><?= _("Records") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
35+
</li>
2636
</ul>
2737
<?php if ($read_only !== "true") { ?>
2838
<form x-data x-bind="BulkEdit" action="/bulk/dns/" method="post">

web/templates/pages/list_dns_rec.php

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,21 @@
2424
</b>
2525
</button>
2626
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
27-
<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
28-
<li entity="sort-value"><span class="name"><?= _("IP or Value") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
29-
<li entity="sort-record"><span class="name"><?= _("Record") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
30-
<li entity="sort-ttl" sort_as_int="1"><span class="name"><?= _("TTL") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
31-
<li entity="sort-type"><span class="name"><?= _("Type") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
27+
<li data-entity="sort-date" data-sort-as-int="1">
28+
<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
29+
</li>
30+
<li data-entity="sort-value">
31+
<span class="name"><?= _("IP or Value") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
32+
</li>
33+
<li data-entity="sort-record">
34+
<span class="name"><?= _("Record") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
35+
</li>
36+
<li data-entity="sort-ttl" data-sort-as-int="1">
37+
<span class="name"><?= _("TTL") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
38+
</li>
39+
<li data-entity="sort-type">
40+
<span class="name"><?= _("Type") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
41+
</li>
3242
</ul>
3343
<?php if ($read_only !== "true") { ?>
3444
<form x-data x-bind="BulkEdit" action="/bulk/dns/" method="post">
@@ -88,7 +98,11 @@
8898
}
8999
?>
90100
<div class="l-unit<?php if ($status == 'suspended') echo ' l-unit--suspended';?> animate__animated animate__fadeIn"
91-
v_unit_id="<?=htmlentities($key);?>" v_section="dns_rec" sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>" sort-record="<?=$data[$key]['RECORD']?>" sort-type="<?=$data[$key]['TYPE']?>" sort-ttl="<?=$data[$key]['TTL']?>" sort-value="<?=$data[$key]['VALUE']?>">
101+
sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
102+
sort-record="<?=$data[$key]['RECORD']?>"
103+
sort-type="<?=$data[$key]['TYPE']?>"
104+
sort-ttl="<?=$data[$key]['TTL']?>"
105+
sort-value="<?=$data[$key]['VALUE']?>">
92106
<div class="l-unit__col l-unit__col--right">
93107
<div class="clearfix l-unit__stat-col--left super-compact">
94108
<input id="check<?= $data[$key]["ID"] ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="record[]" value="<?= $data[$key]["ID"] ?>" <?= $display_mode ?>>

0 commit comments

Comments
 (0)