CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-28 02:50:50 +12:00
Code Issues Projects Releases Wiki Activity

Integration of Backend and Data Components

Browse source
This commit is contained in:
cmack 2020-08-26 17:03:30 +01:00
parent 6684b31305
commit 1e38350199
18 changed files with 107 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/package.json
View file

@ -57,7 +57,7 @@
]
},
"dependencies": {
"@budibase/bbui": "^1.24.1",
"@budibase/bbui": "^1.27.1",
"@budibase/client": "^0.1.19",
"@budibase/colorpicker": "^1.0.1",
"@sentry/browser": "5.19.1",

13
packages/builder/src/components/userInterface/ModelViewFieldSelect.svelte
View file

@ -4,19 +4,22 @@
import { onMount } from "svelte"
export let componentInstance = {}
export let value = ""
export let onChange = (val = {})
let datasource = componentInstance.datasource
const models = $backendUiStore.models
let options = []
$: model = datasource ? models.find(m => m._id === datasource.modelId) : null
$: model = componentInstance.datasource
? models.find(m => m._id === componentInstance.datasource.modelId)
: null
$: if (model) {
options = datasource.isModel
options = componentInstance.datasource.isModel
? Object.keys(model.schema)
: Object.keys(model.views[datasource.name].schema)
: Object.keys(model.views[componentInstance.datasource.name].schema)
}
</script>
<OptionSelect {options} />
<OptionSelect {value} {onChange} {options} />

3
packages/builder/src/components/userInterface/ModelViewSelect.svelte
View file

@ -24,7 +24,7 @@
let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
label: key,
name: key,
modelId: value.modelId,
...value,
}))
return [...acc, ...viewsArr]
}, [])
@ -44,6 +44,7 @@
align="right">
<div class="model-view-container">
<p>Tables</p>
<ul>
{#each models as model}
<li

2
packages/builder/src/components/userInterface/PropertyControl.svelte
View file

@ -2,6 +2,7 @@
import { onMount, getContext } from "svelte"
export let label = ""
export let componentInstance = {}
export let control = null
export let key = ""
export let value
@ -36,6 +37,7 @@
<div data-cy={`${key}-prop-control`} class="control">
<svelte:component
this={control}
{componentInstance}
{...handlevalueKey(value)}
on:change={val => handleChange(key, val)}
onChange={val => handleChange(key, val)}

18
packages/builder/src/components/userInterface/SettingsView.svelte
View file

@ -1,4 +1,5 @@
<script>
import { isEmpty } from "lodash/fp"
import PropertyControl from "./PropertyControl.svelte"
import Input from "./PropertyPanelControls/Input.svelte"
import { goto } from "@sveltech/routify"
@ -30,9 +31,14 @@
{ key: "favicon", label: "Favicon", control: Input },
]
const canRenderControl = (key, dependsOn) =>
propExistsOnComponentDef(key) &&
(!dependsOn || componentInstance[dependsOn])
const canRenderControl = (key, dependsOn) => {
let test = !isEmpty(componentInstance[dependsOn])
return (
propExistsOnComponentDef(key) &&
(!dependsOn || !isEmpty(componentInstance[dependsOn]))
)
}
$: isPage = screenOrPageInstance && screenOrPageInstance.favicon
$: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
@ -68,11 +74,9 @@
label={definition.label}
key={definition.key}
value={componentInstance[definition.key]}
{componentInstance}
{onChange}
props={{ componentInstance, ...excludeProps(definition, [
'control',
'label',
]) }} />
props={{ ...excludeProps(definition, ['control', 'label']) }} />
{/if}
{/each}
{:else}

2
packages/builder/src/components/userInterface/pagesParsing/types.js
View file

@ -21,6 +21,6 @@ export const TYPE_MAP = {
},
},
models: {
default: [],
default: {},
},
}

67
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -680,12 +680,14 @@ export default {
{
label: "Name Label",
key: "nameLabel",
control: Input,
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Y Axis Label",
@ -789,6 +791,24 @@ export default {
key: "datasource",
control: ModelViewSelect,
},
{
label: "Name Label",
key: "nameLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Group Label",
key: "groupLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Value Label",
key: "valueLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Color",
key: "color",
@ -827,16 +847,6 @@ export default {
control: OptionSelect,
options: ["vertical", "horizontal", "full"],
},
{
label: "Group Label",
key: "groupLabel",
control: Input,
},
{
label: "Name Label",
key: "nameLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
@ -884,6 +894,24 @@ export default {
key: "datasource",
control: ModelViewSelect,
},
{
label: "Value Label",
key: "valueLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Topic Label",
key: "topicLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Date Label",
key: "dateLabel",
dependsOn: "datasource",
control: ModelViewFieldSelect,
},
{
label: "Colors",
key: "color",
@ -941,21 +969,6 @@ export default {
control: OptionSelect,
options: ["vertical", "horizontal", "full"],
},
{
label: "Date Label",
key: "dateLabel",
control: Input,
},
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",

1
packages/builder/src/helpers.js
View file

@ -1,6 +1,5 @@
import { last } from "lodash/fp"
import { pipe } from "components/common/core"
export const buildStyle = styles => {
let str = ""
for (let s in styles) {

12
packages/builder/yarn.lock
View file

@ -688,15 +688,15 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.24.2":
version "1.24.2"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.24.2.tgz#d3416062d6d17c4f346686984d4da3c595106c87"
"@budibase/bbui@^1.27.1":
version "1.27.1"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.27.1.tgz#79625cb4235a6f0dad07338a05f1525de7ccade3"
dependencies:
sirv-cli "^0.4.6"
"@budibase/client@^0.1.17":
version "0.1.18"
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.18.tgz#10cf733ed3e912d7a93f06c0f152a1dd7cff50a2"
"@budibase/client@^0.1.19":
version "0.1.19"
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
dependencies:
"@nx-js/compiler-util" "^2.0.0"
bcryptjs "^2.4.3"

9
packages/standard-components/components.json
View file

@ -500,6 +500,8 @@
"data": true,
"props": {
"datasource": "models",
"nameLabel": "string",
"valueLabel": "string",
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
@ -510,9 +512,6 @@
"isHorizontal": "bool",
"labelNumberFormat": "number",
"locale": "string",
"nameLabel": "string",
"valueLabel": "string",
"numberLabel": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
"useLegend": "bool",
@ -583,6 +582,8 @@
"data": true,
"props": {
"datasource": "models",
"nameLabel": "string",
"valueLabel": "string",
"color": "string",
"height": "string",
"width": "string",
@ -591,8 +592,6 @@
"groupLabel": "string",
"isAnimated": "bool",
"isHorizontal": "bool",
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"useLegend": "bool",
"tooltipTitle": "string"

2
packages/standard-components/dist/index.js.map vendored
View file

File diff suppressed because one or more lines are too long

8
packages/standard-components/rollup.config.js
View file

@ -3,6 +3,8 @@ import resolve from "rollup-plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import postcss from "rollup-plugin-postcss"
const lodash_fp_exports = ["isEmpty"]
export default {
input: "src/index.js",
output: [
@ -23,6 +25,10 @@ export default {
resolve({
browser: true,
}),
commonjs(),
commonjs({
namedExports: {
"lodash/fp": lodash_fp_exports,
},
}),
],
}

8
packages/standard-components/src/Chart/Bar.svelte
View file

@ -8,6 +8,7 @@
import britecharts from "britecharts"
import fetchData from "../fetchData.js"
import { onMount } from "svelte"
import { isEmpty } from "lodash/fp"
import { select } from "d3-selection"
import shortid from "shortid"
@ -28,6 +29,7 @@
export let customClick = null
let data = []
export let datasource = null
export let xAxisLabel = ""
export let yAxisLabel = ""
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
@ -54,11 +56,11 @@
export let yTicks = null
export let percentageAxisToMaxRatio = null
export let _bb
onMount(async () => {
if (datasource) {
if (!isEmpty(datasource)) {
data = await fetchData(datasource)
console.log("DATA", data)
if (schemaIsValid()) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()

8
packages/standard-components/src/Chart/Donut.svelte
View file

@ -4,6 +4,7 @@
import Legend from "./Legend.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { isEmpty } from "lodash/fp"
import { select } from "d3-selection"
import shortid from "shortid"
@ -22,7 +23,6 @@
let chartSvg = null
export let _bb
export let model
let store = _bb.store
@ -59,7 +59,7 @@
onMount(async () => {
if (chart) {
if (datasource) {
if (!isEmpty(datasource)) {
let _data = await fetchData(datasource)
data = checkAndReformatData(_data)
if (data.length === 0) {
@ -84,11 +84,11 @@
function checkAndReformatData(data) {
let _data = [...data]
if (valueKey) {
if (valueKey && valueKey !== "quantity") {
_data = reformatDataKey(_data, valueKey, "quantity")
}
if (nameKey) {
if (nameKey && nameKey !== "name") {
_data = reformatDataKey(_data, nameKey, "name")
}

9
packages/standard-components/src/Chart/GroupedBar.svelte
View file

@ -6,14 +6,10 @@
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
import { isEmpty } from "lodash/fp"
const _id = shortid.generate()
export let _bb
export let datasource = {}
let store = _bb.store
const chart = britecharts.groupedBar()
const chartClass = `groupedbar-container-${_id}`
const legendClass = `legend-container-${_id}`
@ -26,6 +22,7 @@
export let customClick = null
let data = []
export let datasource = {}
export let color = "britecharts"
export let height = 200
export let width = 200
@ -51,7 +48,7 @@
(hasProp(data, "value") || hasProp(data, valueLabel))
onMount(async () => {
if (model) {
if (!isEmpty(datasource)) {
data = await fetchData(datasource)
if (schemaIsValid()) {
chartContainer = select(`.${chartClass}`)

7
packages/standard-components/src/Chart/Line.svelte
View file

@ -3,17 +3,15 @@
import fetchData from "../fetchData.js"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { isEmpty } from "lodash/fp"
import { select } from "d3-selection"
import shortid from "shortid"
const _id = shortid.generate()
export let _bb
export let datasource = {}
let store = _bb.store
const chart = britecharts.line()
const chartClass = `line-container-${_id}`
@ -66,8 +64,9 @@
export let tooltipTitle = ""
onMount(async () => {
if (datasource) {
if (!isEmpty(datasource)) {
data = await getAndPrepareData()
console.log("DATA", data)
if (data.dataByTopic.length > 0) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()

6
packages/standard-components/src/DataTable.svelte
View file

@ -5,8 +5,7 @@
import ArrowDown from "./icons/ArrowDown.svelte"
import fsort from "fast-sort"
import fetchData from "./fetchData.js"
export let _bb
import { isEmpty } from "lodash/fp"
export let backgroundColor
export let color
@ -16,7 +15,6 @@
let data = []
let headers = []
let store = _bb.store
let sort = {}
let sorted = []
@ -30,7 +28,7 @@
$: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
onMount(async () => {
if (datasource) {
if (!isEmpty(datasource)) {
data = await fetchData(datasource)
if (data) {
headers = Object.keys(data[0]).filter(shouldDisplayField)

27
packages/standard-components/src/List.svelte
View file

@ -1,34 +1,21 @@
<script>
import { onMount } from "svelte"
import fetchData from "./fetchData.js"
import { isEmpty } from "lodash/fp"
export let _bb
export let model
export let datasource = []
let headers = []
let store = _bb.store
let target
async function fetchData() {
if (!model || !model.length) return
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
onMount(async () => {
if (!isEmpty(datasource)) {
const data = await fetchData(datasource)
_bb.attachChildren(target, {
hydrate: false,
context: json,
context: data,
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
$: if (model) fetchData()
onMount(async () => {
await fetchData()
})
</script>