gandc/x-ui
1
0
Fork 0
mirror of https://github.com/alireza0/x-ui.git synced 2026-03-14 05:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add sorting to client and traffic columns, fix typo (#1005)

Browse Source 
* Enable sorting for client and traffic columns in innerColumns and client column in innerMobileColumns.
Fix typo: mobileColums -> mobileColumns.

* Refactored sorter functions in inbounds.html

* Fix sorting issue in inbounds.html

* Refactor email sorting function in inbounds.html

* Add traffic sorting to inbounds table

* small changes

* Add hover effect to table column sorters

* Update background color in dark mode

* Fix hover background color in dark mode

* Remove unnecessary CSS styles for table column sorters

---------

Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
Mohammadi, Erfan
2024-02-26 18:31:34 +03:30
committed by Alireza Ahmadi
parent 1025eeebf9
commit 50d4e67e59
2 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/assets/css/custom.css
View File

@@ -683,7 +683,8 @@ style attribute {
border-color: #9ea2a8;
}
.dark .ant-table-row-expand-icon:hover {
.dark .ant-table-row-expand-icon:hover,
.dark .ant-table-thead>tr>th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
color: #0e49b5;
background-color: #fff0;
border-color: #0e49b5;
@@ -1080,4 +1081,4 @@ li.ant-select-dropdown-menu-item:empty:after {
.ant-input-group-addon:not(:first-child):not(:last-child), .ant-input-group-wrap:not(:first-child):not(:last-child), .ant-input-group>.ant-input:not(:first-child):not(:last-child) {
border-radius: 0rem 1rem 1rem 0rem;
}
}

82
web/html/xui/inbounds.html
View File

@@ -185,7 +185,7 @@
</a-radio-group>
</div>
<a-back-top></a-back-top>
<a-table :columns="isMobile ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
<a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
:data-source="searchedInbounds"
:scroll="isMobile ? {} : { x: 1000 }"
:pagination=pagination(searchedInbounds)
@@ -502,7 +502,7 @@
scopedSlots: { customRender: 'expiryTime' },
}];
const mobileColums = [{
const mobileColumns = [{
title: "ID",
align: 'right',
dataIndex: "id",
@@ -526,19 +526,73 @@
}];
const innerColumns = [
{ title: '{{ i18n "pages.inbounds.operate" }}', width: 50, scopedSlots: { customRender: 'actions' } },
{ title: '{{ i18n "pages.inbounds.enable" }}', width: 20, scopedSlots: { customRender: 'enable' } },
{ title: '{{ i18n "online" }}', width: 20, scopedSlots: { customRender: 'online' } },
{ title: '{{ i18n "pages.inbounds.client" }}', width: 70, scopedSlots: { customRender: 'client' } },
{ title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
{ title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
];
{
title: '{{ i18n "pages.inbounds.operate" }}',
width: 50,
scopedSlots: { customRender: 'actions' },
},
{
title: '{{ i18n "pages.inbounds.enable" }}',
width: 20,
scopedSlots: { customRender: 'enable' },
},
{
title: '{{ i18n "online" }}',
width: 20,
scopedSlots: { customRender: 'online' },
},
{
title: '{{ i18n "pages.inbounds.client" }}',
dataIndex: 'email',
width: 70,
scopedSlots: { customRender: 'client' },
sorter: (a, b) => {
const clientA = a.email || '';
const clientB = b.email || '';
return clientA.localeCompare(clientB, undefined, { sensitivity: 'base' });
},
},
{
title: '{{ i18n "pages.inbounds.traffic" }}',
dataIndex: 'traffic',
width: 80,
align: 'center',
scopedSlots: { customRender: 'traffic' },
},
{
title: '{{ i18n "pages.inbounds.expireDate" }}',
width: 70,
align: 'center',
scopedSlots: { customRender: 'expiryTime' },
},
];
const innerMobileColumns = [
{ title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
{ title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
{ title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
];
const innerMobileColumns = [
{
title: '{{ i18n "pages.inbounds.operate" }}',
width: 10,
align: 'center',
scopedSlots: { customRender: 'actionMenu' },
},
{
title: '{{ i18n "pages.inbounds.client" }}',
dataIndex: 'email',
width: 90,
align: 'left',
scopedSlots: { customRender: 'client' },
sorter: (a, b) => {
const clientA = a.email || '';
const clientB = b.email || '';
return clientA.localeCompare(clientB, undefined, { sensitivity: 'base' });
},
},
{
title: '{{ i18n "pages.inbounds.info" }}',
width: 10,
align: 'center',
scopedSlots: { customRender: 'info' },
},
];
const app = new Vue({
delimiters: ['[[', ']]'],