Merge pull request #40 from smartlabsAT/feature/issue-39-custom-language-field

feat: add configurable language code field support (Issue #39)

Author: smartlabsAT

CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to the Super Layout Table Extension will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.16] - 2025-11-20
+
+### Added
+- Added configurable language code field support for translation collections (Issue #39)
+- New `languageCodeField` layout option to specify custom field names instead of hardcoded 'languages_code'
+- UI field in options panel to configure the language code field name
+
+### Fixed
+- Fixed layout crash when translation collection uses a custom language code field name
+- Extension now supports any field name for language identification in translations
+
+### Changed
+- Refactored all components to use configurable language code field via `useTranslationConfig` composable
+- Updated `super-table.vue`, `api.ts`, `useTableEdits.ts`, `EditableCellRelational.vue`, and `InlineEditPopover.vue`
+- Maintains backward compatibility with default 'languages_code' field name
+
 ## [0.2.15] - 2025-10-27
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-super-table",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "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

@@ -23,6 +23,7 @@
     :is-editable="isFieldEditableComputed"
     :is-relational="false"
     :auto-save="false"
+    :language-code-field="props.languageCodeField"
     :saving="saving"
     :collection="item?.collection || field?.collection"
     :primary-key-value="(item?.[primaryKeyField] || item?.id) ?? undefined"
@@ -141,6 +142,7 @@ const props = defineProps<{
   align?: 'left' | 'center' | 'right';
   directBooleanToggle?: boolean;
   primaryKeyFieldName?: string;
+  languageCodeField?: string;
 }>();
 
 const emit = defineEmits<{
@@ -218,8 +220,9 @@ const displayValue = computed(() => {
       const targetLanguage = fieldLanguage.value;
 
       if (targetLanguage) {
+        const languageField = props.languageCodeField || 'languages_code';
         const translation = props.item.translations.find(
-          (t: any) => t.languages_code === targetLanguage
+          (t: any) => t[languageField] === targetLanguage
         );
 
         // Return the specific field value if translation exists

src/components/InlineEditPopover.vue

@@ -420,6 +420,7 @@ interface Props {
   fieldSupportLevel?: 'full' | 'partial' | 'none' | 'readonly';
   editModeActive?: boolean;
   fieldEditWarning?: string;
+  languageCodeField?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -696,8 +697,9 @@ function formatDisplayValue(value: any): string {
   if (Array.isArray(value)) {
     if (value.length === 0) return '[]';
     // For translations array, show language codes
-    if (value[0]?.languages_code) {
-      const langs = value.map((t) => t.languages_code).join(', ');
+    const languageField = props.languageCodeField || 'languages_code';
+    if (value[0]?.[languageField]) {
+      const langs = value.map((t) => t[languageField]).join(', ');
       return `[${value.length}] ${langs}`;
     }
     return `[${value.length} items]`;

src/composables/api.ts

@@ -101,12 +101,13 @@ export function useTableApi() {
     collection: string,
     primaryKey: string | number,
     field: string,
-    value: any
+    value: any,
+    languageCodeField = 'languages_code'
   ): Promise<void> {
     try {
       // Handle translation updates specially
       if (typeof value === 'object' && value?.isTranslation) {
-        await updateTranslation(collection, primaryKey, value);
+        await updateTranslation(collection, primaryKey, value, languageCodeField);
       } else if (typeof value === 'object' && value?.isFullTranslations) {
         // Handle full translations update from interface-translations
         await api.patch(`/items/${collection}/${primaryKey}`, {
@@ -131,7 +132,8 @@ export function useTableApi() {
   async function updateTranslation(
     collection: string,
     primaryKey: string | number,
-    translationData: any
+    translationData: any,
+    languageCodeField = 'languages_code'
   ): Promise<void> {
     // Get current item with translations
     const currentItem = await api.get(`/items/${collection}/${primaryKey}`, {
@@ -144,7 +146,7 @@ export function useTableApi() {
 
     // Find or create translation for the language
     const translationIndex = existingTranslations.findIndex(
-      (t: any) => t.languages_code === translationData.language
+      (t: any) => t[languageCodeField] === translationData.language
     );
 
     if (translationIndex >= 0) {
@@ -154,7 +156,7 @@ export function useTableApi() {
     } else {
       // Create new translation
       existingTranslations.push({
-        languages_code: translationData.language,
+        [languageCodeField]: translationData.language,
         [translationData.translationField]: translationData.value,
       });
     }

src/composables/useTableEdits.ts

@@ -7,7 +7,8 @@ export function useTableEdits(
   collection: Ref<string>,
   primaryKeyField: Ref<Field | undefined>,
   items: Ref<any[]>,
-  getItems: () => Promise<void>
+  getItems: () => Promise<void>,
+  languageCodeField = 'languages_code'
 ) {
   const tableApi = useTableApi();
   const edits = ref<Edits>({});
@@ -55,13 +56,13 @@ export function useTableEdits(
             // Build translation update structure
             const existingTranslations = item.translations || [];
             const translationForLang = existingTranslations.find(
-              (t: any) => t.languages_code === value.language
+              (t: any) => t[languageCodeField] === value.language
             );
 
             if (translationForLang) {
               // Update existing translation
               updatePayload.translations = existingTranslations.map((t: any) => {
-                if (t.languages_code === value.language) {
+                if (t[languageCodeField] === value.language) {
                   return {
                     ...t,
                     [value.translationField]: value.value,
@@ -74,7 +75,7 @@ export function useTableEdits(
               updatePayload.translations = [
                 ...existingTranslations,
                 {
-                  languages_code: value.language,
+                  [languageCodeField]: value.language,
                   [value.translationField]: value.value,
                 },
               ];
@@ -90,12 +91,18 @@ export function useTableEdits(
       for (const [field, value] of Object.entries(updatePayload)) {
         if (field === 'translations') {
           // For full translations update
-          await tableApi.updateItem(collection.value, itemId, 'translations', {
-            isFullTranslations: true,
-            translations: value,
-          });
+          await tableApi.updateItem(
+            collection.value,
+            itemId,
+            'translations',
+            {
+              isFullTranslations: true,
+              translations: value,
+            },
+            languageCodeField
+          );
         } else {
-          await tableApi.updateItem(collection.value, itemId, field, value);
+          await tableApi.updateItem(collection.value, itemId, field, value, languageCodeField);
         }
       }
 

src/composables/useTranslationConfig.ts

@@ -0,0 +1,56 @@
+import { computed, ComputedRef } from 'vue';
+
+/**
+ * Translation configuration interface
+ */
+export interface TranslationConfig {
+  languageCodeField: string;
+}
+
+/**
+ * Default translation configuration
+ */
+const DEFAULT_CONFIG: TranslationConfig = {
+  languageCodeField: 'languages_code',
+};
+
+/**
+ * Composable for managing translation configuration
+ * This allows users to specify custom field names for language codes
+ * instead of being forced to use 'languages_code'
+ *
+ * @param layoutOptions - The layout options from the parent component
+ * @returns Translation configuration object
+ */
+export function useTranslationConfig(
+  layoutOptions: ComputedRef<Record<string, any>> | Record<string, any>
+): ComputedRef<TranslationConfig> {
+  return computed(() => {
+    const options = 'value' in layoutOptions ? layoutOptions.value : layoutOptions;
+
+    return {
+      languageCodeField: options?.languageCodeField || DEFAULT_CONFIG.languageCodeField,
+    };
+  });
+}
+
+/**
+ * Helper function to get the language code field name
+ * This is used throughout the extension to access the correct field
+ *
+ * @param config - Translation configuration
+ * @returns The field name to use for language codes
+ */
+export function getLanguageCodeField(config: TranslationConfig): string {
+  return config.languageCodeField;
+}
+
+/**
+ * Helper function to build the full field path for translations
+ *
+ * @param config - Translation configuration
+ * @returns The full field path (e.g., 'translations.languages_code')
+ */
+export function getTranslationLanguageFieldPath(config: TranslationConfig): string {
+  return `translations.${config.languageCodeField}`;
+}

src/options.vue

@@ -16,6 +16,23 @@
       label="Enable direct boolean field editing (single-click toggle without popover)"
     />
   </div>
+
+  <div class="field">
+    <label class="type-label">Language Code Field</label>
+    <v-input v-model="languageCodeField" placeholder="languages_code">
+      <template #append>
+        <v-icon
+          v-tooltip="
+            'The field name used to identify languages in translation collections. Default: languages_code'
+          "
+          name="help"
+        />
+      </template>
+    </v-input>
+    <div class="hint">
+      Custom field name for language codes in translation collections (default: 'languages_code')
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -32,6 +49,7 @@ interface LayoutOptions {
   customFieldNames?: Record<string, string>;
   widths?: Record<string, number>;
   align?: Record<string, 'left' | 'center' | 'right'>;
+  languageCodeField?: string;
 }
 
 const props = defineProps<{
@@ -72,6 +90,16 @@ const directBooleanToggle = computed({
     };
   },
 });
+
+const languageCodeField = computed({
+  get: () => layoutOptions.value?.languageCodeField || 'languages_code',
+  set: (val) => {
+    layoutOptions.value = {
+      ...layoutOptions.value,
+      languageCodeField: val || undefined, // Store undefined if empty to use default
+    };
+  },
+});
 </script>
 
 <style scoped>
@@ -90,4 +118,11 @@ const directBooleanToggle = computed({
 .v-notice {
   margin-top: var(--form-vertical-gap);
 }
+
+.hint {
+  margin-top: 4px;
+  color: var(--foreground-subdued);
+  font-size: 12px;
+  line-height: 1.4;
+}
 </style>

src/super-table.vue

@@ -210,6 +210,7 @@
           :align="header.align"
           :direct-boolean-toggle="(layoutOptions as any)?.directBooleanToggle"
           :primary-key-field-name="getPrimaryKeyFieldName()"
+          :language-code-field="translationConfig.languageCodeField"
           @update="updateFieldValue"
           @save="autoSaveEdits"
         />
@@ -286,6 +287,10 @@ import { useTableEdits } from './composables/useTableEdits';
 import { useTablePagination } from './composables/useTablePagination';
 import { useTableFields } from './composables/useTableFields';
 import { useFilterPresets } from './composables/useFilterPresets';
+import {
+  useTranslationConfig,
+  getTranslationLanguageFieldPath,
+} from './composables/useTranslationConfig';
 import { PER_PAGE_OPTIONS } from './constants/pagination';
 import { DEFAULT_LANGUAGES } from './constants/languages';
 import EditableCellRelational from './components/EditableCellRelational.vue';
@@ -399,6 +404,9 @@ const hasTranslationFields = computed(() => {
   return fields.value.some((field: string) => field.startsWith('translations.'));
 });
 
+// Translation configuration
+const translationConfig = useTranslationConfig(layoutOptions);
+
 // Layout Options
 const showToolbar = computed(() => layoutOptions.value?.showToolbar !== false);
 // Default to true for filters
@@ -482,9 +490,10 @@ const fieldsWithRelational = computed(() => {
     adjustedFields.unshift(pkField); // Add at the beginning
   }
 
-  // Ensure languages_code is included for translations
-  if (hasTranslationFields.value && !adjustedFields.includes('translations.languages_code')) {
-    adjustedFields.push('translations.languages_code');
+  // Ensure language code field is included for translations
+  const languageFieldPath = getTranslationLanguageFieldPath(translationConfig.value);
+  if (hasTranslationFields.value && !adjustedFields.includes(languageFieldPath)) {
+    adjustedFields.push(languageFieldPath);
   }
 
   return adjustedFields;
@@ -1046,7 +1055,8 @@ const { edits, savingCells, updateFieldValue, autoSaveEdits } = useTableEdits(
   collection,
   computed(() => primaryKeyField?.value || (primaryKeyField as any) || undefined),
   items,
-  getItems
+  getItems,
+  translationConfig.value.languageCodeField
 );
 
 // Field management

src/types/table.types.ts

@@ -25,6 +25,7 @@ export interface LayoutOptions {
   directBooleanToggle?: boolean;
   quickFilters?: QuickFilter[];
   activeQuickFilterId?: string;
+  languageCodeField?: string; // Custom field name for language codes (default: 'languages_code')
 }
 
 export interface LayoutQuery {