screenslots working again
This commit is contained in:
Martin McKeaveney
parent
abd6da7b11
commit
427cdafeda
|
|
@ -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])
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>`
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue