From 17438372d08315c193c6c1ec14f6dbbb59501288 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 19 Aug 2021 16:54:44 +0100
Subject: [PATCH] Add ability for user to select 'List' data type for a column

---
 packages/bbui/src/Table/ArrayRenderer.svelte    | 17 +++++++++++++++++
 packages/bbui/src/Table/CellRenderer.svelte     |  3 ++-
 .../backend/DataTable/RowFieldControl.svelte    | 14 +++++++++++++-
 .../DataTable/modals/CreateEditColumn.svelte    | 13 +++++++++++++
 .../TableNavigator/TableDataImport.svelte       |  4 ++++
 packages/builder/src/constants/backend/index.js |  9 +++++++++
 .../server/src/api/controllers/row/utils.js     | 16 ++++++++++++++--
 packages/server/src/constants/index.js          |  1 +
 packages/server/src/utilities/rowProcessor.js   |  5 +++++
 9 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 packages/bbui/src/Table/ArrayRenderer.svelte

diff --git a/packages/bbui/src/Table/ArrayRenderer.svelte b/packages/bbui/src/Table/ArrayRenderer.svelte
new file mode 100644
index 0000000000..8281fce78c
--- /dev/null
+++ b/packages/bbui/src/Table/ArrayRenderer.svelte
@@ -0,0 +1,17 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  const displayLimit = 5
+
+  $: badges = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - badges.length
+</script>
+
+{#each badges as badge}
+  <Badge size="S" grey>{badge}</Badge>
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 2d073b7782..d6a2f3196d 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -4,7 +4,7 @@
   import DateTimeRenderer from "./DateTimeRenderer.svelte"
   import RelationshipRenderer from "./RelationshipRenderer.svelte"
   import AttachmentRenderer from "./AttachmentRenderer.svelte"
-
+  import ArrayRenderer from "./ArrayRenderer.svelte"
   export let row
   export let schema
   export let value
@@ -19,6 +19,7 @@
     options: StringRenderer,
     number: StringRenderer,
     longform: StringRenderer,
+    array: ArrayRenderer,
   }
   $: type = schema?.type ?? "string"
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 078dbf25b2..66879b83cf 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
+  import {
+    Input,
+    Select,
+    DatePicker,
+    Toggle,
+    TextArea,
+    Multiselect,
+  } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
@@ -26,6 +33,11 @@
   <Dropzone {label} bind:value />
 {:else if type === "boolean"}
   <Toggle text={label} bind:value data-cy="{meta.name}-input" />
+{:else if type === "array"}
+  <Multiselect
+    bind:value
+    options={meta.constraints.inclusion.reduce((p, n) => p.concat(n), [])}
+  />
 {:else if type === "link"}
   <LinkedRowSelector bind:linkedRows={value} schema={meta} />
 {:else if type === "longform"}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 35722481db..3f3d28bf81 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -29,6 +29,7 @@
 
   const AUTO_TYPE = "auto"
   const FORMULA_TYPE = FIELDS.FORMULA.type
+  const ARRAY_TYPE = FIELDS.ARRAY.type
   const LINK_TYPE = FIELDS.LINK.type
   let fieldDefinitions = cloneDeep(FIELDS)
   const { hide } = getContext(Context.Modal)
@@ -81,6 +82,13 @@
     if (field.type === AUTO_TYPE) {
       field = buildAutoColumn($tables.draft.name, field.name, field.subtype)
     }
+    if (field.type === ARRAY_TYPE) {
+      let arr = field.constraints.inclusion
+      let newArr = []
+      newArr.push(arr)
+      console.log(newArr)
+      field.constraints.inclusion = newArr
+    }
     tables.saveField({
       originalName,
       field,
@@ -262,6 +270,11 @@
       label="Options (one per line)"
       bind:values={field.constraints.inclusion}
     />
+  {:else if field.type === "array"}
+    <ValuesList
+      label="Options (one per line)"
+      bind:values={field.constraints.inclusion}
+    />
   {:else if field.type === "datetime"}
     <DatePicker
       label="Earliest"
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 8ce2ebe7f9..57150b229b 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -113,6 +113,10 @@
       label: "Options",
       value: FIELDS.OPTIONS.type,
     },
+    {
+      label: "List",
+      value: FIELDS.ARRAY.type,
+    },
   ]
 </script>
 
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 88152deb0f..2ce88c9648 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -26,6 +26,15 @@ export const FIELDS = {
       inclusion: [],
     },
   },
+  ARRAY: {
+    name: "List",
+    type: "array",
+    constraints: {
+      type: "array",
+      presence: false,
+      inclusion: [],
+    },
+  },
   NUMBER: {
     name: "Number",
     type: "number",
diff --git a/packages/server/src/api/controllers/row/utils.js b/packages/server/src/api/controllers/row/utils.js
index 16c48181d1..bdb7e03785 100644
--- a/packages/server/src/api/controllers/row/utils.js
+++ b/packages/server/src/api/controllers/row/utils.js
@@ -58,12 +58,24 @@ exports.validate = async ({ appId, tableId, row, table }) => {
     const constraints = cloneDeep(table.schema[fieldName].constraints)
     // special case for options, need to always allow unselected (null)
     if (
-      table.schema[fieldName].type === FieldTypes.OPTIONS &&
+      table.schema[fieldName].type ===
+        (FieldTypes.OPTIONS || FieldTypes.ARRAY) &&
       constraints.inclusion
     ) {
       constraints.inclusion.push(null)
     }
-    const res = validateJs.single(row[fieldName], constraints)
+    let res
+
+    // Validate.js doesn't seem to handle array of array very well
+    if (table.schema[fieldName].type === FieldTypes.ARRAY) {
+      row[fieldName].map(val => {
+        if (constraints.inclusion.includes(val)) {
+          errors[fieldName] = "Field not in list"
+        }
+      })
+    } else {
+      res = validateJs.single(row[fieldName], constraints)
+    }
     if (res) errors[fieldName] = res
   }
   return { valid: Object.keys(errors).length === 0, errors }
diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js
index 703b33deb1..bc7b5b368f 100644
--- a/packages/server/src/constants/index.js
+++ b/packages/server/src/constants/index.js
@@ -12,6 +12,7 @@ exports.FieldTypes = {
   OPTIONS: "options",
   NUMBER: "number",
   BOOLEAN: "boolean",
+  ARRAY: "array",
   DATETIME: "datetime",
   ATTACHMENT: "attachment",
   LINK: "link",
diff --git a/packages/server/src/utilities/rowProcessor.js b/packages/server/src/utilities/rowProcessor.js
index c067d4de87..3c43a20409 100644
--- a/packages/server/src/utilities/rowProcessor.js
+++ b/packages/server/src/utilities/rowProcessor.js
@@ -29,6 +29,11 @@ const TYPE_TRANSFORM_MAP = {
     [null]: null,
     [undefined]: undefined,
   },
+  [FieldTypes.ARRAY]: {
+    "": [],
+    [null]: [],
+    [undefined]: undefined,
+  },
   [FieldTypes.STRING]: {
     "": "",
     [null]: "",