CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 13:30:46 +12:00
Code Issues Projects Releases Wiki Activity

screenslots working again

Browse source
This commit is contained in:
Martin McKeaveney 2020-05-03 11:33:20 +01:00
parent 5b4bce8b8f
commit 58871883f9
6 changed files with 93 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/builder/src/builderStore/store/index.js
View file

@ -9,7 +9,6 @@ import {
import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
import { rename } from "components/userInterface/pagesParsing/renameScreen" import { rename } from "components/userInterface/pagesParsing/renameScreen"
import { import {
// getNewScreen,
createProps, createProps,
makePropsSafe, makePropsSafe,
getBuiltin, getBuiltin,
@ -353,8 +352,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
store.update(state => { store.update(state => {
function findSlot(component_array) { function findSlot(component_array) {
for (let i = 0; i < component_array.length; i += 1) { for (let i = 0; i < component_array.length; i += 1) {
if (component_array[i]._component === "##builtin/screenslot") if (component_array[i]._component === "##builtin/screenslot") {
return true return true
}
if (component_array[i]._children) findSlot(component_array[i]) if (component_array[i]._children) findSlot(component_array[i])
} }

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

@ -1,8 +1,10 @@
<script> <script>
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { map, join } from "lodash/fp" import { map, join } from "lodash/fp"
import iframeTemplate from "./iframeTemplate";
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
let iframe let iframe
function transform_component(comp) { function transform_component(comp) {
@ -77,48 +79,13 @@
style="height: 100%; width: 100%" style="height: 100%; width: 100%"
title="componentPreview" title="componentPreview"
bind:this={iframe} bind:this={iframe}
srcdoc={`<html> srcdoc={iframeTemplate({
<head> styles,
${stylesheetLinks} stylesheetLinks,
selectedComponentId,
<style> frontendDefinition: JSON.stringify(frontendDefinition),
${styles || ''} currentPageFunctions: $store.currentPageFunctions
})} />
.pos-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html {
height: 100%!important;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
<\/script>
</head>
<body>
</body>
</html>`} />
{/if} {/if}
</div> </div>

48
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js Normal file
View file

@ -0,0 +1,48 @@
export default ({
styles,
stylesheetLinks,
selectedComponentId,
frontendDefinition,
currentPageFunctions
}) => `<html>
<head>
${stylesheetLinks}
<style>
${styles || ''}
.pos-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html {
height: 100%!important;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border: dashed 2px #ccc;
font-family: sans-serif;
font-size: 1.2rem;
color: #999;
text-transform: uppercase;
font-weight: bold;
}
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${currentPageFunctions};
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
<\/script>
</head>
<body>
</body>
</html>`

19
packages/builder/src/components/userInterface/pagesParsing/createProps.js
View file

@ -3,27 +3,16 @@ import { TYPE_MAP } from "./types"
import { assign } from "lodash" import { assign } from "lodash"
import { uuid } from "builderStore/uuid" import { uuid } from "builderStore/uuid"
export const getBuiltin = name => { export const getBuiltin = _component => {
const { props } = createProps({ name }) const { props } = createProps({ _component })
return { return {
name, _component,
name: "Screenslot",
props, props,
} }
} }
// export const getNewScreen = (components, rootComponentName, name) => {
// const rootComponent = components[rootComponentName]
// return {
// name: name || "",
// description: "",
// url: "",
// _css: "",
// uiFunctions: "",
// props: createProps(rootComponent).props,
// }
// }
/** /**
* @param {object} componentDefinition - component definition from a component library * @param {object} componentDefinition - component definition from a component library
* @param {object} derivedFromProps - extra props derived from a components given props. * @param {object} derivedFromProps - extra props derived from a components given props.

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

@ -4,6 +4,14 @@ export default {
name: 'Basic', name: 'Basic',
isCategory: true, isCategory: true,
children: [ children: [
{
_component: "##builtin/screenslot",
name: 'Screenslot',
description: 'This component is a placeholder for the rendering of a screen within a page.',
icon: 'ri-crop-2-line',
commonProps: {},
children: []
},
{ {
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/container",
name: 'Container', name: 'Container',
@ -116,6 +124,7 @@ export default {
children: [] children: []
}, },
{ {
_component: "@budibase/standard-components/login",
name: 'Login', name: 'Login',
description: 'A component that automatically generates a login screen for your app.', description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill', icon: 'ri-login-box-fill',
@ -144,6 +153,7 @@ export default {
children: [] children: []
}, },
{ {
_component: "@budibase/materialdesign-components/Form",
name: 'Form', name: 'Form',
description: 'A component that generates a form from your data.', description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill', icon: 'ri-file-edit-fill',

27
packages/server/api/controllers/static.js
View file

@ -2,22 +2,32 @@ const send = require("koa-send");
const { resolve } = require("path") const { resolve } = require("path")
const { homedir } = require("os"); const { homedir } = require("os");
// either serve the builder or serve the actual app index.html
const builderPath = resolve(process.cwd(), "builder")
exports.serveBuilder = async function(ctx) { exports.serveBuilder = async function(ctx) {
console.log(ctx.file); const builderPath = resolve(process.cwd(), "builder")
await send(ctx, ctx.file, { root: builderPath }) await send(ctx, ctx.file, { root: builderPath })
} }
exports.serveApp = async function(ctx) { exports.serveApp = async function(ctx) {
// resolve unauthenticated page if so // TODO: update homedir stuff to wherever budi is run
await send(ctx, "/index.html", { root: ctx.publicPath }) // default to homedir
const appPath = resolve(
homedir(),
".budibase",
ctx.params.appId,
"public",
ctx.isAuthenticated ? "main" : "unauthenticated"
);
// TODO: Hook up to JWT auth in real app
// TODO: serve CSS and other assets
// resolve unauthenticated page if user not authenticated
// resolve main page if user authenticated // resolve main page if user authenticated
await send(ctx, "/index.html", { root: appPath })
} }
exports.serveComponentLibrary = async function(ctx) { exports.serveComponentLibrary = async function(ctx) {
// TODO: update to run wherever budi is run // TODO: update homedir stuff to wherever budi is run
// default to homedir
const componentLibraryPath = resolve( const componentLibraryPath = resolve(
homedir(), homedir(),
".budibase", ".budibase",
@ -31,7 +41,8 @@ exports.serveComponentLibrary = async function(ctx) {
} }
exports.serveComponentDefinitions = async function(ctx) { exports.serveComponentDefinitions = async function(ctx) {
// TODO: update to run wherever budi is run // TODO: update homedir stuff to wherever budi is run
// default to homedir
const componentLibraryPath = resolve( const componentLibraryPath = resolve(
homedir(), homedir(),
".budibase", ".budibase",