feat(#113): sort catalogs and collections in explorer alphabetically

src/modules/connection/explorer/component/CatalogItem.vue

@@ -42,6 +42,8 @@ import {
     useBackupsTabFactory,
 } from '@/modules/backup-viewer/service/BackupViewerTabFactory'
 import { ItemFlag } from '@/modules/base/model/tree-view/ItemFlag'
+import { EntityCollection } from '@/modules/connection/model/EntityCollection'
+import Immutable from 'immutable'
 
 const evitaLabConfig: EvitaLabConfig = useEvitaLabConfig()
 const workspaceService: WorkspaceService = useWorkspaceService()
@@ -76,6 +78,12 @@ const flags = computed<ItemFlag[]>(() => {
 const actions = computed<Map<CatalogItemType, MenuItem<CatalogItemType>>>(() => createActions())
 const actionList = computed<MenuItem<CatalogItemType>[]>(() => Array.from(actions.value.values()))
 
+const entityCollections = computed<Immutable.List<EntityCollection>>(() => {
+    return props.catalog.entityCollections.sort((a: EntityCollection, b: EntityCollection) => {
+        return a.entityType.localeCompare(b.entityType)
+    })
+})
+
 const catalogRef = ref(props.catalog)
 provideCatalog(catalogRef as Ref<Catalog>)
 
@@ -276,7 +284,7 @@ function createMenuAction(
         <div v-if="!catalog.corrupted">
             <template v-if="catalog.entityCollections.size > 0">
                 <CollectionItem
-                    v-for="entityCollection in catalog.entityCollections"
+                    v-for="entityCollection in entityCollections"
                     :key="entityCollection.entityType"
                     :entity-collection="entityCollection"
                     @change="emit('change')"

src/modules/connection/explorer/component/ConnectionItem.vue

@@ -34,6 +34,7 @@ import { TaskViewerTabFactory, useTaskViewerTabFactory } from '@/modules/task-vi
 import { JfrViewerTabFactory, useJfrViewerTabFactory } from '@/modules/jfr-viewer/service/JfrViewerTabFactory'
 import { ItemFlag } from '@/modules/base/model/tree-view/ItemFlag'
 import { ItemFlagType } from '@/modules/base/model/tree-view/ItemFlagType'
+import Immutable from 'immutable'
 
 const evitaLabConfig: EvitaLabConfig = useEvitaLabConfig()
 const workspaceService: WorkspaceService = useWorkspaceService()
@@ -65,7 +66,7 @@ const actions = computed<Map<ConnectionItemType, MenuItem<ConnectionItemType>>>(
 const actionList = computed<MenuItem<ConnectionItemType>[]>(
     () => Array.from(actions.value.values()))
 
-const catalogs = ref<Catalog[]>()
+const catalogs = ref<Immutable.List<Catalog>>()
 const loading = ref<boolean>(false)
 
 const showRemoveConnectionDialog = ref<boolean>(false)
@@ -74,10 +75,10 @@ const showCreateCatalogDialog = ref<boolean>(false)
 async function loadCatalogs(): Promise<void> {
     loading.value = true
     try {
-        catalogs.value = await connectionService.getCatalogs(
-            props.connection,
-            true
-        )
+        catalogs.value = (await connectionService.getCatalogs(props.connection, true))
+            .sort((a: Catalog, b: Catalog) => {
+                return a.name.localeCompare(b.name)
+            })
     } catch (e: any) {
         toaster.error(e)
     }
@@ -227,7 +228,7 @@ function createMenuAction(
             </template>
 
             <div v-if="catalogs !== undefined">
-                <template v-if="catalogs.length > 0">
+                <template v-if="catalogs.size > 0">
                     <CatalogItem
                         v-for="catalog in catalogs"
                         :key="catalog.name"

src/modules/connection/service/ConnectionService.ts

@@ -12,6 +12,7 @@ import { EntitySchema } from '@/modules/connection/model/schema/EntitySchema'
 import { mandatoryInject } from '@/utils/reactivity'
 import { EvitaDBDriverResolver } from '@/modules/connection/driver/EvitaDBDriverResolver'
 import { EvitaDBDriver } from '@/modules/connection/driver/EvitaDBDriver'
+import Immutable from 'immutable'
 
 /**
  * Cookie containing preconfigured connections. These will be displayed next to the user-defined connections.
@@ -154,13 +155,13 @@ export class ConnectionService {
         return catalog
     }
 
-    async getCatalogs(connection: Connection, forceReload?: boolean): Promise<Catalog[]> {
+    async getCatalogs(connection: Connection, forceReload?: boolean): Promise<Immutable.List<Catalog>> {
         const cachedCatalogs: IterableIterator<Catalog> | undefined = this.store.cachedCatalogs.get(connection.id)?.values() as IterableIterator<Catalog>
         if (cachedCatalogs == undefined || forceReload === true) {
             await this.fetchCatalogs(connection)
-            return this.store.catalogs(connection.id)
+            return Immutable.List(this.store.catalogs(connection.id))
         } else {
-            return this.store.catalogs(connection.id)
+            return Immutable.List(this.store.catalogs(connection.id))
         }
     }