Skip to content

Commit a41ceaa

Browse files
dbulatovicx32dbulatovicx32
committed
table widget: multi column rowspan
- let users pick multiple rows for colspan
1 parent 02fe6be commit a41ceaa

8 files changed

Lines changed: 41 additions & 23 deletions

File tree

‎src/modules/documentExecution/dashboard/Dashboard.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export interface ITableWidgetRows {
176176
indexColumn: boolean
177177
rowSpan: {
178178
enabled: boolean
179-
column: string
179+
columns: string[]
180180
}
181181
}
182182

‎src/modules/documentExecution/dashboard/helpers/tableWidget/TableWidgetColumnSettingsHelper.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,9 +221,9 @@ const addVisualisationTypeMeasureColumn = (formattedWidget: IWidget, tempColumn:
221221
if ((tempColumn.visType === 'Chart' || tempColumn.visType === 'Text & Chart') && tempColumn.barchart) {
222222
tempVisualizationType.min = tempColumn.barchart.minValue ?? 0
223223
tempVisualizationType.max = tempColumn.barchart.maxValue ?? 0
224-
tempVisualizationType.alignment = tempColumn.barchart.style ? tempColumn.barchart.style['justify-content'] ?? '' : ''
224+
tempVisualizationType.alignment = tempColumn.barchart.style ? (tempColumn.barchart.style['justify-content'] ?? '') : ''
225225
tempVisualizationType.color = tempColumn.barchart.style ? hexToRgba(tempColumn.barchart.style.color) : ''
226-
tempVisualizationType['background-color'] = tempColumn.barchart.style ? hexToRgba(tempColumn.barchart.style['background-color']) ?? '' : ''
226+
tempVisualizationType['background-color'] = tempColumn.barchart.style ? (hexToRgba(tempColumn.barchart.style['background-color']) ?? '') : ''
227227
}
228228
formattedWidget.settings.visualization.visualizationTypes.types.push(tempVisualizationType)
229229
}
@@ -244,7 +244,10 @@ const formatColumnVisualizationTypeFromOldModel = (visType: string) => {
244244
const getRowConfigurationFromWidgetColumn = (formattedWidget: IWidget, column: any) => {
245245
if (column.rowSpan) {
246246
formattedWidget.settings.configuration.rows.rowSpan.enabled = true
247-
formattedWidget.settings.configuration.rows.rowSpan.column = getColumnId(column.name)
247+
const colId = getColumnId(column.name)
248+
if (colId && !formattedWidget.settings.configuration.rows.rowSpan.columns.includes(colId)) {
249+
formattedWidget.settings.configuration.rows.rowSpan.columns.push(colId)
250+
}
248251
}
249252
}
250253

‎src/modules/documentExecution/dashboard/helpers/tableWidget/TableWidgetConfigurationHelper.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ITableWidgetColumnGroup, ITableWidgetColumnGroups, ITableWidgetCustomMessages, ITableWidgetHeaders, ITableWidgetRows, ITableWidgetSummaryRows } from "../../Dashboard"
2-
import * as tableWidgetDefaultValues from '../../widget/WidgetEditor/helpers/tableWidget/TableWidgetDefaultValues'
1+
import { ITableWidgetColumnGroup, ITableWidgetColumnGroups, ITableWidgetCustomMessages, ITableWidgetHeaders, ITableWidgetRows, ITableWidgetSummaryRows } from '../../Dashboard'
2+
import * as tableWidgetDefaultValues from '../../widget/WidgetEditor/helpers/tableWidget/TableWidgetDefaultValues'
33

44
export const getFormattedConfiguration = (widget: any) => {
55
return { columnGroups: getDefaultColumnGroups(widget), exports: getFormattedExport(widget), headers: getHeadersConfiguration(widget), rows: getFormattedRows(widget), summaryRows: getFormattedSummaryRows(widget), customMessages: getFormattedCustomMessages(widget) as ITableWidgetCustomMessages }
@@ -8,9 +8,8 @@ export const getFormattedConfiguration = (widget: any) => {
88
const getDefaultColumnGroups = (widget: any) => {
99
if (!widget.groups) return tableWidgetDefaultValues.getDefaultColumnGroups()
1010
const formattedColumnGroups = [] as ITableWidgetColumnGroup[]
11-
widget.groups.forEach((group: { id: string, name: string }) => formattedColumnGroups.push({ id: group.id, label: group.name, columns: [] }))
11+
widget.groups.forEach((group: { id: string; name: string }) => formattedColumnGroups.push({ id: group.id, label: group.name, columns: [] }))
1212
return { enabled: true, groups: formattedColumnGroups } as ITableWidgetColumnGroups
13-
1413
}
1514

1615
export const getFormattedExport = (widget: any) => {
@@ -21,15 +20,14 @@ export const getFormattedExport = (widget: any) => {
2120
formattedExport.showScreenshot = widget.style.showScreenshot ?? false
2221
}
2322
return formattedExport
24-
2523
}
2624

2725
const getHeadersConfiguration = (widget: any) => {
2826
return { enabled: widget.style?.th?.enabled ?? false, enabledMultiline: widget.style?.th?.multiline ?? false, custom: { enabled: false, rules: [] } } as ITableWidgetHeaders
2927
}
3028

3129
const getFormattedRows = (widget: any) => {
32-
return { indexColumn: widget.settings?.indexColumn, rowSpan: { enabled: false, column: '' } } as ITableWidgetRows
30+
return { indexColumn: widget.settings?.indexColumn, rowSpan: { enabled: false, columns: [] } } as ITableWidgetRows
3331
}
3432

3533
const getFormattedSummaryRows = (widget: any) => {
@@ -43,4 +41,4 @@ export const getFormattedCustomMessages = (widget: any) => {
4341
if (!widget.settings || !widget.settings.norows) return tableWidgetDefaultValues.getDefaultCustomMessages()
4442

4543
return { hideNoRowsMessage: widget.settings.norows.hide, noRowsMessage: widget.settings.norows.message } as ITableWidgetCustomMessages
46-
}
44+
}

‎src/modules/documentExecution/dashboard/widget/TableWidget/TableWidget.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -335,27 +335,28 @@ export default defineComponent({
335335
}
336336
337337
//ROWSPAN MANAGEMENT
338-
if (this.widgetModel.settings.configuration.rows.rowSpan.enabled && this.widgetModel.settings.configuration.rows.rowSpan.column === this.widgetModel.columns[datasetColumn].id) {
338+
if (this.widgetModel.settings.configuration.rows.rowSpan.enabled && (this.widgetModel.settings.configuration.rows.rowSpan.columns ?? []).includes(this.widgetModel.columns[datasetColumn].id)) {
339+
const spanKey = `span_${this.widgetModel.columns[datasetColumn].id}`
339340
let previousValue
340341
let previousIndex
341342
const tempRows = this.tableData.rows as any
342343
for (const r in tempRows as any) {
343344
if (previousValue != tempRows[r][responseFields[responseField].name]) {
344345
previousValue = tempRows[r][responseFields[responseField].name]
345346
previousIndex = r
346-
tempRows[r].span = 1
347+
tempRows[r][spanKey] = 1
347348
} else {
348-
tempRows[previousIndex].span++
349+
tempRows[previousIndex][spanKey]++
349350
}
350351
}
351352
tempCol.rowSpan = function RowSpanCalculator(params) {
352-
if (params.data.span > 1) {
353-
return params.data.span
353+
if (params.data[spanKey] > 1) {
354+
return params.data[spanKey]
354355
} else return 1
355356
}
356357
tempCol.cellClassRules = {
357358
'cell-span': function (params) {
358-
return tempRows[params.rowIndex]?.span > 1
359+
return tempRows[params.rowIndex]?.[spanKey] > 1
359360
}
360361
}
361362
}

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/TableWidget/configuration/TableWidgetRows.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<q-toggle v-model="rowsModel.rowSpan.enabled" :label="$t('dashboard.widgetEditor.rows.enableRowspan')" @update:model-value="onRowSpanChanged" dense />
99
</div>
1010
<div class="col-12">
11-
<q-select v-model="rowsModel.rowSpan.column" :options="widgetModel.columns" option-label="alias" option-value="id" emit-value map-options :label="$t('dashboard.widgetEditor.rows.rowSpanColumn')" outlined dense :disable="!rowsModel.rowSpan.enabled" @update:model-value="onRowSpanChanged" />
11+
<q-select v-model="rowsModel.rowSpan.columns" :options="widgetModel.columns" option-label="alias" option-value="id" emit-value map-options multiple :label="$t('dashboard.widgetEditor.rows.rowSpanColumn')" outlined dense :disable="!rowsModel.rowSpan.enabled" @update:model-value="onRowSpanChanged" />
1212
</div>
1313
</div>
1414
</template>

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/tableWidget/TableWidgetBackendSaveHelper.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@ const formatTableWidgetColumnStyles = (columnStyles: ITableWidgetColumnStyles) =
5858

5959
const formatRowsConfiguration = (widgetConfiguration: ITableWidgetConfiguration) => {
6060
if (!widgetConfiguration.rows) return
61-
widgetConfiguration.rows.rowSpan.column = getColumnName(widgetConfiguration.rows.rowSpan.column)
61+
const rowSpan = widgetConfiguration.rows.rowSpan as any
62+
if (Array.isArray(rowSpan.columns)) {
63+
rowSpan.columns = rowSpan.columns.map((id: string) => getColumnName(id)).filter(Boolean)
64+
}
6265
}
6366

6467
const formatHeadersConfiguration = (widgetConfiguration: ITableWidgetConfiguration) => {

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/tableWidget/TableWidgetFunctions.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,12 @@ export const removeColumnFromTableWidgetModel = (widgetModel: IWidget, column: I
6161
}
6262

6363
const removeColumnFromRows = (widgetModel: IWidget, column: IWidgetColumn) => {
64-
if (column.id === widgetModel.settings.configuration.rows.rowSpan.column) {
65-
widgetModel.settings.configuration.rows.rowSpan.column = ''
64+
const rowSpan = widgetModel.settings.configuration.rows.rowSpan
65+
const columns: string[] = rowSpan.columns ?? []
66+
const idx = columns.indexOf(column.id as string)
67+
if (idx !== -1) {
68+
columns.splice(idx, 1)
69+
rowSpan.columns = columns
6670
emitter.emit('columnRemovedFromRows')
6771
}
6872
}
@@ -178,7 +182,16 @@ const formatTableWidgetColumnStyles = (columnStyles: ITableWidgetColumnStyles) =
178182

179183
const formatRowsConfiguration = (widgetConfiguration: ITableWidgetConfiguration) => {
180184
if (!widgetConfiguration.rows) return
181-
widgetConfiguration.rows.rowSpan.column = getColumnId(widgetConfiguration.rows.rowSpan.column)
185+
const rowSpan = widgetConfiguration.rows.rowSpan as any
186+
// Backward compatibility: migrate old single 'column' string to 'columns' array
187+
if (rowSpan.column != null && rowSpan.column !== '') {
188+
rowSpan.columns = [getColumnId(rowSpan.column)].filter(Boolean)
189+
delete rowSpan.column
190+
} else if (Array.isArray(rowSpan.columns)) {
191+
rowSpan.columns = rowSpan.columns.map((col: string) => getColumnId(col)).filter(Boolean)
192+
} else {
193+
rowSpan.columns = []
194+
}
182195
}
183196

184197
const formatHeadersConfiguration = (widgetConfiguration: ITableWidgetConfiguration) => {

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/tableWidget/TableWidgetHelpersDescriptor.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
"defaultRowsConfiguration": {
160160
"indexColumn": false,
161161
"rowSpan": {
162-
"column": "",
162+
"columns": [],
163163
"enabled": false
164164
}
165165
},

0 commit comments

Comments
 (0)