2020-09-18 04:50:54 +12:00
|
|
|
<script>
|
2021-01-21 02:32:15 +13:00
|
|
|
import { processStringSync } from "@budibase/string-templates"
|
2020-09-18 23:01:57 +12:00
|
|
|
import { get } from "lodash/fp"
|
2021-04-01 22:29:47 +13:00
|
|
|
import { tables } from "stores/backend"
|
2020-09-18 04:50:54 +12:00
|
|
|
|
2020-09-18 23:01:57 +12:00
|
|
|
export let block
|
2020-09-18 04:50:54 +12:00
|
|
|
|
2020-09-18 23:01:57 +12:00
|
|
|
$: inputs = enrichInputs(block.inputs)
|
|
|
|
$: tagline = formatTagline(block.tagline, block.schema, inputs)
|
|
|
|
$: html = (tagline || "")
|
|
|
|
.replace(/{{\s*/g, "<span>")
|
|
|
|
.replace(/\s*}}/g, "</span>")
|
2020-09-18 04:50:54 +12:00
|
|
|
|
2020-09-18 23:01:57 +12:00
|
|
|
function enrichInputs(inputs) {
|
|
|
|
let enrichedInputs = { ...inputs, enriched: {} }
|
2020-10-10 07:10:28 +13:00
|
|
|
const tableId = inputs.tableId || inputs.row?.tableId
|
2020-10-10 06:49:23 +13:00
|
|
|
if (tableId) {
|
2021-03-23 23:54:03 +13:00
|
|
|
enrichedInputs.enriched.table = $tables.list.find(
|
2020-10-10 06:49:23 +13:00
|
|
|
table => table._id === tableId
|
2020-09-18 23:01:57 +12:00
|
|
|
)
|
|
|
|
}
|
|
|
|
return enrichedInputs
|
|
|
|
}
|
|
|
|
|
|
|
|
function formatTagline(tagline, schema, inputs) {
|
|
|
|
// Add bold tags around inputs
|
|
|
|
let formattedTagline = tagline
|
|
|
|
.replace(/{{/g, "<b>{{")
|
|
|
|
.replace(/}}/, "}}</b>")
|
|
|
|
|
|
|
|
// Extract schema paths for any input bindings
|
2020-09-23 02:42:56 +12:00
|
|
|
let inputPaths = formattedTagline.match(/{{\s*\S+\s*}}/g) || []
|
|
|
|
inputPaths = inputPaths.map(path => path.replace(/[{}]/g, "").trim())
|
|
|
|
const schemaPaths = inputPaths.map(path =>
|
|
|
|
path.replace(/\./g, ".properties.")
|
|
|
|
)
|
2020-09-18 04:50:54 +12:00
|
|
|
|
2020-09-18 23:01:57 +12:00
|
|
|
// Replace any enum bindings with their pretty equivalents
|
|
|
|
schemaPaths.forEach((path, idx) => {
|
|
|
|
const prettyValues = get(`${path}.pretty`, schema)
|
|
|
|
if (prettyValues) {
|
|
|
|
const enumValues = get(`${path}.enum`, schema)
|
|
|
|
const inputPath = inputPaths[idx]
|
|
|
|
const value = get(inputPath, { inputs })
|
|
|
|
const valueIdx = enumValues.indexOf(value)
|
|
|
|
const prettyValue = prettyValues[valueIdx]
|
|
|
|
if (prettyValue == null) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
formattedTagline = formattedTagline.replace(
|
2021-06-16 06:36:56 +12:00
|
|
|
new RegExp(`{{\\s*${inputPath}\\s*}}`),
|
2020-09-18 23:01:57 +12:00
|
|
|
prettyValue
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-20 07:44:29 +13:00
|
|
|
// Fill in bindings with templating library
|
2021-01-21 02:32:15 +13:00
|
|
|
return processStringSync(formattedTagline, { inputs })
|
2020-09-18 23:01:57 +12:00
|
|
|
}
|
2020-09-18 04:50:54 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div>
|
2023-07-06 05:00:50 +12:00
|
|
|
<!-- eslint-disable-next-line svelte/no-at-html-tags-->
|
2020-09-18 04:50:54 +12:00
|
|
|
{@html html}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
2020-09-18 23:01:57 +12:00
|
|
|
div {
|
|
|
|
line-height: 1.25;
|
|
|
|
}
|
2020-09-18 04:50:54 +12:00
|
|
|
div :global(span) {
|
|
|
|
font-size: 0.9em;
|
|
|
|
background-color: var(--purple-light);
|
|
|
|
padding: var(--spacing-xs);
|
|
|
|
border-radius: var(--border-radius-m);
|
2020-09-18 23:01:57 +12:00
|
|
|
display: inline-block;
|
|
|
|
margin: 1px;
|
2020-09-18 04:50:54 +12:00
|
|
|
}
|
|
|
|
</style>
|