Merge branch 'master' of https://github.com/Budibase/budibase into welcome-screen-ui-fix

packages/builder/src/builderStore/store/index.js

@@ -29,7 +29,8 @@ import {
 export const getStore = () => {
   const initial = {
     apps: [],
-    appname: "",
+    name: "",
+    description: "",
     pages: DEFAULT_PAGES_OBJECT,
     mainUi: {},
     unauthenticatedUi: {},
@@ -101,7 +102,8 @@ const setPackage = (store, initial) => async pkg => {
 
   initial.libraries = pkg.application.componentLibraries
   initial.components = await fetchComponentLibDefinitions(pkg.application._id)
-  initial.appname = pkg.application.name
+  initial.name = pkg.application.name
+  initial.description = pkg.application.description
   initial.appId = pkg.application._id
   initial.pages = pkg.pages
   initial.hasAppPackage = true

packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte

@@ -36,6 +36,7 @@
     class={determineClassName(type)}
     bind:value
     class:uk-form-danger={errors.length > 0}>
+    <option></option>
     {#each options as opt}
       <option value={opt}>{opt}</option>
     {/each}

packages/builder/src/components/nav/UsersList.svelte

@@ -11,7 +11,7 @@
   }
 
   $: currentAppInfo = {
-    appname: $store.appname,
+    name: $store.name,
   }
 
   async function fetchUsers() {

packages/builder/src/components/settings/tabs/General.svelte

@@ -1,15 +1,39 @@
 <script>
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import api from "builderStore/api"
   import Title from "../TabTitle.svelte"
+
+  async function updateApplication(data) {
+    const response = await api.put(`/api/${$store.appId}`, data)
+    const app = await response.json()
+    store.update(state => {
+      state = {
+        ...state,
+        ...data,
+      }
+      return state
+    })
+  }
 </script>
 
 <Title>General</Title>
 <div class="container">
   <div class="background">
-    <Input thin edit placeholder="Enter your name" label="Name" />
+    <Input
+      on:save={e => updateApplication({ name: e.detail })}
+      thin
+      edit
+      value={$store.name}
+      label="Name" />
   </div>
   <div class="background">
-    <TextArea thin edit placeholder="Enter your name" label="Name" />
+    <TextArea
+      on:save={e => updateApplication({ description: e.detail })}
+      thin
+      edit
+      value={$store.description}
+      label="Name" />
   </div>
 </div>
 

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -25,38 +25,69 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      _component: "@budibase/standard-components/container",
+      "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
-      type: "div",
+      "_component": "@budibase/standard-components/container",
-      _children: [
+      "_styles": {
+        "normal": {
+          "padding": "0px",
+          "font-family": "Roboto",
+          "border-width": "0",
+          "border-style": "None",
+          "text-align": "center"
+        },
+        "hover": {},
+        "active": {},
+        "selected": {}
+      },
+      "_code": "",
+      "className": "",
+      "onLoad": [],
+      "type": "div",
+      "_children": [
         {
-          _component: "@budibase/standard-components/container",
+          "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
-          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
+          "_component": "@budibase/standard-components/container",
-          _id: "__screenslot__text",
+          "_styles": {
-          _code: "",
+            "normal": {
-          className: "",
+              "padding": "16px",
-          onLoad: [],
+              "border-style": "Dashed",
-          type: "div",
+              "border-width": "2px",
-          _children: [
+              "border-color": "#8a8989fa"
+            },
+            "hover": {},
+            "active": {},
+            "selected": {}
+          },
+          "_code": "",
+          "className": "",
+          "onLoad": [],
+          "type": "div",
+          "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+          "_instanceName": "Container",
+          "_children": [
             {
-              _component: "@budibase/standard-components/text",
+              "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
-              _styles: {
+              "_component": "@budibase/standard-components/heading",
-                normal: {},
+              "_styles": {
-                hover: {},
+                "normal": {
-                active: {},
+                  "font-family": "Roboto"
-                selected: {},
                 },
-              _id: "__screenslot__text_2",
+                "hover": {},
-              _code: "",
+                "active": {},
-              text: "content",
+                "selected": {}
-              font: "",
-              color: "",
-              textAlign: "inline",
-              verticalAlign: "inline",
-              formattingTag: "none",
-            },
-          ],
               },
+              "_code": "",
+              "className": "",
+              "text": "Your screens go here",
+              "type": "h1",
+              "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+              "_instanceName": "Heading",
+              "_children": []
+            }
+          ]
+        }
       ],
+      "_instanceName": "Content Placeholder"
     },
   }
 

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js

@@ -7,6 +7,9 @@ export default `<html>
         height: 100%!important;
         font-family: Roboto !important;
       }
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
       .lay-__screenslot__text {
           width: 100%;
           height: 100%;

packages/builder/src/components/userInterface/Colorpicker/actions/index.js

@@ -0,0 +1,2 @@
+export { default as drag } from "./drag.js"
+export { default as keyevents } from "./key-events.js"

packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js

@@ -0,0 +1,41 @@
+//events: Array<{trigger: fn}>
+export default function(node, events = []) {
+  const ev = Object.entries(events)
+  let fns = []
+
+  for (let [trigger, fn] of ev) {
+    let f = addEvent(trigger, fn)
+    fns = [...fns, f]
+  }
+
+  function _scaffold(trigger, fn) {
+    return () => {
+      let trig = parseInt(trigger)
+      if (trig) {
+        if (event.keyCode === trig) {
+          fn(event)
+        }
+      } else {
+        if (event.key === trigger) {
+          fn(event)
+        }
+      }
+    }
+  }
+
+  function addEvent(trigger, fn) {
+    let f = _scaffold(trigger, fn)
+    node.addEventListener("keydown", f)
+    return f
+  }
+
+  function removeEvents() {
+    fns.forEach(f => node.removeEventListener("keypress", f))
+  }
+
+  return {
+    destroy() {
+      removeEvents()
+    },
+  }
+}

packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import { fade } from "svelte/transition"
 
   export let backgroundSize = "10px"

packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte

@@ -3,17 +3,18 @@
   import { fade } from "svelte/transition"
   import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle} from "../helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
     convertHsvaToFormat,
-  } from "./utils.js"
+  } 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
@@ -27,10 +28,10 @@
   let colorPicker = null
   let adder = null
 
-  let h = null
+  let h = 0
-  let s = null
+  let s = 0
-  let v = null
+  let v = 0
-  let a = null
+  let a = 0
 
   const dispatch = createEventDispatcher()
 
@@ -56,9 +57,9 @@
     }
   }
 
-  function handleEscape(e) {
+  function handleEscape() {
-    if (open && e.key === "Escape") {
+    if(open) {
-      open = false
+      open = false;
     }
   }
 
@@ -164,11 +165,11 @@
 <Portal>
   <div
     class="colorpicker-container"
+    use:keyevents={{"Escape": handleEscape}}
     transition:fade
     bind:this={colorPicker}
     {style}
     tabindex="0"
-    on:keydown={handleEscape}
     bind:clientHeight={pickerHeight}
     bind:clientWidth={pickerWidth}>
 
@@ -213,11 +214,13 @@
           {/if}
           {#if swatches.length !== 12}
             <div
+              tabindex="0"
+              use:keyevents={{"Enter": addSwatch}}
               bind:this={adder}
               transition:fade
               class="adder"
-              on:click={addSwatch}
+              class:shrink
-              class:shrink>
+              on:click={addSwatch}>
               <span>&plus;</span>
             </div>
           {/if}
@@ -244,6 +247,7 @@
     display: flex;
     font-size: 11px;
     font-weight: 400;
+    transition: top 0.1s, left 0.1s;
     flex-direction: column;
     margin: 5px 0px;
     height: auto;
@@ -295,7 +299,7 @@
     flex: 1;
     height: 20px;
     display: flex;
-    transition: flex 0.5s;
+    transition: flex 0.3s;
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
@@ -305,6 +309,8 @@
     margin-left: 5px;
     margin-top: 3px;
     font-weight: 500;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .shrink {

packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte

@@ -1,11 +1,11 @@
 <script>
   import Colorpicker from "./Colorpicker.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, beforeUpdate } from "svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
 
-  import { buildStyle } from "./helpers.js"
+  import {buildStyle, debounce} from "../helpers.js"
   import { fade } from "svelte/transition"
-  import { getColorFormat } from "./utils.js"
+  import { getColorFormat } from "../utils.js"
 
   export let value = "#3ec1d3ff"
   export let swatches = []
@@ -49,7 +49,7 @@
     dispatch("change", color.detail)
   }
 
-  $: if (open && colorPreview) {
+  function calculateDimensions() {
    const {
       top: spaceAbove,
       width,
@@ -71,11 +71,15 @@
       y = bottom
     }
 
-    x = left + previewCenter - pickerWidth / 2
+    x = (left + previewCenter) - (220 / 2)
 
     dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } 
   }
 
+  $: if(open && colorPreview) {
+    calculateDimensions()
+  }
+
   $: previewStyle = buildStyle({ width, height, background: value })
   $: errorPreviewStyle = buildStyle({ width, height })
   $: pickerStyle = buildStyle({
@@ -84,6 +88,8 @@
   })
 </script>
 
+<svelte:window on:resize={debounce(calculateDimensions, 200)} />
+
 <div class="color-preview-container">
   {#if !errorMsg}
     <CheckedBackground borderRadius="3px" backgroundSize="8px">

packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte

@@ -1,9 +1,14 @@
 <script>
+  import {createEventDispatcher} from "svelte"
+  import {keyevents} from "../actions"
+
   export let text = ""
   export let selected = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<div class="flatbutton" class:selected on:click>{text}</div>
+<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}}  class:selected on:click>{text}</div>
 
 <style>
   .flatbutton {
@@ -19,11 +24,14 @@
     justify-content: center;
     align-items: center;
     background: #f1f3f4;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .selected {
     color: #ffffff;
     background-color: #003cb0;
     border: none;
+    outline: none;
   }
 </style>

packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte"
-  import dragable from "./drag.js"
+  import {drag, keyevents} from "../actions"
 
   export let value = 1
   export let type = "hue"
@@ -9,6 +9,10 @@
 
   let slider
   let sliderWidth = 0
+  let upperLimit = type === "hue" ? 360 : 1
+  let incrementFactor = type === "hue" ? 1 : 0.01
+
+  const isWithinLimit = value => value >= 0 && value <= upperLimit
 
   function onSliderChange(mouseX, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect()
@@ -17,12 +21,29 @@
     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 })
     }
   }
   
+  function handleLeftKey() {
+    let v = value - incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+    }
+  }
+
+  function handleRightKey() {
+    let v = value + incrementFactor
+    if(isWithinLimit(v)) {
+      value = v
+      dispatch("change", { color: value })
+
+    }
+  }
+  
   $: thumbPosition =
     type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
@@ -30,14 +51,16 @@
 </script>
 
 <div
+  tabindex="0"
   bind:this={slider}
+  use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
   bind:clientWidth={sliderWidth}
   on:click={event => onSliderChange(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
-    use:dragable
+    use:drag
     on:drag={e => onSliderChange(e.detail, true)}
     on:dragend
     class="slider-thumb"
@@ -54,6 +77,8 @@
     margin: 10px 0px;
     border: 1px solid #e8e8ef;
     cursor: pointer;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .hue {

packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte

@@ -2,6 +2,7 @@
   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"
@@ -12,6 +13,8 @@
 <div class="space">
   <CheckedBackground borderRadius="6px">
     <div
+      tabindex="0"
+      use:keyevents={{"Enter": () => dispatch("click")}}
       in:fade
       class="swatch"
       style={`background: ${color};`}
@@ -38,6 +41,8 @@
     border: 1px solid #dedada;
     height: 20px;
     width: 20px;
+    outline-color:  #003cb0;
+    outline-width: thin;
   }
 
   .space {

packages/builder/src/components/userInterface/Colorpicker/helpers.js

@@ -1,4 +1,4 @@
-export const buildStyle = styles => {
+export function buildStyle(styles) {
   let str = ""
   for (let s in styles) {
     if (styles[s]) {
@@ -12,3 +12,9 @@ export const buildStyle = styles => {
 export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
+
+export const debounce = (fn, milliseconds) => {
+  return () => {
+    setTimeout(fn, milliseconds)
+  }
+}

packages/builder/src/components/userInterface/Colorpicker/index.js

@@ -1,2 +1,2 @@
-import Colorpreview from "./Colorpreview.svelte"
+import Colorpreview from "./components/Colorpreview.svelte"
 export default Colorpreview

packages/builder/src/components/userInterface/Colorpicker/utils.js

@@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
 
 export const hsvaToHexa = (hsva, asString = false) => {
   const [r, g, b, a] = hsvaToRgba(hsva)
+  const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex)
 
-  const hexa = [r, g, b]
+  let hexa = [r, g, b].map(v => {
-    .map(v => {
     let hex = Math.round(v).toString(16)
-      return hex.length === 1 ? `0${hex}` : hex
+    return padSingle(hex)
   })
-    .concat(Math.round(a * 255).toString(16))
+
+  let alpha = padSingle(Math.round(a * 255).toString(16))
+  hexa = [...hexa, alpha]
   return asString ? `#${hexa.join("")}` : hexa
 }
 

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -406,7 +406,7 @@ export default {
         {
           name: "List",
           _component: "@budibase/standard-components/list",
-          description: "Shiny list",
+          description: "Renders all children once per record, of a given model",
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
@@ -414,6 +414,18 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Record Detail",
+          _component: "@budibase/standard-components/recorddetail",
+          description:
+            "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
         {
           name: "Map",
           _component: "@budibase/standard-components/datamap",

packages/client/src/render/screenRouter.js

@@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
 
     const screenIndex = current !== -1 ? current : fallback
 
-    onScreenSelected(screens[screenIndex], _url)
-
     try {
       !url.state && history.pushState(_url, null, _url)
     } catch (_) {
       // ignoring an exception here as the builder runs an iframe, which does not like this
     }
+
+    onScreenSelected(screens[screenIndex], _url)
   }
 
   function click(e) {

packages/server/src/api/controllers/application.js

@@ -90,6 +90,22 @@ exports.create = async function(ctx) {
   ctx.message = `Application ${ctx.request.body.name} created successfully`
 }
 
+exports.update = async function(ctx) {
+  const clientId = await lookupClientId(ctx.params.applicationId)
+  const db = new CouchDB(ClientDb.name(clientId))
+  const application = await db.get(ctx.params.applicationId)
+
+  const data = ctx.request.body
+  const newData = { ...application, ...data }
+
+  const response = await db.put(newData)
+  data._rev = response.rev
+
+  ctx.status = 200
+  ctx.message = `Application ${application.name} updated successfully.`
+  ctx.body = response
+}
+
 const createEmptyAppPackage = async (ctx, app) => {
   const templateFolder = resolve(
     __dirname,

packages/server/src/api/routes/application.js

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

packages/server/src/utilities/builder/index.template.html

@@ -17,6 +17,9 @@
             margin: 0px;
             padding: 0px;
         }
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
     </style>
 
     {{ each(options.stylesheets) }}

packages/standard-components/components.json

@@ -235,15 +235,14 @@
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
 		"props": {
-			"model": "models",
+			"model": "models"
-			"layout": {
-				"type": "options",
-				"default": "list",
-				"options": [
-					"list",
-					"grid"
-				]
 		}
+	},
+	"recorddetail": {
+		"description": "Loads a record, using an ID in the url",
+		"data": true,
+		"props": {
+			"model": "models"
 		}
 	},
 	"datamap": {

packages/standard-components/src/List.svelte

@@ -3,7 +3,6 @@
 
   export let _bb
   export let model
-  export let layout = "list"
 
   let headers = []
   let store = _bb.store
@@ -33,39 +32,5 @@
   })
 </script>
 
-<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
+<section bind:this={target}>
-  <div class="data-card" bind:this={target} />
 </section>
-
-<style>
-  .list {
-    display: flex;
-    flex-direction: column;
-    font-family: Inter;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  ul {
-    list-style-type: none;
-  }
-
-  li {
-    margin: 5px 0 5px 0;
-  }
-
-  .data-card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-  }
-
-  .data-key {
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: capitalize;
-  }
-</style>

packages/standard-components/src/RecordDetail.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let model
+
+  let headers = []
+  let store = _bb.store
+  let target
+
+  async function fetchFirstRecord() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const allRecords = await response.json()
+      if (allRecords.length > 0) return allRecords[0]
+    }
+  }
+
+  async function fetchData() {
+    const pathParts = window.location.pathname.split("/")
+
+    let record
+    // if srcdoc, then we assume this is the builder preview
+    if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
+      record = await fetchFirstRecord()
+    } else {
+      const id = pathParts[pathParts.length - 1]
+      const GET_RECORD_URL = `/api/${model}/records/${id}`
+      const response = await _bb.api.get(GET_RECORD_URL)
+      if (response.status === 200) {
+        record = await response.json()
+      }
+    }
+
+    if (record) {
+      _bb.attachChildren(target, {
+        hydrate: false,
+        context: record,
+      })
+    } else {
+      throw new Error("Failed to fetch record.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<section bind:this={target}>
+</section>

packages/standard-components/src/index.js

@@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as recorddetail } from "./RecordDetail.svelte"