Feat/f cell options

packages/ketchup/src/components/kup-cell/kup-cell.tsx

@@ -17,6 +17,7 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupCellProps } from './kup-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import {
+    FCellOptionsProps,
     FCellPadding,
     FCellProps,
 } from '../../f-components/f-cell/f-cell-declarations';
@@ -27,9 +28,11 @@ import {
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import {
     KupDataCell,
+    KupDataCellOptions,
     KupDataColumn,
     KupDataRow,
 } from '../../managers/kup-data/kup-data-declarations';
+import { FCellOptions } from '../../f-components/f-cell-options.tsx/f-cell-options';
 
 @Component({
     tag: 'kup-cell',
@@ -228,8 +231,8 @@ export class KupCell {
     }
 
     render() {
-        const props: FCellProps = {
-            cell: this.data,
+        const props: FCellOptionsProps = {
+            cell: this.data as KupDataCellOptions,
             column: this.generateColumn(),
             component: this,
             density: this.density,
@@ -245,7 +248,7 @@ export class KupCell {
                     )}
                 </style>
                 <div id={componentWrapperId}>
-                    <FCell {...props}></FCell>
+                    <FCellOptions {...props}></FCellOptions>
                 </div>
             </Host>
         );

packages/ketchup/src/f-components/f-cell-options.tsx/f-cell-options.declarations.ts

@@ -0,0 +1,23 @@
+import { VNode } from '@stencil/core';
+import { FCellPadding, KupDataCell, KupDataColumn } from '../../components';
+import {
+    KupDataRow,
+    CellActionProps,
+} from '../../managers/kup-data/kup-data-declarations';
+import { FComponent } from '../../types/GenericTypes';
+import { FCellShapes } from '../f-cell/f-cell-declarations';
+
+export interface FCellOptionsProps extends FComponent {
+    cell?: KupDataCell;
+    column?: KupDataColumn;
+    component?: unknown;
+    density?: FCellPadding;
+    editable?: boolean;
+    indents?: VNode[];
+    previousValue?: string;
+    renderKup?: boolean;
+    row?: KupDataRow;
+    setSizes?: boolean;
+    shape?: FCellShapes;
+    cellActionIcon?: CellActionProps;
+}

packages/ketchup/src/f-components/f-cell-options.tsx/f-cell-options.tsx

@@ -0,0 +1,247 @@
+import { FunctionalComponent, h, VNode } from '@stencil/core';
+import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
+import { GenericObject, KupDataColumn } from '../../components';
+import { CMBandACPAdapter, RADAdapter } from '../../utils/cell-utils';
+import {
+    FCellOptionsProps,
+    FCellProps,
+    FCellTypes,
+} from '../f-cell/f-cell-declarations';
+import {
+    DataAdapterFn,
+    KupInputPanelCell,
+} from '../../components/kup-input-panel/kup-input-panel-declarations';
+import {
+    KupDataCell,
+    KupDataCellOptions,
+} from '../../managers/kup-data/kup-data-declarations';
+import { FCell } from '../f-cell/f-cell';
+
+const dom: KupDom = document.documentElement as KupDom;
+
+const treeOptionsNodeAdapter = (
+    options: any,
+    currentValue: string
+): GenericObject[] => {
+    return options.children.map((child) => ({
+        id: child.content.codice,
+        value: child.content.testo,
+        selected: currentValue === child.content.codice,
+        children: child.children?.length
+            ? treeOptionsNodeAdapter(child, currentValue)
+            : [],
+    }));
+};
+
+const dataTreeOptionsChildrenAdapter = (
+    options: any,
+    currentValue: string
+): GenericObject[] => {
+    return options.children.map((child) => ({
+        id: child.obj.k,
+        value: child.value,
+        selected: currentValue === child.obj.k,
+        children: child.children?.length
+            ? dataTreeOptionsChildrenAdapter(child, currentValue)
+            : [],
+    }));
+};
+
+const tableOptionsAdapter = (
+    options: any,
+    currentValue: string
+): GenericObject[] => {
+    return options.rows.map((row) => {
+        const cells = row.fields || row.cells;
+        const [id, value] = Object.keys(cells);
+
+        return {
+            id: cells[id].value,
+            value: cells[value]?.value || cells[id].value,
+            selected: currentValue === cells[id].value,
+        };
+    });
+};
+
+const optionsTreeComboAdapter = (options: any, currentValue: string) => {
+    const adapter = optionsAdapterMap.get(options.type);
+
+    if (adapter) {
+        return adapter(options, currentValue);
+    } else {
+        return options.map((option) => ({
+            value: option.label,
+            id: option.id,
+            selected: currentValue === option.id,
+        }));
+    }
+};
+
+const optionsAdapterMap = new Map<
+    string,
+    (options: any, currentValue: string) => GenericObject[]
+>([
+    ['SmeupTreeNode', treeOptionsNodeAdapter.bind(this)],
+    ['SmeupDataTree', dataTreeOptionsChildrenAdapter.bind(this)],
+    ['SmeupTable', tableOptionsAdapter.bind(this)],
+    ['SmeupDataTable', tableOptionsAdapter.bind(this)],
+]);
+
+export const FCellOptions: FunctionalComponent<FCellOptionsProps> = (
+    props: FCellOptionsProps
+) => {
+    const mappedCell = props.cell
+        ? {
+              ...props.cell,
+              data: setProps(props.cell, props.column),
+              slotData: slotData(props.cell, props.column),
+              isEditable: true,
+          }
+        : null;
+
+    const mappedProps: FCellProps = {
+        ...props,
+        editable: true,
+        cell: mappedCell as KupDataCell,
+    };
+
+    return <FCell {...mappedProps}></FCell>;
+};
+
+const slotData = (cell: KupDataCellOptions, col: KupDataColumn) => {
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+
+    if (!cell.isEditable) {
+        return null;
+    }
+
+    if (
+        cellType === FCellTypes.MULTI_AUTOCOMPLETE ||
+        cellType === FCellTypes.MULTI_COMBOBOX
+    ) {
+        return {
+            ...CMBandACPAdapter(
+                null,
+                col.title,
+                cell.options
+                // cell,
+                // col.name
+            ),
+            showDropDownIcon: true,
+            class: '',
+            style: { width: '100%' },
+            disabled: !cell.isEditable,
+            id: col.name,
+        };
+    }
+
+    return null;
+};
+
+const setProps = (cell: KupDataCellOptions, column: KupDataColumn) => {
+    const defaultProps = {
+        ...mapData(cell, column),
+        disabled: !cell.isEditable,
+        id: column.name,
+    };
+
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    const { data, ...noDataProps } = cell.data || {};
+    return cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
+        cellType !== FCellTypes.MULTI_COMBOBOX
+        ? deepObjectsMerge(defaultProps, {
+              ...cell.data,
+          })
+        : // Add and ovverride defaultProps of Chip host component except data
+          {
+              ...defaultProps,
+              ...noDataProps,
+          };
+};
+
+const deepObjectsMerge = (target: GenericObject, source: GenericObject) => {
+    for (const key in source) {
+        if (
+            source[key] instanceof Object &&
+            !Array.isArray(source[key]) &&
+            key in target
+        ) {
+            target[key] = deepObjectsMerge(target[key], source[key]);
+        } else {
+            target[key] = source[key];
+        }
+    }
+    return target;
+};
+
+const mapData = (cell: KupDataCellOptions, col: KupDataColumn) => {
+    if (!cell) {
+        return null;
+    }
+
+    const options = cell.options;
+    const fieldLabel = col.title;
+    const currentValue = cell.value;
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    const dataAdapterMap = new Map<FCellTypes, DataAdapterFn>([
+        [FCellTypes.BUTTON_LIST, MainBTNAdapter.bind(this)],
+        [FCellTypes.STRING, MainITXAdapter.bind(this)],
+        [FCellTypes.RADIO, MainRADAdapter.bind(this)],
+        [FCellTypes.AUTOCOMPLETE, MainCMBandACPAdapter.bind(this)],
+        [FCellTypes.COMBOBOX, MainCMBandACPAdapter.bind(this)],
+    ]);
+
+    const adapter = dataAdapterMap.get(cellType);
+
+    return adapter
+        ? adapter(options, fieldLabel, currentValue, cell, col.name)
+        : null;
+};
+
+const MainRADAdapter = (
+    options: GenericObject,
+    _fieldLabel: string,
+    currentValue: string
+) => {
+    return RADAdapter(currentValue, options);
+};
+
+const MainITXAdapter = (
+    options: GenericObject,
+    _fieldLabel: string,
+    _currentValue: string
+) => {
+    if (options?.[0]) {
+        return { label: options[0].label };
+    }
+};
+
+const MainBTNAdapter = (
+    _options: GenericObject,
+    _fieldLabel: string,
+    _currentValue: string,
+    cell: KupDataCellOptions
+) => {
+    return {
+        data: cell.options?.length
+            ? cell.options?.map((option) => ({
+                  icon: option.icon,
+                  value: option.value,
+              }))
+            : [],
+    };
+};
+
+const MainCMBandACPAdapter = (
+    rawOptions: GenericObject,
+    fieldLabel: string,
+    currentValue: string
+) => {
+    const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []);
+
+    configCMandACP.data['kup-list'].data = optionsTreeComboAdapter(
+        rawOptions,
+        currentValue
+    );
+    return configCMandACP;
+};

packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts

@@ -2,11 +2,13 @@ import type { VNode } from '@stencil/core';
 import {
     CellActionProps,
     KupDataCell,
+    KupDataCellOptions,
     KupDataColumn,
     KupDataRow,
 } from '../../managers/kup-data/kup-data-declarations';
 import {
     FComponent,
+    GenericObject,
     KupEventPayload,
     KupTagNames,
 } from '../../types/GenericTypes';
@@ -30,6 +32,10 @@ export interface FCellProps extends FComponent {
     shape?: FCellShapes;
     cellActionIcon?: CellActionProps;
 }
+
+export interface FCellOptionsProps extends FCellProps {
+    cell?: KupDataCellOptions;
+}
 /**
  * Information about the cell, displayed before the content.
  */

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

@@ -104,6 +104,10 @@ export interface KupDataCell {
     styleContent?: GenericMap;
     title?: string;
 }
+
+export interface KupDataCellOptions extends KupDataCell {
+    options?: GenericObject;
+}
 /**
  *
  */