mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-31 00:19:20 +08:00
46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
export default {
|
|
template: `
|
|
<div class="w-full grid items-center group gap-2 grid-cols-[auto_1.5rem]"
|
|
:class="{'cursor-pointer': params.enableSorting}"
|
|
:data-e2e="'e2e-CO-tableHeader-' + params.column.colId "
|
|
@click="onSortRequested((activeSort == 'asc' ? 'desc' : 'asc'), $event)">
|
|
<div v-if="params.html" class="customHeaderLabel truncate" v-html="params.html"></div>
|
|
<div v-else class="customHeaderLabel truncate">{{ params.displayName }}</div>
|
|
<div v-if="activeSort == 'asc'" class="customSortDownLabel text-sn-black" data-e2e="e2e-BT-tableHeader-sortedAsc">
|
|
<i class="sn-icon sn-icon-sort-up"></i>
|
|
</div>
|
|
<div v-if="activeSort == 'desc'" class="customSortUpLabel text-sn-black" data-e2e="e2e-BT-tableHeader-sortedDesc">
|
|
<i class="sn-icon sn-icon-sort-down"></i>
|
|
</div>
|
|
<div v-if="activeSort == null && params.enableSorting" class="text-sn-black tw-hidden group-hover:block" data-e2e="e2e-BT-tableHeader-sortUpDown">
|
|
<i class="sn-icon sn-icon-sort"></i>
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
activeSort: null
|
|
};
|
|
},
|
|
beforeMount() {},
|
|
mounted() {
|
|
this.params.column.addEventListener('sortChanged', this.onSortChanged);
|
|
this.onSortChanged();
|
|
},
|
|
methods: {
|
|
onSortChanged() {
|
|
this.activeSort = null;
|
|
if (this.params.column.isSortAscending()) {
|
|
this.activeSort = 'asc';
|
|
} else if (this.params.column.isSortDescending()) {
|
|
this.activeSort = 'desc';
|
|
}
|
|
},
|
|
|
|
onSortRequested(order, event) {
|
|
if (!this.params.enableSorting) return;
|
|
|
|
this.params.setSort(order, event.shiftKey);
|
|
}
|
|
}
|
|
};
|