Merge pull request #81 from lukashornych/dev

Release: uniqueness types support, complex properties framework for prop. tables, more detailed filterable flag, tooltips in explorer
lukashornych · Dec 6, 2023 · 8151308 · 8151308
2 parents 0444919 + 4c71126
commit 8151308
Show file tree

Hide file tree

Showing 16 changed files with 416 additions and 136 deletions.
diff --git a/src/components/base/VPropertiesTable.vue b/src/components/base/VPropertiesTable.vue
@@ -1,52 +1,24 @@
 <script setup lang="ts">
-import VMarkdown from '@/components/base/VMarkdown.vue'
+import VPropertiesTableValue from '@/components/base/VPropertiesTableValue.vue'
+
+import { Property } from '@/model/properties-table'
 
 const props = defineProps<{
-    properties: [string, any, ((item?: string) => void)?][]
+    properties: Property[]
 }>()
 </script>
 
 <template>
     <table class="properties-table">
         <tr
             v-for="property in properties"
-            :key="property[0]"
+            :key="property.name"
             class="properties-table__row"
         >
-            <td class="text-medium-emphasis">{{ property[0] }}</td>
-            <td>
-                <span
-                    v-if="property[1] == undefined"
-                    class="text-disabled font-weight-light font-italic"
-                >
-                    &lt;empty&gt;
-                </span>
-                <VCheckbox
-                    v-else-if="typeof property[1] === 'boolean'"
-                    v-model="property[1]"
-                    disabled
-                    density="compact"
-                    hide-details
-                    @click="property[2]?.(undefined)"
-                />
-                <VChipGroup
-                    v-else-if="Array.isArray(property[1])"
-                    dense
-                >
-                    <VChip
-                        v-for="item in property[1]"
-                        :key="item"
-                        :variant="property[2] ? 'outlined' : 'plain'"
-                        @click="property[2]?.(item)"
-                    >
-                        {{ item }}
-                    </VChip>
-                </VChipGroup>
-                <div v-else>
-                    <VMarkdown :source="property[1].toString()"/>
-                </div>
+            <td class="text-medium-emphasis">{{ property.name }}</td>
+            <td class="d-flex align-center">
+                <VPropertiesTableValue :property="property" :property-value="property.value" />
             </td>
-
         </tr>
     </table>
 </template>

diff --git a/src/components/base/VPropertiesTableValue.vue b/src/components/base/VPropertiesTableValue.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+
+import { ComplexFlagValue, KeywordValue, Property, PropertyValue } from '@/model/properties-table'
+import VMarkdown from '@/components/base/VMarkdown.vue'
+
+const props = defineProps<{
+    property: Property,
+    propertyValue: PropertyValue | PropertyValue[]
+}>()
+</script>
+
+<template>
+    <VChipGroup
+        v-if="Array.isArray(propertyValue)"
+        dense
+    >
+        <template v-if="propertyValue.length > 0">
+            <template v-for="item in propertyValue" :key="item.value.toString()">
+                <VPropertyTableValue :property="property" :propertyValue="item" />
+            </template>
+        </template>
+        <template v-else>
+            <span class="text-disabled font-weight-light font-italic">
+            &lt;empty&gt;
+        </span>
+        </template>
+    </VChipGroup>
+
+    <template v-else>
+        <!-- missing actual value -->
+        <span
+            v-if="propertyValue.value == undefined"
+            class="text-disabled font-weight-light font-italic"
+        >
+            &lt;empty&gt;
+        </span>
+
+        <!-- actual value is string -->
+        <div v-else-if="typeof propertyValue.value === 'string'">
+            <VMarkdown :source="propertyValue.value.toString()"/>
+        </div>
+
+        <!-- actual value is boolean -->
+        <VCheckbox
+            v-else-if="typeof propertyValue.value === 'boolean'"
+            :model-value="propertyValue.value"
+            disabled
+            density="compact"
+            hide-details
+            class="flex-grow-0"
+            @click="propertyValue.action?.(undefined)"
+        />
+
+        <!-- actual value is keyword -->
+        <VChip
+            v-else-if="propertyValue.value instanceof KeywordValue"
+            :variant="propertyValue.action ? 'outlined' : 'plain'"
+            dense
+            @click="propertyValue.action?.(propertyValue.value.value)"
+        >
+            {{ propertyValue.value.value }}
+        </VChip>
+
+        <!-- actual value is complex flag -->
+        <VChip
+            v-else-if="propertyValue.value instanceof ComplexFlagValue"
+            prepend-icon="mdi-check"
+            :variant="propertyValue.action ? 'outlined' : 'plain'"
+            dense
+            @click="propertyValue.action?.(propertyValue.value.value)"
+        >
+            {{ propertyValue.value.value }}
+
+            <VTooltip v-if="propertyValue.value.description" activator="parent">
+                {{ propertyValue.value.description }}
+            </VTooltip>
+        </VChip>
+
+        <!-- actual value is something else (number) -->
+        <span v-else>
+            {{ propertyValue.value.toString() }}
+        </span>
+
+        <!-- side note for the value -->
+        <div v-if="propertyValue.note">
+            <span>
+                <VIcon icon="mdi-alert-outline" color="warning" />
+                <VTooltip activator="parent">
+                    <span>{{ propertyValue.note }}</span>
+                </VTooltip>
+            </span>
+        </div>
+    </template>
+
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAssociatedDatum.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAssociatedDatum.vue
@@ -3,18 +3,20 @@ import LabEditorViewerNameVariants from './LabEditorSchemaViewerNameVariants.vue
 import LabEditorViewerContainer from './LabEditorSchemaViewerContainer.vue'
 import { SchemaViewerDataPointer } from '@/model/editor/schema-viewer'
 import { AssociatedDataSchema } from '@/model/evitadb'
+import { KeywordValue, Property, PropertyValue } from '@/model/properties-table'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,
     schema: AssociatedDataSchema
 }>()
 
-const properties: [string, any, ((item?: string) => void)?][] = []
-properties.push(['Type', props.schema.type.replace('ComplexDataObject', 'Object')])
-properties.push(['Description', props.schema.description])
-properties.push(['Deprecation notice', props.schema.deprecationNotice])
-properties.push(['Localized', props.schema.localized as boolean])
-properties.push(['Nullable', props.schema.nullable as boolean])
+const properties: Property[] = [
+    { name: 'Type', value: new PropertyValue(new KeywordValue(props.schema.type.replace('ComplexDataObject', 'Object'))) },
+    { name: 'Description', value: new PropertyValue(props.schema.description) },
+    { name: 'Deprecation notice', value: new PropertyValue(props.schema.deprecationNotice) },
+    { name: 'Localized', value: new PropertyValue(props.schema.localized as boolean) },
+    { name: 'Nullable', value: new PropertyValue(props.schema.nullable as boolean) }
+]
 
 </script>
 

diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAttribute.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerAttribute.vue
@@ -1,30 +1,96 @@
 <script setup lang="ts">
 import LabEditorViewerNameVariants from './LabEditorSchemaViewerNameVariants.vue'
 import LabEditorViewerContainer from './LabEditorSchemaViewerContainer.vue'
-import { AttributeSchemaUnion, EntityAttributeSchema, GlobalAttributeSchema } from '@/model/evitadb'
+import {
+    AttributeSchemaUnion,
+    AttributeUniquenessType,
+    EntityAttributeSchema,
+    GlobalAttributeSchema,
+    GlobalAttributeUniquenessType
+} from '@/model/evitadb'
 import { SchemaViewerDataPointer } from '@/model/editor/schema-viewer'
+import { ComplexFlagValue, KeywordValue, Property, PropertyValue } from '@/model/properties-table'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,
     schema: AttributeSchemaUnion
 }>()
 
-const globalAttribute = 'uniqueGlobally' in props.schema
+const globalAttribute = 'globalUniquenessType' in props.schema
 const entityAttribute = 'representative' in props.schema
 
-const properties: [string, any, ((item?: string) => void)?][] = []
-properties.push(['Type', props.schema.type])
-properties.push(['Description', props.schema.description])
-properties.push(['Deprecation notice', props.schema.deprecationNotice])
-if (entityAttribute) properties.push(['Representative', (props.schema as EntityAttributeSchema).representative as boolean])
-properties.push(['Unique', props.schema.unique as boolean])
-if (globalAttribute) properties.push(['Unique globally', (props.schema as GlobalAttributeSchema).uniqueGlobally as boolean])
-properties.push(['Filterable', props.schema.filterable as boolean])
-properties.push(['Sortable', props.schema.sortable as boolean])
-properties.push(['Localized', props.schema.localized as boolean])
-properties.push(['Nullable', props.schema.nullable as boolean])
-properties.push(['Default value', props.schema.defaultValue])
-properties.push(['Indexed decimal places', props.schema.indexedDecimalPlaces])
+const properties: Property[] = []
+properties.push({ name: 'Type', value: new PropertyValue(new KeywordValue(props.schema.type)) })
+properties.push({ name: 'Description', value: new PropertyValue(props.schema.description) })
+properties.push({ name: 'Deprecation notice', value: new PropertyValue(props.schema.deprecationNotice) })
+if (entityAttribute) properties.push({ name: 'Representative', value: new PropertyValue((props.schema as EntityAttributeSchema).representative as boolean ) })
+switch (props.schema.uniquenessType) {
+    case AttributeUniquenessType.NotUnique:
+        properties.push({ name: 'Unique', value: new PropertyValue(false) });
+        break
+    case AttributeUniquenessType.UniqueWithinCollection:
+        properties.push({
+            name: 'Unique',
+            value: new PropertyValue(new ComplexFlagValue(
+                'Within collection',
+                'The attribute value must be unique among all the entities of the same collection.'
+            ))
+        });
+        break
+    case AttributeUniquenessType.UniqueWithinCollectionLocale:
+        properties.push({
+            name: 'Unique',
+            value: new PropertyValue(new ComplexFlagValue(
+                'Within locale of collection',
+                'The localized attribute value must be unique among all values of the same locale among all the entities.'
+            ))
+        });
+        break
+}
+if (globalAttribute) {
+    switch ((props.schema as GlobalAttributeSchema).globalUniquenessType) {
+        case GlobalAttributeUniquenessType.NotUnique:
+            properties.push({ name: 'Globally unique', value: new PropertyValue(false) });
+            break
+        case GlobalAttributeUniquenessType.UniqueWithinCatalog:
+            properties.push({
+                name: 'Globally unique',
+                value: new PropertyValue(new ComplexFlagValue(
+                    'Within catalog',
+                    'The attribute value (either localized or non-localized) must be unique among all values among all the entities using this global attribute schema in the entire catalog.'
+                ))
+            });
+            break
+        case GlobalAttributeUniquenessType.UniqueWithinCatalogLocale:
+            properties.push({
+                name: 'Globally unique',
+                value: new PropertyValue(new ComplexFlagValue(
+                    'Within locale of catalog',
+                    'The localized attribute value must be unique among all values of the same locale among all the entities using this global attribute schema in the entire catalog.'
+                ))
+            });
+            break
+    }
+}
+properties.push({
+    name: 'Filterable',
+    value: new PropertyValue(
+        (globalAttribute && (props.schema as GlobalAttributeSchema).globalUniquenessType != GlobalAttributeUniquenessType.NotUnique) ||
+        props.schema.uniquenessType != AttributeUniquenessType.NotUnique ||
+        props.schema.filterable,
+        (
+            (globalAttribute && (props.schema as GlobalAttributeSchema).globalUniquenessType != GlobalAttributeUniquenessType.NotUnique) ||
+            props.schema.uniquenessType != AttributeUniquenessType.NotUnique
+        )
+            ? 'The attribute is automatically filterable because it is unique.'
+            : undefined
+    )
+})
+properties.push({ name: 'Sortable', value: new PropertyValue(props.schema.sortable as boolean) })
+properties.push({ name: 'Localized', value: new PropertyValue(props.schema.localized as boolean) })
+properties.push({ name: 'Nullable', value: new PropertyValue(props.schema.nullable as boolean) })
+properties.push({ name: 'Default value', value: new PropertyValue(props.schema.defaultValue) })
+properties.push({ name: 'Indexed decimal places', value: new PropertyValue(props.schema.indexedDecimalPlaces) })
 
 </script>
 

diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerCatalog.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerCatalog.vue
@@ -6,16 +6,17 @@ import LabEditorViewerAttributes from './LabEditorSchemaViewerAttributes.vue'
 import LabEditorViewerContainer from './LabEditorSchemaViewerContainer.vue'
 import LabEditorSchemaViewerEntities from './LabEditorSchemaViewerEntities.vue'
 import { CatalogSchema } from '@/model/evitadb'
+import { Property, PropertyValue } from '@/model/properties-table'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,
     schema: CatalogSchema
 }>()
 
-const baseProperties = ref<[string, any, ((item?: string) => void)?][]>([
+const baseProperties = ref<Property[]>([
     // todo lho i18n
-    ['Version', props.schema.version],
-    ['Description', props.schema.description]
+    { name: 'Version', value: new PropertyValue(props.schema.version) },
+    { name: 'Description', value: new PropertyValue(props.schema.description) }
 ])
 </script>
 

diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainer.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerContainer.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import VPropertiesTable from '@/components/base/VPropertiesTable.vue'
+import { Property } from '@/model/properties-table'
 
 const props = defineProps<{
-    properties: [string, any, ((item?: string) => void)?][]
+    properties: Property[]
 }>()
 </script>
 

diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerEntity.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerEntity.vue
@@ -7,24 +7,25 @@ import LabEditorViewerContainer from './LabEditorSchemaViewerContainer.vue'
 import LabEditorSchemaViewerAssociatedData from './LabEditorSchemaViewerAssociatedData.vue'
 import LabEditorSchemaViewerReferences from './LabEditorSchemaViewerReferences.vue'
 import { EntitySchema } from '@/model/evitadb'
+import { KeywordValue, Property, PropertyValue } from '@/model/properties-table'
 
 const props = defineProps<{
     dataPointer: SchemaViewerDataPointer,
     schema: EntitySchema
 }>()
 
-const baseProperties = ref<[string, any, ((item?: string) => void)?][]>([
+const baseProperties = ref<Property[]>([
     // todo lho i18n
-    ['Version', props.schema.version],
-    ['Description', props.schema.description],
-    ['Deprecation notice', props.schema.deprecationNotice],
-    ['Locales', props.schema.locales],
-    ['Currencies', props.schema.currencies],
-    ['Generated primary key', props.schema.withGeneratedPrimaryKey],
-    ['Hierarchical', props.schema.withHierarchy],
-    ['Prices', props.schema.withPrice],
-    ['Indexed decimal places', props.schema.indexedPricePlaces],
-    ['Evolution modes', props.schema.evolutionMode]
+    { name: 'Version', value: new PropertyValue(props.schema.version) },
+    { name: 'Description', value: new PropertyValue(props.schema.description) },
+    { name: 'Deprecation notice', value: new PropertyValue(props.schema.deprecationNotice) },
+    { name: 'Locales', value: props.schema.locales.map(locale => new PropertyValue(new KeywordValue(locale))) },
+    { name: 'Currencies', value: props.schema.currencies.map(currency => new PropertyValue(new KeywordValue(currency))) },
+    { name: 'Generated primary key', value: new PropertyValue(props.schema.withGeneratedPrimaryKey) },
+    { name: 'Hierarchical', value: new PropertyValue(props.schema.withHierarchy) },
+    { name: 'Prices', value: new PropertyValue(props.schema.withPrice) },
+    { name: 'Indexed decimal places', value: new PropertyValue(props.schema.indexedPricePlaces) },
+    { name: 'Evolution modes', value: props.schema.evolutionMode.map(mode => new PropertyValue(new KeywordValue(mode))) }
 ])
 </script>
 

diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerNameVariants.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewerNameVariants.vue
@@ -2,6 +2,7 @@
 import LabEditorSchemaViewerContainerSection from './LabEditorSchemaViewerContainerSection.vue'
 import { NameVariants } from '@/model/evitadb'
 import VPropertiesTable from '@/components/base/VPropertiesTable.vue'
+import { Property, PropertyValue } from '@/model/properties-table'
 
 const props = withDefaults(defineProps<{
     prefix?: string,
@@ -12,12 +13,12 @@ const props = withDefaults(defineProps<{
 
 const name = props.prefix ? `${props.prefix} name variants` : 'Name variants'
 
-const properties: [string, any, ((item?: string) => void)?][] = [
-    ['camelCase', props.nameVariants.camelCase as String],
-    ['kebab-case', props.nameVariants.kebabCase as String],
-    ['PascalCase', props.nameVariants.pascalCase as String],
-    ['snake_case', props.nameVariants.snakeCase as String],
-    ['UPPER_CASE', props.nameVariants.upperSnakeCase as String]
+const properties: Property[] = [
+    { name: 'camelCase', value: new PropertyValue(props.nameVariants.camelCase) },
+    { name: 'kebab-case', value: new PropertyValue(props.nameVariants.kebabCase) },
+    { name: 'PascalCase', value: new PropertyValue(props.nameVariants.pascalCase) },
+    { name: 'snake_case', value: new PropertyValue(props.nameVariants.snakeCase) },
+    { name: 'UPPER_CASE', value: new PropertyValue(props.nameVariants.upperSnakeCase) }
 ]
 </script>