Merge pull request #609 from Budibase/frontend-bugs

fix frontend bugs

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, DataList } from "@budibase/bbui"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@@ -29,12 +29,12 @@
       {/each}
     </Select>
   {:else if parameter.name === 'url'}
-    <Select editable on:change bind:value={parameter.value}>
+    <DataList editable on:change bind:value={parameter.value}>
       <option value="" />
       {#each $store.allScreens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
-    </Select>
+    </DataList>
   {:else}
     <Input
       name={parameter.name}

packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte

@@ -1,6 +1,6 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { Select, Label, TextButton, Spacer } from "@budibase/bbui"
+  import { DataList, Label, TextButton, Spacer } from "@budibase/bbui"
   import { store, backendUiStore } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"

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

@@ -93,7 +93,7 @@
       {...props}
       name={key} />
   </div>
-  {#if control == Input}
+  {#if control === Input && !key.startsWith('_')}
     <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
       <Icon name="edit" />
     </button>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
 
@@ -10,9 +10,9 @@
   const handleBlur = () => dispatch("change", value)
 </script>
 
-<Select editable secondary on:blur={handleBlur} on:change bind:value>
+<DataList editable secondary on:blur={handleBlur} on:change bind:value>
   <option value="" />
   {#each $store.allScreens as screen}
     <option value={screen.route}>{screen.props._instanceName}</option>
   {/each}
-</Select>
+</DataList>

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

@@ -116,7 +116,7 @@
         control={definition.control}
         label={definition.label}
         key={definition.key}
-        value={componentInstance[definition.key]}
+        value={componentInstance[definition.key] || componentInstance[definition.key].defaultValue}
         {componentInstance}
         {onChange}
         props={{ ...excludeProps(definition, ['control', 'label']) }} />

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

@@ -6,6 +6,7 @@ import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import Colorpicker from "@budibase/colorpicker"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -515,10 +516,30 @@ export default {
                 key: "datasource",
                 control: ModelViewSelect,
               },
-              { label: "Stripe Color", key: "stripeColor", control: Input },
-              { label: "Border Color", key: "borderColor", control: Input },
-              { label: "TH Color", key: "backgroundColor", control: Input },
-              { label: "TH Font Color", key: "color", control: Input },
+              {
+                label: "Stripe Color",
+                key: "stripeColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "Border Color",
+                key: "borderColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "TH Color",
+                key: "backgroundColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "TH Font Color",
+                key: "color",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
               { label: "Table", key: "model", control: ModelSelect },
             ],
           },

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

@@ -25,7 +25,7 @@ exports.save = async function(ctx) {
     ...ctx.request.body,
   }
 
-  // update renamed record fields when model is updated
+  // rename record fields when table column is renamed
   const { _rename } = modelToSave
   if (_rename) {
     const records = await db.query(`database/all_${modelToSave._id}`, {
@@ -41,6 +41,15 @@ exports.save = async function(ctx) {
     delete modelToSave._rename
   }
 
+  // update schema of non-statistics views when new columns are added
+  for (let view in modelToSave.views) {
+    const modelView = modelToSave.views[view]
+    if (!modelView) continue
+
+    if (modelView.schema.group || modelView.schema.field) continue
+    modelView.schema = modelToSave.schema
+  }
+
   const result = await db.post(modelToSave)
   modelToSave._rev = result.rev
 

packages/server/src/api/controllers/view/viewBuilder.js

@@ -103,9 +103,10 @@ function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {
   let schema = null
 
   if (calculation) {
-    schema = groupBy
-      ? { ...GROUP_PROPERTY, ...SCHEMA_MAP[calculation] }
-      : { ...FIELD_PROPERTY, ...SCHEMA_MAP[calculation] }
+    schema = {
+      ...(groupBy ? GROUP_PROPERTY : FIELD_PROPERTY),
+      ...SCHEMA_MAP[calculation],
+    }
   }
 
   return {

packages/standard-components/src/index.js

@@ -1,3 +1,5 @@
+import "@budibase/bbui/dist/bbui.css"
+
 export { default as container } from "./Container.svelte"
 export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"