feat: uipopup blank tpk case

packages/ketchup-showcase/src/mock/dataTable.ts

@@ -1489,6 +1489,135 @@ export const dataTableWithNoCommandsMatching = {
   ],
 };
 
+export const dataTableWithEmptyObjCommands = {
+  columns: [
+    {
+      decimals: 0,
+      isEditable: false,
+      isKey: false,
+      name: 'X$RIGA',
+      obj: {
+        k: '',
+        p: '',
+        t: 'NR',
+      },
+      title: 'ROW',
+      tooltip: false,
+    },
+    {
+      isEditable: false,
+      isKey: false,
+      name: 'X$ARTI',
+      title: 'ITEM',
+      tooltip: false,
+    },
+    {
+      decimals: 0,
+      isEditable: false,
+      isKey: false,
+      name: 'X$QTA',
+      obj: {
+        k: '',
+        p: '',
+        t: 'NR',
+      },
+      title: 'QTY\nCART',
+      tooltip: false,
+    },
+    {
+      isEditable: false,
+      isKey: false,
+      name: 'X$CFG',
+      obj: {
+        k: '',
+        p: 'COD_VER',
+        t: 'VO',
+      },
+      size: '70px',
+      title: 'CFG',
+      tooltip: false,
+    },
+  ],
+  rows: [
+    {
+      cells: {
+        X$RIGA: {
+          data: {
+            size: 4,
+            helperEnabled: false,
+            maxLength: 4,
+            integers: 4,
+          },
+          isEditable: false,
+          obj: {
+            k: '2',
+            p: '',
+            t: 'NR',
+          },
+          value: '1',
+          displayedValue: '1',
+          element: {
+            's-hn': 'KUP-DATA-TABLE',
+          },
+        },
+        X$CFG: {
+          isEditable: false,
+          obj: {
+            k: '',
+            p: '',
+            t: '',
+          },
+          value: '',
+          element: {
+            's-hn': 'KUP-DATA-TABLE',
+          },
+        },
+        X$ARTI: {
+          data: {
+            size: 80,
+            helperEnabled: false,
+            hiddenCounter: true,
+            maxLength: 80,
+          },
+          isEditable: false,
+          obj: {
+            k: 'MAP000014 PRESSED TUBE PTFE G200 25x25x200',
+            p: '',
+            t: '',
+          },
+          value: 'COMMAND WITH TEXT AND ICON AND BLANK T P K',
+          element: {
+            's-hn': 'KUP-DATA-TABLE',
+          },
+        },
+        X$QTA: {
+          data: {
+            size: 15,
+            helperEnabled: false,
+            maxLength: 15,
+            integers: 15,
+          },
+          isEditable: false,
+          obj: {
+            k: '5',
+            p: '',
+            t: 'NR',
+          },
+          value: '5',
+          displayedValue: '5',
+          element: {
+            's-hn': 'KUP-DATA-TABLE',
+          },
+        },
+      },
+      cssClass: 'clickable',
+      id: '1',
+      object: '',
+      readOnly: true,
+    },
+  ],
+};
+
 export const hiddenColumnsData = {
   columns: [
     {

packages/ketchup-showcase/src/views/components/advanced/datatable/Datatable.vue

@@ -52,51 +52,54 @@
       <datatable-codver-not-matching></datatable-codver-not-matching>
     </template>
     <template v-slot:17>
-      <datatable-row-selection></datatable-row-selection>
+      <datatable-commands-with-empty-obj></datatable-commands-with-empty-obj>
     </template>
     <template v-slot:18>
-      <datatable-without-row-selection></datatable-without-row-selection>
+      <datatable-row-selection></datatable-row-selection>
     </template>
     <template v-slot:19>
-      <datatable-rows-repetition></datatable-rows-repetition>
+      <datatable-without-row-selection></datatable-without-row-selection>
     </template>
     <template v-slot:20>
-      <datatable-sort></datatable-sort>
+      <datatable-rows-repetition></datatable-rows-repetition>
     </template>
     <template v-slot:21>
-      <datatable-sortable-columns></datatable-sortable-columns>
+      <datatable-sort></datatable-sort>
     </template>
     <template v-slot:22>
-      <datatable-total></datatable-total>
+      <datatable-sortable-columns></datatable-sortable-columns>
     </template>
     <template v-slot:23>
-      <datatable-j4ico></datatable-j4ico>
+      <datatable-total></datatable-total>
     </template>
     <template v-slot:24>
-      <datatable-images-and-badges />
+      <datatable-j4ico></datatable-j4ico>
     </template>
     <template v-slot:25>
-      <datatable-shapes></datatable-shapes>
+      <datatable-images-and-badges />
     </template>
     <template v-slot:26>
-      <datatable-cell-classes></datatable-cell-classes>
+      <datatable-shapes></datatable-shapes>
     </template>
     <template v-slot:27>
-      <datatable-j1col></datatable-j1col>
+      <datatable-cell-classes></datatable-cell-classes>
     </template>
     <template v-slot:28>
-      <datatable-jl></datatable-jl>
+      <datatable-j1col></datatable-j1col>
     </template>
     <template v-slot:29>
-      <datatable-report-like></datatable-report-like>
+      <datatable-jl></datatable-jl>
     </template>
     <template v-slot:30>
-      <datatable-document-like></datatable-document-like>
+      <datatable-report-like></datatable-report-like>
     </template>
     <template v-slot:31>
-      <datatable-merge></datatable-merge>
+      <datatable-document-like></datatable-document-like>
     </template>
     <template v-slot:32>
+      <datatable-merge></datatable-merge>
+    </template>
+    <template v-slot:33>
       <datatable-formula></datatable-formula>
     </template>
   </comp>
@@ -131,6 +134,7 @@ import DatatableRowActions from '@/views/components/advanced/datatable/examples/
 import DatatableRowActionsWithCommands from '@/views/components/advanced/datatable/examples/DatatableRowActionsWithCommands';
 import DatatableCodverMatching from '@/views/components/advanced/datatable/examples/DatatableCodverMatching';
 import DatatableCodverNotMatching from '@/views/components/advanced/datatable/examples/DatatableCodverNotMatching';
+import DatatableCommandsWithEmptyObj from '@/views/components/advanced/datatable/examples/DatatableCommandsWithEmptyObj';
 import DatatableRowSelection from '@/views/components/advanced/datatable/examples/DatatableRowSelection';
 import DatatableWithoutRowSelection from '@/views/components/advanced/datatable/examples/DatatableWithoutRowSelection';
 import DatatableRowsRepetition from '@/views/components/advanced/datatable/examples/DatatableRowsRepetition';
@@ -166,6 +170,7 @@ export default {
     DatatableRowActionsWithCommands,
     DatatableCodverMatching,
     DatatableCodverNotMatching,
+    DatatableCommandsWithEmptyObj,
     DatatableRowSelection,
     DatatableWithoutRowSelection,
     DatatableRowsRepetition,
@@ -206,6 +211,7 @@ export default {
         'Row actions with commands',
         'Codver with commands matching',
         'Codver with no commands matching',
+        'Actions from commands with blank tpk obj',
         'With row selection',
         'Without row selection',
         'With row repetition',

packages/ketchup-showcase/src/views/components/advanced/datatable/examples/DatatableCommandsWithEmptyObj.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <kup-lazy
+      ref="dataTable"
+      component-name="kup-data-table"
+      :data.prop="data"
+    ></kup-lazy>
+
+    <ul>
+      <li v-if="action"
+        >Clicked action: text: {{ action.text }} - icon: {{ action.icon }}</li
+      >
+      <li v-if="actionIndex >= 0">Action index: {{ actionIndex }}</li>
+      <li v-if="actionType">Action type: {{ actionType }}</li>
+      <li v-if="row">Row: {{ row }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { dataTableWithEmptyObjCommands } from '@/mock/dataTable';
+
+export default {
+  data() {
+    return {
+      data: {
+        data: dataTableWithEmptyObjCommands,
+        commands: [
+          {
+            icon: 'magnify',
+            obj: {
+              k: '',
+              p: '',
+              t: '',
+            },
+            text: 'Dettaglio',
+          },
+        ],
+        ['onkup-datatable-rowaction-item-click']: (e) => {
+          const action = e.detail.action;
+          const index = e.detail.index;
+          const type = e.detail.type;
+          const row = e.detail.row;
+          this.actionType = type;
+          this.row = row;
+
+          if ('default' === type || 'variable' === type) {
+            this.action = action;
+            this.actionIndex = index;
+          } else if ('expander' === type) {
+            this.action = null;
+            this.actionIndex = -1;
+
+            e.target.data = { ...e.target.data };
+          }
+        },
+      },
+      action: null,
+      actionIndex: -1,
+      actionType: null,
+      row: null,
+    };
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  margin-top: 1rem;
+}
+</style>

packages/ketchup/src/components/kup-data-table/kup-data-table-declarations.ts

@@ -301,7 +301,8 @@ export interface KupDatatableRowActionItemClickEventPayload
     type:
         | DropDownAction.CODVER
         | DropDownAction.ROWACTION
-        | DropDownAction.CODVERWITHCOMMANDS;
+        | DropDownAction.CODVERWITHCOMMANDS
+        | DropDownAction.COMMANDWITHEMPTYOBJ;
     obj?: KupObj;
     column?: KupDataColumn;
     cell?: KupDataCell;

packages/ketchup/src/components/kup-data-table/kup-data-table.tsx

@@ -4953,7 +4953,7 @@ export class KupDataTable {
                             row,
                             this.data.columns,
                             this.rowActions,
-                            this.commands
+                            this.commands ?? []
                         );
 
                     if (
@@ -4966,7 +4966,7 @@ export class KupDataTable {
                             const imageProp: FImageProps =
                                 this.#kupManager.data.action.buildImageProp(
                                     action.icon,
-                                    action.text || action.column.title,
+                                    action.text || action.column?.title || '',
                                     'action',
                                     () => {
                                         this.kupRowActionItemClick.emit({

packages/ketchup/src/managers/kup-data/kup-data-declarations.ts

@@ -64,7 +64,8 @@ export interface KupDataRowAction {
     type:
         | DropDownAction.CODVER
         | DropDownAction.ROWACTION
-        | DropDownAction.CODVERWITHCOMMANDS;
+        | DropDownAction.CODVERWITHCOMMANDS
+        | DropDownAction.COMMANDWITHEMPTYOBJ;
     index?: number;
     obj?: KupObj;
     cell?: KupDataCell;
@@ -230,4 +231,5 @@ export enum DropDownAction {
     ROWACTION = 'row-action',
     CODVER = 'cod_ver',
     CODVERWITHCOMMANDS = 'cod_ver-with-commands',
+    COMMANDWITHEMPTYOBJ = 'command-with-empty-obj',
 }

packages/ketchup/src/managers/kup-data/kup-data.ts

@@ -317,13 +317,20 @@ export class KupData {
             const codVerActions = this.action.createActionsFromVoCodRow(
                 row,
                 columns,
-                commands ?? []
+                commands
             );
 
+            const commandsWithEmptyObj =
+                this.action.createCommandsWithEmptyObj(commands);
+
             const rowActionsWithCodVer =
                 actions && actions.length
-                    ? [...this.row.rowActionsAdapter(actions), ...codVerActions]
-                    : [...codVerActions];
+                    ? [
+                          ...this.row.rowActionsAdapter(actions),
+                          ...codVerActions,
+                          ...commandsWithEmptyObj,
+                      ]
+                    : [...codVerActions, ...commandsWithEmptyObj];
 
             return rowActionsWithCodVer;
         },
@@ -442,6 +449,24 @@ export class KupData {
 
             return actions;
         },
+        createCommandsWithEmptyObj: (
+            commands: KupCommand[]
+        ): KupDataRowAction[] => {
+            return commands.length
+                ? commands
+                      .filter((c) => !c.obj.k && !c.obj.t && !c.obj.p)
+                      .map(
+                          (c, index) =>
+                              ({
+                                  text: c.text || '',
+                                  icon: c.icon || '',
+                                  obj: c.obj,
+                                  index: index,
+                                  type: DropDownAction.COMMANDWITHEMPTYOBJ,
+                              } as KupDataRowAction)
+                      )
+                : [];
+        },
     };
     /**
      * Utility used by findRow and findCell.