@@ -78,11 +43,13 @@ function openItem(item: any): void {
href="https://github.com/lukashornych/evitalab"
target="_blank"
>
-
+
@@ -95,24 +62,82 @@ function openItem(item: any): void {
:items="mainItems"
:selected="[panel]"
@click:select="selectPanel"
+ class="connection-explorer"
/>
- > {
const gridHeaders: Map = new Map()
for (const propertyDescriptor of entityPropertyDescriptors) {
@@ -139,7 +151,7 @@ function preselectEntityProperties(): void {
}
displayedProperties.value = entityPropertyDescriptors
- .filter(it => it.key.type === EntityPropertyType.Entity)
+ .filter(it => it.key.type === EntityPropertyType.Entity || it.schema?.representative)
.map(it => it.key)
}
diff --git a/src/components/lab/editor/data-grid/LabEditorDataGridQueryInput.vue b/src/components/lab/editor/data-grid/LabEditorDataGridQueryInput.vue
index f548049b..f688a637 100644
--- a/src/components/lab/editor/data-grid/LabEditorDataGridQueryInput.vue
+++ b/src/components/lab/editor/data-grid/LabEditorDataGridQueryInput.vue
@@ -48,21 +48,27 @@ const showPropertiesSelect = ref(false)
@update:selected="emit('update:selectedQueryLanguage', $event)"
/>
- (false)
diff --git a/src/components/lab/editor/data-grid/LabEditorDataGridQueryLanguageSelector.vue b/src/components/lab/editor/data-grid/LabEditorDataGridQueryLanguageSelector.vue
index 50e19b81..25e2f794 100644
--- a/src/components/lab/editor/data-grid/LabEditorDataGridQueryLanguageSelector.vue
+++ b/src/components/lab/editor/data-grid/LabEditorDataGridQueryLanguageSelector.vue
@@ -6,7 +6,7 @@ import { computed } from 'vue'
const queryLanguages = [
{
title: 'EvitaQL',
- icon: 'mdi-console',
+ icon: 'mdi-application-braces-outline',
value: QueryLanguage.EvitaQL
},
{
@@ -25,7 +25,7 @@ const emit = defineEmits<{
const selectedIcon = computed(() => {
const language = queryLanguages.find(language => language.value === props.selected)
- return language ? language.icon : 'mdi-code-braces'
+ return language ? language.icon : 'mdi-application-braces-outline'
})
@@ -60,4 +60,5 @@ const selectedIcon = computed(() => {
diff --git a/src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue b/src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue
index 44f5bee6..c01e9cf2 100644
--- a/src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue
+++ b/src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue
@@ -2,6 +2,8 @@
/**
* Toolbar for the LabEditorDataGrid component.
*/
+import VExecuteQueryButton from '@/components/base/VExecuteQueryButton.vue'
+import VTabToolbar from '@/components/base/VTabToolbar.vue'
const props = defineProps<{
path: string[]
@@ -14,48 +16,20 @@ const emit = defineEmits<{
-
-
-
-
-
- mdi-play
-
-
- Execute query
-
-
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGrid.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGrid.vue
index 844a152a..163660cc 100644
--- a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGrid.vue
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGrid.vue
@@ -5,14 +5,15 @@
import { Pane, Splitpanes } from 'splitpanes'
import { VDataTableServer } from 'vuetify/labs/VDataTable'
-import LabEditorDataGridGridPropertyDetail from './LabEditorDataGridGridPropertyDetail.vue'
+import LabEditorDataGridGridCellDetail from './LabEditorDataGridGridCellDetail.vue'
import { ref } from 'vue'
import LabEditorDataGridGridCell from '@/components/lab/editor/data-grid/grid/LabEditorDataGridGridCell.vue'
import {
DataGridConsoleData,
DataGridConsoleParams,
EntityPropertyDescriptor,
- EntityPropertyType, StaticEntityProperties
+ EntityPropertyType, EntityReferenceValue,
+ StaticEntityProperties
} from '@/model/editor/data-grid'
import { Toaster, useToaster } from '@/services/editor/toaster'
import { QueryLanguage, UnexpectedError } from '@/model/lab'
@@ -22,6 +23,7 @@ import { TabComponentProps } from '@/model/editor/editor'
import { DataGridConsoleService, useDataGridConsoleService } from '@/services/editor/data-grid-console.service'
import LabEditorDataGridGridColumnHeader
from '@/components/lab/editor/data-grid/grid/LabEditorDataGridGridColumnHeader.vue'
+import { Scalar } from '@/model/evitadb'
const editorService: EditorService = useEditorService()
const dataGridConsoleService: DataGridConsoleService = useDataGridConsoleService()
@@ -50,7 +52,7 @@ props.entityPropertyDescriptors.forEach(it => entityPropertyDescriptorIndex.set(
const showPropertyDetail = ref(false)
const propertyDetailDescriptor = ref()
-const propertyDetailValue = ref('')
+const propertyDetailValue = ref()
function getPropertyDescriptor(key: string): EntityPropertyDescriptor | undefined {
const descriptor = entityPropertyDescriptorIndex.get(key)
@@ -81,7 +83,24 @@ function handlePropertyClicked(propertyKey: string, value: any): void {
queryLanguage: props.queryLanguage,
pageNumber: props.pageNumber,
pageSize: props.pageSize,
- filterBy: dataGridConsoleService.buildParentEntityFilterBy(props.queryLanguage, value)
+ filterBy: dataGridConsoleService.buildParentEntityFilterBy(props.queryLanguage, (value as EntityReferenceValue).primaryKey)
+ },
+ true
+ ))
+ } else if (propertyDescriptor &&
+ ((propertyDescriptor.type === EntityPropertyType.Attributes && propertyDescriptor.schema.type === Scalar.Predecessor) ||
+ (propertyDescriptor.type === EntityPropertyType.AssociatedData && propertyDescriptor.schema.type === Scalar.Predecessor))) {
+ // we want references to open referenced entities in appropriate new grid for referenced collection
+ editorService.createTabRequest(new DataGridRequest(
+ props.gridProps.params.dataPointer.connection,
+ props.gridProps.params.dataPointer.catalogName,
+ props.gridProps.params.dataPointer.entityType,
+ {
+ dataLocale: props.dataLocale,
+ queryLanguage: props.queryLanguage,
+ pageNumber: props.pageNumber,
+ pageSize: props.pageSize,
+ filterBy: dataGridConsoleService.buildPredecessorEntityFilterBy(props.queryLanguage, value)
},
true
))
@@ -96,7 +115,12 @@ function handlePropertyClicked(propertyKey: string, value: any): void {
queryLanguage: props.queryLanguage,
pageNumber: props.pageNumber,
pageSize: props.pageSize,
- filterBy: dataGridConsoleService.buildReferencedEntityFilterBy(props.queryLanguage, value)
+ filterBy: dataGridConsoleService.buildReferencedEntityFilterBy(
+ props.queryLanguage,
+ value instanceof Array
+ ? (value as EntityReferenceValue[]).map(it => it.primaryKey)
+ : [(value as EntityReferenceValue).primaryKey]
+ )
},
true
))
@@ -111,7 +135,7 @@ function handlePropertyClicked(propertyKey: string, value: any): void {
function closePropertyDetail(): void {
showPropertyDetail.value = false
propertyDetailDescriptor.value = undefined
- propertyDetailValue.value = ''
+ propertyDetailValue.value = undefined
}
@@ -168,7 +192,7 @@ function closePropertyDetail(): void {
size="30"
min-size="30"
>
-
-import { EntityPropertyDescriptor, EntityPropertyType, StaticEntityProperties } from '@/model/editor/data-grid'
+import {
+ EntityPropertyDescriptor,
+ EntityPropertyType,
+ EntityReferenceValue,
+ StaticEntityProperties
+} from '@/model/editor/data-grid'
import { computed } from 'vue'
+import { Scalar } from '@/model/evitadb'
+import { Toaster, useToaster } from '@/services/editor/toaster'
+import { UnexpectedError } from '@/model/lab'
+
+const toaster: Toaster = useToaster()
const props = defineProps<{
propertyDescriptor: EntityPropertyDescriptor | undefined,
@@ -15,6 +25,10 @@ const printablePropertyValue = computed(() => toPrintablePropertyValue(p
const openableInNewTab = computed(() => {
if (props.propertyDescriptor?.type === EntityPropertyType.Entity && props.propertyDescriptor?.key.name === StaticEntityProperties.ParentPrimaryKey) {
return true
+ } else if (props.propertyDescriptor?.type === EntityPropertyType.Attributes && props.propertyDescriptor.schema.type === Scalar.Predecessor) {
+ return true
+ } else if (props.propertyDescriptor?.type === EntityPropertyType.AssociatedData && props.propertyDescriptor.schema.type === Scalar.Predecessor) {
+ return true
} else if (props.propertyDescriptor?.schema?.referencedEntityType) {
return true
} else {
@@ -22,6 +36,7 @@ const openableInNewTab = computed(() => {
}
})
+// todo lho we could format certain data types more human readable like we do in markdown pretty printer
function toPrintablePropertyValue(value: any): string {
if (value == undefined) {
return ''
@@ -31,18 +46,43 @@ function toPrintablePropertyValue(value: any): string {
return ''
}
return `[${value.map(it => toPrintablePropertyValue(it)).join(', ')}]`
+ } else if (value instanceof EntityReferenceValue) {
+ const flattenedRepresentativeAttributes: string[] = []
+ for (const representativeAttribute of value.representativeAttributes) {
+ if (representativeAttribute instanceof Array) {
+ flattenedRepresentativeAttributes.push(...(representativeAttribute.map(it => toPrintablePropertyValue(it))))
+ } else {
+ flattenedRepresentativeAttributes.push(toPrintablePropertyValue(representativeAttribute))
+ }
+ }
+ if (flattenedRepresentativeAttributes.length === 0) {
+ return `${value.primaryKey}`
+ } else {
+ return `${value.primaryKey}: ${flattenedRepresentativeAttributes.join(', ')}`
+ }
} else if (value instanceof Object) {
return JSON.stringify(value)
} else {
return value.toString()
}
}
+
+function copyValue(): void {
+ if (printablePropertyValue.value) {
+ navigator.clipboard.writeText(printablePropertyValue.value).then(() => {
+ toaster.info('Copied to clipboard.')
+ }).catch(() => {
+ toaster.error(new UnexpectedError(undefined, 'Failed to copy to clipboard.'))
+ })
+ }
+}
@@ -55,8 +95,13 @@ function toPrintablePropertyValue(value: any): string {
<null>
- mdi-open-in-new
- {{ printablePropertyValue }}
+ mdi-open-in-new
+
+ {{ printablePropertyValue }}
+
+ {{ printablePropertyValue }}
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetail.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetail.vue
new file mode 100644
index 00000000..6f7947b2
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetail.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+ {{ headerPrependIcon }}
+
+ {{ propertyDescriptor?.title || 'Unknown property' }}
+
+
+
+ mdi-close
+
+ Close detail
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailAutoPrettyPrintRenderer.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailAutoPrettyPrintRenderer.vue
new file mode 100644
index 00000000..79a06015
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailAutoPrettyPrintRenderer.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailDelegateRenderer.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailDelegateRenderer.vue
new file mode 100644
index 00000000..6d8ab715
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailDelegateRenderer.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailMarkdownRenderer.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailMarkdownRenderer.vue
new file mode 100644
index 00000000..48605df6
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailMarkdownRenderer.vue
@@ -0,0 +1,184 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailOutputFormatSelector.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailOutputFormatSelector.vue
new file mode 100644
index 00000000..73937aa5
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailOutputFormatSelector.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+ mdi-code-braces
+
+ Select output format
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailValueRenderer.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailValueRenderer.vue
new file mode 100644
index 00000000..706e94c8
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridCellDetailValueRenderer.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+ {{ action.props.prependIcon }}
+
+ {{ action.title }}
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridColumnHeader.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridColumnHeader.vue
index e7543bf3..209c6a72 100644
--- a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridColumnHeader.vue
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridColumnHeader.vue
@@ -1,5 +1,6 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridPropertyDetail.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridPropertyDetail.vue
deleted file mode 100644
index 40643eb9..00000000
--- a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridPropertyDetail.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
- {{ propertyDescriptor?.title || 'Unknown property' }}
-
-
-
-
-
-
-
diff --git a/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue b/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue
index 17c16a92..0baae7ff 100644
--- a/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue
+++ b/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue
@@ -6,7 +6,7 @@ import {
EntityPropertyType,
EntityPropertySectionSelection, DataGridConsoleParams, DataGridConsoleData
} from '@/model/editor/data-grid'
-import VClosableCardTitle from '@/components/base/VClosableCardTitle.vue'
+import VCardTitleWithActions from '@/components/base/VCardTitleWithActions.vue'
import LabEditorDataGridPropertySelectorSection from './LabEditorDataGridPropertySelectorSection.vue'
import LabEditorDataGridPropertySelectorSectionAttributeItem from './LabEditorDataGridPropertySelectorSectionAttributeItem.vue'
import LabEditorDataGridPropertySelectorSectionAssociatedDataItem from './LabEditorDataGridPropertySelectorSectionAssociatedDataItem.vue'
@@ -163,19 +163,33 @@ function togglePropertySectionSelection(sectionType: EntityPropertyType, newSele
density="comfortable"
v-bind="props"
>
- mdi-view-column
+ mdi-view-column-outline
Select displayed properties
-
-
- Displayed properties
-
-
+
+
+
+ Displayed properties
+
+
+
+ mdi-close
+
+ Close selector
+
+
+
+
+
diff --git a/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSection.vue b/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSection.vue
index 5813eb98..5b48a968 100644
--- a/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSection.vue
+++ b/src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSection.vue
@@ -79,7 +79,7 @@ function resolveNewSelection() {
-
+
-
+
+
+ + evitaDB documentation + + +
+ -
+
+
+ + Discord + + +
+ -
+
+
+ + Give us a ⭐️ on GitHub + + +
+
+
-
+
+
+
+
+
+
+
+
+
+ {{ prependIcon }}
{{ column.title }}
mdi-translate
diff --git a/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridDetailValueListItem.vue b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridDetailValueListItem.vue
new file mode 100644
index 00000000..6062c361
--- /dev/null
+++ b/src/components/lab/editor/data-grid/grid/LabEditorDataGridGridDetailValueListItem.vue
@@ -0,0 +1,49 @@
+
+
+
+
+ {{ value }}
+
+
+
+
+
+