Support in kup-data-table to new prop updatableData

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

@@ -132,6 +132,23 @@ export function createFakeDepartmentData(dataSuffix: string) {
   };
 }
 
+export function getDefaultDataTable(
+  editable: boolean = true,
+  fieldsEditable: string[] = ['FLD2', 'FLD3']
+) {
+  const dataTable = { ...defaultDataTable };
+  if (editable) {
+    dataTable.rows.forEach((row) => {
+      fieldsEditable.forEach((field) => {
+        if (row.cells[field]) {
+          row.cells[field].isEditable = true;
+        }
+      });
+    });
+  }
+  return dataTable;
+}
+
 export const defaultDataTable = {
   columns: [
     {

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

@@ -102,6 +102,9 @@
     <template v-slot:33>
       <datatable-formula></datatable-formula>
     </template>
+    <template v-slot:34>
+      <datatable-updatable></datatable-updatable>
+    </template>
   </comp>
 </template>
 ß
@@ -147,6 +150,7 @@ import DatatableReportLike from '@/views/components/advanced/datatable/examples/
 import DatatableDocumentLike from '@/views/components/advanced/datatable/examples/DatatableDocumentLike';
 import DatatableMerge from '@/views/components/advanced/datatable/examples/DatatableMerge';
 import DatatableFormula from '@/views/components/advanced/datatable/examples/DatatableFormula';
+import DatatableUpdatable from '@/views/components/advanced/datatable/examples/DatatableUpdatable';
 
 import Comp from '@/views/templates/Comp';
 
@@ -186,6 +190,7 @@ export default {
     DatatableDocumentLike,
     DatatableMerge,
     DatatableFormula,
+    DatatableUpdatable,
     Comp,
   },
   data() {
@@ -228,6 +233,7 @@ export default {
         'Document-like',
         'Merge columns',
         'Formulas on Columns',
+        'Datatable updatable',
       ],
     };
   },

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

@@ -107,6 +107,10 @@ export default {
           name: 'kup-datatable-rowaction-item-click',
           type: 'click',
         },
+        {
+          name: 'kup-datatable-update',
+          type: 'CustomEvent',
+        },
       ],
       demoMethods: [
         {
@@ -592,6 +596,14 @@ export default {
           default: 'false',
           try: 'switch',
         },
+        {
+          prop: 'updatableData',
+          description:
+            'When set to true, editable cells will be rendered using input components and update button will appair below the matrix.',
+          type: 'boolean',
+          default: 'false',
+          try: 'switch',
+        },
       ],
     };
   },

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

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <kup-lazy
+      component-name="kup-data-table"
+      :data.prop="defaultData"
+      @kup-datatable-update="onKupDatatableUpdate"
+    ></kup-lazy>
+    <div v-if="originalData">
+      Original data rows (event.detail.originalData.rows)
+      <pre>{{ this.originalData }}</pre>
+      Updated data rows (event.detail.updatedData.rows)
+      <pre>{{ this.updatedData }}</pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDefaultDataTable } from '@/mock/dataTable';
+
+export default {
+  name: 'dataTableUpdatable',
+
+  data() {
+    return {
+      defaultData: {
+        data: getDefaultDataTable(true),
+        updatableData: true,
+      },
+      originalData: '',
+      updatedData: '',
+    };
+  },
+
+  methods: {
+    onKupDatatableUpdate(event) {
+      this.originalData = event.detail.originalData.rows;
+      this.updatedData = event.detail.updatedData.rows;
+    },
+  },
+};
+</script>
+
+<style>
+pre {
+  height: 200px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 12px;
+}
+</style>

packages/ketchup/src/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
 import { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 import { KupCommand, KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
-import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
+import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, KupDatatableUpdatePayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
 import { KupActivityTimelineClickEventPayload } from "./components/kup-activity-timeline/kup-activity-timeline-declarations";
 import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
 import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
@@ -65,7 +65,7 @@ import { KupTypographyListClickEventPayload, KupTypographyListIconClickEventPayl
 export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
 export { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 export { KupCommand, KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
-export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
+export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, KupDatatableUpdatePayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
 export { KupActivityTimelineClickEventPayload } from "./components/kup-activity-timeline/kup-activity-timeline-declarations";
 export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
 export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
@@ -1760,6 +1760,11 @@ export namespace Components {
           * Transposes the data of the data table
          */
         "transpose": boolean;
+        /**
+          * When set to true, editable cells will be rendered using input components, and update button will appair below the matrix
+          * @default false
+         */
+        "updatableData": boolean;
     }
     interface KupDatePicker {
         /**
@@ -4988,6 +4993,7 @@ declare global {
         "kup-datatable-insert-row": KupDatatableInsertRowEventPayload;
         "kup-datatable-history": KupDatatableHistoryEventPayload;
         "kup-datatable-rowaction-item-click": KupDatatableRowActionItemClickEventPayload;
+        "kup-datatable-update": KupDatatableUpdatePayload;
     }
     interface HTMLKupDataTableElement extends Components.KupDataTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKupDataTableElementEventMap>(type: K, listener: (this: HTMLKupDataTableElement, ev: KupDataTableCustomEvent<HTMLKupDataTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7094,6 +7100,10 @@ declare namespace LocalJSX {
           * Event fired when the save button is pressed.
          */
         "onKup-datatable-save"?: (event: KupDataTableCustomEvent<KupDatatableInsertRowEventPayload>) => void;
+        /**
+          * Event fired when the user click on update button, update button is visible when the props updatableData is true
+         */
+        "onKup-datatable-update"?: (event: KupDataTableCustomEvent<KupDatatableUpdatePayload>) => void;
         /**
           * Current selected page set on component load
          */
@@ -7193,6 +7203,11 @@ declare namespace LocalJSX {
           * Transposes the data of the data table
          */
         "transpose"?: boolean;
+        /**
+          * When set to true, editable cells will be rendered using input components, and update button will appair below the matrix
+          * @default false
+         */
+        "updatableData"?: boolean;
     }
     interface KupDatePicker {
         /**

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

@@ -74,6 +74,7 @@ export enum KupDataTableProps {
     tableWidth = 'Sets the width of the table.',
     totals = 'Defines the current totals options.',
     transpose = 'Transposes the data of the data table.',
+    updatableData = 'When set to true, editable cells will be rendered using input components and update button will appair below the matrix',
 }
 export interface KupDataTableDataset {
     columns?: KupDataColumn[];
@@ -328,3 +329,8 @@ export interface KupDatatableInsertRowEventPayload extends KupEventPayload {
 export interface KupDatatableHistoryEventPayload extends KupEventPayload {
     selectedRows: KupDataTableRow[];
 }
+
+export interface KupDatatableUpdatePayload extends KupEventPayload {
+    originalData: KupDataTableDataset;
+    updatedData: KupDataTableDataset;
+}

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

@@ -17,7 +17,10 @@ import {
 } from '../../utils/cell-utils';
 import { FiltersRows } from '../../utils/filters/filters-rows';
 import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
-import { KupDataColumn } from '../../managers/kup-data/kup-data-declarations';
+import {
+    KupDataColumn,
+    KupDataDataset,
+} from '../../managers/kup-data/kup-data-declarations';
 import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
 
 const dom: KupDom = document.documentElement as KupDom;
@@ -1091,3 +1094,52 @@ function cloneRowGroup(group: KupDataTableRowGroup): KupDataTableRowGroup {
 
     return cloned;
 }
+
+/**
+ * Returns a KupDataDataset obtained as the difference between originalData and modifiedData
+ * The checked data are cell.value and cell.obj.k with the same column and row
+ * @param originalData
+ * @param modifiedData
+ * @param includesAlsoEmptyRows
+ * @returns
+ */
+export function getDiffData(
+    originalData: KupDataDataset,
+    modifiedData: KupDataDataset,
+    includesAlsoEmptyRows: boolean = false
+): KupDataDataset {
+    const diffDataTable = {
+        columns: modifiedData.columns,
+        rows: [],
+    };
+
+    for (const modifiedRow of modifiedData.rows) {
+        const newRow = { cells: {}, id: modifiedRow.id };
+
+        for (const column of modifiedData.columns) {
+            const cellKey = column.name;
+            const modifiedCell = modifiedRow.cells[cellKey];
+
+            const originalRow = originalData.rows.find(
+                (row) => row.id === modifiedRow.id
+            );
+            const originalCell = originalRow
+                ? originalRow.cells[cellKey]
+                : null;
+
+            if (
+                !originalCell ||
+                modifiedCell.value !== originalCell.value ||
+                modifiedCell.obj.k !== originalCell.obj.k
+            ) {
+                newRow.cells[cellKey] = modifiedCell;
+            }
+        }
+
+        if (Object.keys(newRow.cells).length > 0 || includesAlsoEmptyRows) {
+            diffDataTable.rows.push(newRow);
+        }
+    }
+
+    return diffDataTable;
+}