MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14888 from Budibase/data-tidy-up 

Data section toolbar standardisation
This commit is contained in:
Andrew Kingston 2024-10-29 15:19:05 +00:00 committed by GitHub
parent a1e4b6c277 37ca13e118
commit 871997b1fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 608 additions and 999 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
View File

@ -1,20 +1,144 @@
<script> <script>
import { ActionButton, Modal } from "@budibase/bbui" import {
import ExportModal from "../modals/ExportModal.svelte" ActionButton,
Select,
notifications,
Body,
Button,
} from "@budibase/bbui"
import download from "downloadjs"
import { API } from "api"
import { ROW_EXPORT_FORMATS } from "constants/backend"
import DetailPopover from "components/common/DetailPopover.svelte"
export let view export let view
export let filters
export let sorting export let sorting
export let disabled = false export let disabled = false
export let selectedRows export let selectedRows
export let formats export let formats
let modal const FORMATS = [
{
name: "CSV",
key: ROW_EXPORT_FORMATS.CSV,
},
{
name: "JSON",
key: ROW_EXPORT_FORMATS.JSON,
},
{
name: "JSON with Schema",
key: ROW_EXPORT_FORMATS.JSON_WITH_SCHEMA,
},
]
let popover
let exportFormat
let loading = false
$: options = FORMATS.filter(format => {
if (formats && !formats.includes(format.key)) {
return false
}
return true
})
$: if (options && !exportFormat) {
exportFormat = Array.isArray(options) ? options[0]?.key : []
}
const openPopover = () => {
loading = false
popover.show()
}
function downloadWithBlob(data, filename) {
download(new Blob([data], { type: "text/plain" }), filename)
}
const exportAllData = async () => {
return await API.exportView({
viewName: view,
format: exportFormat,
})
}
const exportFilteredData = async () => {
let payload = {
tableId: view,
format: exportFormat,
search: {
paginate: false,
},
}
if (selectedRows?.length) {
payload.rows = selectedRows.map(row => row._id)
}
if (sorting) {
payload.search.sort = sorting.sortColumn
payload.search.sortOrder = sorting.sortOrder
}
return await API.exportRows(payload)
}
const exportData = async () => {
try {
loading = true
let data
if (selectedRows?.length || sorting) {
data = await exportFilteredData()
} else {
data = await exportAllData()
}
notifications.success("Export successful")
downloadWithBlob(data, `export.${exportFormat}`)
popover.hide()
} catch (error) {
console.error(error)
notifications.error("Error exporting data")
} finally {
loading = false
}
}
</script> </script>
<ActionButton {disabled} icon="DataDownload" quiet on:click={modal.show}> <DetailPopover title="Export data" bind:this={popover}>
Export <svelte:fragment slot="anchor" let:open>
</ActionButton> <ActionButton
<Modal bind:this={modal}> icon="DataDownload"
<ExportModal {view} {filters} {sorting} {selectedRows} {formats} /> quiet
</Modal> on:click={openPopover}
{disabled}
selected={open}
>
Export
</ActionButton>
</svelte:fragment>
{#if selectedRows?.length}
<Body size="S">
<span data-testid="exporting-n-rows">
<strong>{selectedRows?.length}</strong>
{`row${selectedRows?.length > 1 ? "s" : ""} will be exported.`}
</span>
</Body>
{:else}
<Body size="S">
<span data-testid="export-all-rows">
Exporting <strong>all</strong> rows.
</span>
</Body>
{/if}
<span data-testid="format-select">
<Select
label="Format"
bind:value={exportFormat}
{options}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.key}
/>
</span>
<div>
<Button cta disabled={loading} on:click={exportData}>Export</Button>
</div>
</DetailPopover>

82
packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
View File

@ -1,17 +1,81 @@
<script> <script>
import { ActionButton, Modal } from "@budibase/bbui" import { ActionButton, Button, Body, notifications } from "@budibase/bbui"
import ImportModal from "../modals/ImportModal.svelte" import DetailPopover from "components/common/DetailPopover.svelte"
import ExistingTableDataImport from "components/backend/TableNavigator/ExistingTableDataImport.svelte"
import { createEventDispatcher } from "svelte"
import { API } from "api"
export let tableId export let tableId
export let tableType export let tableType
export let disabled export let disabled
let modal const dispatch = createEventDispatcher()
let popover
let rows = []
let allValid = false
let displayColumn = null
let identifierFields = []
let loading = false
const openPopover = () => {
rows = []
allValid = false
displayColumn = null
identifierFields = []
loading = false
popover.show()
}
const importData = async () => {
try {
loading = true
await API.importTableData({
tableId,
rows,
identifierFields,
})
notifications.success("Rows successfully imported")
popover.hide()
} catch (error) {
console.error(error)
notifications.error("Unable to import data")
} finally {
loading = false
}
// Always refresh rows just to be sure
dispatch("importrows")
}
</script> </script>
<ActionButton icon="DataUpload" quiet on:click={modal.show} {disabled}> <DetailPopover title="Import data" bind:this={popover}>
Import <svelte:fragment slot="anchor" let:open>
</ActionButton> <ActionButton
<Modal bind:this={modal}> icon="DataUpload"
<ImportModal {tableId} {tableType} on:importrows /> quiet
</Modal> on:click={openPopover}
{disabled}
selected={open}
>
Import
</ActionButton>
</svelte:fragment>
<Body size="S">
Import rows to an existing table from a CSV or JSON file. Only columns from
the file which exist in the table will be imported.
</Body>
<ExistingTableDataImport
{tableId}
{tableType}
bind:rows
bind:allValid
bind:displayColumn
bind:identifierFields
/>
<div>
<Button cta disabled={loading || !allValid} on:click={importData}>
Import
</Button>
</div>
</DetailPopover>

82
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View File

@ -1,11 +1,12 @@
<script> <script>
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { ActionButton, Drawer, DrawerContent, Button } from "@budibase/bbui" import { ActionButton, Button } from "@budibase/bbui"
import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte" import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
import { getUserBindings } from "dataBinding" import { getUserBindings } from "dataBinding"
import { makePropSafe } from "@budibase/string-templates" import { makePropSafe } from "@budibase/string-templates"
import { search } from "@budibase/frontend-core" import { search } from "@budibase/frontend-core"
import { tables } from "stores/builder" import { tables } from "stores/builder"
import DetailPopover from "components/common/DetailPopover.svelte"
export let schema export let schema
export let filters export let filters
@ -14,7 +15,7 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let drawer let popover
$: localFilters = filters $: localFilters = filters
$: schemaFields = search.getFields( $: schemaFields = search.getFields(
@ -39,45 +40,44 @@
}, },
...getUserBindings(), ...getUserBindings(),
] ]
const openPopover = () => {
localFilters = filters
popover.show()
}
</script> </script>
<ActionButton <DetailPopover bind:this={popover} title="Configure filters" width={800}>
icon="Filter" <svelte:fragment slot="anchor" let:open>
quiet <ActionButton
{disabled} icon="Filter"
on:click={drawer.show} quiet
selected={filterCount > 0} {disabled}
accentColor="#004EA6" on:click={openPopover}
> selected={open || filterCount > 0}
{filterCount ? `Filter: ${filterCount}` : "Filter"} accentColor="#004EA6"
</ActionButton> >
{filterCount ? `Filter: ${filterCount}` : "Filter"}
</ActionButton>
</svelte:fragment>
<Drawer <FilterBuilder
bind:this={drawer} filters={localFilters}
title="Filtering" {schemaFields}
on:drawerHide datasource={{ type: "table", tableId }}
on:drawerShow={() => { on:change={e => (localFilters = e.detail)}
localFilters = filters {bindings}
}} />
forceModal <div>
> <Button
<Button cta
cta slot="buttons"
slot="buttons" on:click={() => {
on:click={() => { dispatch("change", localFilters)
dispatch("change", localFilters) popover.hide()
drawer.hide() }}
}} >
> Save
Save </Button>
</Button> </div>
<DrawerContent slot="body"> </DetailPopover>
<FilterBuilder
filters={localFilters}
{schemaFields}
datasource={{ type: "table", tableId }}
on:change={e => (localFilters = e.detail)}
{bindings}
/>
</DrawerContent>
</Drawer>

28
packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte
View File

@ -210,16 +210,18 @@
anchor={relationshipPanelAnchor} anchor={relationshipPanelAnchor}
align="left" align="left"
> >
{#if relationshipPanelColumns.length} <div class="nested">
<div class="relationship-header"> {#if relationshipPanelColumns.length}
{relationshipFieldName} columns <div class="relationship-header">
</div> {relationshipFieldName} columns
{/if} </div>
<svelte:self {/if}
columns={relationshipPanelColumns} <svelte:self
permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]} columns={relationshipPanelColumns}
fromRelationshipField={relationshipField} permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
/> fromRelationshipField={relationshipField}
/>
</div>
</Popover> </Popover>
{/if} {/if}
@ -230,11 +232,13 @@
} }
.content { .content {
padding: 12px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
} }
.nested {
padding: 12px;
}
.columns { .columns {
display: grid; display: grid;
align-items: center; align-items: center;
@ -262,6 +266,6 @@
} }
.relationship-header { .relationship-header {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
padding: 12px 12px 0 12px; margin-bottom: 12px;
} }
</style> </style>

37
packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
View File

@ -8,15 +8,15 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover } from "@budibase/bbui" import { ActionButton } from "@budibase/bbui"
import ColumnsSettingContent from "./ColumnsSettingContent.svelte" import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
import { isEnabled } from "helpers/featureFlags" import { isEnabled } from "helpers/featureFlags"
import { FeatureFlag } from "@budibase/types" import { FeatureFlag } from "@budibase/types"
import DetailPopover from "components/common/DetailPopover.svelte"
const { tableColumns, datasource } = getContext("grid") const { tableColumns, datasource } = getContext("grid")
let open = false let popover
let anchor
$: anyRestricted = $tableColumns.filter( $: anyRestricted = $tableColumns.filter(
col => !col.visible || col.readonly col => !col.visible || col.readonly
@ -32,24 +32,23 @@
: [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN] : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Column settings">
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="ColumnSettings" <ActionButton
quiet icon="ColumnSettings"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open || anyRestricted} on:click={popover?.open}
disabled={!$tableColumns.length} selected={open || anyRestricted}
accentColor="#674D00" disabled={!$tableColumns.length}
> accentColor="#674D00"
{text} >
</ActionButton> {text}
</div> </ActionButton>
</svelte:fragment>
<Popover bind:open {anchor} align="left">
<ColumnsSettingContent <ColumnsSettingContent
columns={$tableColumns} columns={$tableColumns}
canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)} canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
{permissions} {permissions}
/> />
</Popover> </DetailPopover>

28
packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
View File

@ -9,21 +9,13 @@
$: selectedRowArray = Object.keys($selectedRows).map(id => ({ _id: id })) $: selectedRowArray = Object.keys($selectedRows).map(id => ({ _id: id }))
</script> </script>
<span data-ignore-click-outside="true"> <ExportButton
<ExportButton {disabled}
{disabled} view={$datasource.tableId}
view={$datasource.tableId} filters={$filter}
filters={$filter} sorting={{
sorting={{ sortColumn: $sort.column,
sortColumn: $sort.column, sortOrder: $sort.order,
sortOrder: $sort.order, }}
}} selectedRows={selectedRowArray}
selectedRows={selectedRowArray} />
/>
</span>
<style>
span {
display: contents;
}
</style>

103
packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Label } from "@budibase/bbui" import { ActionButton, Label } from "@budibase/bbui"
import DetailPopover from "components/common/DetailPopover.svelte"
const { const {
Constants, Constants,
@ -32,8 +33,7 @@
}, },
] ]
let open = false let popover
let anchor
// Column width sizes // Column width sizes
$: allSmall = $columns.every(col => col.width === smallColSize) $: allSmall = $columns.every(col => col.width === smallColSize)
@ -66,63 +66,54 @@
} }
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Column and row size" width={300}>
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="MoveUpDown" <ActionButton
quiet icon="MoveUpDown"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open} on:click={popover?.open}
disabled={!$columns.length} selected={open}
> disabled={!$columns.length}
Size >
</ActionButton> Size
</div> </ActionButton>
</svelte:fragment>
<Popover bind:open {anchor} align="left"> <div class="size">
<div class="content"> <Label>Row height</Label>
<div class="size"> <div class="options">
<Label>Row height</Label> {#each rowSizeOptions as option}
<div class="options"> <ActionButton
{#each rowSizeOptions as option} disabled={$fixedRowHeight}
<ActionButton quiet
disabled={$fixedRowHeight} selected={$rowHeight === option.size}
quiet on:click={() => changeRowHeight(option.size)}
selected={$rowHeight === option.size} >
on:click={() => changeRowHeight(option.size)} {option.label}
> </ActionButton>
{option.label} {/each}
</ActionButton>
{/each}
</div>
</div>
<div class="size">
<Label>Column width</Label>
<div class="options">
{#each columnSizeOptions as option}
<ActionButton
quiet
on:click={() => columns.actions.changeAllColumnWidths(option.size)}
selected={option.selected}
>
{option.label}
</ActionButton>
{/each}
{#if custom}
<ActionButton selected={custom} quiet>Custom</ActionButton>
{/if}
</div>
</div> </div>
</div> </div>
</Popover> <div class="size">
<Label>Column width</Label>
<div class="options">
{#each columnSizeOptions as option}
<ActionButton
quiet
on:click={() => columns.actions.changeAllColumnWidths(option.size)}
selected={option.selected}
>
{option.label}
</ActionButton>
{/each}
{#if custom}
<ActionButton selected={custom} quiet>Custom</ActionButton>
{/if}
</div>
</div>
</DetailPopover>
<style> <style>
.content {
padding: 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
.size { .size {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

79
packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte
View File

@ -1,12 +1,12 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Select } from "@budibase/bbui" import { ActionButton, Select } from "@budibase/bbui"
import { canBeSortColumn } from "@budibase/frontend-core" import { canBeSortColumn } from "@budibase/frontend-core"
import DetailPopover from "components/common/DetailPopover.svelte"
const { sort, columns } = getContext("grid") const { sort, columns } = getContext("grid")
let open = false let popover
let anchor
$: columnOptions = $columns $: columnOptions = $columns
.filter(col => canBeSortColumn(col.schema)) .filter(col => canBeSortColumn(col.schema))
@ -45,50 +45,35 @@
} }
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Sorting" width={300}>
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="SortOrderDown" <ActionButton
quiet icon="SortOrderDown"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open} on:click={popover?.open}
disabled={!columnOptions.length} selected={open}
> disabled={!columnOptions.length}
Sort >
</ActionButton> Sort
</div> </ActionButton>
</svelte:fragment>
<Popover bind:open {anchor} align="left"> <Select
<div class="content"> placeholder="Default"
value={$sort.column}
options={columnOptions}
autoWidth
on:change={updateSortColumn}
label="Column"
/>
{#if $sort.column}
<Select <Select
placeholder="Default" placeholder={null}
value={$sort.column} value={$sort.order || "ascending"}
options={columnOptions} options={orderOptions}
autoWidth autoWidth
on:change={updateSortColumn} on:change={updateSortOrder}
label="Column" label="Order"
/> />
{#if $sort.column} {/if}
<Select </DetailPopover>
placeholder={null}
value={$sort.order || "ascending"}
options={orderOptions}
autoWidth
on:change={updateSortOrder}
label="Order"
/>
{/if}
</div>
</Popover>
<style>
.content {
padding: 6px 12px 12px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.content :global(.spectrum-Picker) {
width: 140px;
}
</style>

142
packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
View File

@ -1,15 +1,15 @@
<script> <script>
import { import {
ActionButton, ActionButton,
Modal,
ModalContent,
Select, Select,
Icon, Icon,
Multiselect, Multiselect,
Button,
} from "@budibase/bbui" } from "@budibase/bbui"
import { CalculationType, canGroupBy, isNumeric } from "@budibase/types" import { CalculationType, canGroupBy, isNumeric } from "@budibase/types"
import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte" import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
import { getContext } from "svelte" import { getContext } from "svelte"
import DetailPopover from "components/common/DetailPopover.svelte"
const { definition, datasource, rows } = getContext("grid") const { definition, datasource, rows } = getContext("grid")
const calculationTypeOptions = [ const calculationTypeOptions = [
@ -35,19 +35,20 @@
}, },
] ]
let modal let popover
let calculations = [] let calculations = []
let groupBy = [] let groupBy = []
let schema = {} let schema = {}
let loading = false
$: schema = $definition?.schema || {} $: schema = $definition?.schema || {}
$: count = extractCalculations($definition?.schema || {}).length $: count = extractCalculations($definition?.schema || {}).length
$: groupByOptions = getGroupByOptions(schema) $: groupByOptions = getGroupByOptions(schema)
const open = () => { const openPopover = () => {
calculations = extractCalculations(schema) calculations = extractCalculations(schema)
groupBy = calculations.length ? extractGroupBy(schema) : [] groupBy = calculations.length ? extractGroupBy(schema) : []
modal?.show() popover?.show()
} }
const extractCalculations = schema => { const extractCalculations = schema => {
@ -132,6 +133,7 @@
const save = async () => { const save = async () => {
let newSchema = {} let newSchema = {}
loading = true
// Add calculations // Add calculations
for (let calc of calculations) { for (let calc of calculations) {
@ -165,76 +167,80 @@
} }
// Save changes // Save changes
await datasource.actions.saveDefinition({ try {
...$definition, await datasource.actions.saveDefinition({
primaryDisplay, ...$definition,
schema: newSchema, primaryDisplay,
}) schema: newSchema,
await rows.actions.refreshData() })
await rows.actions.refreshData()
} finally {
loading = false
popover.hide()
}
} }
</script> </script>
<ActionButton icon="WebPage" quiet on:click={open}> <DetailPopover bind:this={popover} title="Configure calculations" width={480}>
Configure calculations{count ? `: ${count}` : ""} <svelte:fragment slot="anchor" let:open>
</ActionButton> <ActionButton icon="WebPage" quiet on:click={openPopover} selected={open}>
Configure calculations{count ? `: ${count}` : ""}
</ActionButton>
</svelte:fragment>
<Modal bind:this={modal}> {#if calculations.length}
<ModalContent <div class="calculations">
title="Calculations" {#each calculations as calc, idx}
confirmText="Save" <span>{idx === 0 ? "Calculate" : "and"} the</span>
size="M" <Select
onConfirm={save} options={getTypeOptions(calc, calculations)}
> bind:value={calc.type}
{#if calculations.length} placeholder={false}
<div class="calculations"> />
{#each calculations as calc, idx} <span>of</span>
<span>{idx === 0 ? "Calculate" : "and"} the</span> <Select
<Select options={getFieldOptions(calc, calculations, schema)}
options={getTypeOptions(calc, calculations)} bind:value={calc.field}
bind:value={calc.type} placeholder="Column"
placeholder={false} />
/> <Icon
<span>of</span> hoverable
<Select name="Delete"
options={getFieldOptions(calc, calculations, schema)} size="S"
bind:value={calc.field} on:click={() => deleteCalc(idx)}
placeholder="Column" color="var(--spectrum-global-color-gray-700)"
/> />
<Icon {/each}
hoverable <span>Group by</span>
name="Delete" <div class="group-by">
size="S" <Multiselect
on:click={() => deleteCalc(idx)} options={groupByOptions}
color="var(--spectrum-global-color-gray-700)" bind:value={groupBy}
/> placeholder="None"
{/each} />
<span>Group by</span>
<div class="group-by">
<Multiselect
options={groupByOptions}
bind:value={groupBy}
placeholder="None"
/>
</div>
</div> </div>
{/if}
<div class="buttons">
<ActionButton
quiet
icon="Add"
on:click={addCalc}
disabled={calculations.length >= 5}
>
Add calculation
</ActionButton>
</div> </div>
<InfoDisplay {/if}
icon="Help" <div class="buttons">
<ActionButton
quiet quiet
body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once." icon="Add"
/> on:click={addCalc}
</ModalContent> disabled={calculations.length >= 5}
</Modal> >
Add calculation
</ActionButton>
</div>
<InfoDisplay
icon="Help"
quiet
body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once."
/>
<div>
<Button cta on:click={save} disabled={loading}>Save</Button>
</div>
</DetailPopover>
<style> <style>
.calculations { .calculations {

224
packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
View File

@ -1,224 +0,0 @@
<script>
import {
Select,
ModalContent,
notifications,
Body,
Table,
} from "@budibase/bbui"
import download from "downloadjs"
import { API } from "api"
import { QueryUtils } from "@budibase/frontend-core"
import { utils } from "@budibase/shared-core"
import { ROW_EXPORT_FORMATS } from "constants/backend"
export let view
export let filters
export let sorting
export let selectedRows = []
export let formats
const FORMATS = [
{
name: "CSV",
key: ROW_EXPORT_FORMATS.CSV,
},
{
name: "JSON",
key: ROW_EXPORT_FORMATS.JSON,
},
{
name: "JSON with Schema",
key: ROW_EXPORT_FORMATS.JSON_WITH_SCHEMA,
},
]
$: appliedFilters = filters?.filter(filter => !filter.onEmptyFilter)
$: options = FORMATS.filter(format => {
if (formats && !formats.includes(format.key)) {
return false
}
return true
})
let exportFormat
let filterLookup
$: if (options && !exportFormat) {
exportFormat = Array.isArray(options) ? options[0]?.key : []
}
$: query = QueryUtils.buildQuery(appliedFilters)
$: exportOpDisplay = buildExportOpDisplay(
sorting,
filterDisplay,
appliedFilters
)
filterLookup = utils.filterValueToLabel()
const filterDisplay = () => {
if (!appliedFilters) {
return []
}
return appliedFilters.map(filter => {
let newFieldName = filter.field + ""
const parts = newFieldName.split(":")
parts.shift()
newFieldName = parts.join(":")
return {
Field: newFieldName,
Operation: filterLookup[filter.operator],
"Field Value": filter.value || "",
}
})
}
const buildExportOpDisplay = (sorting, filterDisplay) => {
let filterDisplayConfig = filterDisplay()
if (sorting?.sortColumn) {
filterDisplayConfig = [
...filterDisplayConfig,
{
Field: sorting.sortColumn,
Operation: "Order By",
"Field Value": sorting.sortOrder,
},
]
}
return filterDisplayConfig
}
const displaySchema = {
Field: {
type: "string",
fieldName: "Field",
},
Operation: {
type: "string",
fieldName: "Operation",
},
"Field Value": {
type: "string",
fieldName: "Value",
},
}
function downloadWithBlob(data, filename) {
download(new Blob([data], { type: "text/plain" }), filename)
}
async function exportView() {
try {
const data = await API.exportView({
viewName: view,
format: exportFormat,
})
downloadWithBlob(
data,
`export.${exportFormat === "csv" ? "csv" : "json"}`
)
} catch (error) {
notifications.error(`Unable to export ${exportFormat.toUpperCase()} data`)
}
}
async function exportRows() {
if (selectedRows?.length) {
const data = await API.exportRows({
tableId: view,
rows: selectedRows.map(row => row._id),
format: exportFormat,
})
downloadWithBlob(data, `export.${exportFormat}`)
} else if (appliedFilters || sorting) {
let response
try {
response = await API.exportRows({
tableId: view,
format: exportFormat,
search: {
query,
sort: sorting?.sortColumn,
sortOrder: sorting?.sortOrder,
paginate: false,
},
})
} catch (e) {
console.error("Failed to export", e)
notifications.error("Export Failed")
}
if (response) {
downloadWithBlob(response, `export.${exportFormat}`)
notifications.success("Export Successful")
}
} else {
await exportView()
}
}
</script>
<ModalContent
title="Export Data"
confirmText="Export"
onConfirm={exportRows}
size={appliedFilters?.length || sorting ? "M" : "S"}
>
{#if selectedRows?.length}
<Body size="S">
<span data-testid="exporting-n-rows">
<strong>{selectedRows?.length}</strong>
{`row${selectedRows?.length > 1 ? "s" : ""} will be exported`}
</span>
</Body>
{:else if appliedFilters?.length || (sorting?.sortOrder && sorting?.sortColumn)}
<Body size="S">
{#if !appliedFilters}
<span data-testid="exporting-rows">
Exporting <strong>all</strong> rows
</span>
{:else}
<span data-testid="filters-applied">Filters applied</span>
{/if}
</Body>
<div class="table-wrap" data-testid="export-config-table">
<Table
schema={displaySchema}
data={exportOpDisplay}
{appliedFilters}
loading={false}
rowCount={appliedFilters?.length + 1}
disableSorting={true}
allowSelectRows={false}
allowEditRows={false}
allowEditColumns={false}
quiet={true}
compact={true}
/>
</div>
{:else}
<Body size="S">
<span data-testid="export-all-rows">
Exporting <strong>all</strong> rows
</span>
</Body>
{/if}
<span data-testid="format-select">
<Select
label="Format"
bind:value={exportFormat}
{options}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.key}
/>
</span>
</ModalContent>
<style>
.table-wrap :global(.wrapper) {
max-width: 400px;
}
</style>

243
packages/builder/src/components/backend/DataTable/modals/ExportModal.test.js
View File

@ -1,243 +0,0 @@
import { it, expect, describe, vi } from "vitest"
import { render, screen } from "@testing-library/svelte"
import "@testing-library/jest-dom"
import ExportModal from "./ExportModal.svelte"
import { utils } from "@budibase/shared-core"
const labelLookup = utils.filterValueToLabel()
const rowText = filter => {
let readableField = filter.field.split(":")[1]
let rowLabel = labelLookup[filter.operator]
let value = Array.isArray(filter.value)
? JSON.stringify(filter.value)
: filter.value
return `${readableField}${rowLabel}${value}`.trim()
}
const defaultFilters = [
{
onEmptyFilter: "all",
},
]
vi.mock("svelte", async () => {
return {
getContext: () => {
return {
hide: vi.fn(),
cancel: vi.fn(),
}
},
createEventDispatcher: vi.fn(),
onDestroy: vi.fn(),
tick: vi.fn(),
}
})
vi.mock("api", async () => {
return {
API: {
exportView: vi.fn(),
exportRows: vi.fn(),
},
}
})
describe("Export Modal", () => {
it("show default messaging with no export config specified", () => {
render(ExportModal, {
props: {},
})
expect(screen.getByTestId("export-all-rows")).toBeVisible()
expect(screen.getByTestId("export-all-rows")).toHaveTextContent(
"Exporting all rows"
)
expect(screen.queryByTestId("export-config-table")).toBe(null)
})
it("indicate that a filter is being applied to the export", () => {
const propsCfg = {
filters: [
{
id: "MOQkMx9p9",
field: "1:Cost",
operator: "rangeHigh",
value: "100",
valueType: "Value",
type: "number",
noValue: false,
},
...defaultFilters,
],
}
render(ExportModal, {
props: propsCfg,
})
expect(propsCfg.filters[0].field).toBe("1:Cost")
expect(screen.getByTestId("filters-applied")).toBeVisible()
expect(screen.getByTestId("filters-applied").textContent).toBe(
"Filters applied"
)
const ele = screen.queryByTestId("export-config-table")
expect(ele).toBeVisible()
const rows = ele.getElementsByClassName("spectrum-Table-row")
expect(rows.length).toBe(1)
let rowTextContent = rowText(propsCfg.filters[0])
//"CostLess than or equal to100"
expect(rows[0].textContent?.trim()).toEqual(rowTextContent)
})
it("Show only selected row messaging if rows are supplied", () => {
const propsCfg = {
filters: [
{
id: "MOQkMx9p9",
field: "1:Cost",
operator: "rangeHigh",
value: "100",
valueType: "Value",
type: "number",
noValue: false,
},
...defaultFilters,
],
sorting: {
sortColumn: "Cost",
sortOrder: "descending",
},
selectedRows: [
{
_id: "ro_ta_bb_expenses_57d5f6fe1b6640d8bb22b15f5eae62cd",
},
{
_id: "ro_ta_bb_expenses_99ce5760a53a430bab4349cd70335a07",
},
],
}
render(ExportModal, {
props: propsCfg,
})
expect(screen.queryByTestId("export-config-table")).toBeNull()
expect(screen.queryByTestId("filters-applied")).toBeNull()
expect(screen.queryByTestId("exporting-n-rows")).toBeVisible()
expect(screen.queryByTestId("exporting-n-rows").textContent).toEqual(
"2 rows will be exported"
)
})
it("Show only the configured sort when no filters are specified", () => {
const propsCfg = {
filters: [...defaultFilters],
sorting: {
sortColumn: "Cost",
sortOrder: "descending",
},
}
render(ExportModal, {
props: propsCfg,
})
expect(screen.queryByTestId("export-config-table")).toBeVisible()
const ele = screen.queryByTestId("export-config-table")
const rows = ele.getElementsByClassName("spectrum-Table-row")
expect(rows.length).toBe(1)
expect(rows[0].textContent?.trim()).toEqual(
`${propsCfg.sorting.sortColumn}Order By${propsCfg.sorting.sortOrder}`
)
})
it("Display all currently configured filters and applied sort", () => {
const propsCfg = {
filters: [
{
id: "MOQkMx9p9",
field: "1:Cost",
operator: "rangeHigh",
value: "100",
valueType: "Value",
type: "number",
noValue: false,
},
{
id: "2ot-aB0gE",
field: "2:Expense Tags",
operator: "contains",
value: ["Equipment", "Services"],
valueType: "Value",
type: "array",
noValue: false,
},
...defaultFilters,
],
sorting: {
sortColumn: "Payment Due",
sortOrder: "ascending",
},
}
render(ExportModal, {
props: propsCfg,
})
const ele = screen.queryByTestId("export-config-table")
expect(ele).toBeVisible()
const rows = ele.getElementsByClassName("spectrum-Table-row")
expect(rows.length).toBe(3)
let rowTextContent1 = rowText(propsCfg.filters[0])
expect(rows[0].textContent?.trim()).toEqual(rowTextContent1)
let rowTextContent2 = rowText(propsCfg.filters[1])
expect(rows[1].textContent?.trim()).toEqual(rowTextContent2)
expect(rows[2].textContent?.trim()).toEqual(
`${propsCfg.sorting.sortColumn}Order By${propsCfg.sorting.sortOrder}`
)
})
it("show only the valid, configured download formats", () => {
const propsCfg = {
formats: ["badger", "json"],
}
render(ExportModal, {
props: propsCfg,
})
let ele = screen.getByTestId("format-select")
expect(ele).toBeVisible()
let formatDisplay = ele.getElementsByTagName("button")[0]
expect(formatDisplay.textContent.trim()).toBe("JSON")
})
it("Load the default format config when no explicit formats are configured", () => {
render(ExportModal, {
props: {},
})
let ele = screen.getByTestId("format-select")
expect(ele).toBeVisible()
let formatDisplay = ele.getElementsByTagName("button")[0]
expect(formatDisplay.textContent.trim()).toBe("CSV")
})
})

61
packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte
View File

@ -1,61 +0,0 @@
<script>
import {
ModalContent,
Label,
notifications,
Body,
Layout,
} from "@budibase/bbui"
import TableDataImport from "../../TableNavigator/ExistingTableDataImport.svelte"
import { API } from "api"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let tableId
export let tableType
let rows = []
let allValid = false
let displayColumn = null
let identifierFields = []
async function importData() {
try {
await API.importTableData({
tableId,
rows,
identifierFields,
})
notifications.success("Rows successfully imported")
} catch (error) {
notifications.error("Unable to import data")
}
// Always refresh rows just to be sure
dispatch("importrows")
}
</script>
<ModalContent
title="Import Data"
confirmText="Import"
onConfirm={importData}
disabled={!allValid}
>
<Body size="S">
Import rows to an existing table from a CSV or JSON file. Only columns from
the file which exist in the table will be imported.
</Body>
<Layout gap="XS" noPadding>
<Label grey extraSmall>CSV or JSON file to import</Label>
<TableDataImport
{tableId}
{tableType}
bind:rows
bind:allValid
bind:displayColumn
bind:identifierFields
/>
</Layout>
</ModalContent>

183
packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
View File

@ -4,7 +4,7 @@
BBReferenceFieldSubType, BBReferenceFieldSubType,
SourceName, SourceName,
} from "@budibase/types" } from "@budibase/types"
import { Select, Toggle, Multiselect } from "@budibase/bbui" import { Select, Toggle, Multiselect, Label, Layout } from "@budibase/bbui"
import { DB_TYPE_INTERNAL } from "constants/backend" import { DB_TYPE_INTERNAL } from "constants/backend"
import { API } from "api" import { API } from "api"
import { parseFile } from "./utils" import { parseFile } from "./utils"
@ -140,84 +140,91 @@
} }
</script> </script>
<div class="dropzone"> <Layout gap="S" noPadding>
<input <Layout noPadding gap="XS">
disabled={!schema || loading} <Label grey extraSmall>CSV or JSON file to import</Label>
id="file-upload" <div class="dropzone">
accept="text/csv,application/json" <input
type="file" disabled={!schema || loading}
on:change={handleFile} id="file-upload"
/> accept="text/csv,application/json"
<label for="file-upload" class:uploaded={rows.length > 0}> type="file"
{#if loading} on:change={handleFile}
loading...
{:else if error}
error: {error}
{:else if fileName}
{fileName}
{:else}
Upload
{/if}
</label>
</div>
{#if fileName && Object.keys(validation).length === 0}
<p>No valid fields, try another file</p>
{:else if rows.length > 0 && !error}
<div class="schema-fields">
{#each Object.keys(validation) as name}
<div class="field">
<span>{name}</span>
<Select
value={`${schema[name]?.type}${schema[name]?.subtype || ""}`}
options={typeOptions}
placeholder={null}
getOptionLabel={option => option.label}
getOptionValue={option => option.value}
disabled
/>
<span
class={loading || validation[name]
? "fieldStatusSuccess"
: "fieldStatusFailure"}
>
{validation[name] ? "Success" : "Failure"}
</span>
</div>
{/each}
</div>
<br />
<!-- SQL Server doesn't yet support overwriting rows by existing keys -->
{#if datasource?.source !== SourceName.SQL_SERVER}
<Toggle
bind:value={updateExistingRows}
on:change={() => (identifierFields = [])}
thin
text="Update existing rows"
/>
{/if}
{#if updateExistingRows}
{#if tableType === DB_TYPE_INTERNAL}
<Multiselect
label="Identifier field(s)"
options={Object.keys(validation)}
bind:value={identifierFields}
/> />
{:else} <label for="file-upload" class:uploaded={rows.length > 0}>
<p>Rows will be updated based on the table's primary key.</p> {#if loading}
loading...
{:else if error}
error: {error}
{:else if fileName}
{fileName}
{:else}
Upload
{/if}
</label>
</div>
</Layout>
{#if fileName && Object.keys(validation).length === 0}
<div>No valid fields - please try another file.</div>
{:else if fileName && rows.length > 0 && !error}
<div>
{#each Object.keys(validation) as name}
<div class="field">
<span>{name}</span>
<Select
value={`${schema[name]?.type}${schema[name]?.subtype || ""}`}
options={typeOptions}
placeholder={null}
getOptionLabel={option => option.label}
getOptionValue={option => option.value}
disabled
/>
<span
class={loading || validation[name]
? "fieldStatusSuccess"
: "fieldStatusFailure"}
>
{validation[name] ? "Success" : "Failure"}
</span>
</div>
{/each}
</div>
<!-- SQL Server doesn't yet support overwriting rows by existing keys -->
{#if datasource?.source !== SourceName.SQL_SERVER}
<Toggle
bind:value={updateExistingRows}
on:change={() => (identifierFields = [])}
thin
text="Update existing rows"
/>
{/if}
{#if updateExistingRows}
{#if tableType === DB_TYPE_INTERNAL}
<Multiselect
label="Identifier field(s)"
options={Object.keys(validation)}
bind:value={identifierFields}
/>
{:else}
<div>Rows will be updated based on the table's primary key.</div>
{/if}
{/if}
{#if invalidColumns.length > 0}
<Layout noPadding gap="XS">
<div>
The following columns are present in the data you wish to import, but
do not match the schema of this table and will be ignored:
</div>
<div>
{#each invalidColumns as column}
- {column}<br />
{/each}
</div>
</Layout>
{/if} {/if}
{/if} {/if}
{#if invalidColumns.length > 0} </Layout>
<p class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
The following columns are present in the data you wish to import, but do
not match the schema of this table and will be ignored.
</p>
<ul class="ignoredList">
{#each invalidColumns as column}
<li>{column}</li>
{/each}
</ul>
{/if}
{/if}
<style> <style>
.dropzone { .dropzone {
@ -228,11 +235,9 @@
border-radius: 10px; border-radius: 10px;
transition: all 0.3s; transition: all 0.3s;
} }
input { input {
display: none; display: none;
} }
label { label {
font-family: var(--font-sans); font-family: var(--font-sans);
cursor: pointer; cursor: pointer;
@ -240,7 +245,6 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
color: var(--ink);
padding: var(--spacing-m) var(--spacing-l); padding: var(--spacing-m) var(--spacing-l);
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;
display: inline-flex; display: inline-flex;
@ -254,20 +258,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
background-color: var(--grey-2); background-color: var(--spectrum-global-color-gray-300);
font-size: var(--font-size-xs); font-size: var(--font-size-s);
line-height: normal; line-height: normal;
border: var(--border-transparent); border: var(--border-transparent);
} }
.uploaded { .uploaded {
color: var(--blue); color: var(--spectrum-global-color-blue-600);
} }
.schema-fields {
margin-top: var(--spacing-xl);
}
.field { .field {
display: grid; display: grid;
grid-template-columns: 2fr 2fr 1fr auto; grid-template-columns: 2fr 2fr 1fr auto;
@ -276,23 +274,14 @@
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
font-size: var(--spectrum-global-dimension-font-size-75); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.fieldStatusSuccess { .fieldStatusSuccess {
color: var(--green); color: var(--green);
justify-self: center; justify-self: center;
font-weight: 600; font-weight: 600;
} }
.fieldStatusFailure { .fieldStatusFailure {
color: var(--red); color: var(--red);
justify-self: center; justify-self: center;
font-weight: 600; font-weight: 600;
} }
.ignoredList {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--spectrum-global-dimension-font-size-75);
}
</style> </style>

139
packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Select, Icon } from "@budibase/bbui" import { Select, Icon, Layout, Label } from "@budibase/bbui"
import { FIELDS } from "constants/backend" import { FIELDS } from "constants/backend"
import { utils } from "@budibase/shared-core" import { utils } from "@budibase/shared-core"
import { canBeDisplayColumn } from "@budibase/frontend-core" import { canBeDisplayColumn } from "@budibase/frontend-core"
@ -184,70 +184,76 @@
} }
</script> </script>
<div class="dropzone"> <Layout noPadding gap="S">
<input <Layout gap="XS" noPadding>
bind:this={fileInput} <Label grey extraSmall>
disabled={loading} Create a Table from a CSV or JSON file (Optional)
id="file-upload" </Label>
accept="text/csv,application/json" <div class="dropzone">
type="file" <input
on:change={handleFile} bind:this={fileInput}
/> disabled={loading}
<label for="file-upload" class:uploaded={rawRows.length > 0}> id="file-upload"
{#if error} accept="text/csv,application/json"
Error: {error} type="file"
{:else if fileName} on:change={handleFile}
{fileName} />
{:else} <label for="file-upload" class:uploaded={rawRows.length > 0}>
Upload {#if error}
{/if} Error: {error}
</label> {:else if fileName}
</div> {fileName}
{#if rawRows.length > 0 && !error} {:else}
<div class="schema-fields"> Upload
{#each Object.entries(schema) as [name, column]} {/if}
<div class="field"> </label>
<span>{column.name}</span> </div>
<Select </Layout>
bind:value={selectedColumnTypes[column.name]}
on:change={e => handleChange(name, e)} {#if rawRows.length > 0 && !error}
options={Object.values(typeOptions)} <div>
placeholder={null} {#each Object.entries(schema) as [name, column]}
getOptionLabel={option => option.label} <div class="field">
getOptionValue={option => option.value} <span>{column.name}</span>
/> <Select
<span bind:value={selectedColumnTypes[column.name]}
class={validation[column.name] on:change={e => handleChange(name, e)}
? "fieldStatusSuccess" options={Object.values(typeOptions)}
: "fieldStatusFailure"} placeholder={null}
> getOptionLabel={option => option.label}
{#if validation[column.name]} getOptionValue={option => option.value}
Success />
{:else} <span
Failure class={validation[column.name]
{#if errors[column.name]} ? "fieldStatusSuccess"
<Icon name="Help" tooltip={errors[column.name]} /> : "fieldStatusFailure"}
>
{#if validation[column.name]}
Success
{:else}
Failure
{#if errors[column.name]}
<Icon name="Help" tooltip={errors[column.name]} />
{/if}
{/if} {/if}
{/if} </span>
</span> <Icon
<Icon size="S"
size="S" name="Close"
name="Close" hoverable
hoverable on:click={() => deleteColumn(column.name)}
on:click={() => deleteColumn(column.name)} />
/> </div>
</div> {/each}
{/each} </div>
</div>
<div class="display-column">
<Select <Select
label="Display Column" label="Display Column"
bind:value={displayColumn} bind:value={displayColumn}
options={displayColumnOptions} options={displayColumnOptions}
sort sort
/> />
</div> {/if}
{/if} </Layout>
<style> <style>
.dropzone { .dropzone {
@ -269,7 +275,6 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
color: var(--ink);
padding: var(--spacing-m) var(--spacing-l); padding: var(--spacing-m) var(--spacing-l);
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;
display: inline-flex; display: inline-flex;
@ -283,20 +288,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
background-color: var(--grey-2); background-color: var(--spectrum-global-color-gray-300);
font-size: var(--font-size-xs); font-size: var(--font-size-s);
line-height: normal; line-height: normal;
border: var(--border-transparent); border: var(--border-transparent);
} }
.uploaded { .uploaded {
color: var(--blue); color: var(--spectrum-global-color-blue-600);
} }
.schema-fields {
margin-top: var(--spacing-xl);
}
.field { .field {
display: grid; display: grid;
grid-template-columns: 2fr 2fr 1fr auto; grid-template-columns: 2fr 2fr 1fr auto;
@ -322,8 +321,4 @@
.fieldStatusFailure :global(.spectrum-Icon) { .fieldStatusFailure :global(.spectrum-Icon) {
width: 12px; width: 12px;
} }
.display-column {
margin-top: var(--spacing-xl);
}
</style> </style>

29
packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
View File

@ -1,13 +1,7 @@
<script> <script>
import { goto, url } from "@roxi/routify" import { goto, url } from "@roxi/routify"
import { tables, datasources } from "stores/builder" import { tables, datasources } from "stores/builder"
import { import { notifications, Input, ModalContent } from "@budibase/bbui"
notifications,
Input,
Label,
ModalContent,
Layout,
} from "@budibase/bbui"
import TableDataImport from "../TableDataImport.svelte" import TableDataImport from "../TableDataImport.svelte"
import { import {
BUDIBASE_INTERNAL_DB_ID, BUDIBASE_INTERNAL_DB_ID,
@ -101,18 +95,11 @@
bind:value={name} bind:value={name}
{error} {error}
/> />
<div> <TableDataImport
<Layout gap="XS" noPadding> {promptUpload}
<Label grey extraSmall bind:rows
>Create a Table from a CSV or JSON file (Optional)</Label bind:schema
> bind:allValid
<TableDataImport bind:displayColumn
{promptUpload} />
bind:rows
bind:schema
bind:allValid
bind:displayColumn
/>
</Layout>
</div>
</ModalContent> </ModalContent>

1
packages/builder/src/components/common/DetailPopover.svelte
View File

@ -30,6 +30,7 @@
{showPopover} {showPopover}
on:open on:open
on:close on:close
customZindex={100}
> >
<div class="detail-popover"> <div class="detail-popover">
<div class="detail-popover__header"> <div class="detail-popover__header">

2
packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
View File

@ -60,10 +60,10 @@
buttonsCollapsed buttonsCollapsed
> >
<svelte:fragment slot="controls"> <svelte:fragment slot="controls">
<GridManageAccessButton />
{#if calculation} {#if calculation}
<GridViewCalculationButton /> <GridViewCalculationButton />
{/if} {/if}
<GridManageAccessButton />
<GridFilterButton /> <GridFilterButton />
<GridSortButton /> <GridSortButton />
<GridSizeButton /> <GridSizeButton />