Skip to content

Commit 94023b4

Browse files
raheeliftikhar5raheeliftikhar5
committed
allow multiple (max. 3) summary rows
1 parent 59bca1e commit 94023b4

File tree

6 files changed

+88
-37
lines changed

6 files changed

+88
-37
lines changed

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@ import { TextOverflowControl } from "comps/controls/textOverflowControl";
3030
import { default as Divider } from "antd/es/divider";
3131
import { ColumnValueTooltip } from "./simpleColumnTypeComps";
3232
import { SummaryColumnComp } from "./tableSummaryColumnComp";
33+
import Segmented from "antd/es/segmented";
34+
import { list } from "@lowcoder-ee/comps/generators/list";
3335
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
3436
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
3537

36-
3738
const columnWidthOptions = [
3839
{
3940
label: trans("table.auto"),
@@ -147,7 +148,9 @@ export const columnChildrenMap = {
147148
linkColor: withDefault(ColorControl, "#3377ff"),
148149
linkHoverColor: withDefault(ColorControl, ""),
149150
linkActiveColor: withDefault(ColorControl, ""),
150-
summary: SummaryColumnComp,
151+
summaryColumns: withDefault(list(SummaryColumnComp), [
152+
{}, {}, {}
153+
])
151154
};
152155

153156
const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
@@ -233,7 +236,7 @@ export class ColumnComp extends ColumnInitComp {
233236
});
234237
}
235238

236-
propertyView(key: string, viewMode: string) {
239+
propertyView(key: string, viewMode: string, summaryRowIndex: number) {
237240
const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
238241
const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
239242
const column = this.children.render.getSelectedComp().getComp().toJsonValue();
@@ -244,10 +247,12 @@ export class ColumnComp extends ColumnInitComp {
244247
columnValue = (column.comp as any).text;
245248
}
246249

250+
const summaryColumns = this.children.summaryColumns.getView();
251+
247252
return (
248253
<>
249254
{viewMode === 'summary' && (
250-
this.children.summary.propertyView('')
255+
summaryColumns[summaryRowIndex].propertyView('')
251256
)}
252257
{viewMode === 'normal' && (
253258
<>

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ export type CellTooltipViewType = (param: {
112112

113113

114114
export const columnChildrenMap = {
115-
value: StringControl,
116115
cellTooltip: CellTooltipComp,
117116
// a custom column or a data column
118117
isCustom: valueComp<boolean>(false),
@@ -220,9 +219,6 @@ export class SummaryColumnComp extends ColumnInitComp {
220219
return (
221220
<>
222221
{this.children.cellTooltip.getPropertyView()}
223-
{this.children.value.propertyView({
224-
label: "Column Value"
225-
})}
226222
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
227223
{this.children.render.getPropertyView()}
228224
{this.children.hide.propertyView({

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -753,6 +753,7 @@ export function TableCompView(props: {
753753
const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
754754
// const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
755755
const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
756+
const summaryRows = useMemo(() => compChildren.summaryRows.getView(), [compChildren.summaryRows]);
756757
const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
757758
const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
758759
const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -857,8 +858,8 @@ export function TableCompView(props: {
857858
if (!showSummary) return undefined;
858859
return (
859860
<TableSummary
860-
// showSummary={showSummary}
861861
tableSize={size}
862+
summaryRows={parseInt(summaryRows)}
862863
columns={columns}
863864
summaryRowStyle={summaryRowStyle}
864865
/>

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,21 @@ const ColumnBatchOptionWrapper = styled.div`
106106

107107
type ViewOptionType = "normal" | "summary";
108108

109+
const summaryRowOptions = [
110+
{
111+
label: "Row 1",
112+
value: 0,
113+
},
114+
{
115+
label: "Row 2",
116+
value: 1,
117+
},
118+
{
119+
label: "Row 3",
120+
value: 2,
121+
},
122+
];
123+
109124
const columnViewOptions = [
110125
{
111126
label: "Normal",
@@ -263,6 +278,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
263278
columnLabel: string;
264279
}) {
265280
const [viewMode, setViewMode] = useState('normal');
281+
const [summaryRow, setSummaryRow] = useState(0);
266282
const { comp } = props;
267283
const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
268284
const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
@@ -275,6 +291,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
275291
() => columns.filter((c) => columnFilterType === "all" || !c.children.hide.getView()),
276292
[columnFilterType, columns]
277293
);
294+
const summaryRows = parseInt(comp.children.summaryRows.getView());
278295

279296
const columnOptionToolbar = (
280297
<InsertDiv>
@@ -385,7 +402,15 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
385402
value={viewMode}
386403
onChange={(k) => setViewMode(k as ViewOptionType)}
387404
/>
388-
{column.propertyView(selection, viewMode)}
405+
{viewMode === 'summary' && (
406+
<Segmented
407+
block
408+
options={summaryRowOptions.slice(0, summaryRows)}
409+
value={summaryRow}
410+
onChange={(k) => setSummaryRow(k)}
411+
/>
412+
)}
413+
{column.propertyView(selection, viewMode, summaryRow)}
389414
{column.getView().isCustom && (
390415
<RedButton
391416
onClick={() => {
@@ -473,6 +498,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
473498
{comp.children.showSummary.propertyView({
474499
label: "Show Summary Row"
475500
})}
501+
{comp.children.summaryRows.propertyView({
502+
label: "Summary Rows",
503+
radioButton: true,
504+
})}
476505
{/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
477506
</Section>
478507

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

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -123,11 +123,13 @@ function TableSummaryCellView(props: {
123123

124124
export function TableSummary(props: {
125125
tableSize: string;
126+
summaryRows: number;
126127
columns: ColumnComp[];
127128
summaryRowStyle: TableSummaryRowStyleType;
128129
}) {
129130
const {
130131
columns,
132+
summaryRows,
131133
summaryRowStyle,
132134
tableSize,
133135
} = props;
@@ -137,33 +139,35 @@ export function TableSummary(props: {
137139

138140
return (
139141
<Table.Summary>
140-
<TableSummaryRow>
141-
{visibleColumns.map((column, index) => {
142-
const summaryColumn = column.children.summary.getView();
143-
return (
144-
<TableSummaryCellView
145-
index={index}
146-
key={`summary-${column.getView().dataIndex}-${index}`}
147-
tableSize={tableSize}
148-
rowStyle={summaryRowStyle}
149-
columnStyle={{
150-
background: summaryColumn.background,
151-
margin: summaryColumn.margin,
152-
text: summaryColumn.text,
153-
border: summaryColumn.border,
154-
radius: summaryColumn.radius,
155-
textSize: summaryColumn.textSize,
156-
textWeight: summaryColumn.textWeight,
157-
fontStyle:summaryColumn.fontStyle,
158-
fontFamily: summaryColumn.fontFamily,
159-
// borderWidth: summaryColumn.borderWidth,
160-
}}
161-
>
162-
{summaryColumn.render({}, '').getView().view({})}
163-
</TableSummaryCellView>
164-
)
165-
})}
166-
</TableSummaryRow>
142+
{Array.from(Array(summaryRows)).map((_, rowIndex) => (
143+
<TableSummaryRow key={rowIndex}>
144+
{visibleColumns.map((column, index) => {
145+
const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
146+
return (
147+
<TableSummaryCellView
148+
index={index}
149+
key={`summary-${rowIndex}-${column.getView().dataIndex}-${index}`}
150+
tableSize={tableSize}
151+
rowStyle={summaryRowStyle}
152+
columnStyle={{
153+
background: summaryColumn.background,
154+
margin: summaryColumn.margin,
155+
text: summaryColumn.text,
156+
border: summaryColumn.border,
157+
radius: summaryColumn.radius,
158+
textSize: summaryColumn.textSize,
159+
textWeight: summaryColumn.textWeight,
160+
fontStyle:summaryColumn.fontStyle,
161+
fontFamily: summaryColumn.fontFamily,
162+
// borderWidth: summaryColumn.borderWidth,
163+
}}
164+
>
165+
{summaryColumn.render({}, '').getView().view({})}
166+
</TableSummaryCellView>
167+
)
168+
})}
169+
</TableSummaryRow>
170+
))}
167171
</Table.Summary>
168172
);
169173
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,21 @@ import { PaginationControl } from "./paginationControl";
3737
import { SelectionControl } from "./selectionControl";
3838
import { AutoHeightControl } from "comps/controls/autoHeightControl";
3939

40+
const summarRowsOptions = [
41+
{
42+
label: "1",
43+
value: "1",
44+
},
45+
{
46+
label: "2",
47+
value: "2",
48+
},
49+
{
50+
label: "3",
51+
value: "3",
52+
},
53+
] as const;
54+
4055
const sizeOptions = [
4156
{
4257
label: trans("table.small"),
@@ -208,6 +223,7 @@ const tableChildrenMap = {
208223
sort: valueComp<Array<SortValue>>([]),
209224
toolbar: TableToolbarComp,
210225
showSummary: BoolControl,
226+
summaryRows: dropdownControl(summarRowsOptions, "1"),
211227
style: styleControl(TableStyle, 'style'),
212228
rowStyle: styleControl(TableRowStyle, 'rowStyle'),
213229
summaryRowStyle: styleControl(TableSummaryRowStyle, 'summaryRowStyle'),

0 commit comments

Comments
 (0)