feat: move connections to folders from context menu, related to #773

src/renderer/components/SettingBarContext.vue

@@ -15,6 +15,43 @@
                :size="18"
             /> {{ t('connection.disconnect') }}</span>
       </div>
+      <div v-if="!contextConnection.isFolder" class="context-element">
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiFolderMove"
+               :size="18"
+            /> {{ t('general.moveTo') }}</span>
+         <BaseIcon
+            class="text-light ml-1"
+            icon-name="mdiChevronRight"
+            :size="18"
+         />
+         <div class="context-submenu">
+            <div class="context-element" @click.stop="moveToFolder(null)">
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiFolderPlus"
+                     :size="18"
+                  /> {{ t('application.newFolder') }}</span>
+            </div>
+            <div
+               v-for="folder in parsedFolders"
+               :key="folder.uid"
+               class="context-element"
+               @click.stop="moveToFolder(folder.uid)"
+            >
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiFolder"
+                     :size="18"
+                     :style="`color: ${folder.color}!important`"
+                  /> {{ folder.name || t('general.folder') }}</span>
+            </div>
+         </div>
+      </div>
       <div class="context-element" @click.stop="showAppearanceModal">
          <span class="d-flex">
             <BaseIcon
@@ -79,6 +116,7 @@
 
 <script setup lang="ts">
 import { uidGen } from 'common/libs/uidGen';
+import { storeToRefs } from 'pinia';
 import { computed, Prop, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -98,9 +136,12 @@ const {
    getConnectionByUid,
    getConnectionName,
    addConnection,
-   deleteConnection
+   deleteConnection,
+   addFolder
 } = connectionsStore;
 
+const { getFolders: folders } = storeToRefs(connectionsStore);
+
 const workspacesStore = useWorkspacesStore();
 
 const {
@@ -121,6 +162,7 @@ const isConnectionEdit = ref(false);
 
 const connectionName = computed(() => props.contextConnection.name || getConnectionName(props.contextConnection.uid) || t('general.folder', 1));
 const isConnected = computed(() => getWorkspace(props.contextConnection.uid)?.connectionStatus === 'connected');
+const parsedFolders = computed(() => folders.value.filter(f => !f.connections.includes(props.contextConnection.uid)));
 
 const confirmDeleteConnection = () => {
    if (isConnected.value)
@@ -129,6 +171,16 @@ const confirmDeleteConnection = () => {
    closeContext();
 };
 
+const moveToFolder = (folderUid?: string) => {
+   if (!folderUid) {
+      addFolder({
+         connections: [props.contextConnection.uid]
+      });
+   }
+
+   closeContext();
+};
+
 const duplicateConnection = () => {
    let connectionCopy = getConnectionByUid(props.contextConnection.uid);
    connectionCopy = {

src/renderer/components/WorkspaceTabPropsTableContext.vue

@@ -101,7 +101,13 @@ const props = defineProps({
    selectedField: Object
 });
 
-const emit = defineEmits(['close-context', 'duplicate-selected', 'delete-selected', 'add-new-index', 'add-to-index']);
+const emit = defineEmits([
+   'close-context',
+   'duplicate-selected',
+   'delete-selected',
+   'add-new-index',
+   'add-to-index'
+]);
 
 const hasPrimary = computed(() => props.indexes.some(index => index.type === 'PRIMARY'));
 

src/renderer/components/WorkspaceTabPropsTableFields.vue

@@ -150,7 +150,13 @@ const props = defineProps({
    mode: String
 });
 
-const emit = defineEmits(['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field']);
+const emit = defineEmits([
+   'add-new-index',
+   'add-to-index',
+   'rename-field',
+   'duplicate-field',
+   'remove-field'
+]);
 
 const workspacesStore = useWorkspacesStore();
 const consoleStore = useConsoleStore();

src/renderer/i18n/en-US.ts

@@ -79,7 +79,8 @@ export const enUS = {
       search: 'Search',
       title: 'Title',
       archive: 'Archive', // verb
-      undo: 'Undo'
+      undo: 'Undo',
+      moveTo: 'Move to'
    },
    connection: { // Database connection
       connection: 'Connection',
@@ -363,6 +364,7 @@ export const enUS = {
       editFolder: 'Edit folder',
       folderName: 'Folder name',
       deleteFolder: 'Delete folder',
+      newFolder: 'New folder',
       editConnectionAppearance: 'Edit connection appearance',
       defaultCopyType: 'Default copy type',
       showTableSize: 'Show table size in sidebar',

src/renderer/stores/connections.ts

@@ -90,8 +90,12 @@ export const useConnectionsStore = defineStore('connections', {
          });
          persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
-      addFolder (params: {after: string; connections: [string, string]}) {
-         const index = this.connectionsOrder.findIndex((conn: SidebarElement) => conn.uid === params.after);
+      addFolder (params: {after?: string; connections: [string, string?]}) {
+         const index = params.after
+            ? this.connectionsOrder.findIndex((conn: SidebarElement) => conn.uid === params.after)
+            : this.connectionsOrder.length;
+
+         this.removeFromFolders(params.connections);
 
          this.connectionsOrder.splice(index, 0, {
             isFolder: true,
@@ -102,6 +106,15 @@ export const useConnectionsStore = defineStore('connections', {
          });
          persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
+      removeFromFolders (...connections: string[]) { // Removes connections from folders
+         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => {
+            if (el.isFolder)
+               el.connections = el.connections.filter(uid => !connections.includes(uid));
+            return el;
+         });
+
+         this.clearEmptyFolders();
+      },
       addToFolder (params: {folder: string; connection: string}) {
          this.connectionsOrder = this.connectionsOrder.map((conn: SidebarElement) => {
             if (conn.uid === params.folder)
@@ -113,11 +126,7 @@ export const useConnectionsStore = defineStore('connections', {
          this.clearEmptyFolders();
       },
       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.removeFromFolders(connection.uid);
          this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid);
          this.lastConnections = (this.lastConnections as SidebarElement[]).filter(el => el.uid !== connection.uid);
 

src/renderer/stores/workspaces.ts

@@ -66,7 +66,7 @@ export interface Workspace {
    uid: string;
    client?: ClientCode;
    database?: string;
-   connectionStatus: 'connected' | 'disconnected' | 'failed';
+   connectionStatus: 'connected' | 'connecting' | 'disconnected' | 'failed';
    selectedTab: string;
    searchTerm: string;
    tabs: WorkspaceTab[];