CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 07:15:43 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #404 from mjashanks/bugfixes

Browse source 
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 a1a1fce3ca b0128dcfd0
commit c92028299a
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)}
bind:value
class:uk-form-danger={errors.length > 0}>
<option></option>
{#each options as opt}
<option value={opt}>{opt}</option>
{/each}

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

@ -25,38 +25,69 @@
name: "Screen Placeholder",
route: "*",
props: {
_component: "@budibase/standard-components/container",
type: "div",
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_id: "__screenslot__text",
_code: "",
className: "",
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",
},
],
"_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"padding": "0px",
"font-family": "Roboto",
"border-width": "0",
"border-style": "None",
"text-align": "center"
},
"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;
font-family: Roboto !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;

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

@ -406,7 +406,7 @@ export default {
{
name: "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",
properties: {
design: { ...all },
@ -414,6 +414,18 @@ export default {
},
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",
_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
onScreenSelected(screens[screenIndex], _url)
try {
!url.state && history.pushState(_url, null, _url)
} catch (_) {
// ignoring an exception here as the builder runs an iframe, which does not like this
}
onScreenSelected(screens[screenIndex], _url)
}
function click(e) {

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

@ -17,6 +17,9 @@
margin: 0px;
padding: 0px;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
{{ 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.",
"data": true,
"props": {
"model": "models",
"layout": {
"type": "options",
"default": "list",
"options": [
"list",
"grid"
]
}
"model": "models"
}
},
"recorddetail": {
"description": "Loads a record, using an ID in the url",
"data": true,
"props": {
"model": "models"
}
},
"datamap": {

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

@ -3,7 +3,6 @@
export let _bb
export let model
export let layout = "list"
let headers = []
let store = _bb.store
@ -33,39 +32,5 @@
})
</script>
<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
<div class="data-card" bind:this={target} />
<section bind:this={target}>
</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 datamap } from "./DataMap.svelte"
export { default as embed } from "./Embed.svelte"
export { default as recorddetail } from "./RecordDetail.svelte"