fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat: modal with all connections

Browse Source
This commit is contained in:
Fabio Di Stasio
2022-07-02 15:30:36 +02:00
parent 36e98e0742
commit a703dcc53e
10 changed files with 394 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/renderer/components/ModalAllConnections.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<Teleport to="#window-content">
<div class="modal active">
<a class="modal-overlay" @click.stop="closeModal" />
<div ref="trapRef" class="modal-container p-0 pb-4">
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-apps mr-1" />
<span class="cut-text">{{ $t('message.allConnections') }}</span>
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
</div>
<div class="modal-body py-0">
<div class="columns">
<div
v-for="connection in connections"
:key="connection.uid"
class="column col-md-6 col-lg-4 col-3 p-3"
>
<div class="panel">
<div class="panel-header text-center">
<figure class="avatar avatar-lg">
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`]" />
</figure>
<div class="panel-title h6 mt-10">
{{ getConnectionName(connection.uid) }}
</div>
<div class="panel-subtitle">
{{ connection.client }}
</div>
</div>
<div class="panel-body text-center">
<div v-if="connection.databasePath">
<div class="pl-1 text-break">
<span class="text-bold">PATH:</span> {{ connection.databasePath }}
</div>
</div>
<div v-else>
<div class="pl-1 text-break">
<span class="text-bold">HOST:</span> {{ connection.host }}
</div>
</div>
<div v-if="connection.user">
<div class="pl-1 text-break">
<span class="text-bold">USER:</span> {{ connection.user }}
</div>
</div>
<div v-if="connection.schema">
<div class="pl-1 text-break">
<span class="text-bold">SCHEMA:</span> {{ connection.schema }}
</div>
</div>
<div v-if="connection.database">
<div class="pl-1 text-break">
<span class="text-bold">DATABASE:</span> {{ connection.database }}
</div>
</div>
</div>
<div class="panel-footer text-center py-0">
<div v-if="connection.ssl" class="chip bg-success mt-2">
SSL
</div>
<div v-if="connection.ssh" class="chip bg-success mt-2">
SSH
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { useFocusTrap } from '@/composables/useFocusTrap';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
import { storeToRefs } from 'pinia';
const connectionsStore = useConnectionsStore();
const workspacesStore = useWorkspacesStore();
const { connections } = storeToRefs(connectionsStore);
const { getConnectionName } = connectionsStore;
const { getWorkspace } = workspacesStore;
const { trapRef } = useFocusTrap();
const emit = defineEmits(['close']);
const closeModal = () => emit('close');
const onKey = (e:KeyboardEvent) => {
e.stopPropagation();
if (e.key === 'Escape')
closeModal();
};
const getStatusBadge = (uid: string) => {
if (getWorkspace(uid)) {
const status = getWorkspace(uid).connectionStatus;
switch (status) {
case 'connected':
return 'badge badge-connected';
case 'connecting':
return 'badge badge-connecting';
case 'failed':
return 'badge badge-failed';
default:
return '';
}
}
};
window.addEventListener('keydown', onKey, { capture: true });
</script>
<style lang="scss" scoped>
.vscroll {
height: 1000px;
overflow: auto;
overflow-anchor: none;
}
.column-resizable {
&:hover,
&:active {
resize: horizontal;
overflow: hidden;
}
}
.table-column-title {
display: flex;
align-items: center;
}
.sort-icon {
font-size: 0.7rem;
line-height: 1;
margin-left: 0.2rem;
}
.result-tabs {
background: transparent !important;
margin: 0;
}
.modal {
align-items: flex-start;
.modal-container {
max-width: 75vw;
margin-top: 10vh;
.modal-body {
height: 80vh;
}
}
}
.processes-toolbar {
display: flex;
justify-content: space-between;
}
</style>