MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

lint:fix & forman

This commit is contained in:
Michael Shanks 2020-06-01 12:15:44 +01:00
parent 38b471d1bf
commit dd6e4a3d97
8 changed files with 255 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/builderStore/storeUtils.js
View File

@ -56,4 +56,4 @@ export const walkProps = (props, action, cancelToken = null) => {
walkProps(child, action, cancelToken) walkProps(child, action, cancelToken)
} }
} }
} }

16
packages/builder/src/components/common/Icons/More.svelte
View File

@ -1,8 +1,12 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24" width="24"
height="24"> height="24">
<path fill="none" d="M0 0h24v24H0z"/> <path fill="none" d="M0 0h24v24H0z" />
<path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/> <path
d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 405 B

After

Width:  |  Height:  |  Size: 419 B

50
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
View File

@ -13,16 +13,20 @@
const FIELD_TYPES = ["string", "number", "boolean"] const FIELD_TYPES = ["string", "number", "boolean"]
export let field = { type: "string", constraints: { type: "string", presence: false } } export let field = {
type: "string",
constraints: { type: "string", presence: false },
}
export let schema export let schema
export let goBack export let goBack
let errors = [] let errors = []
let draftField = cloneDeep(field) let draftField = cloneDeep(field)
let type = field.type let type = field.type
let constraints = field.constraints let constraints = field.constraints
let required = field.constraints.presence && !field.constraints.presence.allowEmpty let required =
field.constraints.presence && !field.constraints.presence.allowEmpty
const save = () => { const save = () => {
constraints.presence = required ? { allowEmpty: false } : false constraints.presence = required ? { allowEmpty: false } : false
@ -31,15 +35,19 @@
schema[field.name] = draftField schema[field.name] = draftField
goBack() goBack()
} }
$: constraints = $: constraints =
type === "string" ? { type: "string", length: {}, presence: false } type === "string"
: type === "number" ? { type: "number", presence: false, numericality: {} } ? { type: "string", length: {}, presence: false }
: type === "boolean" ? { type: "boolean", presence: false } : type === "number"
: type === "datetime" ? { type: "date", datetime: {}, presence: false } ? { type: "number", presence: false, numericality: {} }
: type.startsWith('array') ? { type: "array", presence: false } : type === "boolean"
? { type: "boolean", presence: false }
: type === "datetime"
? { type: "date", datetime: {}, presence: false }
: type.startsWith("array")
? { type: "array", presence: false }
: { type: "string", presence: false } : { type: "string", presence: false }
</script> </script>
<div class="root"> <div class="root">
@ -48,24 +56,26 @@
<form on:submit|preventDefault class="uk-form-stacked"> <form on:submit|preventDefault class="uk-form-stacked">
<Textbox label="Name" bind:text={field.name} /> <Textbox label="Name" bind:text={field.name} />
<Dropdown <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
label="Type"
bind:selected={type}
options={FIELD_TYPES} />
<Checkbox label="Required" bind:checked={required} /> <Checkbox label="Required" bind:checked={required} />
{#if type === 'string'} {#if type === 'string'}
<NumberBox label="Max Length" bind:value={constraints.length.maximum} /> <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
<ValuesList label="Categories" bind:values={constraints.inclusion} /> <ValuesList label="Categories" bind:values={constraints.inclusion} />
{:else if type === 'datetime'} {:else if type === 'datetime'}
<!-- TODO: revisit and fix with JSON schema --> <!-- TODO: revisit and fix with JSON schema -->
<DatePicker label="Min Value" bind:value={constraints.datetime.earliest} /> <DatePicker
label="Min Value"
bind:value={constraints.datetime.earliest} />
<DatePicker label="Max Value" bind:value={constraints.datetime.latest} /> <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
{:else if type === 'number'} {:else if type === 'number'}
<NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} /> <NumberBox
<NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} /> label="Min Value"
bind:value={constraints.numericality.greaterThanOrEqualTo} />
<NumberBox
label="Max Value"
bind:value={constraints.numericality.lessThanOrEqualTo} />
{/if} {/if}
</form> </form>
</div> </div>

20
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -23,22 +23,22 @@
function closed() { function closed() {
onClosed() onClosed()
} }
const isSelect = meta => const isSelect = meta =>
meta.type === "string" meta.type === "string" &&
&& meta.constraints meta.constraints &&
&& meta.constraints.inclusion meta.constraints.inclusion &&
&& meta.constraints.inclusion.length > 0 meta.constraints.inclusion.length > 0
function determineInputType(meta) { function determineInputType(meta) {
if (meta.type === "datetime") return "date" if (meta.type === "datetime") return "date"
if (meta.type === "number") return "number" if (meta.type === "number") return "number"
if (meta.type === "boolean") return "checkbox" if (meta.type === "boolean") return "checkbox"
if (isSelect(meta)) return "select" if (isSelect(meta)) return "select"
return "text" return "text"
} }
function determineOptions(meta) { function determineOptions(meta) {
return isSelect(meta) ? meta.constraints.inclusion : [] return isSelect(meta) ? meta.constraints.inclusion : []
} }
@ -54,8 +54,8 @@
) )
if (recordResponse.errors) { if (recordResponse.errors) {
errors = Object.keys(recordResponse.errors) errors = Object.keys(recordResponse.errors)
.map(k => ({dataPath: k, message: recordResponse.errors[k]})) .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
.flat() .flat()
return return
} }

40
packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
View File

@ -4,15 +4,15 @@
export let label export let label
export let errors = [] export let errors = []
export let options = [] export let options = []
let checked = type === "checkbox" ? value : false let checked = type === "checkbox" ? value : false
const determineClassName = type => { const determineClassName = type => {
if (type === "checkbox") return "uk-checkbox" if (type === "checkbox") return "uk-checkbox"
if (type === "select") return "uk-select" if (type === "select") return "uk-select"
return "uk-input" return "uk-input"
} }
const handleInput = event => { const handleInput = event => {
if (event.target.type === "checkbox") { if (event.target.type === "checkbox") {
value = event.target.checked value = event.target.checked
@ -30,22 +30,22 @@
<label>{label}</label> <label>{label}</label>
{#if type === "select"} {#if type === 'select'}
<select <select
class={determineClassName(type)} class={determineClassName(type)}
bind:value={value} bind:value
class:uk-form-danger={errors.length > 0} > class:uk-form-danger={errors.length > 0}>
{#each options as opt} {#each options as opt}
<option value={opt}>{ opt }</option> <option value={opt}>{opt}</option>
{/each} {/each}
</select> </select>
{:else} {:else}
<input <input
class={determineClassName(type)} class={determineClassName(type)}
class:uk-form-danger={errors.length > 0} class:uk-form-danger={errors.length > 0}
{checked} {checked}
{type} {type}
{value} {value}
on:input={handleInput} on:input={handleInput}
on:change={handleInput} /> on:change={handleInput} />
{/if} {/if}

352
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -1,149 +1,160 @@
<script> <script>
import { MoreIcon } from "components/common/Icons" import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore" import { store } from "builderStore"
import { getComponentDefinition } from "builderStore/store" import { getComponentDefinition } from "builderStore/store"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last, cloneDeep } from "lodash/fp" import { last, cloneDeep } from "lodash/fp"
import UIkit from "uikit" import UIkit from "uikit"
import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils" import {
import { uuid } from "builderStore/uuid" selectComponent,
getParent,
walkProps,
saveCurrentPreviewItem,
} from "builderStore/storeUtils"
import { uuid } from "builderStore/uuid"
export let component export let component
let confirmDeleteDialog let confirmDeleteDialog
let dropdownEl let dropdownEl
$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false }); $: dropdown = UIkit.dropdown(dropdownEl, {
$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false) mode: "click",
$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false offset: 0,
$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id pos: "bottom-right",
"delay-hide": 0,
const lastPartOfName = c => (c ? last(c._component.split("/")) : "") animation: false,
const hideDropdown = () => {
dropdown.hide()
}
const moveUpComponent = () => {
store.update(s => {
const parent = getParent(s.currentPreviewItem.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
if (currentIndex === 0) return s
const newChildren = parent._children.filter(c => c !== component)
newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren
}
s.currentComponentInfo = component
saveCurrentPreviewItem(s)
return s
}) })
} $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
$: noChildrenAllowed =
!component ||
getComponentDefinition($store, component._component).children === false
$: noPaste =
!$store.componentToPaste || $store.componentToPaste._id === component._id
const moveDownComponent = () => { const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
store.update(s => {
const parent = getParent(s.currentPreviewItem.props, component)
if (parent) { const hideDropdown = () => {
const currentIndex = parent._children.indexOf(component) dropdown.hide()
if (currentIndex === parent._children.length - 1) return s }
const newChildren = parent._children.filter(c => c !== component) const moveUpComponent = () => {
newChildren.splice(currentIndex + 1, 0, component) store.update(s => {
parent._children = newChildren const parent = getParent(s.currentPreviewItem.props, component)
}
s.currentComponentInfo = component
saveCurrentPreviewItem(s)
return s if (parent) {
}) const currentIndex = parent._children.indexOf(component)
} if (currentIndex === 0) return s
const copyComponent = () => { const newChildren = parent._children.filter(c => c !== component)
store.update(s => { newChildren.splice(currentIndex - 1, 0, component)
const parent = getParent(s.currentPreviewItem.props, component) parent._children = newChildren
const copiedComponent = cloneDeep(component) }
walkProps(copiedComponent, p => { s.currentComponentInfo = component
saveCurrentPreviewItem(s)
return s
})
}
const moveDownComponent = () => {
store.update(s => {
const parent = getParent(s.currentPreviewItem.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
if (currentIndex === parent._children.length - 1) return s
const newChildren = parent._children.filter(c => c !== component)
newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren
}
s.currentComponentInfo = component
saveCurrentPreviewItem(s)
return s
})
}
const copyComponent = () => {
store.update(s => {
const parent = getParent(s.currentPreviewItem.props, component)
const copiedComponent = cloneDeep(component)
walkProps(copiedComponent, p => {
p._id = uuid()
})
parent._children = [...parent._children, copiedComponent]
saveCurrentPreviewItem(s)
s.currentComponentInfo = copiedComponent
return s
})
}
const deleteComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
if (parent) {
parent._children = parent._children.filter(c => c !== component)
}
saveCurrentPreviewItem(state)
return state
})
}
const generateNewIdsForComponent = c =>
walkProps(c, p => {
p._id = uuid() p._id = uuid()
}) })
parent._children = [...parent._children, copiedComponent]
saveCurrentPreviewItem(s)
s.currentComponentInfo = copiedComponent
return s
})
}
const deleteComponent = () => { const storeComponentForCopy = (cut = false) => {
store.update(state => { store.update(s => {
const parent = getParent(state.currentPreviewItem.props, component) const copiedComponent = cloneDeep(component)
s.componentToPaste = copiedComponent
if (cut) {
const parent = getParent(s.currentPreviewItem.props, component._id)
parent._children = parent._children.filter(c => c._id !== component._id)
selectComponent(s, parent)
}
if (parent) {
parent._children = parent._children.filter(
c => c !== component
)
}
saveCurrentPreviewItem(state)
return state
})
}
const generateNewIdsForComponent = c =>
walkProps(c, p => {
p._id = uuid()
})
const storeComponentForCopy = (cut = false) => {
store.update(s => {
const copiedComponent = cloneDeep(component)
s.componentToPaste = copiedComponent
if (cut) {
const parent = getParent(s.currentPreviewItem.props, component._id)
parent._children = parent._children.filter(c => c._id !== component._id)
selectComponent(s, parent)
}
return s
})
}
const pasteComponent = mode => {
store.update(s => {
if (!s.componentToPaste) return s
const componentToPaste = cloneDeep(s.componentToPaste)
generateNewIdsForComponent(componentToPaste)
delete componentToPaste._cutId
if (mode === "inside") {
component._children.push(componentToPaste)
return s return s
} })
}
const parent = getParent(s.currentPreviewItem.props, component) const pasteComponent = mode => {
store.update(s => {
if (!s.componentToPaste) return s
const targetIndex = parent._children.indexOf(component) const componentToPaste = cloneDeep(s.componentToPaste)
const index = mode === "above" ? targetIndex : targetIndex + 1 generateNewIdsForComponent(componentToPaste)
parent._children.splice(index, 0, cloneDeep(componentToPaste)) delete componentToPaste._cutId
saveCurrentPreviewItem(s) if (mode === "inside") {
selectComponent(s, componentToPaste) component._children.push(componentToPaste)
return s
}
return s const parent = getParent(s.currentPreviewItem.props, component)
})
}
const targetIndex = parent._children.indexOf(component)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
saveCurrentPreviewItem(s)
selectComponent(s, componentToPaste)
return s
})
}
</script> </script>
<div class="root" on:click|stopPropagation={() => {}}> <div class="root" on:click|stopPropagation={() => {}}>
<button> <button>
<MoreIcon /> <MoreIcon />
</button> </button>
<ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}> <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
<li on:click={() => confirmDeleteDialog.show()}>Delete</li> <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
<li on:click={moveUpComponent}>Move up</li> <li on:click={moveUpComponent}>Move up</li>
<li on:click={moveDownComponent}>Move down</li> <li on:click={moveDownComponent}>Move down</li>
@ -151,14 +162,20 @@ const pasteComponent = mode => {
<li on:click={() => storeComponentForCopy(true)}>Cut</li> <li on:click={() => storeComponentForCopy(true)}>Cut</li>
<li on:click={() => storeComponentForCopy(false)}>Copy</li> <li on:click={() => storeComponentForCopy(false)}>Copy</li>
<hr /> <hr />
<li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li> <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
<li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li> Paste above
<li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li> </li>
<li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
Paste below
</li>
<li
class:disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent('inside')}>
Paste inside
</li>
</ul> </ul>
</div> </div>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
title="Confirm Delete" title="Confirm Delete"
@ -167,52 +184,49 @@ const pasteComponent = mode => {
onOk={deleteComponent} /> onOk={deleteComponent} />
<style> <style>
.root {
overflow: hidden;
z-index: 9;
}
.root { .root button {
overflow: hidden; border-style: none;
z-index:9; border-radius: 2px;
} padding: 5px;
background: transparent;
cursor: pointer;
color: var(--button-text);
outline: none;
}
.root button { .menu {
border-style: none; z-index: 100000;
border-radius: 2px; overflow: visible;
padding: 5px; padding: 10px 0;
background: transparent; }
cursor: pointer;
color: var(--button-text);
outline: none;
}
.menu { .menu li {
z-index: 100000; border-style: none;
overflow: visible; background-color: transparent;
padding: 10px 0 list-style-type: none;
} padding: 4px 5px 4px 15px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.menu li { .menu li:not(.disabled) {
border-style: none; cursor: pointer;
background-color: transparent; color: var(--ink);
list-style-type: none; }
padding: 4px 5px 4px 15px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.menu li:not(.disabled):hover {
color: var(--button-text);
background-color: var(--grey-light);
}
.menu li:not(.disabled) { .disabled {
cursor: pointer; color: var(--grey-dark);
color: var(--ink); cursor: default;
} }
</style>
.menu li:not(.disabled):hover {
color: var(--button-text);
background-color: var(--grey-light);
}
.disabled {
color: var(--grey-dark);
cursor: default;
}
</style>

4
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -16,7 +16,6 @@
export let onSelect = () => {} export let onSelect = () => {}
export let level = 0 export let level = 0
const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
const get_name = s => (!s ? "" : last(s.split("/"))) const get_name = s => (!s ? "" : last(s.split("/")))
@ -43,7 +42,7 @@
style="padding-left: {level * 20 + 53}px"> style="padding-left: {level * 20 + 53}px">
<div>{get_capitalised_name(component._component)}</div> <div>{get_capitalised_name(component._component)}</div>
<div class="actions"> <div class="actions">
<ComponentDropdownMenu component={component}/> <ComponentDropdownMenu {component} />
</div> </div>
</div> </div>
@ -96,5 +95,4 @@
.item:hover .actions { .item:hover .actions {
display: block; display: block;
} }
</style> </style>

1
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -45,5 +45,4 @@
.newscreen:hover { .newscreen:hover {
background: var(--grey-light); background: var(--grey-light);
} }
</style> </style>