fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

Results table improvements

Browse Source
This commit is contained in:
Fabio
2020-07-24 13:26:56 +02:00
parent fdf5bef5ad
commit 60132c94a1
16 changed files with 266 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/components/Workspace.vue
View File

@ -152,9 +152,14 @@ export default {
border-left: none;
border-bottom-width: 2px;
border-color: $bg-color-light;
padding: .1rem .4rem;
padding: 0;
font-weight: 700;
font-size: .7rem;
> div {
padding: .1rem .4rem;
min-width: -webkit-fill-available;
}
}
.td{

4
src/renderer/components/WorkspaceQueryTab.vue
View File

@ -43,7 +43,7 @@
<script>
import Connection from '@/ipc-api/Connection';
import Structure from '@/ipc-api/Structure';
import Tables from '@/ipc-api/Tables';
import QueryEditor from '@/components/QueryEditor';
import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
import { mapGetters, mapActions } from 'vuex';
@ -132,7 +132,7 @@ export default {
table: this.table
};
const { status, response } = await Structure.getTableColumns(params);
const { status, response } = await Tables.getTableColumns(params);
if (status === 'success')
this.fields = response.rows;
else

75
src/renderer/components/WorkspaceQueryTable.vue
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;

4
src/renderer/components/WorkspaceQueryTableCell.vue
View File

@ -48,7 +48,7 @@ export default {
filters: {
cutText (val) {
if (typeof val !== 'string') return val;
return val.length > 50 ? `${val.substring(0, 50)}[...]` : val;
return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
},
typeFormat (val, type, precision) {
if (!val) return val;
@ -167,14 +167,12 @@ export default {
border: none;
line-height: 1;
width: 100%;
max-width: 200px;
}
.cell-content{
display: block;
min-height: .8rem;
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
}

10
src/renderer/components/WorkspaceTableTab.vue
View File

@ -40,7 +40,7 @@
</template>
<script>
import Structure from '@/ipc-api/Structure';
import Tables from '@/ipc-api/Tables';
import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
import { mapGetters, mapActions } from 'vuex';
import tableTabs from '@/mixins/tableTabs';
@ -85,13 +85,13 @@ export default {
}
},
watch: {
table: function () {
table () {
if (this.isSelected) {
this.getTableData();
this.lastTable = this.table;
}
},
isSelected: function (val) {
isSelected (val) {
if (val && this.lastTable !== this.table) {
this.getTableData();
this.lastTable = this.table;
@ -117,7 +117,7 @@ export default {
};
try {
const { status, response } = await Structure.getTableColumns(params);
const { status, response } = await Tables.getTableColumns(params);
if (status === 'success')
this.fields = response.rows;
else
@ -128,7 +128,7 @@ export default {
}
try {
const { status, response } = await Structure.getTableData(params);
const { status, response } = await Tables.getTableData(params);
if (status === 'success')
this.results = response;