Move all grid buttons to builder codebase, update table grids
This commit is contained in:
parent
a322f56efd
commit
b76a0b6e89
|
@ -1,104 +0,0 @@
|
||||||
<script>
|
|
||||||
import { datasources, tables, integrations, appStore } from "stores/builder"
|
|
||||||
import { themeStore, admin } from "stores/portal"
|
|
||||||
import EditRolesButton from "./buttons/EditRolesButton.svelte"
|
|
||||||
import { TableNames } from "constants"
|
|
||||||
import { Grid } from "@budibase/frontend-core"
|
|
||||||
import { API } from "api"
|
|
||||||
import GridCreateAutomationButton from "./buttons/grid/GridCreateAutomationButton.svelte"
|
|
||||||
import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
|
|
||||||
import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
|
|
||||||
import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
|
|
||||||
import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
|
|
||||||
import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
|
|
||||||
import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
|
|
||||||
import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
|
|
||||||
import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
|
|
||||||
import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
|
|
||||||
import GridUsersTableButton from "components/backend/DataTable/modals/grid/GridUsersTableButton.svelte"
|
|
||||||
import { DB_TYPE_EXTERNAL } from "constants/backend"
|
|
||||||
|
|
||||||
const userSchemaOverrides = {
|
|
||||||
firstName: { displayName: "First name", disabled: true },
|
|
||||||
lastName: { displayName: "Last name", disabled: true },
|
|
||||||
email: { displayName: "Email", disabled: true },
|
|
||||||
roleId: { displayName: "Role", disabled: true },
|
|
||||||
status: { displayName: "Status", disabled: true },
|
|
||||||
}
|
|
||||||
|
|
||||||
$: id = $tables.selected?._id
|
|
||||||
$: isUsersTable = id === TableNames.USERS
|
|
||||||
$: isInternal = $tables.selected?.sourceType !== DB_TYPE_EXTERNAL
|
|
||||||
$: gridDatasource = {
|
|
||||||
type: "table",
|
|
||||||
tableId: id,
|
|
||||||
}
|
|
||||||
$: tableDatasource = $datasources.list.find(datasource => {
|
|
||||||
return datasource._id === $tables.selected?.sourceId
|
|
||||||
})
|
|
||||||
$: relationshipsEnabled = relationshipSupport(tableDatasource)
|
|
||||||
|
|
||||||
$: currentTheme = $themeStore?.theme
|
|
||||||
$: darkMode = !currentTheme.includes("light")
|
|
||||||
|
|
||||||
const relationshipSupport = datasource => {
|
|
||||||
const integration = $integrations[datasource?.source]
|
|
||||||
return !isInternal && integration?.relationships !== false
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleGridTableUpdate = async e => {
|
|
||||||
tables.replaceTable(id, e.detail)
|
|
||||||
|
|
||||||
// We need to refresh datasources when an external table changes.
|
|
||||||
if (e.detail?.sourceType === DB_TYPE_EXTERNAL) {
|
|
||||||
await datasources.fetch()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Grid
|
|
||||||
{API}
|
|
||||||
{darkMode}
|
|
||||||
datasource={gridDatasource}
|
|
||||||
canAddRows={!isUsersTable}
|
|
||||||
canDeleteRows={!isUsersTable}
|
|
||||||
canEditRows={!isUsersTable || !$appStore.features.disableUserMetadata}
|
|
||||||
canEditColumns={!isUsersTable || !$appStore.features.disableUserMetadata}
|
|
||||||
schemaOverrides={isUsersTable ? userSchemaOverrides : null}
|
|
||||||
showAvatars={false}
|
|
||||||
on:updatedatasource={handleGridTableUpdate}
|
|
||||||
isCloud={$admin.cloud}
|
|
||||||
>
|
|
||||||
<svelte:fragment slot="filter">
|
|
||||||
{#if isUsersTable && $appStore.features.disableUserMetadata}
|
|
||||||
<GridUsersTableButton />
|
|
||||||
{/if}
|
|
||||||
<GridFilterButton />
|
|
||||||
</svelte:fragment>
|
|
||||||
<svelte:fragment slot="controls">
|
|
||||||
<GridManageAccessButton />
|
|
||||||
{#if !isUsersTable}
|
|
||||||
<GridCreateAutomationButton />
|
|
||||||
{/if}
|
|
||||||
{#if relationshipsEnabled}
|
|
||||||
<GridRelationshipButton />
|
|
||||||
{/if}
|
|
||||||
{#if isUsersTable}
|
|
||||||
<EditRolesButton />
|
|
||||||
{:else}
|
|
||||||
<GridImportButton />
|
|
||||||
{/if}
|
|
||||||
<GridExportButton />
|
|
||||||
{#if isUsersTable}
|
|
||||||
<GridEditUserModal />
|
|
||||||
{:else}
|
|
||||||
<GridCreateEditRowModal />
|
|
||||||
{/if}
|
|
||||||
</svelte:fragment>
|
|
||||||
<svelte:fragment slot="edit-column">
|
|
||||||
<GridEditColumnModal />
|
|
||||||
</svelte:fragment>
|
|
||||||
<svelte:fragment slot="add-column">
|
|
||||||
<GridAddColumnModal />
|
|
||||||
</svelte:fragment>
|
|
||||||
</Grid>
|
|
|
@ -66,6 +66,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
#
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon="MoveUpDown"
|
icon="MoveUpDown"
|
|
@ -1,7 +1,68 @@
|
||||||
<script>
|
<script>
|
||||||
import TableDataTable from "components/backend/DataTable/TableDataTable.svelte"
|
|
||||||
import { tables } from "stores/builder"
|
|
||||||
import { Banner } from "@budibase/bbui"
|
import { Banner } from "@budibase/bbui"
|
||||||
|
import { datasources, tables, integrations, appStore } from "stores/builder"
|
||||||
|
import { themeStore, admin } from "stores/portal"
|
||||||
|
import EditRolesButton from "components/backend/DataTable/buttons/EditRolesButton.svelte"
|
||||||
|
import { TableNames } from "constants"
|
||||||
|
import { Grid } from "@budibase/frontend-core"
|
||||||
|
import { API } from "api"
|
||||||
|
import GridCreateAutomationButton from "components/backend/DataTable/buttons/grid/GridCreateAutomationButton.svelte"
|
||||||
|
import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
|
||||||
|
import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
|
||||||
|
import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
|
||||||
|
import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
|
||||||
|
import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
|
||||||
|
import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
|
||||||
|
import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
|
||||||
|
import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
|
||||||
|
import GridUsersTableButton from "components/backend/DataTable/modals/grid/GridUsersTableButton.svelte"
|
||||||
|
import { DB_TYPE_EXTERNAL } from "constants/backend"
|
||||||
|
|
||||||
|
const userSchemaOverrides = {
|
||||||
|
firstName: { displayName: "First name", disabled: true },
|
||||||
|
lastName: { displayName: "Last name", disabled: true },
|
||||||
|
email: { displayName: "Email", disabled: true },
|
||||||
|
roleId: { displayName: "Role", disabled: true },
|
||||||
|
status: { displayName: "Status", disabled: true },
|
||||||
|
}
|
||||||
|
|
||||||
|
$: autoColumnStatus = verifyAutocolumns($tables?.selected)
|
||||||
|
$: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => {
|
||||||
|
if (status.length > 1) {
|
||||||
|
acc = [...acc, ...status]
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, [])
|
||||||
|
$: invalidColumnText = duplicates.map(entry => {
|
||||||
|
return `${entry.name} (${entry.subtype})`
|
||||||
|
})
|
||||||
|
$: id = $tables.selected?._id
|
||||||
|
$: isUsersTable = id === TableNames.USERS
|
||||||
|
$: isInternal = $tables.selected?.sourceType !== DB_TYPE_EXTERNAL
|
||||||
|
$: gridDatasource = {
|
||||||
|
type: "table",
|
||||||
|
tableId: id,
|
||||||
|
}
|
||||||
|
$: tableDatasource = $datasources.list.find(datasource => {
|
||||||
|
return datasource._id === $tables.selected?.sourceId
|
||||||
|
})
|
||||||
|
$: relationshipsEnabled = relationshipSupport(tableDatasource)
|
||||||
|
$: currentTheme = $themeStore?.theme
|
||||||
|
$: darkMode = !currentTheme.includes("light")
|
||||||
|
|
||||||
|
const relationshipSupport = datasource => {
|
||||||
|
const integration = $integrations[datasource?.source]
|
||||||
|
return !isInternal && integration?.relationships !== false
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGridTableUpdate = async e => {
|
||||||
|
tables.replaceTable(id, e.detail)
|
||||||
|
|
||||||
|
// We need to refresh datasources when an external table changes.
|
||||||
|
if (e.detail?.sourceType === DB_TYPE_EXTERNAL) {
|
||||||
|
await datasources.fetch()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const verifyAutocolumns = table => {
|
const verifyAutocolumns = table => {
|
||||||
// Check for duplicates
|
// Check for duplicates
|
||||||
|
@ -17,17 +78,6 @@
|
||||||
return acc
|
return acc
|
||||||
}, {})
|
}, {})
|
||||||
}
|
}
|
||||||
|
|
||||||
$: autoColumnStatus = verifyAutocolumns($tables?.selected)
|
|
||||||
$: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => {
|
|
||||||
if (status.length > 1) {
|
|
||||||
acc = [...acc, ...status]
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, [])
|
|
||||||
$: invalidColumnText = duplicates.map(entry => {
|
|
||||||
return `${entry.name} (${entry.subtype})`
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $tables?.selected?.name}
|
{#if $tables?.selected?.name}
|
||||||
|
@ -40,7 +90,54 @@
|
||||||
</Banner>
|
</Banner>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<TableDataTable />
|
<Grid
|
||||||
|
{API}
|
||||||
|
{darkMode}
|
||||||
|
datasource={gridDatasource}
|
||||||
|
canAddRows={!isUsersTable}
|
||||||
|
canDeleteRows={!isUsersTable}
|
||||||
|
canEditRows={!isUsersTable || !$appStore.features.disableUserMetadata}
|
||||||
|
canEditColumns={!isUsersTable || !$appStore.features.disableUserMetadata}
|
||||||
|
schemaOverrides={isUsersTable ? userSchemaOverrides : null}
|
||||||
|
showAvatars={false}
|
||||||
|
isCloud={$admin.cloud}
|
||||||
|
on:updatedatasource={handleGridTableUpdate}
|
||||||
|
>
|
||||||
|
<!-- Controls -->
|
||||||
|
<svelte:fragment slot="controls">
|
||||||
|
{#if isUsersTable && $appStore.features.disableUserMetadata}
|
||||||
|
<GridUsersTableButton />
|
||||||
|
{/if}
|
||||||
|
<GridManageAccessButton />
|
||||||
|
{#if !isUsersTable}
|
||||||
|
<GridCreateAutomationButton />
|
||||||
|
{/if}
|
||||||
|
{#if relationshipsEnabled}
|
||||||
|
<GridRelationshipButton />
|
||||||
|
{/if}
|
||||||
|
{#if isUsersTable}
|
||||||
|
<EditRolesButton />
|
||||||
|
{:else}
|
||||||
|
<GridImportButton />
|
||||||
|
{/if}
|
||||||
|
<GridExportButton />
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<!-- Content for editing columns -->
|
||||||
|
<svelte:fragment slot="edit-column">
|
||||||
|
<GridEditColumnModal />
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="add-column">
|
||||||
|
<GridAddColumnModal />
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<!-- Listening to events for editing rows in modals -->
|
||||||
|
{#if isUsersTable}
|
||||||
|
<GridEditUserModal />
|
||||||
|
{:else}
|
||||||
|
<GridCreateEditRowModal />
|
||||||
|
{/if}
|
||||||
|
</Grid>
|
||||||
{:else}
|
{:else}
|
||||||
<i>Create your first table to start building</i>
|
<i>Create your first table to start building</i>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -19,9 +19,6 @@
|
||||||
import StickyColumn from "./StickyColumn.svelte"
|
import StickyColumn from "./StickyColumn.svelte"
|
||||||
import UserAvatars from "./UserAvatars.svelte"
|
import UserAvatars from "./UserAvatars.svelte"
|
||||||
import KeyboardManager from "../overlays/KeyboardManager.svelte"
|
import KeyboardManager from "../overlays/KeyboardManager.svelte"
|
||||||
import SortButton from "../controls/SortButton.svelte"
|
|
||||||
import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
|
|
||||||
import SizeButton from "../controls/SizeButton.svelte"
|
|
||||||
import NewRow from "./NewRow.svelte"
|
import NewRow from "./NewRow.svelte"
|
||||||
import { createGridWebsocket } from "../lib/websocket"
|
import { createGridWebsocket } from "../lib/websocket"
|
||||||
import {
|
import {
|
||||||
|
@ -47,7 +44,6 @@
|
||||||
export let quiet = false
|
export let quiet = false
|
||||||
export let collaboration = true
|
export let collaboration = true
|
||||||
export let showAvatars = true
|
export let showAvatars = true
|
||||||
export let showControls = true
|
|
||||||
export let initialFilter = null
|
export let initialFilter = null
|
||||||
export let initialSortColumn = null
|
export let initialSortColumn = null
|
||||||
export let initialSortOrder = null
|
export let initialSortOrder = null
|
||||||
|
@ -57,7 +53,6 @@
|
||||||
export let buttons = null
|
export let buttons = null
|
||||||
export let darkMode
|
export let darkMode
|
||||||
export let isCloud = null
|
export let isCloud = null
|
||||||
export let allowViewReadonlyColumns = false
|
|
||||||
export let rowConditions = null
|
export let rowConditions = null
|
||||||
|
|
||||||
// Unique identifier for DOM nodes inside this instance
|
// Unique identifier for DOM nodes inside this instance
|
||||||
|
@ -103,7 +98,6 @@
|
||||||
quiet,
|
quiet,
|
||||||
collaboration,
|
collaboration,
|
||||||
showAvatars,
|
showAvatars,
|
||||||
showControls,
|
|
||||||
initialFilter,
|
initialFilter,
|
||||||
initialSortColumn,
|
initialSortColumn,
|
||||||
initialSortOrder,
|
initialSortOrder,
|
||||||
|
@ -113,13 +107,12 @@
|
||||||
buttons,
|
buttons,
|
||||||
darkMode,
|
darkMode,
|
||||||
isCloud,
|
isCloud,
|
||||||
allowViewReadonlyColumns,
|
|
||||||
rowConditions,
|
rowConditions,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Derive min height and make available in context
|
// Derive min height and make available in context
|
||||||
const minHeight = derived(rowHeight, $height => {
|
const minHeight = derived(rowHeight, $height => {
|
||||||
const heightForControls = showControls ? ControlsHeight : 0
|
const heightForControls = $$slots.controls ? ControlsHeight : 0
|
||||||
return VPadding + SmallRowHeight + $height + heightForControls
|
return VPadding + SmallRowHeight + $height + heightForControls
|
||||||
})
|
})
|
||||||
context = { ...context, minHeight }
|
context = { ...context, minHeight }
|
||||||
|
@ -150,13 +143,9 @@
|
||||||
on:mouseleave={() => gridFocused.set(false)}
|
on:mouseleave={() => gridFocused.set(false)}
|
||||||
style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
|
style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
|
||||||
>
|
>
|
||||||
{#if showControls}
|
{#if $$slots.controls}
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div class="controls-left">
|
<div class="controls-left">
|
||||||
<slot name="filter" />
|
|
||||||
<SortButton />
|
|
||||||
<ColumnsSettingButton {allowViewReadonlyColumns} />
|
|
||||||
<SizeButton />
|
|
||||||
<slot name="controls" />
|
<slot name="controls" />
|
||||||
</div>
|
</div>
|
||||||
<div class="controls-right">
|
<div class="controls-right">
|
||||||
|
@ -216,6 +205,7 @@
|
||||||
<BulkDeleteHandler />
|
<BulkDeleteHandler />
|
||||||
<ClipboardHandler />
|
<ClipboardHandler />
|
||||||
<KeyboardManager />
|
<KeyboardManager />
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
Loading…
Reference in New Issue