2020-08-17 15:10:19 +02:00
|
|
|
<template>
|
2022-05-09 11:29:25 +02:00
|
|
|
<BaseSelect
|
2020-08-17 15:10:19 +02:00
|
|
|
ref="editField"
|
2022-05-09 11:29:25 +02:00
|
|
|
:options="foreigns"
|
2020-12-15 17:08:36 +01:00
|
|
|
class="form-select pl-1 pr-4"
|
|
|
|
:class="{'small-select': size === 'small'}"
|
2022-05-09 11:29:25 +02:00
|
|
|
:value="currentValue"
|
|
|
|
dropdown-class="select-sm"
|
|
|
|
dropdown-container=".workspace-query-results > .vscroll"
|
2020-08-17 15:10:19 +02:00
|
|
|
@change="onChange"
|
|
|
|
@blur="$emit('blur')"
|
2022-05-09 11:29:25 +02:00
|
|
|
/>
|
2020-08-17 15:10:19 +02:00
|
|
|
</template>
|
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { computed, Ref, ref } from 'vue';
|
2022-04-30 11:45:49 +02:00
|
|
|
import { storeToRefs } from 'pinia';
|
2020-08-17 15:10:19 +02:00
|
|
|
import Tables from '@/ipc-api/Tables';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useNotificationsStore } from '@/stores/notifications';
|
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2020-08-17 15:10:19 +02:00
|
|
|
import { TEXT, LONG_TEXT } from 'common/fieldTypes';
|
2022-05-09 11:29:25 +02:00
|
|
|
import BaseSelect from '@/components/BaseSelect.vue';
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
const props = defineProps({
|
|
|
|
modelValue: [String, Number],
|
|
|
|
keyUsage: Object,
|
|
|
|
size: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
}
|
|
|
|
});
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
const emit = defineEmits(['update:modelValue', 'blur']);
|
2020-08-17 15:10:19 +02:00
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
const { addNotification } = useNotificationsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
2020-08-17 15:10:19 +02:00
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
2020-08-17 15:10:19 +02:00
|
|
|
|
2022-05-17 19:11:31 +02:00
|
|
|
const editField: Ref<HTMLSelectElement> = ref(null);
|
|
|
|
const foreignList = ref([]);
|
2022-05-25 14:41:15 +02:00
|
|
|
const currentValue = ref(props.modelValue);
|
2022-05-17 19:11:31 +02:00
|
|
|
|
|
|
|
const isValidDefault = computed(() => {
|
|
|
|
if (!foreignList.value.length) return true;
|
|
|
|
if (props.modelValue === null) return false;
|
|
|
|
return foreignList.value.some(foreign => foreign.foreign_column.toString() === props.modelValue.toString());
|
|
|
|
});
|
|
|
|
|
2022-05-25 14:41:15 +02:00
|
|
|
const foreigns = computed(() => {
|
|
|
|
const list = [];
|
|
|
|
if (!isValidDefault.value)
|
|
|
|
list.push({ value: props.modelValue, label: props.modelValue === null ? 'NULL' : props.modelValue });
|
|
|
|
for (const row of foreignList.value)
|
|
|
|
list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '')}` });
|
|
|
|
return list;
|
|
|
|
});
|
2020-08-17 15:10:19 +02:00
|
|
|
|
2022-05-25 14:41:15 +02:00
|
|
|
const onChange = (opt: any) => {
|
|
|
|
emit('update:modelValue', opt.value);
|
2022-05-17 19:11:31 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const cutText = (val: string) => {
|
|
|
|
if (typeof val !== 'string') return val;
|
|
|
|
return val.length > 15 ? `${val.substring(0, 15)}...` : val;
|
|
|
|
};
|
|
|
|
|
|
|
|
let foreignDesc;
|
|
|
|
const params = {
|
|
|
|
uid: selectedWorkspace.value,
|
|
|
|
schema: props.keyUsage.refSchema,
|
|
|
|
table: props.keyUsage.refTable
|
|
|
|
};
|
|
|
|
|
|
|
|
(async () => {
|
|
|
|
try { // Field data
|
|
|
|
const { status, response } = await Tables.getTableColumns(params);
|
|
|
|
|
|
|
|
if (status === 'success') {
|
|
|
|
const textField = response.find((field: {type: string; name: string}) => [...TEXT, ...LONG_TEXT].includes(field.type) && field.name !== props.keyUsage.refField);
|
|
|
|
foreignDesc = textField ? textField.name : false;
|
2020-08-17 15:10:19 +02:00
|
|
|
}
|
2022-05-17 19:11:31 +02:00
|
|
|
else
|
|
|
|
addNotification({ status: 'error', message: response });
|
2020-08-17 15:10:19 +02:00
|
|
|
}
|
2022-05-17 19:11:31 +02:00
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
|
|
|
}
|
|
|
|
|
|
|
|
try { // Foregn list
|
|
|
|
const { status, response } = await Tables.getForeignList({
|
|
|
|
...params,
|
|
|
|
column: props.keyUsage.refField,
|
|
|
|
description: foreignDesc
|
|
|
|
});
|
|
|
|
|
|
|
|
if (status === 'success')
|
|
|
|
foreignList.value = response.rows;
|
|
|
|
else
|
|
|
|
addNotification({ status: 'error', message: response });
|
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
|
|
|
}
|
|
|
|
})();
|
2020-08-17 15:10:19 +02:00
|
|
|
</script>
|