screenslots working again

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

View File

@ -9,7 +9,6 @@ import {
import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
import { rename } from "components/userInterface/pagesParsing/renameScreen"
import {
// getNewScreen,
createProps,
makePropsSafe,
getBuiltin,
@ -353,8 +352,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
store.update(state => {
function findSlot(component_array) {
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
}
if (component_array[i]._children) findSlot(component_array[i])
}

View File

@ -1,8 +1,10 @@
<script>
import { store, backendUiStore } from "builderStore"
import { map, join } from "lodash/fp"
import iframeTemplate from "./iframeTemplate";
import { pipe } from "components/common/core"
let iframe
function transform_component(comp) {
@ -77,48 +79,13 @@
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={`<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##"] = ${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>`} />
srcdoc={iframeTemplate({
styles,
stylesheetLinks,
selectedComponentId,
frontendDefinition: JSON.stringify(frontendDefinition),
currentPageFunctions: $store.currentPageFunctions
})} />
{/if}
</div>

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>`

View File

@ -3,27 +3,16 @@ import { TYPE_MAP } from "./types"
import { assign } from "lodash"
import { uuid } from "builderStore/uuid"
export const getBuiltin = name => {
const { props } = createProps({ name })
export const getBuiltin = _component => {
const { props } = createProps({ _component })
return {
name,
_component,
name: "Screenslot",
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} derivedFromProps - extra props derived from a components given props.

View File

@ -4,6 +4,14 @@ export default {
name: 'Basic',
isCategory: true,
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",
name: 'Container',
@ -116,6 +124,7 @@ export default {
children: []
},
{
_component: "@budibase/standard-components/login",
name: 'Login',
description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill',
@ -144,6 +153,7 @@ export default {
children: []
},
{
_component: "@budibase/materialdesign-components/Form",
name: 'Form',
description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill',

View File

@ -2,22 +2,32 @@ const send = require("koa-send");
const { resolve } = require("path")
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) {
console.log(ctx.file);
const builderPath = resolve(process.cwd(), "builder")
await send(ctx, ctx.file, { root: builderPath })
}
exports.serveApp = async function(ctx) {
// resolve unauthenticated page if so
await send(ctx, "/index.html", { root: ctx.publicPath })
// TODO: update homedir stuff to wherever budi is run
// 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
await send(ctx, "/index.html", { root: appPath })
}
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(
homedir(),
".budibase",
@ -31,7 +41,8 @@ exports.serveComponentLibrary = 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(
homedir(),
".budibase",