mirror of https://github.com/Fabio286/antares.git
refactor: ts and composition api on WorkspaceTabNew* components
This commit is contained in:
parent
33a4663694
commit
89e8d9fcdb
|
|
@ -93,6 +93,8 @@ export interface TableInfos {
|
|||
}
|
||||
|
||||
export interface TableField {
|
||||
// eslint-disable-next-line camelcase
|
||||
_antares_id?: string;
|
||||
name: string;
|
||||
key: string;
|
||||
type: string;
|
||||
|
|
@ -120,6 +122,8 @@ export interface TableField {
|
|||
}
|
||||
|
||||
export interface TableIndex {
|
||||
// eslint-disable-next-line camelcase
|
||||
_antares_id?: string;
|
||||
name: string;
|
||||
fields: string[];
|
||||
type: string;
|
||||
|
|
@ -249,14 +253,20 @@ export interface FunctionParam {
|
|||
|
||||
export interface RoutineInfos {
|
||||
name: string;
|
||||
type: string;
|
||||
type?: string;
|
||||
definer: string;
|
||||
created: string;
|
||||
updated: string;
|
||||
created?: string;
|
||||
sql?: string;
|
||||
updated?: string;
|
||||
comment?: string;
|
||||
charset?: string;
|
||||
security?: string;
|
||||
language?: string;
|
||||
dataAccess?: string;
|
||||
deterministic?: boolean;
|
||||
parameters?: FunctionParam[];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
returns?: any;
|
||||
}
|
||||
|
||||
export type FunctionInfos = RoutineInfos
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ else {
|
|||
|
||||
ipcMain.on('refresh-theme-settings', () => {
|
||||
const appTheme = persistentStore.get('application_theme');
|
||||
if(isWindows){
|
||||
if (isWindows) {
|
||||
mainWindow.setTitleBarOverlay({
|
||||
color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
|
||||
symbolColor: appTheme === 'dark' ? '#fff' : '#000'
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export default defineComponent({
|
|||
const hightlightedIndex = ref(0);
|
||||
const isOpen = ref(false);
|
||||
const isMouseDown = ref(false);
|
||||
const internalValue = ref(props.modelValue || props.value);
|
||||
const internalValue = ref(props.modelValue !== false ? props.modelValue : props.value);
|
||||
const el = ref(null);
|
||||
const searchInput = ref(null);
|
||||
const optionList = ref(null);
|
||||
|
|
@ -380,7 +380,8 @@ export default defineComponent({
|
|||
optionList,
|
||||
optionRefs,
|
||||
handleBlurEvent,
|
||||
handleMouseUpEvent
|
||||
handleMouseUpEvent,
|
||||
internalValue
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -133,8 +133,8 @@ const mode = computed(() => {
|
|||
case 'mysql':
|
||||
case 'maria':
|
||||
return 'mysql';
|
||||
case 'mssql':
|
||||
return 'sqlserver';
|
||||
// case 'mssql':
|
||||
// return 'sqlserver';
|
||||
case 'pg':
|
||||
return 'pgsql';
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@close-context="closeContext"
|
||||
>
|
||||
<div
|
||||
v-if="['procedure', 'function'].includes(selectedMisc.type)"
|
||||
v-if="['procedure', 'routine', 'function'].includes(selectedMisc.type)"
|
||||
class="context-element"
|
||||
@click="runElementCheck"
|
||||
>
|
||||
|
|
@ -77,7 +77,7 @@ import Triggers from '@/ipc-api/Triggers';
|
|||
import Routines from '@/ipc-api/Routines';
|
||||
import Functions from '@/ipc-api/Functions';
|
||||
import Schedulers from '@/ipc-api/Schedulers';
|
||||
import { EventInfos, FunctionInfos, RoutineInfos, TriggerInfos } from 'common/interfaces/antares';
|
||||
import { EventInfos, FunctionInfos, IpcResponse, RoutineInfos, TriggerInfos } from 'common/interfaces/antares';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ const closeContext = () => {
|
|||
|
||||
const deleteMisc = async () => {
|
||||
try {
|
||||
let res;
|
||||
let res: IpcResponse;
|
||||
|
||||
switch (props.selectedMisc.type) {
|
||||
case 'trigger':
|
||||
|
|
@ -163,6 +163,7 @@ const deleteMisc = async () => {
|
|||
trigger: props.selectedMisc.name
|
||||
});
|
||||
break;
|
||||
case 'routine':
|
||||
case 'procedure':
|
||||
res = await Routines.dropRoutine({
|
||||
uid: selectedWorkspace.value,
|
||||
|
|
@ -187,6 +188,8 @@ const deleteMisc = async () => {
|
|||
break;
|
||||
}
|
||||
|
||||
console.log(res);
|
||||
|
||||
const { status, response } = res;
|
||||
|
||||
if (status === 'success') {
|
||||
|
|
@ -209,7 +212,7 @@ const deleteMisc = async () => {
|
|||
};
|
||||
|
||||
const runElementCheck = () => {
|
||||
if (props.selectedMisc.type === 'procedure')
|
||||
if (['procedure', 'routine'].includes(props.selectedMisc.type))
|
||||
runRoutineCheck();
|
||||
else if (props.selectedMisc.type === 'function')
|
||||
runFunctionCheck();
|
||||
|
|
@ -257,9 +260,9 @@ const runRoutine = (params?: string[]) => {
|
|||
case 'pg':
|
||||
sql = `CALL ${localElement.value.name}(${params.join(',')})`;
|
||||
break;
|
||||
case 'mssql':
|
||||
sql = `EXEC ${localElement.value.name} ${params.join(',')}`;
|
||||
break;
|
||||
// case 'mssql':
|
||||
// sql = `EXEC ${localElement.value.name} ${params.join(',')}`;
|
||||
// break;
|
||||
default:
|
||||
sql = `CALL \`${localElement.value.name}\`(${params.join(',')})`;
|
||||
}
|
||||
|
|
@ -310,9 +313,9 @@ const runFunction = (params?: string[]) => {
|
|||
case 'pg':
|
||||
sql = `SELECT ${localElement.value.name}(${params.join(',')})`;
|
||||
break;
|
||||
case 'mssql':
|
||||
sql = `SELECT ${localElement.value.name} ${params.join(',')}`;
|
||||
break;
|
||||
// case 'mssql':
|
||||
// sql = `SELECT ${localElement.value.name} ${params.join(',')}`;
|
||||
// break;
|
||||
default:
|
||||
sql = `SELECT \`${localElement.value.name}\` (${params.join(',')})`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('message.createNewTrigger') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.selectedMisc === 'procedure'"
|
||||
v-if="['procedure', 'routine'].includes(props.selectedMisc)"
|
||||
class="context-element"
|
||||
@click="emit('open-create-routine-tab')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@
|
|||
<BaseSelect
|
||||
v-model="localFunction.definer"
|
||||
:options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
|
||||
:option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? user.name : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<BaseSelect
|
||||
v-model="localFunction.returns"
|
||||
class="form-select text-uppercase"
|
||||
:options="[{ name: 'VOID' }, ...workspace.dataTypes]"
|
||||
:options="[{ name: 'VOID' }, ...(workspace.dataTypes as any)]"
|
||||
group-label="group"
|
||||
group-values="types"
|
||||
option-label="name"
|
||||
|
|
@ -175,213 +175,174 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import Functions from '@/ipc-api/Functions';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
|
||||
import Functions from '@/ipc-api/Functions';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal.vue';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
import { FunctionInfos, FunctionParam } from 'common/interfaces/antares';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewFunction',
|
||||
components: {
|
||||
BaseLoader,
|
||||
QueryEditor,
|
||||
WorkspaceTabPropsFunctionParamsModal,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isParamsModal: false,
|
||||
originalFunction: {},
|
||||
localFunction: {},
|
||||
lastFunction: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
customizations () {
|
||||
return this.workspace.customizations;
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalFunction
|
||||
? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
|
||||
: true;
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isParamsModal = ref(false);
|
||||
const originalFunction: Ref<FunctionInfos> = ref(null);
|
||||
const localFunction = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const customizations = computed(() => {
|
||||
return workspace.value.customizations;
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalFunction.value) !== JSON.stringify(localFunction.value);
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localFunction.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Functions.createFunction(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localFunction.value.name,
|
||||
elementType: 'function',
|
||||
type: 'function-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, function: localFunction.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.originalFunction = {
|
||||
sql: this.customizations.functionSql,
|
||||
language: this.customizations.languages ? this.customizations.languages[0] : null,
|
||||
name: '',
|
||||
definer: '',
|
||||
comment: '',
|
||||
security: 'DEFINER',
|
||||
dataAccess: 'CONTAINS SQL',
|
||||
deterministic: false,
|
||||
returns: this.workspace.dataTypes.length ? this.workspace.dataTypes[0].types[0].name : null
|
||||
};
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const clearChanges = () => {
|
||||
localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
|
||||
queryEditor.value.editor.session.setValue(localFunction.value.sql);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localFunction
|
||||
};
|
||||
const parametersUpdate = (parameters: FunctionParam[]) => {
|
||||
localFunction.value = { ...localFunction.value, parameters };
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Functions.createFunction(params);
|
||||
const showParamsModal = () => {
|
||||
isParamsModal.value = true;
|
||||
};
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
const hideParamsModal = () => {
|
||||
isParamsModal.value = false;
|
||||
};
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localFunction.name,
|
||||
elementType: 'function',
|
||||
type: 'function-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
optionsUpdate (options) {
|
||||
this.localFunction = options;
|
||||
},
|
||||
parametersUpdate (parameters) {
|
||||
this.localFunction = { ...this.localFunction, parameters };
|
||||
},
|
||||
showParamsModal () {
|
||||
this.isParamsModal = true;
|
||||
},
|
||||
hideParamsModal () {
|
||||
this.isParamsModal = false;
|
||||
},
|
||||
showAskParamsModal () {
|
||||
this.isAskingParameters = true;
|
||||
},
|
||||
hideAskParamsModal () {
|
||||
this.isAskingParameters = false;
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
originalFunction.value = {
|
||||
sql: customizations.value.functionSql,
|
||||
language: customizations.value.languages ? customizations.value.languages[0] : null,
|
||||
name: '',
|
||||
definer: '',
|
||||
comment: '',
|
||||
security: 'DEFINER',
|
||||
dataAccess: 'CONTAINS SQL',
|
||||
deterministic: false,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
returns: workspace.value.dataTypes.length ? (workspace.value.dataTypes[0] as any).types[0].name : null
|
||||
};
|
||||
|
||||
localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@
|
|||
<BaseSelect
|
||||
v-model="localRoutine.definer"
|
||||
:options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
|
||||
:option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? user.name : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -129,7 +129,6 @@
|
|||
<label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
|
||||
<QueryEditor
|
||||
v-show="isSelected"
|
||||
:key="`new-${_uid}`"
|
||||
ref="queryEditor"
|
||||
v-model="localRoutine.sql"
|
||||
:workspace="workspace"
|
||||
|
|
@ -148,209 +147,174 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import Routines from '@/ipc-api/Routines';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
|
||||
import Routines from '@/ipc-api/Routines';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal.vue';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
import { FunctionParam } from 'common/interfaces/antares';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewRoutine',
|
||||
components: {
|
||||
QueryEditor,
|
||||
BaseLoader,
|
||||
WorkspaceTabPropsRoutineParamsModal,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isParamsModal: false,
|
||||
originalRoutine: {},
|
||||
localRoutine: {},
|
||||
lastRoutine: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
customizations () {
|
||||
return this.workspace.customizations;
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalRoutine) !== JSON.stringify(this.localRoutine);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalRoutine ? this.workspace.users.some(user => this.originalRoutine.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isParamsModal = ref(false);
|
||||
const originalRoutine = ref(null);
|
||||
const localRoutine = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const customizations = computed(() => {
|
||||
return workspace.value.customizations;
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalRoutine.value) !== JSON.stringify(localRoutine.value);
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localRoutine.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Routines.createRoutine(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localRoutine.value.name,
|
||||
elementType: 'routine',
|
||||
type: 'routine-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, routine: localRoutine.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.originalRoutine = {
|
||||
sql: this.customizations.procedureSql,
|
||||
language: this.customizations.languages ? this.customizations.languages[0] : null,
|
||||
name: '',
|
||||
definer: '',
|
||||
comment: '',
|
||||
security: 'DEFINER',
|
||||
dataAccess: 'CONTAINS SQL',
|
||||
deterministic: false
|
||||
};
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const clearChanges = () => {
|
||||
localRoutine.value = JSON.parse(JSON.stringify(originalRoutine.value));
|
||||
queryEditor.value.editor.session.setValue(localRoutine.value.sql);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
const parametersUpdate = (parameters: FunctionParam[]) => {
|
||||
localRoutine.value = { ...localRoutine.value, parameters };
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localRoutine
|
||||
};
|
||||
const showParamsModal = () => {
|
||||
isParamsModal.value = true;
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Routines.createRoutine(params);
|
||||
const hideParamsModal = () => {
|
||||
isParamsModal.value = false;
|
||||
};
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localRoutine.name,
|
||||
elementType: 'routine',
|
||||
type: 'routine-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, routine: this.localRoutine.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
parametersUpdate (parameters) {
|
||||
this.localRoutine = { ...this.localRoutine, parameters };
|
||||
},
|
||||
showParamsModal () {
|
||||
this.isParamsModal = true;
|
||||
},
|
||||
hideParamsModal () {
|
||||
this.isParamsModal = false;
|
||||
},
|
||||
showAskParamsModal () {
|
||||
this.isAskingParameters = true;
|
||||
},
|
||||
hideAskParamsModal () {
|
||||
this.isAskingParameters = false;
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
originalRoutine.value = {
|
||||
sql: customizations.value.functionSql,
|
||||
language: customizations.value.languages ? customizations.value.languages[0] : null,
|
||||
name: '',
|
||||
definer: '',
|
||||
comment: '',
|
||||
security: 'DEFINER',
|
||||
dataAccess: 'CONTAINS SQL',
|
||||
deterministic: false,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
returns: workspace.value.dataTypes.length ? (workspace.value.dataTypes[0] as any).types[0].name : null
|
||||
};
|
||||
|
||||
localRoutine.value = JSON.parse(JSON.stringify(originalRoutine.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,26 @@
|
|||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<span>{{ t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
:title="t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<span>{{ t('word.clear') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="divider-vert py-3" />
|
||||
<button class="btn btn-dark btn-sm" @click="showTimingModal">
|
||||
<i class="mdi mdi-24px mdi-timer mr-1" />
|
||||
<span>{{ $t('word.timing') }}</span>
|
||||
<span>{{ t('word.timing') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="workspace-query-info">
|
||||
<div class="d-flex" :title="$t('word.schema')">
|
||||
<div class="d-flex" :title="t('word.schema')">
|
||||
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="columns">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.name') }}</label>
|
||||
<label class="form-label">{{ t('word.name') }}</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localScheduler.name"
|
||||
|
|
@ -51,19 +51,19 @@
|
|||
</div>
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.definer') }}</label>
|
||||
<label class="form-label">{{ t('word.definer') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localScheduler.definer"
|
||||
:options="users"
|
||||
:option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.comment') }}</label>
|
||||
<label class="form-label">{{ t('word.comment') }}</label>
|
||||
<input
|
||||
v-model="localScheduler.comment"
|
||||
class="form-input"
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
<div class="column">
|
||||
<div class="form-group">
|
||||
<label class="form-label mr-2">{{ $t('word.state') }}</label>
|
||||
<label class="form-label mr-2">{{ t('word.state') }}</label>
|
||||
<label class="form-radio form-inline">
|
||||
<input
|
||||
v-model="localScheduler.state"
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
<div class="workspace-query-results column col-12 mt-2 p-relative">
|
||||
<BaseLoader v-if="isLoading" />
|
||||
<label class="form-label ml-2">{{ $t('message.schedulerBody') }}</label>
|
||||
<label class="form-label ml-2">{{ t('message.schedulerBody') }}</label>
|
||||
<QueryEditor
|
||||
v-show="isSelected"
|
||||
ref="queryEditor"
|
||||
|
|
@ -124,209 +124,186 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import { EventInfos } from 'common/interfaces/antares';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal.vue';
|
||||
import Schedulers from '@/ipc-api/Schedulers';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewScheduler',
|
||||
components: {
|
||||
BaseLoader,
|
||||
QueryEditor,
|
||||
WorkspaceTabPropsSchedulerTimingModal,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isTimingModal: false,
|
||||
originalScheduler: {},
|
||||
localScheduler: {},
|
||||
lastScheduler: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalScheduler) !== JSON.stringify(this.localScheduler);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalScheduler ? this.workspace.users.some(user => this.originalScheduler.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
},
|
||||
users () {
|
||||
const users = [{ value: '' }, ...this.workspace.users];
|
||||
if (!this.isDefinerInUsers) {
|
||||
const [name, host] = this.originalScheduler.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isTimingModal = ref(false);
|
||||
const originalScheduler = ref(null);
|
||||
const localScheduler = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
return users;
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalScheduler.value) !== JSON.stringify(localScheduler.value);
|
||||
});
|
||||
|
||||
const isDefinerInUsers = computed(() => {
|
||||
return originalScheduler.value ? workspace.value.users.some(user => originalScheduler.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
});
|
||||
|
||||
const users = computed(() => {
|
||||
const users = [{ value: '' }, ...workspace.value.users];
|
||||
if (!isDefinerInUsers.value) {
|
||||
const [name, host] = originalScheduler.value.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
|
||||
return users;
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localScheduler.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Schedulers.createScheduler(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localScheduler.value.name,
|
||||
elementType: 'scheduler',
|
||||
type: 'scheduler-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, scheduler: localScheduler.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
this.originalScheduler = {
|
||||
definer: '',
|
||||
sql: 'BEGIN\r\n\r\nEND',
|
||||
name: '',
|
||||
comment: '',
|
||||
execution: 'EVERY',
|
||||
every: ['1', 'DAY'],
|
||||
preserve: true,
|
||||
state: 'DISABLE'
|
||||
};
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.localScheduler = JSON.parse(JSON.stringify(this.originalScheduler));
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const clearChanges = () => {
|
||||
localScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
|
||||
queryEditor.value.editor.session.setValue(localScheduler.value.sql);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
const showTimingModal = () => {
|
||||
isTimingModal.value = true;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localScheduler
|
||||
};
|
||||
const hideTimingModal = () => {
|
||||
isTimingModal.value = false;
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Schedulers.createScheduler(params);
|
||||
const timingUpdate = (options: EventInfos) => {
|
||||
localScheduler.value = options;
|
||||
};
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localScheduler.name,
|
||||
elementType: 'scheduler',
|
||||
type: 'scheduler-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, scheduler: this.localScheduler.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localScheduler = JSON.parse(JSON.stringify(this.originalScheduler));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localScheduler.sql);
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
showTimingModal () {
|
||||
this.isTimingModal = true;
|
||||
},
|
||||
hideTimingModal () {
|
||||
this.isTimingModal = false;
|
||||
},
|
||||
timingUpdate (options) {
|
||||
this.localScheduler = options;
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
originalScheduler.value = {
|
||||
definer: '',
|
||||
sql: 'BEGIN\r\n\r\nEND',
|
||||
name: '',
|
||||
comment: '',
|
||||
execution: 'EVERY',
|
||||
every: ['1', 'DAY'],
|
||||
preserve: true,
|
||||
state: 'DISABLE'
|
||||
};
|
||||
|
||||
originalScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@
|
|||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<span>{{ t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged || isSaving"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
:title="t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<span>{{ t('word.clear') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="divider-vert py-3" />
|
||||
|
|
@ -28,20 +28,20 @@
|
|||
<button
|
||||
:disabled="isSaving"
|
||||
class="btn btn-dark btn-sm"
|
||||
:title="$t('message.addNewField')"
|
||||
:title="t('message.addNewField')"
|
||||
@click="addField"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
||||
<span>{{ $t('word.add') }}</span>
|
||||
<span>{{ t('word.add') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="isSaving || !localFields.length"
|
||||
class="btn btn-dark btn-sm"
|
||||
:title="$t('message.manageIndexes')"
|
||||
:title="t('message.manageIndexes')"
|
||||
@click="showIntdexesModal"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
|
||||
<span>{{ $t('word.indexes') }}</span>
|
||||
<span>{{ t('word.indexes') }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-dark btn-sm"
|
||||
|
|
@ -49,11 +49,11 @@
|
|||
@click="showForeignModal"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-key-link mr-1" />
|
||||
<span>{{ $t('word.foreignKeys') }}</span>
|
||||
<span>{{ t('word.foreignKeys') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="workspace-query-info">
|
||||
<div class="d-flex" :title="$t('word.schema')">
|
||||
<div class="d-flex" :title="t('word.schema')">
|
||||
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="columns mb-4">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.name') }}</label>
|
||||
<label class="form-label">{{ t('word.name') }}</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localOptions.name"
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
<div v-if="workspace.customizations.comment" class="column">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.comment') }}</label>
|
||||
<label class="form-label">{{ t('word.comment') }}</label>
|
||||
<input
|
||||
v-model="localOptions.comment"
|
||||
class="form-input"
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<div v-if="workspace.customizations.collations" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.collation') }}
|
||||
{{ t('word.collation') }}
|
||||
</label>
|
||||
<BaseSelect
|
||||
v-model="localOptions.collation"
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<div v-if="workspace.customizations.engines" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.engine') }}
|
||||
{{ t('word.engine') }}
|
||||
</label>
|
||||
<BaseSelect
|
||||
v-model="localOptions.engine"
|
||||
|
|
@ -160,310 +160,302 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import { uidGen } from 'common/libs/uidGen';
|
||||
import Tables from '@/ipc-api/Tables';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields';
|
||||
import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
|
||||
import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
|
||||
import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields.vue';
|
||||
import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal.vue';
|
||||
import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal.vue';
|
||||
import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
import { ConnectionParams, TableField, TableForeign, TableIndex, TableOptions } from 'common/interfaces/antares';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewTable',
|
||||
components: {
|
||||
BaseLoader,
|
||||
WorkspaceTabPropsTableFields,
|
||||
WorkspaceTabPropsTableIndexesModal,
|
||||
WorkspaceTabPropsTableForeignModal,
|
||||
WorkspaceTabNewTableEmptyState,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object as Prop<ConnectionParams>,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
getDatabaseVariable,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
renameTabs,
|
||||
removeTab,
|
||||
changeBreadcrumbs
|
||||
} = workspacesStore;
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
getWorkspace,
|
||||
getDatabaseVariable,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
renameTabs,
|
||||
removeTab,
|
||||
changeBreadcrumbs,
|
||||
selectedWorkspace
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isIndexesModal: false,
|
||||
isForeignModal: false,
|
||||
isOptionsChanging: false,
|
||||
originalFields: [],
|
||||
localFields: [],
|
||||
originalKeyUsage: [],
|
||||
localKeyUsage: [],
|
||||
originalIndexes: [],
|
||||
localIndexes: [],
|
||||
tableOptions: {},
|
||||
localOptions: {},
|
||||
lastTable: null,
|
||||
newFieldsCounter: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
defaultCollation () {
|
||||
if (this.workspace.customizations.collations)
|
||||
return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server')?.value || '';
|
||||
return '';
|
||||
},
|
||||
defaultEngine () {
|
||||
if (this.workspace.customizations.engines)
|
||||
return this.workspace.engines?.find(engine => engine.isDefault)?.name || '';
|
||||
return '';
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) ||
|
||||
JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage) ||
|
||||
JSON.stringify(this.originalIndexes) !== JSON.stringify(this.localIndexes) ||
|
||||
JSON.stringify(this.tableOptions) !== JSON.stringify(this.localOptions);
|
||||
},
|
||||
isValid () {
|
||||
return !!this.localFields.length && !!this.localOptions.name.trim().length;
|
||||
const {
|
||||
getWorkspace,
|
||||
getDatabaseVariable,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
changeBreadcrumbs
|
||||
} = workspacesStore;
|
||||
|
||||
const indexTable: Ref<Component & {$refs: { tableWrapper: HTMLDivElement }}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isIndexesModal = ref(false);
|
||||
const isForeignModal = ref(false);
|
||||
const originalFields: Ref<TableField[]> = ref([]);
|
||||
const localFields: Ref<TableField[]> = ref([]);
|
||||
const originalKeyUsage: Ref<TableForeign[]> = ref([]);
|
||||
const localKeyUsage: Ref<TableForeign[]> = ref([]);
|
||||
const originalIndexes: Ref<TableIndex[]> = ref([]);
|
||||
const localIndexes: Ref<TableIndex[]> = ref([]);
|
||||
const tableOptions: Ref<TableOptions> = ref(null);
|
||||
const localOptions: Ref<TableOptions> = ref(null);
|
||||
const newFieldsCounter = ref(0);
|
||||
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const defaultCollation = computed(() => {
|
||||
if (workspace.value.customizations.collations)
|
||||
return getDatabaseVariable(selectedWorkspace.value, 'collation_server')?.value || '';
|
||||
return '';
|
||||
});
|
||||
|
||||
const defaultEngine = computed(() => {
|
||||
if (workspace.value.customizations.engines)
|
||||
return workspace.value.engines?.find(engine => engine.isDefault)?.name as string || '';
|
||||
return '';
|
||||
});
|
||||
|
||||
const schemaTables = computed(() => {
|
||||
const schemaTables = workspace.value.structure
|
||||
.filter(schema => schema.name === props.schema)
|
||||
.map(schema => schema.tables);
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalFields.value) !== JSON.stringify(localFields.value) ||
|
||||
JSON.stringify(originalKeyUsage.value) !== JSON.stringify(localKeyUsage.value) ||
|
||||
JSON.stringify(originalIndexes.value) !== JSON.stringify(localIndexes.value) ||
|
||||
JSON.stringify(tableOptions.value) !== JSON.stringify(localOptions.value);
|
||||
});
|
||||
|
||||
const isValid = computed(() => {
|
||||
return !!localFields.value.length && !!localOptions.value.name.trim().length;
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value || !isValid.value) return;
|
||||
isSaving.value = true;
|
||||
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
fields: localFields.value,
|
||||
foreigns: localKeyUsage.value,
|
||||
indexes: localIndexes.value,
|
||||
options: localOptions.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Tables.createTable(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localOptions.value.name,
|
||||
elementType: 'table',
|
||||
type: 'table-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, table: localOptions.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.tableOptions = {
|
||||
name: '',
|
||||
type: 'table',
|
||||
engine: this.defaultEngine,
|
||||
comment: '',
|
||||
collation: this.defaultCollation
|
||||
};
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
isSaving.value = false;
|
||||
newFieldsCounter.value = 0;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving || !this.isValid) return;
|
||||
this.isSaving = true;
|
||||
const clearChanges = () => {
|
||||
localFields.value = JSON.parse(JSON.stringify(originalFields.value));
|
||||
localIndexes.value = JSON.parse(JSON.stringify(originalIndexes.value));
|
||||
localKeyUsage.value = JSON.parse(JSON.stringify(originalKeyUsage.value));
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
fields: this.localFields,
|
||||
foreigns: this.localKeyUsage,
|
||||
indexes: this.localIndexes,
|
||||
options: this.localOptions
|
||||
};
|
||||
tableOptions.value = {
|
||||
name: '',
|
||||
type: 'table',
|
||||
engine: defaultEngine.value,
|
||||
comment: '',
|
||||
collation: defaultCollation.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Tables.createTable(params);
|
||||
localOptions.value = JSON.parse(JSON.stringify(tableOptions.value));
|
||||
newFieldsCounter.value = 0;
|
||||
};
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
const addField = () => {
|
||||
localFields.value.push({
|
||||
_antares_id: uidGen(),
|
||||
name: `${t('word.field', 1)}_${++newFieldsCounter.value}`,
|
||||
key: '',
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type: (workspace.value.dataTypes[0] as any).types[0].name,
|
||||
schema: props.schema,
|
||||
numPrecision: null,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
numLength: (workspace.value.dataTypes[0] as any).types[0].length,
|
||||
datePrecision: null,
|
||||
charLength: null,
|
||||
nullable: false,
|
||||
unsigned: false,
|
||||
zerofill: false,
|
||||
order: localFields.value.length + 1,
|
||||
default: null,
|
||||
charset: null,
|
||||
collation: defaultCollation.value,
|
||||
autoIncrement: false,
|
||||
onUpdate: '',
|
||||
comment: ''
|
||||
});
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localOptions.name,
|
||||
elementType: 'table',
|
||||
type: 'table-props'
|
||||
});
|
||||
setTimeout(() => {
|
||||
const scrollable = indexTable.value.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
};
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
const renameField = (payload: {index: string; new: string; old: string}) => {
|
||||
localIndexes.value = localIndexes.value.map(index => {
|
||||
const fi = index.fields.findIndex(field => field === payload.old);
|
||||
if (fi !== -1)
|
||||
index.fields[fi] = payload.new;
|
||||
return index;
|
||||
});
|
||||
|
||||
this.isSaving = false;
|
||||
this.newFieldsCounter = 0;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localFields = JSON.parse(JSON.stringify(this.originalFields));
|
||||
this.localIndexes = JSON.parse(JSON.stringify(this.originalIndexes));
|
||||
this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
|
||||
localKeyUsage.value = localKeyUsage.value.map(key => {
|
||||
if (key.field === payload.old)
|
||||
key.field = payload.new;
|
||||
return key;
|
||||
});
|
||||
};
|
||||
|
||||
this.tableOptions = {
|
||||
name: '',
|
||||
type: 'table',
|
||||
engine: this.defaultEngine,
|
||||
comment: '',
|
||||
collation: this.defaultCollation
|
||||
};
|
||||
const duplicateField = (uid: string) => {
|
||||
const fieldToClone = Object.assign({}, localFields.value.find(field => field._antares_id === uid));
|
||||
fieldToClone._antares_id = uidGen();
|
||||
fieldToClone.name = `${fieldToClone.name}_copy`;
|
||||
fieldToClone.order = localFields.value.length + 1;
|
||||
localFields.value = [...localFields.value, fieldToClone];
|
||||
|
||||
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
|
||||
this.newFieldsCounter = 0;
|
||||
},
|
||||
addField () {
|
||||
this.localFields.push({
|
||||
_antares_id: uidGen(),
|
||||
name: `${this.$tc('word.field', 1)}_${++this.newFieldsCounter}`,
|
||||
key: '',
|
||||
type: this.workspace.dataTypes[0].types[0].name,
|
||||
schema: this.schema,
|
||||
numPrecision: null,
|
||||
numLength: this.workspace.dataTypes[0].types[0].length,
|
||||
datePrecision: null,
|
||||
charLength: null,
|
||||
nullable: false,
|
||||
unsigned: false,
|
||||
zerofill: false,
|
||||
order: this.localFields.length + 1,
|
||||
default: null,
|
||||
charset: null,
|
||||
collation: null,
|
||||
autoIncrement: false,
|
||||
onUpdate: '',
|
||||
comment: ''
|
||||
});
|
||||
setTimeout(() => {
|
||||
const scrollable = indexTable.value.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
const scrollable = this.$refs.indexTable.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
},
|
||||
renameField (payload) {
|
||||
this.localIndexes = this.localIndexes.map(index => {
|
||||
const fi = index.fields.findIndex(field => field === payload.old);
|
||||
if (fi !== -1)
|
||||
index.fields[fi] = payload.new;
|
||||
return index;
|
||||
});
|
||||
const removeField = (uid: string) => {
|
||||
localFields.value = localFields.value.filter(field => field._antares_id !== uid);
|
||||
};
|
||||
|
||||
this.localKeyUsage = this.localKeyUsage.map(key => {
|
||||
if (key.field === payload.old)
|
||||
key.field = payload.new;
|
||||
return key;
|
||||
});
|
||||
},
|
||||
duplicateField (uid) {
|
||||
const fieldToClone = Object.assign({}, this.localFields.find(field => field._antares_id === uid));
|
||||
fieldToClone._antares_id = uidGen();
|
||||
fieldToClone.name = `${fieldToClone.name}_copy`;
|
||||
fieldToClone.order = this.localFields.length + 1;
|
||||
this.localFields = [...this.localFields, fieldToClone];
|
||||
const addNewIndex = (payload: { index: string; field: string }) => {
|
||||
localIndexes.value = [...localIndexes.value, {
|
||||
_antares_id: uidGen(),
|
||||
name: payload.index === 'PRIMARY' ? 'PRIMARY' : payload.field,
|
||||
fields: [payload.field],
|
||||
type: payload.index,
|
||||
comment: '',
|
||||
indexType: 'BTREE',
|
||||
indexComment: '',
|
||||
cardinality: 0
|
||||
}];
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
const scrollable = this.$refs.indexTable.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
},
|
||||
removeField (uid) {
|
||||
this.localFields = this.localFields.filter(field => field._antares_id !== uid);
|
||||
},
|
||||
addNewIndex (payload) {
|
||||
this.localIndexes = [...this.localIndexes, {
|
||||
_antares_id: uidGen(),
|
||||
name: payload.index === 'PRIMARY' ? 'PRIMARY' : payload.field,
|
||||
fields: [payload.field],
|
||||
type: payload.index,
|
||||
comment: '',
|
||||
indexType: 'BTREE',
|
||||
indexComment: '',
|
||||
cardinality: 0
|
||||
}];
|
||||
},
|
||||
addToIndex (payload) {
|
||||
this.localIndexes = this.localIndexes.map(index => {
|
||||
if (index._antares_id === payload.index) index.fields.push(payload.field);
|
||||
return index;
|
||||
});
|
||||
},
|
||||
optionsUpdate (options) {
|
||||
this.localOptions = options;
|
||||
},
|
||||
showIntdexesModal () {
|
||||
this.isIndexesModal = true;
|
||||
},
|
||||
hideIndexesModal () {
|
||||
this.isIndexesModal = false;
|
||||
},
|
||||
indexesUpdate (indexes) {
|
||||
this.localIndexes = indexes;
|
||||
},
|
||||
showForeignModal () {
|
||||
this.isForeignModal = true;
|
||||
},
|
||||
hideForeignModal () {
|
||||
this.isForeignModal = false;
|
||||
},
|
||||
foreignsUpdate (foreigns) {
|
||||
this.localKeyUsage = foreigns;
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const addToIndex = (payload: { index: string; field: string }) => {
|
||||
localIndexes.value = localIndexes.value.map(index => {
|
||||
if (index._antares_id === payload.index) index.fields.push(payload.field);
|
||||
return index;
|
||||
});
|
||||
};
|
||||
|
||||
const showIntdexesModal = () => {
|
||||
isIndexesModal.value = true;
|
||||
};
|
||||
|
||||
const hideIndexesModal = () => {
|
||||
isIndexesModal.value = false;
|
||||
};
|
||||
|
||||
const indexesUpdate = (indexes: TableIndex[]) => {
|
||||
localIndexes.value = indexes;
|
||||
};
|
||||
|
||||
const showForeignModal = () => {
|
||||
isForeignModal.value = true;
|
||||
};
|
||||
|
||||
const hideForeignModal = () => {
|
||||
isForeignModal.value = false;
|
||||
};
|
||||
|
||||
const foreignsUpdate = (foreigns: TableForeign[]) => {
|
||||
localKeyUsage.value = foreigns;
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
tableOptions.value = {
|
||||
name: '',
|
||||
type: 'table',
|
||||
engine: defaultEngine.value,
|
||||
comment: '',
|
||||
collation: defaultCollation.value
|
||||
};
|
||||
|
||||
localOptions.value = JSON.parse(JSON.stringify(tableOptions.value));
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div class="column col-12 empty">
|
||||
<p class="h6 empty-subtitle">
|
||||
{{ $t('message.thereAreNoTableFields') }}
|
||||
{{ t('message.thereAreNoTableFields') }}
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-gray d-flex" @click="$emit('new-field')">
|
||||
<button class="btn btn-gray d-flex" @click="emit('new-field')">
|
||||
<i class="mdi mdi-24px mdi-playlist-plus mr-2" />
|
||||
{{ $t('message.addNewField') }}
|
||||
{{ t('message.addNewField') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WorkspaceTabNewTableEmptyState',
|
||||
emits: ['new-field']
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(['new-field']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@
|
|||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<span>{{ t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
:title="t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<span>{{ t('word.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="workspace-query-info">
|
||||
<div class="d-flex" :title="$t('word.schema')">
|
||||
<div class="d-flex" :title="t('word.schema')">
|
||||
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="columns">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.name') }}</label>
|
||||
<label class="form-label">{{ t('word.name') }}</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localTrigger.name"
|
||||
|
|
@ -45,12 +45,12 @@
|
|||
</div>
|
||||
<div v-if="customizations.definer" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.definer') }}</label>
|
||||
<label class="form-label">{{ t('word.definer') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localTrigger.definer"
|
||||
:options="users"
|
||||
:option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<fieldset class="column columns mb-0" :disabled="customizations.triggerOnlyRename">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.table') }}</label>
|
||||
<label class="form-label">{{ t('word.table') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localTrigger.table"
|
||||
:options="schemaTables"
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.event') }}</label>
|
||||
<label class="form-label">{{ t('word.event') }}</label>
|
||||
<div class="input-group">
|
||||
<BaseSelect
|
||||
v-model="localTrigger.activation"
|
||||
|
|
@ -88,9 +88,9 @@
|
|||
v-for="event in Object.keys(localEvents)"
|
||||
:key="event"
|
||||
class="form-checkbox form-inline"
|
||||
@change.prevent="changeEvents(event)"
|
||||
@change.prevent="changeEvents(event as 'INSERT' | 'UPDATE' | 'DELETE')"
|
||||
>
|
||||
<input :checked="localEvents[event]" type="checkbox"><i class="form-icon" /> {{ event }}
|
||||
<input :checked="localEvents[event as 'INSERT' | 'UPDATE' | 'DELETE']" type="checkbox"><i class="form-icon" /> {{ event }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</div>
|
||||
<div class="workspace-query-results column col-12 mt-2 p-relative">
|
||||
<BaseLoader v-if="isLoading" />
|
||||
<label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
|
||||
<label class="form-label ml-2">{{ t('message.triggerStatement') }}</label>
|
||||
<QueryEditor
|
||||
v-show="isSelected"
|
||||
ref="queryEditor"
|
||||
|
|
@ -114,219 +114,204 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import Triggers from '@/ipc-api/Triggers';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewTrigger',
|
||||
components: {
|
||||
BaseLoader,
|
||||
QueryEditor,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
originalTrigger: {},
|
||||
localTrigger: {},
|
||||
lastTrigger: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300,
|
||||
localEvents: { INSERT: false, UPDATE: false, DELETE: false }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
customizations () {
|
||||
return this.workspace.customizations;
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalTrigger) !== JSON.stringify(this.localTrigger);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalTrigger ? this.workspace.users.some(user => this.originalTrigger.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
},
|
||||
users () {
|
||||
const users = [{ value: '' }, ...this.workspace.users];
|
||||
if (!this.isDefinerInUsers) {
|
||||
const [name, host] = this.originalTrigger.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const originalTrigger = ref(null);
|
||||
const localTrigger = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
const localEvents = ref({ INSERT: false, UPDATE: false, DELETE: false });
|
||||
|
||||
return users;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.originalTrigger = {
|
||||
sql: this.customizations.triggerSql,
|
||||
definer: '',
|
||||
table: this.schemaTables.length ? this.schemaTables[0].name : null,
|
||||
activation: 'BEFORE',
|
||||
event: this.customizations.triggerMultipleEvents ? ['INSERT'] : 'INSERT',
|
||||
name: ''
|
||||
};
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
|
||||
const customizations = computed(() => {
|
||||
return workspace.value.customizations;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalTrigger.value) !== JSON.stringify(localTrigger.value);
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
const isDefinerInUsers = computed(() => {
|
||||
return originalTrigger.value ? workspace.value.users.some(user => originalTrigger.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
const schemaTables = computed(() => {
|
||||
const schemaTables = workspace.value.structure
|
||||
.filter(schema => schema.name === props.schema)
|
||||
.map(schema => schema.tables);
|
||||
|
||||
window.addEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
changeEvents (event) {
|
||||
if (this.customizations.triggerMultipleEvents) {
|
||||
this.localEvents[event] = !this.localEvents[event];
|
||||
this.localTrigger.event = [];
|
||||
for (const key in this.localEvents) {
|
||||
if (this.localEvents[key])
|
||||
this.localTrigger.event.push(key);
|
||||
}
|
||||
}
|
||||
},
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localTrigger
|
||||
};
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
});
|
||||
|
||||
try {
|
||||
const { status, response } = await Triggers.createTrigger(params);
|
||||
const users = computed(() => {
|
||||
const users = [{ value: '' }, ...workspace.value.users];
|
||||
if (!isDefinerInUsers.value) {
|
||||
const [name, host] = originalTrigger.value.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
return users;
|
||||
});
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localTrigger.name,
|
||||
elementType: 'trigger',
|
||||
type: 'trigger-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, trigger: this.localTrigger.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
|
||||
|
||||
Object.keys(this.localEvents).forEach(event => {
|
||||
this.localEvents[event] = false;
|
||||
});
|
||||
|
||||
if (this.customizations.triggerMultipleEvents) {
|
||||
this.originalTrigger.event.forEach(e => {
|
||||
this.localEvents[e] = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const changeEvents = (event: 'INSERT' | 'UPDATE' | 'DELETE') => {
|
||||
if (customizations.value.triggerMultipleEvents) {
|
||||
localEvents.value[event] = !localEvents.value[event];
|
||||
localTrigger.value.event = [];
|
||||
for (const key in localEvents.value) {
|
||||
if (localEvents.value[key as 'INSERT' | 'UPDATE' | 'DELETE'])
|
||||
localTrigger.value.event.push(key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localTrigger.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Triggers.createTrigger(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localTrigger.value.name,
|
||||
elementType: 'trigger',
|
||||
type: 'trigger-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, trigger: localTrigger.value.name });
|
||||
}
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
const clearChanges = () => {
|
||||
localTrigger.value = JSON.parse(JSON.stringify(originalTrigger.value));
|
||||
queryEditor.value.editor.session.setValue(localTrigger.value.sql);
|
||||
|
||||
Object.keys(localEvents.value).forEach((event: 'INSERT' | 'UPDATE' | 'DELETE') => {
|
||||
localEvents.value[event] = false;
|
||||
});
|
||||
|
||||
if (customizations.value.triggerMultipleEvents) {
|
||||
originalTrigger.value.event.forEach((e: 'INSERT' | 'UPDATE' | 'DELETE') => {
|
||||
localEvents.value[e] = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
originalTrigger.value = {
|
||||
sql: customizations.value.triggerSql,
|
||||
definer: '',
|
||||
table: schemaTables.value.length ? schemaTables.value[0].name : null,
|
||||
activation: 'BEFORE',
|
||||
event: customizations.value.triggerMultipleEvents ? ['INSERT'] : 'INSERT',
|
||||
name: ''
|
||||
};
|
||||
|
||||
localTrigger.value = JSON.parse(JSON.stringify(originalTrigger.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@
|
|||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<span>{{ t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
:title="t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<span>{{ t('word.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.name') }}
|
||||
{{ t('word.name') }}
|
||||
</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div v-if="customizations.triggerFunctionlanguages" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.language') }}
|
||||
{{ t('word.language') }}
|
||||
</label>
|
||||
<BaseSelect
|
||||
v-model="localFunction.language"
|
||||
|
|
@ -55,20 +55,20 @@
|
|||
<div v-if="customizations.definer" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.definer') }}
|
||||
{{ t('word.definer') }}
|
||||
</label>
|
||||
<BaseSelect
|
||||
v-model="localFunction.definer"
|
||||
:options="workspace.users"
|
||||
:option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="customizations.comment" class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.comment') }}
|
||||
{{ t('word.comment') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="localFunction.comment"
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
</div>
|
||||
<div class="workspace-query-results column col-12 mt-2 p-relative">
|
||||
<BaseLoader v-if="isLoading" />
|
||||
<label class="form-label ml-2">{{ $t('message.functionBody') }}</label>
|
||||
<label class="form-label ml-2">{{ t('message.functionBody') }}</label>
|
||||
<QueryEditor
|
||||
v-show="isSelected"
|
||||
ref="queryEditor"
|
||||
|
|
@ -93,190 +93,157 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import Functions from '@/ipc-api/Functions';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewTriggerFunction',
|
||||
components: {
|
||||
BaseLoader,
|
||||
QueryEditor,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isParamsModal: false,
|
||||
isAskingParameters: false,
|
||||
originalFunction: {},
|
||||
localFunction: {},
|
||||
lastFunction: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
customizations () {
|
||||
return this.workspace.customizations;
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalFunction
|
||||
? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
|
||||
: true;
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
changeBreadcrumbs,
|
||||
setUnsavedChanges,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const originalFunction = ref(null);
|
||||
const localFunction = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const customizations = computed(() => {
|
||||
return workspace.value.customizations;
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalFunction.value) !== JSON.stringify(localFunction.value);
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localFunction.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Functions.createTriggerFunction(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localFunction.value.name,
|
||||
elementType: 'triggerFunction',
|
||||
type: 'trigger-function-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, triggerFunction: localFunction.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.originalFunction = {
|
||||
sql: this.customizations.triggerFunctionSql,
|
||||
language: this.customizations.triggerFunctionlanguages.length ? this.customizations.triggerFunctionlanguages[0] : null,
|
||||
name: ''
|
||||
};
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const clearChanges = () => {
|
||||
localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
|
||||
queryEditor.value.editor.session.setValue(localFunction.value.sql);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localFunction
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Functions.createTriggerFunction(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localFunction.name,
|
||||
elementType: 'triggerFunction',
|
||||
type: 'trigger-function-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.localFunction.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
originalFunction.value = {
|
||||
sql: customizations.value.triggerFunctionSql,
|
||||
language: customizations.value.triggerFunctionlanguages.length ? customizations.value.triggerFunctionlanguages[0] : null,
|
||||
name: ''
|
||||
};
|
||||
|
||||
localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) changeBreadcrumbs({ schema: props.schema });
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@
|
|||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<span>{{ t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
:title="t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<span>{{ t('word.clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="workspace-query-info">
|
||||
<div class="d-flex" :title="$t('word.schema')">
|
||||
<div class="d-flex" :title="t('word.schema')">
|
||||
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="columns">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.name') }}</label>
|
||||
<label class="form-label">{{ t('word.name') }}</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localView.name"
|
||||
|
|
@ -45,19 +45,19 @@
|
|||
</div>
|
||||
<div class="column col-auto">
|
||||
<div v-if="workspace.customizations.definer" class="form-group">
|
||||
<label class="form-label">{{ $t('word.definer') }}</label>
|
||||
<label class="form-label">{{ t('word.definer') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localView.definer"
|
||||
:options="users"
|
||||
:option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
:option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
|
||||
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
||||
class="form-select"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-auto mr-2">
|
||||
<div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
|
||||
<label class="form-label">{{ $t('message.sqlSecurity') }}</label>
|
||||
<label class="form-label">{{ t('message.sqlSecurity') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localView.security"
|
||||
:options="['DEFINER', 'INVOKER']"
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
</div>
|
||||
<div class="column col-auto mr-2">
|
||||
<div v-if="workspace.customizations.viewAlgorithm" class="form-group">
|
||||
<label class="form-label">{{ $t('word.algorithm') }}</label>
|
||||
<label class="form-label">{{ t('word.algorithm') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localView.algorithm"
|
||||
:options="['UNDEFINED', 'MERGE', 'TEMPTABLE']"
|
||||
|
|
@ -77,10 +77,10 @@
|
|||
</div>
|
||||
<div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('message.updateOption') }}</label>
|
||||
<label class="form-label">{{ t('message.updateOption') }}</label>
|
||||
<BaseSelect
|
||||
v-model="localView.updateOption"
|
||||
:option-track-by="(user) => user.value"
|
||||
:option-track-by="(user: any) => user.value"
|
||||
:options="[{label: 'None', value: ''}, {label: 'CASCADED', value: 'CASCADED'}, {label: 'LOCAL', value: 'LOCAL'}]"
|
||||
class="form-select"
|
||||
/>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
</div>
|
||||
<div class="workspace-query-results column col-12 mt-2 p-relative">
|
||||
<BaseLoader v-if="isLoading" />
|
||||
<label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
|
||||
<label class="form-label ml-2">{{ t('message.selectStatement') }}</label>
|
||||
<QueryEditor
|
||||
v-show="isSelected"
|
||||
ref="queryEditor"
|
||||
|
|
@ -103,194 +103,178 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { Ace } from 'ace-builds';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import QueryEditor from '@/components/QueryEditor';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import QueryEditor from '@/components/QueryEditor.vue';
|
||||
import Views from '@/ipc-api/Views';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabNewView',
|
||||
components: {
|
||||
BaseLoader,
|
||||
QueryEditor,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
},
|
||||
setup () {
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const props = defineProps({
|
||||
tabUid: String,
|
||||
connection: Object,
|
||||
tab: Object,
|
||||
isSelected: Boolean,
|
||||
schema: String
|
||||
});
|
||||
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
changeBreadcrumbs,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
} = workspacesStore;
|
||||
const { addNotification } = useNotificationsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
return {
|
||||
addNotification,
|
||||
selectedWorkspace,
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
changeBreadcrumbs,
|
||||
newTab,
|
||||
removeTab,
|
||||
renameTabs
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
originalView: {},
|
||||
localView: {},
|
||||
lastView: null,
|
||||
sqlProxy: '',
|
||||
editorHeight: 300
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
|
||||
},
|
||||
isDefinerInUsers () {
|
||||
return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
},
|
||||
users () {
|
||||
const users = [{ value: '' }, ...this.workspace.users];
|
||||
if (!this.isDefinerInUsers) {
|
||||
const [name, host] = this.originalView.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
const {
|
||||
getWorkspace,
|
||||
refreshStructure,
|
||||
setUnsavedChanges,
|
||||
changeBreadcrumbs,
|
||||
newTab,
|
||||
removeTab
|
||||
} = workspacesStore;
|
||||
|
||||
return users;
|
||||
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const originalView = ref(null);
|
||||
const localView = ref(null);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const isChanged = computed(() => {
|
||||
return JSON.stringify(originalView.value) !== JSON.stringify(localView.value);
|
||||
});
|
||||
|
||||
const isDefinerInUsers = computed(() => {
|
||||
return originalView.value ? workspace.value.users.some(user => originalView.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
||||
});
|
||||
|
||||
const users = computed(() => {
|
||||
const users = [{ value: '' }, ...workspace.value.users];
|
||||
if (!isDefinerInUsers.value) {
|
||||
const [name, host] = originalView.value.definer.replaceAll('`', '').split('@');
|
||||
users.unshift({ name, host });
|
||||
}
|
||||
|
||||
return users;
|
||||
});
|
||||
|
||||
const saveChanges = async () => {
|
||||
if (isSaving.value) return;
|
||||
isSaving.value = true;
|
||||
|
||||
const params = {
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
...localView.value
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Views.createView(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await refreshStructure(props.connection.uid);
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
schema: props.schema,
|
||||
elementName: localView.value.name,
|
||||
elementType: 'view',
|
||||
type: 'view-props'
|
||||
});
|
||||
|
||||
removeTab({ uid: props.connection.uid, tab: props.tab.uid });
|
||||
changeBreadcrumbs({ schema: props.schema, view: localView.value.name });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val) {
|
||||
this.changeBreadcrumbs({ schema: this.schema, view: this.view });
|
||||
else
|
||||
addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
this.originalView = {
|
||||
algorithm: 'UNDEFINED',
|
||||
definer: '',
|
||||
security: 'DEFINER',
|
||||
updateOption: '',
|
||||
sql: '',
|
||||
name: ''
|
||||
};
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
this.localView = JSON.parse(JSON.stringify(this.originalView));
|
||||
const clearChanges = () => {
|
||||
localView.value = JSON.parse(JSON.stringify(originalView.value));
|
||||
queryEditor.value.editor.session.setValue(localView.value.sql);
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
this.resizeQueryEditor();
|
||||
}, 50);
|
||||
const resizeQueryEditor = () => {
|
||||
if (queryEditor.value) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
editorHeight.value = size;
|
||||
queryEditor.value.editor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
mounted () {
|
||||
if (this.isSelected)
|
||||
this.changeBreadcrumbs({ schema: this.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.firstInput.focus();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('resize', this.resizeQueryEditor);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
...this.localView
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Views.createView(params);
|
||||
|
||||
if (status === 'success') {
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
|
||||
this.newTab({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: this.localView.name,
|
||||
elementType: 'view',
|
||||
type: 'view-props'
|
||||
});
|
||||
|
||||
this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
|
||||
this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localView = JSON.parse(JSON.stringify(this.originalView));
|
||||
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
|
||||
},
|
||||
resizeQueryEditor () {
|
||||
if (this.$refs.queryEditor) {
|
||||
const footer = document.getElementById('footer');
|
||||
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
|
||||
this.editorHeight = size;
|
||||
this.$refs.queryEditor.editor.resize();
|
||||
}
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (props.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
||||
if (isChanged.value)
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isSelected, (val) => {
|
||||
if (val) {
|
||||
changeBreadcrumbs({ schema: props.schema, view: localView.value.name });
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
watch(isChanged, (val) => {
|
||||
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
||||
});
|
||||
|
||||
originalView.value = {
|
||||
algorithm: 'UNDEFINED',
|
||||
definer: '',
|
||||
security: 'DEFINER',
|
||||
updateOption: '',
|
||||
sql: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
localView.value = JSON.parse(JSON.stringify(originalView.value));
|
||||
|
||||
setTimeout(() => {
|
||||
resizeQueryEditor();
|
||||
}, 50);
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.isSelected)
|
||||
changeBreadcrumbs({ schema: props.schema });
|
||||
|
||||
setTimeout(() => {
|
||||
firstInput.value.focus();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeQueryEditor);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -249,6 +249,11 @@ export default {
|
|||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
defaultCollation () {
|
||||
if (this.workspace.customizations.collations)
|
||||
return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server')?.value || '';
|
||||
return '';
|
||||
},
|
||||
defaultEngine () {
|
||||
const engine = this.getDatabaseVariable(this.connection.uid, 'default_storage_engine');
|
||||
return engine ? engine.value : '';
|
||||
|
|
@ -440,6 +445,7 @@ export default {
|
|||
const changes = [];
|
||||
this.localFields.forEach((field, i) => {
|
||||
const originalField = this.originalFields.find(oField => oField._antares_id === field._antares_id);
|
||||
if (!originalField) return;
|
||||
const after = i > 0 ? this.localFields[i - 1].name : false;
|
||||
const orgName = originalField.name;
|
||||
|
||||
|
|
@ -586,7 +592,7 @@ export default {
|
|||
order: this.localFields.length + 1,
|
||||
default: null,
|
||||
charset: null,
|
||||
collation: null,
|
||||
collation: this.defaultCollation,
|
||||
autoIncrement: false,
|
||||
onUpdate: '',
|
||||
comment: ''
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>// TODO: expose tableWrapper
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export interface Workspace {
|
|||
structure: WorkspaceStructure[];
|
||||
variables: { name: string; value: string }[];
|
||||
collations: CollationInfos[];
|
||||
users: { host: string; name: string; password: string }[];
|
||||
users: { host: string; name: string; password?: string }[];
|
||||
breadcrumbs: Breadcrumb;
|
||||
loadingElements: { name: string; schema: string; type: string }[];
|
||||
loadedSchemas: Set<string>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue