mirror of https://github.com/Fabio286/antares.git
feat(UI): new connection add panel
This commit is contained in:
parent
9af71a6e34
commit
8cd76e711c
|
@ -4,22 +4,21 @@
|
||||||
<div id="window-content">
|
<div id="window-content">
|
||||||
<TheSettingBar />
|
<TheSettingBar />
|
||||||
<div id="main-content" class="container">
|
<div id="main-content" class="container">
|
||||||
<TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
|
<div class="columns col-gapless">
|
||||||
<div v-else class="columns col-gapless">
|
|
||||||
<Workspace
|
<Workspace
|
||||||
v-for="connection in connections"
|
v-for="connection in connections"
|
||||||
:key="connection.uid"
|
:key="connection.uid"
|
||||||
:connection="connection"
|
:connection="connection"
|
||||||
/>
|
/>
|
||||||
|
<WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
|
||||||
</div>
|
</div>
|
||||||
|
<TheFooter />
|
||||||
|
<TheNotificationsBoard />
|
||||||
|
<TheScratchpad v-if="isScratchpad" />
|
||||||
|
<ModalSettings v-if="isSettingModal" />
|
||||||
|
<ModalDiscardChanges v-if="isUnsavedDiscardModal" />
|
||||||
|
<BaseTextEditor class="d-none" value="" />
|
||||||
</div>
|
</div>
|
||||||
<TheFooter />
|
|
||||||
<TheNotificationsBoard />
|
|
||||||
<ModalNewConnection v-if="isNewConnModal" />
|
|
||||||
<TheScratchpad v-if="isScratchpad" />
|
|
||||||
<ModalSettings v-if="isSettingModal" />
|
|
||||||
<ModalDiscardChanges v-if="isUnsavedDiscardModal" />
|
|
||||||
<BaseTextEditor class="d-none" value="" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -36,9 +35,8 @@ export default {
|
||||||
TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
|
TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
|
||||||
TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
|
TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
|
||||||
TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
|
TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
|
||||||
TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
|
|
||||||
Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
|
Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
|
||||||
ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
|
WorkspaceAddConnectionPanel: () => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel'),
|
||||||
ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
|
ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
|
||||||
TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
|
TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
|
||||||
ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
|
ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
|
||||||
|
@ -49,9 +47,8 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters({
|
...mapGetters({
|
||||||
|
selectedWorkspace: 'workspaces/getSelected',
|
||||||
isLoading: 'application/isLoading',
|
isLoading: 'application/isLoading',
|
||||||
isNewConnModal: 'application/isNewModal',
|
|
||||||
isEditModal: 'application/isEditModal',
|
|
||||||
isSettingModal: 'application/isSettingModal',
|
isSettingModal: 'application/isSettingModal',
|
||||||
isScratchpad: 'application/isScratchpad',
|
isScratchpad: 'application/isScratchpad',
|
||||||
connections: 'connections/getConnections',
|
connections: 'connections/getConnections',
|
||||||
|
|
|
@ -49,7 +49,8 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters({
|
...mapGetters({
|
||||||
getConnectionName: 'connections/getConnectionName'
|
getConnectionName: 'connections/getConnectionName',
|
||||||
|
selectedWorkspace: 'workspaces/getSelected'
|
||||||
}),
|
}),
|
||||||
connectionName () {
|
connectionName () {
|
||||||
return this.getConnectionName(this.contextConnection.uid);
|
return this.getConnectionName(this.contextConnection.uid);
|
||||||
|
@ -57,9 +58,12 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions({
|
...mapActions({
|
||||||
deleteConnection: 'connections/deleteConnection'
|
deleteConnection: 'connections/deleteConnection',
|
||||||
|
selectWorkspace: 'workspaces/selectWorkspace'
|
||||||
}),
|
}),
|
||||||
confirmDeleteConnection () {
|
confirmDeleteConnection () {
|
||||||
|
if (this.selectedWorkspace === this.contextConnection.uid)
|
||||||
|
this.selectWorkspace();
|
||||||
this.deleteConnection(this.contextConnection);
|
this.deleteConnection(this.contextConnection);
|
||||||
this.closeContext();
|
this.closeContext();
|
||||||
},
|
},
|
||||||
|
|
|
@ -25,7 +25,8 @@
|
||||||
</draggable>
|
</draggable>
|
||||||
<li
|
<li
|
||||||
class="settingbar-element btn btn-link ex-tooltip"
|
class="settingbar-element btn btn-link ex-tooltip"
|
||||||
@click="showNewConnModal"
|
:class="{'selected': 'NEW' === selectedWorkspace}"
|
||||||
|
@click="selectWorkspace('NEW')"
|
||||||
@mouseover.self="tooltipPosition"
|
@mouseover.self="tooltipPosition"
|
||||||
>
|
>
|
||||||
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
|
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
|
||||||
|
@ -92,7 +93,6 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions({
|
...mapActions({
|
||||||
updateConnections: 'connections/updateConnections',
|
updateConnections: 'connections/updateConnections',
|
||||||
showNewConnModal: 'application/showNewConnModal',
|
|
||||||
showSettingModal: 'application/showSettingModal',
|
showSettingModal: 'application/showSettingModal',
|
||||||
showScratchpad: 'application/showScratchpad',
|
showScratchpad: 'application/showScratchpad',
|
||||||
selectWorkspace: 'workspaces/selectWorkspace'
|
selectWorkspace: 'workspaces/selectWorkspace'
|
||||||
|
|
|
@ -58,6 +58,7 @@ export default {
|
||||||
}),
|
}),
|
||||||
windowTitle () {
|
windowTitle () {
|
||||||
if (!this.selectedWorkspace) return '';
|
if (!this.selectedWorkspace) return '';
|
||||||
|
if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
|
||||||
|
|
||||||
const connectionName = this.getConnectionName(this.selectedWorkspace);
|
const connectionName = this.getConnectionName(this.selectedWorkspace);
|
||||||
const workspace = this.getWorkspace(this.selectedWorkspace);
|
const workspace = this.getWorkspace(this.selectedWorkspace);
|
||||||
|
|
|
@ -0,0 +1,517 @@
|
||||||
|
<template>
|
||||||
|
<div class="connection-panel">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-nav">
|
||||||
|
<ul class="tab tab-block">
|
||||||
|
<li
|
||||||
|
class="tab-item c-hand"
|
||||||
|
:class="{'active': selectedTab === 'general'}"
|
||||||
|
@click="selectTab('general')"
|
||||||
|
>
|
||||||
|
<a class="tab-link">{{ $t('word.general') }}</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="tab-item c-hand"
|
||||||
|
:class="{'active': selectedTab === 'ssl'}"
|
||||||
|
@click="selectTab('ssl')"
|
||||||
|
>
|
||||||
|
<a class="tab-link">{{ $t('word.ssl') }}</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="tab-item"
|
||||||
|
:class="{'active': selectedTab === 'ssh'}"
|
||||||
|
@click="selectTab('ssh')"
|
||||||
|
>
|
||||||
|
<a class="c-hand">{{ $t('word.sshTunnel') }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-if="selectedTab === 'general'" class="panel-body py-0">
|
||||||
|
<div>
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<fieldset class="m-0" :disabled="isBusy">
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.connectionName') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
ref="firstInput"
|
||||||
|
v-model="connection.name"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.client') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<select v-model="connection.client" class="form-select">
|
||||||
|
<option value="mysql">
|
||||||
|
MySQL
|
||||||
|
</option>
|
||||||
|
<option value="maria">
|
||||||
|
MariaDB
|
||||||
|
</option>
|
||||||
|
<option value="pg">
|
||||||
|
PostgreSQL
|
||||||
|
</option>
|
||||||
|
<!-- <option value="mssql">
|
||||||
|
Microsoft SQL
|
||||||
|
</option>
|
||||||
|
<option value="oracledb">
|
||||||
|
Oracle DB
|
||||||
|
</option> -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.hostName') }}/IP</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.host"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.port') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.port"
|
||||||
|
class="form-input"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="65535"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="customizations.database" class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.database') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.database"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.user') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.user"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
:disabled="connection.ask"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.password') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.password"
|
||||||
|
class="form-input"
|
||||||
|
type="password"
|
||||||
|
:disabled="connection.ask"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12" />
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<label class="form-checkbox form-inline">
|
||||||
|
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="selectedTab === 'ssl'" class="panel-body py-0">
|
||||||
|
<div>
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('message.enableSsl') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsl">
|
||||||
|
<input type="checkbox" :checked="connection.ssl">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<fieldset class="m-0" :disabled="isBusy || !connection.ssl">
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<BaseUploadInput
|
||||||
|
:value="connection.key"
|
||||||
|
:message="$t('word.browse')"
|
||||||
|
@clear="pathClear('key')"
|
||||||
|
@change="pathSelection($event, 'key')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.certificate') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<BaseUploadInput
|
||||||
|
:value="connection.cert"
|
||||||
|
:message="$t('word.browse')"
|
||||||
|
@clear="pathClear('cert')"
|
||||||
|
@change="pathSelection($event, 'cert')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.caCertificate') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<BaseUploadInput
|
||||||
|
:value="connection.ca"
|
||||||
|
:message="$t('word.browse')"
|
||||||
|
@clear="pathClear('ca')"
|
||||||
|
@change="pathSelection($event, 'ca')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.ciphers') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
ref="firstInput"
|
||||||
|
v-model="connection.ciphers"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="selectedTab === 'ssh'" class="panel-body py-0">
|
||||||
|
<div>
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('message.enableSsh') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsh">
|
||||||
|
<input type="checkbox" :checked="connection.ssh">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<fieldset class="m-0" :disabled="isBusy || !connection.ssh">
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.hostName') }}/IP</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.sshHost"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.user') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.sshUser"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.password') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.sshPass"
|
||||||
|
class="form-input"
|
||||||
|
type="password"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.port') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<input
|
||||||
|
v-model="connection.sshPort"
|
||||||
|
class="form-input"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="65535"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group columns">
|
||||||
|
<div class="column col-4 col-sm-12">
|
||||||
|
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column col-8 col-sm-12">
|
||||||
|
<BaseUploadInput
|
||||||
|
:value="connection.sshKey"
|
||||||
|
:message="$t('word.browse')"
|
||||||
|
@clear="pathClear('sshKey')"
|
||||||
|
@change="pathSelection($event, 'sshKey')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<button
|
||||||
|
class="btn btn-gray mr-2"
|
||||||
|
:class="{'loading': isTesting}"
|
||||||
|
:disabled="isBusy"
|
||||||
|
@click="startTest"
|
||||||
|
>
|
||||||
|
{{ $t('message.testConnection') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary mr-2"
|
||||||
|
:disabled="isBusy"
|
||||||
|
@click="saveConnection"
|
||||||
|
>
|
||||||
|
{{ $t('word.save') }}
|
||||||
|
</button>
|
||||||
|
<!-- <button
|
||||||
|
class="btn btn-success"
|
||||||
|
:class="{'loading': isConnecting}"
|
||||||
|
:disabled="isBusy"
|
||||||
|
@click="startConnection"
|
||||||
|
>
|
||||||
|
{{ $t('word.connect') }}
|
||||||
|
</button> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ModalAskCredentials
|
||||||
|
v-if="isAsking"
|
||||||
|
@close-asking="closeAsking"
|
||||||
|
@credentials="continueTest"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapActions } from 'vuex';
|
||||||
|
import customizations from 'common/customizations';
|
||||||
|
import Connection from '@/ipc-api/Connection';
|
||||||
|
import { uidGen } from 'common/libs/uidGen';
|
||||||
|
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||||
|
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'WorkspaceAddConnectionPanel',
|
||||||
|
components: {
|
||||||
|
ModalAskCredentials,
|
||||||
|
BaseUploadInput
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
connection: {
|
||||||
|
name: '',
|
||||||
|
client: 'mysql',
|
||||||
|
host: '127.0.0.1',
|
||||||
|
database: null,
|
||||||
|
port: null,
|
||||||
|
user: null,
|
||||||
|
password: '',
|
||||||
|
ask: false,
|
||||||
|
uid: uidGen('C'),
|
||||||
|
ssl: false,
|
||||||
|
cert: '',
|
||||||
|
key: '',
|
||||||
|
ca: '',
|
||||||
|
ciphers: '',
|
||||||
|
ssh: false,
|
||||||
|
sshHost: '',
|
||||||
|
sshUser: '',
|
||||||
|
sshPass: '',
|
||||||
|
sshKey: '',
|
||||||
|
sshPort: 22
|
||||||
|
},
|
||||||
|
isConnecting: false,
|
||||||
|
isTesting: false,
|
||||||
|
isAsking: false,
|
||||||
|
selectedTab: 'general'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
customizations () {
|
||||||
|
return customizations[this.connection.client];
|
||||||
|
},
|
||||||
|
isBusy () {
|
||||||
|
return this.isConnecting || this.isTesting;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.setDefaults();
|
||||||
|
window.addEventListener('keydown', this.onKey);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.firstInput.focus();
|
||||||
|
}, 20);
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('keydown', this.onKey);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions({
|
||||||
|
addConnection: 'connections/addConnection',
|
||||||
|
connectWorkspace: 'workspaces/connectWorkspace',
|
||||||
|
addNotification: 'notifications/addNotification',
|
||||||
|
selectWorkspace: 'workspaces/selectWorkspace'
|
||||||
|
}),
|
||||||
|
setDefaults () {
|
||||||
|
this.connection.user = this.customizations.defaultUser;
|
||||||
|
this.connection.port = this.customizations.defaultPort;
|
||||||
|
this.connection.database = this.customizations.defaultDatabase;
|
||||||
|
},
|
||||||
|
async startConnection () {
|
||||||
|
await this.saveConnection();
|
||||||
|
this.isConnecting = true;
|
||||||
|
|
||||||
|
if (this.connection.ask)
|
||||||
|
this.isAsking = true;
|
||||||
|
else {
|
||||||
|
await this.connectWorkspace(this.connection);
|
||||||
|
this.isConnecting = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async startTest () {
|
||||||
|
this.isTesting = true;
|
||||||
|
|
||||||
|
if (this.connection.ask)
|
||||||
|
this.isAsking = true;
|
||||||
|
else {
|
||||||
|
try {
|
||||||
|
const res = await Connection.makeTest(this.connection);
|
||||||
|
if (res.status === 'error')
|
||||||
|
this.addNotification({ status: 'error', message: res.response.message });
|
||||||
|
else
|
||||||
|
this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
this.addNotification({ status: 'error', message: err.stack });
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isTesting = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async continueTest (credentials) { // if "Ask for credentials" is true
|
||||||
|
this.isAsking = false;
|
||||||
|
const params = Object.assign({}, this.connection, credentials);
|
||||||
|
try {
|
||||||
|
if (this.isConnecting) {
|
||||||
|
const params = Object.assign({}, this.connection, credentials);
|
||||||
|
await this.connectWorkspace(params);
|
||||||
|
this.isConnecting = false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const res = await Connection.makeTest(params);
|
||||||
|
if (res.status === 'error')
|
||||||
|
this.addNotification({ status: 'error', message: res.response.message });
|
||||||
|
else
|
||||||
|
this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
this.addNotification({ status: 'error', message: err.stack });
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isTesting = false;
|
||||||
|
},
|
||||||
|
saveConnection () {
|
||||||
|
this.selectWorkspace(this.connection.uid);
|
||||||
|
return this.addConnection(this.connection);
|
||||||
|
},
|
||||||
|
closeAsking () {
|
||||||
|
this.isTesting = false;
|
||||||
|
this.isAsking = false;
|
||||||
|
},
|
||||||
|
selectTab (tab) {
|
||||||
|
this.selectedTab = tab;
|
||||||
|
},
|
||||||
|
toggleSsl () {
|
||||||
|
this.connection.ssl = !this.connection.ssl;
|
||||||
|
},
|
||||||
|
toggleSsh () {
|
||||||
|
this.connection.ssh = !this.connection.ssh;
|
||||||
|
},
|
||||||
|
pathSelection (event, name) {
|
||||||
|
const { files } = event.target;
|
||||||
|
if (!files.length) return;
|
||||||
|
|
||||||
|
this.connection[name] = files[0].path;
|
||||||
|
},
|
||||||
|
pathClear (name) {
|
||||||
|
this.connection[name] = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.connection-panel {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 15vh;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
width: 450px;
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -340,7 +340,7 @@ import customizations from 'common/customizations';
|
||||||
import Connection from '@/ipc-api/Connection';
|
import Connection from '@/ipc-api/Connection';
|
||||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||||
import BaseUploadInput from '@/components/BaseUploadInput';
|
import BaseUploadInput from '@/components/BaseUploadInput';
|
||||||
// TODO: errori attivando ssh/ssl
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WorkspaceEditConnectionPanel',
|
name: 'WorkspaceEditConnectionPanel',
|
||||||
components: {
|
components: {
|
||||||
|
@ -388,10 +388,10 @@ export default {
|
||||||
await this.saveConnection();
|
await this.saveConnection();
|
||||||
this.isConnecting = true;
|
this.isConnecting = true;
|
||||||
|
|
||||||
if (this.connection.ask)
|
if (this.localConnection.ask)
|
||||||
this.isAsking = true;
|
this.isAsking = true;
|
||||||
else {
|
else {
|
||||||
await this.connectWorkspace(this.connection);
|
await this.connectWorkspace(this.localConnection);
|
||||||
this.isConnecting = false;
|
this.isConnecting = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -23,6 +23,7 @@ export default {
|
||||||
getConnections: state => state.connections,
|
getConnections: state => state.connections,
|
||||||
getConnectionName: state => uid => {
|
getConnectionName: state => uid => {
|
||||||
const connection = state.connections.filter(connection => connection.uid === uid)[0];
|
const connection = state.connections.filter(connection => connection.uid === uid)[0];
|
||||||
|
if (!connection) return '';
|
||||||
return connection.name
|
return connection.name
|
||||||
? connection.name
|
? connection.name
|
||||||
: connection.ask
|
: connection.ask
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default {
|
||||||
getSelected: state => {
|
getSelected: state => {
|
||||||
if (state.selected_workspace) return state.selected_workspace;
|
if (state.selected_workspace) return state.selected_workspace;
|
||||||
if (state.workspaces.length) return state.workspaces[0].uid;
|
if (state.workspaces.length) return state.workspaces[0].uid;
|
||||||
return null;
|
return 'NEW';
|
||||||
},
|
},
|
||||||
getWorkspace: state => uid => {
|
getWorkspace: state => uid => {
|
||||||
return state.workspaces.find(workspace => workspace.uid === uid);
|
return state.workspaces.find(workspace => workspace.uid === uid);
|
||||||
|
@ -52,7 +52,10 @@ export default {
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SELECT_WORKSPACE (state, uid) {
|
SELECT_WORKSPACE (state, uid) {
|
||||||
state.selected_workspace = uid;
|
if (!uid)
|
||||||
|
state.selected_workspace = state.workspaces.length ? state.workspaces[0].uid : 'NEW';
|
||||||
|
else
|
||||||
|
state.selected_workspace = uid;
|
||||||
},
|
},
|
||||||
SET_CONNECTED (state, payload) {
|
SET_CONNECTED (state, payload) {
|
||||||
const { uid, client, dataTypes, indexTypes, customizations, structure, version } = payload;
|
const { uid, client, dataTypes, indexTypes, customizations, structure, version } = payload;
|
||||||
|
|
Loading…
Reference in New Issue