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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy