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

lint ✨

This commit is contained in:
Martin McKeaveney 2020-06-23 16:20:06 +01:00
parent afcc80ab9d
commit c5bd314931
18 changed files with 397 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/builder/src/components/common/LinkedRecordSelector.svelte
View File

@ -12,7 +12,13 @@
let linkedRecords = new Set(linked)
$: linked = [...linkedRecords]
$: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
$: FIELDS_TO_HIDE = [
"modelId",
"type",
"_id",
"_rev",
$backendUiStore.selectedModel.name,
]
async function fetchRecords() {
const FETCH_RECORDS_URL = `/api/${modelId}/records`
@ -26,7 +32,7 @@
function linkRecord(id) {
if (linkedRecords.has(id)) {
linkedRecords.delete(id);
linkedRecords.delete(id)
} else {
linkedRecords.add(id)
}

11
packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte
View File

@ -4,18 +4,23 @@
import { backendUiStore } from "builderStore"
import api from "builderStore/api"
export let ids = []
export let header
let records = []
let open = false
$: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
$: FIELDS_TO_HIDE = [
"modelId",
"type",
"_id",
"_rev",
$backendUiStore.selectedModel.name,
]
async function fetchRecords() {
const response = await api.post("/api/records/search", {
keys: ids
keys: ids,
})
records = await response.json()
}

14
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -4,7 +4,7 @@
import { Button } from "@budibase/bbui"
import Select from "components/common/Select.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte";
import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte"
import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
import * as api from "./api"
@ -46,9 +46,7 @@
$: {
if ($backendUiStore.selectedView) {
api
.fetchDataForView($backendUiStore.selectedView)
.then(records => {
api.fetchDataForView($backendUiStore.selectedView).then(records => {
data = records || []
headers = Object.keys($backendUiStore.selectedModel.schema).filter(
key => !INTERNAL_HEADERS.includes(key)
@ -91,10 +89,6 @@
</span>
</Button>
</div>
<div class="search">
<i class="ri-search-line"></i>
<input placeholder="Search" class="budibase__input" bind:value={search} />
</div>
<table class="uk-table">
<thead>
<tr>
@ -137,9 +131,7 @@
<td>
{#if Array.isArray(row[header])}
<LinkedRecord {header} ids={row[header]} />
{:else}
{row[header] || 0}
{/if}
{:else}{row[header] || 0}{/if}
</td>
{/each}
</tr>

3
packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
View File

@ -6,7 +6,6 @@
export let record
export let onClosed
</script>
<section>
@ -26,7 +25,7 @@
alert
on:click={async () => {
await api.deleteRecord(record)
notifier.danger("Record deleted")
notifier.danger('Record deleted')
backendUiStore.actions.records.delete(record)
onClosed()
}}>

4
packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
View File

@ -1,6 +1,6 @@
<script>
import * as blockDefinitions from "constants/backend"
import { backendUiStore } from "builderStore";
import { backendUiStore } from "builderStore"
import Block from "components/common/Block.svelte"
const HEADINGS = [
@ -11,7 +11,7 @@
{
title: "Blocks",
key: "BLOCKS",
}
},
]
let selectedTab = "FIELDS"

11
packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
View File

@ -14,10 +14,9 @@
backendUiStore.actions.models.save({
model: {
...model,
...rest
...rest,
},
instanceId: $backendUiStore.selectedDatabase._id
});
})
}
</script>
@ -60,7 +59,11 @@
<p>Blocks are pre-made fields and help you build your model quicker.</p>
<div class="blocks">
{#each Object.values(MODELS) as model}
<Block tertiary title={model.name} icon={model.icon} on:click={() => createModel(model)}/>
<Block
tertiary
title={model.name}
icon={model.icon}
on:click={() => createModel(model)} />
{/each}
</div>
</div>

4
packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
View File

@ -30,12 +30,11 @@
async function deleteModel() {
const model = $backendUiStore.selectedModel
const instanceId = $backendUiStore.selectedDatabase._id
const field = $backendUiStore.selectedField
if (field) {
delete model.schema[field]
backendUiStore.actions.models.save({ model, instanceId })
backendUiStore.actions.models.save({ model })
notifier.danger(`Field ${field} deleted.`)
return
}
@ -52,7 +51,6 @@
async function saveModel() {
await backendUiStore.actions.models.save({
instanceId: $backendUiStore.selectedDatabase._id,
model: $backendUiStore.draftModel,
})
notifier.success(

9
packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
View File

@ -9,9 +9,12 @@
export let margin = ""
$: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
</script>
<div in:fade {style}>
<slot />
</div>
<style>
div {
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>');
@ -19,7 +22,3 @@
width: fit-content;
}
</style>
<div in:fade {style}>
<slot />
</div>

159
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
View File

@ -1,7 +1,7 @@
<script>
import { onMount, createEventDispatcher } from "svelte";
import { fade } from 'svelte/transition';
import Swatch from "./Swatch.svelte";
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 {
@ -14,16 +14,16 @@
import ButtonGroup from "./ButtonGroup.svelte"
import Input from "./Input.svelte"
export let value = "#3ec1d3ff";
export let value = "#3ec1d3ff"
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
export let disableSwatches = false
export let format = "hexa";
export let open = false;
export let format = "hexa"
export let open = false
export let pickerHeight = 0;
export let pickerWidth = 0;
export let pickerHeight = 0
export let pickerWidth = 0
let adder = null;
let adder = null
let h = null
let s = null
@ -74,23 +74,23 @@
//fired by choosing a color from the palette
function setSaturationAndValue({ detail }) {
s = detail.s;
v = detail.v;
value = convertHsvaToFormat([h, s, v, a], format);
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()
}
}
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()
}
@ -101,8 +101,8 @@
}
function changeFormatAndConvert(f) {
format = f;
value = convertHsvaToFormat([h, s, v, a], format);
format = f
value = convertHsvaToFormat([h, s, v, a], format)
}
function handleColorInput(text) {
@ -127,13 +127,12 @@
}
function removeSwatch(idx) {
let removedSwatch = swatches.splice(idx, 1);
let removedSwatch = swatches.splice(idx, 1)
swatches = swatches
dispatch("removeswatch", removedSwatch)
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
}
function applySwatch(color) {
if (value !== color) {
format = getColorFormat(color)
@ -145,7 +144,7 @@
}
}
$: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
$: style = buildStyle({ background: value, border })
$: shrink = swatches.length > 0
</script>
@ -174,6 +173,73 @@
</div>
</div>
</div>
<div
class="colorpicker-container"
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" {style} />
</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 swatches.length > 0}
{#each swatches as color, idx}
<Swatch
{color}
on:click={() => applySwatch(color)}
on:removeswatch={() => removeSwatch(idx)} />
{/each}
{/if}
{#if swatches.length !== 12}
<div
bind:this={adder}
transition:fade
class="adder"
on:click={addSwatch}
class:shrink>
<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>
<style>
@ -255,54 +321,3 @@
padding-top: 3px;
}
</style>
<div class="colorpicker-container" 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" {style} />
</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 swatches.length > 0}
{#each swatches as color, idx}
<Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
{/each}
{/if}
{#if swatches.length !== 12}
<div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
<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>

73
packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
View File

@ -4,17 +4,17 @@
import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
import { buildStyle } from "./helpers.js"
import { fade } from 'svelte/transition';
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 open = false
export let width = "25px"
export let height = "25px"
let format = "hexa";
let format = "hexa"
let dimensions = { top: 0, left: 0 }
let colorPreview = null
@ -24,12 +24,15 @@
let pickerHeight = 0
let anchorEl = null
let parentNodes = [];
let parentNodes = []
let errorMsg = null
$: previewStyle = buildStyle({ width, height, background: value })
$: errorPreviewStyle = buildStyle({ width, height })
$: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})
$: pickerStyle = buildStyle({
top: `${dimensions.top}px`,
left: `${dimensions.left}px`,
})
const dispatch = createEventDispatcher()
@ -52,7 +55,9 @@
//Travel up dom tree from preview element to find parent elements that scroll
while (!anchorEl.isSameNode(curEl)) {
curEl = curEl.parentNode
let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")
let elOverflow = window
.getComputedStyle(curEl)
.getPropertyValue("overflow")
if (/scroll|auto/.test(elOverflow)) {
els.push(curEl)
}
@ -61,49 +66,78 @@
}
})
function openColorpicker(event) {
if (colorPreview) {
open = true;
open = true
}
}
$: if (open && colorPreview) {
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()
const {
top: spaceAbove,
width,
bottom,
right,
left: spaceLeft,
} = colorPreview.getBoundingClientRect()
const { innerHeight, innerWidth } = window
const { offsetLeft, offsetTop } = colorPreview
//get the scrollTop value for all scrollable parent elements
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
let scrollTop = parentNodes.reduce(
(scrollAcc, el) => (scrollAcc += el.scrollTop),
0
)
const spaceBelow = (innerHeight - spaceAbove) - previewHeight
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop
const spaceBelow = innerHeight - spaceAbove - previewHeight
const top =
spaceAbove > spaceBelow
? offsetTop - pickerHeight - scrollTop
: offsetTop + previewHeight - scrollTop
//TOO: Testing and Scroll Awareness for x Scroll
const spaceRight = (innerWidth - spaceLeft) + previewWidth
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
const spaceRight = innerWidth - spaceLeft + previewWidth
const left =
spaceRight > spaceLeft
? offsetLeft + previewWidth
: offsetLeft - pickerWidth
dimensions = { top, left }
}
function onColorChange(color) {
value = color.detail;
value = color.detail
dispatch("change", color.detail)
}
</script>
<div class="color-preview-container">
{#if !errorMsg}
<CheckedBackground borderRadius="3px" backgroundSize="8px">
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />
<div
bind:this={colorPreview}
bind:clientHeight={previewHeight}
bind:clientWidth={previewWidth}
class="color-preview"
style={previewStyle}
on:click={openColorpicker} />
</CheckedBackground>
{#if open}
<div transition:fade class="picker-container" style={pickerStyle}>
<Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
<Colorpicker
on:change={onColorChange}
on:addswatch
on:removeswatch
bind:format
bind:value
bind:pickerHeight
bind:pickerWidth
{swatches}
{disableSwatches}
{open} />
</div>
<div on:click|self={() => open = false} class="overlay"></div>
<div on:click|self={() => (open = false)} class="overlay" />
{/if}
{:else}
<div class="color-preview preview-error" style={errorPreviewStyle}>
@ -112,7 +146,6 @@
{/if}
</div>
<style>
.color-preview-container {
display: flex;

7
packages/builder/src/components/userInterface/Colorpicker/Input.svelte
View File

@ -5,6 +5,9 @@
<div>
<input on:input type="text" {value} maxlength="25" />
</div>
<div>
<input on:input on:change type="text" {value} maxlength="25" />
</div>
<style>
div {
@ -26,7 +29,3 @@
font-weight: 550;
}
</style>
<div>
<input on:input on:change type="text" {value} maxlength="25" />
</div>

22
packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
View File

@ -1,5 +1,5 @@
<script>
import { onMount, createEventDispatcher } from "svelte";
import { onMount, createEventDispatcher } from "svelte"
import CheckedBackground from "./CheckedBackground.svelte"
const dispatch = createEventDispatcher()
@ -21,7 +21,8 @@
if (
clickX > 0 &&
clickY > 0 &&
clickX < paletteWidth && clickY < paletteHeight
clickX < paletteWidth &&
clickY < paletteHeight
) {
let s = (clickX / paletteWidth) * 100
let v = 100 - (clickY / paletteHeight) * 100
@ -49,6 +50,17 @@
{style}>
<div class="picker" style={pickerStyle} />
</div>
<CheckedBackground width="100%">
<div
bind:this={palette}
bind:clientHeight={paletteHeight}
bind:clientWidth={paletteWidth}
on:click={handleClick}
class="palette"
{style}>
<div class="picker" style={pickerStyle} />
</div>
</CheckedBackground>
<style>
.palette {
@ -68,9 +80,3 @@
border-radius: 50%;
}
</style>
<CheckedBackground width="100%">
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
<div class="picker" style={pickerStyle} />
</div>
</CheckedBackground>

40
packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
View File

@ -11,18 +11,15 @@
let sliderWidth = 0
function onSliderChange(mouseX, isDrag = false) {
const { left, width } = slider.getBoundingClientRect();
let clickPosition = mouseX - left;
const { left, width } = slider.getBoundingClientRect()
let clickPosition = mouseX - left
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
if (percentageClick >= 0 && percentageClick <= 1) {
let value =
type === "hue"
? 360 * percentageClick
: percentageClick;
let value = type === "hue" ? 360 * percentageClick : percentageClick
dispatch("change", {color: value, isDrag});
dispatch("change", { color: value, isDrag })
}
}
@ -45,6 +42,20 @@
class="slider-thumb"
{style} />
</div>
<div
bind:this={slider}
bind:clientWidth={sliderWidth}
on:click={event => onSliderChange(event.clientX)}
class="color-format-slider"
class:hue={type === 'hue'}
class:alpha={type === 'alpha'}>
<div
use:dragable
on:drag={e => onSliderChange(e.detail, true)}
on:dragend
class="slider-thumb"
{style} />
</div>
<style>
.color-format-slider {
@ -86,18 +97,3 @@
cursor: grab;
}
</style>
<div
bind:this={slider}
bind:clientWidth={sliderWidth}
on:click={event => onSliderChange(event.clientX)}
class="color-format-slider"
class:hue={type === 'hue'}
class:alpha={type === 'alpha'}>
<div
use:dragable
on:drag={e => onSliderChange(e.detail, true)}
on:dragend
class="slider-thumb"
{style} />
</div>

36
packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
View File

@ -1,15 +1,35 @@
<script>
import { createEventDispatcher } from "svelte"
import { fade } from 'svelte/transition';
import { fade } from "svelte/transition"
import CheckedBackground from "./CheckedBackground.svelte"
export let hovered = false
export let color = "#fff"
const dispatch = createEventDispatcher()
</script>
<div class="space">
<CheckedBackground borderRadius="6px">
<div
in:fade
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;
@ -39,15 +59,3 @@
align-items: center;
}
</style>
<div class="space">
<CheckedBackground borderRadius="6px">
<div in:fade 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>

6
packages/builder/src/constants/backend/index.js
View File

@ -162,7 +162,7 @@ export const MODELS = {
Name: BLOCKS.NAME,
Cuisine: {
...FIELDS.PLAIN_TEXT,
name: "Cuisine"
name: "Cuisine",
},
},
},
@ -173,8 +173,8 @@ export const MODELS = {
Name: BLOCKS.NAME,
Championships: {
...FIELDS.NUMBER,
name: "Championships"
}
name: "Championships",
},
},
},
}

8
packages/server/src/api/controllers/record.js
View File

@ -1,7 +1,6 @@
const CouchDB = require("../../db")
const validateJs = require("validate.js")
const newid = require("../../db/newid")
const { link } = require("pouchdb-adapter-memory")
exports.save = async function(ctx) {
const db = new CouchDB(ctx.user.instanceId)
@ -46,7 +45,6 @@ exports.save = async function(ctx) {
// create links in other tables
for (let key in record) {
// link
if (Array.isArray(record[key])) {
const linked = await db.allDocs({
include_docs: true,
@ -58,7 +56,9 @@ exports.save = async function(ctx) {
const doc = row.doc
return {
...doc,
[model.name]: doc[model.name] ? [...doc[model.name], record._id] : [record._id]
[model.name]: doc[model.name]
? [...doc[model.name], record._id]
: [record._id],
}
})
@ -105,7 +105,7 @@ exports.find = async function(ctx) {
const db = new CouchDB(ctx.user.instanceId)
const record = await db.get(ctx.params.recordId)
if (record.modelId !== ctx.params.modelId) {
ctx.throw(400, "Supplied modelId doe not match the record's modelId")
ctx.throw(400, "Supplied modelId does not match the records modelId")
return
}
ctx.body = record

5
packages/standard-components/src/Login.svelte
View File

@ -23,7 +23,10 @@
const login = async () => {
loading = true
const response = await _bb.api.post("/api/authenticate", { username, password })
const response = await _bb.api.post("/api/authenticate", {
username,
password,
})
if (response.status === 200) {
const json = await response.json()
localStorage.setItem("budibase:token", json.token)