Add tablecolumns
This commit is contained in:
parent
7474658eb8
commit
7beb33aac1
2 changed files with 42 additions and 37 deletions
|
@ -6,12 +6,14 @@
|
||||||
|
|
||||||
export let allowViewReadonlyColumns = false
|
export let allowViewReadonlyColumns = false
|
||||||
|
|
||||||
const { columns, datasource } = getContext("grid")
|
const { tableColumns, datasource } = getContext("grid")
|
||||||
|
|
||||||
let open = false
|
let open = false
|
||||||
let anchor
|
let anchor
|
||||||
|
|
||||||
$: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
|
$: anyRestricted = $tableColumns.filter(
|
||||||
|
col => !col.visible || col.readonly
|
||||||
|
).length
|
||||||
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
|
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
|
||||||
|
|
||||||
$: permissions =
|
$: permissions =
|
||||||
|
@ -34,7 +36,7 @@
|
||||||
size="M"
|
size="M"
|
||||||
on:click={() => (open = !open)}
|
on:click={() => (open = !open)}
|
||||||
selected={open || anyRestricted}
|
selected={open || anyRestricted}
|
||||||
disabled={!$columns.length}
|
disabled={!$tableColumns.length}
|
||||||
>
|
>
|
||||||
{text}
|
{text}
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
@ -42,7 +44,7 @@
|
||||||
|
|
||||||
<Popover bind:open {anchor} align="left">
|
<Popover bind:open {anchor} align="left">
|
||||||
<ColumnsSettingContent
|
<ColumnsSettingContent
|
||||||
columns={$columns}
|
columns={$tableColumns}
|
||||||
{permissions}
|
{permissions}
|
||||||
{disabledPermissions}
|
{disabledPermissions}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -31,7 +31,7 @@ export const createStores = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const deriveStores = context => {
|
export const deriveStores = context => {
|
||||||
const { columns, enrichedSchema } = context
|
const { columns } = context
|
||||||
|
|
||||||
// Derive a lookup map for all columns by name
|
// Derive a lookup map for all columns by name
|
||||||
const columnLookupMap = derived(columns, $columns => {
|
const columnLookupMap = derived(columns, $columns => {
|
||||||
|
@ -42,39 +42,15 @@ export const deriveStores = context => {
|
||||||
return map
|
return map
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Derived list of columns which are direct part of the table
|
||||||
|
const tableColumns = derived(columns, $columns => {
|
||||||
|
return $columns.filter(col => !col.related)
|
||||||
|
})
|
||||||
|
|
||||||
// Derived list of columns which have not been explicitly hidden
|
// Derived list of columns which have not been explicitly hidden
|
||||||
const visibleColumns = derived(
|
const visibleColumns = derived(columns, $columns => {
|
||||||
[columns, enrichedSchema],
|
return $columns.filter(col => col.visible)
|
||||||
([$columns, $enrichedSchema]) => {
|
|
||||||
return $columns
|
|
||||||
.filter(col => col.visible)
|
|
||||||
.flatMap(c => {
|
|
||||||
const relatedColumns = []
|
|
||||||
|
|
||||||
const schemaColumns = $enrichedSchema?.[c.name]?.columns
|
|
||||||
if (schemaColumns) {
|
|
||||||
for (const relColumn of Object.keys(schemaColumns)) {
|
|
||||||
const relFieldSchema = schemaColumns[relColumn]
|
|
||||||
if (!relFieldSchema.visible) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
relatedColumns.push({
|
|
||||||
name: `${c.name}.${relColumn}`,
|
|
||||||
label: `${relColumn} (${c.name})`,
|
|
||||||
schema: relFieldSchema,
|
|
||||||
width: relFieldSchema.width || DefaultColumnWidth,
|
|
||||||
visible: relFieldSchema.visible ?? true,
|
|
||||||
readonly: relFieldSchema.readonly,
|
|
||||||
order: relFieldSchema.order,
|
|
||||||
conditions: relFieldSchema.conditions,
|
|
||||||
})
|
})
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return [c, ...relatedColumns]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// Split visible columns into their discrete types
|
// Split visible columns into their discrete types
|
||||||
const displayColumn = derived(visibleColumns, $visibleColumns => {
|
const displayColumn = derived(visibleColumns, $visibleColumns => {
|
||||||
|
@ -93,6 +69,7 @@ export const deriveStores = context => {
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
tableColumns,
|
||||||
displayColumn,
|
displayColumn,
|
||||||
columnLookupMap,
|
columnLookupMap,
|
||||||
visibleColumns,
|
visibleColumns,
|
||||||
|
@ -183,6 +160,32 @@ export const initialise = context => {
|
||||||
}
|
}
|
||||||
return column
|
return column
|
||||||
})
|
})
|
||||||
|
.flatMap(field => {
|
||||||
|
const relatedColumns = []
|
||||||
|
|
||||||
|
const schemaColumns = $enrichedSchema?.[field.name]?.columns
|
||||||
|
if (field.visible && schemaColumns) {
|
||||||
|
for (const relColumn of Object.keys(schemaColumns)) {
|
||||||
|
const relFieldSchema = schemaColumns[relColumn]
|
||||||
|
if (!relFieldSchema.visible) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
relatedColumns.push({
|
||||||
|
name: `${field.name}.${relColumn}`,
|
||||||
|
label: `${relColumn} (${field.name})`,
|
||||||
|
schema: relFieldSchema,
|
||||||
|
width: relFieldSchema.width || DefaultColumnWidth,
|
||||||
|
visible: relFieldSchema.visible ?? true,
|
||||||
|
readonly: relFieldSchema.readonly,
|
||||||
|
order: relFieldSchema.order,
|
||||||
|
conditions: relFieldSchema.conditions,
|
||||||
|
related: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [field, ...relatedColumns]
|
||||||
|
})
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
// Display column should always come first
|
// Display column should always come first
|
||||||
if (a.name === primaryDisplay) {
|
if (a.name === primaryDisplay) {
|
||||||
|
|
Loading…
Reference in a new issue