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

Add working side panels to table blocks

This commit is contained in:
Andrew Kingston 2022-11-17 10:16:45 +00:00
parent e85cc09611
commit bc6a0b2f22
8 changed files with 242 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View File

@ -25,7 +25,7 @@ const generateTableBlock = table => {
linkURL: `${rowListUrl(table)}/:id`,
showAutoColumns: false,
showTitleButton: true,
titleButtonText: "Create new",
titleButtonText: "Create row",
titleButtonURL: newRowUrl(table),
title: table.name,
dataSource: {

3
packages/builder/src/components/design/settings/componentSettings.js
View File

@ -1,4 +1,4 @@
import { Checkbox, Select, Stepper } from "@budibase/bbui"
import { Checkbox, Select, RadioGroup, Stepper } from "@budibase/bbui"
import DataSourceSelect from "./controls/DataSourceSelect.svelte"
import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
import DataProviderSelect from "./controls/DataProviderSelect.svelte"
@ -24,6 +24,7 @@ import BarButtonList from "./controls/BarButtonList.svelte"
const componentMap = {
text: DrawerBindableCombobox,
select: Select,
radio: RadioGroup,
dataSource: DataSourceSelect,
"dataSource/s3": S3DataSourceSelect,
dataProvider: DataProviderSelect,

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
View File

@ -36,7 +36,9 @@
section.settings.forEach(setting => {
setting.visible = canRenderControl(instance, setting, isScreen)
})
section.visible = section.settings.some(setting => setting.visible)
section.visible =
section.name === "General" ||
section.settings.some(setting => setting.visible)
})
return sections

230
packages/client/manifest.json
View File

@ -3733,12 +3733,6 @@
"key": "dataProvider",
"required": true
},
{
"type": "number",
"label": "Row count",
"key": "rowCount",
"defaultValue": 8
},
{
"type": "columns",
"label": "Columns",
@ -3762,6 +3756,12 @@
}
]
},
{
"type": "number",
"label": "Row count",
"key": "rowCount",
"defaultValue": 8
},
{
"type": "boolean",
"label": "Quiet",
@ -3772,12 +3772,6 @@
"label": "Compact",
"key": "compact"
},
{
"type": "boolean",
"label": "Show auto columns",
"key": "showAutoColumns",
"defaultValue": false
},
{
"type": "boolean",
"label": "Allow row selection",
@ -3785,14 +3779,20 @@
"defaultValue": false,
"info": "Row selection is only compatible with internal or SQL tables"
},
{
"type": "event",
"label": "On row click",
"key": "onClick",
"context": [
"section": true,
"name": "On Row Click",
"settings": [
{
"label": "Clicked row",
"key": "row"
"type": "event",
"key": "onClick",
"context": [
{
"label": "Clicked row",
"key": "row"
}
]
}
]
}
@ -4445,70 +4445,15 @@
"label": "Title",
"key": "title"
},
{
"type": "dataSource",
"label": "Data",
"key": "dataSource",
"required": true
},
{
"type": "searchfield",
"label": "Search Columns",
"key": "searchColumns",
"placeholder": "Choose search columns",
"info": "Only the first 5 search columns will be used"
},
{
"type": "filter",
"label": "Filtering",
"key": "filter"
},
{
"type": "field/sortable",
"label": "Sort Column",
"key": "sortColumn"
},
{
"type": "select",
"label": "Sort Order",
"key": "sortOrder",
"options": [
"Ascending",
"Descending"
],
"defaultValue": "Descending"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "spectrum--medium",
"options": [
{
"label": "Medium",
"value": "spectrum--medium"
},
{
"label": "Large",
"value": "spectrum--large"
}
]
},
{
"type": "boolean",
"label": "Paginate",
"key": "paginate",
"defaultValue": true
},
{
"section": true,
"name": "Table",
"settings": [
{
"type": "number",
"label": "Scroll Limit",
"key": "rowCount",
"defaultValue": 8
"type": "dataSource",
"label": "Data",
"key": "dataSource",
"required": true
},
{
"type": "columns",
@ -4518,9 +4463,52 @@
"placeholder": "All columns",
"nested": true
},
{
"type": "field/sortable",
"label": "Sort By",
"key": "sortColumn"
},
{
"type": "select",
"label": "Sort Order",
"key": "sortOrder",
"options": [
"Ascending",
"Descending"
],
"defaultValue": "Descending"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "spectrum--medium",
"options": [
{
"label": "Medium",
"value": "spectrum--medium"
},
{
"label": "Large",
"value": "spectrum--large"
}
]
},
{
"type": "number",
"label": "Scroll Limit",
"key": "rowCount",
"defaultValue": 8
},
{
"type": "boolean",
"label": "Quiet table variant",
"label": "Paginate",
"key": "paginate",
"defaultValue": true
},
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
},
{
@ -4528,21 +4516,53 @@
"label": "Compact",
"key": "compact"
},
{
"type": "boolean",
"label": "Show auto columns",
"key": "showAutoColumns"
},
{
"type": "boolean",
"label": "Allow row selection",
"key": "allowSelectRows",
"info": "Row selection is only compatible with internal or SQL tables"
},
{
"type": "filter",
"label": "Filtering",
"key": "filter"
},
{
"type": "searchfield",
"label": "Search Fields",
"key": "searchColumns",
"placeholder": "Choose search fields",
"info": "Only the first 5 search fields will be used"
}
]
},
{
"section": true,
"name": "On row click",
"settings": [
{
"type": "radio",
"key": "clickBehaviour",
"defaultValue": "details",
"options": [
{
"label": "Show details side panel",
"value": "details"
},
{
"label": "Run actions",
"value": "actions"
}
]
},
{
"type": "event",
"label": "On row click",
"key": "onClick",
"nested": true,
"dependsOn": {
"setting": "clickBehaviour",
"value": "actions"
},
"context": [{
"label": "Clicked row",
"key": "row"
@ -4552,28 +4572,46 @@
},
{
"section": true,
"name": "Title button",
"name": "Button",
"settings": [
{
"type": "boolean",
"key": "showTitleButton",
"label": "Show link button",
"defaultValue": false
},
{
"type": "boolean",
"label": "Open link in modal",
"key": "titleButtonPeek"
"label": "Show button above table",
"defaultValue": true
},
{
"type": "text",
"key": "titleButtonText",
"label": "Button text"
"label": "Text",
"defaultValue": "Create row",
"dependsOn": "showTitleButton"
},
{
"type": "url",
"label": "Button link",
"key": "titleButtonURL"
"type": "radio",
"key": "titleButtonClickBehaviour",
"label": "On Click",
"dependsOn": "showTitleButton",
"defaultValue": "new",
"options": [
{
"label": "Show new row side panel",
"value": "new"
},
{
"label": "Run actions",
"value": "actions"
}
]
},
{
"type": "event",
"key": "onClickTitleButton",
"nested": true,
"dependsOn": {
"setting": "titleButtonClickBehaviour",
"value": "actions"
}
}
]
}

8
packages/client/src/components/app/SidePanel.svelte
View File

@ -1,5 +1,5 @@
<script>
import { getContext } from "svelte"
import { getContext, onMount } from "svelte"
const component = getContext("component")
const { styleable, sidePanelStore, builderStore } = getContext("sdk")
@ -15,11 +15,9 @@
}
const update = visible => {
if (visible) {
sidePanelStore.actions.open($component.id)
target.appendChild(el)
el.hidden = false
} else {
sidePanelStore.actions.close()
destroy()
el.hidden = true
}
@ -41,7 +39,9 @@
hidden
class="side-panel"
>
<slot />
{#if open}
<slot />
{/if}
</div>
<style>

112
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -13,37 +13,68 @@
export let sortOrder
export let paginate
export let tableColumns
export let showAutoColumns
export let rowCount
export let quiet
export let compact
export let size
export let allowSelectRows
export let clickBehaviour
export let onClick
export let showTitleButton
export let titleButtonText
export let titleButtonURL
export let titleButtonPeek
export let titleButtonClickBehaviour
export let onClickTitleButton
const { fetchDatasourceSchema } = getContext("sdk")
const stateKey = `${Math.random()}-id`
let formId
let dataProviderId
let detailsSidePanelId
let newRowSidePanelId
let schema
let schemaLoaded = false
$: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: titleButtonAction = [
{
"##eventHandlerType": "Navigate To",
parameters: {
peek: titleButtonPeek,
url: titleButtonURL,
},
},
]
$: normalFields = getNormalFields(schema)
$: rowClickActions =
clickBehaviour === "actions"
? onClick
: [
{
id: 0,
"##eventHandlerType": "Update State",
parameters: {
key: stateKey,
type: "set",
persist: false,
value: `{{ ${safe("eventContext")}.${safe("row")}.${safe(
"_id"
)} }}`,
},
},
{
id: 1,
"##eventHandlerType": "Open Side Panel",
parameters: {
id: detailsSidePanelId,
},
},
]
$: buttonClickActions =
titleButtonClickBehaviour === "actions"
? onClickTitleButton
: [
{
id: 0,
"##eventHandlerType": "Open Side Panel",
parameters: {
id: newRowSidePanelId,
},
},
]
// Load the datasource schema so we can determine column types
const fetchSchema = async dataSource => {
@ -54,6 +85,17 @@
}
schemaLoaded = true
}
const getNormalFields = schema => {
if (!schema) {
return []
}
return Object.entries(schema)
.filter(entry => {
return !entry[1].autocolumn
})
.map(entry => entry[0])
}
</script>
{#if schemaLoaded}
@ -126,7 +168,7 @@
<BlockComponent
type="button"
props={{
onClick: titleButtonAction,
onClick: buttonClickActions,
text: titleButtonText,
type: "cta",
}}
@ -142,7 +184,7 @@
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortColumn: sortColumn || normalFields?.[0],
sortOrder,
paginate,
limit: rowCount,
@ -155,13 +197,51 @@
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
columns: tableColumns,
showAutoColumns,
rowCount,
quiet,
compact,
allowSelectRows,
size,
onClick,
onClick: rowClickActions,
}}
/>
</BlockComponent>
<BlockComponent
type="sidepanel"
bind:id={detailsSidePanelId}
context="details-side-panel"
order={2}
>
<BlockComponent
type="formblock"
props={{
dataSource,
showSaveButton: true,
showDeleteButton: true,
actionType: "Update",
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
fields: normalFields,
title: "Row Details",
labelPosition: "left",
}}
/>
</BlockComponent>
<BlockComponent
type="sidepanel"
bind:id={newRowSidePanelId}
context="new-side-panel"
order={3}
>
<BlockComponent
type="formblock"
props={{
dataSource,
showSaveButton: true,
showDeleteButton: false,
actionType: "Create",
fields: normalFields,
title: "Create Row",
labelPosition: "left",
}}
/>
</BlockComponent>

2
packages/client/src/components/app/forms/Form.svelte
View File

@ -66,7 +66,7 @@
$: initialValues = getInitialValues(actionType, dataSource, $context)
$: resetKey = Helpers.hashString(
JSON.stringify(initialValues) + JSON.stringify(schema) + disabled
JSON.stringify(initialValues) + JSON.stringify(dataSource) + disabled
)
</script>

3
packages/client/src/components/app/table/Table.svelte
View File

@ -7,7 +7,6 @@
export let dataProvider
export let columns
export let showAutoColumns
export let rowCount
export let quiet
export let size
@ -32,7 +31,7 @@
$: loading = dataProvider?.loading ?? false
$: data = dataProvider?.rows || []
$: fullSchema = dataProvider?.schema ?? {}
$: fields = getFields(fullSchema, columns, showAutoColumns)
$: fields = getFields(fullSchema, columns, false)
$: schema = getFilteredSchema(fullSchema, fields, hasChildren)
$: setSorting = getAction(
dataProvider?.id,