table events added for columnEdited and search

Author: raheeliftikhar5

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

@@ -35,6 +35,7 @@ export interface CellProps {
   candidateTags?: string[];
   candidateStatus?: { text: string; status: StatusType }[];
   textOverflow?: boolean;
+  onTableEvent?: (eventName: any) => void;
 }
 
 export type CellViewReturn = (props: CellProps) => ReactNode;
@@ -71,6 +72,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     baseValue,
     candidateTags,
     candidateStatus,
+    onTableEvent,
   } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
   const editable = editViewFn ? props.editable : false;
@@ -96,6 +98,9 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
         false
       )
     );
+    if(!_.isEqual(tmpValue, value)) {
+      onTableEvent?.('columnEdited');
+    }
   }, [dispatch, baseValue, tmpValue]);
   const editView = useMemo(
     () => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,

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

@@ -323,7 +323,6 @@ export function newPrimaryColumn(
   title?: string,
   isTag?: boolean
 ): ConstructorToDataType<typeof ColumnComp> {
-  console.log('newPrimaryColumn', title);
   return {
     title: title ?? key,
     dataIndex: key,

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

@@ -176,7 +176,6 @@ export class TableImplComp extends TableInitComp implements IContainer {
 
   override reduce(action: CompAction): this {
     let comp = super.reduce(action);
-
     let dataChanged = false;
     if (action.type === CompActionTypes.UPDATE_NODES_V2) {
       const nextRowExample = tableDataRowExample(comp.children.data.getView());
@@ -316,10 +315,18 @@ export class TableImplComp extends TableInitComp implements IContainer {
       filter: this.children.toolbar.children.filter.node(),
       showFilter: this.children.toolbar.children.showFilter.node(),
     };
+    let context = this;
     const filteredDataNode = withFunction(fromRecord(nodes), (input) => {
       const { data, searchValue, filter, showFilter } = input;
       const filteredData = filterData(data, searchValue.value, filter, showFilter.value);
       // console.info("filterNode. data: ", data, " filter: ", filter, " filteredData: ", filteredData);
+      // if data is changed on search then trigger event
+      if(Boolean(searchValue.value) && data.length !== filteredData.length) {
+        const onEvent = context.children.onEvent.getView();
+        setTimeout(() => {
+          onEvent("dataSearch");
+        });
+      }
       return filteredData.map((row) => tranToTableRecord(row, row[OB_ROW_ORI_INDEX]));
     });
     return lastValueIfEqual(this, "filteredDataNode", [filteredDataNode, nodes] as const, (a, b) =>

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

@@ -680,6 +680,7 @@ export function TableCompView(props: {
         dynamicColumn,
         dynamicColumnConfig,
         columnsAggrData,
+        onEvent,
       ),
     [
       columnViews,

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

@@ -36,14 +36,16 @@ const expectColumn = (
   // with dynamic config
   const dynamicColumnConfig = comp.children.dynamicColumnConfig.getView();
   if (dynamicColumnConfig?.length > 0) {
+    const onEvent = (eventName: any) => {};
     const antdColumns = columnsToAntdFormat(
       columnViews,
       comp.children.sort.getView(),
       comp.children.toolbar.getView().columnSetting,
       comp.children.size.getView(),
       comp.children.dynamicColumn.getView(),
       dynamicColumnConfig,
-      comp.columnAggrData
+      comp.columnAggrData,
+      onEvent,
     );
     expect(columnViews.length).toBeGreaterThanOrEqual(antdColumns.length);
     antdColumns.forEach((column) => {

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

@@ -83,9 +83,14 @@ export const TableEventOptions = [
     value: "rowShrink",
     description: trans("table.rowShrink"),
   },
+  {
+    label: trans("table.columnEdited"),
+    value: "columnEdited",
+    description: trans("table.columnEdited"),
+  },
   {
     label: trans("table.search"),
-    value: "search",
+    value: "dataSearch",
     description: trans("table.search"),
   },
   {

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

@@ -269,6 +269,7 @@ export function columnsToAntdFormat(
   dynamicColumn: boolean,
   dynamicColumnConfig: Array<string>,
   columnsAggrData: ColumnsAggrData,
+  onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
   const sortMap: Map<string | undefined, SortOrder> = new Map(
     sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
@@ -346,9 +347,11 @@ export function columnsToAntdFormat(
           .getView()
           .view({
             editable: column.editable,
-            size, candidateTags: tags,
+            size,
+            candidateTags: tags,
             candidateStatus: status,
             textOverflow: column.textOverflow,
+            onTableEvent,
           });
       },
       ...(column.sortable

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1194,6 +1194,7 @@ export const de = {
       "rowShrink": "Zeilenverkleinerung",
       "search": "Suchen",
       "download": "Herunterladen",
+      "columnEdited": "Spalte bearbeitet",
       "filterChange": "Filterwechsel",
       "sortChange": "Sortieren Ändern",
       "pageChange": "Seitenwechsel",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1299,6 +1299,7 @@ export const en = {
     "rowShrink": "Row Shrink",
     "search": "Search",
     "download": "Download",
+    "columnEdited": "Column Edited",
     "filterChange": "Filter Change",
     "sortChange": "Sort Change",
     "pageChange": "Page Change",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1270,6 +1270,7 @@ table: {
     rowShrink: "行收缩",
     search: "搜索",
     download: "下载",
+    columnEdited: "栏目已编辑",
     filterChange: "筛选变化",
     sortChange: "排序变化",
     pageChange: "分页变化",