Merge branch 'master' into bugfixes
This commit is contained in:
Michael Shanks
commit
817abccfd4
|
|
@ -37,7 +37,7 @@
|
|||
<div class="heading">
|
||||
{#if !showFieldView}
|
||||
<i class="ri-list-settings-line button--toggled" />
|
||||
<h3 class="budibase__title--3">Create / Edit Model</h3>
|
||||
<h3 class="budibase__title--3">Create / Edit Table</h3>
|
||||
{:else}
|
||||
<i class="ri-file-list-line button--toggled" />
|
||||
<h3 class="budibase__title--3">Create / Edit Field</h3>
|
||||
|
|
|
|||
|
|
@ -19,19 +19,19 @@
|
|||
...rest,
|
||||
},
|
||||
})
|
||||
notifier.success(`${model.name} model created.`)
|
||||
notifier.success(`${model.name} table created.`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<section transition:fade>
|
||||
<header>
|
||||
<h2>Create New Model</h2>
|
||||
<p>Before you can view your model, you need to set it up.</p>
|
||||
<h2>Create New Table</h2>
|
||||
<p>Before you can view your table, you need to set it up.</p>
|
||||
</header>
|
||||
|
||||
<div class="block-row">
|
||||
<span class="block-row-title">Fields</span>
|
||||
<p>Blocks are pre-made fields and help you build your model quicker.</p>
|
||||
<p>Blocks are pre-made fields and help you build your table quicker.</p>
|
||||
<div class="blocks">
|
||||
{#each Object.values(FIELDS) as field}
|
||||
<Block
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<div class="block-row">
|
||||
<span class="block-row-title">Blocks</span>
|
||||
<p>Blocks are pre-made fields and help you build your model quicker.</p>
|
||||
<p>Blocks are pre-made fields and help you build your table quicker.</p>
|
||||
<div class="blocks">
|
||||
{#each Object.values(BLOCKS) as field}
|
||||
<Block
|
||||
|
|
@ -58,8 +58,8 @@
|
|||
</div>
|
||||
|
||||
<div class="block-row">
|
||||
<span class="block-row-title">Models</span>
|
||||
<p>Blocks are pre-made fields and help you build your model quicker.</p>
|
||||
<span class="block-row-title">Tables</span>
|
||||
<p>Blocks are pre-made fields and help you build your table quicker.</p>
|
||||
<div class="blocks">
|
||||
{#each Object.values(MODELS) as model}
|
||||
<Block
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
|
||||
{#if selectedTab === 'NAVIGATE'}
|
||||
<Button purple wide on:click={setupForNewModel}>
|
||||
Create New Model
|
||||
Create New Table
|
||||
</Button>
|
||||
<div class="hierarchy-items-container">
|
||||
{#each $backendUiStore.models as model}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,35 @@
|
|||
})
|
||||
}
|
||||
|
||||
function validate() {
|
||||
let errors = []
|
||||
for (let field of Object.values($backendUiStore.draftModel.schema)) {
|
||||
const restrictedFieldNames = ["type", "modelId"]
|
||||
if (field.name.startsWith("_")) {
|
||||
errors.push(`field '${field.name}' - name cannot begin with '_''`)
|
||||
} else if (restrictedFieldNames.includes(field.name)) {
|
||||
errors.push(`field '${field.name}' - is a restricted name, please rename`)
|
||||
} else if (!field.name || !field.name.trim()) {
|
||||
errors.push("field name cannot be blank")
|
||||
}
|
||||
}
|
||||
|
||||
if (!$backendUiStore.draftModel.name) {
|
||||
errors.push("Table name cannot be blank")
|
||||
}
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
async function saveModel() {
|
||||
const errors = validate()
|
||||
if (errors.length > 0) {
|
||||
notifier.danger(
|
||||
errors.join("/n")
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
await backendUiStore.actions.models.save({
|
||||
model: $backendUiStore.draftModel,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import {buildStyle} from "../helpers.js"
|
||||
import { buildStyle } from "../helpers.js"
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
export let backgroundSize = "10px"
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,267 +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>+</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;
|
||||
|
|
@ -347,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>+</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>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,141 @@
|
|||
<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;
|
||||
position: absolute;
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.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 +175,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>
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ export default {
|
|||
icon: "ri-archive-drawer-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
|
|
@ -331,7 +331,7 @@ export default {
|
|||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Model",
|
||||
label: "Table",
|
||||
key: "model",
|
||||
control: ModelSelect,
|
||||
},
|
||||
|
|
@ -351,7 +351,7 @@ export default {
|
|||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Model",
|
||||
label: "Table",
|
||||
key: "model",
|
||||
control: ModelSelect,
|
||||
},
|
||||
|
|
@ -368,7 +368,7 @@ export default {
|
|||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Model", key: "model", control: ModelSelect },
|
||||
{ label: "Table", key: "model", control: ModelSelect },
|
||||
{
|
||||
label: "Chart Type",
|
||||
key: "type",
|
||||
|
|
@ -399,18 +399,18 @@ export default {
|
|||
icon: "ri-file-list-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "List",
|
||||
_component: "@budibase/standard-components/list",
|
||||
description: "Renders all children once per record, of a given model",
|
||||
description: "Renders all children once per record, of a given table",
|
||||
icon: "ri-file-list-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
|
|
@ -422,7 +422,7 @@ export default {
|
|||
icon: "ri-profile-line",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
{:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
|
||||
<ModelDataTable />
|
||||
{:else}
|
||||
<i style="color: var(--grey-4)">create your first model to start building</i>
|
||||
<i style="color: var(--grey-4)">create your first table to start building</i>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -22,5 +22,5 @@
|
|||
</script>
|
||||
|
||||
{#if $backendUiStore.models.length === 0}
|
||||
Please create a model
|
||||
{:else}Please select a model{/if}
|
||||
Please create a table
|
||||
{:else}Please select a table{/if}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -196,21 +196,21 @@
|
|||
}
|
||||
},
|
||||
"datatable": {
|
||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"model": "models"
|
||||
}
|
||||
},
|
||||
"dataform": {
|
||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"model": "models"
|
||||
}
|
||||
},
|
||||
"dataformwide": {
|
||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"model": "models"
|
||||
|
|
|
|||
Loading…
Reference in New Issue