denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fullstack): Add per-row visibility, add read-only cells, update seeds

Browse Source
This commit is contained in:
Denis Lugowski
2026-03-01 09:00:07 +01:00
parent f72923f945
commit fea2ca8a3b
10 changed files with 283 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
legalconsenthub/app/components/formelements/TheTableContent.vue
View File

@@ -2,54 +2,64 @@
<div>
<UTable :data="tableData" :columns="tableColumns" class="w-full" :ui="{ td: 'p-2' }">
<template v-for="col in dataColumns" :key="col.key" #[`${col.key}-cell`]="slotProps">
<!-- Column with cross-reference -->
<USelectMenu
v-if="hasColumnReference(col.colIndex)"
:model-value="getCellValueForSelect(slotProps.row as TableRow<TableRowData>, col.key, col.colIndex)"
:items="getColumnOptions(col.colIndex, (slotProps.row as TableRow<TableRowData>).original)"
:disabled="disabled"
:placeholder="$t('applicationForms.formElements.table.selectValue')"
:multiple="isColumnMultipleAllowed(col.colIndex)"
class="w-full min-w-32"
@update:model-value="
(val: string | string[]) =>
$emit('update:cellValue', (slotProps.row as TableRow<TableRowData>).index, col.key, col.colIndex, val)
<span
v-if="
props.isCellVisible &&
!props.isCellVisible(col.colIndex, (slotProps.row as TableRow<TableRowData>).original)
"
/>
<!-- Read-only column -->
<span v-else-if="isColumnReadOnly(col.colIndex)" class="text-muted px-2 py-1">
{{ formatCellDisplay(slotProps.row as any, col.key, col.colIndex) }}
>
-
</span>
<!-- Checkbox column -->
<div v-else-if="isColumnCheckbox(col.colIndex)" class="flex justify-center">
<UCheckbox
:model-value="getCellValueForCheckbox(slotProps.row as TableRow<TableRowData>, col.key)"
<template v-else>
<!-- Column with cross-reference -->
<USelectMenu
v-if="hasColumnReference(col.colIndex)"
:model-value="getCellValueForSelect(slotProps.row as TableRow<TableRowData>, col.key, col.colIndex)"
:items="getColumnOptions(col.colIndex, (slotProps.row as TableRow<TableRowData>).original)"
:disabled="disabled"
:placeholder="$t('applicationForms.formElements.table.selectValue')"
:multiple="isColumnMultipleAllowed(col.colIndex)"
class="w-full min-w-32"
@update:model-value="
(val: boolean | 'indeterminate') =>
$emit(
'update:checkboxCell',
(slotProps.row as TableRow<TableRowData>).index,
col.colIndex,
val === true
)
(val: string | string[]) =>
$emit('update:cellValue', (slotProps.row as TableRow<TableRowData>).index, col.key, col.colIndex, val)
"
/>
</div>
<!-- Regular text input with auto-resizing textarea -->
<UTextarea
v-else
:model-value="getCellValue(slotProps.row as TableRow<TableRowData>, col.key)"
:disabled="disabled"
:rows="1"
autoresize
:maxrows="0"
class="w-full min-w-32"
@update:model-value="
(val: string | number) =>
$emit('update:cell', (slotProps.row as TableRow<TableRowData>).index, col.key, String(val))
"
/>
<!-- Read-only column -->
<span v-else-if="isColumnReadOnly(col.colIndex)" class="text-muted px-2 py-1">
{{ formatCellDisplay(slotProps.row as any, col.key, col.colIndex) }}
</span>
<!-- Checkbox column -->
<div v-else-if="isColumnCheckbox(col.colIndex)" class="flex justify-center">
<UCheckbox
:model-value="getCellValueForCheckbox(slotProps.row as TableRow<TableRowData>, col.key)"
:disabled="disabled"
@update:model-value="
(val: boolean | 'indeterminate') =>
$emit(
'update:checkboxCell',
(slotProps.row as TableRow<TableRowData>).index,
col.colIndex,
val === true
)
"
/>
</div>
<!-- Regular text input with auto-resizing textarea -->
<UTextarea
v-else
:model-value="getCellValue(slotProps.row as TableRow<TableRowData>, col.key)"
:disabled="disabled"
:rows="1"
autoresize
:maxrows="0"
class="w-full min-w-32"
@update:model-value="
(val: string | number) =>
$emit('update:cell', (slotProps.row as TableRow<TableRowData>).index, col.key, String(val))
"
/>
</template>
</template>
<template v-if="canModifyRows" #actions-cell="{ row }">
<UButton
@@ -102,6 +112,8 @@ const props = defineProps<{
canModifyRows: boolean
addRowButtonClass?: string
getColumnOptions: (colIndex: number, currentRowData?: TableRowData) => string[]
readOnlyColumnIndices?: Set<number>
isCellVisible?: (colIndex: number, rowData: TableRowData) => boolean
}>()
defineEmits<{
@@ -119,7 +131,7 @@ function hasColumnReference(colIndex: number): boolean {
function isColumnReadOnly(colIndex: number): boolean {
const option = props.formOptions[colIndex]
return option?.columnConfig?.isReadOnly === true
return option?.columnConfig?.isReadOnly === true || (props.readOnlyColumnIndices?.has(colIndex) ?? false)
}
function isColumnMultipleAllowed(colIndex: number): boolean {