vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 - DataTable & TreeTable sort templating refactor

pull/3868/head
Tuğçe Küçükoğlu 2023-04-14 16:30:18 +03:00
parent 83b68c3ef8
commit a230948d1b
2 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/lib/datatable/HeaderCell.vue
View File

@ -20,7 +20,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')">
<component :is="(column.children && column.children.sorticon) || findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState[0].sorted" :sortOrder="sortState[0].sortOrder" class="p-sortable-column-icon" />
</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" :headerCheckboxIconTemplate="headerCheckboxIconTemplate" />
@ -280,7 +280,7 @@ export default {
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
},
sortableColumnIcon() {
sortState() {
let sorted = false;
let sortOrder = null;
@ -296,29 +296,26 @@ export default {
}
}
return [
{
SortAltIcon: !sorted,
SortAmountUpAltIcon: sorted && sortOrder > 0,
SortAmountDownIcon: sorted && sortOrder < 0
},
{
sorted,
sortOrder
}
];
return {
sorted,
sortOrder
};
},
findSortIcon() {
const sortIcon = this.sortableColumnIcon[0];
sortableColumnIcon() {
const { sorted, sortOrder } = this.sortState;
return Object.keys(sortIcon).find((key) => sortIcon[key] === true);
if (!sorted) return SortAltIcon;
else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
else if (sorted && sortOrder < 0) return SortAmountDownIcon;
return null;
},
ariaSort() {
if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon[0];
const { sorted, sortOrder } = this.sortState;
if (sortIcon['SortAmountDownIcon']) return 'descending';
else if (sortIcon['SortAmountUpAltIcon']) return 'ascending';
if (sorted && sortOrder < 0) return 'descending';
else if (sorted && sortOrder > 0) return 'ascending';
else return 'none';
} else {
return null;

25
components/lib/treetable/HeaderCell.vue
View File

@ -4,7 +4,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')">
<component :is="(column.children && column.children.sorticon) || findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState[0].sorted" :sortOrder="sortState[0].sortOrder" class="p-sortable-column-icon" />
</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
</th>
@ -151,7 +151,7 @@ export default {
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
},
sortableColumnIcon() {
sortState() {
let sorted = false;
let sortOrder = null;
@ -168,28 +168,27 @@ export default {
}
return [
{
SortAltIcon: !sorted,
SortAmountUpAltIcon: sorted && sortOrder > 0,
SortAmountDownIcon: sorted && sortOrder < 0
},
{
sorted,
sortOrder
}
];
},
findSortIcon() {
const sortIcon = this.sortableColumnIcon[0];
sortableColumnIcon() {
const { sorted, sortOrder } = this.sortState;
return Object.keys(sortIcon).find((key) => sortIcon[key] === true);
if (!sorted) return SortAltIcon;
else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
else if (sorted && sortOrder < 0) return SortAmountDownIcon;
return null;
},
ariaSort() {
if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon[0];
const { sorted, sortOrder } = this.sortState;
if (sortIcon['SortAmountDownIcon']) return 'descending';
else if (sortIcon['SortAmountUpAltIcon']) return 'ascending';
if (sorted && sortOrder < 0) return 'descending';
else if (sorted && sortOrder > 0) return 'ascending';
else return 'none';
} else {
return null;