mirror of https://github.com/Budibase/budibase.git
mike12345567
6 years ago
31 changed files with 901 additions and 309 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: "", |
|||
table: "", |
|||
}, |
|||
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: "", |
|||
table: "", |
|||
}, |
|||
route: "", |
|||
name: "screen-id", |
|||
}) |
|||
@ -0,0 +1,35 @@ |
|||
import newRowScreen from "./newRowScreen" |
|||
import rowDetailScreen from "./rowDetailScreen" |
|||
import rowListScreen from "./rowListScreen" |
|||
import emptyNewRowScreen from "./emptyNewRowScreen" |
|||
import createFromScratchScreen from "./createFromScratchScreen" |
|||
import emptyRowDetailScreen from "./emptyRowDetailScreen" |
|||
import { generateNewIdsForComponent } from "../../storeUtils" |
|||
import { uuid } from "builderStore/uuid" |
|||
|
|||
const allTemplates = tables => [ |
|||
createFromScratchScreen, |
|||
...newRowScreen(tables), |
|||
...rowDetailScreen(tables), |
|||
...rowListScreen(tables), |
|||
emptyNewRowScreen, |
|||
emptyRowDetailScreen, |
|||
] |
|||
|
|||
// 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, tables) => |
|||
allTemplates(tables).map(template => ({ |
|||
...template, |
|||
create: createTemplateOverride(frontendState, template.create), |
|||
})) |
|||
@ -0,0 +1,135 @@ |
|||
export default function(tables) { |
|||
return tables.map(table => { |
|||
const fields = Object.keys(table.schema) |
|||
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row" |
|||
return { |
|||
name: `${table.name} - New`, |
|||
create: () => createScreen(table, heading), |
|||
id: NEW_ROW_TEMPLATE, |
|||
} |
|||
}) |
|||
} |
|||
|
|||
export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE" |
|||
|
|||
const createScreen = (table, heading) => ({ |
|||
props: { |
|||
_id: "", |
|||
_component: "@budibase/standard-components/newrow", |
|||
_styles: { |
|||
normal: {}, |
|||
hover: {}, |
|||
active: {}, |
|||
selected: {}, |
|||
}, |
|||
table: table._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: `${table.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: `/${table.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", |
|||
tableId: table._id, |
|||
}, |
|||
"##eventHandlerType": "Save Row", |
|||
}, |
|||
], |
|||
_instanceName: "Save Button", |
|||
_children: [], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
_instanceName: `${table.name} - New`, |
|||
_code: "", |
|||
}, |
|||
route: `/${table.name.toLowerCase()}/new`, |
|||
name: "", |
|||
}) |
|||
@ -0,0 +1,135 @@ |
|||
export default function(tables) { |
|||
return tables.map(table => { |
|||
const fields = Object.keys(table.schema) |
|||
const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail" |
|||
return { |
|||
name: `${table.name} - Detail`, |
|||
create: () => createScreen(table, heading), |
|||
id: ROW_DETAIL_TEMPLATE, |
|||
} |
|||
}) |
|||
} |
|||
|
|||
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE" |
|||
|
|||
const createScreen = (table, heading) => ({ |
|||
props: { |
|||
_id: "", |
|||
_component: "@budibase/standard-components/rowdetail", |
|||
_styles: { |
|||
normal: {}, |
|||
hover: {}, |
|||
active: {}, |
|||
selected: {}, |
|||
}, |
|||
table: table._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: `${table.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: `/${table.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", |
|||
tableId: table._id, |
|||
}, |
|||
"##eventHandlerType": "Save Row", |
|||
}, |
|||
], |
|||
_instanceName: "Save Button", |
|||
_children: [], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
_instanceName: `${table.name} - Detail`, |
|||
_code: "", |
|||
}, |
|||
route: `/${table.name.toLowerCase()}/:id`, |
|||
name: "", |
|||
}) |
|||
@ -0,0 +1,118 @@ |
|||
export default function(tables) { |
|||
return tables.map(table => { |
|||
return { |
|||
name: `${table.name} - List`, |
|||
create: () => createScreen(table), |
|||
id: ROW_LIST_TEMPLATE, |
|||
} |
|||
}) |
|||
} |
|||
|
|||
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE" |
|||
|
|||
const createScreen = table => ({ |
|||
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: `${table.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: `/${table.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_${table._id}`, |
|||
tableId: table._id, |
|||
isTable: true, |
|||
}, |
|||
stripeColor: "", |
|||
borderColor: "", |
|||
backgroundColor: "", |
|||
color: "", |
|||
_instanceName: `${table.name} Table`, |
|||
_children: [], |
|||
}, |
|||
], |
|||
_instanceName: `${table.name} - List`, |
|||
_code: "", |
|||
className: "", |
|||
onLoad: [], |
|||
}, |
|||
route: `/${table.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 row 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, |
|||
tables: $backendUiStore.tables, |
|||
}) |
|||
|
|||
$: { |
|||
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 tableId |
|||
const tableInfo = instance[component.context] |
|||
const tableId = |
|||
typeof tableInfo === "string" ? tableInfo : tableInfo.tableId |
|||
|
|||
if (!tableInfo) return [] |
|||
|
|||
const table = $backendUiStore.tables.find(m => m._id === tableId) |
|||
parameters.tableId = tableId |
|||
return Object.keys(table.schema).map(k => ({ |
|||
name: k, |
|||
type: table.schema[k].type, |
|||
})) |
|||
} |
|||
|
|||
const onFieldsChanged = e => { |
|||
parameters.fields = e.detail |
|||
} |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
{#if idFields.length === 0} |
|||
<div class="cannot-use"> |
|||
Update row 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 table |
|||
|
|||
let row = {} |
|||
|
|||
$: { |
|||
row.tableId = table |
|||
} |
|||
|
|||
let target |
|||
|
|||
async function fetchTable(id) { |
|||
const FETCH_TABLE_URL = `/api/tables/${id}` |
|||
const response = await _bb.api.get(FETCH_TABLE_URL) |
|||
return await response.json() |
|||
} |
|||
|
|||
onMount(async () => { |
|||
if (table) { |
|||
const tableObj = await fetchTable(table) |
|||
row.tableId = table |
|||
row._table = tableObj |
|||
_bb.attachChildren(target, { |
|||
context: row, |
|||
}) |
|||
} else { |
|||
_bb.attachChildren(target, { |
|||
context: {}, |
|||
}) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<section bind:this={target} /> |
|||
Loading…
Reference in new issue