Merge pull request #60 from lukashornych/dev

Small features and fixes

README.md

@@ -1,5 +1,5 @@
 <h1 align="center" style="border-bottom: none">
-    <a href="https://evitadb.io" target="_blank"><img src="https://raw.githubusercontent.com/lukashornych/evitalab/dev/documentation/assets/img/evitalab.png"/></a><br>evitaLab
+    <a href="https://evitadb.io" target="_blank"><img src="https://raw.githubusercontent.com/lukashornych/evitalab/dev/documentation/assets/img/evitalab.svg"/></a><br>evitaLab
 </h1>
 
 <p align="center">

src/components/base/VTabToolbar.vue

@@ -2,11 +2,33 @@
 /**
  * Common pre-configured toolbar for tab windows.
  */
+import { computed } from 'vue'
 
-const props = defineProps<{
+type Flag = {
+    title: string,
+    prependIcon?: string,
+}
+
+const props = withDefaults(defineProps<{
     prependIcon: string,
-    path: string[]
-}>()
+    path: string[],
+    flags?: any[]
+}>(), {
+    flags: () => []
+})
+
+const normalizedFlags = computed<Flag[]>(() => {
+    const normalizedFlags: Flag[] = props.flags.map((flag: any) => {
+        if (typeof flag === 'string') {
+            return {
+                title: flag,
+            }
+        } else {
+            return flag as Flag
+        }
+    })
+    return normalizedFlags
+})
 </script>
 
 <template>
@@ -23,10 +45,22 @@ const props = defineProps<{
         />
 
         <VToolbarTitle class="ml-0 font-weight-bold">
-            <VBreadcrumbs
-                :items="path"
-                class="pl-0 pr-0 pt-0 pb-0"
-            />
+            <div style="display: flex">
+                <VBreadcrumbs
+                    :items="path"
+                    class="pl-0 pr-0 pt-0 pb-0 mr-4"
+                />
+
+                <VChipGroup v-if="normalizedFlags" variant="plain">
+                    <VChip
+                        v-for="flag in normalizedFlags"
+                        :key="flag.title"
+                        :prepend-icon="flag.prependIcon as any"
+                    >
+                        {{ flag.title }}
+                    </VChip>
+                </VChipGroup>
+            </div>
         </VToolbarTitle>
 
         <template #append>

src/components/lab/editor/data-grid/LabEditorDataGrid.vue

@@ -85,9 +85,6 @@ onBeforeMount(() => {
     dataGridConsoleService.getDataLocales(props.params.dataPointer)
         .then(dl => {
             dataLocales = dl
-            if (!selectedDataLocale.value) {
-                selectedDataLocale.value = getBrowserPreferredDataLocale()
-            }
             return dataGridConsoleService.getEntityPropertyDescriptors(props.params.dataPointer)
         })
         .then(ep => {
@@ -110,15 +107,6 @@ onBeforeMount(() => {
         })
 })
 
-function getBrowserPreferredDataLocale(): string | undefined {
-    for (const browserLanguage of navigator.languages) {
-        if (dataLocales.includes(browserLanguage)) {
-            return browserLanguage
-        }
-    }
-    return undefined
-}
-
 async function initializeGridHeaders(entityPropertyDescriptors: EntityPropertyDescriptor[]): Promise<Map<string, any>> {
     const gridHeaders: Map<string, any> = new Map<string, any>()
     for (const propertyDescriptor of entityPropertyDescriptors) {
@@ -203,6 +191,7 @@ async function executeQuery(): Promise<void> {
     >
         <LabEditorDataGridToolbar
             :path="path"
+            :locale="selectedDataLocale"
             :loading="loading"
             @execute-query="executeQuery"
         >

src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue

@@ -4,21 +4,35 @@
  */
 import VExecuteQueryButton from '@/components/base/VExecuteQueryButton.vue'
 import VTabToolbar from '@/components/base/VTabToolbar.vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
-    path: string[]
+    path: string[],
+    locale: string | undefined,
     loading: boolean
 }>()
 const emit = defineEmits<{
     (e: 'executeQuery'): void
 }>()
 
+const flags = computed<any>(() => {
+    const flags: any[] = []
+    if (props.locale) {
+        flags.push({
+            title: props.locale,
+            prependIcon: 'mdi-translate',
+        })
+    }
+    return flags
+})
+
 </script>
 
 <template>
     <VTabToolbar
         prepend-icon="mdi-text-box-edit-outline"
         :path="path"
+        :flags="flags"
     >
         <template #append>
             <VExecuteQueryButton @click="emit('executeQuery')" />

src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCell.vue

@@ -35,6 +35,7 @@ const openableInNewTab = computed<boolean>(() => {
         return false
     }
 })
+const showDetailOnHover = computed<boolean>(() => printablePropertyValue.value.length <= 100)
 
 // todo lho we could format certain data types more human readable like we do in markdown pretty printer
 function toPrintablePropertyValue(value: any): string {
@@ -98,7 +99,7 @@ function copyValue(): void {
                 <VIcon v-if="openableInNewTab" class="mr-1">mdi-open-in-new</VIcon>
                 <span>
                     {{ printablePropertyValue }}
-                    <VTooltip activator="parent">
+                    <VTooltip v-if="showDetailOnHover" activator="parent">
                         {{ printablePropertyValue }}
                     </VTooltip>
                 </span>

src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue

@@ -32,7 +32,7 @@ const emit = defineEmits<{
 }>()
 
 const filter = ref<string>('')
-const filterInput = ref<HTMLElement | null>(null)
+const filterInput = ref<HTMLInputElement | null>(null)
 
 /**
  * Index of all properties by property type
@@ -192,7 +192,7 @@ function togglePropertySectionSelection(sectionType: EntityPropertyType, newSele
             <VCardText class="selector-body pt-0 pl-4 mt-4">
                 <Hotkeys
                     :shortcuts="['F']"
-                    @triggered="filterInput?.focus()"
+                    @triggered="filterInput?.select()"
                 />
                 <VTextField
                     ref="filterInput"

src/styles/chip.scss

@@ -21,4 +21,6 @@
 
 .v-chip--variant-plain {
   pointer-events: none;
+  opacity: 1;
+  color: $gray-light !important;
 }