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

perf(UI): improved all connections modal, closes #761

Browse Source
This commit is contained in:
Fabio Di Stasio
2024-06-20 18:12:47 +02:00
parent 4b5718e9b7
commit 25b7ae57c6
3 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/renderer/components/ModalAllConnections.vue
View File

@ -57,8 +57,21 @@
>
<div class="panel">
<div class="panel-header p-2 text-center p-relative">
<figure class="avatar avatar-lg pt-1 mb-1">
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`]" />
<figure class="avatar avatar-lg pt-1 mb-1 bg-dark">
<div
v-if="connection.icon"
class="settingbar-connection-icon"
>
<BaseIcon
:icon-name="camelize(connection.icon)"
:size="42"
/>
</div>
<div
v-else
class="settingbar-element-icon dbi ml-1"
:class="[`dbi-${connection.client}`]"
/>
</figure>
<div class="panel-title h6 text-ellipsis">
{{ getConnectionName(connection.uid) }}
@ -136,7 +149,19 @@
</div>
</div>
<div class="panel-footer text-center py-0">
<div v-if="connection.ssl" class="chip bg-success mt-2">
<div
v-if="connection.folderName"
class="chip mt-2 bg-dark"
>
<BaseIcon
icon-name="mdiFolder"
class="mr-1"
:style="[connection.color ? `color: ${connection.color};`: '']"
:size="18"
/>
{{ connection.folderName }}
</div>
<div v-if="connection.ssl" class="chip bg-dark mt-2">
<BaseIcon
icon-name="mdiShieldKey"
class="mr-1"
@ -144,7 +169,7 @@
/>
SSL
</div>
<div v-if="connection.ssh" class="chip bg-success mt-2">
<div v-if="connection.ssh" class="chip bg-dark mt-2">
<BaseIcon
icon-name="mdiConsoleNetwork"
class="mr-1"
@ -152,7 +177,7 @@
/>
SSH
</div>
<div v-if="connection.readonly" class="chip bg-success mt-2">
<div v-if="connection.readonly" class="chip bg-dark mt-2">
<BaseIcon
icon-name="mdiLock"
class="mr-1"
@ -209,6 +234,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { camelize } from '@/libs/camelize';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -218,7 +244,9 @@ const connectionsStore = useConnectionsStore();
const workspacesStore = useWorkspacesStore();
const { connections,
lastConnections
connectionsOrder,
lastConnections,
getFolders: folders
} = storeToRefs(connectionsStore);
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
@ -236,7 +264,8 @@ const clients = new Map([
['mysql', 'MySQL'],
['maria', 'MariaDB'],
['pg', 'PostgreSQL'],
['sqlite', 'SQLite']
['sqlite', 'SQLite'],
['firebird', 'Firebird SQL']
]);
const searchTerm = ref('');
@ -244,12 +273,17 @@ const isConfirmModal = ref(false);
const connectionHover: Ref<string> = ref(null);
const selectedConnection: Ref<ConnectionParams> = ref(null);
const sortedConnections = computed(() => {
const remappedConnections = computed(() => {
return connections.value
.map(c => {
const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
const connIcon = connectionsOrder.value.find((co) => co.uid === c.uid).icon;
const folder = folders.value.find(f => f.connections.includes(c.uid));
return {
...c,
icon: connIcon,
color: folder?.color,
folderName: folder?.name,
time: connTime
};
})
@ -261,7 +295,7 @@ const sortedConnections = computed(() => {
});
const filteredConnections = computed(() => {
return sortedConnections.value.filter(connection => {
return remappedConnections.value.filter(connection => {
return connection.name?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.host?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.database?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||

11
src/renderer/components/SettingBarConnections.vue
View File

@ -93,6 +93,7 @@ import * as Draggable from 'vuedraggable';
import BaseIcon from '@/components/BaseIcon.vue';
import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
import { camelize } from '@/libs/camelize';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -165,16 +166,6 @@ const getStatusBadge = (uid: string) => {
}
};
const camelize = (text: string) => {
const textArr = text.split('-');
for (let i = 0; i < textArr.length; i++) {
if (i === 0) continue;
textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
}
return textArr.join('');
};
watch(() => dummyNested.value.length, () => {
dummyNested.value = [];
});