mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
39 changed files with 971 additions and 340 deletions
@ -0,0 +1,22 @@ |
|||||
|
export default { |
||||
|
name: `Create from scratch`, |
||||
|
create: () => createScreen(), |
||||
|
} |
||||
|
|
||||
|
const createScreen = () => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/container", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
type: "div", |
||||
|
_children: [], |
||||
|
_instanceName: "", |
||||
|
}, |
||||
|
route: "", |
||||
|
name: "screen-id", |
||||
|
}) |
||||
@ -0,0 +1,22 @@ |
|||||
|
export default { |
||||
|
name: `New Row (Empty)`, |
||||
|
create: () => createScreen(), |
||||
|
} |
||||
|
|
||||
|
const createScreen = () => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/newrow", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_children: [], |
||||
|
_instanceName: "", |
||||
|
model: "", |
||||
|
}, |
||||
|
route: "", |
||||
|
name: "screen-id", |
||||
|
}) |
||||
@ -0,0 +1,22 @@ |
|||||
|
export default { |
||||
|
name: `Row Detail (Empty)`, |
||||
|
create: () => createScreen(), |
||||
|
} |
||||
|
|
||||
|
const createScreen = () => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/rowdetail", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_children: [], |
||||
|
_instanceName: "", |
||||
|
model: "", |
||||
|
}, |
||||
|
route: "", |
||||
|
name: "screen-id", |
||||
|
}) |
||||
@ -0,0 +1,35 @@ |
|||||
|
import newRecordScreen from "./newRecordScreen" |
||||
|
import recordDetailScreen from "./recordDetailScreen" |
||||
|
import recordListScreen from "./recordListScreen" |
||||
|
import emptyNewRecordScreen from "./emptyNewRecordScreen" |
||||
|
import createFromScratchScreen from "./createFromScratchScreen" |
||||
|
import emptyRecordDetailScreen from "./emptyRecordDetailScreen" |
||||
|
import { generateNewIdsForComponent } from "../../storeUtils" |
||||
|
import { uuid } from "builderStore/uuid" |
||||
|
|
||||
|
const allTemplates = models => [ |
||||
|
createFromScratchScreen, |
||||
|
...newRecordScreen(models), |
||||
|
...recordDetailScreen(models), |
||||
|
...recordListScreen(models), |
||||
|
emptyNewRecordScreen, |
||||
|
emptyRecordDetailScreen, |
||||
|
] |
||||
|
|
||||
|
// allows us to apply common behaviour to all create() functions
|
||||
|
const createTemplateOverride = (frontendState, create) => () => { |
||||
|
const screen = create() |
||||
|
for (let component of screen.props._children) { |
||||
|
generateNewIdsForComponent(component, frontendState, false) |
||||
|
} |
||||
|
screen.props._id = uuid() |
||||
|
screen.name = screen.props._id |
||||
|
screen.route = screen.route.toLowerCase() |
||||
|
return screen |
||||
|
} |
||||
|
|
||||
|
export default (frontendState, models) => |
||||
|
allTemplates(models).map(template => ({ |
||||
|
...template, |
||||
|
create: createTemplateOverride(frontendState, template.create), |
||||
|
})) |
||||
@ -0,0 +1,135 @@ |
|||||
|
export default function(models) { |
||||
|
return models.map(model => { |
||||
|
const fields = Object.keys(model.schema) |
||||
|
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row" |
||||
|
return { |
||||
|
name: `${model.name} - New`, |
||||
|
create: () => createScreen(model, heading), |
||||
|
id: NEW_RECORD_TEMPLATE, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const NEW_RECORD_TEMPLATE = "NEW_RECORD_TEMPLATE" |
||||
|
|
||||
|
const createScreen = (model, heading) => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/newrow", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
model: model._id, |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/heading", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
text: heading, |
||||
|
type: "h1", |
||||
|
_instanceName: "Heading 1", |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/dataform", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
_instanceName: `${model.name} Form`, |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/container", |
||||
|
_styles: { |
||||
|
normal: { |
||||
|
display: "flex", |
||||
|
"flex-direction": "row", |
||||
|
"align-items": "center", |
||||
|
"justify-content": "flex-end", |
||||
|
}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
onLoad: [], |
||||
|
type: "div", |
||||
|
_instanceName: "Buttons Container", |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/button", |
||||
|
_styles: { |
||||
|
normal: { |
||||
|
"margin-right": "20px", |
||||
|
}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
text: "Back", |
||||
|
className: "", |
||||
|
disabled: false, |
||||
|
onClick: [ |
||||
|
{ |
||||
|
parameters: { |
||||
|
url: `/${model.name.toLowerCase()}`, |
||||
|
}, |
||||
|
"##eventHandlerType": "Navigate To", |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: "Back Button", |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/button", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
text: "Save", |
||||
|
className: "", |
||||
|
disabled: false, |
||||
|
onClick: [ |
||||
|
{ |
||||
|
parameters: { |
||||
|
contextPath: "data", |
||||
|
modelId: model._id, |
||||
|
}, |
||||
|
"##eventHandlerType": "Save Record", |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: "Save Button", |
||||
|
_children: [], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: `${model.name} - New`, |
||||
|
_code: "", |
||||
|
}, |
||||
|
route: `/${model.name.toLowerCase()}/new`, |
||||
|
name: "", |
||||
|
}) |
||||
@ -0,0 +1,135 @@ |
|||||
|
export default function(models) { |
||||
|
return models.map(model => { |
||||
|
const fields = Object.keys(model.schema) |
||||
|
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail" |
||||
|
return { |
||||
|
name: `${model.name} - Detail`, |
||||
|
create: () => createScreen(model, heading), |
||||
|
id: RECORD_DETAIL_TEMPLATE, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const RECORD_DETAIL_TEMPLATE = "RECORD_DETAIL_TEMPLATE" |
||||
|
|
||||
|
const createScreen = (model, heading) => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/rowdetail", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
model: model._id, |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/heading", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
text: heading, |
||||
|
type: "h1", |
||||
|
_instanceName: "Heading 1", |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/dataform", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
_instanceName: `${model.name} Form`, |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/container", |
||||
|
_styles: { |
||||
|
normal: { |
||||
|
display: "flex", |
||||
|
"flex-direction": "row", |
||||
|
"align-items": "center", |
||||
|
"justify-content": "flex-end", |
||||
|
}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
onLoad: [], |
||||
|
type: "div", |
||||
|
_instanceName: "Buttons Container", |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/button", |
||||
|
_styles: { |
||||
|
normal: { |
||||
|
"margin-right": "20px", |
||||
|
}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
text: "Back", |
||||
|
className: "", |
||||
|
disabled: false, |
||||
|
onClick: [ |
||||
|
{ |
||||
|
parameters: { |
||||
|
url: `/${model.name.toLowerCase()}`, |
||||
|
}, |
||||
|
"##eventHandlerType": "Navigate To", |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: "Back Button", |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/button", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
text: "Save", |
||||
|
className: "", |
||||
|
disabled: false, |
||||
|
onClick: [ |
||||
|
{ |
||||
|
parameters: { |
||||
|
contextPath: "data", |
||||
|
modelId: model._id, |
||||
|
}, |
||||
|
"##eventHandlerType": "Save Record", |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: "Save Button", |
||||
|
_children: [], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: `${model.name} - Detail`, |
||||
|
_code: "", |
||||
|
}, |
||||
|
route: `/${model.name.toLowerCase()}/:id`, |
||||
|
name: "", |
||||
|
}) |
||||
@ -0,0 +1,118 @@ |
|||||
|
export default function(models) { |
||||
|
return models.map(model => { |
||||
|
return { |
||||
|
name: `${model.name} - List`, |
||||
|
create: () => createScreen(model), |
||||
|
id: RECORD_LIST_TEMPLATE, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const RECORD_LIST_TEMPLATE = "RECORD_LIST_TEMPLATE" |
||||
|
|
||||
|
const createScreen = model => ({ |
||||
|
props: { |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/container", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
type: "div", |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/container", |
||||
|
_styles: { |
||||
|
normal: { |
||||
|
display: "flex", |
||||
|
"flex-direction": "row", |
||||
|
"justify-content": "space-between", |
||||
|
"align-items": "center", |
||||
|
}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
onLoad: [], |
||||
|
type: "div", |
||||
|
_instanceName: "Header", |
||||
|
_children: [ |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/heading", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
text: `${model.name} List`, |
||||
|
type: "h1", |
||||
|
_instanceName: "Heading 1", |
||||
|
_children: [], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/button", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
text: "Create New", |
||||
|
className: "", |
||||
|
disabled: false, |
||||
|
onClick: [ |
||||
|
{ |
||||
|
parameters: { |
||||
|
url: `/${model.name}/new`, |
||||
|
}, |
||||
|
"##eventHandlerType": "Navigate To", |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: "Create New Button", |
||||
|
_children: [], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
_id: "", |
||||
|
_component: "@budibase/standard-components/datatable", |
||||
|
_styles: { |
||||
|
normal: {}, |
||||
|
hover: {}, |
||||
|
active: {}, |
||||
|
selected: {}, |
||||
|
}, |
||||
|
_code: "", |
||||
|
datasource: { |
||||
|
label: "Deals", |
||||
|
name: `all_${model._id}`, |
||||
|
modelId: model._id, |
||||
|
isModel: true, |
||||
|
}, |
||||
|
stripeColor: "", |
||||
|
borderColor: "", |
||||
|
backgroundColor: "", |
||||
|
color: "", |
||||
|
_instanceName: `${model.name} Table`, |
||||
|
_children: [], |
||||
|
}, |
||||
|
], |
||||
|
_instanceName: `${model.name} - List`, |
||||
|
_code: "", |
||||
|
className: "", |
||||
|
onLoad: [], |
||||
|
}, |
||||
|
route: `/${model.name.toLowerCase()}`, |
||||
|
name: "", |
||||
|
}) |
||||
@ -0,0 +1,136 @@ |
|||||
|
<script> |
||||
|
import { Select, Label } from "@budibase/bbui" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import fetchBindableProperties from "builderStore/fetchBindableProperties" |
||||
|
import SaveFields from "./SaveFields.svelte" |
||||
|
import { |
||||
|
readableToRuntimeBinding, |
||||
|
runtimeToReadableBinding, |
||||
|
} from "builderStore/replaceBindings" |
||||
|
|
||||
|
// parameters.contextPath used in the client handler to determine which record to save |
||||
|
// this could be "data" or "data.parent", "data.parent.parent" etc |
||||
|
export let parameters |
||||
|
|
||||
|
let idFields |
||||
|
let schemaFields |
||||
|
|
||||
|
$: bindableProperties = fetchBindableProperties({ |
||||
|
componentInstanceId: $store.currentComponentInfo._id, |
||||
|
components: $store.components, |
||||
|
screen: $store.currentPreviewItem, |
||||
|
models: $backendUiStore.models, |
||||
|
}) |
||||
|
|
||||
|
$: { |
||||
|
if (parameters && parameters.contextPath) { |
||||
|
schemaFields = schemaFromContextPath(parameters.contextPath) |
||||
|
} else { |
||||
|
schemaFields = [] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const idBindingToContextPath = id => id.substring(0, id.length - 4) |
||||
|
const contextPathToId = path => `${path}._id` |
||||
|
|
||||
|
$: { |
||||
|
idFields = bindableProperties.filter( |
||||
|
bindable => |
||||
|
bindable.type === "context" && bindable.runtimeBinding.endsWith("._id") |
||||
|
) |
||||
|
// ensure contextPath is always defaulted - there is usually only one option |
||||
|
if (idFields.length > 0 && !parameters.contextPath) { |
||||
|
parameters.contextPath = idBindingToContextPath( |
||||
|
idFields[0].runtimeBinding |
||||
|
) |
||||
|
parameters = parameters |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// just wraps binding in {{ ... }} |
||||
|
const toBindingExpression = bindingPath => `{{ ${bindingPath} }}` |
||||
|
|
||||
|
// finds the selected idBinding, then reads the table/view |
||||
|
// from the component instance that it belongs to. |
||||
|
// then returns the field names for that schema |
||||
|
const schemaFromContextPath = contextPath => { |
||||
|
if (!contextPath) return [] |
||||
|
|
||||
|
const idBinding = bindableProperties.find( |
||||
|
prop => prop.runtimeBinding === contextPathToId(contextPath) |
||||
|
) |
||||
|
if (!idBinding) return [] |
||||
|
|
||||
|
const { instance } = idBinding |
||||
|
|
||||
|
const component = $store.components[instance._component] |
||||
|
|
||||
|
// component.context is the name of the prop that holds the modelId |
||||
|
const modelInfo = instance[component.context] |
||||
|
const modelId = |
||||
|
typeof modelInfo === "string" ? modelInfo : modelInfo.modelId |
||||
|
|
||||
|
if (!modelInfo) return [] |
||||
|
|
||||
|
const model = $backendUiStore.models.find(m => m._id === modelId) |
||||
|
parameters.modelId = modelId |
||||
|
return Object.keys(model.schema).map(k => ({ |
||||
|
name: k, |
||||
|
type: model.schema[k].type, |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
const onFieldsChanged = e => { |
||||
|
parameters.fields = e.detail |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
{#if idFields.length === 0} |
||||
|
<div class="cannot-use"> |
||||
|
Update record can only be used within a component that provides data, such |
||||
|
as a List |
||||
|
</div> |
||||
|
{:else} |
||||
|
<Label size="m" color="dark">Datasource</Label> |
||||
|
<Select secondary bind:value={parameters.contextPath}> |
||||
|
<option value="" /> |
||||
|
{#each idFields as idField} |
||||
|
<option value={idBindingToContextPath(idField.runtimeBinding)}> |
||||
|
{idField.instance._instanceName} |
||||
|
</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
{/if} |
||||
|
|
||||
|
{#if parameters.contextPath} |
||||
|
<SaveFields |
||||
|
parameterFields={parameters.fields} |
||||
|
{schemaFields} |
||||
|
on:fieldschanged={onFieldsChanged} /> |
||||
|
{/if} |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-s); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: auto 1fr auto 1fr auto; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
|
||||
|
.root :global(> div:nth-child(2)) { |
||||
|
grid-column-start: 2; |
||||
|
grid-column-end: 6; |
||||
|
} |
||||
|
|
||||
|
.cannot-use { |
||||
|
color: var(--red); |
||||
|
font-size: var(--font-size-s); |
||||
|
text-align: center; |
||||
|
width: 70%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
export let _bb |
||||
|
export let model |
||||
|
|
||||
|
let record = {} |
||||
|
|
||||
|
$: { |
||||
|
record.modelId = model |
||||
|
} |
||||
|
|
||||
|
let target |
||||
|
|
||||
|
async function fetchModel(id) { |
||||
|
const FETCH_MODEL_URL = `/api/models/${id}` |
||||
|
const response = await _bb.api.get(FETCH_MODEL_URL) |
||||
|
return await response.json() |
||||
|
} |
||||
|
|
||||
|
onMount(async () => { |
||||
|
if (model) { |
||||
|
const modelObj = await fetchModel(model) |
||||
|
record.modelId = model |
||||
|
record._model = modelObj |
||||
|
_bb.attachChildren(target, { |
||||
|
context: record, |
||||
|
}) |
||||
|
} else { |
||||
|
_bb.attachChildren(target, { |
||||
|
context: {}, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<section bind:this={target} /> |
||||
Loading…
Reference in new issue