diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 73fff17466..0134689157 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -16,6 +16,14 @@ import SheetRelationshipButton from "components/backend/DataTable/buttons/sheet/SheetRelationshipButton.svelte" import SheetEditColumnModal from "components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte" + const userSchemaOverrides = { + firstName: { name: "First name", disabled: true }, + lastName: { name: "Last name", disabled: true }, + email: { name: "Email", disabled: true }, + roleId: { name: "Role", disabled: true }, + status: { name: "Status", disabled: true }, + } + $: id = $tables.selected?._id $: isUsersTable = id === TableNames.USERS $: isInternal = $tables.selected?.type !== "external" @@ -27,6 +35,7 @@ tableId={id} allowAddRows={!isUsersTable} allowDeleteRows={!isUsersTable} + schemaOverrides={isUsersTable ? userSchemaOverrides : null} on:updatetable={e => tables.updateTable(e.detail)} > diff --git a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte index 3e34e44b57..23e5dd7815 100644 --- a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte @@ -30,7 +30,7 @@ // Determine if the cell is editable $: readonly = column.schema.autocolumn || - column.schema.readonly || + column.schema.disabled || (!$config.allowEditRows && row._id) // Register this cell API if the row is focused diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte index c40c837ce5..a82016791c 100644 --- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte @@ -117,7 +117,7 @@ color={`var(--spectrum-global-color-gray-600)`} />
- {column.name} + {column.label}
{#if sortedBy}
@@ -154,8 +154,10 @@ Edit column + Edit column + { } export const initialise = context => { - const { table, columns, stickyColumn } = context + const { table, columns, stickyColumn, schemaOverrides } = context + + const schema = derived( + [table, schemaOverrides], + ([$table, $schemaOverrides]) => { + let newSchema = $table?.schema + if (!newSchema) { + return null + } + Object.keys($schemaOverrides || {}).forEach(field => { + if (newSchema[field]) { + newSchema[field] = { + ...newSchema[field], + ...$schemaOverrides[field], + } + } + }) + return newSchema + } + ) // Merge new schema fields with existing schema in order to preserve widths - table.subscribe($table => { - const schema = $table?.schema - if (!schema) { + schema.subscribe($schema => { + if (!$schema) { columns.set([]) stickyColumn.set(null) return } - const currentColumns = get(columns) - const currentStickyColumn = get(stickyColumn) + const $table = get(table) // Find primary display let primaryDisplay - if ($table.primaryDisplay && schema[$table.primaryDisplay]) { + if ($table.primaryDisplay && $schema[$table.primaryDisplay]) { primaryDisplay = $table.primaryDisplay } // Get field list let fields = [] - Object.keys(schema).forEach(field => { + Object.keys($schema).forEach(field => { if (field !== primaryDisplay) { fields.push(field) } @@ -142,11 +159,12 @@ export const initialise = context => { columns.set( fields .map(field => ({ - name: schema[field].name || field, - schema: schema[field], - width: schema[field].width || DefaultColumnWidth, - visible: schema[field].visible ?? true, - order: schema[field].order, + name: field, + label: $schema[field].name || field, + schema: $schema[field], + width: $schema[field].width || DefaultColumnWidth, + visible: $schema[field].visible ?? true, + order: $schema[field].order, })) .sort((a, b) => { // Sort by order first @@ -175,19 +193,14 @@ export const initialise = context => { stickyColumn.set(null) return } - - // Check if there is an existing column with this name so we can keep - // the width setting - let existing = currentColumns.find(x => x.name === primaryDisplay) - if (!existing && currentStickyColumn?.name === primaryDisplay) { - existing = currentStickyColumn - } stickyColumn.set({ name: primaryDisplay, - width: schema[primaryDisplay].width || DefaultColumnWidth, + label: $schema[primaryDisplay].name || primaryDisplay, + schema: $schema[primaryDisplay], + width: $schema[primaryDisplay].width || DefaultColumnWidth, + visible: true, + order: 0, left: GutterWidth, - schema: schema[primaryDisplay], - idx: "sticky", }) }) }