mirror of https://github.com/Fabio286/antares.git
refactor: ts and composition api for modals
This commit is contained in:
parent
84826ff4c0
commit
cdca6eaa35
|
|
@ -7,5 +7,4 @@ node_modules
|
|||
thumbs.db
|
||||
NOTES.md
|
||||
*.txt
|
||||
package-lock.json
|
||||
*.heapsnapshot
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -145,6 +145,7 @@
|
|||
"@playwright/test": "~1.21.1",
|
||||
"@types/better-sqlite3": "~7.5.0",
|
||||
"@types/leaflet": "~1.7.9",
|
||||
"@types/marked": "~4.0.3",
|
||||
"@types/node": "~17.0.23",
|
||||
"@types/pg": "~8.6.5",
|
||||
"@typescript-eslint/eslint-plugin": "~5.18.0",
|
||||
|
|
|
|||
|
|
@ -294,13 +294,13 @@ const closeContext = () => {
|
|||
};
|
||||
|
||||
const copyCell = () => {
|
||||
const row = results.value.find(row => row.id === selectedRow.value);
|
||||
const row = results.value.find(row => Number(row.id) === selectedRow.value);
|
||||
const valueToCopy = row[selectedCell.value.field];
|
||||
navigator.clipboard.writeText(valueToCopy);
|
||||
};
|
||||
|
||||
const copyRow = () => {
|
||||
const row = results.value.find(row => row.id === selectedRow.value);
|
||||
const row = results.value.find(row => Number(row.id) === selectedRow.value);
|
||||
const rowToCopy = JSON.parse(JSON.stringify(row));
|
||||
navigator.clipboard.writeText(JSON.stringify(rowToCopy));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<BaseContextMenu
|
||||
:context-event="contextEvent"
|
||||
:context-event="props.contextEvent"
|
||||
@close-context="closeContext"
|
||||
>
|
||||
<div v-if="selectedRow" class="context-element">
|
||||
<div v-if="props.selectedRow" class="context-element">
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ $t('word.copy') }}</span>
|
||||
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
|
||||
<div class="context-submenu">
|
||||
<div
|
||||
v-if="selectedRow"
|
||||
v-if="props.selectedRow"
|
||||
class="context-element"
|
||||
@click="copyCell"
|
||||
>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedRow"
|
||||
v-if="props.selectedRow"
|
||||
class="context-element"
|
||||
@click="copyRow"
|
||||
>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedRow"
|
||||
v-if="props.selectedRow"
|
||||
class="context-element"
|
||||
@click="killProcess"
|
||||
>
|
||||
|
|
@ -39,38 +39,33 @@
|
|||
</BaseContextMenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseContextMenu from '@/components/BaseContextMenu';
|
||||
<script setup lang="ts">
|
||||
import BaseContextMenu from '@/components/BaseContextMenu.vue';
|
||||
|
||||
export default {
|
||||
name: 'ModalProcessesListContext',
|
||||
components: {
|
||||
BaseContextMenu
|
||||
},
|
||||
props: {
|
||||
contextEvent: MouseEvent,
|
||||
selectedRow: Number,
|
||||
selectedCell: Object
|
||||
},
|
||||
emits: ['close-context', 'copy-cell', 'copy-row', 'kill-process'],
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
closeContext () {
|
||||
this.$emit('close-context');
|
||||
},
|
||||
copyCell () {
|
||||
this.$emit('copy-cell');
|
||||
this.closeContext();
|
||||
},
|
||||
copyRow () {
|
||||
this.$emit('copy-row');
|
||||
this.closeContext();
|
||||
},
|
||||
killProcess () {
|
||||
this.$emit('kill-process');
|
||||
this.closeContext();
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
contextEvent: MouseEvent,
|
||||
selectedRow: Number,
|
||||
selectedCell: Object
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close-context', 'copy-cell', 'copy-row', 'kill-process']);
|
||||
|
||||
const closeContext = () => {
|
||||
emit('close-context');
|
||||
};
|
||||
|
||||
const copyCell = () => {
|
||||
emit('copy-cell');
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const copyRow = () => {
|
||||
emit('copy-row');
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const killProcess = () => {
|
||||
emit('kill-process');
|
||||
closeContext();
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -31,11 +31,12 @@
|
|||
<div>
|
||||
<div>
|
||||
<TextEditor
|
||||
:value="row.info || ''"
|
||||
:model-value="props.row.info || ''"
|
||||
editor-class="textarea-editor"
|
||||
:mode="editorMode"
|
||||
:read-only="true"
|
||||
/>
|
||||
<div class="mb-4" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,60 +44,46 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConfirmModal from '@/components/BaseConfirmModal';
|
||||
import TextEditor from '@/components/BaseTextEditor';
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from 'vue';
|
||||
import ConfirmModal from '@/components/BaseConfirmModal.vue';
|
||||
import TextEditor from '@/components/BaseTextEditor.vue';
|
||||
|
||||
export default {
|
||||
name: 'ModalProcessesListRow',
|
||||
components: {
|
||||
ConfirmModal,
|
||||
TextEditor
|
||||
},
|
||||
props: {
|
||||
row: Object
|
||||
},
|
||||
emits: ['select-row', 'contextmenu', 'stop-refresh'],
|
||||
data () {
|
||||
return {
|
||||
isInlineEditor: {},
|
||||
isInfoModal: false,
|
||||
editorMode: 'sql'
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
isNull (value) {
|
||||
return value === null ? ' is-null' : '';
|
||||
},
|
||||
selectRow () {
|
||||
this.$emit('select-row');
|
||||
},
|
||||
openContext (event, payload) {
|
||||
this.$emit('contextmenu', event, payload);
|
||||
},
|
||||
hideInfoModal () {
|
||||
this.isInfoModal = false;
|
||||
},
|
||||
dblClick (col) {
|
||||
if (col !== 'info') return;
|
||||
this.$emit('stop-refresh');
|
||||
this.isInfoModal = true;
|
||||
},
|
||||
onKey (e) {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Escape') {
|
||||
this.isInlineEditor[this.editingField] = false;
|
||||
this.editingField = null;
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
}
|
||||
},
|
||||
cutText (val) {
|
||||
if (typeof val !== 'string') return val;
|
||||
return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select-row', 'contextmenu', 'stop-refresh']);
|
||||
|
||||
const isInlineEditor: Ref<{[key: string]: boolean}> = ref({});
|
||||
const isInfoModal = ref(false);
|
||||
const editorMode = ref('sql');
|
||||
|
||||
const isNull = (value: string | number) => value === null ? ' is-null' : '';
|
||||
|
||||
const selectRow = () => {
|
||||
emit('select-row');
|
||||
};
|
||||
|
||||
const openContext = (event: MouseEvent, payload: { id: number; field: string }) => {
|
||||
emit('contextmenu', event, payload);
|
||||
};
|
||||
|
||||
const hideInfoModal = () => {
|
||||
isInfoModal.value = false;
|
||||
};
|
||||
|
||||
const dblClick = (col: string) => {
|
||||
if (col !== 'info') return;
|
||||
emit('stop-refresh');
|
||||
isInfoModal.value = true;
|
||||
};
|
||||
|
||||
const cutText = (val: string | number) => {
|
||||
if (typeof val !== 'string') return val;
|
||||
return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="modal-title h6">
|
||||
<div class="d-flex">
|
||||
<i class="mdi mdi-24px mdi-cog mr-1" />
|
||||
<span class="cut-text">{{ $t('word.settings') }}</span>
|
||||
<span class="cut-text">{{ t('word.settings') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
:class="{'active': selectedTab === 'general'}"
|
||||
@click="selectTab('general')"
|
||||
>
|
||||
<a class="tab-link">{{ $t('word.general') }}</a>
|
||||
<a class="tab-link">{{ t('word.general') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item c-hand"
|
||||
:class="{'active': selectedTab === 'themes'}"
|
||||
@click="selectTab('themes')"
|
||||
>
|
||||
<a class="tab-link">{{ $t('word.themes') }}</a>
|
||||
<a class="tab-link">{{ t('word.themes') }}</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="updateStatus !== 'disabled'"
|
||||
|
|
@ -36,21 +36,21 @@
|
|||
:class="{'active': selectedTab === 'update'}"
|
||||
@click="selectTab('update')"
|
||||
>
|
||||
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
|
||||
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ t('word.update') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item c-hand"
|
||||
:class="{'active': selectedTab === 'changelog'}"
|
||||
@click="selectTab('changelog')"
|
||||
>
|
||||
<a class="tab-link">{{ $t('word.changelog') }}</a>
|
||||
<a class="tab-link">{{ t('word.changelog') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item c-hand"
|
||||
:class="{'active': selectedTab === 'about'}"
|
||||
@click="selectTab('about')"
|
||||
>
|
||||
<a class="tab-link">{{ $t('word.about') }}</a>
|
||||
<a class="tab-link">{{ t('word.about') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
<div class="container">
|
||||
<form class="form-horizontal columns">
|
||||
<div class="column col-12 h6 text-uppercase mb-1">
|
||||
{{ $t('word.application') }}
|
||||
{{ t('word.application') }}
|
||||
</div>
|
||||
<div class="column col-12 col-sm-12 mb-2 columns">
|
||||
<div class="form-group column col-12">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
<i class="mdi mdi-18px mdi-translate mr-1" />
|
||||
{{ $t('word.language') }}
|
||||
{{ t('word.language') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -85,15 +85,15 @@
|
|||
</div>
|
||||
<div class="col-4 col-sm-12 px-2 p-vcentered">
|
||||
<small class="d-block" style="line-height:1.1; font-size:70%;">
|
||||
{{ $t('message.missingOrIncompleteTranslation') }}<br>
|
||||
<a class="text-bold c-hand" @click="openOutside('https://github.com/antares-sql/antares/wiki/Translate-Antares')">{{ $t('message.findOutHowToContribute') }}</a>
|
||||
{{ t('message.missingOrIncompleteTranslation') }}<br>
|
||||
<a class="text-bold c-hand" @click="openOutside('https://github.com/antares-sql/antares/wiki/Translate-Antares')">{{ t('message.findOutHowToContribute') }}</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group column col-12">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('message.dataTabPageSize') }}
|
||||
{{ t('message.dataTabPageSize') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
<div class="form-group column col-12 mb-0">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('message.restorePreviourSession') }}
|
||||
{{ t('message.restorePreviourSession') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
<div class="form-group column col-12 mb-0">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('message.disableBlur') }}
|
||||
{{ t('message.disableBlur') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
<div class="form-group column col-12">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('message.notificationsTimeout') }}
|
||||
{{ t('message.notificationsTimeout') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -152,19 +152,19 @@
|
|||
min="1"
|
||||
@focusout="checkNotificationsTimeout"
|
||||
>
|
||||
<span class="input-group-addon">{{ $t('word.seconds') }}</span>
|
||||
<span class="input-group-addon">{{ t('word.seconds') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-12 h6 mt-4 text-uppercase mb-1">
|
||||
{{ $t('word.editor') }}
|
||||
{{ t('word.editor') }}
|
||||
</div>
|
||||
<div class="column col-12 col-sm-12 columns">
|
||||
<div class="form-group column col-12 mb-0">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('word.autoCompletion') }}
|
||||
{{ t('word.autoCompletion') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
<div class="form-group column col-12 mb-0">
|
||||
<div class="col-5 col-sm-12">
|
||||
<label class="form-label">
|
||||
{{ $t('message.wrapLongLines') }}
|
||||
{{ t('message.wrapLongLines') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12">
|
||||
|
|
@ -196,18 +196,18 @@
|
|||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column col-12 h6 text-uppercase mb-2">
|
||||
{{ $t('message.applicationTheme') }}
|
||||
{{ t('message.applicationTheme') }}
|
||||
</div>
|
||||
<div
|
||||
class="column col-6 c-hand theme-block"
|
||||
:class="{'selected': applicationTheme === 'dark'}"
|
||||
@click="changeApplicationTheme('dark')"
|
||||
>
|
||||
<img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
|
||||
<img :src="darkPreview" class="img-responsive img-fit-cover s-rounded">
|
||||
<div class="theme-name text-light">
|
||||
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
|
||||
<div class="h6 mt-4">
|
||||
{{ $t('word.dark') }}
|
||||
{{ t('word.dark') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -216,11 +216,11 @@
|
|||
:class="{'selected': applicationTheme === 'light'}"
|
||||
@click="changeApplicationTheme('light')"
|
||||
>
|
||||
<img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
|
||||
<img :src="lightPreview" class="img-responsive img-fit-cover s-rounded">
|
||||
<div class="theme-name text-dark">
|
||||
<i class="mdi mdi-white-balance-sunny mdi-48px" />
|
||||
<div class="h6 mt-4">
|
||||
{{ $t('word.light') }}
|
||||
{{ t('word.light') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -228,7 +228,7 @@
|
|||
|
||||
<div class="columns mt-4">
|
||||
<div class="column col-12 h6 text-uppercase mb-2 mt-4">
|
||||
{{ $t('message.editorTheme') }}
|
||||
{{ t('message.editorTheme') }}
|
||||
</div>
|
||||
<div class="column col-6 h5 mb-4">
|
||||
<select
|
||||
|
|
@ -259,21 +259,21 @@
|
|||
:class="{'active': editorFontSize === 'small'}"
|
||||
@click="changeEditorFontSize('small')"
|
||||
>
|
||||
{{ $t('word.small') }}
|
||||
{{ t('word.small') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-dark cut-text"
|
||||
:class="{'active': editorFontSize === 'medium'}"
|
||||
@click="changeEditorFontSize('medium')"
|
||||
>
|
||||
{{ $t('word.medium') }}
|
||||
{{ t('word.medium') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-dark cut-text"
|
||||
:class="{'active': editorFontSize === 'large'}"
|
||||
@click="changeEditorFontSize('large')"
|
||||
>
|
||||
{{ $t('word.large') }}
|
||||
{{ t('word.large') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -299,19 +299,19 @@
|
|||
|
||||
<div v-show="selectedTab === 'about'" class="panel-body py-4">
|
||||
<div class="text-center">
|
||||
<img src="../images/logo.svg" width="128">
|
||||
<img :src="appLogo" width="128">
|
||||
<h4>{{ appName }}</h4>
|
||||
<p class="mb-2">
|
||||
{{ $t('word.version') }} {{ appVersion }}<br>
|
||||
{{ t('word.version') }} {{ appVersion }}<br>
|
||||
<a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
|
||||
<small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
|
||||
<small>{{ t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
|
||||
<small class="d-block text-uppercase">{{ t('word.contributors') }}:</small>
|
||||
<div class="d-block py-1">
|
||||
<small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
|
||||
</div>
|
||||
<small>{{ $t('message.madeWithJS') }}</small>
|
||||
<small>{{ t('message.madeWithJS') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -322,174 +322,120 @@
|
|||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, Ref, ref } from 'vue';
|
||||
import { shell } from 'electron';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useApplicationStore } from '@/stores/application';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import { localesNames } from '@/i18n/supported-locales';
|
||||
import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
|
||||
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
|
||||
import BaseTextEditor from '@/components/BaseTextEditor';
|
||||
import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
|
||||
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
|
||||
import BaseTextEditor from '@/components/BaseTextEditor.vue';
|
||||
import { computed } from '@vue/reactivity';
|
||||
|
||||
export default {
|
||||
name: 'ModalSettings',
|
||||
components: {
|
||||
ModalSettingsUpdate,
|
||||
ModalSettingsChangelog,
|
||||
BaseTextEditor
|
||||
const { t, availableLocales } = useI18n();
|
||||
|
||||
const applicationStore = useApplicationStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
const {
|
||||
selectedSettingTab,
|
||||
updateStatus
|
||||
} = storeToRefs(applicationStore);
|
||||
const {
|
||||
locale: selectedLocale,
|
||||
dataTabLimit: pageSize,
|
||||
autoComplete: selectedAutoComplete,
|
||||
lineWrap: selectedLineWrap,
|
||||
notificationsTimeout,
|
||||
restoreTabs,
|
||||
disableBlur,
|
||||
applicationTheme,
|
||||
editorTheme,
|
||||
editorFontSize
|
||||
} = storeToRefs(settingsStore);
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
const {
|
||||
changeLocale,
|
||||
changePageSize,
|
||||
changeRestoreTabs,
|
||||
changeDisableBlur,
|
||||
changeAutoComplete,
|
||||
changeLineWrap,
|
||||
changeApplicationTheme,
|
||||
changeEditorTheme,
|
||||
changeEditorFontSize,
|
||||
updateNotificationsTimeout
|
||||
} = settingsStore;
|
||||
const {
|
||||
hideSettingModal: closeModal,
|
||||
appName,
|
||||
appVersion
|
||||
} = applicationStore;
|
||||
const { getWorkspace } = workspacesStore;
|
||||
|
||||
const appAuthor = 'Fabio Di Stasio';
|
||||
const pageSizes = [30, 40, 100, 250, 500, 1000];
|
||||
const contributors = process.env.APP_CONTRIBUTORS;
|
||||
const appLogo = require('../images/logo.svg');
|
||||
const darkPreview = require('../images/dark.png');
|
||||
const lightPreview = require('../images/light.png');
|
||||
const editorThemes= [
|
||||
{
|
||||
group: t('word.light'),
|
||||
themes: [
|
||||
{ code: 'chrome', name: 'Chrome' },
|
||||
{ code: 'clouds', name: 'Clouds' },
|
||||
{ code: 'crimson_editor', name: 'Crimson Editor' },
|
||||
{ code: 'dawn', name: 'Dawn' },
|
||||
{ code: 'dreamweaver', name: 'Dreamweaver' },
|
||||
{ code: 'eclupse', name: 'Eclipse' },
|
||||
{ code: 'github', name: 'GitHub' },
|
||||
{ code: 'iplastic', name: 'IPlastic' },
|
||||
{ code: 'solarized_light', name: 'Solarized Light' },
|
||||
{ code: 'textmate', name: 'TextMate' },
|
||||
{ code: 'tomorrow', name: 'Tomorrow' },
|
||||
{ code: 'xcode', name: 'Xcode' },
|
||||
{ code: 'kuroir', name: 'Kuroir' },
|
||||
{ code: 'katzenmilch', name: 'KatzenMilch' },
|
||||
{ code: 'sqlserver', name: 'SQL Server' }
|
||||
]
|
||||
},
|
||||
setup () {
|
||||
const applicationStore = useApplicationStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
const {
|
||||
selectedSettingTab,
|
||||
updateStatus
|
||||
} = storeToRefs(applicationStore);
|
||||
const {
|
||||
locale: selectedLocale,
|
||||
dataTabLimit: pageSize,
|
||||
autoComplete: selectedAutoComplete,
|
||||
lineWrap: selectedLineWrap,
|
||||
notificationsTimeout,
|
||||
restoreTabs,
|
||||
disableBlur,
|
||||
applicationTheme,
|
||||
editorTheme,
|
||||
editorFontSize
|
||||
} = storeToRefs(settingsStore);
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
const {
|
||||
changeLocale,
|
||||
changePageSize,
|
||||
changeRestoreTabs,
|
||||
changeDisableBlur,
|
||||
changeAutoComplete,
|
||||
changeLineWrap,
|
||||
changeApplicationTheme,
|
||||
changeEditorTheme,
|
||||
changeEditorFontSize,
|
||||
updateNotificationsTimeout
|
||||
} = settingsStore;
|
||||
const {
|
||||
hideSettingModal,
|
||||
appName,
|
||||
appVersion
|
||||
} = applicationStore;
|
||||
const { getWorkspace } = workspacesStore;
|
||||
|
||||
return {
|
||||
appName,
|
||||
appVersion,
|
||||
selectedSettingTab,
|
||||
updateStatus,
|
||||
closeModal: hideSettingModal,
|
||||
selectedLocale,
|
||||
pageSize,
|
||||
selectedAutoComplete,
|
||||
selectedLineWrap,
|
||||
notificationsTimeout,
|
||||
restoreTabs,
|
||||
disableBlur,
|
||||
applicationTheme,
|
||||
editorTheme,
|
||||
editorFontSize,
|
||||
changeLocale,
|
||||
changePageSize,
|
||||
changeRestoreTabs,
|
||||
changeDisableBlur,
|
||||
changeAutoComplete,
|
||||
changeLineWrap,
|
||||
changeApplicationTheme,
|
||||
changeEditorTheme,
|
||||
changeEditorFontSize,
|
||||
updateNotificationsTimeout,
|
||||
selectedWorkspace,
|
||||
getWorkspace
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
appAuthor: 'Fabio Di Stasio',
|
||||
localLocale: null,
|
||||
localPageSize: null,
|
||||
localTimeout: null,
|
||||
localEditorTheme: null,
|
||||
selectedTab: 'general',
|
||||
pageSizes: [30, 40, 100, 250, 500, 1000],
|
||||
editorThemes: [
|
||||
{
|
||||
group: this.$t('word.light'),
|
||||
themes: [
|
||||
{ code: 'chrome', name: 'Chrome' },
|
||||
{ code: 'clouds', name: 'Clouds' },
|
||||
{ code: 'crimson_editor', name: 'Crimson Editor' },
|
||||
{ code: 'dawn', name: 'Dawn' },
|
||||
{ code: 'dreamweaver', name: 'Dreamweaver' },
|
||||
{ code: 'eclupse', name: 'Eclipse' },
|
||||
{ code: 'github', name: 'GitHub' },
|
||||
{ code: 'iplastic', name: 'IPlastic' },
|
||||
{ code: 'solarized_light', name: 'Solarized Light' },
|
||||
{ code: 'textmate', name: 'TextMate' },
|
||||
{ code: 'tomorrow', name: 'Tomorrow' },
|
||||
{ code: 'xcode', name: 'Xcode' },
|
||||
{ code: 'kuroir', name: 'Kuroir' },
|
||||
{ code: 'katzenmilch', name: 'KatzenMilch' },
|
||||
{ code: 'sqlserver', name: 'SQL Server' }
|
||||
]
|
||||
},
|
||||
{
|
||||
group: this.$t('word.dark'),
|
||||
themes: [
|
||||
{ code: 'ambiance', name: 'Ambiance' },
|
||||
{ code: 'chaos', name: 'Chaos' },
|
||||
{ code: 'clouds_midnight', name: 'Clouds Midnight' },
|
||||
{ code: 'dracula', name: 'Dracula' },
|
||||
{ code: 'cobalt', name: 'Cobalt' },
|
||||
{ code: 'gruvbox', name: 'Gruvbox' },
|
||||
{ code: 'gob', name: 'Green on Black' },
|
||||
{ code: 'idle_fingers', name: 'Idle Fingers' },
|
||||
{ code: 'kr_theme', name: 'krTheme' },
|
||||
{ code: 'merbivore', name: 'Merbivore' },
|
||||
{ code: 'mono_industrial', name: 'Mono Industrial' },
|
||||
{ code: 'monokai', name: 'Monokai' },
|
||||
{ code: 'nord_dark', name: 'Nord Dark' },
|
||||
{ code: 'pastel_on_dark', name: 'Pastel on Dark' },
|
||||
{ code: 'solarized_dark', name: 'Solarized Dark' },
|
||||
{ code: 'terminal', name: 'Terminal' },
|
||||
{ code: 'tomorrow_night', name: 'Tomorrow Night' },
|
||||
{ code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
|
||||
{ code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
|
||||
{ code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
|
||||
{ code: 'twilight', name: 'Twilight' },
|
||||
{ code: 'vibrant_ink', name: 'Vibrant Ink' }
|
||||
]
|
||||
}
|
||||
],
|
||||
contributors: process.env.APP_CONTRIBUTORS
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
locales () {
|
||||
const locales = [];
|
||||
for (const locale of this.$i18n.availableLocales)
|
||||
locales.push({ code: locale, name: localesNames[locale] });
|
||||
|
||||
return locales;
|
||||
},
|
||||
hasUpdates () {
|
||||
return ['available', 'downloading', 'downloaded', 'link'].includes(this.updateStatus);
|
||||
},
|
||||
workspace () {
|
||||
return this.getWorkspace(this.selectedWorkspace);
|
||||
},
|
||||
exampleQuery () {
|
||||
return `-- This is an example
|
||||
{
|
||||
group: t('word.dark'),
|
||||
themes: [
|
||||
{ code: 'ambiance', name: 'Ambiance' },
|
||||
{ code: 'chaos', name: 'Chaos' },
|
||||
{ code: 'clouds_midnight', name: 'Clouds Midnight' },
|
||||
{ code: 'dracula', name: 'Dracula' },
|
||||
{ code: 'cobalt', name: 'Cobalt' },
|
||||
{ code: 'gruvbox', name: 'Gruvbox' },
|
||||
{ code: 'gob', name: 'Green on Black' },
|
||||
{ code: 'idle_fingers', name: 'Idle Fingers' },
|
||||
{ code: 'kr_theme', name: 'krTheme' },
|
||||
{ code: 'merbivore', name: 'Merbivore' },
|
||||
{ code: 'mono_industrial', name: 'Mono Industrial' },
|
||||
{ code: 'monokai', name: 'Monokai' },
|
||||
{ code: 'nord_dark', name: 'Nord Dark' },
|
||||
{ code: 'pastel_on_dark', name: 'Pastel on Dark' },
|
||||
{ code: 'solarized_dark', name: 'Solarized Dark' },
|
||||
{ code: 'terminal', name: 'Terminal' },
|
||||
{ code: 'tomorrow_night', name: 'Tomorrow Night' },
|
||||
{ code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
|
||||
{ code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
|
||||
{ code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
|
||||
{ code: 'twilight', name: 'Twilight' },
|
||||
{ code: 'vibrant_ink', name: 'Vibrant Ink' }
|
||||
]
|
||||
}
|
||||
];
|
||||
const exampleQuery = `-- This is an example
|
||||
SELECT
|
||||
employee.id,
|
||||
employee.first_name,
|
||||
|
|
@ -504,57 +450,81 @@ GROUP BY
|
|||
ORDER BY
|
||||
employee.id ASC;
|
||||
`;
|
||||
},
|
||||
otherContributors () {
|
||||
return this.contributors
|
||||
.split(',')
|
||||
.filter(c => !c.includes(this.appAuthor))
|
||||
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.localLocale = this.selectedLocale;
|
||||
this.localPageSize = this.pageSize;
|
||||
this.localTimeout = this.notificationsTimeout;
|
||||
this.localEditorTheme = this.editorTheme;
|
||||
this.selectedTab = this.selectedSettingTab;
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
selectTab (tab) {
|
||||
this.selectedTab = tab;
|
||||
},
|
||||
openOutside (link) {
|
||||
shell.openExternal(link);
|
||||
},
|
||||
checkNotificationsTimeout () {
|
||||
if (!this.localTimeout)
|
||||
this.localTimeout = 10;
|
||||
|
||||
this.updateNotificationsTimeout(+this.localTimeout);
|
||||
},
|
||||
onKey (e) {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Escape')
|
||||
this.closeModal();
|
||||
},
|
||||
toggleRestoreSession () {
|
||||
this.changeRestoreTabs(!this.restoreTabs);
|
||||
},
|
||||
toggleDisableBlur () {
|
||||
this.changeDisableBlur(!this.disableBlur);
|
||||
},
|
||||
toggleAutoComplete () {
|
||||
this.changeAutoComplete(!this.selectedAutoComplete);
|
||||
},
|
||||
toggleLineWrap () {
|
||||
this.changeLineWrap(!this.selectedLineWrap);
|
||||
}
|
||||
}
|
||||
const localLocale: Ref<string> = ref(null);
|
||||
const localPageSize: Ref<number> = ref(null);
|
||||
const localTimeout: Ref<number> = ref(null);
|
||||
const localEditorTheme: Ref<string> = ref(null);
|
||||
const selectedTab: Ref<string> = ref('general');
|
||||
|
||||
const locales = computed(() => {
|
||||
const locales = [];
|
||||
for (const locale of availableLocales)
|
||||
locales.push({ code: locale, name: localesNames[locale] });
|
||||
|
||||
return locales;
|
||||
});
|
||||
|
||||
const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
|
||||
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(selectedWorkspace.value);
|
||||
});
|
||||
|
||||
const otherContributors = computed(() => {
|
||||
return contributors
|
||||
.split(',')
|
||||
.filter(c => !c.includes(appAuthor))
|
||||
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
|
||||
});
|
||||
|
||||
const selectTab = (tab: string) => {
|
||||
selectedTab.value = tab;
|
||||
};
|
||||
|
||||
const openOutside = (link: string) => {
|
||||
shell.openExternal(link);
|
||||
};
|
||||
|
||||
const checkNotificationsTimeout = () => {
|
||||
if (!localTimeout.value)
|
||||
localTimeout.value = 10;
|
||||
|
||||
updateNotificationsTimeout(+localTimeout.value);
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Escape')
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const toggleRestoreSession = () => {
|
||||
changeRestoreTabs(!restoreTabs.value);
|
||||
};
|
||||
|
||||
const toggleDisableBlur = () => {
|
||||
changeDisableBlur(!disableBlur.value);
|
||||
};
|
||||
|
||||
const toggleAutoComplete = () => {
|
||||
changeAutoComplete(!selectedAutoComplete.value);
|
||||
};
|
||||
|
||||
const toggleLineWrap = () => {
|
||||
changeLineWrap(!selectedLineWrap.value);
|
||||
};
|
||||
|
||||
localLocale.value = selectedLocale.value as string;
|
||||
localPageSize.value = pageSize.value as number;
|
||||
localTimeout.value = notificationsTimeout.value as number;
|
||||
localEditorTheme.value = editorTheme.value as string;
|
||||
selectedTab.value = selectedSettingTab.value;
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -13,66 +13,53 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { marked } from 'marked';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import BaseLoader from '@/components/BaseLoader.vue';
|
||||
import { useApplicationStore } from '@/stores/application';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'ModalSettingsChangelog',
|
||||
components: {
|
||||
BaseLoader
|
||||
},
|
||||
setup () {
|
||||
const { appVersion } = useApplicationStore();
|
||||
return { appVersion };
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changelog: '',
|
||||
isLoading: true,
|
||||
error: '',
|
||||
isError: false
|
||||
const { appVersion } = useApplicationStore();
|
||||
|
||||
const changelog = ref('');
|
||||
const isLoading = ref(true);
|
||||
const error = ref('');
|
||||
const isError = ref(false);
|
||||
|
||||
const getChangelog = async () => {
|
||||
try {
|
||||
const apiRes = await fetch(`https://api.github.com/repos/antares-sql/antares/releases/tags/v${appVersion}`, {
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const { body } = await apiRes.json();
|
||||
const cutOffset = body.indexOf('### Download');
|
||||
const markdown = cutOffset >= 0
|
||||
? body.substr(0, cutOffset)
|
||||
: body;
|
||||
|
||||
const renderer = {
|
||||
link (href: string, title: string, text: string) {
|
||||
return text;
|
||||
},
|
||||
listitem (text: string) {
|
||||
return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
|
||||
}
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.getChangelog();
|
||||
},
|
||||
methods: {
|
||||
async getChangelog () {
|
||||
try {
|
||||
const apiRes = await fetch(`https://api.github.com/repos/antares-sql/antares/releases/tags/v${this.appVersion}`, {
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const { body } = await apiRes.json();
|
||||
const cutOffset = body.indexOf('### Download');
|
||||
const markdown = cutOffset >= 0
|
||||
? body.substr(0, cutOffset)
|
||||
: body;
|
||||
marked.use({ renderer });
|
||||
|
||||
const renderer = {
|
||||
link (href, title, text) {
|
||||
return text;
|
||||
},
|
||||
listitem (text) {
|
||||
return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
|
||||
}
|
||||
};
|
||||
|
||||
marked.use({ renderer });
|
||||
|
||||
this.changelog = marked(markdown);
|
||||
}
|
||||
catch (err) {
|
||||
this.error = err.message;
|
||||
this.isError = true;
|
||||
}
|
||||
this.isLoading = false;
|
||||
}
|
||||
changelog.value = marked(markdown);
|
||||
}
|
||||
catch (err) {
|
||||
error.value = err.message;
|
||||
isError.value = true;
|
||||
}
|
||||
|
||||
isLoading.value = false;
|
||||
};
|
||||
|
||||
getChangelog();
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#changelog {
|
||||
|
|
|
|||
|
|
@ -52,68 +52,61 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ipcRenderer, shell } from 'electron';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useApplicationStore } from '@/stores/application';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
|
||||
export default {
|
||||
name: 'ModalSettingsUpdate',
|
||||
setup () {
|
||||
const applicationStore = useApplicationStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const {
|
||||
updateStatus,
|
||||
getDownloadProgress
|
||||
} = storeToRefs(applicationStore);
|
||||
const { allowPrerelease } = storeToRefs(settingsStore);
|
||||
const applicationStore = useApplicationStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const { changeAllowPrerelease } = settingsStore;
|
||||
const {
|
||||
updateStatus,
|
||||
getDownloadProgress: downloadPercentage
|
||||
} = storeToRefs(applicationStore);
|
||||
const { allowPrerelease } = storeToRefs(settingsStore);
|
||||
|
||||
return {
|
||||
updateStatus,
|
||||
downloadPercentage: getDownloadProgress,
|
||||
allowPrerelease,
|
||||
changeAllowPrerelease
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
updateMessage () {
|
||||
switch (this.updateStatus) {
|
||||
case 'noupdate':
|
||||
return this.$t('message.noUpdatesAvailable');
|
||||
case 'checking':
|
||||
return this.$t('message.checkingForUpdate');
|
||||
case 'nocheck':
|
||||
return this.$t('message.checkFailure');
|
||||
case 'available':
|
||||
return this.$t('message.updateAvailable');
|
||||
case 'downloading':
|
||||
return this.$t('message.downloadingUpdate');
|
||||
case 'downloaded':
|
||||
return this.$t('message.updateDownloaded');
|
||||
case 'link':
|
||||
return this.$t('message.updateAvailable');
|
||||
default:
|
||||
return this.updateStatus;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openOutside (link) {
|
||||
shell.openExternal(link);
|
||||
},
|
||||
checkForUpdates () {
|
||||
ipcRenderer.send('check-for-updates');
|
||||
},
|
||||
restartToUpdate () {
|
||||
ipcRenderer.send('restart-to-update');
|
||||
},
|
||||
toggleAllowPrerelease () {
|
||||
this.changeAllowPrerelease(!this.allowPrerelease);
|
||||
}
|
||||
const { changeAllowPrerelease } = settingsStore;
|
||||
|
||||
const updateMessage = computed(() => {
|
||||
switch (updateStatus.value) {
|
||||
case 'noupdate':
|
||||
return t('message.noUpdatesAvailable');
|
||||
case 'checking':
|
||||
return t('message.checkingForUpdate');
|
||||
case 'nocheck':
|
||||
return t('message.checkFailure');
|
||||
case 'available':
|
||||
return t('message.updateAvailable');
|
||||
case 'downloading':
|
||||
return t('message.downloadingUpdate');
|
||||
case 'downloaded':
|
||||
return t('message.updateDownloaded');
|
||||
case 'link':
|
||||
return t('message.updateAvailable');
|
||||
default:
|
||||
return updateStatus.value;
|
||||
}
|
||||
});
|
||||
|
||||
const openOutside = (link: string) => {
|
||||
shell.openExternal(link);
|
||||
};
|
||||
|
||||
const checkForUpdates = () => {
|
||||
ipcRenderer.send('check-for-updates');
|
||||
};
|
||||
|
||||
const restartToUpdate = () => {
|
||||
ipcRenderer.send('restart-to-update');
|
||||
};
|
||||
|
||||
const toggleAllowPrerelease = () => {
|
||||
changeAllowPrerelease(!allowPrerelease.value);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue