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

Refactor all block link settings to be URLs rather than onclick handlers. Add settings for linking card titles in card list blocks

This commit is contained in:
Andrew Kingston 2021-11-10 15:52:36 +00:00
parent 2b59d44e06
commit 5302c85f49
4 changed files with 117 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/client/manifest.json
View File

@ -2595,6 +2595,11 @@
"key": "linkURL",
"label": "Link URL"
},
{
"type": "boolean",
"key": "linkPeek",
"label": "Open link in modal"
},
{
"type": "boolean",
"key": "horizontal",
@ -2730,18 +2735,23 @@
{
"type": "boolean",
"key": "showTitleButton",
"label": "Show button",
"label": "Show link button",
"defaultValue": false
},
{
"type": "boolean",
"label": "Open link in modal",
"key": "titleButtonPeek"
},
{
"type": "text",
"key": "titleButtonText",
"label": "Button text"
},
{
"type": "event",
"label": "Button action",
"key": "titleButtonOnClick"
"type": "url",
"label": "Button link",
"key": "titleButtonURL"
}
]
},
@ -2838,7 +2848,22 @@
"key": "cardImageURL",
"label": "Image URL",
"nested": true
},
{
"type": "boolean",
"key": "linkCardTitle",
"label": "Link card title"
},
{
"type": "boolean",
"key": "cardPeek",
"label": "Open link in modal"
},
{
"type": "url",
"label": "Link screen",
"key": "cardURL",
"nested": true
},
{
"type": "boolean",
@ -2855,7 +2880,6 @@
"key": "cardButtonText",
"label": "Button text",
"nested": true
},
{
"type": "event",
@ -2872,7 +2896,12 @@
{
"type": "boolean",
"key": "showTitleButton",
"label": "Show button"
"label": "Show link button"
},
{
"type": "boolean",
"label": "Open link in modal",
"key": "titleButtonPeek"
},
{
"type": "text",
@ -2880,9 +2909,21 @@
"label": "Button text"
},
{
"type": "event",
"label": "Button action",
"key": "titleButtonOnClick"
"type": "url",
"label": "Button link",
"key": "titleButtonURL"
}
]
},
{
"section": true,
"name": "Advanced",
"settings": [
{
"type": "field",
"label": "ID column for linking (appended to URL)",
"key": "linkColumn",
"placeholder": "Default"
}
]
}

42
packages/client/src/components/app/SpectrumCard.svelte
View File

@ -8,15 +8,22 @@
export let description
export let imageURL
export let linkURL
export let linkPeek
export let horizontal
export let showButton
export let buttonText
export let buttonOnClick
const { styleable, linkable } = getContext("sdk")
const { styleable, routeStore } = getContext("sdk")
const component = getContext("component")
$: external = linkURL && !linkURL.startsWith("/")
const handleLink = e => {
if (!linkURL) {
return
}
e.preventDefault()
routeStore.actions.navigate(linkURL, linkPeek)
}
</script>
<div
@ -37,16 +44,10 @@
<div class="spectrum-Card-header">
<div
class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
on:click={handleLink}
class:link={linkURL}
>
{#if linkURL}
{#if external}
<a href={linkURL}>{title || "Card Title"}</a>
{:else}
<a use:linkable href={linkURL}>{title || "Card Title"}</a>
{/if}
{:else}
{title || "Card Title"}
{/if}
{title || "Card Title"}
</div>
</div>
{#if subtitle}
@ -88,11 +89,12 @@
.spectrum-Card-container {
padding: var(--spectrum-global-dimension-size-50) 0;
}
.spectrum-Card-title :global(a) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
.spectrum-Card-title.link {
transition: color 130ms ease-in-out;
}
.spectrum-Card-title.link:hover {
cursor: pointer;
color: var(--spectrum-link-primary-m-text-color-hover);
}
.spectrum-Card-subtitle {
text-overflow: ellipsis;
@ -103,14 +105,6 @@
word-wrap: anywhere;
white-space: pre-wrap;
}
a {
transition: color 130ms ease-in-out;
color: var(--spectrum-alias-text-color);
}
a:hover {
color: var(--spectrum-link-primary-m-text-color-hover);
}
.horizontal .spectrum-Card-coverPhoto {
flex: 0 0 160px;
height: auto;

38
packages/client/src/components/app/blocks/CardListWithSearch.svelte
View File

@ -14,15 +14,20 @@
export let limit
export let showTitleButton
export let titleButtonText
export let titleButtonOnClick
export let titleButtonURL
export let titleButtonPeek
export let cardTitle
export let cardSubtitle
export let cardDescription
export let cardImageURL
export let linkCardTitle
export let cardURL
export let cardPeek
export let cardHorizontal
export let showCardButton
export let cardButtonText
export let cardButtonOnClick
export let linkColumn
const { API, styleable } = getContext("sdk")
const context = getContext("context")
@ -37,11 +42,27 @@
let formId
let dataProviderId
let repeaterId
let schema
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: cardWidth = cardHorizontal ? 420 : 300
$: fullCardURL = buildFullCardUrl(
linkCardTitle,
cardURL,
repeaterId,
linkColumn
)
$: titleButtonAction = [
{
"##eventHandlerType": "Navigate To",
parameters: {
peek: titleButtonPeek,
url: titleButtonURL,
},
},
]
// Enrich the default filter with the specified search fields
const enrichFilter = (filter, columns, formId) => {
@ -75,6 +96,16 @@
return enrichedColumns.slice(0, 3)
}
// Builds a full details page URL for the card title
const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
if (!link || !url || !repeaterId) {
return null
}
const col = linkColumn || "_id"
const split = url.split("/:")
return `${split[0]}/{{ [${repeaterId}].[${col}] }}`
}
// Load the datasource schema on mount so we can determine column types
onMount(async () => {
if (dataSource) {
@ -114,7 +145,7 @@
<BlockComponent
type="button"
props={{
onClick: titleButtonOnClick,
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
@ -137,6 +168,7 @@
>
<BlockComponent
type="repeater"
bind:id={repeaterId}
context="repeater"
props={{
dataProvider: `{{ literal [${dataProviderId}] }}`,
@ -162,6 +194,8 @@
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
styles={{
width: "auto",

14
packages/client/src/components/app/blocks/TableWithSearch.svelte
View File

@ -22,7 +22,8 @@
export let linkPeek
export let showTitleButton
export let titleButtonText
export let titleButtonOnClick
export let titleButtonURL
export let titleButtonPeek
const { API, styleable } = getContext("sdk")
const context = getContext("context")
@ -41,6 +42,15 @@
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: titleButtonAction = [
{
"##eventHandlerType": "Navigate To",
parameters: {
peek: titleButtonPeek,
url: titleButtonURL,
},
},
]
// Enrich the default filter with the specified search fields
const enrichFilter = (filter, columns, formId) => {
@ -113,7 +123,7 @@
<BlockComponent
type="button"
props={{
onClick: titleButtonOnClick,
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}