chore: utility commit

This commit is contained in:
Fabio Di Stasio 2023-12-06 08:44:07 +01:00
parent 861b704344
commit 756786d72e
8 changed files with 245 additions and 61 deletions

View File

@ -111,6 +111,7 @@ function startRenderer (callback) {
const server = new WebpackDevServer(compiler, {
port: 9080,
hot: true,
client: {
overlay: true,
logging: 'warn'

View File

@ -152,6 +152,14 @@
/>
SSH
</div>
<div v-if="connection.readonly" class="chip bg-success mt-2">
<BaseIcon
icon-name="mdiLock"
class="mr-1"
:size="18"
/>
Read-only
</div>
</div>
</div>
</div>

View File

@ -166,19 +166,6 @@
</label>
</div>
</div>
<div class="form-group column col-12 mb-0">
<div class="col-5 col-sm-12">
<label class="form-label">
{{ t('application.disableScratchpad') }}
</label>
</div>
<div class="col-3 col-sm-12">
<label class="form-switch d-inline-block" @click.prevent="toggleDisableScratchpad">
<input type="checkbox" :checked="disableScratchpad">
<i class="form-icon" />
</label>
</div>
</div>
<div class="form-group column col-12">
<div class="col-5 col-sm-12">
<label class="form-label">
@ -499,7 +486,6 @@ const {
restoreTabs,
showTableSize,
disableBlur,
disableScratchpad,
applicationTheme,
editorTheme,
editorFontSize
@ -512,7 +498,6 @@ const {
changePageSize,
changeRestoreTabs,
changeDisableBlur,
changeDisableScratchpad,
changeAutoComplete,
changeLineWrap,
changeExecuteSelected,
@ -671,10 +656,6 @@ const toggleDisableBlur = () => {
changeDisableBlur(!disableBlur.value);
};
const toggleDisableScratchpad = () => {
changeDisableScratchpad(!disableScratchpad.value);
};
const toggleAutoComplete = () => {
changeAutoComplete(!selectedAutoComplete.value);
};

View File

@ -2,45 +2,183 @@
<ConfirmModal
:confirm-text="t('application.update')"
:cancel-text="t('general.close')"
size="large"
size="medium"
:hide-footer="true"
@hide="hideScratchpad"
>
<template #header>
<div class="d-flex">
<BaseIcon
icon-name="mdiNotebookEditOutline"
icon-name="mdiNotebookOutline"
class="mr-1"
:size="24"
/> {{ t('application.scratchpad') }}
/> {{ t('application.note', 2) }}
</div>
</template>
<template #body>
<div>
<div>
<TextEditor
v-model="localNotes"
editor-class="textarea-editor"
mode="markdown"
:auto-focus="true"
:show-line-numbers="false"
<div class="d-flex p-vcentered" style="gap: 0 10px">
<div style="flex: 1;">
<BaseSelect
v-model="localConnection"
class="form-select"
:options="connectionOptions"
option-track-by="code"
option-label="name"
@change="null"
/>
</div>
<small class="text-gray">{{ t('application.markdownSupported') }}</small>
<div class="btn-group btn-group-block text-uppercase">
<div class="btn btn-primary">
{{ t('general.all') }}
</div>
<div class="btn btn-dark">
{{ t('application.note', 1) }}
</div>
<div class="btn btn-dark">
TODO
</div>
<div class="btn btn-dark">
Query
</div>
</div>
<div class="">
<button class="btn btn-link px-1 tooltip tooltip-left" :data-tooltip="'Show archived notes'">
<BaseIcon
icon-name="mdiArchiveEyeOutline"
class=""
:size="24"
/>
</button>
</div>
</div>
<div>
<div
v-if="filteredNotes.length"
ref="searchForm"
class="form-group has-icon-right m-0"
>
<input
v-model="searchTerm"
class="form-input"
type="text"
:placeholder="t('general.search')"
>
<BaseIcon
v-if="!searchTerm"
icon-name="mdiMagnify"
class="form-icon pr-2"
:size="18"
/>
<BaseIcon
v-else
icon-name="mdiBackspace"
class="form-icon c-hand pr-2"
:size="18"
@click="searchTerm = ''"
/>
</div>
</div>
<div
v-if="connectionNotes.length"
ref="tableWrapper"
class="vscroll px-1"
:style="{'height': resultsSize+'px'}"
>
<div ref="table">
<BaseVirtualScroll
ref="resultTable"
:items="filteredNotes"
:item-height="66"
:visible-height="resultsSize"
:scroll-element="scrollElement"
>
<template #default="{ items }">
<div
v-for="note in items"
:key="note.uid"
class="tile my-2"
tabindex="0"
>
<div class="tile-icon">
<BaseIcon
icon-name="mdiCodeTags"
class="pr-1"
:size="24"
/>
</div>
<div class="tile-content">
<div class="tile-title">
<code
class="cut-text"
:title="note.note"
v-html="highlightWord(note.note)"
/>
</div>
<div class="tile-bottom-content">
<!-- <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
<div class="tile-history-buttons">
<button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
<BaseIcon
icon-name="mdiOpenInApp"
class="pr-1"
:size="22"
/> {{ t('general.select') }}
</button>
<button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
<BaseIcon
icon-name="mdiContentCopy"
class="pr-1"
:size="22"
/> {{ t('general.copy') }}
</button>
<button class="btn btn-link pl-1" @click="deleteQuery(query)">
<BaseIcon
icon-name="mdiDeleteForever"
class="pr-1"
:size="22"
/> {{ t('general.delete') }}
</button>
</div> -->
</div>
</div>
</div>
</template>
</BaseVirtualScroll>
</div>
</div>
<div v-else class="empty">
<div class="empty-icon">
<BaseIcon icon-name="mdiNoteSearch" :size="48" />
</div>
<p class="empty-title h5">
{{ t('application.thereIsNoNotesYet') }}
</p>
</div>
</template>
</ConfirmModal>
</template>
<script setup lang="ts">
import { ConnectionParams } from 'common/interfaces/antares';
import { storeToRefs } from 'pinia';
import { Ref, ref, watch } from 'vue';
import {
Component,
computed,
onBeforeUnmount,
onMounted,
onUpdated,
Ref,
ref
} from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import TextEditor from '@/components/BaseTextEditor.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import { unproxify } from '@/libs/unproxify';
import { useApplicationStore } from '@/stores/application';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useScratchpadStore } from '@/stores/scratchpad';
const { t } = useI18n();
@ -48,19 +186,73 @@ const { t } = useI18n();
const applicationStore = useApplicationStore();
const scratchpadStore = useScratchpadStore();
const { notes } = storeToRefs(scratchpadStore);
const { connectionNotes } = storeToRefs(scratchpadStore);
const { changeNotes } = scratchpadStore;
const { hideScratchpad } = applicationStore;
const { getConnectionName } = useConnectionsStore();
const { connections } = storeToRefs(useConnectionsStore());
const localConnections = unproxify<ConnectionParams[]>(connections.value);
const localNotes = ref(notes.value);
const debounceTimeout: Ref<NodeJS.Timeout> = ref(null);
const localConnection = ref(null);
const table: Ref<HTMLDivElement> = ref(null);
const resultTable: Ref<Component & { updateWindow: () => void }> = ref(null);
const tableWrapper: Ref<HTMLDivElement> = ref(null);
const searchForm: Ref<HTMLInputElement> = ref(null);
const resultsSize = ref(1000);
const localNotes = ref(connectionNotes.value);
const searchTermInterval: Ref<NodeJS.Timeout> = ref(null);
const scrollElement: Ref<HTMLDivElement> = ref(null);
const searchTerm = ref('');
const localSearchTerm = ref('');
watch(localNotes, () => {
clearTimeout(debounceTimeout.value);
const filteredNotes = computed(() => localNotes.value);
const connectionOptions = computed(() => {
return [
{ code: null, name: t('general.all') },
...connections.value.map(c => ({ code: c.uid, name: getConnectionName(c.uid) }))
];
});
debounceTimeout.value = setTimeout(() => {
changeNotes(localNotes.value);
}, 200);
const resizeResults = () => {
if (resultTable.value) {
const el = tableWrapper.value.parentElement;
if (el)
resultsSize.value = el.offsetHeight - searchForm.value.offsetHeight;
resultTable.value.updateWindow();
}
};
const refreshScroller = () => resizeResults();
const highlightWord = (string: string) => {
string = string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
if (searchTerm.value) {
const regexp = new RegExp(`(${searchTerm.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return string.replace(regexp, '<span class="text-primary text-bold">$1</span>');
}
else
return string;
};
onUpdated(() => {
if (table.value)
refreshScroller();
if (tableWrapper.value)
scrollElement.value = tableWrapper.value;
});
onMounted(() => {
resizeResults();
window.addEventListener('resize', resizeResults);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeResults);
clearInterval(searchTermInterval.value);
});
</script>

View File

@ -59,17 +59,16 @@
<div class="settingbar-bottom-elements">
<ul class="settingbar-elements">
<li
v-if="!disableScratchpad"
v-tooltip="{
strategy: 'fixed',
placement: 'right',
content: t('application.scratchpad')
content: t('application.note', 2)
}"
class="settingbar-element btn btn-link"
@click="showScratchpad"
>
<BaseIcon
icon-name="mdiNotebookEditOutline"
icon-name="mdiNotebookOutline"
class="settingbar-element-icon text-light"
:size="24"
/>
@ -108,7 +107,6 @@ import SettingBarConnections from '@/components/SettingBarConnections.vue';
import SettingBarContext from '@/components/SettingBarContext.vue';
import { useApplicationStore } from '@/stores/application';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useSettingsStore } from '@/stores/settings';
import { useWorkspacesStore } from '@/stores/workspaces';
const { t } = useI18n();
@ -117,12 +115,10 @@ localStorage.setItem('opened-folders', '[]');
const applicationStore = useApplicationStore();
const connectionsStore = useConnectionsStore();
const workspacesStore = useWorkspacesStore();
const settingsStore = useSettingsStore();
const { updateStatus } = storeToRefs(applicationStore);
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
const { connectionsOrder } = storeToRefs(connectionsStore);
const { disableScratchpad } = storeToRefs(settingsStore);
const { showSettingModal, showScratchpad } = applicationStore;
const { updateConnectionsOrder, initConnectionsOrder } = connectionsStore;

View File

@ -1,3 +1,12 @@
/**
* [TRANSLATION UPDATE HELPER]
* - Open a terminal in antares folder and run `npm run translation:check short-code` replacing short-code with the one you are updating.
* - The command will output which terms are missing or not translated from english.
* - Open antares folder with your editor of choice.
* - Go to antares/src/renderer/i18n/ and open the locale file you want to translate.
* - Add and translate missing terms and consider whether to translate untranslated terms.
*/
export const enUS = {
general: { // General purpose terms
edit: 'Edit',
@ -66,7 +75,8 @@ export const enUS = {
outputFormat: 'Output format',
singleFile: 'Single {ext} file',
zipCompressedFile: 'ZIP compressed {ext} file',
copyName: 'Copy name'
copyName: 'Copy name',
search: 'Search'
},
connection: { // Database connection
connectionName: 'Connection name',
@ -270,8 +280,6 @@ export const enUS = {
},
application: { // Application related terms
settings: 'Settings',
scratchpad: 'Scratchpad',
disableScratchpad: 'Disable scratchpad',
console: 'Console',
general: 'General',
themes: 'Themes',
@ -342,7 +350,6 @@ export const enUS = {
saveContent: 'Save content',
openAllConnections: 'Open all connections',
openSettings: 'Open settings',
openScratchpad: 'Open scratchpad',
runOrReload: 'Run or reload',
openFilter: 'Open filter',
nextResultsPage: 'Next results page',
@ -376,7 +383,9 @@ export const enUS = {
ignoreDuplicates: 'Ignore duplicates',
wrongImportPassword: 'Wrong import password',
wrongFileFormat: 'Wrong file format',
dataImportSuccess: 'Data successfully imported'
dataImportSuccess: 'Data successfully imported',
note: 'Note | Notes',
thereIsNoNotesYet: 'There is no notes yet'
},
faker: { // Faker.js methods, used in random generated content
address: 'Address',

View File

@ -4,6 +4,8 @@ const persistentStore = new Store({ name: 'notes' });
export interface ConnectionNote {
uid: string;
cUid: string;
title?: string;
note: string;
date: Date;
}
@ -13,12 +15,12 @@ export const useScratchpadStore = defineStore('scratchpad', {
/** Global notes */
notes: persistentStore.get('notes', '# HOW TO SUPPORT ANTARES\n\n- [ ] Leave a star to Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Send feedbacks and advices\n- [ ] Report for bugs\n- [ ] If you enjoy, share Antares with friends\n\n# ABOUT SCRATCHPAD\n\nThis is a scratchpad where you can save your **personal notes**. It supports `markdown` format, but you are free to use plain text.\nThis content is just a placeholder, feel free to clear it to make space for your notes.\n') as string,
/** Connection specific notes */
connectionNotes: persistentStore.get('connectionNotes', {}) as {[k: string]: ConnectionNote}
connectionNotes: persistentStore.get('connectionNotes', {}) as ConnectionNote[]
}),
actions: {
changeNotes (notes: string) {
this.notes = notes;
persistentStore.set('notes', this.notes);
changeNotes (notes: ConnectionNote[]) {
this.connectionNotes = notes;
persistentStore.set('connectionNotes', this.connectionNotes);
}
}
});

View File

@ -30,7 +30,6 @@ export const useSettingsStore = defineStore('settings', {
editorFontSize: settingsStore.get('editor_font_size', 'medium') as EditorFontSize,
restoreTabs: settingsStore.get('restore_tabs', true) as boolean,
disableBlur: settingsStore.get('disable_blur', false) as boolean,
disableScratchpad: settingsStore.get('disable_scratchpad', false) as boolean,
shortcuts: shortcutsStore.get('shortcuts', []) as ShortcutRecord[],
defaultCopyType: settingsStore.get('default_copy_type', 'cell') as string
}),
@ -93,10 +92,6 @@ export const useSettingsStore = defineStore('settings', {
this.disableBlur = val;
settingsStore.set('disable_blur', this.disableBlur);
},
changeDisableScratchpad (val: boolean) {
this.disableScratchpad = val;
settingsStore.set('disable_scratchpad', this.disableScratchpad);
},
updateShortcuts (shortcuts: ShortcutRecord[]) {
this.shortcuts = shortcuts;
},