Allow bindings for table cell values and break out cell settings into its own drawer component

2022-02-21 13:19:29 +00:00 · 2022-02-21 13:19:29 +00:00 · 7236ae80e5
parent 86acb3fea3
commit 7236ae80e5
8 changed files with 136 additions and 48 deletions
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -38,6 +38,7 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^1.0.66-alpha.0",
    "@spectrum-css/actionbutton": "^1.0.1",
    "@spectrum-css/actiongroup": "^1.0.1",
    "@spectrum-css/avatar": "^3.0.2",
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@ -6,6 +6,7 @@
  import AttachmentRenderer from "./AttachmentRenderer.svelte"
  import ArrayRenderer from "./ArrayRenderer.svelte"
  import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"

  export let row
  export let schema
@ -29,10 +30,24 @@
  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
  $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
 </script>

-{#if renderer && (customRenderer || (value != null && value !== ""))}
-  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
+  <svelte:component
+    this={renderer}
+    {row}
+    {schema}
+    value={cellValue}
+    on:clickrelationship
+  >
    <slot />
  </svelte:component>
 {/if}
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -58,7 +58,7 @@
  const updateValue = val => {
    valid = isValid(readableToRuntimeBinding(bindings, val))
    if (valid) {
-      dispatch("change", value)
+      dispatch("change", val)
    }
  }

--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellDrawer.svelte
@ -0,0 +1,66 @@
+<script>
+  import {
+    Input,
+    Select,
+    ColorPicker,
+    DrawerContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let column
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="S">
+      <Input bind:value={column.width} label="Width" placeholder="Auto" />
+      <Select
+        label="Alignment"
+        bind:value={column.align}
+        options={["Left", "Center", "Right"]}
+        placeholder="Default"
+      />
+      <DrawerBindableInput
+        label="Value"
+        value={column.template}
+        on:change={e => (column.template = e.detail)}
+        placeholder={`{{ Value }}`}
+        bindings={[
+          {
+            readableBinding: "Value",
+            runtimeBinding: "[value]",
+          },
+        ]}
+      />
+      <Layout noPadding gap="XS">
+        <Label>Background color</Label>
+        <ColorPicker
+          value={column.background}
+          on:change={e => (column.background = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+      <Layout noPadding gap="XS">
+        <Label>Text color</Label>
+        <ColorPicker
+          value={column.color}
+          on:change={e => (column.color = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellEditor.svelte
@ -0,0 +1,34 @@
+<script>
+  import { Drawer, Button, Icon } from "@budibase/bbui"
+  import CellDrawer from "./CellDrawer.svelte"
+
+  export let column
+
+  let boundValue
+  let drawer
+
+  $: updateBoundValue(column)
+
+  const updateBoundValue = value => {
+    boundValue = { ...value }
+  }
+
+  const open = () => {
+    updateBoundValue(column)
+    drawer.show()
+  }
+
+  const save = () => {
+    column = boundValue
+    drawer.hide()
+  }
+</script>
+
+<Icon name="Settings" hoverable size="S" on:click={open} />
+<Drawer bind:this={drawer} title="Table Columns">
+  <svelte:fragment slot="description">
+    "{column.name}" column settings
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <CellDrawer slot="body" bind:column={boundValue} />
+</Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@ -4,16 +4,15 @@
    Icon,
    DrawerContent,
    Layout,
-    Input,
    Select,
    Label,
    Body,
-    ColorPicker,
+    Input,
  } from "@budibase/bbui"
  import { flip } from "svelte/animate"
  import { dndzone } from "svelte-dnd-action"
  import { generate } from "shortid"
-  import { store } from "builderStore"
+  import CellEditor from "./CellEditor.svelte"

  export let columns = []
  export let options = []
@ -65,10 +64,11 @@
  }

  const addAllColumns = () => {
-    let newColumns = []
+    let newColumns = columns || []
    options.forEach(field => {
      const fieldSchema = schema[field]
-      if (!fieldSchema?.autocolumn) {
+      const hasCol = columns && columns.findIndex(x => x.name === field) !== -1
+      if (!fieldSchema?.autocolumn && !hasCol) {
        newColumns.push({
          name: field,
          displayName: field,
@ -92,15 +92,7 @@
            <div />
            <Label size="L">Column</Label>
            <Label size="L">Label</Label>
-            <Label size="L">Width</Label>
-            <Label size="L">Alignment</Label>
-            <Label size="L">Format</Label>
-            <div class="center">
-              <Label size="L">Background</Label>
-            </div>
-            <div class="center">
-              <Label size="L">Text color</Label>
-            </div>
+            <div />
            <div />
          </div>
          <div
@ -131,33 +123,7 @@
                  on:change={e => (column.displayName = e.detail)}
                />
                <Input bind:value={column.displayName} placeholder="Label" />
-                <Input bind:value={column.width} placeholder="Auto" />
-                <Select
-                  bind:value={column.align}
-                  options={["Left", "Center", "Right"]}
-                  placeholder="Default"
-                />
-                <Select
-                  bind:value={column.format}
-                  options={["Left"]}
-                  placeholder="Default"
-                />
-                <div class="center">
-                  <ColorPicker
-                    value={column.background}
-                    on:change={e => (column.background = e.detail)}
-                    alignRight
-                    spectrumTheme={$store.theme}
-                  />
-                </div>
-                <div class="center">
-                  <ColorPicker
-                    value={column.color}
-                    on:change={e => (column.color = e.detail)}
-                    alignRight
-                    spectrumTheme={$store.theme}
-                  />
-                </div>
+                <CellEditor bind:column />
                <Icon
                  name="Close"
                  hoverable
@ -199,7 +165,7 @@
 <style>
  .container {
    width: 100%;
-    max-width: 1200px;
+    max-width: 600px;
    margin: 0 auto;
  }
  .columns {
@ -212,7 +178,7 @@
  .column {
    gap: var(--spacing-l);
    display: grid;
-    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 72px 72px 20px;
+    grid-template-columns: 20px 1fr 1fr auto auto;
    align-items: center;
    border-radius: var(--border-radius-s);
    transition: background-color ease-in-out 130ms;
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
@ -56,13 +56,18 @@
    })
  }

+  const open = () => {
+    updateBoundValue(sanitisedValue)
+    drawer.show()
+  }
+
  const save = () => {
    dispatch("change", getValidColumns(boundValue, options))
    drawer.hide()
  }
 </script>

-<ActionButton on:click={drawer.show}>Configure columns</ActionButton>
+<ActionButton on:click={open}>Configure columns</ActionButton>
 <Drawer bind:this={drawer} title="Table Columns">
  <svelte:fragment slot="description">
    Configure the columns in your table.
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -2679,7 +2679,8 @@
        "type": "columns",
        "label": "Columns",
        "key": "columns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "nested": true
      },
      {
        "type": "select",