antares/src/renderer/components/WorkspacePropsTable.vue

212 lines
6.0 KiB
Vue
Raw Normal View History

2020-10-24 14:47:35 +02:00
<template>
<div
ref="tableWrapper"
class="vscroll"
:style="{'height': resultsSize+'px'}"
>
<TableContext
v-if="isContext"
:context-event="contextEvent"
2020-11-13 16:19:59 +01:00
:selected-field="selectedField"
@delete-selected="removeField"
2020-10-24 14:47:35 +02:00
@close-context="isContext = false"
/>
<div ref="propTable" class="table table-hover">
<div class="thead">
<div class="tr">
<div class="th">
<div class="text-right">
{{ $t('word.order') }}
</div>
</div>
<div class="th">
<div class="table-column-title">
{{ $tc('word.key', 2) }}
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.name') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.type') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.length') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.unsigned') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('message.allowNull') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('message.zeroFill') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.default') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.comment') }}
</div>
</div>
</div>
<div class="th">
<div class="column-resizable">
<div class="table-column-title">
{{ $t('word.collation') }}
</div>
</div>
</div>
</div>
</div>
2020-11-13 12:39:40 +01:00
<draggable
ref="resultTable"
:list="fields"
class="tbody"
handle=".row-draggable"
>
<TableRow
v-for="row in fields"
:key="row._id"
:row="row"
:data-types="dataTypes"
2020-11-13 16:19:59 +01:00
@contextmenu="contextMenu"
2020-11-13 12:39:40 +01:00
/>
</draggable>
2020-10-24 14:47:35 +02:00
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
2020-11-13 12:39:40 +01:00
import draggable from 'vuedraggable';
import TableRow from '@/components/WorkspacePropsTableRow';
2020-11-13 16:19:59 +01:00
import TableContext from '@/components/WorkspacePropsTableContext';
2020-10-24 14:47:35 +02:00
export default {
name: 'WorkspacePropsTable',
components: {
2020-11-13 12:39:40 +01:00
TableRow,
2020-11-13 16:19:59 +01:00
TableContext,
2020-11-13 12:39:40 +01:00
draggable
2020-10-24 14:47:35 +02:00
},
props: {
2020-11-13 12:39:40 +01:00
fields: Array,
2020-10-24 14:47:35 +02:00
tabUid: [String, Number],
connUid: String,
table: String,
schema: String,
mode: String
},
data () {
return {
resultsSize: 1000,
localResults: [],
isContext: false,
contextEvent: null,
2020-11-13 16:19:59 +01:00
selectedField: null,
2020-10-24 14:47:35 +02:00
scrollElement: null
};
},
computed: {
...mapGetters({
getWorkspaceTab: 'workspaces/getWorkspaceTab',
getWorkspace: 'workspaces/getWorkspace'
}),
workspaceSchema () {
return this.getWorkspace(this.connUid).breadcrumbs.schema;
},
2020-11-13 12:39:40 +01:00
dataTypes () {
return this.getWorkspace(this.connUid).dataTypes;
},
2020-10-24 14:47:35 +02:00
primaryField () {
2020-11-13 12:39:40 +01:00
return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
2020-10-24 14:47:35 +02:00
},
tabProperties () {
return this.getWorkspaceTab(this.tabUid);
}
},
updated () {
if (this.$refs.propTable)
this.refreshScroller();
if (this.$refs.tableWrapper)
this.scrollElement = this.$refs.tableWrapper;
},
mounted () {
window.addEventListener('resize', this.resizeResults);
},
destroyed () {
window.removeEventListener('resize', this.resizeResults);
},
methods: {
...mapActions({
addNotification: 'notifications/addNotification'
}),
resizeResults () {
if (this.$refs.resultTable) {
const el = this.$refs.tableWrapper;
if (el) {
const footer = document.getElementById('footer');
const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
this.resultsSize = size;
}
// this.$refs.resultTable.updateWindow();
}
},
refreshScroller () {
this.resizeResults();
},
2020-11-13 16:19:59 +01:00
contextMenu (event, uid) {
this.selectedField = uid;
2020-10-24 14:47:35 +02:00
this.contextEvent = event;
this.isContext = true;
2020-11-13 16:19:59 +01:00
},
removeField () {
this.$emit('remove-field', this.selectedField);
2020-10-24 14:47:35 +02:00
}
}
};
</script>
<style lang="scss" scoped>
.column-resizable {
&:hover,
&:active {
resize: horizontal;
overflow: hidden;
}
}
</style>