forked from tsai/budibase
Michael Shanks
7 years ago
48 changed files with 566 additions and 289 deletions
@ -0,0 +1,47 @@ |
|||
<script> |
|||
export let containerClass = ""; |
|||
export let formControls = []; |
|||
|
|||
export let _bb; |
|||
|
|||
let htmlElements = {}; |
|||
let labelElements = {}; |
|||
let labels = {}; |
|||
let isInitialised = false; |
|||
|
|||
$ : { |
|||
|
|||
if(_bb && htmlElements && !isInitialised) { |
|||
|
|||
let cIndex = 0; |
|||
for(let c of formControls) { |
|||
labels[cIndex] = c.label; |
|||
cIndex++; |
|||
} |
|||
|
|||
for(let el in htmlElements) { |
|||
if(formControls[el].control.controlPosition === "Before Label") { |
|||
_bb.insertComponent( |
|||
formControls[el].control, |
|||
htmlElements[el], |
|||
labelElements[el]); |
|||
} else { |
|||
_bb.appendComponent( |
|||
formControls[el].control, |
|||
htmlElements[el]); |
|||
} |
|||
} |
|||
isInitialised = true; |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<form> |
|||
{#each formControls as child, index} |
|||
<div class="form-group" bind:this={htmlElements[index]}> |
|||
<label bind:this={labelElements[index]}>{labels[index]}</label> |
|||
</div> |
|||
{/each} |
|||
</form> |
|||
|
|||
@ -0,0 +1,110 @@ |
|||
import {headers} from "./headersGenerator"; |
|||
|
|||
export const forms = ({records, indexes}) => |
|||
[...headers({records, indexes}), |
|||
...records.map(root)]; |
|||
|
|||
const root = record => ({ |
|||
name: `${record.name} Form`, |
|||
description: `Control for creating/updating '${record.nodeKey()}' `, |
|||
inherits: "@budibase/standard-components/div", |
|||
props: { |
|||
direction: "vertical", |
|||
children: [ |
|||
{ |
|||
control: { |
|||
_component: "@budibase/standard-components/H3", |
|||
text: `Edit ${record.name}`, |
|||
} |
|||
}, |
|||
form(record), |
|||
saveCancelButtons(record) |
|||
] |
|||
} |
|||
}) |
|||
|
|||
const form = record => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/form", |
|||
formControls: |
|||
record.fields.map(f => ({ |
|||
label: f.label, |
|||
control: { |
|||
_component: "@budibase/standard-components/input", |
|||
value: { |
|||
"##bbstate":`current${record.name}.${f.name}`, |
|||
"##bbsource":"store" |
|||
} |
|||
} |
|||
})) |
|||
} |
|||
}) |
|||
|
|||
const formControl = (record, field) => { |
|||
if(field.type === "string" && field.typeOptions.values && values.typeOptions.length > 0) { |
|||
return ({ |
|||
_component: "@budibase/standard-components/select", |
|||
options: field.typeOptions.values.map(v => ({id:v, value:v})), |
|||
value: { |
|||
"##bbstate":`current${record.name}.${f.name}`, |
|||
"##bbsource":"store" |
|||
}, |
|||
className: "form-control" |
|||
}); |
|||
} else { |
|||
return ({ |
|||
_component: "@budibase/standard-components/input", |
|||
value: { |
|||
"##bbstate":`current${record.name}.${f.name}`, |
|||
"##bbsource":"store" |
|||
}, |
|||
className: "form-control", |
|||
type: field.type === "string" ? "text" |
|||
: field.type === "datetime" ? "date" |
|||
: field.type === "number" ? "number" |
|||
: "text" |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const saveCancelButtons = (record) => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/stackpanel", |
|||
direction: "horizontal", |
|||
children: [ |
|||
paddedPanelForButton({ |
|||
_component: "common/Primary Button", |
|||
contentText: `Save ${record.name}`, |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "Save Record", |
|||
parameters: { |
|||
statePath: `current${record.name}`, |
|||
} |
|||
} |
|||
] |
|||
}), |
|||
paddedPanelForButton({ |
|||
_component: "common/Default Button", |
|||
contentText: `Cancel`, |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "Save Record", |
|||
parameters: { |
|||
statePath: `current${record.name}`, |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
] |
|||
} |
|||
}) |
|||
|
|||
const paddedPanelForButton = (button) => ({ |
|||
control: { |
|||
_component: "@budibase/standard-components/panel", |
|||
padding: "20px", |
|||
component: button |
|||
} |
|||
}); |
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,12 @@ |
|||
<script> |
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h1 class={className}> |
|||
{text} |
|||
</h1> |
|||
@ -0,0 +1,12 @@ |
|||
<script> |
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h1 class={className}> |
|||
{text} |
|||
</h1> |
|||
@ -0,0 +1,12 @@ |
|||
<script> |
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h3 class={className}> |
|||
{text} |
|||
</h3> |
|||
@ -0,0 +1,12 @@ |
|||
<script> |
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h4 class={className}> |
|||
{text} |
|||
</h4> |
|||
@ -0,0 +1,12 @@ |
|||
<script> |
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h6 class={className}> |
|||
{text} |
|||
</h6> |
|||
@ -0,0 +1,14 @@ |
|||
<script> |
|||
import {buildStyle} from "./buildStyle"; |
|||
|
|||
export let text=""; |
|||
export let className="" |
|||
|
|||
export let _bb; |
|||
|
|||
|
|||
</script> |
|||
|
|||
<h1 class={className}> |
|||
{text} |
|||
</h1> |
|||
@ -0,0 +1,42 @@ |
|||
<script> |
|||
|
|||
export let value=""; |
|||
export let className = "default"; |
|||
export let type = "text"; |
|||
|
|||
export let _bb; |
|||
|
|||
let actualValue = ""; |
|||
|
|||
const onchange = (ev) => { |
|||
if(_bb) { |
|||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value); |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<input class={className} |
|||
type={type} |
|||
value={value} |
|||
on:change={onchange}/> |
|||
|
|||
|
|||
<style> |
|||
.default { |
|||
width: 100%; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
padding: 0.4em; |
|||
margin: 0 0 0.5em 0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #ccc; |
|||
border-radius: 2px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.default:disabled { |
|||
color: #ccc; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<script> |
|||
|
|||
export let value=""; |
|||
export let className = "default"; |
|||
export let type = "text"; |
|||
export let options = []; |
|||
|
|||
export let _bb; |
|||
|
|||
let actualValue = ""; |
|||
|
|||
const onchange = (ev) => { |
|||
if(_bb) { |
|||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value); |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<select class={className} |
|||
value={value} |
|||
on:change={onchange}> |
|||
{#each options as opt} |
|||
<option id={opt.id ? opt.id : opt.value}>{opt.value}</option> |
|||
{/each} |
|||
</select> |
|||
|
|||
|
|||
<style> |
|||
.default { |
|||
width: 100%; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
padding: 0.4em; |
|||
margin: 0 0 0.5em 0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #ccc; |
|||
border-radius: 2px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.default:disabled { |
|||
color: #ccc; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue