basic cru app possible
This commit is contained in:
parent
92dcf4b2b8
commit
540fb4c3d6
|
@ -57,7 +57,8 @@
|
|||
"orientation":{"type":"options", "options": ["horizontal", "vertical"]},
|
||||
"alignment":{"type":"options", "options": ["start", "center", "end"]},
|
||||
"fill":"bool",
|
||||
"hideNavBar":"bool"
|
||||
"hideNavBar":"bool",
|
||||
"className": "string"
|
||||
|
||||
},
|
||||
"tags": ["nav", "navigation", "sidebar"]
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -22,12 +22,12 @@ $ : {
|
|||
for(let el in htmlElements) {
|
||||
if(formControls[el].control.controlPosition === "Before Label") {
|
||||
_bb.insertComponent(
|
||||
formControls[el].control,
|
||||
_bb.props.formControls[el].control,
|
||||
htmlElements[el],
|
||||
labelElements[el]);
|
||||
} else {
|
||||
_bb.appendComponent(
|
||||
formControls[el].control,
|
||||
_bb.props.formControls[el].control,
|
||||
htmlElements[el]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ export let orientation="horizontal"; // horizontal, verical
|
|||
export let alignment="start"; // start, center, end
|
||||
export let pills=false;
|
||||
export let fill=false;
|
||||
export let className="";
|
||||
export let _bb;
|
||||
|
||||
let selectedIndex = -1;
|
||||
|
@ -45,7 +46,7 @@ $: {
|
|||
navClasses = _navClasses;
|
||||
|
||||
|
||||
if(items ) {
|
||||
if(items && componentElement) {
|
||||
|
||||
const currentSelectedItem = getSelectedItemByIndex(selectedIndex);
|
||||
|
||||
|
@ -79,14 +80,14 @@ const SelectItem = (index) => {
|
|||
|
||||
if(index >= 0)
|
||||
currentComponent = _bb.hydrateComponent(
|
||||
items[index].component, componentElement);
|
||||
_bb.props.items[index].component, componentElement);
|
||||
|
||||
}
|
||||
|
||||
const onSelectItemClicked = index => () => {
|
||||
if(_bb.bindings["selectedItem"]) {
|
||||
if(_bb.props.selectedItem) {
|
||||
// binding - call state, which should SelectItem(..)
|
||||
const selectedItemBinding = _bb.bindings["selectedItem"];
|
||||
const selectedItemBinding = _bb.props.selectedItem;
|
||||
_bb.setStateFromBinding(
|
||||
selectedItemBinding, getSelectedItemByIndex(index))
|
||||
} else {
|
||||
|
@ -98,7 +99,7 @@ const onSelectItemClicked = index => () => {
|
|||
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="root {className}">
|
||||
{#if !hideNavBar}
|
||||
<ul class="nav {navClasses}">
|
||||
{#each items as navItem, index}
|
||||
|
@ -127,6 +128,5 @@ const onSelectItemClicked = index => () => {
|
|||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
@ -15,7 +15,8 @@ export const app = ({records, indexes, helpers}) => [
|
|||
"##bbstate":"selectedNav",
|
||||
"##bbstatefallback":`${records[0].name}`,
|
||||
"##bbsource": "store"
|
||||
}
|
||||
},
|
||||
className: "p-3"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -12,7 +12,7 @@ export const buttons = () => [
|
|||
description: "Bootstrap default button",
|
||||
inherits: "@budibase/standard-components/button",
|
||||
props: {
|
||||
className: "btn btn-light"
|
||||
className: "btn btn-secondary"
|
||||
}
|
||||
}
|
||||
]
|
|
@ -18,23 +18,12 @@ export const indexTableProps = (index, helpers) => ({
|
|||
.map(column),
|
||||
onRowClick: [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
parameters: {
|
||||
recordKey: {
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "context"
|
||||
},
|
||||
statePath: {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
}
|
||||
},
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "currentView",
|
||||
path: `selectedrow_${index.name}`,
|
||||
value: {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "event"
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
@ -45,14 +45,8 @@ const component = ({record, index}) => ({
|
|||
inherits: "@budibase/standard-components/div",
|
||||
name: homepageComponentName(record),
|
||||
props: {
|
||||
className: "p-3",
|
||||
className: "d-flex flex-column h-100",
|
||||
children: [
|
||||
{
|
||||
component: {
|
||||
_component: "@budibase/standard-components/h2",
|
||||
text: record.collectionName
|
||||
}
|
||||
},
|
||||
{
|
||||
component: {
|
||||
_component: `${record.name}/homepage buttons`,
|
||||
|
@ -61,7 +55,8 @@ const component = ({record, index}) => ({
|
|||
{
|
||||
component: {
|
||||
_component: getIndexTableName(index)
|
||||
}
|
||||
},
|
||||
className: "flex-gow-1 overflow-auto"
|
||||
}
|
||||
],
|
||||
onLoad: [
|
||||
|
@ -88,26 +83,49 @@ const homePageButtons = ({index, record}) => ({
|
|||
inherits: "@budibase/standard-components/div",
|
||||
name: `${record.name}/homepage buttons`,
|
||||
props: {
|
||||
className: "btn-group",
|
||||
className: "btn-toolbar mt-4 mb-2",
|
||||
children: [
|
||||
{
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Create ${record.name}`,
|
||||
onClick: [
|
||||
_component: "@budibase/standard-components/div",
|
||||
className: "btn-group mr-3",
|
||||
children: [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
parameters: {
|
||||
statePath: record.name,
|
||||
collectionKey: `/${record.collectionName}`,
|
||||
childRecordType: record.name
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Create ${record.name}`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
parameters: {
|
||||
statePath: record.name,
|
||||
collectionKey: `/${record.collectionName}`,
|
||||
childRecordType: record.name
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: `isEditing${record.name}`,
|
||||
value: "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: `isEditing${record.name}`,
|
||||
value: "true"
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Refresh`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
parameters: {
|
||||
statePath: index.nodeKey(),
|
||||
indexKey: index.nodeKey()
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -115,17 +133,56 @@ const homePageButtons = ({index, record}) => ({
|
|||
},
|
||||
{
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Refresh`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
parameters: {
|
||||
statePath: index.nodeKey(),
|
||||
indexKey: index.nodeKey()
|
||||
_component: "@budibase/standard-components/if",
|
||||
condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
className: "btn-group",
|
||||
children: [
|
||||
{
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Edit ${record.name}`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
parameters: {
|
||||
statePath: record.name,
|
||||
recordKey: {
|
||||
"##bbstate" : `selectedrow_${index.name}`,
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: `isEditing${record.name}`,
|
||||
value: "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
component: {
|
||||
_component: "common/Default Button",
|
||||
contentText: `Delete ${record.name}`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Delete Record",
|
||||
parameters: {
|
||||
recordKey: {
|
||||
"##bbstate" : `selectedrow_${index.name}`,
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
@ -13,7 +13,7 @@ import {trimSlash} from "../common/trimSlash";
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
|
|
@ -21,19 +21,14 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext, props)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -90,7 +85,7 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
if(isFunction(event)) event(context);
|
||||
}
|
||||
|
||||
const bb = (bindings, context, props) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -104,7 +99,6 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
|
|
@ -35,4 +35,4 @@ export const setState = (store, path, value) => {
|
|||
};
|
||||
|
||||
export const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
|
@ -55,12 +55,13 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback,
|
||||
source
|
||||
);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback,
|
||||
source);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
|
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -134,7 +134,8 @@
|
|||
"_component": "@budibase/standard-components/h3",
|
||||
"text": "Edit customer",
|
||||
"className": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -185,7 +186,8 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -230,7 +232,8 @@
|
|||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
|
@ -256,7 +259,7 @@
|
|||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
|
@ -274,7 +277,8 @@
|
|||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
|
@ -299,7 +303,8 @@
|
|||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "p-1",
|
||||
|
@ -314,14 +319,6 @@
|
|||
"elseComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/h2",
|
||||
"text": "customers",
|
||||
"className": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
|
@ -330,69 +327,182 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Create customer",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"collectionKey": "/customers",
|
||||
"childRecordType": "customer"
|
||||
}
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Create customer",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"collectionKey": "/customers",
|
||||
"childRecordType": "customer"
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
}
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Refresh",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_customers",
|
||||
"indexKey": "/all_customers"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
"className": "btn-group mr-3",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
"dataItemComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Refresh",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_customers",
|
||||
"indexKey": "/all_customers"
|
||||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Edit customer",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_customers",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Delete customer",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Delete Record",
|
||||
"parameters": {
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_customers",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
"dataItemComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
},
|
||||
"elseComponent": {
|
||||
"_component": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
|
@ -400,7 +510,8 @@
|
|||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -432,10 +543,10 @@
|
|||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "currentView",
|
||||
"path": "selectedrow_all_customers",
|
||||
"value": {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "event"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -445,10 +556,11 @@
|
|||
"tbodyClass": "tbody-default",
|
||||
"trClass": "tr-default",
|
||||
"thClass": "th-default"
|
||||
}
|
||||
},
|
||||
"className": "flex-gow-1 overflow-auto"
|
||||
}
|
||||
],
|
||||
"className": "p-3",
|
||||
"className": "d-flex flex-column h-100",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
|
@ -489,7 +601,8 @@
|
|||
"_component": "@budibase/standard-components/h3",
|
||||
"text": "Edit Contact",
|
||||
"className": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -524,7 +637,8 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -569,7 +683,8 @@
|
|||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
|
@ -595,7 +710,7 @@
|
|||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
|
@ -613,7 +728,8 @@
|
|||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
|
@ -638,7 +754,8 @@
|
|||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "p-1",
|
||||
|
@ -653,14 +770,6 @@
|
|||
"elseComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/h2",
|
||||
"text": "contacts",
|
||||
"className": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
|
@ -669,69 +778,182 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Create Contact",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"collectionKey": "/contacts",
|
||||
"childRecordType": "Contact"
|
||||
}
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Create Contact",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"collectionKey": "/contacts",
|
||||
"childRecordType": "Contact"
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
}
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Refresh",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_contacts",
|
||||
"indexKey": "/all_contacts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
"className": "btn-group mr-3",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
"dataItemComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Refresh",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-light",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_contacts",
|
||||
"indexKey": "/all_contacts"
|
||||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Edit Contact",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_contacts",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/button",
|
||||
"contentText": "Delete Contact",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-secondary",
|
||||
"disabled": false,
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Delete Record",
|
||||
"parameters": {
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_contacts",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"background": "",
|
||||
"color": "",
|
||||
"border": "",
|
||||
"padding": "",
|
||||
"hoverColor": "",
|
||||
"hoverBackground": "",
|
||||
"hoverBorder": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
"dataItemComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
},
|
||||
"elseComponent": {
|
||||
"_component": ""
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
}
|
||||
],
|
||||
"className": "btn-group",
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
|
@ -739,7 +961,8 @@
|
|||
"_component": ""
|
||||
},
|
||||
"onLoad": []
|
||||
}
|
||||
},
|
||||
"className": ""
|
||||
},
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
@ -771,10 +994,10 @@
|
|||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "currentView",
|
||||
"path": "selectedrow_all_contacts",
|
||||
"value": {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "event"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -784,10 +1007,11 @@
|
|||
"tbodyClass": "tbody-default",
|
||||
"trClass": "tr-default",
|
||||
"thClass": "th-default"
|
||||
}
|
||||
},
|
||||
"className": "flex-gow-1 overflow-auto"
|
||||
}
|
||||
],
|
||||
"className": "p-3",
|
||||
"className": "d-flex flex-column h-100",
|
||||
"data": {
|
||||
"##bbstate": ""
|
||||
},
|
||||
|
@ -816,14 +1040,15 @@
|
|||
],
|
||||
"selectedItem": {
|
||||
"##bbstate": "selectedNav",
|
||||
"##bbstatefallback": "customer",
|
||||
"##bbstatefallback": "customers",
|
||||
"##bbsource": "store"
|
||||
},
|
||||
"pills": true,
|
||||
"pills": false,
|
||||
"orientation": "horizontal",
|
||||
"alignment": "start",
|
||||
"alignment": "end",
|
||||
"fill": false,
|
||||
"hideNavBar": false
|
||||
"hideNavBar": false,
|
||||
"className": "p-3"
|
||||
},
|
||||
"unauthenticated": {
|
||||
"_component": "@budibase/standard-components/login",
|
||||
|
|
|
@ -17,13 +17,17 @@
|
|||
}
|
||||
],
|
||||
"orientation": "horizontal",
|
||||
"alignment": "start",
|
||||
"alignment": "end",
|
||||
"fill": false,
|
||||
"pills": true,
|
||||
"pills": false,
|
||||
"selectedItem": {
|
||||
"##bbstate": "selectedNav",
|
||||
"##bbstatefallback": "customer",
|
||||
"##bbstatefallback": "customers",
|
||||
"##bbsource": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
"className": "p-3"
|
||||
},
|
||||
"tags": [
|
||||
""
|
||||
]
|
||||
}
|
||||
|
|
|
@ -2,14 +2,8 @@
|
|||
"inherits": "@budibase/standard-components/div",
|
||||
"name": "Contact/Contact homepage",
|
||||
"props": {
|
||||
"className": "p-3",
|
||||
"className": "d-flex flex-column h-100",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/h2",
|
||||
"text": "contacts"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "Contact/homepage buttons"
|
||||
|
@ -18,7 +12,8 @@
|
|||
{
|
||||
"component": {
|
||||
"_component": "all_contacts Table"
|
||||
}
|
||||
},
|
||||
"className": "flex-gow-1 overflow-auto"
|
||||
}
|
||||
],
|
||||
"onLoad": [
|
||||
|
|
|
@ -2,26 +2,49 @@
|
|||
"inherits": "@budibase/standard-components/div",
|
||||
"name": "Contact/homepage buttons",
|
||||
"props": {
|
||||
"className": "btn-group",
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Create Contact",
|
||||
"onClick": [
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": "btn-group mr-3",
|
||||
"children": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"collectionKey": "/contacts",
|
||||
"childRecordType": "Contact"
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Create Contact",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"collectionKey": "/contacts",
|
||||
"childRecordType": "Contact"
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Refresh",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_contacts",
|
||||
"indexKey": "/all_contacts"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -29,17 +52,56 @@
|
|||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Refresh",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_contacts",
|
||||
"indexKey": "/all_contacts"
|
||||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Edit Contact",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
"parameters": {
|
||||
"statePath": "Contact",
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_contacts",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingContact",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Delete Contact",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Delete Record",
|
||||
"parameters": {
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_contacts",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
@ -28,10 +28,10 @@
|
|||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "currentView",
|
||||
"path": "selectedrow_all_contacts",
|
||||
"value": {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "event"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,10 +28,10 @@
|
|||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "currentView",
|
||||
"path": "selectedrow_all_customers",
|
||||
"value": {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "event"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,6 @@
|
|||
"description": "Bootstrap default button",
|
||||
"inherits": "@budibase/standard-components/button",
|
||||
"props": {
|
||||
"className": "btn btn-light"
|
||||
"className": "btn btn-secondary"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,14 +2,8 @@
|
|||
"inherits": "@budibase/standard-components/div",
|
||||
"name": "customer/customer homepage",
|
||||
"props": {
|
||||
"className": "p-3",
|
||||
"className": "d-flex flex-column h-100",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/h2",
|
||||
"text": "customers"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "customer/homepage buttons"
|
||||
|
@ -18,7 +12,8 @@
|
|||
{
|
||||
"component": {
|
||||
"_component": "all_customers Table"
|
||||
}
|
||||
},
|
||||
"className": "flex-gow-1 overflow-auto"
|
||||
}
|
||||
],
|
||||
"onLoad": [
|
||||
|
|
|
@ -2,26 +2,49 @@
|
|||
"inherits": "@budibase/standard-components/div",
|
||||
"name": "customer/homepage buttons",
|
||||
"props": {
|
||||
"className": "btn-group",
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Create customer",
|
||||
"onClick": [
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": "btn-group mr-3",
|
||||
"children": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"collectionKey": "/customers",
|
||||
"childRecordType": "customer"
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Create customer",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Get New Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"collectionKey": "/customers",
|
||||
"childRecordType": "customer"
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Refresh",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_customers",
|
||||
"indexKey": "/all_customers"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -29,17 +52,56 @@
|
|||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Refresh",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "List Records",
|
||||
"parameters": {
|
||||
"statePath": "/all_customers",
|
||||
"indexKey": "/all_customers"
|
||||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Edit customer",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
"parameters": {
|
||||
"statePath": "customer",
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_customers",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
"parameters": {
|
||||
"path": "isEditingcustomer",
|
||||
"value": "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": {
|
||||
"_component": "common/Default Button",
|
||||
"contentText": "Delete customer",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Delete Record",
|
||||
"parameters": {
|
||||
"recordKey": {
|
||||
"##bbstate": "selectedrow_all_customers",
|
||||
"##source": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -19002,7 +19002,7 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const setStateFromBinding = (store, binding, value) =>
|
||||
setState(store, binding.path, value);
|
||||
setState(store, binding[BB_STATE_BINDINGPATH], value);
|
||||
|
||||
const getState = (s, path, fallback) => {
|
||||
|
||||
|
@ -19081,7 +19081,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -19368,10 +19368,12 @@ var app = (function (exports) {
|
|||
fallback, propName, source
|
||||
});
|
||||
|
||||
initialProps[propName] = getState(
|
||||
context || {},
|
||||
binding,
|
||||
fallback);
|
||||
initialProps[propName] = !context
|
||||
? val
|
||||
: getState(
|
||||
context ,
|
||||
binding,
|
||||
fallback);
|
||||
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
|
@ -20502,19 +20504,14 @@ var app = (function (exports) {
|
|||
|
||||
if(!componentName || !libName) return;
|
||||
|
||||
const {
|
||||
initialProps, bind,
|
||||
boundProps, boundArrays,
|
||||
contextBoundProps
|
||||
} = setupBinding(
|
||||
const {initialProps, bind} = setupBinding(
|
||||
store, props, coreApi,
|
||||
context || parentContext, appDefinition.appRootPath);
|
||||
|
||||
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
|
||||
|
||||
|
||||
const componentProps = {
|
||||
...initialProps,
|
||||
_bb:bb(bindings, context || parentContext)
|
||||
_bb:bb(context || parentContext, props)
|
||||
};
|
||||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
|
@ -20571,7 +20568,7 @@ var app = (function (exports) {
|
|||
if(isFunction(event)) event(context);
|
||||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
const bb = (context, props) => ({
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
|
@ -20585,56 +20582,14 @@ var app = (function (exports) {
|
|||
setState: (path, value) => setState(store, path, value),
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext),
|
||||
bindings,
|
||||
context,
|
||||
context,
|
||||
props
|
||||
});
|
||||
|
||||
return bb();
|
||||
|
||||
};
|
||||
|
||||
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
|
||||
const bindings = {};
|
||||
if(boundProps && boundProps.length > 0) {
|
||||
for(let p of boundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(contextBoundProps && contextBoundProps.length > 0) {
|
||||
for(let p of contextBoundProps) {
|
||||
bindings[p.propName] = {
|
||||
path: p.path,
|
||||
fallback: p.fallback,
|
||||
source: p.source
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if(boundArrays && boundArrays.length > 0) {
|
||||
for(let a of boundArrays) {
|
||||
const arrayOfBindings = [];
|
||||
|
||||
for(let b of a.arrayOfBindings) {
|
||||
arrayOfBindings.push(
|
||||
buildBindings(
|
||||
b.boundProps,
|
||||
b.boundArrays,
|
||||
b.contextBoundProps)
|
||||
);
|
||||
}
|
||||
|
||||
bindings[a.propName] = arrayOfBindings;
|
||||
}
|
||||
}
|
||||
|
||||
return bindings;
|
||||
};
|
||||
|
||||
|
||||
const splitName = fullname => {
|
||||
const componentName = $(fullname, [
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -28379,7 +28379,7 @@
|
|||
}
|
||||
|
||||
const record = await api.get({
|
||||
url:`/api/record/${trimSlash(key)}`
|
||||
url:`/api/record/${trimSlash(recordKey)}`
|
||||
});
|
||||
|
||||
if(api.isSuccess(record))
|
||||
|
@ -32331,7 +32331,7 @@
|
|||
|
||||
/******/ });
|
||||
});
|
||||
|
||||
//# sourceMappingURL=feather.js.map
|
||||
});
|
||||
|
||||
var feather$1 = unwrapExports(feather);
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -162,13 +162,16 @@
|
|||
"children": {
|
||||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"control":"component",
|
||||
"gridColumn":"string",
|
||||
"gridRow":"string",
|
||||
"component":"component",
|
||||
"gridColumnStart":"string",
|
||||
"gridColumnEnd":"string",
|
||||
"gridRowStart":"string",
|
||||
"gridRowEnd":"string"
|
||||
"gridRowEnd":"string",
|
||||
"justifySelf": {
|
||||
"type":"options",
|
||||
"options":["start", "center", "end", "stretch"],
|
||||
"default":"stretch"
|
||||
}
|
||||
}
|
||||
},
|
||||
"width": {"type":"string","default":"auto"},
|
||||
|
@ -297,7 +300,8 @@
|
|||
"children": {
|
||||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"component":"component"
|
||||
"component":"component",
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"className":"string",
|
||||
|
|
|
@ -13,18 +13,53 @@ let staticComponentsApplied=false;
|
|||
let dataBoundComponents = [];
|
||||
let previousData;
|
||||
let onLoadCalled = false;
|
||||
let staticHtmlElements = {};
|
||||
|
||||
const hasData = () =>
|
||||
Array.isArray(data) && data.length > 0;
|
||||
|
||||
const staticElementsInitialised = () => {
|
||||
|
||||
if(!children) return false;
|
||||
|
||||
if(children.filter(c => c.className).length === Object.keys(staticHtmlElements).length)
|
||||
return true;
|
||||
}
|
||||
|
||||
const getStaticAnchor = (elementIndex) => {
|
||||
const nextElements = Object.keys(staticHtmlElements).filter(k => k > elementIndex);
|
||||
|
||||
return nextElements.length === 0
|
||||
? null
|
||||
: staticHtmlElements[Math.min(...nextElements)];
|
||||
}
|
||||
|
||||
$: {
|
||||
|
||||
if(rootDiv) {
|
||||
if(children && children.length > 0 && !staticComponentsApplied) {
|
||||
for(let child of children) {
|
||||
_bb.appendComponent(
|
||||
child.component,
|
||||
rootDiv);
|
||||
if(children && children.length > 0
|
||||
&& !staticComponentsApplied
|
||||
&& staticElementsInitialised()) {
|
||||
let index = 0;
|
||||
for(let child of _bb.props.children) {
|
||||
if(child.className) {
|
||||
_bb.hydrateComponent(
|
||||
child.component,
|
||||
staticHtmlElements[index]);
|
||||
} else {
|
||||
const anchor = getStaticAnchor(index);
|
||||
if(!anchor) {
|
||||
_bb.appendComponent(
|
||||
child.component,
|
||||
rootDiv);
|
||||
} else {
|
||||
_bb.insertComponent(
|
||||
child.component,
|
||||
rootDiv,
|
||||
anchor);
|
||||
}
|
||||
}
|
||||
index += 1;
|
||||
}
|
||||
staticComponentsApplied = true;
|
||||
}
|
||||
|
@ -42,7 +77,7 @@ $: {
|
|||
let index = 0;
|
||||
for(let dataItem of data) {
|
||||
_bb.appendComponent(
|
||||
dataItemComponent,
|
||||
_bb.props.dataItemComponent,
|
||||
rootDiv,
|
||||
dataItem
|
||||
);
|
||||
|
@ -61,5 +96,12 @@ $: {
|
|||
</script>
|
||||
|
||||
<div class="{className}" bind:this={rootDiv}>
|
||||
{#each children as child, index}
|
||||
{#if child.className}
|
||||
<div class="{child.className}"
|
||||
bind:this={staticHtmlElements[index]}>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@ $ : {
|
|||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
_bb.props.formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,8 +5,6 @@ import {buildStyle} from "./buildStyle";
|
|||
export let gridTemplateRows ="";
|
||||
export let gridTemplateColumns ="";
|
||||
export let children = [];
|
||||
export let width = "auto";
|
||||
export let height = "auto";
|
||||
export let containerClass="";
|
||||
export let itemContainerClass="";
|
||||
|
||||
|
@ -20,15 +18,16 @@ export let _bb;
|
|||
|
||||
let style="";
|
||||
let htmlElements = {};
|
||||
|
||||
let isInitilised = false;
|
||||
$ : {
|
||||
if(_bb && htmlElements) {
|
||||
if(!isInitilised && _bb && htmlElements && Object.keys(htmlElements).length > 0) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
_bb.props.children[el].component,
|
||||
htmlElements[el]
|
||||
);
|
||||
}
|
||||
isInitilised = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -36,16 +35,14 @@ const childStyle = child =>
|
|||
buildStyle({
|
||||
"grid-column-start": child.gridColumnStart,
|
||||
"grid-column-end": child.gridColumnEnd,
|
||||
"grid-column": child.gridColumn,
|
||||
"grid-row-start": child.gridRowStart,
|
||||
"grid-row-end": child.gridRowStart,
|
||||
"grid-row": child.gridRow,
|
||||
"grid-row-end": child.gridRowStart
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root {containerClass}"
|
||||
style="width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
|
||||
style="grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
|
||||
{#each children as child, index}
|
||||
<div class="{itemContainerClass}"
|
||||
style={childStyle(child)}
|
||||
|
@ -58,6 +55,8 @@ const childStyle = child =>
|
|||
|
||||
.root {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
|
@ -33,10 +33,10 @@ $: {
|
|||
|
||||
if(result) {
|
||||
currentComponent = _bb.hydrateComponent(
|
||||
thenComponent,element);
|
||||
_bb.props.thenComponent,element);
|
||||
} else if(elseComponent && elseComponent._component) {
|
||||
currentComponent = _bb.hydrateComponent(
|
||||
elseComponent,element);
|
||||
_bb.props.elseComponent,element);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ let actualValue = "";
|
|||
|
||||
const onchange = (ev) => {
|
||||
if(_bb) {
|
||||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
|
||||
_bb.setStateFromBinding(_bb.props.value, ev.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -54,7 +54,7 @@ const onSelectItem = (index) => () => {
|
|||
selectedIndex = index;
|
||||
if(!components[index]) {
|
||||
const comp = _bb.hydrateComponent(
|
||||
items[index].component, componentElements[index]);
|
||||
_bb.props.items[index].component, componentElements[index]);
|
||||
components[index] = comp;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -37,7 +37,7 @@ $: {
|
|||
});
|
||||
|
||||
if(_bb && component && componentElement && !componentInitialised) {
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
_bb.hydrateComponent(_bb.props.component, componentElement);
|
||||
componentInitialised = true;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ let actualValue = "";
|
|||
|
||||
const onchange = (ev) => {
|
||||
if(_bb) {
|
||||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
|
||||
_bb.setStateFromBinding(_bb.props.value, ev.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -44,7 +44,7 @@ $: {
|
|||
|
||||
for(let el in staticHtmlElements) {
|
||||
staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
_bb.props.children[el].control,
|
||||
staticHtmlElements[el]
|
||||
);
|
||||
}
|
||||
|
@ -62,7 +62,7 @@ $: {
|
|||
let index = 0;
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
_bb.props.dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
);
|
||||
|
|
|
@ -17,7 +17,7 @@ const rowClickHandler = (row) => () => {
|
|||
|
||||
const cellValue = (colIndex, row) => {
|
||||
const val = _bb.getStateOrValue(
|
||||
_bb.bindings.columns[colIndex].value
|
||||
_bb.props.columns[colIndex].value
|
||||
, row)
|
||||
return val;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ let actualValue = "";
|
|||
|
||||
const onchange = (ev) => {
|
||||
if(_bb) {
|
||||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
|
||||
_bb.setStateFromBinding(_bb.props.value, ev.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ const createClasses = (classes) => {
|
|||
|
||||
$:{
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(_bb.props.contentComponent, contentComponentContainer);
|
||||
|
||||
cssVariables = {
|
||||
hoverColor, hoverBorder,
|
||||
|
|
Loading…
Reference in New Issue