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

Merge pull request #404 from mjashanks/bugfixes 

Bugfixes from #387 + Record Detail component
pull/4023/head
Michael Shanks 6 years ago
committed by GitHub
parent
a1a1fce3ca b0128dcfd0
commit
c92028299a
10 changed files with 143 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
  2. 87
      packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
  3. 3
      packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
  4. 14
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  5. 4
      packages/client/src/render/screenRouter.js
  6. 3
      packages/server/src/utilities/builder/index.template.html
  7. 17
      packages/standard-components/components.json
  8. 37
      packages/standard-components/src/List.svelte
  9. 52
      packages/standard-components/src/RecordDetail.svelte
  10. 1
      packages/standard-components/src/index.js

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}

87
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": {
"padding": "0px",
"font-family": "Roboto",
"border-width": "0",
"border-style": "None",
"text-align": "center"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_children": [
{ {
_component: "@budibase/standard-components/container", "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
_styles: { normal: {}, hover: {}, active: {}, selected: {} }, "_component": "@budibase/standard-components/container",
_id: "__screenslot__text", "_styles": {
_code: "", "normal": {
className: "", "padding": "16px",
onLoad: [], "border-style": "Dashed",
type: "div", "border-width": "2px",
_children: [ "border-color": "#8a8989fa"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
"_instanceName": "Container",
"_children": [
{ {
_component: "@budibase/standard-components/text", "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
_styles: { "_component": "@budibase/standard-components/heading",
normal: {}, "_styles": {
hover: {}, "normal": {
active: {}, "font-family": "Roboto"
selected: {}, },
"hover": {},
"active": {},
"selected": {}
}, },
_id: "__screenslot__text_2", "_code": "",
_code: "", "className": "",
text: "content", "text": "Your screens go here",
font: "", "type": "h1",
color: "", "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
textAlign: "inline", "_instanceName": "Heading",
verticalAlign: "inline", "_children": []
formattingTag: "none", }
}, ]
], }
},
], ],
"_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
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"

Write Preview
Loading…
Cancel
Save