From 6a6f43a718561e0abd2cb89048b7fe45d08736ae Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Sat, 16 Jul 2022 12:01:37 +0200 Subject: [PATCH] feat: initial console implementation --- src/common/interfaces/antares.ts | 2 +- src/common/shortcuts.ts | 5 + src/main/libs/AntaresCore.ts | 2 +- src/main/main.ts | 8 +- src/renderer/App.vue | 8 +- src/renderer/components/TheFooter.vue | 27 +++- src/renderer/components/Workspace.vue | 11 +- .../components/WorkspaceQueryConsole.vue | 147 ++++++++++++++++++ src/renderer/components/WorkspaceTabQuery.vue | 6 +- .../components/WorkspaceTabQueryTable.vue | 15 +- src/renderer/i18n/en-US.ts | 6 +- src/renderer/index.ts | 6 + src/renderer/scss/themes/dark-theme.scss | 5 + src/renderer/stores/console.ts | 50 ++++++ 14 files changed, 278 insertions(+), 20 deletions(-) create mode 100644 src/renderer/components/WorkspaceQueryConsole.vue create mode 100644 src/renderer/stores/console.ts diff --git a/src/common/interfaces/antares.ts b/src/common/interfaces/antares.ts index 8614443d..b98ee5ef 100644 --- a/src/common/interfaces/antares.ts +++ b/src/common/interfaces/antares.ts @@ -25,7 +25,7 @@ export interface IpcResponse { */ export interface ClientParams { client: ClientCode; - uid: string; + uid?: string; params: mysql.ConnectionOptions & {schema: string; ssl?: mysql.SslOptions; ssh?: SSHConfig; readonly: boolean} | pg.ClientConfig & {schema: string; ssl?: mysql.SslOptions; ssh?: SSHConfig; readonly: boolean} diff --git a/src/common/shortcuts.ts b/src/common/shortcuts.ts index 8a035110..720fe923 100644 --- a/src/common/shortcuts.ts +++ b/src/common/shortcuts.ts @@ -29,6 +29,11 @@ const shortcuts: ShortcutRecord[] = [ event: 'open-connections-modal', keys: ['Shift+CommandOrControl+Space'], description: 'Show all connections' + }, + { + event: 'toggle-console', + keys: ['CommandOrControl+F12', 'CommandOrControl+`'], + description: 'Toggle console' } ]; diff --git a/src/main/libs/AntaresCore.ts b/src/main/libs/AntaresCore.ts index e8106513..b7b34828 100644 --- a/src/main/libs/AntaresCore.ts +++ b/src/main/libs/AntaresCore.ts @@ -8,7 +8,7 @@ const queryLogger = ({ sql, cUid }: {sql: string; cUid: string}) => { // Remove comments, newlines and multiple spaces const escapedSql = sql.replace(/(\/\*(.|[\r\n])*?\*\/)|(--(.*|[\r\n]))/gm, '').replace(/\s\s+/g, ' '); const mainWindow = webContents.fromId(1); - mainWindow.send('query-log', { cUid, sql: escapedSql }); + mainWindow.send('query-log', { cUid, sql: escapedSql, date: new Date() }); console.log(escapedSql); }; diff --git a/src/main/main.ts b/src/main/main.ts index 36ad7260..a69ccf2d 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -155,9 +155,11 @@ else { } } - // Main process shortcuts - if (isDevelopment) { - globalShortcut.register('CommandOrControl+F12', () => { + if (isDevelopment) { // Dev shortcuts + globalShortcut.register('Shift+CommandOrControl+F5', () => { + mainWindow.reload(); + }); + globalShortcut.register('Shift+CommandOrControl+F12', () => { mainWindow.webContents.openDevTools(); }); } diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 08eb2928..04788339 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -71,10 +71,6 @@ ipcRenderer.on('open-connections-modal', () => { isAllConnectionsModal.value = true; }); -ipcRenderer.on('query-log', (e, sql: string) => { - console.log(sql); -}); - document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process @@ -155,10 +151,10 @@ onMounted(() => { .connection-panel-wrapper { height: calc(100vh - #{$excluding-size}); width: 100%; - padding-top: 15vh; + padding-top: 2rem; display: flex; justify-content: center; - align-items: flex-start; + align-items: center; overflow: auto; } } diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue index 0401d723..be78e8c7 100644 --- a/src/renderer/components/TheFooter.vue +++ b/src/renderer/components/TheFooter.vue @@ -11,14 +11,30 @@
    +
  • + + {{ t('word.console') }} +
  • - {{ $t('word.donate') }} + {{ t('word.donate') }}
    • -
  • +
    • -
  • +
@@ -29,9 +45,13 @@ + diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue index 9e1dcfc3..160b2d6e 100644 --- a/src/renderer/components/WorkspaceTabQuery.vue +++ b/src/renderer/components/WorkspaceTabQuery.vue @@ -372,6 +372,8 @@ const resize = (e: MouseEvent) => { editorHeight.value = localEditorHeight; }; +const resizeResults = () => queryTable.value.resizeResults(); + const onWindowResize = (e: MouseEvent) => { const el = queryEditor.value.$el; const queryFooterHeight = queryAreaFooter.value.clientHeight; @@ -386,7 +388,7 @@ const onWindowResize = (e: MouseEvent) => { const stopResize = () => { window.removeEventListener('mousemove', resize); if (queryTable.value && results.value.length) - queryTable.value.resizeResults(); + resizeResults(); if (queryEditor.value) queryEditor.value.editor.resize(); @@ -476,6 +478,8 @@ const rollbackTab = async () => { isQuering.value = false; }; +defineExpose({ resizeResults }); + query.value = props.tab.content as string; selectedSchema.value = props.tab.schema || breadcrumbsSchema.value; diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue index 1f373240..c2d89f39 100644 --- a/src/renderer/components/WorkspaceTabQueryTable.vue +++ b/src/renderer/components/WorkspaceTabQueryTable.vue @@ -118,6 +118,7 @@ import { storeToRefs } from 'pinia'; import { uidGen } from 'common/libs/uidGen'; import { useSettingsStore } from '@/stores/settings'; import { useWorkspacesStore } from '@/stores/workspaces'; +import { useConsoleStore } from '@/stores/console'; import { arrayToFile } from '../libs/arrayToFile'; import { TEXT, LONG_TEXT, BLOB } from 'common/fieldTypes'; import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue'; @@ -132,10 +133,13 @@ import { TableUpdateParams } from 'common/interfaces/tableApis'; const { t } = useI18n(); const settingsStore = useSettingsStore(); +const consoleStore = useConsoleStore(); const { getWorkspace } = useWorkspacesStore(); const { dataTabLimit: pageSize } = storeToRefs(settingsStore); +const { consoleHeight } = storeToRefs(consoleStore); + const props = defineProps({ results: Array as Prop, connUid: String, @@ -298,8 +302,13 @@ const resizeResults = () => { const el = tableWrapper.value; if (el) { + let sizeToSubtract = 0; const footer = document.getElementById('footer'); - const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight; + if (footer) sizeToSubtract += footer.offsetHeight; + + sizeToSubtract += consoleHeight.value; + + const size = window.innerHeight - el.getBoundingClientRect().top - sizeToSubtract; resultsSize.value = size; } resultTable.value.updateWindow(); @@ -664,6 +673,10 @@ watch(() => props.isSelected, async (val) => { } }); +watch(consoleHeight, () => { + resizeResults(); +}); + onUpdated(() => { if (table.value) refreshScroller(); diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts index ed6f8044..beb6f83e 100644 --- a/src/renderer/i18n/en-US.ts +++ b/src/renderer/i18n/en-US.ts @@ -141,7 +141,8 @@ module.exports = { connectionString: 'Connection string', contributors: 'Contributors', pin: 'Pin', - unpin: 'Unpin' + unpin: 'Unpin', + console: 'Console' }, message: { appWelcome: 'Welcome to Antares SQL Client!', @@ -296,7 +297,8 @@ module.exports = { disableFKChecks: 'Disable foreigh key checks', allConnections: 'All connections', searchForConnections: 'Search for connections', - disableScratchpad: 'Disable scratchpad' + disableScratchpad: 'Disable scratchpad', + reportABug: 'Report a bug' }, faker: { address: 'Address', diff --git a/src/renderer/index.ts b/src/renderer/index.ts index 97f5ea90..b50d526d 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -10,6 +10,7 @@ import { VueMaskDirective } from 'v-mask'; import { useApplicationStore } from '@/stores/application'; import { useSettingsStore } from '@/stores/settings'; import { useNotificationsStore } from '@/stores/notifications'; +import { useConsoleStore } from '@/stores/console'; import App from '@/App.vue'; import i18n from '@/i18n'; @@ -36,6 +37,11 @@ ipcRenderer.on('unhandled-exception', (event, error) => { useNotificationsStore().addNotification({ status: 'error', message: error.message }); }); +// IPC query logs +ipcRenderer.on('query-log', (event, logRecord) => { + useConsoleStore().putLog(logRecord); +}); + // IPC app updates ipcRenderer.on('checking-for-update', () => { useApplicationStore().updateStatus = 'checking'; diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss index 167bda56..77ce6328 100644 --- a/src/renderer/scss/themes/dark-theme.scss +++ b/src/renderer/scss/themes/dark-theme.scss @@ -305,6 +305,11 @@ } } + .query-console { + border-top: 1px solid #444; + background-color: $bg-color-dark; + } + .tile { transition: background 0.2s; diff --git a/src/renderer/stores/console.ts b/src/renderer/stores/console.ts new file mode 100644 index 00000000..6dc49c04 --- /dev/null +++ b/src/renderer/stores/console.ts @@ -0,0 +1,50 @@ +import { ipcRenderer } from 'electron'; +import { defineStore } from 'pinia'; +const logsSize = 1000; + +export interface ConsoleRecord { + cUid: string; + sql: string; + date: Date; +} + +export const useConsoleStore = defineStore('console', { + state: () => ({ + records: [] as ConsoleRecord[], + consoleHeight: 0, + isConsoleOpen: false + }), + getters: { + getLogsByWorkspace: state => (uid: string) => state.records.filter(r => r.cUid === uid) + }, + actions: { + putLog (record: ConsoleRecord) { + this.records.push(record); + + if (this.records.length > logsSize) + this.records = this.records.slice(0, logsSize); + }, + resizeConsole (height: number) { + if (height < 30) { + this.consoleHeight = 0; + this.isConsoleOpen = false; + } + else + this.consoleHeight = height; + }, + toggleConsole () { + if (this.isConsoleOpen) { + this.isConsoleOpen = false; + this.consoleHeight = 0; + } + else { + this.isConsoleOpen = true; + this.consoleHeight = 250; + } + } + } +}); + +ipcRenderer.on('toggle-console', () => { + useConsoleStore().toggleConsole(); +});