Add Row Explorer Block (#8454)
* Add Row Explorer Block and Row Details Component * PR Feedback * adding showSaveButton prop to formblock in row explorer * PR Feedback * PR Feedback * Change row explorer name in manifest Co-authored-by: Martin McKeaveney <martinmckeaveney@gmail.com>
This commit is contained in:
Gerard Burns
GitHub
parent
e63afd560a
commit
a33d4cae52
|
|
@ -7,7 +7,8 @@
|
||||||
"cardsblock",
|
"cardsblock",
|
||||||
"repeaterblock",
|
"repeaterblock",
|
||||||
"formblock",
|
"formblock",
|
||||||
"chartblock"
|
"chartblock",
|
||||||
|
"rowexplorer"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -5186,5 +5186,88 @@
|
||||||
"suffix": "repeater"
|
"suffix": "repeater"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"rowexplorer": {
|
||||||
|
"block": true,
|
||||||
|
"name": "Row Explorer Block",
|
||||||
|
"icon": "PersonalizationField",
|
||||||
|
"size": {
|
||||||
|
"width": 600,
|
||||||
|
"height": 400
|
||||||
|
},
|
||||||
|
"settings": [
|
||||||
|
{
|
||||||
|
"type": "table",
|
||||||
|
"label": "Table",
|
||||||
|
"key": "dataSource",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"label": "Height",
|
||||||
|
"key": "height",
|
||||||
|
"defaultValue": "426px"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"section": true,
|
||||||
|
"name": "Cards",
|
||||||
|
"settings": [
|
||||||
|
{
|
||||||
|
"type": "field",
|
||||||
|
"label": "Search Field",
|
||||||
|
"key": "cardSearchField",
|
||||||
|
"nested": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"key": "cardTitle",
|
||||||
|
"label": "Title",
|
||||||
|
"nested": true,
|
||||||
|
"defaultValue": "Title"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"key": "cardSubtitle",
|
||||||
|
"label": "Subtitle",
|
||||||
|
"nested": true,
|
||||||
|
"defaultValue": "Subtitle"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"key": "cardDescription",
|
||||||
|
"label": "Description",
|
||||||
|
"nested": true,
|
||||||
|
"defaultValue": "Description"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"key": "cardImageURL",
|
||||||
|
"label": "Image URL",
|
||||||
|
"nested": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"section": true,
|
||||||
|
"name": "Details",
|
||||||
|
"settings": [
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"key": "detailTitle",
|
||||||
|
"label": "Title"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "multifield",
|
||||||
|
"label": "Fields",
|
||||||
|
"key": "detailFields",
|
||||||
|
"nested": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"context": {
|
||||||
|
"type": "schema",
|
||||||
|
"suffix": "repeater"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<script>
|
||||||
|
import Block from "components/Block.svelte"
|
||||||
|
import BlockComponent from "components/BlockComponent.svelte"
|
||||||
|
import { makePropSafe as safe } from "@budibase/string-templates"
|
||||||
|
import { generate } from "shortid"
|
||||||
|
|
||||||
|
export let dataSource
|
||||||
|
export let height
|
||||||
|
|
||||||
|
export let cardTitle
|
||||||
|
export let cardSubtitle
|
||||||
|
export let cardDescription
|
||||||
|
export let cardImageURL
|
||||||
|
export let cardSearchField
|
||||||
|
|
||||||
|
export let detailFields
|
||||||
|
export let detailTitle
|
||||||
|
|
||||||
|
const stateKey = generate()
|
||||||
|
|
||||||
|
let listDataProviderId
|
||||||
|
let listRepeaterId
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Block>
|
||||||
|
<BlockComponent
|
||||||
|
type="container"
|
||||||
|
props={{
|
||||||
|
direction: "row",
|
||||||
|
gap: "M",
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
custom: `
|
||||||
|
height: ${height} !important;
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="dataprovider"
|
||||||
|
order={0}
|
||||||
|
bind:id={listDataProviderId}
|
||||||
|
props={{
|
||||||
|
dataSource,
|
||||||
|
paginate: true,
|
||||||
|
limit: 10,
|
||||||
|
filter: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
field: cardSearchField,
|
||||||
|
operator: "fuzzy",
|
||||||
|
type: "string",
|
||||||
|
value: `{{ ${safe("state")}.${safe(stateKey + "-search")} }}`,
|
||||||
|
valueType: "Binding",
|
||||||
|
noValue: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
custom: `
|
||||||
|
flex: 3;
|
||||||
|
overflow: scroll;
|
||||||
|
{{#if (and ${safe("state")}.${safe(stateKey)} ${safe(
|
||||||
|
"device"
|
||||||
|
)}.${safe("mobile")}) }}
|
||||||
|
display: none;
|
||||||
|
{{/if}}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="form"
|
||||||
|
order={0}
|
||||||
|
styles={{
|
||||||
|
normal: {
|
||||||
|
"margin-bottom": "12px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="stringfield"
|
||||||
|
props={{
|
||||||
|
placeholder: "Search...",
|
||||||
|
field: `${stateKey}-search`,
|
||||||
|
onChange: [
|
||||||
|
{
|
||||||
|
parameters: {
|
||||||
|
key: `${stateKey}-search`,
|
||||||
|
type: "set",
|
||||||
|
persist: null,
|
||||||
|
value: `{{ ${safe("eventContext")}.${safe("value")} }}`,
|
||||||
|
},
|
||||||
|
"##eventHandlerType": "Update State",
|
||||||
|
id: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BlockComponent>
|
||||||
|
<BlockComponent
|
||||||
|
type="repeater"
|
||||||
|
order={1}
|
||||||
|
bind:id={listRepeaterId}
|
||||||
|
context="repeater"
|
||||||
|
props={{
|
||||||
|
dataProvider: `{{ literal ${safe(listDataProviderId)} }}`,
|
||||||
|
direction: "column",
|
||||||
|
gap: "S",
|
||||||
|
noRowsMessage: "No data",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="spectrumcard"
|
||||||
|
props={{
|
||||||
|
title: cardTitle,
|
||||||
|
subtitle: cardSubtitle,
|
||||||
|
description: cardDescription,
|
||||||
|
imageURL: cardImageURL,
|
||||||
|
horizontal: true,
|
||||||
|
buttonOnClick: [
|
||||||
|
{
|
||||||
|
parameters: {
|
||||||
|
key: stateKey,
|
||||||
|
type: "set",
|
||||||
|
persist: null,
|
||||||
|
value: `{{ ${safe(listRepeaterId)}.${safe("_id")} }}`,
|
||||||
|
},
|
||||||
|
"##eventHandlerType": "Update State",
|
||||||
|
id: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
normal: {
|
||||||
|
width: "auto",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BlockComponent>
|
||||||
|
</BlockComponent>
|
||||||
|
<BlockComponent
|
||||||
|
type="container"
|
||||||
|
order={1}
|
||||||
|
props={{
|
||||||
|
hAlign: "center",
|
||||||
|
vAlign: "middle",
|
||||||
|
size: "grow",
|
||||||
|
direction: "column",
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
custom: `
|
||||||
|
padding: 20px;
|
||||||
|
background-color: var(--spectrum-global-color-gray-50));
|
||||||
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
|
border-radius: 4px;
|
||||||
|
flex: 4;
|
||||||
|
{{#if (or ${safe("state")}.${safe(stateKey)} ${safe("device")}.${safe(
|
||||||
|
"mobile"
|
||||||
|
)}) }}
|
||||||
|
display: none;
|
||||||
|
{{/if}}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="icon"
|
||||||
|
order={0}
|
||||||
|
props={{
|
||||||
|
icon: "ri-list-check-2",
|
||||||
|
size: "ri-2x",
|
||||||
|
color: "var(--spectrum-global-color-gray-700)",
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
normal: {
|
||||||
|
"margin-bottom": "12px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<BlockComponent
|
||||||
|
type="text"
|
||||||
|
order={1}
|
||||||
|
props={{
|
||||||
|
text: "Select a row to view its fields",
|
||||||
|
color: "var(--spectrum-global-color-gray-700)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BlockComponent>
|
||||||
|
<BlockComponent
|
||||||
|
type="container"
|
||||||
|
order={2}
|
||||||
|
props={{
|
||||||
|
hAlign: "center",
|
||||||
|
vAlign: "top",
|
||||||
|
size: "grow",
|
||||||
|
direction: "column",
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
custom: `
|
||||||
|
background-color: var(--spectrum-global-color-gray-50));
|
||||||
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
flex: 4;
|
||||||
|
{{#if (isFalsey ${safe("state")}.${safe(stateKey)}) }}
|
||||||
|
display: none;
|
||||||
|
{{/if}}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BlockComponent
|
||||||
|
type="button"
|
||||||
|
order={0}
|
||||||
|
props={{
|
||||||
|
text: "← Back",
|
||||||
|
onClick: [
|
||||||
|
{
|
||||||
|
parameters: {
|
||||||
|
key: stateKey,
|
||||||
|
type: "set",
|
||||||
|
persist: null,
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
"##eventHandlerType": "Update State",
|
||||||
|
id: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
custom: `
|
||||||
|
align-self: flex-end;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
{{#if (not ${safe("device")}.${safe("mobile")}) }}
|
||||||
|
display: none;
|
||||||
|
{{/if}}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<BlockComponent
|
||||||
|
type="formblock"
|
||||||
|
order={1}
|
||||||
|
props={{
|
||||||
|
showSaveButton: true,
|
||||||
|
dataSource,
|
||||||
|
actionType: "Update",
|
||||||
|
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
|
||||||
|
fields: detailFields,
|
||||||
|
title: detailTitle,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BlockComponent>
|
||||||
|
</BlockComponent>
|
||||||
|
</Block>
|
||||||
|
|
@ -3,3 +3,4 @@ export { default as cardsblock } from "./CardsBlock.svelte"
|
||||||
export { default as repeaterblock } from "./RepeaterBlock.svelte"
|
export { default as repeaterblock } from "./RepeaterBlock.svelte"
|
||||||
export { default as formblock } from "./FormBlock.svelte"
|
export { default as formblock } from "./FormBlock.svelte"
|
||||||
export { default as chartblock } from "./ChartBlock.svelte"
|
export { default as chartblock } from "./ChartBlock.svelte"
|
||||||
|
export { default as rowexplorer } from "./RowExplorer.svelte"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue