mirror of https://github.com/Fabio286/antares.git
Merge branch 'master' of https://github.com/Fabio286/antares
This commit is contained in:
commit
3ad190b18c
|
|
@ -1,263 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
ref="tableWrapper"
|
|
||||||
class="vscroll"
|
|
||||||
:style="{'height': resultsSize+'px'}"
|
|
||||||
>
|
|
||||||
<TableContext
|
|
||||||
v-if="isContext"
|
|
||||||
:context-event="contextEvent"
|
|
||||||
:selected-field="selectedField"
|
|
||||||
:index-types="indexTypes"
|
|
||||||
:indexes="indexes"
|
|
||||||
@delete-selected="removeField"
|
|
||||||
@duplicate-selected="duplicateField"
|
|
||||||
@close-context="isContext = false"
|
|
||||||
@add-new-index="$emit('add-new-index', $event)"
|
|
||||||
@add-to-index="$emit('add-to-index', $event)"
|
|
||||||
/>
|
|
||||||
<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 min-100">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.name') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="th">
|
|
||||||
<div class="column-resizable min-100">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.type') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.tableArray" class="th">
|
|
||||||
<div class="column-resizable">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.array') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="th">
|
|
||||||
<div class="column-resizable">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.length') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.unsigned" class="th">
|
|
||||||
<div class="column-resizable">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.unsigned') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.nullable" class="th">
|
|
||||||
<div class="column-resizable">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('message.allowNull') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.zerofill" 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 v-if="customizations.comment" class="th">
|
|
||||||
<div class="column-resizable">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.comment') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.collation" class="th">
|
|
||||||
<div class="column-resizable min-100">
|
|
||||||
<div class="table-column-title">
|
|
||||||
{{ $t('word.collation') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Draggable
|
|
||||||
ref="resultTable"
|
|
||||||
:list="fields"
|
|
||||||
class="tbody"
|
|
||||||
handle=".row-draggable"
|
|
||||||
>
|
|
||||||
<TableRow
|
|
||||||
v-for="row in fields"
|
|
||||||
:key="row._id"
|
|
||||||
:row="row"
|
|
||||||
:indexes="getIndexes(row.name)"
|
|
||||||
:foreigns="getForeigns(row.name)"
|
|
||||||
:data-types="dataTypes"
|
|
||||||
:customizations="customizations"
|
|
||||||
@contextmenu="contextMenu"
|
|
||||||
@rename-field="$emit('rename-field', $event)"
|
|
||||||
/>
|
|
||||||
</Draggable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions, mapGetters } from 'vuex';
|
|
||||||
import Draggable from 'vuedraggable';
|
|
||||||
import TableRow from '@/components/WorkspaceTabPropsTableRow';
|
|
||||||
import TableContext from '@/components/WorkspaceTabPropsTableContext';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'WorkspaceTabPropsTableFields',
|
|
||||||
components: {
|
|
||||||
TableRow,
|
|
||||||
TableContext,
|
|
||||||
Draggable
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
fields: Array,
|
|
||||||
indexes: Array,
|
|
||||||
foreigns: Array,
|
|
||||||
indexTypes: Array,
|
|
||||||
tabUid: [String, Number],
|
|
||||||
connUid: String,
|
|
||||||
table: String,
|
|
||||||
schema: String,
|
|
||||||
mode: String
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
resultsSize: 1000,
|
|
||||||
isContext: false,
|
|
||||||
contextEvent: null,
|
|
||||||
selectedField: null,
|
|
||||||
scrollElement: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
getWorkspaceTab: 'workspaces/getWorkspaceTab',
|
|
||||||
getWorkspace: 'workspaces/getWorkspace'
|
|
||||||
}),
|
|
||||||
workspaceSchema () {
|
|
||||||
return this.getWorkspace(this.connUid).breadcrumbs.schema;
|
|
||||||
},
|
|
||||||
customizations () {
|
|
||||||
return this.getWorkspace(this.connUid).customizations;
|
|
||||||
},
|
|
||||||
dataTypes () {
|
|
||||||
return this.getWorkspace(this.connUid).dataTypes;
|
|
||||||
},
|
|
||||||
primaryField () {
|
|
||||||
return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
|
|
||||||
},
|
|
||||||
tabProperties () {
|
|
||||||
return this.getWorkspaceTab(this.tabUid);
|
|
||||||
},
|
|
||||||
fieldsLength () {
|
|
||||||
return this.fields.length;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
fieldsLength () {
|
|
||||||
this.refreshScroller();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
refreshScroller () {
|
|
||||||
this.resizeResults();
|
|
||||||
},
|
|
||||||
contextMenu (event, uid) {
|
|
||||||
this.selectedField = this.fields.find(field => field._id === uid);
|
|
||||||
this.contextEvent = event;
|
|
||||||
this.isContext = true;
|
|
||||||
},
|
|
||||||
duplicateField () {
|
|
||||||
this.$emit('duplicate-field', this.selectedField._id);
|
|
||||||
},
|
|
||||||
removeField () {
|
|
||||||
this.$emit('remove-field', this.selectedField._id);
|
|
||||||
},
|
|
||||||
getIndexes (field) {
|
|
||||||
return this.indexes.reduce((acc, curr) => {
|
|
||||||
acc.push(...curr.fields.map(f => ({ name: f, type: curr.type })));
|
|
||||||
return acc;
|
|
||||||
}, []).filter(f => f.name === field);
|
|
||||||
},
|
|
||||||
getForeigns (field) {
|
|
||||||
return this.foreigns.reduce((acc, curr) => {
|
|
||||||
if (curr.field === field)
|
|
||||||
acc.push(`${curr.refTable}.${curr.refField}`);
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.column-resizable {
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
resize: horizontal;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vscroll {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-100 {
|
|
||||||
min-width: 100px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue