1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

Results table improvements

This commit is contained in:
2020-07-24 13:26:56 +02:00
parent fdf5bef5ad
commit 60132c94a1
16 changed files with 266 additions and 213 deletions

View File

@ -10,7 +10,7 @@
<BaseVirtualScroll
v-if="results.rows"
ref="resultTable"
:items="localResults"
:items="sortedResults"
:item-height="25"
class="vscroll"
:style="{'height': resultsSize+'px'}"
@ -22,16 +22,19 @@
<div
v-for="field in fields"
:key="field.name"
class="th"
class="th c-hand"
>
<div class="table-column-title">
<i
v-if="field.key"
class="material-icons column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
>vpn_key</i>
<span>{{ field.name }}</span>
<div ref="columnResize" class="column-resizable">
<div class="table-column-title" @click="sort(field.name)">
<i
v-if="field.key"
class="material-icons column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
>vpn_key</i>
<span>{{ field.name }}</span>
<i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
</div>
</div>
</div>
</div>
@ -87,16 +90,34 @@ export default {
isContext: false,
contextEvent: null,
selectedCell: null,
selectedRows: []
selectedRows: [],
currentSort: '',
currentSortDir: 'asc'
};
},
computed: {
primaryField () {
return this.fields.filter(field => field.key === 'pri')[0] || false;
},
sortedResults () {
if (this.currentSort) {
return [...this.localResults].sort((a, b) => {
let modifier = 1;
const valA = typeof a[this.currentSort] === 'string' ? a[this.currentSort].toLowerCase() : a[this.currentSort];
const valB = typeof b[this.currentSort] === 'string' ? b[this.currentSort].toLowerCase() : b[this.currentSort];
if (this.currentSortDir === 'desc') modifier = -1;
if (valA < valB) return -1 * modifier;
if (valA > valB) return 1 * modifier;
return 0;
});
}
else
return this.localResults;
}
},
watch: {
results () {
this.resetSort();
this.localResults = this.results.rows ? this.results.rows.map(item => {
return { ...item, _id: uidGen() };
}) : [];
@ -104,7 +125,7 @@ export default {
},
updated () {
if (this.$refs.resultTable)
this.resizeResults();
this.refreshScroller();
},
mounted () {
window.addEventListener('resize', this.resizeResults);
@ -225,6 +246,22 @@ export default {
this.selectedRows = [cell.id];
this.contextEvent = event;
this.isContext = true;
},
sort (field) {
if (field === this.currentSort) {
if (this.currentSortDir === 'asc')
this.currentSortDir = 'desc';
else
this.resetSort();
}
else {
this.currentSortDir = 'asc';
this.currentSort = field;
}
},
resetSort () {
this.currentSort = '';
this.currentSortDir = 'asc';
}
}
};
@ -237,11 +274,25 @@ export default {
overflow-anchor: none;
}
.column-resizable{
&:hover,
&:active{
resize: horizontal;
overflow: hidden;
}
}
.table-column-title{
display: flex;
align-items: center;
}
.sort-icon{
font-size: .7rem;
line-height: 1;
margin-left: .2rem;
}
.column-key{
transform: rotate(90deg);
font-size: .7rem;