Merge pull request #29 from lukashornych/dev

Release loading support and refactor

src/components/base/VLoadingIcon.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Loading spinner icon made by Fran Pérez https://codepen.io/mrrocks/pen/ExLovj
+ */
+</script>
+
+<template>
+    <svg class="spinner" width="1.5rem" height="1.5rem" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+// This is just to center the spinner
+
+html, body { height: 100%; }
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Here is where the magic happens
+
+$offset: 187;
+$duration: 1.4s;
+
+.spinner {
+    animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(270deg); }
+}
+
+.path {
+    stroke-dasharray: $offset;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    animation:
+        dash $duration ease-in-out infinite,
+        colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+    0% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    25% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    50% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    75% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    100% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+}
+
+@keyframes dash {
+    0% { stroke-dashoffset: $offset; }
+    50% {
+        stroke-dashoffset: $offset/4;
+        transform:rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: $offset;
+        transform:rotate(450deg);
+    }
+}
+</style>

src/components/lab/editor/LabEditorLoadingScreen.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Generic loading screen to display while a tab component is being initialized.
+ */
+
+import VLoadingIcon from '@/components/base/VLoadingIcon.vue'
+</script>
+
+<template>
+    <div class="loading-screen">
+        <div class="loading-screen-info">
+            <VLoadingIcon width="3rem" height="3rem"/>
+            <span>Loading, please wait ...</span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.loading-screen {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+}
+
+.loading-screen-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+</style>

src/components/lab/editor/LabEditorTabWindow.vue

@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import LabEditorLoadingScreen from '@/components/lab/editor/LabEditorLoadingScreen.vue'
+
 const props = defineProps<{
     component: any,
     componentProps: any
 }>()
+
+const componentReady = ref<boolean>(false)
 </script>
 
 <template>
     <KeepAlive>
         <Component
+            v-show="componentReady"
             :is="component"
             v-bind="componentProps"
+            @ready="componentReady = true"
         />
     </KeepAlive>
+    <LabEditorLoadingScreen v-if="!componentReady" />
 </template>
 
 <style lang="scss" scoped>

src/components/lab/editor/console/LabEditorConsoleDataGrid.vue → src/components/lab/editor/data-grid/LabEditorDataGrid.vue

@@ -14,7 +14,7 @@ import {
     EntityPropertyKey,
     QueryResult,
     StaticEntityProperties
-} from '@/model/editor/data-grid-console'
+} from '@/model/editor/data-grid'
 import { Extension } from '@codemirror/state'
 import { DataGridConsoleService, useDataGridConsoleService } from '@/services/editor/data-grid-console.service'
 import CodemirrorOneLine from '@/components/base/CodemirrorOneLine.vue'

src/components/lab/editor/LabEditorErrorViewer.vue → src/components/lab/editor/error-viewer/LabEditorErrorViewer.vue

@@ -2,9 +2,10 @@
 import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { ErrorViewerProps } from '@/model/editor/error-viewer'
 import { computed } from 'vue'
-import { TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
 
 const props = defineProps<TabComponentProps<ErrorViewerProps, VoidTabRequestComponentData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const title = computed(() => {
     return props.params.error.name
@@ -16,6 +17,8 @@ const detail = computed(() => {
     }
     return props.params.error.detail
 })
+
+emit('ready')
 </script>
 
 <template>

src/components/lab/editor/console/LabEditorConsoleEvitaQL.vue → src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue

@@ -14,12 +14,13 @@ import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { EvitaQLConsoleService, useEvitaQLConsoleService } from '@/services/editor/evitaql-console.service'
 import { EvitaQLConsoleData, EvitaQLConsoleParams } from '@/model/editor/evitaql-console'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 
 const evitaQLConsoleService: EvitaQLConsoleService = useEvitaQLConsoleService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<EvitaQLConsoleParams, EvitaQLConsoleData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const path = ref<string[]>([
     props.params.dataPointer.catalogName
@@ -43,6 +44,8 @@ async function executeQuery(): Promise<void> {
     }
 }
 
+emit('ready')
+
 if (props.params.executeOnOpen) {
     executeQuery()
 }

src/components/lab/editor/console/LabEditorConsoleGraphQL.vue → src/components/lab/editor/graphql-console/LabEditorGraphQLConsole.vue

@@ -16,12 +16,13 @@ import { GraphQLSchema, printSchema } from 'graphql'
 import { GraphQLConsoleData, GraphQLConsoleParams, GraphQLInstanceType } from '@/model/editor/graphql-console'
 import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 
 const graphQLConsoleService: GraphQLConsoleService = useGraphQLConsoleService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<GraphQLConsoleParams, GraphQLConsoleData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const path = ref<string[]>([])
 if (props.params.instancePointer.instanceType !== GraphQLInstanceType.SYSTEM) {
@@ -53,6 +54,8 @@ onBeforeMount(() => {
             graphQLSchema.value = schema
             queryExtensions.push(graphql(schema))
             initialized.value = true
+            emit('ready')
+
             if (props.params.executeOnOpen) {
                 executeQuery()
             }
@@ -211,9 +214,6 @@ function initializeSchemaEditor(): void {
             </Splitpanes>
         </div>
     </div>
-    <div v-else>
-        Loading...
-    </div>
 </template>
 
 <style lang="scss" scoped>

src/components/lab/editor/schema/LabEditorSchemaViewer.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewer.vue

@@ -3,12 +3,13 @@ import { SchemaViewerProps } from '@/model/editor/schema-viewer'
 import { ref } from 'vue'
 import { SchemaViewerService, useSchemaViewerService } from '@/services/editor/schema-viewer.service'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
 
 const schemaViewerService: SchemaViewerService = useSchemaViewerService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<SchemaViewerProps, VoidTabRequestComponentData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const schemaLoaded = ref<boolean>(false)
 const schema = ref<any>()
@@ -19,11 +20,15 @@ schemaViewerService.getSchema(props.params.dataPointer)
     .then(s => {
         schema.value = s
         schemaLoaded.value = true
+        emit('ready')
     })
 </script>
 
 <template>
-    <div class="schema-viewer">
+    <div
+        v-if="schemaLoaded"
+        class="schema-viewer"
+    >
         <VToolbar
             density="compact"
             elevation="2"
@@ -45,14 +50,10 @@ schemaViewerService.getSchema(props.params.dataPointer)
 
         <VSheet class="schema-viewer__body">
             <component
-                v-if="schemaLoaded"
                 :is="params.dataPointer.schemaPointer.component()"
                 :data-pointer="params.dataPointer"
                 :schema="schema"
             />
-            <span v-else>
-                Loading...
-            </span>
         </VSheet>
     </div>
 </template>

src/components/lab/editor/schema/LabEditorSchemaViewerAssociatedData.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAssociatedData.vue

@@ -4,7 +4,7 @@ import LabEditorViewerAssociatedDataItem from './LabEditorSchemaViewerAssociated
 import LabEditorSchemaViewerContainerSection from './LabEditorSchemaViewerContainerSection.vue'
 import { AssociatedDataSchema } from '@/model/evitadb'
 import LabEditorSchemaViewerContainerSectionList
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionList.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionList.vue'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,

src/components/lab/editor/schema/LabEditorSchemaViewerAssociatedDataItem.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAssociatedDataItem.vue

@@ -9,7 +9,7 @@ import { EditorService, useEditorService } from '@/services/editor/editor.servic
 import { SchemaViewerRequest } from '@/model/editor/schema-viewer-request'
 import { UnexpectedError } from '@/model/lab'
 import LabEditorSchemaViewerContainerSectionListItem
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionListItem.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionListItem.vue'
 
 const editorService: EditorService = useEditorService()
 

src/components/lab/editor/schema/LabEditorSchemaViewerAttributes.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAttributes.vue

@@ -4,7 +4,7 @@ import LabEditorViewerAttributesItem from './LabEditorSchemaViewerAttributesItem
 import LabEditorSchemaViewerContainerSection from './LabEditorSchemaViewerContainerSection.vue'
 import { AttributeSchemaUnion } from '@/model/evitadb'
 import LabEditorSchemaViewerContainerSectionList
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionList.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionList.vue'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,

src/components/lab/editor/schema/LabEditorSchemaViewerAttributesItem.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAttributesItem.vue

@@ -13,7 +13,7 @@ import { EditorService, useEditorService } from '@/services/editor/editor.servic
 import { SchemaViewerRequest } from '@/model/editor/schema-viewer-request'
 import { UnexpectedError } from '@/model/lab'
 import LabEditorSchemaViewerContainerSectionListItem
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionListItem.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionListItem.vue'
 
 const editorService: EditorService = useEditorService()
 

src/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionList.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import LabEditorSchemaViewerContainerSectionListItem
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionListItem.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionListItem.vue'
 
 const props = defineProps<{
     items: any[],

src/components/lab/editor/schema/LabEditorSchemaViewerEntities.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerEntities.vue

@@ -4,7 +4,7 @@ import LabEditorSchemaViewerEntitiesItem from './LabEditorSchemaViewerEntitiesIt
 import LabEditorSchemaViewerContainerSection from './LabEditorSchemaViewerContainerSection.vue'
 import { EntitySchema } from '@/model/evitadb'
 import LabEditorSchemaViewerContainerSectionList
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionList.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionList.vue'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,

src/components/lab/editor/schema/LabEditorSchemaViewerEntitiesItem.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerEntitiesItem.vue

@@ -5,7 +5,7 @@ import { SchemaViewerRequest } from '@/model/editor/schema-viewer-request'
 import { EntitySchema } from '@/model/evitadb'
 import { UnexpectedError } from '@/model/lab'
 import LabEditorSchemaViewerContainerSectionListItem
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionListItem.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionListItem.vue'
 
 const editorService: EditorService = useEditorService()
 

src/components/lab/editor/schema/LabEditorSchemaViewerReferences.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerReferences.vue

@@ -4,7 +4,7 @@ import LabEditorViewerReferencesItem from './LabEditorSchemaViewerReferencesItem
 import LabEditorSchemaViewerContainerSection from './LabEditorSchemaViewerContainerSection.vue'
 import { ReferenceSchema } from '@/model/evitadb'
 import LabEditorSchemaViewerContainerSectionList
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionList.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionList.vue'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,

src/components/lab/editor/schema/LabEditorSchemaViewerReferencesItem.vue → src/components/lab/editor/schema-viewer/LabEditorSchemaViewerReferencesItem.vue

@@ -5,7 +5,7 @@ import { UnexpectedError } from '@/model/lab'
 import { EditorService, useEditorService } from '@/services/editor/editor.service'
 import { SchemaViewerRequest } from '@/model/editor/schema-viewer-request'
 import LabEditorSchemaViewerContainerSectionListItem
-    from '@/components/lab/editor/schema/LabEditorSchemaViewerContainerSectionListItem.vue'
+    from '@/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainerSectionListItem.vue'
 
 const editorService: EditorService = useEditorService()
 

src/components/lab/explorer/LabExplorerCollectionItem.vue

@@ -4,7 +4,7 @@ import VTreeViewItem from '@/components/base/VTreeViewItem.vue'
 import { EvitaDBConnection } from '@/model/lab'
 import { inject, Ref, ref } from 'vue'
 import { EditorService, useEditorService } from '@/services/editor/editor.service'
-import { DataGridConsoleRequest } from '@/model/editor/data-grid-console-request'
+import { DataGridRequest } from '@/model/editor/data-grid-request'
 import { GraphQLConsoleRequest } from '@/model/editor/graphql-console-request'
 import { GraphQLInstanceType } from '@/model/editor/graphql-console'
 import { EvitaQLConsoleRequest } from '@/model/editor/evitaql-console-request'
@@ -44,7 +44,7 @@ const connection = inject<EvitaDBConnection>('connection') as EvitaDBConnection
 const catalogSchema = inject<Ref<CatalogSchema | undefined>>('catalogSchema') as Ref<CatalogSchema>
 
 function openDataGrid() {
-    editorService.createTabRequest(new DataGridConsoleRequest(
+    editorService.createTabRequest(new DataGridRequest(
         connection as EvitaDBConnection,
         catalogSchema.value.name,
         props.entitySchema.name

src/model/editor/data-grid-console-request.ts → src/model/editor/data-grid-request.ts

@@ -1,13 +1,13 @@
 import { TabRequest } from '@/model/editor/editor'
 import { EvitaDBConnection } from '@/model/lab'
 import { DefineComponent, markRaw } from 'vue'
-import LabEditorConsoleDataGrid from '@/components/lab/editor/console/LabEditorConsoleDataGrid.vue'
-import { DataGridConsoleData, DataGridConsoleParams, DataGridDataPointer } from '@/model/editor/data-grid-console'
+import LabEditorDataGrid from '@/components/lab/editor/data-grid/LabEditorDataGrid.vue'
+import { DataGridConsoleData, DataGridConsoleParams, DataGridDataPointer } from '@/model/editor/data-grid'
 
 /**
  * Creates new data grid tab.
  */
-export class DataGridConsoleRequest extends TabRequest<DataGridConsoleParams, DataGridConsoleData> {
+export class DataGridRequest extends TabRequest<DataGridConsoleParams, DataGridConsoleData> {
 
     constructor(connection: EvitaDBConnection,
                 catalogName: string,
@@ -17,7 +17,7 @@ export class DataGridConsoleRequest extends TabRequest<DataGridConsoleParams, Da
         super(
             `${catalogName} - ${entityType} [${connection.name}]`,
             'mdi-table',
-            markRaw(LabEditorConsoleDataGrid as DefineComponent<any, any, any>),
+            markRaw(LabEditorDataGrid as DefineComponent<any, any, any>),
             {
                 dataPointer: new DataGridDataPointer(connection, catalogName, entityType),
                 executeOnOpen

src/model/editor/editor.ts

@@ -79,3 +79,13 @@ export interface ExecutableTabRequest extends TabRequestComponentParams {
  * Represents injectable/storable data of a component that doesn't support any user data.
  */
 export interface VoidTabRequestComponentData extends TabRequestComponentData {}
+
+/**
+ * Represents basic events every tab component should emit.
+ */
+export interface TabComponentEvents {
+    /**
+     * Emitted when the tab component is ready to be used.
+     */
+    (e: 'ready'): void
+}