mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
refactor: ts and composition api on missing components
This commit is contained in:
@ -13,89 +13,89 @@
|
||||
@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)"
|
||||
@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') }}
|
||||
{{ t('word.order') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="th">
|
||||
<div class="table-column-title">
|
||||
{{ $tc('word.key', 2) }}
|
||||
{{ t('word.key', 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="th">
|
||||
<div class="column-resizable min-100">
|
||||
<div class="table-column-title">
|
||||
{{ $t('word.name') }}
|
||||
{{ t('word.name') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="th">
|
||||
<div class="column-resizable min-100">
|
||||
<div class="table-column-title">
|
||||
{{ $t('word.type') }}
|
||||
{{ 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') }}
|
||||
{{ t('word.array') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="th">
|
||||
<div class="column-resizable">
|
||||
<div class="table-column-title">
|
||||
{{ $t('word.length') }}
|
||||
{{ 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') }}
|
||||
{{ 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') }}
|
||||
{{ 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') }}
|
||||
{{ t('message.zeroFill') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="th">
|
||||
<div class="column-resizable">
|
||||
<div class="table-column-title">
|
||||
{{ $t('word.default') }}
|
||||
{{ 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') }}
|
||||
{{ 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') }}
|
||||
{{ t('word.collation') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -116,7 +116,7 @@
|
||||
:data-types="dataTypes"
|
||||
:customizations="customizations"
|
||||
@contextmenu="contextMenu"
|
||||
@rename-field="$emit('rename-field', $event)"
|
||||
@rename-field="emit('rename-field', $event)"
|
||||
/>
|
||||
</template>
|
||||
</Draggable>
|
||||
@ -124,135 +124,115 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>// TODO: expose tableWrapper
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onMounted, onUnmounted, onUpdated, Prop, ref, Ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import Draggable from 'vuedraggable';
|
||||
import TableRow from '@/components/WorkspaceTabPropsTableRow';
|
||||
import TableContext from '@/components/WorkspaceTabPropsTableContext';
|
||||
import * as Draggable from 'vuedraggable';
|
||||
import TableRow from '@/components/WorkspaceTabPropsTableRow.vue';
|
||||
import TableContext from '@/components/WorkspaceTabPropsTableContext.vue';
|
||||
import { TableField, TableForeign, TableIndex } from 'common/interfaces/antares';
|
||||
|
||||
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
|
||||
},
|
||||
emits: ['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field'],
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
fields: Array as Prop<TableField[]>,
|
||||
indexes: Array as Prop<TableIndex[]>,
|
||||
foreigns: Array as Prop<TableForeign[]>,
|
||||
indexTypes: Array as Prop<string[]>,
|
||||
tabUid: [String, Number],
|
||||
connUid: String,
|
||||
table: String,
|
||||
schema: String,
|
||||
mode: String
|
||||
});
|
||||
|
||||
const { getWorkspace } = workspacesStore;
|
||||
const emit = defineEmits(['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field']);
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
resultsSize: 1000,
|
||||
isContext: false,
|
||||
contextEvent: null,
|
||||
selectedField: null,
|
||||
scrollElement: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
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();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
if (this.$refs.tableWrapper)
|
||||
this.scrollElement = this.$refs.tableWrapper;
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('resize', this.resizeResults);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeResults);
|
||||
},
|
||||
methods: {
|
||||
resizeResults () {
|
||||
if (this.$refs.resultTable) {
|
||||
const el = this.$refs.tableWrapper;
|
||||
const { getWorkspace } = workspacesStore;
|
||||
|
||||
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._antares_id === uid);
|
||||
this.contextEvent = event;
|
||||
this.isContext = true;
|
||||
},
|
||||
duplicateField () {
|
||||
this.$emit('duplicate-field', this.selectedField._antares_id);
|
||||
},
|
||||
removeField () {
|
||||
this.$emit('remove-field', this.selectedField._antares_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;
|
||||
}, []);
|
||||
const tableWrapper: Ref<HTMLDivElement> = ref(null);
|
||||
const propTable: Ref<HTMLDivElement> = ref(null);
|
||||
const resultTable: Ref<Component> = ref(null);
|
||||
const resultsSize = ref(1000);
|
||||
const isContext = ref(false);
|
||||
const contextEvent = ref(null);
|
||||
const selectedField = ref(null);
|
||||
const scrollElement = ref(null);
|
||||
|
||||
const customizations = computed(() => getWorkspace(props.connUid).customizations);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const dataTypes = computed(() => getWorkspace(props.connUid).dataTypes) as any;
|
||||
const fieldsLength = computed(() => props.fields.length);
|
||||
|
||||
const resizeResults = () => {
|
||||
if (resultTable.value) {
|
||||
const el = tableWrapper.value;
|
||||
|
||||
if (el) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
resultsSize.value = size;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const refreshScroller = () => {
|
||||
resizeResults();
|
||||
};
|
||||
|
||||
const contextMenu = (event: MouseEvent, uid: string) => {
|
||||
selectedField.value = props.fields.find(field => field._antares_id === uid);
|
||||
contextEvent.value = event;
|
||||
isContext.value = true;
|
||||
};
|
||||
|
||||
const duplicateField = () => {
|
||||
emit('duplicate-field', selectedField.value._antares_id);
|
||||
};
|
||||
|
||||
const removeField = () => {
|
||||
emit('remove-field', selectedField.value._antares_id);
|
||||
};
|
||||
|
||||
const getIndexes = (field: string) => {
|
||||
return props.indexes.reduce((acc, curr) => {
|
||||
acc.push(...curr.fields.map(f => ({ name: f, type: curr.type })));
|
||||
return acc;
|
||||
}, []).filter(f => f.name === field);
|
||||
};
|
||||
|
||||
const getForeigns = (field: string) => {
|
||||
return props.foreigns.reduce((acc, curr) => {
|
||||
if (curr.field === field)
|
||||
acc.push(`${curr.refTable}.${curr.refField}`);
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
watch(fieldsLength, () => {
|
||||
refreshScroller();
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
if (propTable.value)
|
||||
refreshScroller();
|
||||
|
||||
if (tableWrapper.value)
|
||||
scrollElement.value = tableWrapper.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', resizeResults);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeResults);
|
||||
});
|
||||
|
||||
defineExpose({ tableWrapper });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user