CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 03:50:37 +12:00
Code Issues Projects Releases Wiki Activity

merge

Browse source
This commit is contained in:
Martin McKeaveney 2020-07-07 21:32:32 +01:00
parent 3122334c35 944d871608
commit 7b57f0ecc1
36 changed files with 1089 additions and 561 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
View file

@ -103,10 +103,12 @@
class="budibase__input"
bind:value={$backendUiStore.draftModel.name} />
</div>
<!-- dont have this capability yet..
<div class="titled-input">
<header>Import Data</header>
<Button wide secondary>Import CSV</Button>
</div>
-->
{/if}
<footer>
<Button disabled={!edited} green={edited} wide on:click={saveModel}>

7
packages/builder/src/components/settings/Modal.svelte
View file

@ -1,5 +1,5 @@
<script>
import { General, Users, DangerZone } from "./tabs"
import { General, Users, DangerZone, APIKeys } from "./tabs"
import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@ -20,6 +20,11 @@
key: "USERS",
component: Users,
},
{
title: "API Keys",
key: "API_KEYS",
component: APIKeys,
},
{
title: "Danger Zone",
key: "DANGERZONE",

55
packages/builder/src/components/settings/tabs/APIKeys.svelte Normal file
View file

@ -0,0 +1,55 @@
<script>
import { Input, Button } from "@budibase/bbui"
import { store } from "builderStore"
import api from "builderStore/api"
import Title from "../TabTitle.svelte"
let keys = { budibase: "", sendGrid: "" }
async function updateKey([key, value]) {
const response = await api.put(`/api/keys/${key}`, { value })
const res = await response.json()
keys = { ...keys, ...res }
}
// Get Keys
async function fetchKeys() {
const response = await api.get(`/api/keys/`)
const res = await response.json()
keys = res
}
fetchKeys()
</script>
<Title>API Keys</Title>
<div class="container">
<div class="background">
<Input
on:save={e => updateKey(['budibase', e.detail])}
thin
edit
value={keys.budibase}
label="Budibase" />
</div>
<div class="background">
<Input
on:save={e => updateKey(['sendgrid', e.detail])}
thin
edit
value={keys.sendgrid}
label="Sendgrid" />
</div>
</div>
<style>
.container {
display: grid;
grid-gap: var(--space);
}
.background {
border-radius: 5px;
background-color: var(--light-grey);
padding: 12px 12px 18px 12px;
}
</style>

17
packages/builder/src/components/settings/tabs/DangerZone.svelte
View file

@ -1,14 +1,25 @@
<script>
import { params, goto } from "@sveltech/routify"
import { Input, TextArea, Button } from "@budibase/bbui"
import Title from "../TabTitle.svelte"
import { del } from "builderStore/api"
let value = ""
let loading = false
const deleteApp = () => {
async function deleteApp() {
loading = true
// Do stuff here to delete app!
// Navigate to start
const id = $params.application
const res = await del(`/api/${id}`)
const json = await res.json()
loading = false
if (res.ok) {
$goto("/")
return json
} else {
throw new Error(json)
}
}
</script>

1
packages/builder/src/components/settings/tabs/index.js
View file

@ -2,4 +2,5 @@ export { default as General } from "./General.svelte"
export { default as Integrations } from "./Integrations.svelte"
export { default as Permissions } from "./Permissions.svelte"
export { default as Users } from "./Users.svelte"
export { default as APIKeys } from "./APIKeys.svelte"
export { default as DangerZone } from "./DangerZone.svelte"

138
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -25,19 +25,13 @@
name: "Screen Placeholder",
route: "*",
props: {
_id: "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
padding: "0px",
"font-family": "Roboto",
"border-width": "0",
"border-style": "None",
"text-align": "center",
},
hover: {},
active: {},
selected: {},
"_id": "screenslot-placeholder",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {},
"hover": {},
"active": {},
"selected": {}
},
_code: "",
className: "",
@ -45,47 +39,87 @@
type: "div",
_children: [
{
_id: "335428f7-f9ca-4acd-9e76-71bc8ad27324",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
padding: "16px",
"border-style": "Dashed",
"border-width": "2px",
"border-color": "#8a8989fa",
},
hover: {},
active: {},
selected: {},
"_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"display": "flex",
"flex-direction": "column",
"align-items": "center"
},
_code: "",
className: "",
onLoad: [],
type: "div",
_instanceId: "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
_instanceName: "Container",
_children: [
{
_id: "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {
"font-family": "Roboto",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
text: "Your screens go here",
type: "h1",
_instanceId: "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
_instanceName: "Heading",
_children: [],
},
],
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
"_instanceName": "Container",
"_children": [
{
"_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {
"width": "500px",
"padding": "8px"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "Screenslot",
"type": "h1",
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
"_instanceName": "Heading",
"_children": []
},
{
"_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
"_component": "@budibase/standard-components/text",
"_styles": {
"normal": {
"max-width": "",
"text-align": "left",
"width": "500px",
"padding": "8px"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"text": "The screens that you create will be displayed inside this box.",
"type": "none",
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
"_instanceName": "Text"
},
{
"_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
"_component": "@budibase/standard-components/text",
"_styles": {
"normal": {
"max-width": "",
"text-align": "left",
"width": "500px",
"padding": "8px"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"text": "This box is just a placeholder, to show you the position of screens.",
"type": "none",
"_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
"_instanceName": "Text"
}
]
}
],
_instanceName: "Content Placeholder",
},

15
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -24,6 +24,21 @@ export default `<html>
text-transform: uppercase;
font-weight: bold;
}
.container-screenslot-placeholder {
padding: 20px;
text-align: center;
border-style: dashed !important;
border-width: 1px;
color: #806fde;
background: #e9e6ff44;
height: 100%;
}
.container-screenslot-placeholder span {
display: block;
margin-bottom: 10px;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>

2
packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
View file

@ -20,5 +20,7 @@
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
height: fit-content;
width: fit-content;
width: -moz-fit-content;
height: -moz-fit-content;
}
</style>

321
packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
View file

@ -1,266 +1,184 @@
<script>
import { onMount, createEventDispatcher } from "svelte"
import { fade } from "svelte/transition"
import Swatch from "./Swatch.svelte"
import CheckedBackground from "./CheckedBackground.svelte"
import { buildStyle } from "../helpers.js"
import { onMount, createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import Swatch from "./Swatch.svelte";
import CheckedBackground from "./CheckedBackground.svelte";
import { buildStyle } from "../helpers.js";
import {
getColorFormat,
convertToHSVA,
convertHsvaToFormat,
} from "../utils.js"
import Slider from "./Slider.svelte"
import Palette from "./Palette.svelte"
import ButtonGroup from "./ButtonGroup.svelte"
import Input from "./Input.svelte"
import Portal from "./Portal.svelte"
import { keyevents } from "../actions"
convertHsvaToFormat
} from "../utils.js";
import Slider from "./Slider.svelte";
import Palette from "./Palette.svelte";
import ButtonGroup from "./ButtonGroup.svelte";
import Input from "./Input.svelte";
import Portal from "./Portal.svelte";
import { keyevents } from "../actions";
export let value = "#3ec1d3ff"
export let open = false
export let swatches = []
export let value = "#3ec1d3ff";
export let open = false;
export let swatches = [];
export let disableSwatches = false
export let format = "hexa"
export let style = ""
export let pickerHeight = 0
export let pickerWidth = 0
export let disableSwatches = false;
export let format = "hexa";
export let style = "";
export let pickerHeight = 0;
export let pickerWidth = 0;
let colorPicker = null
let adder = null
let swatchesSetFromLocalStore = false
let colorPicker = null;
let adder = null;
let swatchesSetFromLocalStore = false;
let h = 0
let s = 0
let v = 0
let a = 0
let h = 0;
let s = 0;
let v = 0;
let a = 0;
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher();
onMount(() => {
if (!swatches.length > 0) {
//Don't use locally stored recent colors if swatches have been passed as props
swatchesSetFromLocalStore = true
swatches = getRecentColors() || []
swatchesSetFromLocalStore = true;
swatches = getRecentColors() || [];
}
if (swatches.length > 12) {
console.warn(
`Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
)
);
}
if (colorPicker) {
colorPicker.focus()
colorPicker.focus();
}
if (format) {
convertAndSetHSVA()
convertAndSetHSVA();
}
})
});
function getRecentColors() {
let colorStore = localStorage.getItem("cp:recent-colors")
let colorStore = localStorage.getItem("cp:recent-colors");
if (colorStore) {
return JSON.parse(colorStore)
return JSON.parse(colorStore);
}
}
function handleEscape() {
if (open) {
open = false
open = false;
}
}
function setRecentColors(color) {
const s = swatchesSetFromLocalStore
? swatches
: [...getRecentColors(), color]
localStorage.setItem("cp:recent-colors", JSON.stringify(s))
: [...getRecentColors(), color];
localStorage.setItem("cp:recent-colors", JSON.stringify(s));
}
function convertAndSetHSVA() {
let hsva = convertToHSVA(value, format)
setHSVA(hsva)
let hsva = convertToHSVA(value, format);
setHSVA(hsva);
}
function setHSVA([hue, sat, val, alpha]) {
h = hue
s = sat
v = val
a = alpha
h = hue;
s = sat;
v = val;
a = alpha;
}
//fired by choosing a color from the palette
function setSaturationAndValue({ detail }) {
s = detail.s
v = detail.v
value = convertHsvaToFormat([h, s, v, a], format)
dispatchValue()
s = detail.s;
v = detail.v;
value = convertHsvaToFormat([h, s, v, a], format);
dispatchValue();
}
function setHue({ color, isDrag }) {
h = color
value = convertHsvaToFormat([h, s, v, a], format)
h = color;
value = convertHsvaToFormat([h, s, v, a], format);
if (!isDrag) {
dispatchValue()
dispatchValue();
}
}
function setAlpha({ color, isDrag }) {
a = color === "1.00" ? "1" : color
value = convertHsvaToFormat([h, s, v, a], format)
a = color === "1.00" ? "1" : color;
value = convertHsvaToFormat([h, s, v, a], format);
if (!isDrag) {
dispatchValue()
dispatchValue();
}
}
function dispatchValue() {
dispatch("change", value)
dispatch("change", value);
}
function changeFormatAndConvert(f) {
format = f
value = convertHsvaToFormat([h, s, v, a], format)
format = f;
value = convertHsvaToFormat([h, s, v, a], format);
}
function handleColorInput(text) {
let format = getColorFormat(text)
let format = getColorFormat(text);
if (format) {
value = text
convertAndSetHSVA()
value = text;
convertAndSetHSVA();
}
}
function dispatchInputChange() {
if (format) {
dispatchValue()
dispatchValue();
}
}
function addSwatch() {
if (format) {
if (swatches.length === 12) {
swatches.splice(0, 1)
swatches.splice(0, 1);
}
if (!swatches.includes(value)) {
swatches = [...swatches, value]
setRecentColors(value)
swatches = [...swatches, value];
setRecentColors(value);
}
dispatch("addswatch", value)
dispatch("addswatch", value);
}
}
function removeSwatch(idx) {
let removedSwatch = swatches.splice(idx, 1)
swatches = swatches
dispatch("removeswatch", removedSwatch)
let [removedSwatch] = swatches.splice(idx, 1);
swatches = swatches;
dispatch("removeswatch", removedSwatch);
if (swatchesSetFromLocalStore) {
//as could be a swatch not present in local storage
setRecentColors()
setRecentColors();
}
}
function applySwatch(color) {
if (value !== color) {
format = getColorFormat(color)
format = getColorFormat(color);
if (format) {
value = color
convertAndSetHSVA()
dispatchValue()
value = color;
convertAndSetHSVA();
dispatchValue();
}
}
}
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
$: selectedColorStyle = buildStyle({ background: value, border })
$: hasSwatches = swatches.length > 0
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
$: selectedColorStyle = buildStyle({ background: value, border });
$: hasSwatches = swatches.length > 0;
</script>
<Portal>
<div
class="colorpicker-container"
use:keyevents={{ Escape: handleEscape }}
transition:fade
bind:this={colorPicker}
{style}
tabindex="0"
bind:clientHeight={pickerHeight}
bind:clientWidth={pickerWidth}>
<div class="palette-panel">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
</div>
<div class="control-panel">
<div class="alpha-hue-panel">
<div>
<CheckedBackground borderRadius="50%" backgroundSize="8px">
<div
class="selected-color"
title={value}
style={selectedColorStyle} />
</CheckedBackground>
</div>
<div>
<Slider
type="hue"
value={h}
on:change={hue => setHue(hue.detail)}
on:dragend={dispatchValue} />
<CheckedBackground borderRadius="10px" backgroundSize="7px">
<Slider
type="alpha"
value={a}
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
on:dragend={dispatchValue} />
</CheckedBackground>
</div>
</div>
{#if !disableSwatches}
<div transition:fade class="swatch-panel">
{#if hasSwatches}
{#each swatches as color, idx}
{#if idx < 12}
<Swatch
{color}
on:click={() => applySwatch(color)}
on:removeswatch={() => removeSwatch(idx)} />
{/if}
{/each}
{/if}
{#if swatches.length < 12}
<div
tabindex="0"
use:keyevents={{ Enter: addSwatch }}
bind:this={adder}
transition:fade
class="adder"
class:shrink={hasSwatches}
on:click={addSwatch}>
<span>&plus;</span>
</div>
{/if}
</div>
{/if}
<div class="format-input-panel">
<ButtonGroup {format} onclick={changeFormatAndConvert} />
<Input
{value}
on:input={event => handleColorInput(event.target.value)}
on:change={dispatchInputChange} />
</div>
</div>
</div>
</Portal>
<style>
.colorpicker-container {
position: absolute;
@ -346,3 +264,86 @@
padding-top: 3px;
}
</style>
<Portal>
<div
class="colorpicker-container"
use:keyevents={{ Escape: handleEscape }}
transition:fade
bind:this={colorPicker}
{style}
tabindex="0"
bind:clientHeight={pickerHeight}
bind:clientWidth={pickerWidth}>
<div class="palette-panel">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
</div>
<div class="control-panel">
<div class="alpha-hue-panel">
<div>
<CheckedBackground borderRadius="50%" backgroundSize="8px">
<div
class="selected-color"
title={value}
style={selectedColorStyle} />
</CheckedBackground>
</div>
<div>
<Slider
type="hue"
value={h}
on:change={hue => setHue(hue.detail)}
on:dragend={dispatchValue} />
<CheckedBackground borderRadius="10px" backgroundSize="7px">
<Slider
type="alpha"
value={a}
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
on:dragend={dispatchValue} />
</CheckedBackground>
</div>
</div>
{#if !disableSwatches}
<div transition:fade class="swatch-panel">
{#if hasSwatches}
{#each swatches as color, idx}
{#if idx < 12}
<Swatch
{color}
on:click={() => applySwatch(color)}
on:removeswatch={() => removeSwatch(idx)} />
{/if}
{/each}
{/if}
{#if swatches.length < 12}
<div
tabindex="0"
title="Add Swatch"
use:keyevents={{ Enter: addSwatch }}
bind:this={adder}
transition:fade
class="adder"
class:shrink={hasSwatches}
on:click={addSwatch}>
<span>&plus;</span>
</div>
{/if}
</div>
{/if}
<div class="format-input-panel">
<ButtonGroup {format} onclick={changeFormatAndConvert} />
<Input
{value}
on:input={event => handleColorInput(event.target.value)}
on:change={dispatchInputChange} />
</div>
</div>
</div>
</Portal>

196
packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
View file

@ -1,93 +1,139 @@
<script>
import Colorpicker from "./Colorpicker.svelte"
import CheckedBackground from "./CheckedBackground.svelte"
import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
import Colorpicker from "./Colorpicker.svelte";
import CheckedBackground from "./CheckedBackground.svelte";
import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
import { buildStyle, debounce } from "../helpers.js"
import { fade } from "svelte/transition"
import { getColorFormat } from "../utils.js"
import { buildStyle, debounce } from "../helpers.js";
import { fade } from "svelte/transition";
import { getColorFormat } from "../utils.js";
export let value = "#3ec1d3ff"
export let swatches = []
export let disableSwatches = false
export let open = false
export let width = "25px"
export let height = "25px"
export let value = "#3ec1d3ff";
export let swatches = [];
export let disableSwatches = false;
export let open = false;
export let width = "25px";
export let height = "25px";
let format = "hexa"
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
let positionSide = "top"
let colorPreview = null
let format = "hexa";
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
let positionY = "top";
let positionX = "left";
let colorPreview = null;
let previewHeight = null
let previewWidth = null
let pickerWidth = 0
let pickerHeight = 0
let previewHeight = null;
let previewWidth = null;
let pickerWidth = 0;
let pickerHeight = 0;
let errorMsg = null
let errorMsg = null;
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher();
beforeUpdate(() => {
format = getColorFormat(value)
format = getColorFormat(value);
if (!format) {
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
console.error(errorMsg)
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
console.error(errorMsg);
} else {
errorMsg = null
errorMsg = null;
}
})
});
function openColorpicker(event) {
if (colorPreview) {
open = true
open = true;
}
}
function onColorChange(color) {
value = color.detail
dispatch("change", color.detail)
value = color.detail;
dispatch("change", color.detail);
}
function calculateDimensions() {
const {
top: spaceAbove,
width,
bottom,
right,
left,
} = colorPreview.getBoundingClientRect()
if (open) {
const {
top: spaceAbove,
width,
bottom,
right,
left
} = colorPreview.getBoundingClientRect();
const spaceBelow = window.innerHeight - bottom
const previewCenter = previewWidth / 2
const spaceBelow = window.innerHeight - bottom;
const previewCenter = previewWidth / 2;
let y, x
let y, x;
if (spaceAbove > spaceBelow) {
positionSide = "bottom"
y = window.innerHeight - spaceAbove
} else {
positionSide = "top"
y = bottom
if (spaceAbove > spaceBelow) {
positionY = "bottom";
y = window.innerHeight - spaceAbove;
} else {
positionY = "top";
y = bottom;
}
// Centre picker by default
x = left + previewCenter - 220 / 2;
const spaceRight = window.innerWidth - right;
//Position picker left or right if space not available for centering
if (left < 110 && spaceRight > 220) {
positionX = "left";
x = right;
} else if (spaceRight < 100 && left > 220) {
positionX = "right";
x = document.body.clientWidth - left;
}
dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
}
x = left + previewCenter - 220 / 2
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
}
$: if (open && colorPreview) {
calculateDimensions()
calculateDimensions();
}
$: previewStyle = buildStyle({ width, height, background: value })
$: errorPreviewStyle = buildStyle({ width, height })
$: previewStyle = buildStyle({ width, height, background: value });
$: errorPreviewStyle = buildStyle({ width, height });
$: pickerStyle = buildStyle({
[positionSide]: `${dimensions[positionSide]}px`,
left: `${dimensions.left}px`,
})
[positionY]: `${dimensions[positionY]}px`,
[positionX]: `${dimensions[positionX]}px`
});
</script>
<style>
.color-preview-container {
display: flex;
flex-flow: row nowrap;
height: fit-content;
}
.color-preview {
cursor: pointer;
border-radius: 3px;
border: 1px solid #dedada;
}
.preview-error {
background: #cccccc;
color: #808080;
text-align: center;
font-size: 18px;
cursor: not-allowed;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
</style>
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
<div class="color-preview-container">
@ -127,41 +173,3 @@
</div>
{/if}
</div>
<style>
.color-preview-container {
display: flex;
flex-flow: row nowrap;
height: fit-content;
}
.color-preview {
cursor: pointer;
border-radius: 3px;
border: 1px solid #dedada;
}
.preview-error {
background: #cccccc;
color: #808080;
text-align: center;
font-size: 18px;
cursor: not-allowed;
}
/* .picker-container {
position: absolute;
z-index: 3;
width: fit-content;
height: fit-content;
} */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
</style>

81
packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
View file

@ -1,39 +1,15 @@
<script>
import { createEventDispatcher } from "svelte"
import { fade } from "svelte/transition"
import CheckedBackground from "./CheckedBackground.svelte"
import { keyevents } from "../actions"
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import CheckedBackground from "./CheckedBackground.svelte";
import { keyevents } from "../actions";
export let hovered = false
export let color = "#fff"
export let hovered = false;
export let color = "#fff";
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher();
</script>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
tabindex="0"
use:keyevents={{ Enter: () => dispatch('click') }}
in:fade
title={color}
class="swatch"
style={`background: ${color};`}
on:click|self
on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}>
{#if hovered}
<div
in:fade
class="remove-icon"
on:click|self={() => dispatch('removeswatch')}>
<span on:click|self={() => dispatch('removeswatch')}>&times;</span>
</div>
{/if}
</div>
</CheckedBackground>
</div>
<style>
.swatch {
position: relative;
@ -50,18 +26,43 @@
padding: 3px 5px;
}
.remove-icon {
span {
cursor: pointer;
position: absolute;
right: 0;
top: -5px;
right: -4px;
width: 10px;
height: 10px;
background: #800000;
color: white;
font-size: 12px;
border-radius: 50%;
background-color: #800000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 13px;
height: 13px;
}
span:after {
content: "\00d7";
position: relative;
left: 0;
bottom: 3px;
}
</style>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
tabindex="0"
use:keyevents={{ Enter: () => dispatch('click') }}
in:fade
title={color}
class="swatch"
style={`background: ${color};`}
on:mouseover={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}
on:click|self>
{#if hovered}
<span in:fade on:click={() => dispatch('removeswatch')} />
{/if}
</div>
</CheckedBackground>
</div>

30
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -303,6 +303,16 @@ export default {
key: "logo",
control: Input,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
},
@ -335,6 +345,16 @@ export default {
key: "model",
control: ModelSelect,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
template: {
@ -355,6 +375,16 @@ export default {
key: "model",
control: ModelSelect,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
},

4
packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
View file

@ -23,9 +23,7 @@
}
</script>
{#if selectedModel.schema && Object.keys(selectedModel.schema).length === 0}
<EmptyModel />
{:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
{#if $backendUiStore.selectedDatabase._id && selectedModel.name}
<ModelDataTable />
{:else}
<i style="color: var(--grey-4)">create your first table to start building</i>

12
packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
View file

@ -38,15 +38,21 @@
// Loop through each ID
ids.forEach(id => {
// Find ID and select it
componentToSelect = currentChildren.find(child => child._id === id)
// Find ID
const component = currentChildren.find(child => child._id === id)
// If it does not exist, ignore (use last valid route)
if (!component) return
componentToSelect = component
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
store.selectComponent(componentToSelect)
if (componentToSelect)
store.selectComponent(componentToSelect)
}
</script>

87
packages/cli/src/commands/init/initHandler.js
View file

@ -1,88 +1,7 @@
const inquirer = require("inquirer")
const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
const chalk = require("chalk")
const { serverFileName, xPlatHomeDir } = require("../../common")
const { join } = require("path")
const Sqrl = require("squirrelly")
const uuid = require("uuid")
const { xPlatHomeDir } = require("../../common")
const initialiseBudibase = require("@budibase/server/src/utilities/initialiseBudibase")
module.exports = opts => {
return run(opts)
}
const run = async opts => {
try {
await ensureAppDir(opts)
await setEnvironmentVariables(opts)
await createClientDatabase(opts)
await createDevEnvFile(opts)
console.log(chalk.green("Budibase successfully initialised."))
} catch (error) {
console.error(`Error initialising Budibase: ${error.message}`)
}
}
const setEnvironmentVariables = async opts => {
if (opts.couchDbUrl) {
process.env.COUCH_DB_URL = opts.couchDbUrl
} else {
const dataDir = join(opts.dir, ".data")
await ensureDir(dataDir)
process.env.COUCH_DB_URL =
dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
}
}
const ensureAppDir = async opts => {
opts.dir = xPlatHomeDir(opts.dir)
await ensureDir(opts.dir)
}
const createClientDatabase = async opts => {
// cannot be a top level require as it
// will cause environment module to be loaded prematurely
const clientDb = require("@budibase/server/src/db/clientDb")
if (opts.clientId === "new") {
// cannot be a top level require as it
// will cause environment module to be loaded prematurely
const CouchDB = require("@budibase/server/src/db/client")
const existing = await CouchDB.allDbs()
let i = 0
let isExisting = true
while (isExisting) {
i += 1
opts.clientId = i.toString()
isExisting = existing.includes(clientDb.name(opts.clientId))
}
}
await clientDb.create(opts.clientId)
}
const createDevEnvFile = async opts => {
const destConfigFile = join(opts.dir, "./.env")
let createConfig = !(await exists(destConfigFile)) || opts.quiet
if (!createConfig) {
const answers = await inquirer.prompt([
{
type: "input",
name: "overwrite",
message: ".env already exists - overwrite? (N/y)",
},
])
createConfig = ["Y", "y", "yes"].includes(answers.overwrite)
}
if (createConfig) {
const template = await readFile(serverFileName(".env.template"), {
encoding: "utf8",
})
opts.adminSecret = uuid.v4()
opts.cookieKey1 = uuid.v4()
opts.cookieKey2 = uuid.v4()
const config = Sqrl.Render(template, opts)
await writeFile(destConfigFile, config, { flag: "w+" })
}
return initialiseBudibase(opts)
}

46
packages/client/src/render/attachChildren.js
View file

@ -30,34 +30,33 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
}
}
const contextArray = Array.isArray(context) ? context : [context]
const childNodes = []
for (let childProps of treeNode.props._children) {
const { componentName, libName } = splitName(childProps._component)
if (!componentName || !libName) return
for (let context of contextArray) {
for (let childProps of treeNode.props._children) {
const { componentName, libName } = splitName(childProps._component)
const ComponentConstructor = componentLibraries[libName][componentName]
if (!componentName || !libName) return
const prepareNodes = ctx => {
const childNodesThisIteration = prepareRenderComponent({
props: childProps,
parentNode: treeNode,
ComponentConstructor,
htmlElement,
anchor,
context: ctx,
})
const ComponentConstructor = componentLibraries[libName][componentName]
for (let childNode of childNodesThisIteration) {
childNodes.push(childNode)
const prepareNodes = ctx => {
const childNodesThisIteration = prepareRenderComponent({
props: childProps,
parentNode: treeNode,
ComponentConstructor,
htmlElement,
anchor,
context: ctx,
})
for (let childNode of childNodesThisIteration) {
childNodes.push(childNode)
}
}
}
if (Array.isArray(context)) {
for (let singleCtx of context) {
prepareNodes(singleCtx)
}
} else {
prepareNodes(context)
}
}
@ -100,7 +99,10 @@ const areTreeNodesEqual = (children1, children2) => {
let isEqual = false
for (let i = 0; i < children1.length; i++) {
isEqual = deepEqual(children1[i].context, children2[i].context)
// same context and same children, then nothing has changed
isEqual =
deepEqual(children1[i].context, children2[i].context) &&
areTreeNodesEqual(children1[i].children, children2[i].children)
if (!isEqual) return false
if (isScreenSlot(children1[i].parentNode.props._component)) {
isEqual = deepEqual(children1[i].props, children2[i].props)

5
packages/client/src/render/prepareRenderComponent.js
View file

@ -78,13 +78,14 @@ export const createTreeNode = () => ({
get destroy() {
const node = this
return () => {
if (node.unsubscribe) node.unsubscribe()
if (node.component && node.component.$destroy) node.component.$destroy()
if (node.children) {
// destroy children first - from leaf nodes up
for (let child of node.children) {
child.destroy()
}
}
if (node.unsubscribe) node.unsubscribe()
if (node.component && node.component.$destroy) node.component.$destroy()
for (let onDestroyItem of node.onDestroy) {
onDestroyItem()
}

4
packages/client/src/render/screenRouter.js
View file

@ -1,5 +1,5 @@
import regexparam from "regexparam"
import { routerStore } from "../state/store"
import { appStore } from "../state/store"
import { parseAppIdFromCookie } from "./getAppId"
export const screenRouter = ({ screens, onScreenSelected, window }) => {
@ -49,7 +49,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
})
}
routerStore.update(state => {
appStore.update(state => {
state["##routeParams"] = params
return state
})

3
packages/client/src/state/bbComponentApi.js
View file

@ -8,6 +8,7 @@ export const bbFactory = ({
store,
componentLibraries,
onScreenSlotRendered,
getCurrentState,
}) => {
const apiCall = method => (url, body) => {
return fetch(url, {
@ -53,6 +54,8 @@ export const bbFactory = ({
store: store,
api,
parent,
// these parameters are populated by screenRouter
routeParams: () => getCurrentState()["##routeParams"],
}
}
}

8
packages/client/src/state/stateManager.js
View file

@ -26,8 +26,14 @@ export const createStateManager = ({
routeTo,
}) => {
let handlerTypes = eventHandlers(routeTo)
let currentState
// creating a reference to the current state
// this avoids doing store.get() ... which is expensive on
// hot paths, according to the svelte docs.
// the state object reference never changes (although it's internals do)
// so this should work fine for us
let currentState
appStore.subscribe(s => (currentState = s))
const getCurrentState = () => currentState
const bb = bbFactory({

2
packages/server/package.json
View file

@ -26,7 +26,7 @@
"test": "jest routes --runInBand",
"test:integration": "jest workflow --runInBand",
"test:watch": "jest --watch",
"initialise": "node ../cli/bin/budi init -b local -q",
"initialise": "node ../cli/bin/budi init -q",
"run:docker": "node src/index",
"budi": "node ../cli/bin/budi",
"dev:builder": "nodemon ../cli/bin/budi run",

52
packages/server/src/api/controllers/apikeys.js Normal file
View file

@ -0,0 +1,52 @@
const fs = require("fs")
const readline = require("readline")
const { budibaseAppsDir } = require("../../utilities/budibaseDir")
const ENV_FILE_PATH = "/.env"
exports.fetch = async function(ctx) {
ctx.status = 200
ctx.body = {
budibase: process.env.BUDIBASE_API_KEY,
sendgrid: process.env.SENDGRID_API_KEY,
}
}
exports.update = async function(ctx) {
const key = `${ctx.params.key.toUpperCase()}_API_KEY`
const value = ctx.request.body.value
// Set process.env
process.env[key] = value
// Write to file
await updateValues([key, value])
ctx.status = 200
ctx.message = `Updated ${ctx.params.key} API key succesfully.`
ctx.body = { [ctx.params.key]: ctx.request.body.value }
}
async function updateValues([key, value]) {
let newContent = ""
let keyExists = false
const readInterface = readline.createInterface({
input: fs.createReadStream(`${budibaseAppsDir()}/${ENV_FILE_PATH}`),
output: process.stdout,
console: false,
})
readInterface.on("line", function(line) {
// Mutate lines and change API Key
if (line.startsWith(key)) {
line = `${key}=${value}`
keyExists = true
}
newContent = `${newContent}\n${line}`
})
readInterface.on("close", function() {
// Write file here
if (!keyExists) {
// Add API Key if it doesn't exist in the file at all
newContent = `${newContent}\n${key}=${value}`
}
fs.writeFileSync(`${budibaseAppsDir()}/${ENV_FILE_PATH}`, newContent)
})
}

14
packages/server/src/api/controllers/application.js
View file

@ -10,6 +10,7 @@ const { budibaseAppsDir } = require("../../utilities/budibaseDir")
const { exec } = require("child_process")
const sqrl = require("squirrelly")
const setBuilderToken = require("../../utilities/builder/setBuilderToken")
const fs = require("fs-extra")
exports.fetch = async function(ctx) {
const db = new CouchDB(ClientDb.name(getClientId(ctx)))
@ -106,6 +107,19 @@ exports.update = async function(ctx) {
ctx.body = response
}
exports.delete = async function(ctx) {
const db = new CouchDB(ClientDb.name(getClientId(ctx)))
const app = await db.get(ctx.params.applicationId)
const result = await db.remove(app)
await fs.rmdir(`${budibaseAppsDir()}/${ctx.params.applicationId}`, {
recursive: true,
})
ctx.status = 200
ctx.message = `Application ${app.name} deleted successfully.`
ctx.body = result
}
const createEmptyAppPackage = async (ctx, app) => {
const templateFolder = resolve(
__dirname,

4
packages/server/src/api/index.js
View file

@ -18,6 +18,7 @@ const {
componentRoutes,
workflowRoutes,
accesslevelRoutes,
apiKeysRoutes,
} = require("./routes")
const router = new Router()
@ -102,6 +103,9 @@ router.use(clientRoutes.allowedMethods())
router.use(accesslevelRoutes.routes())
router.use(accesslevelRoutes.allowedMethods())
router.use(apiKeysRoutes.routes())
router.use(apiKeysRoutes.allowedMethods())
router.use(staticRoutes.routes())
router.use(staticRoutes.allowedMethods())

12
packages/server/src/api/routes/apikeys.js Normal file
View file

@ -0,0 +1,12 @@
const Router = require("@koa/router")
const controller = require("../controllers/apikeys")
const authorized = require("../../middleware/authorized")
const { BUILDER } = require("../../utilities/accessLevels")
const router = Router()
router
.get("/api/keys", authorized(BUILDER), controller.fetch)
.put("/api/keys/:key", authorized(BUILDER), controller.update)
module.exports = router

1
packages/server/src/api/routes/application.js
View file

@ -14,5 +14,6 @@ router
)
.put("/api/:applicationId", authorized(BUILDER), controller.update)
.post("/api/applications", authorized(BUILDER), controller.create)
.delete("/api/:applicationId", authorized(BUILDER), controller.delete)
module.exports = router

2
packages/server/src/api/routes/index.js
View file

@ -12,6 +12,7 @@ const componentRoutes = require("./component")
const workflowRoutes = require("./workflow")
const accesslevelRoutes = require("./accesslevel")
const deployRoutes = require("./deploy")
const apiKeysRoutes = require("./apikeys")
module.exports = {
deployRoutes,
@ -28,4 +29,5 @@ module.exports = {
componentRoutes,
workflowRoutes,
accesslevelRoutes,
apiKeysRoutes,
}

98
packages/server/src/electron.js
View file

@ -1,55 +1,73 @@
const { app, BrowserWindow, shell } = require("electron")
const { join } = require("path")
const { homedir } = require("os")
const isDev = require("electron-is-dev")
const { autoUpdater } = require("electron-updater")
const unhandled = require("electron-unhandled")
const { existsSync } = require("fs-extra")
const initialiseBudibase = require("./utilities/initialiseBudibase")
const { budibaseAppsDir } = require("./utilities/budibaseDir")
require("dotenv").config({ path: join(homedir(), ".budibase", ".env") })
const budibaseDir = budibaseAppsDir()
const envFile = join(budibaseDir, ".env")
if (isDev) {
unhandled({
showDialog: true,
if (!existsSync(envFile)) {
// assume not initialised
initialiseBudibase({ dir: budibaseDir }).then(() => {
startApp()
})
} else {
startApp()
}
const APP_URL = "http://localhost:4001/_builder"
const APP_TITLE = "Budibase Builder"
function startApp() {
// evict environment from cache, so it reloads when next asked
delete require.cache[require.resolve("./environment")]
require("dotenv").config({ path: envFile })
let win
function handleRedirect(e, url) {
e.preventDefault()
shell.openExternal(url)
}
async function createWindow() {
app.server = await require("./app")()
win = new BrowserWindow({ width: 1920, height: 1080 })
win.setTitle(APP_TITLE)
win.loadURL(APP_URL)
if (isDev) {
win.webContents.openDevTools()
} else {
autoUpdater.checkForUpdatesAndNotify()
unhandled({
showDialog: true,
})
}
// open _blank in default browser
win.webContents.on("new-window", handleRedirect)
win.webContents.on("will-navigate", handleRedirect)
const APP_URL = "http://localhost:4001/_builder"
const APP_TITLE = "Budibase Builder"
let win
function handleRedirect(e, url) {
e.preventDefault()
shell.openExternal(url)
}
async function createWindow() {
app.server = await require("./app")()
win = new BrowserWindow({ width: 1920, height: 1080 })
win.setTitle(APP_TITLE)
win.loadURL(APP_URL)
if (isDev) {
win.webContents.openDevTools()
} else {
autoUpdater.checkForUpdatesAndNotify()
}
// open _blank in default browser
win.webContents.on("new-window", handleRedirect)
win.webContents.on("will-navigate", handleRedirect)
}
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on("window-all-closed", () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") app.quit()
})
app.on("activate", () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) createWindow()
})
}
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on("window-all-closed", () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") app.quit()
})
app.on("activate", () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) createWindow()
})

75
packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
View file

@ -5,13 +5,58 @@
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
"props" : {
"_id": "private-master-root",
"_component": "@budibase/standard-components/container",
"_children": [
"_component": "@budibase/standard-components/container",
"_children": [
{
"_id": "c32dd256-a61c-4c41-876e-95e91c5e3a43",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"background": "#e8e8ef",
"padding": "8px",
"color": "#393C44",
"display": "N/A",
"flex-direction": "column"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
"_instanceName": "Container",
"_children": [
{
"_id": "fbd9520f-6b34-4e3e-828d-0197144568a1",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "{{ name }}",
"type": "h1",
"_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
"_instanceName": "Heading",
"_children": []
}
]
},
{
"_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
"_component": "##builtin/screenslot",
"_styles": {
"normal": {},
"normal": {
"padding": "8px",
"align-items": "flex-start",
"height": "100vh"
},
"hover": {},
"active": {},
"selected": {}
@ -20,14 +65,22 @@
"_children": []
}
],
"type": "div",
"_styles": {
"active": {},
"hover": {},
"normal": {},
"selected": {}
},
"_code": ""
"type": "div",
"_styles": {
"active": {},
"hover": {},
"normal": {
"display": "flex",
"flex-direction": "column",
"align-items": "stretch",
"justify-content": "flex-start",
"height": "100vh"
},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": []
},
"_css": "",
"uiFunctions": ""

3
packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
View file

@ -28,7 +28,8 @@
"_instanceName": "Login",
"inputClass": "",
"_children": [],
"name": "{{ name }}",
"title": "Login to {{ name }}",
"buttonText": "Login",
"logo": ""
}
],

66
packages/server/src/utilities/initialiseBudibase.js Normal file
View file

@ -0,0 +1,66 @@
const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
const { join, resolve } = require("path")
const Sqrl = require("squirrelly")
const uuid = require("uuid")
module.exports = async opts => {
await ensureDir(opts.dir)
await setCouchDbUrl(opts)
// need an env file to create the client database
await createDevEnvFile(opts)
await createClientDatabase(opts)
// need to recreate the env file, as we only now have a client id
// quiet flag will force overwrite of config
opts.quiet = true
await createDevEnvFile(opts)
}
const setCouchDbUrl = async opts => {
if (!opts.couchDbUrl) {
const dataDir = join(opts.dir, ".data")
await ensureDir(dataDir)
opts.couchDbUrl =
dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
}
}
const createDevEnvFile = async opts => {
const destConfigFile = join(opts.dir, "./.env")
let createConfig = !(await exists(destConfigFile)) || opts.quiet
if (createConfig) {
const template = await readFile(
resolve(__dirname, "..", "..", ".env.template"),
{
encoding: "utf8",
}
)
opts.cookieKey1 = opts.cookieKey1 || uuid.v4()
const config = Sqrl.Render(template, opts)
await writeFile(destConfigFile, config, { flag: "w+" })
}
}
const createClientDatabase = async opts => {
// cannot be a top level require as it
// will cause environment module to be loaded prematurely
const clientDb = require("../db/clientDb")
if (!opts.clientId || opts.clientId === "new") {
// cannot be a top level require as it
// will cause environment module to be loaded prematurely
const CouchDB = require("../db/client")
const existing = await CouchDB.allDbs()
let i = 0
let isExisting = true
while (isExisting) {
i += 1
opts.clientId = i.toString()
isExisting = existing.includes(clientDb.name(opts.clientId))
}
}
await clientDb.create(opts.clientId)
}

13
packages/standard-components/components.json
View file

@ -66,7 +66,7 @@
"props": {
"logo": "asset",
"loginRedirect": "string",
"name": "string",
"title": "string",
"usernameLabel": {
"type": "string",
"default": "Username"
@ -80,7 +80,8 @@
"default": "Login"
},
"buttonClass": "string",
"inputClass": "string"
"inputClass": "string",
"buttonText": "string"
},
"tags": [
"login",
@ -206,14 +207,18 @@
"description": "an HTML table that fetches data from a table or view and displays it.",
"data": true,
"props": {
"model": "models"
"model": "models",
"title": "string",
"buttonText": "string"
}
},
"dataformwide": {
"description": "an HTML table that fetches data from a table or view and displays it.",
"data": true,
"props": {
"model": "models"
"model": "models",
"title": "string",
"buttonText": "string"
}
},
"datalist": {

121
packages/standard-components/src/DataForm.svelte
View file

@ -1,8 +1,11 @@
<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
export let _bb
export let model
export let title
export let buttonText
const TYPE_MAP = {
string: "text",
@ -10,14 +13,16 @@
number: "number",
}
let username
let password
let newModel = {
modelId: model,
}
let record
let store = _bb.store
let schema = {}
let modelDef = {}
let saved = false
let saving = false
let recordId
let isNew = true
let inputElements = {}
$: if (model && model.length !== 0) {
fetchModel()
@ -25,6 +30,8 @@
$: fields = Object.keys(schema)
$: Object.values(inputElements).length && setForm(record)
async function fetchModel() {
const FETCH_MODEL_URL = `/api/models/${model}`
const response = await _bb.api.get(FETCH_MODEL_URL)
@ -33,14 +40,61 @@
}
async function save() {
// prevent double clicking firing multiple requests
if (saving) return
saving = true
const SAVE_RECORD_URL = `/api/${model}/records`
const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
const response = await _bb.api.post(SAVE_RECORD_URL, record)
const json = await response.json()
store.update(state => {
state[model] = state[model] ? [...state[model], json] : [json]
return state
})
if (response.status === 200) {
store.update(state => {
state[model] = state[model] ? [...state[model], json] : [json]
return state
})
// wipe form, if new record, otherwise update
// model to get new _rev
if (isNew) {
resetForm()
} else {
record = json
}
// set saved, and unset after 1 second
// i.e. make the success notifier appear, then disappear again after time
saved = true
setTimeout(() => {
saved = false
}, 1000)
}
saving = false
}
// we cannot use svelte bind on these inputs, as it does not allow
// bind, when the input type is dynamic
const resetForm = () => {
for (let el of Object.values(inputElements)) {
el.value = ""
if (el.checked) {
el.checked = false
}
}
record = {
modelId: model
}
}
const setForm = rec => {
if (isNew || !rec) return
for (let fieldName in inputElements) {
if (typeof rec[fieldName] === "boolean") {
inputElements[fieldName].checked = rec[fieldName]
} else {
inputElements[fieldName].value = rec[fieldName]
}
}
}
const handleInput = field => event => {
@ -48,36 +102,57 @@
if (event.target.type === "checkbox") {
value = event.target.checked
newModel[field] = value
record[field] = value
return
}
if (event.target.type === "number") {
value = parseInt(event.target.value)
newModel[field] = value
record[field] = value
return
}
value = event.target.value
newModel[field] = value
record[field] = value
}
onMount(() => {
const routeParams = _bb.routeParams()
recordId = Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
isNew = !recordId || recordId === "new"
if (isNew) {
record = { modelId: model }
} else {
const GET_RECORD_URL = `/api/${model}/records/${recordId}`
_bb.api.get(GET_RECORD_URL)
.then(response => response.json())
.then(rec => {
record = rec
setForm(rec)
})
}
});
</script>
<form class="form" on:submit|preventDefault>
<h1>{modelDef.name} Form</h1>
{#if title}
<h1>{title}</h1>
{/if}
<hr />
<div class="form-content">
{#each fields as field}
<div class="form-item">
<label class="form-label" for="form-stacked-text">{field}</label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select on:blur={handleInput(field)}>
<select on:blur={handleInput(field)} bind:this={inputElements[field]}>
{#each schema[field].constraints.inclusion as opt}
<option>{opt}</option>
{/each}
</select>
{:else}
<input
bind:this={inputElements[field]}
class="input"
type={TYPE_MAP[schema[field].type]}
on:change={handleInput(field)} />
@ -86,7 +161,17 @@
<hr />
{/each}
<div class="button-block">
<button on:click={save}>Submit Form</button>
<button on:click={save} class:saved>
{#if saved}
<div in:fade>
<span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
</div>
{:else}
<div>
{buttonText || "Submit Form"}
</div>
{/if}
</button>
</div>
</div>
</form>
@ -156,6 +241,10 @@
text-align: center;
}
button.saved {
background-color: green;
}
button:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);

131
packages/standard-components/src/DataFormWide.svelte
View file

@ -1,7 +1,11 @@
<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
export let _bb
export let model
export let title
export let buttonText
const TYPE_MAP = {
string: "text",
@ -9,65 +13,146 @@
number: "number",
}
let username
let password
let newModel = {
modelId: model,
}
let record
let store = _bb.store
let schema = {}
let modelDef = {}
let saved = false
let saving = false
let recordId
let isNew = true
let inputElements = {}
$: if (model && model.length !== 0) {
fetchModel()
}
$: fields = Object.keys(schema)
$: Object.values(inputElements).length && setForm(record)
async function fetchModel() {
const FETCH_MODEL_URL = `/api/models/${model}`
const response = await _bb.api.get(FETCH_MODEL_URL)
modelDef = await response.json()
schema = modelDef.schema
}
async function save() {
// prevent double clicking firing multiple requests
if (saving) return
saving = true
const SAVE_RECORD_URL = `/api/${model}/records`
const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
const response = await _bb.api.post(SAVE_RECORD_URL, record)
const json = await response.json()
store.update(state => {
state[model] = state[model] ? [...state[model], json] : [json]
return state
})
if (response.status === 200) {
store.update(state => {
state[model] = state[model] ? [...state[model], json] : [json]
return state
})
// wipe form, if new record, otherwise update
// model to get new _rev
if (isNew) {
resetForm()
} else {
record = json
}
// set saved, and unset after 1 second
// i.e. make the success notifier appear, then disappear again after time
saved = true
setTimeout(() => {
saved = false
}, 1000)
}
saving = false
}
// we cannot use svelte bind on these inputs, as it does not allow
// bind, when the input type is dynamic
const resetForm = () => {
for (let el of Object.values(inputElements)) {
el.value = ""
if (el.checked) {
el.checked = false
}
}
record = {
modelId: model
}
}
const setForm = rec => {
if (isNew || !rec) return
for (let fieldName in inputElements) {
if (typeof rec[fieldName] === "boolean") {
inputElements[fieldName].checked = rec[fieldName]
} else {
inputElements[fieldName].value = rec[fieldName]
}
}
}
const handleInput = field => event => {
let value
if (event.target.type === "checkbox") {
value = event.target.checked
newModel[field] = value
record[field] = value
return
}
if (event.target.type === "number") {
value = parseInt(event.target.value)
newModel[field] = value
record[field] = value
return
}
value = event.target.value
newModel[field] = value
record[field] = value
}
onMount(() => {
const routeParams = _bb.routeParams()
recordId = Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
isNew = !recordId || recordId === "new"
if (isNew) {
record = { modelId: model }
} else {
const GET_RECORD_URL = `/api/${model}/records/${recordId}`
_bb.api.get(GET_RECORD_URL)
.then(response => response.json())
.then(rec => {
record = rec
setForm(rec)
})
}
});
</script>
<form class="form" on:submit|preventDefault>
<h1>{modelDef.name} Form</h1>
{#if title}
<h1>{title}</h1>
{/if}
<hr />
<div class="form-content">
{#each fields as field}
<div class="form-item">
<label class="form-label" for="form-stacked-text">{field}</label>
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
<select on:blur={handleInput(field)}>
<select on:blur={handleInput(field)} bind:this={inputElements[field]}>
{#each schema[field].constraints.inclusion as opt}
<option>{opt}</option>
{/each}
</select>
{:else}
<input
bind:this={inputElements[field]}
class="input"
type={TYPE_MAP[schema[field].type]}
on:change={handleInput(field)} />
@ -76,7 +161,17 @@
<hr />
{/each}
<div class="button-block">
<button on:click={save}>Submit Form</button>
<button on:click={save} class:saved>
{#if saved}
<div in:fade>
<span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
</div>
{:else}
<div>
{buttonText || "Submit Form"}
</div>
{/if}
</button>
</div>
</div>
</form>
@ -137,6 +232,10 @@
text-align: center;
}
button.saved {
background-color: green;
}
button:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);

12
packages/standard-components/src/DataTable.svelte
View file

@ -8,6 +8,16 @@
let headers = []
let store = _bb.store
const shouldDisplayField = name => {
if (name.startsWith("_")) return false
// always 'record'
if (name === "type") return false
// tables are always tied to a single modelId, this is irrelevant
if (name === "modelId") return false
return true
}
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
@ -20,7 +30,7 @@
return state
})
headers = Object.keys(json[0]).filter(key => !key.startsWith("_"))
headers = Object.keys(json[0]).filter(shouldDisplayField)
} else {
throw new Error("Failed to fetch records.", response)
}

10
packages/standard-components/src/Login.svelte
View file

@ -1,9 +1,9 @@
<script>
import Button from "./Button.svelte"
export let loginButtonLabel = "Login"
export let buttonText = "Login"
export let logo = ""
export let name = ""
export let title = ""
export let buttonClass = ""
export let inputClass = ""
@ -47,7 +47,9 @@
</div>
{/if}
<h1 class="header-content">Log in to {name}</h1>
{#if title}
<h1 class="header-content">{title}</h1>
{/if}
<div class="form-root">
<div class="control">
@ -69,7 +71,7 @@
<div class="login-button-container">
<button disabled={loading} on:click={login} class={_buttonClass}>
Log in to {name}
{buttonText || "Login"}
</button>
</div>