Merge pull request #30 from smartlabsAT/feature/issue-29-fix-relational-status-display

Fix relational fields with display templates showing dashes instead of configured values

Author: smartlabsAT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-super-table",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "A powerful and feature-rich table layout extension for Directus 11+ with inline editing, quick filters, and manual sorting",
   "keywords": [
     "directus",

src/components/EditableCellRelational.vue

@@ -66,32 +66,9 @@
         :field="actualFieldKey"
         :alignment="align"
       />
-      <!-- Use custom RelationalCell for relational fields -->
-      <RelationalCell
-        v-else-if="isRelationalInterface && !getInterfaceType()?.includes('select')"
-        :value="value"
-        :field="actualFieldKey"
-        :item="item"
-      />
-      <!-- Use custom StatusCell for status field -->
-      <StatusCell
-        v-else-if="actualFieldKey === 'status' && getInterfaceType() === 'select-dropdown'"
-        :value="value"
-        :options="interfaceOptions"
-        :field="actualFieldKey"
-        :edit-mode="props.editMode"
-        :align="props.align"
-      />
-      <!-- Use custom SelectCell for other select-dropdown interfaces -->
-      <SelectCell
-        v-else-if="getInterfaceType() === 'select-dropdown'"
-        :value="value"
-        :options="interfaceOptions"
-        :field="actualFieldKey"
-      />
-      <!-- Use render-display for other types -->
+      <!-- ABSOLUTE PRIORITY: User-configured display templates (ALL field types) -->
       <render-display
-        v-else
+        v-if="field?.display"
         :value="value"
         :display="field?.display"
         :options="field?.displayOptions"
@@ -101,31 +78,51 @@
         :collection="field?.collection"
         :field="field?.field"
       />
+      <!-- FALLBACK 1: Custom SelectCell for select-dropdown fields WITHOUT display template -->
+      <SelectCell
+        v-else-if="getInterfaceType() === 'select-dropdown'"
+        :value="value"
+        :options="interfaceOptions"
+        :field="actualFieldKey"
+      />
+      <!-- FALLBACK 2: Custom RelationalCell for relational fields WITHOUT display template -->
+      <RelationalCell
+        v-else-if="isRelationalInterface"
+        :value="value"
+        :field="actualFieldKey"
+        :item="item"
+      />
+      <!-- FINAL FALLBACK: Raw value display for fields without any special handling -->
+      <span v-else class="raw-value">
+        {{ value != null ? String(value) : '—' }}
+      </span>
     </template>
   </InlineEditPopover>
 
-  <!-- Display only for relational fields -->
+  <!-- ABSOLUTE PRIORITY: Display templates for relational fields -->
+  <div
+    v-else-if="field?.display"
+    class="editable-cell relational"
+    :style="{ textAlign: props.align || 'left' }"
+  >
+    <!-- Direct Display Value (already rendered in computed) -->
+    <span class="template-display">{{ displayValue }}</span>
+  </div>
+
+  <!-- FALLBACK: Display only for relational fields without display templates -->
   <div v-else class="editable-cell relational" :style="{ textAlign: props.align || 'left' }">
-    <render-display
-      :value="displayValue"
-      :display="field?.display"
-      :options="field?.displayOptions"
-      :interface="field?.interface"
-      :interface-options="field?.interfaceOptions"
-      :type="field?.type"
-      :collection="field?.collection"
-      :field="field?.field"
-    />
+    <span class="raw-value">
+      {{ displayValue != null ? String(displayValue) : '—' }}
+    </span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onBeforeMount, markRaw, ref } from 'vue';
 import type { Field, Item } from '@directus/types';
 import InlineEditPopover from './InlineEditPopover.vue';
 import BooleanToggleCell from './CellRenderers/BooleanToggleCell.vue';
 import SelectCell from './CellRenderers/SelectCell.vue';
-import StatusCell from './CellRenderers/StatusCell.vue';
 import ImageCell from './CellRenderers/ImageCell.vue';
 import RelationalCell from './CellRenderers/RelationalCell.vue';
 import ColorCell from './CellRenderers/ColorCell.vue';
@@ -151,6 +148,21 @@ const emit = defineEmits<{
   'navigate-prev': [];
 }>();
 
+// Simple cache for relational objects - only cache on mount to avoid corruption
+const relationalCache = ref<Record<string, any>>({});
+
+onBeforeMount(() => {
+  // Cache relational objects once on mount
+  if (props.item) {
+    Object.keys(props.item).forEach((key) => {
+      const value = props.item[key];
+      if (value && typeof value === 'object' && value !== null) {
+        relationalCache.value[key] = markRaw(value);
+      }
+    });
+  }
+});
+
 // Computed
 const primaryKeyField = computed(() => {
   return Object.keys(props.item).find((key) => key === 'id' || key.endsWith('_id')) || 'id';
@@ -206,6 +218,28 @@ const displayValue = computed(() => {
     return null;
   }
 
+  // Handle relational fields with display templates
+  const template =
+    props.field?.displayOptions?.template || props.field?.meta?.display_options?.template;
+
+  if (template && props.field?.display) {
+    const relationalValue = props.item[props.fieldKey];
+
+    // If we have an object, use it
+    if (relationalValue && typeof relationalValue === 'object') {
+      return renderTemplate(relationalValue, template);
+    }
+
+    // If corrupted (primitive value), try cache fallback
+    const cachedValue = relationalCache.value[props.fieldKey];
+    if (cachedValue) {
+      return renderTemplate(cachedValue, template);
+    }
+
+    // No data available
+    return '—';
+  }
+
   // For other relational fields, use the aliased getter if provided
   if (props.getDisplayValue) {
     return props.getDisplayValue(props.item, props.fieldKey);
@@ -335,6 +369,35 @@ function getInterfaceType() {
   return props.field?.interface || props.field?.meta?.interface;
 }
 
+// Manual Template Rendering - Production Fix for render-display issue
+function renderTemplate(value: any, template: string): string {
+  if (!template || template === null || template === undefined) {
+    // No template - return formatted value
+    return value != null ? String(value) : '—';
+  }
+
+  if (!value) {
+    return '—';
+  }
+
+  // Handle object values for related fields
+  if (typeof value === 'object' && value !== null) {
+    let result = template;
+
+    // Replace template variables with actual values
+    Object.keys(value).forEach((key) => {
+      const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g');
+      const fieldValue = value[key];
+      result = result.replace(regex, fieldValue != null ? String(fieldValue) : '');
+    });
+
+    return result;
+  }
+
+  // Handle simple values - replace all template vars with the same value
+  return template.replace(/\{\{.*?\}\}/g, String(value));
+}
+
 function handleUpdate(value: any) {
   const primaryKey = Object.keys(props.item).find((key) => key === 'id' || key.endsWith('_id'));
 

src/super-table.vue

@@ -275,7 +275,6 @@ import { debounce } from 'lodash';
 import { useStores, useCollection, useSync, useApi } from '@directus/extensions-sdk';
 import { formatTitle } from '@directus/format-title';
 import { getDefaultDisplayForType } from './utils/getDefaultDisplayForType';
-import { adjustFieldsForDisplays } from './utils/adjustFieldsForDisplays';
 import { useTableApi } from './composables/api';
 import { useAliasFields } from './composables/useAliasFields';
 import { useLanguageSelector } from './composables/useLanguageSelector';
@@ -442,23 +441,22 @@ const fieldsForAliasing = computed(() => {
 });
 
 // Use alias fields for proper relational data handling
-const { aliasQuery, getFromAliasedItem } = useAliasFields(fieldsForAliasing, collection);
+const { aliasedFields, aliasQuery, getFromAliasedItem } = useAliasFields(
+  fieldsForAliasing,
+  collection
+);
 
-// Adjust fields for displays
+// Create fields for API query using the aliased fields (following original Directus pattern)
 const fieldsWithRelational = computed(() => {
   if (!props.collection) return [];
 
-  // Get unique fields without language suffixes for API query
-  // We fetch all translation data and filter client-side by language
-  const uniqueFields = [
-    ...new Set(
-      fields.value.map((field: string) => {
-        return field.includes(':') ? field.split(':')[0] : field;
-      })
-    ),
-  ];
+  // Extract all fields from aliasedFields (this includes display-adjusted fields)
+  const allDisplayFields = Object.values(aliasedFields.value).flatMap((aliasInfo) => {
+    return aliasInfo.fields || [aliasInfo.key];
+  });
 
-  const adjustedFields: string[] = adjustFieldsForDisplays(uniqueFields, props.collection);
+  // Remove duplicates
+  const adjustedFields = [...new Set(allDisplayFields)];
 
   // CRITICAL: Always include the primary key field for navigation and identification
   const pkField = getPrimaryKeyFieldName();
@@ -585,7 +583,7 @@ const tableHeaders = computed(() => {
       ? true
       : !field.type || !nonSortableTypes.includes(field.type);
 
-    return {
+    const headerResult = {
       text: headerText,
       value: field.key,
       description,
@@ -603,6 +601,8 @@ const tableHeaders = computed(() => {
       },
       sortable: isSortable,
     };
+
+    return headerResult;
   });
 });
 
@@ -804,6 +804,7 @@ const deep = computed(() => {
     // Remove language suffix if present
     const actualField = field.includes(':') ? field.split(':')[0] : field;
 
+    // Handle dot-notation relational fields (like "user_created.first_name")
     if (actualField.includes('.')) {
       const parts = actualField.split('.');
       const rootField = parts[0];
@@ -824,6 +825,23 @@ const deep = computed(() => {
           };
         }
       }
+    } else {
+      // Handle pure relational fields (like "image_data", "status_id", etc.)
+      // Check if this field is relational by looking at field metadata
+      const fieldMeta = fieldsStore.getField(collection.value, actualField);
+
+      if (
+        fieldMeta?.meta?.special?.includes('m2o') ||
+        fieldMeta?.meta?.special?.includes('o2m') ||
+        fieldMeta?.meta?.special?.includes('m2m') ||
+        fieldMeta?.meta?.special?.includes('m2a')
+      ) {
+        if (!deepFields[actualField]) {
+          deepFields[actualField] = {
+            _fields: ['*'],
+          };
+        }
+      }
     }
   });