allow multiple (max. 3) summary rows

raheeliftikhar5 · raheeliftikhar5 · commit 94023b4eed4d · 2024-08-27T23:26:10.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -30,10 +30,11 @@ import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { default as Divider } from "antd/es/divider";
 import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
+import Segmented from "antd/es/segmented";
+import { list } from "@lowcoder-ee/comps/generators/list";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
-
 const columnWidthOptions = [
   {
     label: trans("table.auto"),
@@ -147,7 +148,9 @@ export const columnChildrenMap = {
   linkColor: withDefault(ColorControl, "#3377ff"),
   linkHoverColor: withDefault(ColorControl, ""),
   linkActiveColor: withDefault(ColorControl, ""),
-  summary: SummaryColumnComp,
+  summaryColumns: withDefault(list(SummaryColumnComp), [
+    {}, {}, {}
+  ])
 };
 
 const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
@@ -233,7 +236,7 @@ export class ColumnComp extends ColumnInitComp {
     });
   }
 
-  propertyView(key: string, viewMode: string) {
+  propertyView(key: string, viewMode: string, summaryRowIndex: number) {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
     const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
     const column = this.children.render.getSelectedComp().getComp().toJsonValue();
@@ -244,10 +247,12 @@ export class ColumnComp extends ColumnInitComp {
       columnValue = (column.comp as any).text;
     }
 
+    const summaryColumns = this.children.summaryColumns.getView();
+  
     return (
       <>
         {viewMode === 'summary' && (
-          this.children.summary.propertyView('')
+          summaryColumns[summaryRowIndex].propertyView('')
         )}
         {viewMode === 'normal' && (
           <>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
@@ -112,7 +112,6 @@ export type CellTooltipViewType = (param: {
 
 
 export const columnChildrenMap = {
-  value: StringControl,
   cellTooltip: CellTooltipComp,
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
@@ -220,9 +219,6 @@ export class SummaryColumnComp extends ColumnInitComp {
     return (
       <>
         {this.children.cellTooltip.getPropertyView()}
-        {this.children.value.propertyView({
-          label: "Column Value"
-        })}
         {/* FIXME: cast type currently, return type of withContext should be corrected later */}
         {this.children.render.getPropertyView()}
         {this.children.hide.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -753,6 +753,7 @@ export function TableCompView(props: {
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
   // const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
   const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
+  const summaryRows = useMemo(() => compChildren.summaryRows.getView(), [compChildren.summaryRows]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -857,8 +858,8 @@ export function TableCompView(props: {
     if (!showSummary) return undefined;
     return (
       <TableSummary
-        // showSummary={showSummary}
         tableSize={size}
+        summaryRows={parseInt(summaryRows)}
         columns={columns}
         summaryRowStyle={summaryRowStyle}
       />
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -106,6 +106,21 @@ const ColumnBatchOptionWrapper = styled.div`
 
 type ViewOptionType = "normal" | "summary";
 
+const summaryRowOptions = [
+  {
+    label: "Row 1",
+    value: 0,
+  },
+  {
+    label: "Row 2",
+    value: 1,
+  },
+  {
+    label: "Row 3",
+    value: 2,
+  },
+];
+
 const columnViewOptions = [
   {
     label: "Normal",
@@ -263,6 +278,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
   columnLabel: string;
 }) {
   const [viewMode, setViewMode] = useState('normal');
+  const [summaryRow, setSummaryRow] = useState(0);
   const { comp } = props;
   const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
   const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
@@ -275,6 +291,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
     () => columns.filter((c) => columnFilterType === "all" || !c.children.hide.getView()),
     [columnFilterType, columns]
   );
+  const summaryRows = parseInt(comp.children.summaryRows.getView());
 
   const columnOptionToolbar = (
     <InsertDiv>
@@ -385,7 +402,15 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
               value={viewMode}
               onChange={(k) => setViewMode(k as ViewOptionType)}
             />
-            {column.propertyView(selection, viewMode)}
+            {viewMode === 'summary' && (
+              <Segmented
+                block
+                options={summaryRowOptions.slice(0, summaryRows)}
+                value={summaryRow}
+                onChange={(k) => setSummaryRow(k)}
+              />
+            )}
+            {column.propertyView(selection, viewMode, summaryRow)}
             {column.getView().isCustom && (
               <RedButton
                 onClick={() => {
@@ -473,6 +498,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             {comp.children.showSummary.propertyView({
               label: "Show Summary Row"
             })}
+            {comp.children.summaryRows.propertyView({
+              label: "Summary Rows",
+              radioButton: true,
+            })}
             {/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
           </Section>
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -123,11 +123,13 @@ function TableSummaryCellView(props: {
 
 export function TableSummary(props: {
   tableSize: string;
+  summaryRows: number;
   columns: ColumnComp[];
   summaryRowStyle: TableSummaryRowStyleType;
 }) {
   const {
     columns,
+    summaryRows,
     summaryRowStyle,
     tableSize,
   } = props;
@@ -137,33 +139,35 @@ export function TableSummary(props: {
 
   return (
     <Table.Summary>
-      <TableSummaryRow>
-        {visibleColumns.map((column, index) => {
-          const summaryColumn = column.children.summary.getView();
-          return (
-            <TableSummaryCellView
-              index={index}
-              key={`summary-${column.getView().dataIndex}-${index}`}
-              tableSize={tableSize}
-              rowStyle={summaryRowStyle}
-              columnStyle={{
-                background: summaryColumn.background,
-                margin: summaryColumn.margin,
-                text: summaryColumn.text,
-                border: summaryColumn.border,
-                radius: summaryColumn.radius,
-                textSize: summaryColumn.textSize,
-                textWeight: summaryColumn.textWeight,
-                fontStyle:summaryColumn.fontStyle,
-                fontFamily: summaryColumn.fontFamily,
-                // borderWidth: summaryColumn.borderWidth,
-              }}
-            >
-              {summaryColumn.render({}, '').getView().view({})}
-            </TableSummaryCellView>
-          )
-        })}
-      </TableSummaryRow>
+      {Array.from(Array(summaryRows)).map((_, rowIndex) => (
+        <TableSummaryRow key={rowIndex}>
+          {visibleColumns.map((column, index) => {
+            const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
+            return (
+              <TableSummaryCellView
+                index={index}
+                key={`summary-${rowIndex}-${column.getView().dataIndex}-${index}`}
+                tableSize={tableSize}
+                rowStyle={summaryRowStyle}
+                columnStyle={{
+                  background: summaryColumn.background,
+                  margin: summaryColumn.margin,
+                  text: summaryColumn.text,
+                  border: summaryColumn.border,
+                  radius: summaryColumn.radius,
+                  textSize: summaryColumn.textSize,
+                  textWeight: summaryColumn.textWeight,
+                  fontStyle:summaryColumn.fontStyle,
+                  fontFamily: summaryColumn.fontFamily,
+                  // borderWidth: summaryColumn.borderWidth,
+                }}
+              >
+                {summaryColumn.render({}, '').getView().view({})}
+              </TableSummaryCellView>
+            )
+          })}
+        </TableSummaryRow>
+      ))}
     </Table.Summary>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -37,6 +37,21 @@ import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
+const summarRowsOptions = [
+  {
+    label: "1",
+    value: "1",
+  },
+  {
+    label: "2",
+    value: "2",
+  },
+  {
+    label: "3",
+    value: "3",
+  },
+] as const;
+
 const sizeOptions = [
   {
     label: trans("table.small"),
@@ -208,6 +223,7 @@ const tableChildrenMap = {
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
   showSummary: BoolControl,
+  summaryRows: dropdownControl(summarRowsOptions, "1"),
   style: styleControl(TableStyle, 'style'),
   rowStyle: styleControl(TableRowStyle, 'rowStyle'),
   summaryRowStyle: styleControl(TableSummaryRowStyle, 'summaryRowStyle'),
