fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

Additions

This commit is contained in:
Fabio 2020-05-23 13:32:14 +02:00
parent 0d5b2a2bd8
commit 07b9dca471
8 changed files with 446 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/renderer/components/BaseConfirmModal.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div class="modal modal-sm active">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header text-light">
<div class="modal-title h6">
<slot name="header" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
</div>
</div>
<div class="modal-footer">
<button
class="btn btn-primary mr-2"
@click="confirmModal"
>
{{ confirmText }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
Cancel
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseConfirmModal',
props: {
confirmText: {
type: String,
default: 'Confirm'
}
},
computed: {
hasHeader () {
return !!this.$slots.header;
},
hasBody () {
return !!this.$slots.body;
},
hasDefault () {
return !!this.$slots.default;
}
},
methods: {
confirmModal () {
this.$emit('confirm');
this.hideModal();
},
hideModal () {
this.$emit('hide');
}
}
};
</script>
<style scoped>
.modal.modal-sm .modal-container{
padding: 0;
}
</style>

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

@ -1,10 +1,5 @@
<template>
<div class="context">
<!-- <a
class="context-overlay c-hand"
@click="$emit('close')"
@contextmenu="$emit('close')"
/> -->
<div
v-click-outside="close"
class="context-container"
@ -28,15 +23,15 @@ export default {
},
computed: {
position () {
return {
top: this.contextEvent.clientY + 'px',
left: this.contextEvent.clientX + 'px'
return { // TODO: calc direction if near corners
top: this.contextEvent.clientY + 5 + 'px',
left: this.contextEvent.clientX + 5 + 'px'
};
}
},
methods: {
close () {
this.$emit('close');
this.$emit('closeContext');
}
}
};
@ -67,8 +62,6 @@ export default {
border-radius: 0.1rem;
display: flex;
flex-direction: column;
max-height: 75vh;
padding: 0.3rem;
width: 100%;
position: absolute;
pointer-events: initial;
@ -76,6 +69,12 @@ export default {
.context-element{
display: flex;
align-items: center;
padding: .1rem .3rem;
cursor: pointer;
&:hover{
background: $primary-color;
}
}
}

6
src/renderer/components/ModalAskCredentials.vue
View File

@ -6,7 +6,7 @@
<div class="modal-title h6">
Credentials
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
</div>
<div class="modal-body">
<div class="content">
@ -39,10 +39,10 @@
</div>
</div>
<div class="modal-footer text-light">
<button class="btn btn-primary mr-2" @click="sendCredentials">
<button class="btn btn-primary mr-2" @click.stop="sendCredentials">
Send
</button>
<button class="btn btn-link" @click="closeModal">
<button class="btn btn-link" @click.stop="closeModal">
Close
</button>
</div>

235
src/renderer/components/ModalEditConnection.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<div class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header text-light">
<div class="modal-title h6">
Create a new connection
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>
<div class="modal-body">
<div class="content">
<form class="form-horizontal">
<fieldset class="m-0" :disabled="isTesting">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Client:</label>
</div>
<div class="col-9 col-sm-12">
<select v-model="localConnection.client" class="form-select">
<option value="mysql">
MySQL/MariaDB
</option>
<option value="mssql">
Microsoft SQL
</option>
<option value="pg">
PostgreSQL
</option>
<option value="oracledb">
Oracle DB
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Host name/IP:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="localConnection.host"
class="form-input"
type="text"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Port:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="localConnection.port"
class="form-input"
type="number"
min="1"
max="65535"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">User:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="localConnection.user"
class="form-input"
type="text"
:disabled="localConnection.ask"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Password:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="localConnection.password"
class="form-input"
type="password"
:disabled="localConnection.ask"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12" />
<div class="col-9 col-sm-12">
<label class="form-checkbox form-inline">
<input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
</label>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="modal-footer text-light">
<BaseToast
class="mb-2"
:message="toast.message"
:status="toast.status"
/>
<button
class="btn btn-gray mr-2"
:class="{'loading': isTesting}"
@click="startTest"
>
Test connection
</button>
<button class="btn btn-primary mr-2" @click="saveEditConnection">
Save
</button>
<button class="btn btn-link" @click="closeModal">
Close
</button>
</div>
</div>
<ModalAskCredentials
v-if="isAsking"
@closeAsking="closeAsking"
@credentials="continueTest"
/>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import Connection from '@/ipc-api/Connection';
import ModalAskCredentials from '@/components/ModalAskCredentials';
import BaseToast from '@/components/BaseToast';
export default {
name: 'ModalEditConnection',
components: {
ModalAskCredentials,
BaseToast
},
props: {
isOpened: {
type: Boolean,
default: false
},
connection: Object
},
data () {
return {
toast: {
status: '',
message: ''
},
isTesting: false,
isAsking: false,
connectionProxy: null
};
},
computed: {
localConnection: {
get () {
if (this.connectionProxy === null)
return this.connection;
else
return this.connectionProxy;
},
set (val) {
this.connectionProxy = val;
}
}
},
methods: {
...mapActions({
editConnection: 'connections/editConnection'
}),
async startTest () {
this.isTesting = true;
this.toast = {
status: '',
message: ''
};
if (this.connection.ask)
this.isAsking = true;
else {
try {
const res = await Connection.makeTest(this.connection);
if (res.status === 'error')
this.toast = { status: 'error', message: res.response.message };
else
this.toast = { status: 'success', message: 'Connection successifully made!' };
}
catch (err) {
this.toast = { 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 {
const res = await Connection.makeTest(params);
if (res.status === 'error')
this.toast = { status: 'error', message: res.response.message };
else
this.toast = { status: 'success', message: 'Connection successifully made!' };
}
catch (err) {
this.toast = { status: 'error', message: err.stack };
}
this.isTesting = false;
},
saveEditConnection () {
this.editConnection(this.connection);
this.closeModal();
},
closeModal () {
this.$emit('close');
},
closeAsking () {
this.isTesting = false;
this.isAsking = false;
}
}
};
</script>
<style scoped>
.modal-container{
max-width: 450px;
}
</style>

13
src/renderer/components/ModalNewConnection.vue
View File

@ -216,7 +216,18 @@ export default {
async continueTest (credentials) { // if "Ask for credentials" is true
this.isAsking = false;
const params = Object.assign({}, this.connection, credentials);
await Connection.makeTest(params);
try {
const res = await Connection.makeTest(params);
if (res.status === 'error')
this.toast = { status: 'error', message: res.response.message };
else
this.toast = { status: 'success', message: 'Connection successifully made!' };
}
catch (err) {
this.toast = { status: 'error', message: err.stack };
}
this.isTesting = false;
},
saveNewConnection () {
this.addConnection(this.connection);

81
src/renderer/components/SettingBarContext.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<BaseContextMenu
:context-event="contextEvent"
@closeContext="$emit('closeContext')"
>
<div class="context-element" @click="showEditModal">
<i class="material-icons md-18 text-light pr-1">edit</i> Edit
</div>
<div class="context-element" @click="showConfirmModal">
<i class="material-icons md-18 text-light pr-1">delete</i> Delete
</div>
<ConfirmModal
v-if="isConfirmModal"
@confirm="deleteConnection(contextConnection)"
@hide="hideConfirmModal"
>
<template :slot="'header'">
Delete connection
</template>
<div :slot="'body'">
<div class="mb-2">
Do you confirm the cancellation of <b>{{ contextConnection.user }}@{{ contextConnection.host }}:{{ contextConnection.port }}</b>?
</div>
</div>
</ConfirmModal>
<!-- TODO: move to vuex -->
<ModalEditConnection
v-if="isEditModal"
:connection="contextConnection"
@close="isEditModal = false"
/>
</BaseContextMenu>
</template>
<script>
import { mapActions } from 'vuex';
import BaseContextMenu from '@/components/BaseContextMenu';
import ConfirmModal from '@/components/BaseConfirmModal';
import ModalEditConnection from '@/components/ModalEditConnection';
export default {
name: 'SettingBarContext',
components: {
BaseContextMenu,
ConfirmModal,
ModalEditConnection
},
props: {
contextEvent: MouseEvent,
contextConnection: Object
},
data () {
return {
isConfirmModal: false,
isEditModal: false
};
},
methods: {
...mapActions({
deleteConnection: 'connections/deleteConnection'
}),
showConfirmModal () {
this.isConfirmModal = true;
},
hideConfirmModal () {
this.isConfirmModal = false;
},
showEditModal () {
this.isEditModal = true;
},
hideEditModal () {
this.isEditModal = false;
}
}
};
</script>
<style>
</style>

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

@ -1,18 +1,12 @@
<template>
<div id="settingbar">
<div class="settingbar-top-elements">
<BaseContextMenu
<SettingBarContext
v-if="isContext"
:context-event="contextEvent"
@close="isContext = false"
>
<div class="context-element">
<i class="material-icons md-18 text-light pr-1">edit</i> Edit
</div>
<div class="context-element">
<i class="material-icons md-18 text-light pr-1">delete</i> Delete
</div>
</BaseContextMenu>
:context-connection="contextConnection"
@closeContext="isContext = false"
/>
<ul class="settingbar-elements">
<draggable v-model="connections">
<li
@ -23,7 +17,7 @@
:class="{'selected': connection.uid === selectedWorkspace}"
:data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
@click="selectWorkspace(connection.uid)"
@contextmenu.prevent="contextMenu($event)"
@contextmenu.prevent="contextMenu($event, connection)"
>
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
</li>
@ -51,19 +45,20 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import draggable from 'vuedraggable';
import BaseContextMenu from '@/components/BaseContextMenu';
import SettingBarContext from '@/components/SettingBarContext';
export default {
name: 'TheSettingBar',
components: {
draggable,
BaseContextMenu
SettingBarContext
},
data () {
return {
dragElement: null,
isContext: false,
contextEvent: null
contextEvent: null,
contextConnection: {}
};
},
computed: {
@ -87,8 +82,9 @@ export default {
showNewConnModal: 'connections/showNewConnModal',
selectWorkspace: 'workspaces/selectWorkspace'
}),
contextMenu (event) {
contextMenu (event, connection) {
this.contextEvent = event;
this.contextConnection = connection;
this.isContext = true;
}
}
@ -111,6 +107,7 @@ export default {
.settingbar-elements{
list-style: none;
text-align: center;
width: $settingbar-width;
padding: 0;
margin: 0;

12
src/renderer/store/modules/connections.store.js
View File

@ -5,7 +5,8 @@ export default {
strict: true,
state: {
connections: [],
is_new_modal: false
is_new_modal: false,
is_edit_modal: false
},
getters: {
getConnections: state => state.connections,
@ -15,6 +16,9 @@ export default {
ADD_CONNECTION (state, connection) {
state.connections.push(connection);
},
DELETE_CONNECTION (state, connection) {
state.connections = state.connections.filter(el => el.uid !== connection.uid);
},
UPDATE_CONNECTIONS (state, connections) {
state.connections = connections;
},
@ -29,6 +33,12 @@ export default {
addConnection ({ commit }, connection) {
commit('ADD_CONNECTION', connection);
},
deleteConnection ({ commit }, connection) {
commit('DELETE_CONNECTION', connection);
},
editConnection ({ commit }, connection) {
commit('EDIT_CONNECTION', connection);
},
updateConnections ({ commit }, connections) {
commit('UPDATE_CONNECTIONS', connections);
},