@5minds/node-red-dashboard-2-processcube-dynamic-table 2.0.3-develop-8a7c9e-mets8ufl → 2.0.3-develop-e1e056-mewuxjwr

package/ui/components/UIDynamicTable.vue

@@ -1,46 +1,63 @@
 <template>
     <div class="ui-dynamic-table-container">
-        <UIDynamicTableTitleText v-if="props.title_text && props.title_text.length > 0" :title="props.title_text"
-            :style="props.title_style || 'default'" :customStyles="props.title_custom_text_styling || ''"
-            :titleIcon="props.title_icon || ''" />
-        
+        <UIDynamicTableTitleText
+            v-if="props.title_text && props.title_text.length > 0"
+            :title="props.title_text"
+            :style="props.title_style || 'default'"
+            :customStyles="props.title_custom_text_styling || ''"
+            :titleIcon="props.title_icon || ''"
+        />
+
         <!-- Search and Reload Controls -->
         <v-toolbar flat class="pb-4 pt-8">
-            <v-text-field 
-                class="search-input" 
+            <v-text-field
+                class="search-input"
                 :class="{ 'mobile-search': isMobile }"
-                v-model="search" 
+                v-model="search"
                 label="Suchen"
-                prepend-inner-icon="mdi-magnify" 
-                variant="outlined" 
-                hide-details 
-                single-line>
+                prepend-inner-icon="mdi-magnify"
+                variant="outlined"
+                hide-details
+                single-line
+            >
             </v-text-field>
-            <v-btn class="reload-button ml-4" @click="reloadData" :disabled="isReloading" size="small"
-                variant="outlined">
+            <v-btn
+                class="reload-button ml-4"
+                @click="reloadData"
+                :disabled="isReloading"
+                size="small"
+                variant="outlined"
+            >
                 <v-icon left :class="{ 'reload-spin': isReloading }">mdi-refresh</v-icon>
             </v-btn>
         </v-toolbar>
 
         <!-- Desktop Table View -->
-        <v-data-table 
+        <v-data-table
             v-show="!isMobile"
-            :headers="headers" 
-            :items="filteredTasks" 
+            :headers="headers"
+            :items="filteredTasks"
             :sort-by="sortBy"
-            :items-per-page="itemsPerPage" 
-            :items-per-page-options="itemsPerPageOptions" 
+            :items-per-page="itemsPerPage"
+            :items-per-page-options="itemsPerPageOptions"
             @update:sort-by="updateSortBy"
-            @update:items-per-page="updateItemsPerPage" 
-            class="full-width-table">
-            
+            @update:items-per-page="updateItemsPerPage"
+            class="full-width-table"
+        >
             <template v-slot:item.actions="{ item }">
                 <v-container class="action-button-container">
-                    <v-container v-for="(action, index) in actions"
-                        style="padding: 0px; display: inline; width: fit-content; margin: 0px">
-                        <v-btn style="margin: 0px 2px" class="action-button"
-                            v-if="action && conditionCheck(action.condition, item)" :key="index" size="small"
-                            @click="actionFn(action, item)">
+                    <v-container
+                        v-for="(action, index) in actions"
+                        style="padding: 0px; display: inline; width: fit-content; margin: 0px"
+                        :key="index"
+                    >
+                        <v-btn
+                            style="margin: 0px 2px"
+                            class="action-button"
+                            v-if="action && conditionCheck(action.condition, item)"
+                            size="small"
+                            @click="actionFn(action, item)"
+                        >
                             {{ getActionLabel(action, item) }}
                         </v-btn>
                     </v-container>
@@ -53,12 +70,13 @@
 
         <!-- Mobile Cards View -->
         <div v-show="isMobile" class="mobile-cards-container">
-            <v-card 
-                v-for="(item, index) in paginatedTasksForMobile" 
-                :key="index" 
-                class="mobile-card ma-2" 
+            <v-card
+                v-for="(item, index) in paginatedTasksForMobile"
+                :key="index"
+                class="mobile-card ma-2"
                 variant="outlined"
-                elevation="2">
+                elevation="2"
+            >
                 <v-card-text class="pb-2">
                     <div v-for="header in dataHeaders" :key="header.key" class="mobile-card-row">
                         <span class="mobile-card-label">{{ header.title }}:</span>
@@ -66,26 +84,27 @@
                     </div>
                 </v-card-text>
                 <v-card-actions v-if="actions && actions.length > 0" class="pt-0 px-2 pb-2 d-flex">
-                    <v-btn 
+                    <v-btn
                         v-for="(action, actionIndex) in visibleActionsForMobile"
-                        :key="actionIndex" 
+                        :key="actionIndex"
                         size="x-small"
                         color="primary"
                         variant="flat"
                         class="flex-grow-1 mx-1"
-                        style="min-height: 28px; height: 28px; font-size: 0.75rem;"
-                        @click="actionFn(action, item)">
+                        style="min-height: 28px; height: 28px; font-size: 0.75rem"
+                        @click="actionFn(action, item)"
+                    >
                         {{ getActionLabel(action, item) }}
                     </v-btn>
                 </v-card-actions>
             </v-card>
-            
+
             <!-- No Data Alert for Mobile -->
             <v-alert v-if="paginatedTasksForMobile.length === 0" text="Keine Daten" class="ma-2"></v-alert>
         </div>
 
         <!-- Pagination for Mobile -->
-        <v-pagination 
+        <v-pagination
             v-if="isMobile && filteredTasks.length > itemsPerPage"
             v-model="currentPage"
             :length="Math.ceil(filteredTasks.length / itemsPerPage)"
@@ -96,13 +115,14 @@
 
 <script>
 import { mapState } from 'vuex';
-import UIDynamicTableTitleText from './TitleText.vue'
+import UIDynamicTableTitleText from './TitleText.vue';
 import { debounce } from 'lodash';
+import jsonata from 'jsonata';
 
 export default {
     name: 'UIDynamicTable',
     components: {
-        UIDynamicTableTitleText
+        UIDynamicTableTitleText,
     },
     inject: ['$socket'],
     props: {
@@ -128,45 +148,49 @@ export default {
             return this.$vuetify.display.mobile;
         },
         dataHeaders() {
-            return this.headers.filter(header => header.key !== 'actions');
+            return this.headers.filter((header) => header.key !== 'actions');
         },
         filteredTasks() {
             let filtered = this.tasks;
-            
+
             // Apply search filter
             if (this.search && this.search.trim() !== '') {
                 const searchTerm = this.search.toLowerCase();
-                filtered = filtered.filter(item => {
-                    return this.dataHeaders.some(header => {
+                filtered = filtered.filter((item) => {
+                    return this.dataHeaders.some((header) => {
                         const value = item[header.key];
                         return value && value.toString().toLowerCase().includes(searchTerm);
                     });
                 });
             }
-            
+
             // Don't apply pagination here - let v-data-table handle it for desktop
             // For mobile, we'll handle pagination separately
             return filtered;
         },
         paginatedTasksForMobile() {
             if (!this.isMobile) return this.filteredTasks;
-            
+
             const startIndex = (this.currentPage - 1) * this.itemsPerPage;
             const endIndex = startIndex + this.itemsPerPage;
             return this.filteredTasks.slice(startIndex, endIndex);
         },
         visibleActionsForMobile() {
-            return this.actions.filter(action => {
+            return this.actions.filter((action) => {
                 if (!action) return false;
-                
+
                 // If no condition or empty condition, show the action
                 if (!action.condition || action.condition === '') return true;
-                
+
                 // For conditions, we'll show all actions and let the click handler deal with it
                 // This avoids the Vue reactivity issue with calling conditionCheck in template
                 return true;
             });
-        }
+        },
+        // Computed property to ensure reactivity to message changes
+        currentMessage() {
+            return this.messages[this.id] || {};
+        },
     },
     data() {
         return {
@@ -185,8 +209,10 @@ export default {
                 { value: 25, title: '25' },
                 { value: 50, title: '50' },
                 { value: 100, title: '100' },
-                { value: -1, title: 'All' }
+                { value: -1, title: 'All' },
             ],
+            // Store JSONata evaluation results for each action-row combination
+            jsonataResults: new Map(),
         };
     },
     mounted() {
@@ -233,7 +259,7 @@ export default {
                     return; // Don't execute if condition fails
                 }
             }
-            
+
             const msg = this.messages[this.id] || {};
             msg.payload = item;
             this.send(
@@ -242,8 +268,29 @@ export default {
             );
         },
         initialize(msg) {
+            // Handle null or undefined messages
+            if (!msg) {
+                this.tasks = [];
+                this.actions = (this.props.options || []).filter((action) => action != null);
+                this.headers = (this.props.columns || []).map((item) => ({
+                    title: item.label,
+                    key: item.value,
+                }));
+                this.headers.push({
+                    title: '',
+                    align: 'center',
+                    key: 'actions',
+                    sortable: false,
+                });
+                // Clear JSONata results cache
+                this.jsonataResults.clear();
+                return;
+            }
+
             this.tasks = msg.payload || [];
-            this.actions = (this.props.options || []).filter(action => action != null);
+
+            // Always use props.options for frontend-only evaluation
+            this.actions = (this.props.options || []).filter((action) => action != null);
 
             this.headers = (this.props.columns || []).map((item) => ({
                 title: item.label,
@@ -254,22 +301,138 @@ export default {
                 title: '',
                 align: 'center',
                 key: 'actions',
-                sortable: false
+                sortable: false,
             });
+
+            // Clear JSONata results cache when new data arrives
+            this.jsonataResults.clear();
         },
         getActionLabel(action, item) {
-            if (action.label && (action.label.startsWith('msg.') || action.label.startsWith('item.'))) {
+            // Handle typed input system
+            if (action.label_type) {
+                switch (action.label_type) {
+                    case 'str':
+                        return action.label || '';
+
+                    case 'msg':
+                        if (action.label) {
+                            const msgData = this.messages[this.id] || {};
+                            return this.getNestedProperty(msgData, action.label) || '';
+                        }
+                        return '';
+
+                    case 'row':
+                        if (action.label) {
+                            return this.getNestedProperty(item, action.label) || '';
+                        }
+                        return '';
+
+                    case 'jsonata':
+                        // For JSONata, check if we have the expression from backend
+                        const msgData = this.messages[this.id] || {};
+                        const actionIndex = this.actions.indexOf(action);
+
+                        if (msgData._jsonataLabels && msgData._jsonataLabels[actionIndex]) {
+                            const result = this.evaluateJsonata(msgData._jsonataLabels[actionIndex], msgData, item);
+                            return result || '';
+                        }
+                        return action.label || '';
+
+                    default:
+                        return action.label || '';
+                }
+            }
+
+            // Fallback to legacy handling for backward compatibility
+            const legacy = this.evaluateLegacyLabel(action, item);
+            return legacy || action.label || '';
+        },
+
+        getNestedProperty(obj, path) {
+            if (!path) return '';
+
+            const keys = path.split('.');
+            let current = obj;
+
+            for (const key of keys) {
+                if (current && typeof current === 'object' && key in current) {
+                    current = current[key];
+                } else {
+                    return path; // Return original path as fallback
+                }
+            }
+
+            return current !== undefined && current !== null ? String(current) : path;
+        },
+
+        evaluateJsonata(expression, msgData, rowData) {
+            try {
+                // Create a unique key for this evaluation using expression and a hash of row data
+                const rowHash = JSON.stringify(rowData).slice(0, 50); // Truncate for performance
+                const key = `${expression}_${rowHash}`;
+
+                // Check if we already have a result for this combination
+                if (this.jsonataResults.has(key)) {
+                    return this.jsonataResults.get(key);
+                }
+
+                // Create a combined context with both message and row data
+                const context = {
+                    ...msgData,
+                    $: rowData,
+                    payload: msgData.payload,
+                    msg: msgData,
+                };
+
+                const expr = jsonata(expression);
+                const result = expr.evaluate(context);
+
+                // Handle Promise return from JSONata
+                if (result && typeof result.then === 'function') {
+                    // Store a pending indicator first
+                    this.jsonataResults.set(key, expression);
+
+                    // Handle the Promise
+                    result
+                        .then((resolvedValue) => {
+                            const finalValue =
+                                resolvedValue !== undefined && resolvedValue !== null ? String(resolvedValue) : '';
+                            this.jsonataResults.set(key, finalValue);
+                            this.$forceUpdate();
+                        })
+                        .catch((error) => {
+                            console.warn('JSONata Promise evaluation error:', error.message);
+                            this.jsonataResults.set(key, expression);
+                            this.$forceUpdate();
+                        });
+
+                    return expression; // Return expression as placeholder
+                }
+
+                // Synchronous result
+                const finalValue = result !== undefined && result !== null ? String(result) : '';
+                this.jsonataResults.set(key, finalValue);
+                return finalValue;
+            } catch (error) {
+                console.warn('JSONata evaluation error:', error.message);
+                return expression; // fallback to original expression
+            }
+        },
+
+        evaluateLegacyLabel(action, item) {
+            // Legacy support for old "msg." and "row." prefixes
+            if (action.label && (action.label.startsWith('msg.') || action.label.startsWith('row.'))) {
                 let sourceObject;
                 let path;
-                
+
                 if (action.label.startsWith('msg.')) {
                     sourceObject = this.messages[this.id] || {};
                     path = action.label.substring(4).split('.');
-                } else if (action.label.startsWith('item.')) {
+                } else if (action.label.startsWith('row.')) {
                     sourceObject = item;
-                    path = action.label.substring(5).split('.');
+                    path = action.label.substring(4).split('.');
                 }
-                
+
                 // Navigate through the object using the path
                 let value = sourceObject;
                 for (const key of path) {
@@ -280,10 +443,11 @@ export default {
                         return action.label;
                     }
                 }
-                
+
                 return value !== undefined && value !== null ? String(value) : action.label;
             }
-            return action.label;
+
+            return action.label || '';
         },
         conditionCheck(condition, row) {
             if (!condition || condition === '') return true;
@@ -298,15 +462,18 @@ export default {
         reloadData() {
             this.isReloading = true;
 
-            this.send({
-                _client: {
-                    socketId: this.$socket.id,
-                    widgetId: this.id,
-                },
-                payload: {
-                    action: 'reload',
+            this.send(
+                {
+                    _client: {
+                        socketId: this.$socket.id,
+                        widgetId: this.id,
+                    },
+                    payload: {
+                        action: 'reload',
+                    },
                 },
-            }, 0);
+                0
+            );
 
             setTimeout(() => {
                 this.isReloading = false;
@@ -321,14 +488,16 @@ export default {
                 delete currentQuery[this.searchParamKey];
             }
 
-            this.$router.replace({
-                path: this.$route.path,
-                query: currentQuery
-            }).catch(err => {
-                if (err.name !== 'NavigationDuplicated') {
-                    console.error('Router navigation error:', err);
-                }
-            });
+            this.$router
+                .replace({
+                    path: this.$route.path,
+                    query: currentQuery,
+                })
+                .catch((err) => {
+                    if (err.name !== 'NavigationDuplicated') {
+                        console.error('Router navigation error:', err);
+                    }
+                });
         }, 500),
         loadSearchFromUrl() {
             const searchValue = this.$route.query[this.searchParamKey];
@@ -382,8 +551,8 @@ export default {
                     this.loadSearchFromUrl();
                 }
             },
-            deep: true
-        }
+            deep: true,
+        },
     },
 };
 </script>
@@ -443,20 +612,20 @@ export default {
     .mobile-cards-container {
         padding: 4px;
     }
-    
+
     .mobile-card {
         margin-bottom: 8px !important;
     }
-    
+
     .mobile-card-label {
         flex: 0 0 45%;
         font-size: 0.8rem;
     }
-    
+
     .mobile-card-value {
         font-size: 0.8rem;
     }
-    
+
     .search-input {
         margin-left: 8px;
         margin-right: 8px;