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" /> <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('header')" class="p-column-title">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')"> <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>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</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" /> <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]; return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
}, },
sortableColumnIcon() { sortState() {
let sorted = false; let sorted = false;
let sortOrder = null; let sortOrder = null;
@ -296,29 +296,26 @@ export default {
} }
} }
return [ return {
{ sorted,
SortAltIcon: !sorted, sortOrder
SortAmountUpAltIcon: sorted && sortOrder > 0, };
SortAmountDownIcon: sorted && sortOrder < 0
},
{
sorted,
sortOrder
}
];
}, },
findSortIcon() { sortableColumnIcon() {
const sortIcon = this.sortableColumnIcon[0]; 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() { ariaSort() {
if (this.columnProp('sortable')) { if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon[0]; const { sorted, sortOrder } = this.sortState;
if (sortIcon['SortAmountDownIcon']) return 'descending'; if (sorted && sortOrder < 0) return 'descending';
else if (sortIcon['SortAmountUpAltIcon']) return 'ascending'; else if (sorted && sortOrder > 0) return 'ascending';
else return 'none'; else return 'none';
} else { } else {
return null; 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" /> <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('header')" class="p-column-title">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')"> <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>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span> <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
</th> </th>
@ -151,7 +151,7 @@ export default {
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle]; return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
}, },
sortableColumnIcon() { sortState() {
let sorted = false; let sorted = false;
let sortOrder = null; let sortOrder = null;
@ -168,28 +168,27 @@ export default {
} }
return [ return [
{
SortAltIcon: !sorted,
SortAmountUpAltIcon: sorted && sortOrder > 0,
SortAmountDownIcon: sorted && sortOrder < 0
},
{ {
sorted, sorted,
sortOrder sortOrder
} }
]; ];
}, },
findSortIcon() { sortableColumnIcon() {
const sortIcon = this.sortableColumnIcon[0]; 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() { ariaSort() {
if (this.columnProp('sortable')) { if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon[0]; const { sorted, sortOrder } = this.sortState;
if (sortIcon['SortAmountDownIcon']) return 'descending'; if (sorted && sortOrder < 0) return 'descending';
else if (sortIcon['SortAmountUpAltIcon']) return 'ascending'; else if (sorted && sortOrder > 0) return 'ascending';
else return 'none'; else return 'none';
} else { } else {
return null; return null;