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

Merge pull request #404 from mjashanks/bugfixes 

Bugfixes from #387 + Record Detail component
This commit is contained in:
Michael Shanks 2020-07-01 20:44:44 +01:00 committed by GitHub
parent da05a0873b c5eae1ec2f
commit 5f4747aa25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 145 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
View File

@ -36,6 +36,7 @@
class={determineClassName(type)} class={determineClassName(type)}
bind:value bind:value
class:uk-form-danger={errors.length > 0}> class:uk-form-danger={errors.length > 0}>
<option></option>
{#each options as opt} {#each options as opt}
<option value={opt}>{opt}</option> <option value={opt}>{opt}</option>
{/each} {/each}

91
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -25,38 +25,69 @@
name: "Screen Placeholder", name: "Screen Placeholder",
route: "*", route: "*",
props: { props: {
_component: "@budibase/standard-components/container", "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
type: "div", "_component": "@budibase/standard-components/container",
_children: [ "_styles": {
{ "normal": {
_component: "@budibase/standard-components/container", "padding": "0px",
_styles: { normal: {}, hover: {}, active: {}, selected: {} }, "font-family": "Roboto",
_id: "__screenslot__text", "border-width": "0",
_code: "", "border-style": "None",
className: "", "text-align": "center"
onLoad: [],
type: "div",
_children: [
{
_component: "@budibase/standard-components/text",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_id: "__screenslot__text_2",
_code: "",
text: "content",
font: "",
color: "",
textAlign: "inline",
verticalAlign: "inline",
formattingTag: "none",
},
],
}, },
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_children": [
{
"_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"padding": "16px",
"border-style": "Dashed",
"border-width": "2px",
"border-color": "#8a8989fa"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
"_instanceName": "Container",
"_children": [
{
"_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {
"font-family": "Roboto"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "Your screens go here",
"type": "h1",
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
"_instanceName": "Heading",
"_children": []
}
]
}
], ],
"_instanceName": "Content Placeholder"
}, },
} }

3
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -7,6 +7,9 @@ export default `<html>
height: 100%!important; height: 100%!important;
font-family: Roboto !important; font-family: Roboto !important;
} }
*, *:before, *:after {
box-sizing: border-box;
}
.lay-__screenslot__text { .lay-__screenslot__text {
width: 100%; width: 100%;
height: 100%; height: 100%;

14
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -406,7 +406,7 @@ export default {
{ {
name: "List", name: "List",
_component: "@budibase/standard-components/list", _component: "@budibase/standard-components/list",
description: "Shiny list", description: "Renders all children once per record, of a given model",
icon: "ri-file-list-fill", icon: "ri-file-list-fill",
properties: { properties: {
design: { ...all }, design: { ...all },
@ -414,6 +414,18 @@ export default {
}, },
children: [], children: [],
}, },
{
name: "Record Detail",
_component: "@budibase/standard-components/recorddetail",
description:
"Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
icon: "ri-profile-line",
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
children: [],
},
{ {
name: "Map", name: "Map",
_component: "@budibase/standard-components/datamap", _component: "@budibase/standard-components/datamap",

4
packages/client/src/render/screenRouter.js
View File

@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
const screenIndex = current !== -1 ? current : fallback const screenIndex = current !== -1 ? current : fallback
onScreenSelected(screens[screenIndex], _url)
try { try {
!url.state && history.pushState(_url, null, _url) !url.state && history.pushState(_url, null, _url)
} catch (_) { } catch (_) {
// ignoring an exception here as the builder runs an iframe, which does not like this // ignoring an exception here as the builder runs an iframe, which does not like this
} }
onScreenSelected(screens[screenIndex], _url)
} }
function click(e) { function click(e) {

3
packages/server/src/utilities/builder/index.template.html
View File

@ -17,6 +17,9 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
*, *:before, *:after {
box-sizing: border-box;
}
</style> </style>
{{ each(options.stylesheets) }} {{ each(options.stylesheets) }}

17
packages/standard-components/components.json
View File

@ -235,15 +235,14 @@
"description": "A configurable data list that attaches to your backend models.", "description": "A configurable data list that attaches to your backend models.",
"data": true, "data": true,
"props": { "props": {
"model": "models", "model": "models"
"layout": { }
"type": "options", },
"default": "list", "recorddetail": {
"options": [ "description": "Loads a record, using an ID in the url",
"list", "data": true,
"grid" "props": {
] "model": "models"
}
} }
}, },
"datamap": { "datamap": {

37
packages/standard-components/src/List.svelte
View File

@ -3,7 +3,6 @@
export let _bb export let _bb
export let model export let model
export let layout = "list"
let headers = [] let headers = []
let store = _bb.store let store = _bb.store
@ -33,39 +32,5 @@
}) })
</script> </script>
<section class:grid={layout === 'grid'} class:list={layout === 'list'}> <section bind:this={target}>
<div class="data-card" bind:this={target} />
</section> </section>
<style>
.list {
display: flex;
flex-direction: column;
font-family: Inter;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
ul {
list-style-type: none;
}
li {
margin: 5px 0 5px 0;
}
.data-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.data-key {
font-weight: bold;
font-size: 20px;
text-transform: capitalize;
}
</style>

52
packages/standard-components/src/RecordDetail.svelte Normal file
View File

@ -0,0 +1,52 @@
<script>
import { onMount } from "svelte"
export let _bb
export let model
let headers = []
let store = _bb.store
let target
async function fetchFirstRecord() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const allRecords = await response.json()
if (allRecords.length > 0) return allRecords[0]
}
}
async function fetchData() {
const pathParts = window.location.pathname.split("/")
let record
// if srcdoc, then we assume this is the builder preview
if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
record = await fetchFirstRecord()
} else {
const id = pathParts[pathParts.length - 1]
const GET_RECORD_URL = `/api/${model}/records/${id}`
const response = await _bb.api.get(GET_RECORD_URL)
if (response.status === 200) {
record = await response.json()
}
}
if (record) {
_bb.attachChildren(target, {
hydrate: false,
context: record,
})
} else {
throw new Error("Failed to fetch record.", response)
}
}
onMount(async () => {
await fetchData()
})
</script>
<section bind:this={target}>
</section>

1
packages/standard-components/src/index.js
View File

@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
export { default as datasearch } from "./DataSearch.svelte" export { default as datasearch } from "./DataSearch.svelte"
export { default as datamap } from "./DataMap.svelte" export { default as datamap } from "./DataMap.svelte"
export { default as embed } from "./Embed.svelte" export { default as embed } from "./Embed.svelte"
export { default as recorddetail } from "./RecordDetail.svelte"