CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 05:50:57 +12:00
Code Issues Projects Releases Wiki Activity

Implement updating of individual component props

Browse source
This commit is contained in:
pngwn 2020-01-24 11:32:13 +00:00
parent 05a32f25f0
commit d78f8013b5
14 changed files with 385 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

296
packages/builder/src/builderStore/store.js
View file

@ -1,8 +1,8 @@
import {
hierarchy as hierarchyFunctions,
hierarchy as hierarchyFunctions,
} from "../../../core/src";
import {
filter, cloneDeep, sortBy,
filter, cloneDeep, sortBy,
map, last, keys, concat, keyBy,
find, isEmpty, reduce, values
} from "lodash/fp";
@ -10,16 +10,16 @@ import {
pipe, getNode, validate,
constructHierarchy, templateApi
} from "../common/core";
import {writable} from "svelte/store";
import { writable } from "svelte/store";
import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
import { buildPropsHierarchy } from "../userInterface/pagesParsing/buildPropsHierarchy"
import api from "./api";
import { isRootComponent, getExactComponent } from "../userInterface/pagesParsing/searchComponents";
import { rename } from "../userInterface/pagesParsing/renameScreen";
import {
getNewComponentInfo, getScreenInfo
import {
getNewComponentInfo, getScreenInfo, getComponentInfo
} from "../userInterface/pagesParsing/createProps";
import {
import {
loadLibs, loadLibUrls, loadGeneratorLibs
} from "./loadComponentLibraries";
@ -28,30 +28,30 @@ let appname = "";
export const getStore = () => {
const initial = {
apps:[],
appname:"",
apps: [],
appname: "",
hierarchy: {},
actions: [],
triggers: [],
pages:defaultPagesObject(),
mainUi:{},
unauthenticatedUi:{},
components:[],
currentFrontEndItem:null,
currentComponentInfo:null,
currentFrontEndType:"none",
pages: defaultPagesObject(),
mainUi: {},
unauthenticatedUi: {},
components: [],
currentFrontEndItem: null,
currentComponentInfo: null,
currentFrontEndType: "none",
currentPageName: "",
currentComponentProps:null,
currentComponentProps: null,
currentNodeIsNew: false,
errors: [],
activeNav: "database",
isBackend:true,
isBackend: true,
hasAppPackage: false,
accessLevels: {version:0, levels:[]},
accessLevels: { version: 0, levels: [] },
currentNode: null,
libraries:null,
showSettings:false,
useAnalytics:true,
libraries: null,
showSettings: false,
useAnalytics: true,
};
const store = writable(initial);
@ -82,7 +82,7 @@ export const getStore = () => {
store.setCurrentScreen = setCurrentScreen(store);
store.setCurrentPage = setCurrentPage(store);
store.createScreen = createScreen(store);
store.removeComponentLibrary =removeComponentLibrary(store);
store.removeComponentLibrary = removeComponentLibrary(store);
store.addStylesheet = addStylesheet(store);
store.removeStylesheet = removeStylesheet(store);
store.savePage = savePage(store);
@ -91,18 +91,21 @@ export const getStore = () => {
store.showSettings = showSettings(store);
store.useAnalytics = useAnalytics(store);
store.createGeneratedComponents = createGeneratedComponents(store);
store.addChildComponent = addChildComponent(store);
store.selectComponent = selectComponent(store);
store.saveComponent = saveComponent(store);
return store;
}
}
export default getStore;
const initialise = (store, initial) => async () => {
appname = window.location.hash
? last(window.location.hash.substr(1).split("/"))
: "";
appname = window.location.hash
? last(window.location.hash.substr(1).split("/"))
: "";
if(!appname) {
if (!appname) {
initial.apps = await api.get(`/_builder/api/apps`).then(r => r.json());
initial.hasAppPackage = false;
store.set(initial);
@ -110,7 +113,7 @@ const initialise = (store, initial) => async () => {
}
const pkg = await api.get(`/_builder/api/${appname}/appPackage`)
.then(r => r.json());
.then(r => r.json());
initial.libraries = await loadLibs(appname, pkg);
initial.generatorLibraries = await loadGeneratorLibs(appname, pkg);
@ -126,10 +129,10 @@ const initialise = (store, initial) => async () => {
initial.actions = values(pkg.appDefinition.actions);
initial.triggers = pkg.appDefinition.triggers;
if(!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
initial.hierarchy = constructHierarchy(initial.hierarchy);
const shadowHierarchy = createShadowHierarchy(initial.hierarchy);
if(initial.currentNode !== null)
if (initial.currentNode !== null)
initial.currentNode = getNode(
shadowHierarchy, initial.currentNode.nodeId
);
@ -138,7 +141,7 @@ const initialise = (store, initial) => async () => {
return initial;
}
const generatorsArray = generators =>
const generatorsArray = generators =>
pipe(generators, [
keys,
filter(k => k !== "_lib"),
@ -179,12 +182,12 @@ const newRecord = (store, useRoot) => () => {
s.currentNodeIsNew = true;
const shadowHierarchy = createShadowHierarchy(s.hierarchy);
parent = useRoot ? shadowHierarchy
: getNode(
shadowHierarchy,
s.currentNode.nodeId);
: getNode(
shadowHierarchy,
s.currentNode.nodeId);
s.errors = [];
s.currentNode = templateApi(shadowHierarchy)
.getNewRecordTemplate(parent, "", true);
.getNewRecordTemplate(parent, "", true);
return s;
});
}
@ -209,12 +212,12 @@ const newIndex = (store, useRoot) => () => {
s.errors = [];
const shadowHierarchy = createShadowHierarchy(s.hierarchy);
parent = useRoot ? shadowHierarchy
: getNode(
shadowHierarchy,
s.currentNode.nodeId);
: getNode(
shadowHierarchy,
s.currentNode.nodeId);
s.currentNode = templateApi(shadowHierarchy)
.getNewIndexTemplate(parent);
.getNewIndexTemplate(parent);
return s;
});
}
@ -224,7 +227,7 @@ const saveCurrentNode = (store) => () => {
const errors = validate.node(s.currentNode);
s.errors = errors;
if(errors.length > 0) {
if (errors.length > 0) {
return s;
}
@ -235,23 +238,23 @@ const saveCurrentNode = (store) => () => {
s.hierarchy, s.currentNode.nodeId);
let index = parentNode.children.length;
if(!!existingNode) {
if (!!existingNode) {
// remove existing
index = existingNode.parent().children.indexOf(existingNode);
existingNode.parent().children = pipe(existingNode.parent().children, [
filter(c => c.nodeId !== existingNode.nodeId)
]);
}
}
// should add node into existing hierarchy
const cloned = cloneDeep(s.currentNode);
templateApi(s.hierarchy).constructNode(
parentNode,
parentNode,
cloned
);
const newIndexOfchild = child => {
if(child === cloned) return index;
if (child === cloned) return index;
const currentIndex = parentNode.children.indexOf(child);
return currentIndex >= index ? currentIndex + 1 : currentIndex;
}
@ -260,15 +263,15 @@ const saveCurrentNode = (store) => () => {
sortBy(newIndexOfchild)
]);
if(!existingNode && s.currentNode.type === "record") {
if (!existingNode && s.currentNode.type === "record") {
const defaultIndex = templateApi(s.hierarchy)
.getNewIndexTemplate(cloned.parent());
.getNewIndexTemplate(cloned.parent());
defaultIndex.name = `all_${cloned.collectionName}`;
defaultIndex.allowedRecordNodeIds = [cloned.nodeId];
}
s.currentNodeIsNew = false;
savePackage(store, s);
return s;
@ -279,28 +282,28 @@ const importAppDefinition = store => appDefinition => {
store.update(s => {
s.hierarchy = appDefinition.hierarchy;
s.currentNode = appDefinition.hierarchy.children.length > 0
? appDefinition.hierarchy.children[0]
: null;
? appDefinition.hierarchy.children[0]
: null;
s.actions = appDefinition.actions;
s.triggers = appDefinition.triggers;
s.currentNodeIsNew = false;
s.currentNodeIsNew = false;
return s;
});
}
}
const deleteCurrentNode = store => () => {
store.update(s => {
const nodeToDelete = getNode(s.hierarchy, s.currentNode.nodeId);
s.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent())
? find(n => n != s.currentNode)
(s.hierarchy.children)
: nodeToDelete.parent();
if(hierarchyFunctions.isRecord(nodeToDelete)) {
? find(n => n != s.currentNode)
(s.hierarchy.children)
: nodeToDelete.parent();
if (hierarchyFunctions.isRecord(nodeToDelete)) {
nodeToDelete.parent().children = filter(c => c.nodeId !== nodeToDelete.nodeId)
(nodeToDelete.parent().children);
(nodeToDelete.parent().children);
} else {
nodeToDelete.parent().indexes = filter(c => c.nodeId !== nodeToDelete.nodeId)
(nodeToDelete.parent().indexes);
(nodeToDelete.parent().indexes);
}
s.errors = [];
savePackage(store, s);
@ -311,8 +314,8 @@ const deleteCurrentNode = store => () => {
const saveField = databaseStore => (field) => {
databaseStore.update(db => {
db.currentNode.fields = filter(f => f.name !== field.name)
(db.currentNode.fields);
(db.currentNode.fields);
templateApi(db.hierarchy).addField(db.currentNode, field);
return db;
});
@ -322,21 +325,21 @@ const saveField = databaseStore => (field) => {
const deleteField = databaseStore => field => {
databaseStore.update(db => {
db.currentNode.fields = filter(f => f.name !== field.name)
(db.currentNode.fields);
(db.currentNode.fields);
return db;
});
}
const saveAction = store => (newAction, isNew, oldAction=null) => {
const saveAction = store => (newAction, isNew, oldAction = null) => {
store.update(s => {
const existingAction = isNew
? null
: find(a => a.name === oldAction.name)(s.actions);
if(existingAction) {
const existingAction = isNew
? null
: find(a => a.name === oldAction.name)(s.actions);
if (existingAction) {
s.actions = pipe(s.actions, [
map(a => a === existingAction ? newAction : a)
]);
@ -348,7 +351,7 @@ const saveAction = store => (newAction, isNew, oldAction=null) => {
});
}
const deleteAction = store => action => {
const deleteAction = store => action => {
store.update(s => {
s.actions = filter(a => a.name !== action.name)(s.actions);
savePackage(store, s);
@ -356,14 +359,14 @@ const deleteAction = store => action => {
});
}
const saveTrigger = store => (newTrigger, isNew, oldTrigger=null) => {
const saveTrigger = store => (newTrigger, isNew, oldTrigger = null) => {
store.update(s => {
const existingTrigger = isNew
? null
: find(a => a.name === oldTrigger.name)(s.triggers);
if(existingTrigger) {
const existingTrigger = isNew
? null
: find(a => a.name === oldTrigger.name)(s.triggers);
if (existingTrigger) {
s.triggers = pipe(s.triggers, [
map(a => a === existingTrigger ? newTrigger : a)
]);
@ -375,7 +378,7 @@ const saveTrigger = store => (newTrigger, isNew, oldTrigger=null) => {
});
}
const deleteTrigger = store => trigger => {
const deleteTrigger = store => trigger => {
store.update(s => {
s.triggers = filter(t => t.name !== trigger.name)(s.triggers);
return s;
@ -383,18 +386,18 @@ const deleteTrigger = store => trigger => {
}
const incrementAccessLevelsVersion = (s) =>
s.accessLevels.version = (s.accessLevels.version || 0) + 1;
s.accessLevels.version = (s.accessLevels.version || 0) + 1;
const saveLevel = store => (newLevel, isNew, oldLevel=null) => {
const saveLevel = store => (newLevel, isNew, oldLevel = null) => {
store.update(s => {
const levels = s.accessLevels.levels;
const existingLevel = isNew
? null
: find(a => a.name === oldLevel.name)(levels);
if(existingLevel) {
const existingLevel = isNew
? null
: find(a => a.name === oldLevel.name)(levels);
if (existingLevel) {
s.accessLevels.levels = pipe(levels, [
map(a => a === existingLevel ? newLevel : a)
]);
@ -425,7 +428,7 @@ const setActiveNav = store => navName => {
});
}
const createShadowHierarchy = hierarchy =>
const createShadowHierarchy = hierarchy =>
constructHierarchy(JSON.parse(JSON.stringify(hierarchy)));
const saveScreen = store => (screen) => {
@ -448,7 +451,7 @@ const _saveScreen = (store, s, screen) => {
api.post(`/_builder/api/${s.appname}/screen`, screen)
.then(() => savePackage(store, s));
return s;
return s;
}
const createScreen = store => (screenName, layoutComponentName) => {
@ -470,13 +473,13 @@ const createGeneratedComponents = store => components => {
s.screens = [...s.screens, ...components];
const doCreate = async () => {
for(let c of components) {
for (let c of components) {
await api.post(`/_builder/api/${s.appname}/screen`, c);
}
await savePackage(store, s);
}
doCreate();
return s;
@ -496,7 +499,7 @@ const deleteScreen = store => name => {
s.components = components;
s.screens = screens;
if(s.currentFrontEndItem.name === name) {
if (s.currentFrontEndItem.name === name) {
s.currentFrontEndItem = null;
s.currentFrontEndType = "";
}
@ -514,20 +517,20 @@ const renameScreen = store => (oldname, newname) => {
screens, pages, error, changedScreens
} = rename(s.pages, s.screens, oldname, newname);
if(error) {
if (error) {
// should really do something with this
return s;
}
s.screens = screens;
s.pages = pages;
if(s.currentFrontEndItem.name === oldname)
if (s.currentFrontEndItem.name === oldname)
s.currentFrontEndItem.name = newname;
const saveAllChanged = async () => {
for(let screenName of changedScreens) {
for (let screenName of changedScreens) {
const changedScreen
= getExactComponent(screens, screenName);
= getExactComponent(screens, screenName);
await api.post(`/_builder/api/${s.appname}/screen`, changedScreen);
}
}
@ -535,10 +538,10 @@ const renameScreen = store => (oldname, newname) => {
api.patch(`/_builder/api/${s.appname}/screen`, {
oldname, newname
})
.then(() => saveAllChanged())
.then(() => {
savePackage(store, s);
});
.then(() => saveAllChanged())
.then(() => {
savePackage(store, s);
});
return s;
})
@ -546,7 +549,7 @@ const renameScreen = store => (oldname, newname) => {
const savePage = store => async page => {
store.update(s => {
if(s.currentFrontEndType !== "page" || !s.currentPageName) {
if (s.currentFrontEndType !== "page" || !s.currentPageName) {
return s;
}
@ -558,26 +561,26 @@ const savePage = store => async page => {
const addComponentLibrary = store => async lib => {
const response =
await api.get(`/_builder/api/${appname}/componentlibrary?lib=${encodeURI(lib)}`,undefined, false);
const response =
await api.get(`/_builder/api/${appname}/componentlibrary?lib=${encodeURI(lib)}`, undefined, false);
const success = response.status === 200;
const error = response.status === 404
? `Could not find library ${lib}`
: success
? ""
: response.statusText;
const error = response.status === 404
? `Could not find library ${lib}`
: success
? ""
: response.statusText;
const components = success
? await response.json()
: [];
? await response.json()
: [];
store.update(s => {
if(success) {
if (success) {
const componentsArray = [];
for(let c in components) {
for (let c in components) {
componentsArray.push(components[c]);
}
@ -592,18 +595,18 @@ const addComponentLibrary = store => async lib => {
return s;
})
}
const removeComponentLibrary = store => lib => {
store.update(s => {
s.pages.componentLibraries = filter(l => l !== lib)(
s.pages.componentLibraries);
s.pages.componentLibraries);
savePackage(store, s);
return s;
})
@ -627,12 +630,12 @@ const removeStylesheet = store => stylesheet => {
const refreshComponents = store => async () => {
const componentsAndGenerators =
const componentsAndGenerators =
await api.get(`/_builder/api/${db.appname}/components`).then(r => r.json());
const components = pipe(componentsAndGenerators.components, [
keys,
map(k => ({...componentsAndGenerators[k], name:k}))
map(k => ({ ...componentsAndGenerators[k], name: k }))
]);
store.update(s => {
@ -648,25 +651,25 @@ const refreshComponents = store => async () => {
const savePackage = (store, s) => {
const appDefinition = {
hierarchy:s.hierarchy,
triggers:s.triggers,
hierarchy: s.hierarchy,
triggers: s.triggers,
actions: keyBy("name")(s.actions),
props: {
main: buildPropsHierarchy(
s.components,
s.screens,
s.pages.main.appBody),
unauthenticated: buildPropsHierarchy(
s.components,
s.screens,
s.pages.unauthenticated.appBody)
s.components,
s.screens,
s.pages.main.appBody),
unauthenticated: buildPropsHierarchy(
s.components,
s.screens,
s.pages.unauthenticated.appBody)
}
};
const data = {
appDefinition,
accessLevels:s.accessLevels,
pages:s.pages,
accessLevels: s.accessLevels,
pages: s.pages,
}
return api.post(`/_builder/api/${s.appname}/appPackage`, data);
@ -689,3 +692,44 @@ const setCurrentPage = store => pageName => {
return s;
})
}
const addChildComponent = store => component => {
store.update(s => {
const newComponent = getNewComponentInfo(
s.components, component);
const children = s.currentFrontEndItem.props._children;
const component_definition = {
...newComponent.fullProps,
_component: component,
name: component,
description: '',
location: (s.currentFrontEndItem.location ? s.currentFrontEndItem.location : [])
.concat(children && children.length || 0)
}
s.currentFrontEndItem.props._children =
children ?
children.concat(component_definition) :
[component_definition];
return s;
})
}
const selectComponent = store => component => {
store.update(s => {
s.currentComponentInfo = getComponentInfo(s.components, component);
return s;
})
}
const saveComponent = store => component => {
store.update(s => {
s.currentComponentInfo = getComponentInfo(s.components, component);
console.log(s.currentFrontEndItem, s.screens)
return _saveScreen(store, s, s.currentFrontEndItem);
})
}

4
packages/builder/src/common/Icons/Image.svelte Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 400 B

4
packages/builder/src/common/Icons/Input.svelte Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5.869 12l-.82 2H6.833L11 7h2l4.167 10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 339 B

2
packages/builder/src/common/Icons/index.js
View file

@ -1,3 +1,5 @@
export { default as LayoutIcon } from './Layout.svelte';
export { default as PaintIcon } from './Paint.svelte';
export { default as TerminalIcon } from './Terminal.svelte';
export { default as InputIcon } from './Input.svelte';
export { default as ImageIcon } from './Image.svelte';

24
packages/builder/src/userInterface/ComponentHierarchyChildren.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
import { last } from "lodash/fp";
import { pipe } from "../common/core";
export let components = [];
export let onSelect = () => {};
const capitalise = s => s.substring(0,1).toUpperCase() + s.substring(1);
const get_name = s => last(s.split('/'));
const get_capitalised_name = name => pipe(name, [get_name,capitalise]);
</script>
{#each components as component}
<ul>
<li on:click|stopPropagation={() => onSelect(component)}>
{get_capitalised_name(component.name)}
{#if component._children}
<svelte:self components={component._children}/>
{/if}
</li>
</ul>
{/each}

11
packages/builder/src/userInterface/ComponentPanel.svelte
View file

@ -43,7 +43,7 @@ $: shortName = last(name.split("/"));
store.subscribe(s => {
if(ignoreStore) return;
component = s.currentFrontEndItem;
component = s.currentComponentInfo.component;
if(!component) return;
originalName = component.name;
name = component.name;
@ -68,7 +68,7 @@ const save = () => {
map(s => s.trim())
]);
store.saveScreen(component);
store.saveComponent(component);
ignoreStore = false;
// now do the rename
@ -92,14 +92,15 @@ const onPropsValidate = result => {
const updateComponent = doChange => {
const newComponent = cloneDeep(component);
doChange(newComponent);
component = newComponent;
component = doChange(newComponent);
console.log(component, $store.screens[0].props._children[1])
componentInfo = getScreenInfo(components, newComponent);
}
const onPropsChanged = newProps => {
updateComponent(newComponent =>
assign(newComponent.props, newProps));
assign(newComponent, newProps))
save();
}

38
packages/builder/src/userInterface/ComponentsHierarchy.svelte
View file

@ -1,4 +1,5 @@
<script>
import ComponentHierarchyChildren from './ComponentHierarchyChildren.svelte';
import {
last,
@ -22,6 +23,7 @@ export let thisLevel = "";
let pathPartsThisLevel;
let componentsThisLevel;
let _components;
let subfolders;
let expandedFolders = [];
@ -52,7 +54,7 @@ const isOnNextLevel = (c) =>
normalizedName(c.name).split("/").length === pathPartsThisLevel + 1
const lastPartOfName = (c) =>
last(c.name.split("/"))
last(c.name ? c.name.split("/") : c._component.split("/"))
const subFolder = (c) => {
const cname = normalizedName(c.name);
@ -102,27 +104,27 @@ $: {
? 1
: normalizedName(thisLevel).split("/").length + 1;
componentsThisLevel =
_components =
pipe(components, [
filter(isOnThisLevel),
map(c => ({component:c, title:lastPartOfName(c)})),
// filter(isOnThisLevel),
map(c => ({component: c, title:lastPartOfName(c)})),
sortBy("title")
]);
subfolders =
pipe(components, [
filter(notOnThisLevel),
sortBy("name"),
map(subFolder),
uniqWith((f1,f2) => f1.path === f2.path)
]);
// subfolders =
// pipe(components, [
// filter(notOnThisLevel),
// sortBy("name"),
// map(subFolder),
// uniqWith((f1,f2) => f1.path === f2.path)
// ]);
}
</script>
<div class="root">
{#each subfolders as folder}
<!-- {#each subfolders as folder}
<div class="hierarchy-item folder"
on:click|stopPropagation={() => expandFolder(folder)}>
<span>{@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")}</span>
@ -132,14 +134,18 @@ $: {
thisLevel={folder.path} />
{/if}
</div>
{/each}
{/each} -->
{#each componentsThisLevel as component}
<div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
{#each _components as component}
<div class="hierarchy-item component"
class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
<!-- <span>{@html getIcon("circle", "7")}</span> -->
<span class="title">{component.title}</span>
</div>
{#if component.component.props && component.component.props._children}
<ComponentHierarchyChildren components={component.component.props._children} onSelect={store.selectComponent}/>
{/if}
{/each}
</div>

80
packages/builder/src/userInterface/ComponentsList.svelte
View file

@ -8,6 +8,7 @@ import {
groupBy, keys, find, sortBy
} from "lodash/fp";
import { pipe } from "../common/core";
import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
let componentLibraries=[];
@ -29,9 +30,7 @@ const addRootComponent = (c, all) => {
};
const onComponentChosen = (component) => {
};
const onComponentChosen = store.addChildComponent;
store.subscribe(s => {
@ -46,6 +45,8 @@ store.subscribe(s => {
componentLibraries = newComponentLibraries;
});
let current_view = 'text';
</script>
<div class="root">
@ -55,22 +56,34 @@ store.subscribe(s => {
</div>
<div class="library-container">
<ul>
<li>
<button class:selected={current_view === 'text'} on:click={() => current_view = 'text'}>
<InputIcon />
</button>
</li>
<li>
<button class:selected={current_view === 'layout'} on:click={() => current_view = 'layout'}>
<LayoutIcon />
</button>
</li>
<li>
<button class:selected={current_view === 'media'} on:click={() => current_view = 'media'}>
<ImageIcon />
</button>
</li>
</ul>
<div class="inner-header">
Components
</div>
{#each lib.components as component}
{#each lib.components.filter(_ => true) as component}
<div class="component"
on:click={() => onComponentChosen(component)}>
on:click={() => onComponentChosen(component.name)}>
<div class="name">
{splitName(component.name).componentName}
</div>
<div class="description">
<!-- <div class="description">
{component.description}
</div>
</div> -->
</div>
{/each}
@ -113,8 +126,16 @@ store.subscribe(s => {
}
.component {
padding: 2px 0px;
padding: 0 15px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 2px;
margin: 10px 0;
height: 40px;
box-sizing: border-box;
color: #163057;
display: flex;
align-items: center;
}
.component:hover {
@ -122,8 +143,11 @@ store.subscribe(s => {
}
.component > .name {
color: var(--secondary100);
color: #163057;
display: inline-block;
font-size: 12px;
font-weight: bold;
opacity: 0.6;
}
.component > .description {
@ -133,6 +157,34 @@ store.subscribe(s => {
margin-left: 10px;
}
ul {
list-style: none;
display: flex;
padding: 0;
}
li {
margin-right: 20px;
background: none;
border-radius: 5px;
width: 48px;
height: 48px;
}
li button {
width: 100%;
height: 100%;
background: none;
border: none;
border-radius: 5px;
padding: 12px;
outline: none;
cursor: pointer;
}
.selected {
color: var(--button-text);
background: var(--background-button)!important;
}
</style>

12
packages/builder/src/userInterface/CurrentItemPreview.svelte
View file

@ -17,7 +17,7 @@ let appDefinition = {};
store.subscribe(s => {
hasComponent = !!s.currentFrontEndItem;
stylesheetLinks = pipe(s.pages.stylesheets, [
map(s => `<link rel="stylesheet" href="${s}"/>`),
join("\n")
@ -25,8 +25,8 @@ store.subscribe(s => {
appDefinition = {
componentLibraries: s.loadLibraryUrls(),
props: buildPropsHierarchy(
s.components,
s.screens,
s.components,
s.screens,
s.currentFrontEndItem),
hierarchy: s.hierarchy,
appRootPath: ""
@ -45,7 +45,7 @@ store.subscribe(s => {
title="componentPreview"
srcdoc={
`<html>
<head>
${stylesheetLinks}
<script>
@ -53,7 +53,7 @@ store.subscribe(s => {
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase();
})
})
</script>
<style>
@ -91,4 +91,4 @@ store.subscribe(s => {
width: 100%;
}
</style>
</style>

1
packages/builder/src/userInterface/NewComponent.svelte
View file

@ -29,7 +29,6 @@ let name="";
let saveAttempted=false;
store.subscribe(s => {
console.log(s)
layoutComponents = pipe(s.components, [
filter(c => c.container),
map(c => ({name:c.name, ...splitName(c.name)}))

6
packages/builder/src/userInterface/PropsView.svelte
View file

@ -25,7 +25,6 @@ let props = {};
let propsDefinitions = [];
let isInstance = false;
$: {
if(componentInfo)
{
@ -46,7 +45,7 @@ $: {
let setProp = (name, value) => {
const newProps = cloneDeep(props);
let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props);
let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props ? componentInfo.component.props : componentInfo.component);
if(!isInstance) {
const nowSet = [];
@ -98,9 +97,6 @@ const fieldHasError = (propName) =>
</form>
</div>

68
packages/builder/src/userInterface/pagesParsing/createProps.js
View file

@ -1,6 +1,6 @@
import {
isString, isUndefined, find, keys, uniq,
some, filter, reduce, cloneDeep, includes,last
some, filter, reduce, cloneDeep, includes, last
} from "lodash/fp";
import { types, expandComponentDefinition } from "./types";
import { assign } from "lodash";
@ -11,7 +11,7 @@ import { ensureShardNameIsInShardMap } from "../../../../core/src/indexing/shard
export const getInstanceProps = (componentInfo, props) => {
const finalProps = cloneDeep(componentInfo.fullProps);
for(let p in props) {
for (let p in props) {
finalProps[p] = props[p];
}
@ -20,9 +20,9 @@ export const getInstanceProps = (componentInfo, props) => {
export const getNewComponentInfo = (components, rootComponent, name) => {
const component = {
name: name || "",
description:"",
props:{
name: name || "",
description: "",
props: {
_component: rootComponent
}
};
@ -34,22 +34,22 @@ export const getNewComponentInfo = (components, rootComponent, name) => {
export const getScreenInfo = (components, screen) => {
return getComponentInfo(
components,
components,
screen);
}
export const getComponentInfo = (components, comp) => {
const targetComponent = isString(comp)
? find(c => c.name === comp)(components)
: comp;
const targetComponent = isString(comp)
? find(c => c.name === comp)(components)
: comp;
let component;
let subComponent;
if(isRootComponent(targetComponent)) {
if (isRootComponent(targetComponent)) {
component = targetComponent;
} else {
subComponent = targetComponent;
component = find(c => c.name === subComponent.props._component)(
components);
component = find(c => c.name === (subComponent.props ? subComponent.props._component : subComponent._component))(
components);
}
const subComponentProps = subComponent ? subComponent.props : {};
@ -65,7 +65,7 @@ export const getComponentInfo = (components, comp) => {
fullProps._component = targetComponent.name;
return ({
propsDefinition:expandComponentDefinition(component),
propsDefinition: expandComponentDefinition(component),
rootDefaultProps: rootProps.props,
unsetProps,
fullProps: fullProps,
@ -78,7 +78,7 @@ export const getComponentInfo = (components, comp) => {
export const createProps = (componentDefinition, derivedFromProps) => {
const error = (propName, error) =>
errors.push({propName, error});
errors.push({ propName, error });
const props = {
_component: componentDefinition.name
@ -86,24 +86,24 @@ export const createProps = (componentDefinition, derivedFromProps) => {
const errors = [];
if(!componentDefinition.name)
if (!componentDefinition.name)
error("_component", "Component name not supplied");
const propsDef = componentDefinition.props;
for(let propDef in propsDef) {
for (let propDef in propsDef) {
const parsedPropDef = parsePropDef(propsDef[propDef]);
if(parsedPropDef.error)
error(propDef, parsedPropDef.error);
else
if (parsedPropDef.error)
error(propDef, parsedPropDef.error);
else
props[propDef] = parsedPropDef;
}
if(derivedFromProps) {
if (derivedFromProps) {
assign(props, derivedFromProps);
}
if(componentDefinition.children !== false
&& isUndefined(props._children)) {
if (componentDefinition.children !== false
&& isUndefined(props._children)) {
props._children = [];
}
@ -114,37 +114,37 @@ export const createProps = (componentDefinition, derivedFromProps) => {
const parsePropDef = propDef => {
const error = message => ({error:message, propDef});
const error = message => ({ error: message, propDef });
if(isString(propDef)) {
if(!types[propDef])
if (isString(propDef)) {
if (!types[propDef])
return error(`Do not recognise type ${propDef}`);
return types[propDef].default();
}
if(!propDef.type)
if (!propDef.type)
return error("Property Definition must declare a type");
const type = types[propDef.type];
if(!type)
if (!type)
return error(`Do not recognise type ${propDef.type}`);
if(isUndefined(propDef.default))
if (isUndefined(propDef.default))
return type.default(propDef);
if(!type.isOfType(propDef.default))
if (!type.isOfType(propDef.default))
return error(`${propDef.default} is not of type ${type}`);
return propDef.default;
}
export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
`${parentComponentName}:${arrayPropName}`;
/*
Allowed propDefOptions
- type: string, bool, number, array
- default: default value, when undefined
- required: field is required
*/
- required: field is required
*/

90
packages/builder/src/userInterface/pagesParsing/validateProps.js
View file

@ -1,10 +1,10 @@
import { types } from "./types";
import {
createProps, arrayElementComponentName
import {
createProps, arrayElementComponentName
} from "./createProps";
import { isString } from "util";
import {
includes, filter, map, keys,
import {
includes, filter, map, keys,
flatten, flattenDeep, each,
indexOf, isUndefined
} from "lodash/fp";
@ -18,12 +18,13 @@ const pipe = common.$;
const makeError = (errors, propName, stack) => (message) =>
errors.push({
stack,
propName,
error:message});
propName,
error: message
});
export const recursivelyValidate = (rootProps, getComponent, stack=[]) => {
export const recursivelyValidate = (rootProps, getComponent, stack = []) => {
if(!rootProps._component) {
if (!rootProps._component) {
const errs = [];
makeError(errs, "_component", stack)("Component is not set");
return errs;
@ -40,34 +41,34 @@ export const recursivelyValidate = (rootProps, getComponent, stack=[]) => {
stack,
true);
const validateChildren = (_props, _stack) =>
!_props._children
? []
: pipe(_props._children, [
map(child => recursivelyValidate(
child,
getComponent,
[..._stack, _props._children.indexOf(child)]))
]);
const validateChildren = (_props, _stack) =>
!_props._children
? []
: pipe(_props._children, [
map(child => recursivelyValidate(
child,
getComponent,
[..._stack, _props._children.indexOf(child)]))
]);
const childErrors = validateChildren(
rootProps, stack);
rootProps, stack);
return flattenDeep([errors, ...childErrors]);
}
const expandPropDef = propDef =>
const expandPropDef = propDef =>
isString(propDef)
? types[propDef].defaultDefinition()
: propDef;
? types[propDef].defaultDefinition()
: propDef;
export const validateProps = (componentDefinition, props, stack=[], isFinal=true) => {
export const validateProps = (componentDefinition, props, stack = [], isFinal = true) => {
const errors = [];
if(isFinal && !props._component) {
if (isFinal && !props._component) {
makeError(errors, "_component", stack)("Component is not set");
return errors;
// this would break everything else anyway
@ -75,44 +76,44 @@ export const validateProps = (componentDefinition, props, stack=[], isFinal=true
const propsDefinition = componentDefinition.props;
for(let propDefName in props) {
if(propDefName === "_component") continue;
if(propDefName === "_children") continue;
if(propDefName === "_layout") continue;
for (let propDefName in props) {
const ignore = ['_component', "_children", '_layout', 'name', 'description', 'location'];
if (ignore.includes(propDefName)) continue;
const propDef = expandPropDef(propsDefinition[propDefName]);
const type = types[propDef.type];
const error = makeError(errors, propDefName, stack);
const error = makeError(errors, propDefName, stack);
const propValue = props[propDefName];
// component declarations dont need to define al props.
if(!isFinal && isUndefined(propValue)) continue;
if (!isFinal && isUndefined(propValue)) continue;
if(isFinal && propDef.required && propValue) {
if (isFinal && propDef.required && propValue) {
error(`Property ${propDefName} is required`);
continue;
}
}
if(isBinding(propValue)) {
if(propDef.type === "event") {
if (isBinding(propValue)) {
if (propDef.type === "event") {
error(`Cannot apply binding to type ${propDef.type}`);
continue;
}
}
else if(!type.isOfType(propValue)) {
else if (!type.isOfType(propValue)) {
error(`Property ${propDefName} is not of type ${propDef.type}. Actual value ${propValue}`)
continue;
}
if(propDef.type === "options"
&& propValue
&& !isBinding(propValue)
&& !includes(propValue)(propDef.options)) {
if (propDef.type === "options"
&& propValue
&& !isBinding(propValue)
&& !includes(propValue)(propDef.options)) {
error(`Property ${propDefName} is not one of allowed options. Acutal value is ${propValue}`);
}
@ -123,21 +124,20 @@ export const validateProps = (componentDefinition, props, stack=[], isFinal=true
export const validateComponentDefinition = (componentDefinition) => {
const { errors } = createProps(componentDefinition);
const propDefinitions = expandPropDef(componentDefinition.props);
pipe(propDefinitions, [
keys,
map(k => ({
propDef:propDefinitions[k],
propName:k
propDef: propDefinitions[k],
propName: k
})),
filter(d => d.propDef.type === "options"
&& (!d.propDef.options || d.propDef.options.length === 0)),
&& (!d.propDef.options || d.propDef.options.length === 0)),
each(d => makeError(errors, d.propName)(`${d.propName} does not have any options`))
]);
return errors;
}

3
packages/standard-components/src/Div.svelte
View file

@ -8,7 +8,7 @@ export let _bb;
let rootDiv;
$:{
if(_bb && rootDiv && _children && _children.length)
_bb.hydrateChildren(_children, theButton);
_bb.hydrateChildren(_children, rootDiv);
}
@ -16,4 +16,3 @@ $:{
<div class="{className}" bind:this={rootDiv}>
</div>