allow inline new row addition

Author: raheeliftikhar5

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -164,7 +164,8 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
                 width: '100%',
                 height: '100%',
               }}
-              onDoubleClick={enterEditFn}
+              // onDoubleClick={enterEditFn}
+              onClick={enterEditFn}
             >
             </div>
           </CellWrapper>

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

@@ -259,7 +259,7 @@ export const ColumnTagsComp = (function () {
       tagOptionsList = props.tagColors;
       let value = props.changeValue ?? getBaseValue(props, dispatch);
       value = typeof value === "string" && value.split(",")[1] ? value.split(",") : value;
-      const tags = _.isArray(value) ? value : [value];
+      const tags = _.isArray(value) ? value : (value.length ? [value] : []);
       const view = tags.map((tag, index) => {
         // The actual eval value is of type number or boolean
         const tagText = String(tag);

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -32,6 +32,7 @@ import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
 import Segmented from "antd/es/segmented";
 import { list } from "@lowcoder-ee/comps/generators/list";
+import { EMPTY_ROW_KEY } from "../tableCompView";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
@@ -385,9 +386,9 @@ export class ColumnComp extends ColumnInitComp {
 
   getChangeSet() {
     const dataIndex = this.children.dataIndex.getView();
-    const changeSet = _.mapValues(this.children.render.getMap(), (value) =>
-      value.getComp().children.comp.children.changeValue.getView()
-    );
+    const changeSet = _.mapValues(this.children.render.getMap(), (value) =>{
+     return value.getComp().children.comp.children.changeValue.getView()
+    });
     return { [dataIndex]: changeSet };
   }
 
@@ -404,6 +405,16 @@ export class ColumnComp extends ColumnInitComp {
     );
   }
 
+  dispatchClearInsertSet() {
+    const renderMap = this.children.render.getMap();
+    const insertMapKeys = Object.keys(renderMap).filter(key => key.startsWith(EMPTY_ROW_KEY));
+    const insertMap: Record<string, any> = {};
+    insertMapKeys.forEach(key => {
+      const render = renderMap[key];
+      render.getComp().children.comp.children.changeValue.dispatchChangeValueAction(null);
+    });
+  }
+
   static setSelectionAction(key: string) {
     return wrapChildAction("render", RenderComp.setSelectionAction(key));
   }

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx

@@ -18,6 +18,7 @@ import { shallowEqual } from "react-redux";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { lastValueIfEqual } from "util/objectUtils";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
+import { EMPTY_ROW_KEY } from "../tableCompView";
 
 /**
  * column list
@@ -72,14 +73,17 @@ export class ColumnListComp extends ColumnListTmpComp {
     return super.reduce(action);
   }
 
-  getChangeSet() {
+  getChangeSet(filterNewRowsChange?: boolean) {
     const changeSet: Record<string, Record<string, JSONValue>> = {};
     const columns = this.getView();
     columns.forEach((column) => {
       const columnChangeSet = column.getChangeSet();
       Object.keys(columnChangeSet).forEach((dataIndex) => {
         Object.keys(columnChangeSet[dataIndex]).forEach((key) => {
-          if (!_.isNil(columnChangeSet[dataIndex][key])) {
+          const includeChange = filterNewRowsChange
+            ? key.startsWith(EMPTY_ROW_KEY)
+            : !key.startsWith(EMPTY_ROW_KEY);
+          if (!_.isNil(columnChangeSet[dataIndex][key]) && includeChange) {
             if (!changeSet[key]) changeSet[key] = {};
             changeSet[key][dataIndex] = columnChangeSet[dataIndex][key];
           }
@@ -94,6 +98,11 @@ export class ColumnListComp extends ColumnListTmpComp {
     columns.forEach((column) => column.dispatchClearChangeSet());
   }
 
+  dispatchClearInsertSet() {
+    const columns = this.getView();
+    columns.forEach((column) => column.dispatchClearInsertSet());
+  }
+
   /**
    * If the table data changes, call this method to trigger the action
    */

client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx

@@ -1,6 +1,6 @@
 import { tableDataRowExample } from "comps/comps/tableComp/column/tableColumnListComp";
 import { getPageSize } from "comps/comps/tableComp/paginationControl";
-import { TableCompView } from "comps/comps/tableComp/tableCompView";
+import { EMPTY_ROW_KEY, TableCompView } from "comps/comps/tableComp/tableCompView";
 import { TableFilter } from "comps/comps/tableComp/tableToolbarComp";
 import {
   columnHide,
@@ -40,7 +40,11 @@ import {
   deferAction,
   executeQueryAction,
   fromRecord,
+  FunctionNode,
+  Node,
   onlyEvalAction,
+  RecordNode,
+  RecordNodeToValue,
   routeByNameAction,
   withFunction,
   wrapChildAction,
@@ -53,7 +57,7 @@ import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
 import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { EditorContext } from "comps/editorState";
 
 export class TableImplComp extends TableInitComp implements IContainer {
@@ -401,12 +405,11 @@ export class TableImplComp extends TableInitComp implements IContainer {
     )[0];
   }
 
-  changeSetNode() {
-    const nodes = {
-      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
-      renders: this.children.columns.getColumnsNode("render"),
-    };
-    const resNode = withFunction(fromRecord(nodes), (input) => {
+  private getUpsertSetResNode(
+    nodes: Record<string, RecordNode<Record<string, Node<any>>>>,
+    filterNewRows?: boolean,
+  ) {
+    return withFunction(fromRecord(nodes), (input) => {
       // merge input.dataIndexes and input.withParams into one structure
       const dataIndexRenderDict = _(input.dataIndexes)
         .mapValues((dataIndex, idx) => input.renders[idx])
@@ -416,26 +419,45 @@ export class TableImplComp extends TableInitComp implements IContainer {
       _.forEach(dataIndexRenderDict, (render, dataIndex) => {
         _.forEach(render[MAP_KEY], (value, key) => {
           const changeValue = (value.comp as any).comp.changeValue;
-          if (!_.isNil(changeValue)) {
+          const includeRecord = (filterNewRows && key.startsWith(EMPTY_ROW_KEY)) || (!filterNewRows && !key.startsWith(EMPTY_ROW_KEY));
+          if (!_.isNil(changeValue) && includeRecord) {
             if (!record[key]) record[key] = {};
             record[key][dataIndex] = changeValue;
           }
         });
       });
       return record;
     });
+  }
+
+  changeSetNode() {
+    const nodes = {
+      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
+      renders: this.children.columns.getColumnsNode("render"),
+    };
+
+    const resNode = this.getUpsertSetResNode(nodes);
     return lastValueIfEqual(this, "changeSetNode", [resNode, nodes] as const, (a, b) =>
       shallowEqual(a[1], b[1])
     )[0];
   }
 
-  toUpdateRowsNode() {
+  insertSetNode() {
     const nodes = {
-      oriDisplayData: this.oriDisplayDataNode(),
-      indexes: this.displayDataIndexesNode(),
-      changeSet: this.changeSetNode(),
+      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
+      renders: this.children.columns.getColumnsNode("render"),
     };
-    const resNode = withFunction(fromRecord(nodes), (input) => {
+
+    const resNode = this.getUpsertSetResNode(nodes, true);
+    return lastValueIfEqual(this, "insertSetNode", [resNode, nodes] as const, (a, b) =>
+      shallowEqual(a[1], b[1])
+    )[0];
+  }
+
+  private getToUpsertRowsResNodes(
+    nodes: Record<string, FunctionNode<any, any>>
+  ) {
+    return withFunction(fromRecord(nodes), (input) => {
       const res = _(input.changeSet)
         .map((changeValues, oriIndex) => {
           const idx = input.indexes[oriIndex];
@@ -446,11 +468,34 @@ export class TableImplComp extends TableInitComp implements IContainer {
       // console.info("toUpdateRowsNode. input: ", input, " res: ", res);
       return res;
     });
+  }
+
+  toUpdateRowsNode() {
+    const nodes = {
+      oriDisplayData: this.oriDisplayDataNode(),
+      indexes: this.displayDataIndexesNode(),
+      changeSet: this.changeSetNode(),
+    };
+
+    const resNode = this.getToUpsertRowsResNodes(nodes);
     return lastValueIfEqual(this, "toUpdateRowsNode", [resNode, nodes] as const, (a, b) =>
       shallowEqual(a[1], b[1])
     )[0];
   }
 
+  toInsertRowsNode() {
+    const nodes = {
+      oriDisplayData: this.oriDisplayDataNode(),
+      indexes: this.displayDataIndexesNode(),
+      changeSet: this.insertSetNode(),
+    };
+
+    const resNode = this.getToUpsertRowsResNodes(nodes);
+    return lastValueIfEqual(this, "toInsertRowsNode", [resNode, nodes] as const, (a, b) =>
+      shallowEqual(a[1], b[1])
+    )[0];
+  }
+
   columnAggrNode() {
     const nodes = {
       oriDisplayData: this.oriDisplayDataNode(),
@@ -473,6 +518,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
 }
 
 let TableTmpComp = withViewFn(TableImplComp, (comp) => {
+  const [emptyRows, setEmptyRows] = useState([]);
   return (
     <HidableView hidden={comp.children.hidden.getView()}>
       <TableCompView
@@ -687,6 +733,14 @@ export const TableComp = withExposingConfigs(TableTmpComp, [
     (input) => input.changeSet,
     trans("table.changeSetDesc")
   ),
+  new CompDepsConfig(
+    "insertSet",
+    (comp) => ({
+      insertSet: comp.insertSetNode(),
+    }),
+    (input) => input.insertSet,
+    trans("table.changeSetDesc")
+  ),
   new CompDepsConfig(
     "toUpdateRows",
     (comp) => ({
@@ -697,6 +751,16 @@ export const TableComp = withExposingConfigs(TableTmpComp, [
     },
     trans("table.toUpdateRowsDesc")
   ),
+  new CompDepsConfig(
+    "toInsertRows",
+    (comp) => ({
+      toInsertRows: comp.toInsertRowsNode(),
+    }),
+    (input) => {
+      return input.toInsertRows;
+    },
+    trans("table.toUpdateRowsDesc")
+  ),
   new DepsConfig(
     "pageNo",
     (children) => {