fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

Merge branch 'master' of https://github.com/antares-sql/antares into ts-renderer

Browse Source
This commit is contained in:
Fabio Di Stasio
2022-06-13 09:29:05 +02:00
parent bd46d17424 c37138c6f5
commit 33a4663694
27 changed files with 354 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/BaseSelect.vue
View File

@ -222,8 +222,16 @@ export default defineComponent({
hightlightedIndex.value = 0;
});
watch(() => props.modelValue, (val) => {
internalValue.value = val;
});
watch(() => props.value, (val) => {
internalValue.value = val;
});
const currentOptionLabel = computed(() =>
flattenOptions.value.find(d => d.value === props.modelValue)?.label
flattenOptions.value.find(d => d.value === internalValue.value)?.label
);
const select = (opt) => {

5
src/renderer/components/TheSettingBar.vue
View File

@ -77,6 +77,7 @@ const { showSettingModal, showScratchpad } = applicationStore;
const { getConnectionName, updateConnections } = connectionsStore;
const { getWorkspace, selectWorkspace } = workspacesStore;
const isLinux = process.platform === 'linux';
const isContext: Ref<boolean> = ref(false);
const isDragging: Ref<boolean> = ref(false);
const contextEvent: Ref<MouseEvent> = ref(null);
@ -101,7 +102,9 @@ const contextMenu = (event: MouseEvent, connection: ConnectionParams) => {
const tooltipPosition = (e: Event) => {
const el = e.target ? e.target : e;
const fromTop = window.scrollY + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
const fromTop = isLinux
? window.scrollY + (el as HTMLElement).getBoundingClientRect().top + ((el as HTMLElement).offsetHeight / 4)
: window.scrollY + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
(el as HTMLElement).querySelector<HTMLElement>('.ex-tooltip-content').style.top = `${fromTop}px`;
};

44
src/renderer/components/TheTitleBar.vue
View File

@ -1,5 +1,9 @@
<template>
<div id="titlebar" @dblclick="toggleFullScreen">
<div
v-if="!isLinux"
id="titlebar"
@dblclick="toggleFullScreen"
>
<div class="titlebar-resizer" />
<div class="titlebar-elements">
<img
@ -26,28 +30,7 @@
>
<i class="mdi mdi-24px mdi-refresh" />
</div>
<div
v-if="!isMacOS"
class="titlebar-element"
@click="minimizeApp"
>
<i class="mdi mdi-24px mdi-minus" />
</div>
<div
v-if="!isMacOS"
class="titlebar-element"
@click="toggleFullScreen"
>
<i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
<i v-else class="mdi mdi-24px mdi-fullscreen" />
</div>
<div
v-if="!isMacOS"
class="titlebar-element close-button"
@click="closeApp"
>
<i class="mdi mdi-24px mdi-close" />
</div>
<div v-if="isWindows" style="width: 140px;" />
</div>
</div>
</template>
@ -55,7 +38,6 @@
<script setup lang="ts">
import { computed, onUnmounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { ipcRenderer } from 'electron';
import { getCurrentWindow } from '@electron/remote';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -74,7 +56,9 @@ const appIcon = require('@/images/logo.svg');
const w = ref(getCurrentWindow());
const isMaximized = ref(getCurrentWindow().isMaximized());
const isDevelopment = ref(process.env.NODE_ENV === 'development');
const isMacOS = ref(process.platform === 'darwin');
const isMacOS = process.platform === 'darwin';
const isWindows = process.platform === 'win32';
const isLinux = process.platform === 'linux';
const windowTitle = computed(() => {
if (!selectedWorkspace.value) return '';
@ -87,14 +71,6 @@ const windowTitle = computed(() => {
return [connectionName, ...breadcrumbs].join(' • ');
});
const closeApp = () => {
ipcRenderer.send('close-app');
};
const minimizeApp = () => {
w.value.minimize();
};
const toggleFullScreen = () => {
if (isMaximized.value)
w.value.unmaximize();
@ -165,7 +141,7 @@ onUnmounted(() => {
height: $titlebar-height;
line-height: 0;
padding: 0 0.7rem;
opacity: 0.7;
opacity: 0.9;
transition: opacity 0.2s;
-webkit-app-region: no-drag;

21
src/renderer/components/Workspace.vue
View File

@ -315,10 +315,9 @@
</template>
</Draggable>
<WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
<template v-for="tab of workspace.tabs">
<template v-for="tab of workspace.tabs" :key="tab.uid">
<WorkspaceTabQuery
v-if="tab.type==='query'"
:key="tab.uid"
v-if="tab.type ==='query'"
:tab-uid="tab.uid"
:tab="tab"
:is-selected="selectedTab === tab.uid"
@ -326,7 +325,7 @@
/>
<WorkspaceTabTable
v-else-if="['temp-data', 'data'].includes(tab.type)"
:key="tab.uid+'_data'"
v-once
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -336,7 +335,6 @@
/>
<WorkspaceTabNewTable
v-else-if="tab.type === 'new-table'"
:key="tab.uid+'_new-table'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -345,7 +343,6 @@
/>
<WorkspaceTabPropsTable
v-else-if="tab.type === 'table-props'"
:key="tab.uid+'_table-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -354,7 +351,6 @@
/>
<WorkspaceTabNewView
v-else-if="tab.type === 'new-view'"
:key="tab.uid+'_new-view'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -363,7 +359,6 @@
/>
<WorkspaceTabPropsView
v-else-if="tab.type === 'view-props'"
:key="tab.uid+'_view-props'"
:tab-uid="tab.uid"
:is-selected="selectedTab === tab.uid"
:connection="connection"
@ -372,7 +367,6 @@
/>
<WorkspaceTabNewTrigger
v-else-if="tab.type === 'new-trigger'"
:key="tab.uid+'_new-trigger'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -382,7 +376,6 @@
/>
<WorkspaceTabPropsTrigger
v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
:key="tab.uid+'_trigger-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -391,7 +384,6 @@
/>
<WorkspaceTabNewTriggerFunction
v-else-if="tab.type === 'new-trigger-function'"
:key="tab.uid+'_new-trigger-function'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -401,7 +393,6 @@
/>
<WorkspaceTabPropsTriggerFunction
v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
:key="tab.uid+'_trigger-function-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -410,7 +401,6 @@
/>
<WorkspaceTabNewRoutine
v-else-if="tab.type === 'new-routine'"
:key="tab.uid+'_new-routine'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -420,7 +410,6 @@
/>
<WorkspaceTabPropsRoutine
v-else-if="['temp-routine-props', 'routine-props'].includes(tab.type)"
:key="tab.uid+'_routine-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -429,7 +418,6 @@
/>
<WorkspaceTabNewFunction
v-else-if="tab.type === 'new-function'"
:key="tab.uid+'_new-function'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -439,7 +427,6 @@
/>
<WorkspaceTabPropsFunction
v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
:key="tab.uid+'_function-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
@ -448,7 +435,6 @@
/>
<WorkspaceTabNewScheduler
v-else-if="tab.type === 'new-scheduler'"
:key="tab.uid+'_new-scheduler'"
:tab-uid="tab.uid"
:tab="tab"
:connection="connection"
@ -458,7 +444,6 @@
/>
<WorkspaceTabPropsScheduler
v-else-if="['temp-scheduler-props', 'scheduler-props'].includes(tab.type)"
:key="tab.uid+'_scheduler-props'"
:tab-uid="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"

4
src/renderer/components/WorkspaceAddConnectionPanel.vue
View File

@ -516,9 +516,9 @@ const continueTest = async (credentials: { user: string; password: string }) =>
isTesting.value = false;
};
const saveConnection = () => {
const saveConnection = async () => {
await addConnection(connection.value);
selectWorkspace(connection.value.uid);
return addConnection(connection.value);
};
const closeAsking = () => {

11
src/renderer/components/WorkspaceTabPropsTable.vue
View File

@ -438,15 +438,12 @@ export default {
// Fields Changes
const changes = [];
this.originalFields.forEach((originalField, oI) => {
const lI = this.localFields.findIndex(localField => localField._antares_id === originalField._antares_id);
const originalSibling = oI > 0 ? this.originalFields[oI - 1]._antares_id : false;
const localSibling = lI > 0 ? this.localFields[lI - 1]._antares_id : false;
const after = lI > 0 ? this.localFields[lI - 1].name : false;
this.localFields.forEach((field, i) => {
const originalField = this.originalFields.find(oField => oField._antares_id === field._antares_id);
const after = i > 0 ? this.localFields[i - 1].name : false;
const orgName = originalField.name;
if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
changes.push({ ...field, after, orgName });
});
// OPTIONS

143
src/renderer/components/WorkspaceTabQueryTable.vue
View File

@ -5,7 +5,6 @@
tabindex="0"
:style="{'height': resultsSize+'px'}"
@keyup.delete="showDeleteConfirmModal"
@keydown.ctrl.a="selectAllRows($event)"
@keydown.esc="deselectRows"
>
<TableContext
@ -78,7 +77,11 @@
:key-usage="keyUsage"
:element-type="elementType"
:class="{'selected': selectedRows.includes(row._antares_id)}"
@select-row="selectRow($event, row._antares_id)"
:selected="selectedRows.includes(row._antares_id)"
:selected-cell="selectedRows.length === 1 && selectedRows.includes(row._antares_id) ? selectedField : null"
@start-editing="isEditingRow = true"
@stop-editing="isEditingRow = false"
@select-row="selectRow"
@update-field="updateField($event, row)"
@contextmenu="contextMenu"
/>
@ -162,7 +165,9 @@ export default {
currentSortDir: 'asc',
resultsetIndex: 0,
scrollElement: null,
rowHeight: 23
rowHeight: 23,
selectedField: null,
isEditingRow: false
};
},
computed: {
@ -268,9 +273,11 @@ export default {
},
mounted () {
window.addEventListener('resize', this.resizeResults);
window.addEventListener('keydown', this.onKey);
},
unmounted () {
window.removeEventListener('resize', this.resizeResults);
window.removeEventListener('keydown', this.onKey);
},
methods: {
fieldType (cKey) {
@ -447,20 +454,23 @@ export default {
return row;
});
},
selectRow (event, row) {
if (event.ctrlKey) {
if (this.selectedRows.includes(row))
this.selectedRows = this.selectedRows.filter(el => el !== row);
selectRow (event, row, field) {
this.selectedField = field;
const selectedRowId = row._antares_id;
if (event.ctrlKey || event.metaKey) {
if (this.selectedRows.includes(selectedRowId))
this.selectedRows = this.selectedRows.filter(el => el !== selectedRowId);
else
this.selectedRows.push(row);
this.selectedRows.push(selectedRowId);
}
else if (event.shiftKey) {
if (!this.selectedRows.length)
this.selectedRows.push(row);
this.selectedRows.push(selectedRowId);
else {
const lastID = this.selectedRows.slice(-1)[0];
const lastIndex = this.sortedResults.findIndex(el => el._antares_id === lastID);
const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === row);
const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === selectedRowId);
if (lastIndex > clickedIndex) {
for (let i = clickedIndex; i < lastIndex; i++)
this.selectedRows.push(this.sortedResults[i]._antares_id);
@ -472,18 +482,20 @@ export default {
}
}
else
this.selectedRows = [row];
this.selectedRows = [selectedRowId];
},
selectAllRows (e) {
if (e.target.classList.contains('editable-field')) return;
this.selectedField = 0;
this.selectedRows = this.localResults.reduce((acc, curr) => {
acc.push(curr._antares_id);
return acc;
}, []);
},
deselectRows () {
this.selectedRows = [];
if (!this.isEditingRow)
this.selectedRows = [];
},
contextMenu (event, cell) {
if (event.target.localName === 'input') return;
@ -536,6 +548,113 @@ export default {
content: rows,
filename
});
},
onKey (e) {
if (!this.isSelected)
return;
if (this.isEditingRow)
return;
if ((e.ctrlKey || e.metaKey) && e.code === 'KeyA' && !e.altKey)
this.selectAllRows(e);
// row naviation stuff
if ((e.code.includes('Arrow') || e.code === 'Tab') && this.sortedResults.length > 0 && !e.altKey) {
e.preventDefault();
const aviableFields= Object.keys(this.sortedResults[0]).slice(0, -1); // removes _antares_id
if (!this.selectedField)
this.selectedField = aviableFields[0];
const selectedId = this.selectedRows[0];
const selectedIndex = this.sortedResults.findIndex(row => row._antares_id === selectedId);
const selectedFieldIndex = aviableFields.findIndex(field => field === this.selectedField);
let nextIndex = 0;
let nextFieldIndex = 0;
if (selectedIndex > -1) {
switch (e.code) {
case 'ArrowDown':
nextIndex = selectedIndex + 1;
nextFieldIndex = selectedFieldIndex;
if (nextIndex > this.sortedResults.length -1)
nextIndex = this.sortedResults.length -1;
break;
case 'ArrowUp':
nextIndex = selectedIndex - 1;
nextFieldIndex = selectedFieldIndex;
if (nextIndex < 0)
nextIndex = 0;
break;
case 'ArrowRight':
nextIndex = selectedIndex;
nextFieldIndex = selectedFieldIndex + 1;
if (nextFieldIndex > aviableFields.length -1)
nextFieldIndex = 0;
break;
case 'ArrowLeft':
nextIndex = selectedIndex;
nextFieldIndex = selectedFieldIndex - 1;
if (nextFieldIndex < 0)
nextFieldIndex = aviableFields.length -1;
break;
case 'Tab':
nextIndex = selectedIndex;
if (e.shiftKey) {
nextFieldIndex = selectedFieldIndex - 1;
if (nextFieldIndex < 0)
nextFieldIndex = aviableFields.length -1;
}
else {
nextFieldIndex = selectedFieldIndex + 1;
if (nextFieldIndex > aviableFields.length -1)
nextFieldIndex = 0;
}
}
}
if (this.sortedResults[nextIndex] && nextIndex !== selectedIndex) {
this.selectedRows = [this.sortedResults[nextIndex]._antares_id];
this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
}
if (aviableFields[nextFieldIndex] && nextFieldIndex !== selectedFieldIndex) {
this.selectedField = aviableFields[nextFieldIndex];
this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
}
}
},
scrollToCell (el) {
if (!el) return;
const visYMin = this.scrollElement.scrollTop;
const visYMax = this.scrollElement.scrollTop + this.scrollElement.clientHeight - el.clientHeight;
const visXMin = this.scrollElement.scrollLeft;
const visXMax = this.scrollElement.scrollLeft + this.scrollElement.clientWidth - el.clientWidth;
if (el.offsetTop < visYMin)
this.scrollElement.scrollTop = el.offsetTop;
else if (el.offsetTop >= visYMax)
this.scrollElement.scrollTop = el.offsetTop - this.scrollElement.clientHeight + el.clientHeight;
if (el.offsetLeft < visXMin)
this.scrollElement.scrollLeft = el.offsetLeft;
else if (el.offsetLeft >= visXMax)
this.scrollElement.scrollLeft = el.offsetLeft - this.scrollElement.clientWidth + el.clientWidth;
}
}
};

81
src/renderer/components/WorkspaceTabQueryTableRow.vue
View File

@ -2,14 +2,15 @@
<div
class="tr"
:style="{height: itemHeight+'px'}"
@click="selectRow($event, row._antares_id)"
>
<div
v-for="(col, cKey) in row"
v-show="cKey !== '_antares_id'"
:key="cKey"
class="td p-0"
tabindex="0"
:class="{selected: selectedCell === cKey}"
@click="selectRow($event, cKey)"
@contextmenu.prevent="openContext($event, { id: row._antares_id, orgField: cKey })"
>
<template v-if="cKey !== '_antares_id'">
@ -17,7 +18,7 @@
v-if="!isInlineEditor[cKey] && fields[cKey]"
class="cell-content"
:class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
@dblclick="editON($event, col, cKey)"
@dblclick="editON(cKey)"
>{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length)) }}</span>
<ForeignKeySelect
v-else-if="isForeignKey(cKey)"
@ -105,7 +106,7 @@
<div class="mr-4">
<b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
</div>
<div>
<div v-if="editingType">
<b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
</div>
</div>
@ -170,7 +171,9 @@
<b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
<b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
</div>
<div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
<div v-if="editingType">
<b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
</div>
</div>
<div class="mt-3">
<label>{{ $t('message.uploadFile') }}</label>
@ -230,9 +233,11 @@ export default {
fields: Object,
keyUsage: Array,
itemHeight: Number,
elementType: { type: String, default: 'table' }
elementType: { type: String, default: 'table' },
selected: { type: Boolean, default: false },
selectedCell: { type: String, default: null }
},
emits: ['update-field', 'select-row', 'contextmenu'],
emits: ['update-field', 'select-row', 'contextmenu', 'start-editing', 'stop-editing'],
data () {
return {
isInlineEditor: {},
@ -336,6 +341,9 @@ export default {
return false;
},
isBaseSelectField () {
return this.isForeignKey(this.editingField) || this.inputProps.type === 'boolean' || this.enumArray;
},
enumArray () {
if (this.fields[this.editingField] && this.fields[this.editingField].enumValues)
return this.fields[this.editingField].enumValues.replaceAll('\'', '').split(',');
@ -362,8 +370,21 @@ export default {
this.editorMode = this.availableLanguages.find(lang => lang.id === filteredLanguages[0].languageId).slug;
})();
}
},
selected (isSelected) {
if (isSelected)
window.addEventListener('keydown', this.onKey);
else {
this.editOFF();
window.removeEventListener('keydown', this.onKey);
}
}
},
beforeUnmount () {
if (this.selected)
window.removeEventListener('keydown', this.onKey);
},
methods: {
isForeignKey (key) {
if (key.includes('.'))
@ -382,11 +403,10 @@ export default {
bufferToBase64 (val) {
return bufferToBase64(val);
},
editON (event, content, field) {
editON (field) {
if (!this.isEditable || this.editingType === 'none') return;
window.addEventListener('keydown', this.onKey);
const content = this.row[field];
const type = this.fields[field].type.toUpperCase();
this.originalContent = this.typeFormat(content, type, this.fields[field].length);
this.editingType = type;
@ -396,6 +416,7 @@ export default {
if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
this.isTextareaEditor = true;
this.editingContent = this.typeFormat(content, type);
this.$emit('start-editing', field);
return;
}
@ -405,6 +426,7 @@ export default {
this.isMapModal = true;
this.editingContent = this.typeFormat(content, type);
}
this.$emit('start-editing', field);
return;
}
@ -426,19 +448,21 @@ export default {
};
}
}
this.$emit('start-editing', field);
return;
}
// Inline editable fields
this.editingContent = this.originalContent;
this.$nextTick(() => { // Focus on input
event.target.blur();
this.$nextTick(() => document.querySelector('.editable-field').focus());
});
const obj = { [field]: true };
this.isInlineEditor = { ...this.isInlineEditor, ...obj };
this.$nextTick(() => { // Focus on input
document.querySelector('.editable-field').focus();
});
this.$emit('start-editing', field);
},
editOFF () {
if (!this.editingField) return;
@ -451,7 +475,13 @@ export default {
this.editingContent = this.editingContent.slice(0, -1);
}
if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) return;// If not changed
// If not changed
if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) {
this.editingType = null;
this.editingField = null;
this.$emit('stop-editing', this.editingField);
return;
}
content = this.editingContent;
}
@ -472,15 +502,17 @@ export default {
content
});
this.$emit('stop-editing', this.editingField);
this.editingType = null;
this.editingField = null;
window.removeEventListener('keydown', this.onKey);
},
hideEditorModal () {
this.isTextareaEditor = false;
this.isBlobEditor = false;
this.isMapModal = false;
this.isMultiSpatial = false;
this.$emit('stop-editing', this.editingField);
},
downloadFile () {
const downloadLink = document.createElement('a');
@ -508,8 +540,8 @@ export default {
};
this.willBeDeleted = true;
},
selectRow (event, row) {
this.$emit('select-row', event, row);
selectRow (event, field) {
this.$emit('select-row', event, this.row, field);
},
getKeyUsage (keyName) {
if (keyName.includes('.'))
@ -523,10 +555,17 @@ export default {
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape') {
if (!this.editingField && e.key === 'Enter')
return this.editON(this.selectedCell);
if (this.editingField && e.key === 'Enter' && !this.isBaseSelectField)
return this.editOFF();
if (this.editingField && e.key === 'Escape') {
this.isInlineEditor[this.editingField] = false;
this.editingField = null;
window.removeEventListener('keydown', this.onKey);
this.$emit('stop-editing', this.editingField);
}
},
formatBytes,