mirror of
https://github.com/Fabio286/antares.git
synced 2025-02-16 19:50:37 +01:00
Merge pull request #481 from antares-sql/new-sidebar
New connections sidebar
This commit is contained in:
GitHub
commit
36358584fd
62
package-lock.json
generated
62
package-lock.json
generated
@ -22,6 +22,7 @@
|
||||
"electron-updater": "~4.6.5",
|
||||
"electron-window-state": "~5.0.3",
|
||||
"encoding": "~0.1.13",
|
||||
"floating-vue": "~2.0.0-beta.20",
|
||||
"leaflet": "~1.7.1",
|
||||
"marked": "~4.0.19",
|
||||
"moment": "~2.29.4",
|
||||
@ -2011,6 +2012,19 @@
|
||||
"npm": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
|
||||
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "0.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
|
||||
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@heroku/socksv5": {
|
||||
"version": "0.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@heroku/socksv5/-/socksv5-0.0.9.tgz",
|
||||
@ -8105,6 +8119,18 @@
|
||||
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/floating-vue": {
|
||||
"version": "2.0.0-beta.20",
|
||||
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
|
||||
"integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^0.1.10",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
@ -16127,6 +16153,14 @@
|
||||
"webpack": "^4.1.0 || ^5.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
@ -18274,6 +18308,19 @@
|
||||
"resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-6.1.2.tgz",
|
||||
"integrity": "sha512-QSvmexHCxeRUk1/yKmoEDaWB5Hohjvtim5g2JJwy8S/l0L4b3y/GxSpE6vN4SBoVGGahEQW21uqyRr7EofI35A=="
|
||||
},
|
||||
"@floating-ui/core": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
|
||||
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
|
||||
},
|
||||
"@floating-ui/dom": {
|
||||
"version": "0.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
|
||||
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
|
||||
"requires": {
|
||||
"@floating-ui/core": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"@heroku/socksv5": {
|
||||
"version": "0.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@heroku/socksv5/-/socksv5-0.0.9.tgz",
|
||||
@ -22979,6 +23026,15 @@
|
||||
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"floating-vue": {
|
||||
"version": "2.0.0-beta.20",
|
||||
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
|
||||
"integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
|
||||
"requires": {
|
||||
"@floating-ui/dom": "^0.1.10",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
@ -28960,6 +29016,12 @@
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"requires": {}
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
|
||||
@ -131,6 +131,7 @@
|
||||
"electron-updater": "~4.6.5",
|
||||
"electron-window-state": "~5.0.3",
|
||||
"encoding": "~0.1.13",
|
||||
"floating-vue": "~2.0.0-beta.20",
|
||||
"leaflet": "~1.7.1",
|
||||
"marked": "~4.0.19",
|
||||
"moment": "~2.29.4",
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export function uidGen (prefix?: string) {
|
||||
return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase();
|
||||
return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substring(2, 11).toUpperCase();
|
||||
}
|
||||
|
||||
@ -55,20 +55,7 @@
|
||||
<div class="panel-subtitle">
|
||||
{{ clients.get(connection.client) || connection.client }}
|
||||
</div>
|
||||
<div class="all-connections-buttons p-absolute d-flex" style="top: 0; right: 0;">
|
||||
<i
|
||||
v-if="connection.isPinned"
|
||||
class="all-connections-pinned mdi mdi-18px"
|
||||
:class="connectionHover === connection.uid ? 'mdi-pin-off' : 'mdi-pin'"
|
||||
:title="t('word.unpin')"
|
||||
@click.stop="unpinConnection(connection.uid)"
|
||||
/>
|
||||
<i
|
||||
v-else
|
||||
class="all-connections-pin mdi mdi-18px mdi-pin mdi-rotate-45"
|
||||
:title="t('word.pin')"
|
||||
@click.stop="pinConnection(connection.uid)"
|
||||
/>
|
||||
<div class="all-connections-buttons p-absolute d-flex" :style="'top: 0; right: 0;'">
|
||||
<i
|
||||
class="all-connections-delete mdi mdi-delete mdi-18px ml-2"
|
||||
:title="t('word.delete')"
|
||||
@ -126,7 +113,7 @@
|
||||
key="trick"
|
||||
readonly
|
||||
class="p-absolute"
|
||||
style="width: 1px; height: 1px; opacity: 0;"
|
||||
:style="'width: 1px; height: 1px; opacity: 0;'"
|
||||
type="text"
|
||||
>
|
||||
<!-- workaround for useFocusTrap $lastFocusable -->
|
||||
@ -171,15 +158,12 @@ const connectionsStore = useConnectionsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
const { connections,
|
||||
pinnedConnections,
|
||||
lastConnections
|
||||
} = storeToRefs(connectionsStore);
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
const {
|
||||
getConnectionName,
|
||||
pinConnection,
|
||||
unpinConnection,
|
||||
deleteConnection
|
||||
} = connectionsStore;
|
||||
const { selectWorkspace } = workspacesStore;
|
||||
@ -206,13 +190,10 @@ const sortedConnections = computed(() => {
|
||||
const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
|
||||
return {
|
||||
...c,
|
||||
time: connTime,
|
||||
isPinned: pinnedConnections.value.has(c.uid)
|
||||
time: connTime
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.isPinned < b.isPinned) return 1;
|
||||
if (a.isPinned > b.isPinned) return -1;
|
||||
if (a.time < b.time) return 1;
|
||||
if (a.time > b.time) return -1;
|
||||
return 0;
|
||||
|
||||
183
src/renderer/components/ModalConnectionAppearence.vue
Normal file
183
src/renderer/components/ModalConnectionAppearence.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<Teleport to="#window-content">
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay" @click.stop="closeModal" />
|
||||
<div ref="trapRef" class="modal-container p-0">
|
||||
<div class="modal-header pl-2">
|
||||
<div class="modal-title h6">
|
||||
<div class="d-flex">
|
||||
<i class="mdi mdi-24px mdi-brush-variant mr-1" />
|
||||
<span class="cut-text">{{ t('message.editConnectionAppearence') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body pb-0">
|
||||
<div class="content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group mb-4">
|
||||
<div class="col-3">
|
||||
<label class="form-label">{{ t('word.label') }}</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localConnection.name"
|
||||
class="form-input"
|
||||
type="text"
|
||||
:placeholder="getConnectionName(localConnection.uid)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label">{{ t('word.icon') }}</label>
|
||||
</div>
|
||||
<div class="col-9 icons-wrapper">
|
||||
<div
|
||||
v-for="icon in icons"
|
||||
:key="icon.name"
|
||||
class="icon-box"
|
||||
:title="icon.name"
|
||||
:class="[icon.code ? `mdi ${icon.code} mdi-36px` : `dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
|
||||
@click="localConnection.icon = icon.code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary mr-2" @click.stop="editFolderAppearence">
|
||||
{{ t('word.update') }}
|
||||
</button>
|
||||
<button class="btn btn-link" @click.stop="closeModal">
|
||||
{{ t('word.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
|
||||
import { useFocusTrap } from '@/composables/useFocusTrap';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
|
||||
import { unproxify } from '@/libs/unproxify';
|
||||
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
connection: {
|
||||
type: Object as PropType<SidebarElement>,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { updateConnectionOrder, getConnectionName } = connectionsStore;
|
||||
|
||||
const icons = [
|
||||
{ name: 'default', code: null },
|
||||
|
||||
// Symbols
|
||||
{ name: 'account-group', code: 'mdi-account-group-outline' },
|
||||
{ name: 'cloud', code: 'mdi-cloud-outline' },
|
||||
{ name: 'key-chain', code: 'mdi-key-chain-variant' },
|
||||
{ name: 'lightning-bolt', code: 'mdi-lightning-bolt' },
|
||||
{ name: 'map-marker', code: 'mdi-map-marker-radius-outline' },
|
||||
{ name: 'api', code: 'mdi-api' },
|
||||
{ name: 'chart-line', code: 'mdi-chart-line' },
|
||||
{ name: 'chat', code: 'mdi-chat-outline' },
|
||||
{ name: 'bug', code: 'mdi-bug-outline' },
|
||||
{ name: 'shield', code: 'mdi-shield-outline' },
|
||||
{ name: 'cart', code: 'mdi-cart-variant' },
|
||||
{ name: 'bank', code: 'mdi-bank-outline' },
|
||||
{ name: 'receipt', code: 'mdi-receipt-text-outline' },
|
||||
{ name: 'raspberry-pi', code: 'mdi-raspberry-pi' },
|
||||
{ name: 'book', code: 'mdi-book-outline' },
|
||||
{ name: 'web', code: 'mdi-web' },
|
||||
{ name: 'multimedia', code: 'mdi-multimedia' },
|
||||
{ name: 'qr-code', code: 'mdi-qrcode' },
|
||||
{ name: 'flask', code: 'mdi-flask-outline' },
|
||||
{ name: 'memory', code: 'mdi-memory' },
|
||||
{ name: 'cube', code: 'mdi-cube-outline' },
|
||||
{ name: 'weather', code: 'mdi-weather-partly-snowy-rainy' },
|
||||
{ name: 'controller', code: 'mdi-controller' },
|
||||
{ name: 'home-group', code: 'mdi-home-group' },
|
||||
|
||||
// Vehicles
|
||||
{ name: 'truck', code: 'mdi-truck-outline' },
|
||||
{ name: 'car', code: 'mdi-car' },
|
||||
{ name: 'motorbike', code: 'mdi-atv' },
|
||||
{ name: 'train', code: 'mdi-train' },
|
||||
{ name: 'airplane', code: 'mdi-airplane' },
|
||||
{ name: 'ferry', code: 'mdi-ferry' },
|
||||
|
||||
// Brand
|
||||
{ name: 'docker', code: 'mdi-docker' },
|
||||
{ name: 'open-source', code: 'mdi-open-source-initiative' },
|
||||
{ name: 'aws', code: 'mdi-aws' },
|
||||
{ name: 'google-cloud', code: 'mdi-google-cloud' },
|
||||
{ name: 'microsoft-azure', code: 'mdi-microsoft-azure' },
|
||||
{ name: 'linux', code: 'mdi-linux' },
|
||||
{ name: 'microsoft-windows', code: 'mdi-microsoft-windows' },
|
||||
{ name: 'apple', code: 'mdi-apple' },
|
||||
{ name: 'android', code: 'mdi-android' }
|
||||
];
|
||||
|
||||
const { trapRef } = useFocusTrap();
|
||||
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const localConnection: Ref<SidebarElement> = ref(unproxify(props.connection));
|
||||
|
||||
const editFolderAppearence = () => {
|
||||
updateConnectionOrder(localConnection.value);
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const closeModal = () => emit('close');
|
||||
|
||||
const onKey =(e: KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Escape')
|
||||
closeModal();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-container {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.icons-wrapper{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 40px);
|
||||
gap: 5px;
|
||||
|
||||
.icon-box {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
outline: 2px solid $primary-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/renderer/components/ModalFolderAppearence.vue
Normal file
152
src/renderer/components/ModalFolderAppearence.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<Teleport to="#window-content">
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay" @click.stop="closeModal" />
|
||||
<div ref="trapRef" class="modal-container p-0">
|
||||
<div class="modal-header pl-2">
|
||||
<div class="modal-title h6">
|
||||
<div class="d-flex">
|
||||
<i class="mdi mdi-24px mdi-folder-edit mr-1" />
|
||||
<span class="cut-text">{{ t('message.editFolder') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body pb-0">
|
||||
<div class="content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group mb-4">
|
||||
<div class="col-3">
|
||||
<label class="form-label">{{ t('word.name') }}</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localFolder.name"
|
||||
class="form-input"
|
||||
type="text"
|
||||
required
|
||||
:placeholder="t('message.folderName')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label">{{ t('word.color') }}</label>
|
||||
</div>
|
||||
<div class="col-9 color-wrapper">
|
||||
<div
|
||||
v-for="color in colorPalette"
|
||||
:key="color.name"
|
||||
class="color-box"
|
||||
:title="color.name"
|
||||
:style="`background-color: ${color.hex}`"
|
||||
@click="localFolder.color = color.hex"
|
||||
>
|
||||
<i v-if="localFolder.color === color.hex" class="mdi mdi-check" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary mr-2" @click.stop="editFolderAppearence">
|
||||
{{ t('word.update') }}
|
||||
</button>
|
||||
<button class="btn btn-link" @click.stop="closeModal">
|
||||
{{ t('word.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
|
||||
import { useFocusTrap } from '@/composables/useFocusTrap';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
|
||||
import { unproxify } from '@/libs/unproxify';
|
||||
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
folder: {
|
||||
type: Object as PropType<SidebarElement>,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { updateConnectionOrder } = connectionsStore;
|
||||
|
||||
const colorPalette = [
|
||||
{ name: 'default', hex: '#E36929' },
|
||||
{ name: 'grape-fruit', hex: '#ED5565' },
|
||||
{ name: 'rose', hex: '#E3242B' },
|
||||
{ name: 'fire', hex: '#FDA50F' },
|
||||
{ name: 'sunflower', hex: '#FFCE54' },
|
||||
{ name: 'moss', hex: '#8A985E' },
|
||||
{ name: 'grass', hex: '#6DCD05' },
|
||||
{ name: 'emerald', hex: '#038835' },
|
||||
{ name: 'mint', hex: '#48CFAD' },
|
||||
{ name: 'aqua', hex: '#4FC1E9' },
|
||||
{ name: 'royal-lblue', hex: '#4169E1' },
|
||||
{ name: 'blue-jeans', hex: '#5D9CEC' },
|
||||
{ name: 'stone', hex: '#59788E' },
|
||||
{ name: 'lavander', hex: '#AC92EC' },
|
||||
{ name: 'pink-rose', hex: '#EC87C0' },
|
||||
{ name: 'smoke', hex: '#BEBDB8' },
|
||||
{ name: 'slate', hex: '#757C88' }
|
||||
];
|
||||
|
||||
const { trapRef } = useFocusTrap();
|
||||
|
||||
const firstInput: Ref<HTMLInputElement> = ref(null);
|
||||
const localFolder: Ref<SidebarElement> = ref(unproxify(props.folder));
|
||||
|
||||
const editFolderAppearence = () => {
|
||||
updateConnectionOrder(localFolder.value);
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const closeModal = () => emit('close');
|
||||
|
||||
const onKey =(e: KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Escape')
|
||||
closeModal();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-container {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.color-wrapper{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 20px);
|
||||
gap: 5px;
|
||||
|
||||
.color-box {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
217
src/renderer/components/SettingBarConnections.vue
Normal file
217
src/renderer/components/SettingBarConnections.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<Draggable
|
||||
:list="localList"
|
||||
item-key="'uid'"
|
||||
ghost-class="ghost"
|
||||
:group="{ name: 'connections', pull: 'clone' }"
|
||||
:swap-threshold="0.3"
|
||||
@start="emit('start', $event)"
|
||||
@end="emit('end', $event)"
|
||||
@change="emit('update:modelValue', localList)"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<li
|
||||
v-if="element.isFolder || !folderedConnections.includes(element.uid)"
|
||||
:draggable="true"
|
||||
:class="{'folder': element.isFolder}"
|
||||
@dragstart="draggedElement = element.uid"
|
||||
@dragend="dragEnd"
|
||||
@contextmenu.prevent="emit('context', $event, element)"
|
||||
>
|
||||
<div
|
||||
v-if="!element.isFolder && !folderedConnections.includes(element.uid)"
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: getConnectionName(element.uid)
|
||||
}"
|
||||
class="settingbar-element btn btn-link"
|
||||
:class="{ 'selected': element.uid === selectedWorkspace }"
|
||||
placement="right"
|
||||
strategy="fixed"
|
||||
@click.stop="selectWorkspace(element.uid)"
|
||||
>
|
||||
<!-- Creates a new folder -->
|
||||
<SettingBarConnections
|
||||
v-if="draggedElement && !foldersUid.includes(draggedElement)"
|
||||
class="drag-area"
|
||||
:class="[{'folder-preview': coveredElement === element.uid && draggedElement !== coveredElement}]"
|
||||
:list="dummyNested"
|
||||
@dragenter="coveredElement = element.uid"
|
||||
@dragleave="coveredElement = false"
|
||||
@change="createFolder"
|
||||
/>
|
||||
<i v-if="coveredElement === element.uid && draggedElement !== coveredElement" class="settingbar-element-icon mdi mdi-folder-plus mdi-36px" />
|
||||
<template v-else>
|
||||
<div class="settingbar-element-icon-wrapper">
|
||||
<i
|
||||
class="settingbar-element-icon dbi"
|
||||
:class="[element.icon ? `mdi ${element.icon} mdi-36px`: `dbi-${element.client}`, getStatusBadge(element.uid)]"
|
||||
/>
|
||||
<small class="settingbar-element-name">{{ element.name || getConnectionName(element.uid) }}</small>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<SettingBarConnectionsFolder
|
||||
v-else-if="element.isFolder"
|
||||
:key="`${element.uid}-${element.connections.length}`"
|
||||
:folder="element"
|
||||
:covered-element="coveredElement"
|
||||
:dragged-element="draggedElement"
|
||||
:folder-drag="folderDrag"
|
||||
@select-workspace="selectWorkspace"
|
||||
@covered="coveredElement = element.uid"
|
||||
@uncovered="coveredElement = false"
|
||||
@folder-sort="emit('update:modelValue', localList)"
|
||||
@folder-drag="folderDrag = $event"
|
||||
@context="emit('context', $event.event, $event.content)"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
</Draggable>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, Ref, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import * as Draggable from 'vuedraggable';
|
||||
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
|
||||
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const { getFolders: folders } = storeToRefs(connectionsStore);
|
||||
|
||||
const { getWorkspace, selectWorkspace } = workspacesStore;
|
||||
const { getConnectionName, addFolder } = connectionsStore;
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array as PropType<SidebarElement[]>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['start', 'end', 'move', 'context', 'update:modelValue']);
|
||||
|
||||
const localList = ref(props.modelValue);
|
||||
const dummyNested = ref([]);
|
||||
const draggedElement: Ref<string | false> = ref(false);
|
||||
const coveredElement: Ref<string | false> = ref(false);
|
||||
const folderDrag = ref(false);
|
||||
|
||||
const foldersUid = computed(() => folders.value.reduce<string[]>((acc, curr) => {
|
||||
acc.push(curr.uid);
|
||||
return acc;
|
||||
}, []));
|
||||
const folderedConnections = computed(() => {
|
||||
return folders.value.reduce<string[]>((acc, curr) => {
|
||||
acc = [...acc, ...curr.connections];
|
||||
return acc;
|
||||
}, []);
|
||||
});
|
||||
|
||||
const dragEnd = () => {
|
||||
coveredElement.value = false;
|
||||
draggedElement.value = false;
|
||||
};
|
||||
|
||||
const createFolder = ({ added }: {added: { element: SidebarElement }}) => {
|
||||
if (typeof coveredElement.value === 'string' && !added.element.isFolder) {
|
||||
// Create folder
|
||||
addFolder({
|
||||
after: coveredElement.value,
|
||||
connections: [coveredElement.value, added.element.uid]
|
||||
});
|
||||
|
||||
coveredElement.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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 '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => dummyNested.value.length, () => {
|
||||
dummyNested.value = [];
|
||||
});
|
||||
|
||||
watch(() => props.modelValue, (value) => {
|
||||
localList.value = value;
|
||||
folderDrag.value = false;// Prenent some edge cases
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.drag-area {
|
||||
background-color: transparent;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
transition: all .2s;
|
||||
|
||||
&.folder-preview {
|
||||
border: 2px dotted;
|
||||
border-radius: 15px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.ghost:not(.folder) {
|
||||
height: $settingbar-width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
transition: opacity .2s;
|
||||
|
||||
.settingbar-element {
|
||||
border-radius: 15px!important;
|
||||
background: rgba($color: #fff, $alpha: 0.1);
|
||||
|
||||
.settingbar-element-name {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 3px!important;
|
||||
text-align: center!important;
|
||||
font-size: 65%;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settingbar-element-icon {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
436
src/renderer/components/SettingBarConnectionsFolder.vue
Normal file
436
src/renderer/components/SettingBarConnectionsFolder.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<div
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: folder.name,
|
||||
disabled: isOpen || !folder.name
|
||||
}"
|
||||
class="settingbar-element folder btn btn-link p-1"
|
||||
:class="[{ 'selected-inside': hasSelectedInside && !isOpen }]"
|
||||
:style="isOpen ? `height: auto; opacity: 1;` : null"
|
||||
>
|
||||
<Draggable
|
||||
class="folder-container"
|
||||
:item-key="((item: string) => localList.indexOf(item))"
|
||||
:class="[{'opened': isOpen}]"
|
||||
:style="[
|
||||
`background: ${folder.color};`,
|
||||
isOpen ? `max-height: ${60*(folder.connections.length+1)}px` : 'max-height: 60px',
|
||||
!isOpen ? `overflow: hidden;` : ''
|
||||
]"
|
||||
:list="localList"
|
||||
ghost-class="ghost"
|
||||
:group="{ name: 'connections', put: folderDrag ? undefined : 'clone' }"
|
||||
@start="dragStart"
|
||||
@end="dragStop"
|
||||
>
|
||||
<template #header>
|
||||
<div
|
||||
v-if="!isOpen"
|
||||
class="folder-overlay"
|
||||
@click="openFolder"
|
||||
@contextmenu.stop="emit('context', {event: $event, content: folder})"
|
||||
/>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="folder-icon"
|
||||
:style="`color: ${folder.color};`"
|
||||
@click="closeFolder"
|
||||
>
|
||||
<i class="folder-icon-open mdi mdi-folder-open mdi-36px" />
|
||||
<i class="folder-icon-close mdi mdi-folder mdi-36px" />
|
||||
</div>
|
||||
</template>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
:key="element"
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: getConnectionName(element)
|
||||
}"
|
||||
class="folder-element"
|
||||
:class="{ 'selected': element === selectedWorkspace }"
|
||||
@click="emit('select-workspace', element)"
|
||||
@contextmenu.stop="emit('context', {event: $event, content: getConnectionOrderByUid(element)})"
|
||||
>
|
||||
<i
|
||||
class="folder-element-icon dbi"
|
||||
:class="[getConnectionOrderByUid(element)?.icon ? `mdi ${getConnectionOrderByUid(element).icon}`: `dbi-${getConnectionOrderByUid(element)?.client}`, getStatusBadge(element)]"
|
||||
/>
|
||||
<small v-if="isOpen" class="folder-element-name">{{ getConnectionOrderByUid(element)?.name || getConnectionName(element) }}</small>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
<SettingBarConnections
|
||||
v-if="draggedElement && !foldersUid.includes(draggedElement)"
|
||||
class="drag-area"
|
||||
:class="[{'folder-preview': coveredElement === folder.uid && draggedElement !== coveredElement}]"
|
||||
:list="dummyNested"
|
||||
:swap-threshold="1"
|
||||
@dragenter="emit('covered')"
|
||||
@dragleave="emit('uncovered')"
|
||||
@change="addIntoFolder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import * as Draggable from 'vuedraggable';
|
||||
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import SettingBarConnections from '@/components/SettingBarConnections.vue';
|
||||
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const { getFolders: folders } = storeToRefs(connectionsStore);
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
const { getWorkspace } = workspacesStore;
|
||||
const { getConnectionOrderByUid, getConnectionName, addToFolder } = connectionsStore;
|
||||
|
||||
const foldersOpened = JSON.parse(localStorage.getItem('opened-folders')) || [];
|
||||
|
||||
const props = defineProps({
|
||||
folder: {
|
||||
type: Object as PropType<SidebarElement>,
|
||||
required: true
|
||||
},
|
||||
folderDrag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
draggedElement: {
|
||||
type: [String, Boolean] as PropType<string | false>,
|
||||
required: true
|
||||
},
|
||||
coveredElement: {
|
||||
type: [String, Boolean] as PropType<string | false>,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['context', 'covered', 'uncovered', 'select-workspace', 'folder-sort', 'folder-drag']);
|
||||
|
||||
const isOpen = ref(foldersOpened.includes(props.folder.uid));
|
||||
const localList = ref(props.folder.connections);
|
||||
const dummyNested = ref([]);
|
||||
|
||||
const hasSelectedInside = computed(() => localList.value.includes(selectedWorkspace.value));
|
||||
|
||||
const foldersUid = computed(() => folders.value.reduce<string[]>((acc, curr) => {
|
||||
acc.push(curr.uid);
|
||||
return acc;
|
||||
}, []));
|
||||
|
||||
const addIntoFolder = ({ added }: {added: { element: SidebarElement }}) => {
|
||||
if (typeof props.coveredElement === 'string' && !added.element.isFolder) {
|
||||
addToFolder({
|
||||
folder: props.coveredElement,
|
||||
connection: added.element.uid
|
||||
});
|
||||
|
||||
emit('uncovered');
|
||||
}
|
||||
};
|
||||
|
||||
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 '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openFolder = () => {
|
||||
isOpen.value = true;
|
||||
const opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
|
||||
opened.push(props.folder.uid);
|
||||
localStorage.setItem('opened-folders', JSON.stringify(opened));
|
||||
};
|
||||
|
||||
const closeFolder = () => {
|
||||
isOpen.value = false;
|
||||
let opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
|
||||
opened = opened.filter(uid => uid !== props.folder.uid);
|
||||
localStorage.setItem('opened-folders', JSON.stringify(opened));
|
||||
};
|
||||
|
||||
const dragStart = () => {
|
||||
emit('folder-drag', true);
|
||||
};
|
||||
|
||||
const dragStop = () => {
|
||||
emit('folder-drag', false);
|
||||
};
|
||||
|
||||
watch(() => dummyNested.value.length, () => {
|
||||
dummyNested.value = [];
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.folder {
|
||||
position: relative;
|
||||
&.selected-inside {
|
||||
opacity: 1!important;
|
||||
|
||||
&::after {
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 3px;
|
||||
transition: height 0.2s;
|
||||
background-color: rgba($color: #fff, $alpha: 0.8);
|
||||
border-radius: $border-radius;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: 50%;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
transition: background .3s;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 3px;
|
||||
transition: height 0.2s;
|
||||
background-color: rgba($color: #fff, $alpha: 0.8);
|
||||
border-radius: $border-radius;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
.folder-element-icon {
|
||||
margin: 0 auto;
|
||||
|
||||
&.badge::after {
|
||||
top: 10px;
|
||||
right: 0px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.opened {
|
||||
gap: 4px 6px;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
background: rgba($color: #fff, $alpha: 0.1)!important;
|
||||
transition: max-height .1s;
|
||||
|
||||
.folder-element {
|
||||
opacity: .6;
|
||||
height: 2.5rem;
|
||||
background: transparent;
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 3px;
|
||||
transition: height 0.2s;
|
||||
background-color: rgba($color: #fff, $alpha: 0.8);
|
||||
border-radius: $border-radius;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
.folder-element-icon {
|
||||
margin: 0 auto;
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
|
||||
&.badge::after {
|
||||
top: 14px;
|
||||
right: -4px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 3px;
|
||||
position: relative;
|
||||
transition: opacity .2s;
|
||||
|
||||
.folder-icon-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.folder-icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
||||
.folder-icon-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.folder-icon-close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.folder-element {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin-bottom: 3px;
|
||||
position: relative;
|
||||
transition: opacity .2s;
|
||||
background: $bg-color-light-dark;
|
||||
border-radius: 8px;
|
||||
|
||||
&.ghost {
|
||||
margin:0 ;
|
||||
margin-bottom: 3px;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
&:hover, &.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.folder-element-icon {
|
||||
transition: margin .2s;
|
||||
}
|
||||
|
||||
.folder-element-name {
|
||||
position: absolute;
|
||||
max-width: 90%;
|
||||
bottom: 0;
|
||||
font-size: 65%;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
transition: bottom .2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.opened){
|
||||
.folder-element {
|
||||
|
||||
.folder-element-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border-radius: 15px!important;
|
||||
background: rgba($color: #fff, $alpha: 0.1);
|
||||
|
||||
&.folder-element {
|
||||
height: $settingbar-width;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover, &.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.folder-element-icon {
|
||||
margin: 0 auto;
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.badge::after {
|
||||
top: 5px;
|
||||
right: -4px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-element-name {
|
||||
position: absolute;
|
||||
max-width: 90%;
|
||||
bottom: 5px;
|
||||
text-align: center;
|
||||
font-size: 65%;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,20 +3,6 @@
|
||||
:context-event="contextEvent"
|
||||
@close-context="$emit('close-context')"
|
||||
>
|
||||
<div
|
||||
v-if="isPinned"
|
||||
class="context-element"
|
||||
@click="unpin"
|
||||
>
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-pin-off text-light pr-1" /> {{ t('word.unpin') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="context-element"
|
||||
@click="pin"
|
||||
>
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-pin mdi-rotate-45 text-light pr-1" /> {{ t('word.pin') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isConnected"
|
||||
class="context-element"
|
||||
@ -24,9 +10,16 @@
|
||||
>
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-power text-light pr-1" /> {{ t('word.disconnect') }}</span>
|
||||
</div>
|
||||
<div class="context-element" @click="duplicateConnection">
|
||||
<div
|
||||
v-if="!contextConnection.isFolder"
|
||||
class="context-element"
|
||||
@click="duplicateConnection"
|
||||
>
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('word.duplicate') }}</span>
|
||||
</div>
|
||||
<div class="context-element" @click.stop="showAppearenceModal">
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-brush-variant text-light pr-1" /> {{ t('word.appearence') }}</span>
|
||||
</div>
|
||||
<div class="context-element" @click="showConfirmModal">
|
||||
<span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('word.delete') }}</span>
|
||||
</div>
|
||||
@ -38,7 +31,7 @@
|
||||
>
|
||||
<template #header>
|
||||
<div class="d-flex">
|
||||
<i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('message.deleteConnection') }}
|
||||
<i class="mdi mdi-24px mr-1" :class="[contextConnection.isFolder ? 'mdi-folder-remove' : 'mdi-server-remove']" /> {{ t(contextConnection.isFolder ? 'message.deleteFolder' : 'message.deleteConnection') }}
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@ -47,6 +40,16 @@
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmModal>
|
||||
<ModalFolderAppearence
|
||||
v-if="isFolderEdit"
|
||||
:folder="contextConnection"
|
||||
@close="hideAppearenceModal"
|
||||
/>
|
||||
<ModalConnectionAppearence
|
||||
v-if="isConnectionEdit"
|
||||
:connection="contextConnection"
|
||||
@close="hideAppearenceModal"
|
||||
/>
|
||||
</BaseContextMenu>
|
||||
</template>
|
||||
|
||||
@ -55,26 +58,24 @@ import { computed, Prop, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { uidGen } from 'common/libs/uidGen';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useConnectionsStore } from '@/stores/connections';
|
||||
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import BaseContextMenu from '@/components/BaseContextMenu.vue';
|
||||
import ConfirmModal from '@/components/BaseConfirmModal.vue';
|
||||
import { ConnectionParams } from 'common/interfaces/antares';
|
||||
import ModalFolderAppearence from '@/components/ModalFolderAppearence.vue';
|
||||
import ModalConnectionAppearence from '@/components/ModalConnectionAppearence.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const {
|
||||
getConnectionByUid,
|
||||
getConnectionName,
|
||||
addConnection,
|
||||
deleteConnection,
|
||||
pinConnection,
|
||||
unpinConnection
|
||||
deleteConnection
|
||||
} = connectionsStore;
|
||||
|
||||
const { pinnedConnections } = storeToRefs(connectionsStore);
|
||||
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
|
||||
@ -86,16 +87,17 @@ const {
|
||||
|
||||
const props = defineProps({
|
||||
contextEvent: MouseEvent,
|
||||
contextConnection: Object as Prop<ConnectionParams>
|
||||
contextConnection: Object as Prop<SidebarElement>
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close-context']);
|
||||
|
||||
const isConfirmModal = ref(false);
|
||||
const isFolderEdit = ref(false);
|
||||
const isConnectionEdit = ref(false);
|
||||
|
||||
const connectionName = computed(() => getConnectionName(props.contextConnection.uid));
|
||||
const isConnected = computed(() => getWorkspace(props.contextConnection.uid).connectionStatus === 'connected');
|
||||
const isPinned = computed(() => pinnedConnections.value.has(props.contextConnection.uid));
|
||||
const connectionName = computed(() => props.contextConnection.name || getConnectionName(props.contextConnection.uid) || t('word.folder', 1));
|
||||
const isConnected = computed(() => getWorkspace(props.contextConnection.uid)?.connectionStatus === 'connected');
|
||||
|
||||
const confirmDeleteConnection = () => {
|
||||
if (selectedWorkspace.value === props.contextConnection.uid)
|
||||
@ -105,7 +107,7 @@ const confirmDeleteConnection = () => {
|
||||
};
|
||||
|
||||
const duplicateConnection = () => {
|
||||
let connectionCopy = Object.assign({}, props.contextConnection);
|
||||
let connectionCopy = getConnectionByUid(props.contextConnection.uid);
|
||||
connectionCopy = {
|
||||
...connectionCopy,
|
||||
uid: uidGen('C'),
|
||||
@ -116,6 +118,19 @@ const duplicateConnection = () => {
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const showAppearenceModal = () => {
|
||||
if (props.contextConnection.isFolder)
|
||||
isFolderEdit.value = true;
|
||||
else
|
||||
isConnectionEdit.value = true;
|
||||
};
|
||||
|
||||
const hideAppearenceModal = () => {
|
||||
isConnectionEdit.value = false;
|
||||
isFolderEdit.value = false;
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const showConfirmModal = () => {
|
||||
isConfirmModal.value = true;
|
||||
};
|
||||
@ -125,16 +140,6 @@ const hideConfirmModal = () => {
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const pin = () => {
|
||||
pinConnection(props.contextConnection.uid);
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const unpin = () => {
|
||||
unpinConnection(props.contextConnection.uid);
|
||||
closeContext();
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
disconnectWorkspace(props.contextConnection.uid);
|
||||
closeContext();
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div id="footer" class="text-light">
|
||||
<div
|
||||
id="footer"
|
||||
:class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']"
|
||||
:style="`background-color: ${footerColor};`"
|
||||
>
|
||||
<div class="footer-left-elements">
|
||||
<ul class="footer-elements">
|
||||
<li class="footer-element">
|
||||
@ -50,6 +54,7 @@ import { useApplicationStore } from '@/stores/application';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import { computed, ComputedRef } from 'vue';
|
||||
import { useConsoleStore } from '@/stores/console';
|
||||
import { useConnectionsStore } from '@/stores/connections';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@ -62,14 +67,19 @@ interface DatabaseInfos {// TODO: temp
|
||||
|
||||
const applicationStore = useApplicationStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
const connectionsStore = useConnectionsStore();
|
||||
|
||||
const lightColors = ['#FFCE54', '#FDA50F', '#BEBDB8', '#48CFAD'];
|
||||
|
||||
const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
|
||||
const { toggleConsole } = useConsoleStore();
|
||||
|
||||
const { showSettingModal } = applicationStore;
|
||||
const { getWorkspace } = workspacesStore;
|
||||
const { getConnectionFolder } = connectionsStore;
|
||||
|
||||
const workspace = computed(() => getWorkspace(workspaceUid.value));
|
||||
const footerColor = computed(() => getConnectionFolder(workspaceUid.value)?.color || '#E36929');
|
||||
const version: ComputedRef<DatabaseInfos> = computed(() => {
|
||||
return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
|
||||
});
|
||||
|
||||
@ -8,47 +8,10 @@
|
||||
@close-context="isContext = false"
|
||||
/>
|
||||
<ul class="settingbar-elements">
|
||||
<Draggable
|
||||
v-model="pinnedConnectionsArr"
|
||||
:item-key="'uid'"
|
||||
@start="isDragging = true"
|
||||
@end="dragStop"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<li
|
||||
:draggable="true"
|
||||
class="settingbar-element btn btn-link"
|
||||
:class="{ 'selected': element.uid === selectedWorkspace }"
|
||||
:title="getConnectionName(element.uid)"
|
||||
@click.stop="selectWorkspace(element.uid)"
|
||||
@contextmenu.prevent="contextMenu($event, element)"
|
||||
>
|
||||
<i
|
||||
class="settingbar-element-icon dbi"
|
||||
:class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]"
|
||||
/>
|
||||
<small class="settingbar-element-name">{{ getConnectionName(element.uid) }}</small>
|
||||
</li>
|
||||
</template>
|
||||
</Draggable>
|
||||
|
||||
<div v-if="pinnedConnectionsArr.length" class="divider" />
|
||||
|
||||
<li
|
||||
v-for="connection in unpinnedConnectionsArr"
|
||||
:key="connection.uid"
|
||||
class="settingbar-element btn btn-link"
|
||||
:class="{ 'selected': connection.uid === selectedWorkspace }"
|
||||
:title="getConnectionName(connection.uid)"
|
||||
@click.stop="selectWorkspace(connection.uid)"
|
||||
@contextmenu.prevent="contextMenu($event, connection)"
|
||||
>
|
||||
<i
|
||||
class="settingbar-element-icon dbi"
|
||||
:class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]"
|
||||
/>
|
||||
<small class="settingbar-element-name">{{ getConnectionName(connection.uid) }}</small>
|
||||
</li>
|
||||
<SettingBarConnections
|
||||
v-model="connectionsArr"
|
||||
@context="contextMenu"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -56,19 +19,31 @@
|
||||
<ul class="settingbar-elements">
|
||||
<li
|
||||
v-if="isScrollable"
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: t('message.allConnections')
|
||||
}"
|
||||
class="settingbar-element btn btn-link"
|
||||
:title="t('message.allConnections')"
|
||||
@click="emit('show-connections-modal')"
|
||||
>
|
||||
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
|
||||
<div class="settingbar-element-icon-wrapper">
|
||||
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: t('message.addConnection')
|
||||
}"
|
||||
class="settingbar-element btn btn-link"
|
||||
:class="{ 'selected': 'NEW' === selectedWorkspace }"
|
||||
:title="t('message.addConnection')"
|
||||
@click="selectWorkspace('NEW')"
|
||||
>
|
||||
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
|
||||
<div class="settingbar-element-icon-wrapper">
|
||||
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -77,15 +52,23 @@
|
||||
<ul class="settingbar-elements">
|
||||
<li
|
||||
v-if="!disableScratchpad"
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: t('word.scratchpad')
|
||||
}"
|
||||
class="settingbar-element btn btn-link"
|
||||
:title="t('word.scratchpad')"
|
||||
@click="showScratchpad"
|
||||
>
|
||||
<i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
|
||||
</li>
|
||||
<li
|
||||
v-tooltip="{
|
||||
strategy: 'fixed',
|
||||
placement: 'right',
|
||||
content: t('word.settings')
|
||||
}"
|
||||
class="settingbar-element btn btn-link"
|
||||
:title="t('word.settings')"
|
||||
@click="showSettingModal('general')"
|
||||
>
|
||||
<i
|
||||
@ -102,16 +85,16 @@
|
||||
import { ref, Ref, computed, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useApplicationStore } from '@/stores/application';
|
||||
import { useConnectionsStore } from '@/stores/connections';
|
||||
import { useConnectionsStore, SidebarElement } from '@/stores/connections';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import * as Draggable from 'vuedraggable';
|
||||
import SettingBarContext from '@/components/SettingBarContext.vue';
|
||||
import { ConnectionParams } from 'common/interfaces/antares';
|
||||
import SettingBarConnections from '@/components/SettingBarConnections.vue';
|
||||
import { useElementBounding } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
localStorage.setItem('opened-folders', '[]');
|
||||
|
||||
const applicationStore = useApplicationStore();
|
||||
const connectionsStore = useConnectionsStore();
|
||||
@ -119,121 +102,42 @@ const workspacesStore = useWorkspacesStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const { updateStatus } = storeToRefs(applicationStore);
|
||||
const { connections: storedConnections, pinnedConnections, lastConnections } = storeToRefs(connectionsStore);
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
||||
const { getConnectionsOrder: connectionsOrder } = storeToRefs(connectionsStore);
|
||||
const { disableScratchpad } = storeToRefs(settingsStore);
|
||||
|
||||
const { showSettingModal, showScratchpad } = applicationStore;
|
||||
const { getConnectionName, updatePinnedConnections } = connectionsStore;
|
||||
const { getWorkspace, selectWorkspace } = workspacesStore;
|
||||
const { updateConnectionsOrder } = connectionsStore;
|
||||
const { selectWorkspace } = workspacesStore;
|
||||
|
||||
const emit = defineEmits(['show-connections-modal']);
|
||||
|
||||
const isLinux = process.platform === 'linux';
|
||||
|
||||
const sidebarConnections: Ref<HTMLDivElement> = ref(null);
|
||||
const isContext: Ref<boolean> = ref(false);
|
||||
const isDragging: Ref<boolean> = ref(false);
|
||||
const isScrollable: Ref<boolean> = ref(false);
|
||||
const contextEvent: Ref<MouseEvent> = ref(null);
|
||||
const contextConnection: Ref<ConnectionParams> = ref(null);
|
||||
const contextConnection: Ref<SidebarElement> = ref(null);
|
||||
const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
|
||||
|
||||
const pinnedConnectionsArr = computed({
|
||||
get: () => [...pinnedConnections.value].map(c => storedConnections.value.find(sc => sc.uid === c)).filter(Boolean),
|
||||
set: (value: ConnectionParams[]) => {
|
||||
const pinnedUid = value.reduce((acc, curr) => {
|
||||
acc.push(curr.uid);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
updatePinnedConnections(pinnedUid);
|
||||
const connectionsArr = computed({
|
||||
get: () => connectionsOrder.value,
|
||||
set: (value: SidebarElement[]) => {
|
||||
updateConnectionsOrder(value);
|
||||
}
|
||||
});
|
||||
|
||||
const unpinnedConnectionsArr = computed(() => {
|
||||
return storedConnections.value
|
||||
.filter(c => !pinnedConnections.value.has(c.uid))
|
||||
.map(c => {
|
||||
const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
|
||||
return { ...c, time: connTime };
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.time < b.time) return 1;
|
||||
else if (a.time > b.time) return -1;
|
||||
return 0;
|
||||
});
|
||||
});
|
||||
|
||||
const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
|
||||
|
||||
const contextMenu = (event: MouseEvent, connection: ConnectionParams) => {
|
||||
const contextMenu = (event: MouseEvent, connection: SidebarElement) => {
|
||||
contextEvent.value = event;
|
||||
contextConnection.value = connection;
|
||||
isContext.value = true;
|
||||
};
|
||||
|
||||
const tooltipPosition = (e: Event) => {
|
||||
const el = (e.target ? e.target : e) as unknown as HTMLElement;
|
||||
const tooltip = el.querySelector<HTMLElement>('.ex-tooltip-content');
|
||||
if (tooltip) {
|
||||
const fromTop = isLinux
|
||||
? window.scrollY + el.getBoundingClientRect().top + (el.offsetHeight / 4)
|
||||
: window.scrollY + el.getBoundingClientRect().top - (el.offsetHeight / 4);
|
||||
tooltip.style.top = `${fromTop}px`;
|
||||
}
|
||||
};
|
||||
|
||||
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 '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const dragStop = (e: any) => {
|
||||
isDragging.value = false;
|
||||
|
||||
setTimeout(() => {
|
||||
tooltipPosition(e.originalEvent.target.parentNode);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
watch(sidebarConnectionsHeight, (value) => {
|
||||
isScrollable.value = value < sidebarConnections.value.scrollHeight;
|
||||
});
|
||||
|
||||
watch(unpinnedConnectionsArr, (newVal, oldVal) => {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
setTimeout(() => {
|
||||
const element = document.querySelector<HTMLElement>('.settingbar-element.selected');
|
||||
if (element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const elemTop = rect.top;
|
||||
const elemBottom = rect.bottom;
|
||||
const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
|
||||
|
||||
if (!isVisible) {
|
||||
element.setAttribute('tabindex', '-1');
|
||||
element.focus();
|
||||
element.removeAttribute('tabindex');
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
watch(selectedWorkspace, (newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
setTimeout(() => {
|
||||
@ -281,6 +185,10 @@ watch(selectedWorkspace, (newVal, oldVal) => {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settingbar-element {
|
||||
height: $settingbar-width;
|
||||
width: 100%;
|
||||
@ -289,7 +197,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@ -302,7 +210,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
height: $settingbar-width;
|
||||
height: calc(#{$settingbar-width} - 0.4rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -311,53 +219,56 @@ watch(selectedWorkspace, (newVal, oldVal) => {
|
||||
height: 0;
|
||||
width: 3px;
|
||||
transition: height 0.2s;
|
||||
background-color: $primary-color;
|
||||
background-color: rgba($color: #fff, $alpha: 0.8);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.settingbar-element-icon {
|
||||
margin: 0 auto;
|
||||
.settingbar-element-icon-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&.badge::after {
|
||||
top: 5px;
|
||||
right: -4px;
|
||||
position: absolute;
|
||||
.settingbar-element-icon {
|
||||
&.badge::after {
|
||||
top: 10px;
|
||||
right: -6px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
.settingbar-element-name {
|
||||
font-size: 65%;
|
||||
max-width: 90%;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: calc($settingbar-width - 15px);
|
||||
line-height: 1.1;
|
||||
color: rgba($body-font-color-dark, 0.8);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.settingbar-element-name {
|
||||
font-size: 65%;
|
||||
bottom: 5px;
|
||||
left: 7px;
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: calc($settingbar-width - 15px);
|
||||
text-align: left;
|
||||
line-height: 1.1;
|
||||
color: rgba($body-font-color-dark, 0.8);
|
||||
text-align: center;
|
||||
}
|
||||
.settingbar-element-pin {// <- Dead
|
||||
margin: 0 auto;
|
||||
|
||||
.settingbar-element-pin {
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
font: normal normal normal 14px/1 "Material Design Icons";
|
||||
content: "\F0403";
|
||||
color: $body-font-color-dark;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.25;
|
||||
top: -8px;
|
||||
left: -10px;
|
||||
position: absolute;
|
||||
&::before {
|
||||
font: normal normal normal 14px/1 "Material Design Icons";
|
||||
content: "\F0403";
|
||||
color: $body-font-color-dark;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.25;
|
||||
top: -8px;
|
||||
left: -10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-refresh" />
|
||||
</div>
|
||||
<div v-if="isWindows" style="width: 140px;" />
|
||||
<div v-if="isWindows" :style="'width: 140px;'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -67,7 +67,7 @@ const windowTitle = computed(() => {
|
||||
|
||||
const connectionName = getConnectionName(selectedWorkspace.value);
|
||||
const workspace = getWorkspace(selectedWorkspace.value);
|
||||
const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client];
|
||||
const breadcrumbs = workspace ? Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client] : [];
|
||||
|
||||
return [connectionName, ...breadcrumbs].join(' • ');
|
||||
});
|
||||
|
||||
@ -143,7 +143,12 @@ export const enUS = {
|
||||
pin: 'Pin',
|
||||
unpin: 'Unpin',
|
||||
console: 'Console',
|
||||
shortcuts: 'Shortcuts'
|
||||
shortcuts: 'Shortcuts',
|
||||
folder: 'Folder | Folders',
|
||||
appearence: 'Appearence',
|
||||
color: 'Color',
|
||||
label: 'Label',
|
||||
icon: 'Icon'
|
||||
},
|
||||
message: {
|
||||
appWelcome: 'Welcome to Antares SQL Client!',
|
||||
@ -323,7 +328,11 @@ export const enUS = {
|
||||
openFilter: 'Open filter',
|
||||
nextResultsPage: 'Next results page',
|
||||
previousResultsPage: 'Previous results page',
|
||||
fillCell: 'Fill cell'
|
||||
fillCell: 'Fill cell',
|
||||
editFolder: 'Edit folder',
|
||||
folderName: 'Folder name',
|
||||
deleteFolder: 'Delete folder',
|
||||
editConnectionAppearence: 'Edit connection appearence'
|
||||
},
|
||||
faker: {
|
||||
address: 'Address',
|
||||
|
||||
@ -3,7 +3,9 @@ import { ipcRenderer } from 'electron';
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { VueMaskDirective } from 'v-mask';
|
||||
import * as FloatingVue from 'floating-vue';
|
||||
import '@mdi/font/css/materialdesignicons.css';
|
||||
import 'floating-vue/dist/style.css';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import '@/scss/main.scss';
|
||||
|
||||
@ -27,6 +29,7 @@ createApp(App)
|
||||
.directive('mask', vMaskV3)
|
||||
.use(createPinia())
|
||||
.use(i18n)
|
||||
.use(FloatingVue)
|
||||
.mount('#app');
|
||||
|
||||
const { locale } = useSettingsStore();
|
||||
|
||||
4
src/renderer/libs/getContrast.ts
Normal file
4
src/renderer/libs/getContrast.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const getContrast = (hexcolor: string) => {
|
||||
if (!hexcolor) return '';
|
||||
return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
|
||||
};
|
||||
@ -43,6 +43,14 @@
|
||||
animation: jump-down-in 0.2s reverse;
|
||||
}
|
||||
|
||||
.flip-list-move {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.no-move {
|
||||
transition: transform 0s;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation-name: pulse;
|
||||
animation-duration: 2s;
|
||||
|
||||
@ -2,8 +2,19 @@ import { defineStore } from 'pinia';
|
||||
import * as Store from 'electron-store';
|
||||
import * as crypto from 'crypto';
|
||||
import { ConnectionParams } from 'common/interfaces/antares';
|
||||
import { uidGen } from 'common/libs/uidGen';
|
||||
const key = localStorage.getItem('key');
|
||||
|
||||
export interface SidebarElement {
|
||||
isFolder: boolean;
|
||||
uid: string;
|
||||
client?: string;
|
||||
connections?: string[];
|
||||
color?: string;
|
||||
name?: string;
|
||||
icon?: null | string;
|
||||
}
|
||||
|
||||
if (!key)
|
||||
localStorage.setItem('key', crypto.randomBytes(16).toString('hex'));
|
||||
else
|
||||
@ -18,42 +29,107 @@ const persistentStore = new Store({
|
||||
export const useConnectionsStore = defineStore('connections', {
|
||||
state: () => ({
|
||||
connections: persistentStore.get('connections', []) as ConnectionParams[],
|
||||
pinnedConnections: new Set([...persistentStore.get('pinnedConnections', []) as string[]]) as Set<string>,
|
||||
lastConnections: persistentStore.get('lastConnections', []) as {uid: string; time: number}[]
|
||||
lastConnections: persistentStore.get('lastConnections', []) as {uid: string; time: number}[],
|
||||
connectionsOrder: persistentStore.get('connectionsOrder', []) as SidebarElement[]
|
||||
}),
|
||||
getters: {
|
||||
getConnectionByUid: state => (uid:string) => state.connections.find(connection => connection.uid === uid),
|
||||
getConnectionName: state => (uid: string) => {
|
||||
const connection = state.connections.filter(connection => connection.uid === uid)[0];
|
||||
const connection = state.connections.find(connection => connection.uid === uid);
|
||||
let connectionName = '';
|
||||
if (connection) {
|
||||
if (connection.name)
|
||||
connectionName = connection.name;
|
||||
else if (connection.ask)
|
||||
connectionName = `${connection.host}:${connection.port}`;
|
||||
else if (connection.databasePath) {
|
||||
let string = connection.databasePath.split(/[/\\]+/).pop();
|
||||
|
||||
if (connection.name)
|
||||
connectionName = connection.name;
|
||||
else if (connection.ask)
|
||||
connectionName = `${connection.host}:${connection.port}`;
|
||||
else if (connection.databasePath) {
|
||||
let string = connection.databasePath.split(/[/\\]+/).pop();
|
||||
if (string.length >= 30)
|
||||
string = `...${string.slice(-30)}`;
|
||||
|
||||
if (string.length >= 30)
|
||||
string = `...${string.slice(-30)}`;
|
||||
|
||||
connectionName = string;
|
||||
connectionName = string;
|
||||
}
|
||||
else
|
||||
connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
|
||||
}
|
||||
else
|
||||
connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
|
||||
|
||||
return connectionName;
|
||||
}
|
||||
},
|
||||
getConnectionsOrder: state => {
|
||||
if (state.connectionsOrder.length)
|
||||
return state.connectionsOrder;
|
||||
else {
|
||||
const connectionsOrder = state.connections.map<SidebarElement>(conn => {
|
||||
return {
|
||||
isFolder: false,
|
||||
uid: conn.uid,
|
||||
client: conn.client
|
||||
};
|
||||
});
|
||||
persistentStore.set('connectionsOrder', connectionsOrder);
|
||||
return connectionsOrder;
|
||||
}
|
||||
},
|
||||
getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder
|
||||
.find(connection => connection.uid === uid),
|
||||
getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder),
|
||||
getConnectionFolder: state => (uid:string) => state.connectionsOrder
|
||||
.find(folder => folder.isFolder && folder.connections.includes(uid))
|
||||
},
|
||||
actions: {
|
||||
addConnection (connection: ConnectionParams) {
|
||||
this.connections.push(connection);
|
||||
persistentStore.set('connections', this.connections);
|
||||
|
||||
this.connectionsOrder.push({
|
||||
isFolder: false,
|
||||
uid: connection.uid,
|
||||
client: connection.client,
|
||||
icon: null
|
||||
});
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
},
|
||||
deleteConnection (connection: ConnectionParams) {
|
||||
this.connections = (this.connections as ConnectionParams[]).filter(el => el.uid !== connection.uid);
|
||||
addFolder (params: {after: string; connections: [string, string]}) {
|
||||
const index = this.connectionsOrder.findIndex((conn: SidebarElement) => conn.uid === params.after);
|
||||
this.connectionsOrder.splice(index, 0, {
|
||||
isFolder: true,
|
||||
uid: uidGen('F'),
|
||||
name: '',
|
||||
color: '#E36929',
|
||||
connections: params.connections
|
||||
});
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
},
|
||||
addToFolder (params: {folder: string; connection: string}) {
|
||||
this.connectionsOrder = this.connectionsOrder.map((conn: SidebarElement) => {
|
||||
if (conn.uid === params.folder)
|
||||
conn.connections.push(params.connection);
|
||||
|
||||
return conn;
|
||||
});
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
},
|
||||
deleteConnection (connection: SidebarElement | ConnectionParams) {
|
||||
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { // Removes connection from folders
|
||||
if (el.isFolder && el.connections.includes(connection.uid))
|
||||
el.connections = el.connections.filter(uid => uid !== connection.uid);
|
||||
return el;
|
||||
});
|
||||
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid);
|
||||
|
||||
// Clear empty folders
|
||||
const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce<string[]>((acc, curr) => {
|
||||
if (curr.connections && curr.connections.length === 0)
|
||||
acc.push(curr.uid);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
|
||||
this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
|
||||
persistentStore.set('connections', this.connections);
|
||||
(this.pinnedConnections as Set<string>).delete(connection.uid);
|
||||
persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
|
||||
},
|
||||
editConnection (connection: ConnectionParams) {
|
||||
const editedConnections = (this.connections as ConnectionParams[]).map(conn => {
|
||||
@ -61,24 +137,59 @@ export const useConnectionsStore = defineStore('connections', {
|
||||
return conn;
|
||||
});
|
||||
this.connections = editedConnections;
|
||||
this.selected_conection = {};
|
||||
persistentStore.set('connections', this.connections);
|
||||
},
|
||||
updateConnections (connections: ConnectionParams[]) {
|
||||
this.connections = connections;
|
||||
persistentStore.set('connections', this.connections);
|
||||
},
|
||||
updatePinnedConnections (pinned: string[]) {
|
||||
this.pinnedConnections = new Set(pinned);
|
||||
persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
|
||||
updateConnectionsOrder (connections: SidebarElement[]) {
|
||||
const invalidElements = connections.reduce<{index: number; uid: string}[]>((acc, curr, i) => {
|
||||
if (typeof curr === 'string')
|
||||
acc.push({ index: i, uid: curr });
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
if (invalidElements.length) {
|
||||
invalidElements.forEach(el => {
|
||||
let connIndex = connections.findIndex(conn => conn.uid === el.uid);
|
||||
const conn = connections[connIndex];
|
||||
|
||||
if (connIndex === -1) return;
|
||||
|
||||
connections.splice(el.index, 1, { // Move to new position
|
||||
isFolder: false,
|
||||
client: conn.client,
|
||||
uid: conn.uid,
|
||||
icon: conn.icon,
|
||||
name: conn.name
|
||||
});
|
||||
|
||||
connIndex = connections.findIndex((conn, i) => conn.uid === el.uid && i !== el.index);
|
||||
connections.splice(connIndex, 1);// Delete old object
|
||||
});
|
||||
}
|
||||
|
||||
// Clear empty folders
|
||||
const emptyFolders = connections.reduce<string[]>((acc, curr) => {
|
||||
if (curr.connections && curr.connections.length === 0)
|
||||
acc.push(curr.uid);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
connections = connections.filter(el => !emptyFolders.includes(el.uid));
|
||||
|
||||
this.connectionsOrder = connections;
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
},
|
||||
pinConnection (uid: string) {
|
||||
(this.pinnedConnections as Set<string>).add(uid);
|
||||
persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
|
||||
},
|
||||
unpinConnection (uid: string) {
|
||||
(this.pinnedConnections as Set<string>).delete(uid);
|
||||
persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
|
||||
updateConnectionOrder (element: SidebarElement) {
|
||||
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => {
|
||||
if (el.uid === element.uid)
|
||||
el = element;
|
||||
return el;
|
||||
});
|
||||
persistentStore.set('connectionsOrder', this.connectionsOrder);
|
||||
},
|
||||
updateLastConnection (uid: string) {
|
||||
const cIndex = (this.lastConnections as {uid: string; time: number}[]).findIndex((c) => c.uid === uid);
|
||||
|
||||
78
src/renderer/untyped.d.ts
vendored
78
src/renderer/untyped.d.ts
vendored
@ -1,2 +1,80 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
declare module '@/App.vue';
|
||||
declare module 'v-mask';
|
||||
declare module 'vuedraggable' {// <- to export as default
|
||||
const draggableComponent: import('vue').DefineComponent<{
|
||||
list: {
|
||||
type: ArrayConstructor;
|
||||
required: boolean;
|
||||
default: any;
|
||||
};
|
||||
modelValue: {
|
||||
type: ArrayConstructor;
|
||||
required: boolean;
|
||||
default: any;
|
||||
};
|
||||
itemKey: {
|
||||
type: (FunctionConstructor | StringConstructor)[];
|
||||
required: boolean;
|
||||
};
|
||||
clone: {
|
||||
type: FunctionConstructor;
|
||||
default: (original: any) => any;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
move: {
|
||||
type: FunctionConstructor;
|
||||
default: any;
|
||||
};
|
||||
componentData: {
|
||||
type: ObjectConstructor;
|
||||
required: boolean;
|
||||
default: any;
|
||||
};
|
||||
}, unknown, {
|
||||
error: boolean;
|
||||
}, {
|
||||
realList(): any;
|
||||
getKey(): any;
|
||||
}, {
|
||||
getUnderlyingVm(domElement: any): any;
|
||||
getUnderlyingPotencialDraggableComponent(htmElement: any): any;
|
||||
emitChanges(evt: any): void;
|
||||
alterList(onList: any): void;
|
||||
spliceList(): void;
|
||||
updatePosition(oldIndex: any, newIndex: any): void;
|
||||
getRelatedContextFromMoveEvent({ to, related }: {
|
||||
to: any;
|
||||
related: any;
|
||||
}): any;
|
||||
getVmIndexFromDomIndex(domIndex: any): any;
|
||||
onDragStart(evt: any): void;
|
||||
onDragAdd(evt: any): void;
|
||||
onDragRemove(evt: any): void;
|
||||
onDragUpdate(evt: any): void;
|
||||
computeFutureIndex(relatedContext: any, evt: any): any;
|
||||
onDragMove(evt: any, originalEvent: any): any;
|
||||
onDragEnd(): void;
|
||||
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, any[], any, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<{
|
||||
move: Function;
|
||||
tag: string;
|
||||
clone: Function;
|
||||
list: unknown[];
|
||||
modelValue: unknown[];
|
||||
componentData: Record<string, any>;
|
||||
} & {
|
||||
itemKey?: string | Function;
|
||||
}>, {
|
||||
move: Function;
|
||||
tag: string;
|
||||
clone: Function;
|
||||
list: unknown[];
|
||||
modelValue: unknown[];
|
||||
componentData: Record<string, any>;
|
||||
}>;
|
||||
export = draggableComponent;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user