antares/src/renderer/components/WorkspaceQueryTable.vue

212 lines
5.6 KiB
Vue
Raw Normal View History

2020-06-10 19:29:10 +02:00
<template>
<div>
<TableContext
v-if="isContext"
:context-event="contextEvent"
@closeContext="isContext = false"
/>
<BaseVirtualScroll
v-if="results.rows"
ref="resultTable"
:items="localResults"
:item-height="25"
class="vscroll"
:style="{'height': resultsSize+'px'}"
>
<template slot-scope="{ items }">
<div class="table table-hover">
<div class="thead">
<div class="tr">
<div
v-for="field in fields"
:key="field.name"
class="th"
>
<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>
2020-06-16 18:01:22 +02:00
</div>
2020-06-11 23:34:38 +02:00
</div>
</div>
<div class="tbody">
<div
v-for="row in items"
:key="row._id"
class="tr"
>
<WorkspaceQueryTableCell
v-for="(col, cKey) in row"
:key="cKey"
:content="col"
:field="cKey"
:precision="fieldPrecision(cKey)"
:type="fieldType(cKey)"
@updateField="updateField($event, row[primaryField.name])"
@cellContext="contextMenu($event)"
/>
</div>
2020-06-11 23:34:38 +02:00
</div>
2020-06-10 19:29:10 +02:00
</div>
</template>
</BaseVirtualScroll>
</div>
2020-06-10 19:29:10 +02:00
</template>
<script>
2020-06-26 18:14:16 +02:00
import { uidGen } from 'common/libs/utilities';
2020-06-11 23:34:38 +02:00
import BaseVirtualScroll from '@/components/BaseVirtualScroll';
2020-06-26 18:14:16 +02:00
import WorkspaceQueryTableCell from '@/components/WorkspaceQueryTableCell';
import TableContext from '@/components/WorkspaceQueryTableContext';
2020-06-26 18:14:16 +02:00
import { mapActions } from 'vuex';
2020-06-11 23:34:38 +02:00
2020-06-10 19:29:10 +02:00
export default {
name: 'WorkspaceQueryTable',
2020-06-11 23:34:38 +02:00
components: {
2020-06-26 18:14:16 +02:00
BaseVirtualScroll,
WorkspaceQueryTableCell,
TableContext
2020-06-18 19:01:09 +02:00
},
2020-06-10 19:29:10 +02:00
props: {
2020-06-16 18:01:22 +02:00
results: Object,
fields: Array
2020-06-10 19:29:10 +02:00
},
2020-06-11 23:34:38 +02:00
data () {
return {
2020-06-16 18:01:22 +02:00
resultsSize: 1000,
localResults: [],
isContext: false,
contextEvent: null
2020-06-11 23:34:38 +02:00
};
},
2020-06-26 18:14:16 +02:00
computed: {
primaryField () {
return this.fields.filter(field => field.key === 'pri')[0] || false;
}
},
2020-06-16 18:01:22 +02:00
watch: {
results () {
this.localResults = this.results.rows ? this.results.rows.map(item => {
2020-06-12 18:10:45 +02:00
return { ...item, _id: uidGen() };
}) : [];
2020-06-11 23:34:38 +02:00
}
},
2020-06-12 18:10:45 +02:00
updated () {
if (this.$refs.resultTable)
this.resizeResults();
2020-06-11 23:34:38 +02:00
},
mounted () {
window.addEventListener('resize', this.resizeResults);
},
destroyed () {
window.removeEventListener('resize', this.resizeResults);
},
2020-06-10 19:29:10 +02:00
methods: {
2020-06-26 18:14:16 +02:00
...mapActions({
addNotification: 'notifications/addNotification'
}),
2020-06-18 19:01:09 +02:00
fieldType (cKey) {
let type = 'unknown';
const field = this.fields.filter(field => field.name === cKey)[0];
if (field)
type = field.type;
2020-06-10 19:29:10 +02:00
2020-06-18 19:01:09 +02:00
return type;
},
2020-07-05 16:06:56 +02:00
fieldPrecision (cKey) {
let length = 0;
const field = this.fields.filter(field => field.name === cKey)[0];
if (field)
length = field.precision;
return length;
},
2020-06-16 18:01:22 +02:00
keyName (key) {
switch (key) {
case 'pri':
return 'PRIMARY';
case 'uni':
return 'UNIQUE';
case 'mul':
return 'INDEX';
default:
return 'UNKNOWN ' + key;
}
},
2020-06-11 23:34:38 +02:00
resizeResults (e) {
2020-06-12 18:10:45 +02:00
if (this.$refs.resultTable) {
const el = this.$refs.resultTable.$el;
const footer = document.getElementById('footer');
2020-06-11 23:34:38 +02:00
2020-06-12 18:10:45 +02:00
if (el) {
const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
this.resultsSize = size;
}
2020-06-11 23:34:38 +02:00
}
2020-06-26 18:14:16 +02:00
},
2020-06-27 15:14:08 +02:00
updateField (event, id) {
2020-06-26 18:14:16 +02:00
if (!this.primaryField)
this.addNotification({ status: 'warning', message: this.$t('message.unableEditFieldWithoutPrimary') });
2020-06-27 15:14:08 +02:00
else {
const params = {
primary: this.primaryField.name,
id,
...event
};
this.$emit('updateField', params);
}
2020-06-28 15:31:16 +02:00
},
applyUpdate (params) {
const { primary, id, field, content } = params;
this.localResults = this.localResults.map(row => {
if (row[primary] === id)
row[field] = content;
return row;
});
},
contextMenu (event) {
this.contextEvent = event;
this.isContext = true;
2020-06-10 19:29:10 +02:00
}
}
};
</script>
2020-06-16 18:01:22 +02:00
<style lang="scss">
2020-06-11 23:34:38 +02:00
.vscroll {
height: 1000px;
overflow: auto;
overflow-anchor: none;
}
2020-06-16 18:01:22 +02:00
.table-column-title{
display: flex;
align-items: center;
}
.column-key{
transform: rotate(90deg);
font-size: .7rem;
line-height: 1.5;
margin-right: .2rem;
&.key-pri{
color: goldenrod;
}
&.key-uni{
color: deepskyblue;
}
&.key-mul{
color: palegreen;
}
}
2020-06-10 19:29:10 +02:00
</style>