Merge branch 'master' of github.com:Budibase/budibase into feat/linked-records-data-source

package.json

@@ -11,8 +11,9 @@
     "lerna": "3.14.1",
     "prettier": "^1.19.1",
     "prettier-plugin-svelte": "^0.7.0",
+    "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.18.1"
+    "svelte": "^3.28.0"
   },
   "scripts": {
     "bootstrap": "lerna bootstrap",
@@ -20,6 +21,8 @@
     "initialise": "lerna run initialise",
     "publishdev": "lerna run publishdev",
     "publishnpm": "yarn build && lerna publish --force-publish",
+    "restore": "npm run clean && npm run bootstrap && npm run build",
+    "nuke": "rimraf ~/.budibase && npm run restore",
     "clean": "lerna clean",
     "dev": "node ./scripts/symlinkDev.js && lerna run --parallel dev:builder",
     "test": "lerna run test",
@@ -32,4 +35,4 @@
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8"
   }
-}
+}

packages/builder/package.json

@@ -116,4 +116,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}

packages/builder/src/builderStore/fetchBindableProperties.js

@@ -73,22 +73,12 @@ const componentInstanceToBindable = walkResult => i => {
 
 const contextToBindables = (models, walkResult) => context => {
   const contextParentPath = getParentPath(walkResult, context)
-
+  const modelId = context.model?.modelId ?? context.model
-  let model, schema
+  const model = models.find(model => model._id === modelId)
-  if (typeof context.model === "string" || context.model.type === "model") {
+  let schema =
-    const modelId =
+    context.model?.type === "view"
-      typeof context.model === "string" ? context.model : context.model.modelId
+      ? model?.views?.[context.model.name]?.schema
-    model = models.find(model => model._id === modelId)
+      : model?.schema
-    schema = model?.schema
-  } else if (context.model.type === "view") {
-    const modelId = context.model.modelId
-    model = models.find(model => model._id === modelId)
-    schema = model?.views?.[context.model.name]?.schema
-  } else if (context.model.type === "link") {
-    const modelId = context.model.modelId
-    model = models.find(model => model._id === modelId)
-    schema = model?.schema
-  }
 
   // Avoid crashing whenever no data source has been selected
   if (!schema) {
@@ -101,7 +91,6 @@ const contextToBindables = (models, walkResult) => context => {
     if (fieldSchema.type === "link") {
       runtimeBoundKey = `${key}_count`
     }
-
     return {
       type: "context",
       fieldSchema,
@@ -110,6 +99,8 @@ const contextToBindables = (models, walkResult) => context => {
       runtimeBinding: `${contextParentPath}data.${runtimeBoundKey}`,
       // how the binding expressions looks to the user of the builder
       readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
+      // model / view info
+      model: context.model,
     }
   }
 

packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte

@@ -79,7 +79,7 @@
   }
 
   function fieldOptions(field) {
-    return viewModel.schema[field].type === "string"
+    return viewModel.schema[field].type === "options"
       ? viewModel.schema[field].constraints.inclusion
       : [true, false]
   }

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

@@ -103,7 +103,6 @@
   </div>
 </div>
 <DropdownMenu
-  class="menu"
   bind:this={dropdown}
   on:click={hideDropdown}
   width="170px"

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

@@ -3,6 +3,7 @@
   import { Input, Button, Spacer, Select, ModalContent } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
   import { some } from "lodash/fp"
+  import analytics from "analytics"
 
   const CONTAINER = "@budibase/standard-components/container"
 
@@ -29,7 +30,7 @@
 
   const templateChanged = newTemplateIndex => {
     if (newTemplateIndex === undefined) return
-
+    const template = templates[newTemplateIndex]
     draftScreen = templates[newTemplateIndex].create()
     if (draftScreen.props._instanceName) {
       name = draftScreen.props._instanceName
@@ -63,6 +64,13 @@
 
     store.createScreen(draftScreen)
 
+    if (templateIndex !== undefined) {
+      const template = templates[templateIndex]
+      analytics.captureEvent("Screen Created", {
+        template: template.id || template.name,
+      })
+    }
+
     finished()
   }
 

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

@@ -1,20 +1,77 @@
 <script>
   import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
 
   export let value = ""
 
+  $: urls = getUrls()
+
   const handleBlur = () => dispatch("change", value)
+
+  // this will get urls of all screens, but only
+  // choose detail screens that are usable in the current context
+  // and substitute the :id param for the actual {{ ._id }} binding
+  const getUrls = () => {
+    const urls = [
+      ...$store.screens
+        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+
+    const bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      models: $backendUiStore.models,
+    })
+
+    const detailScreens = $store.screens.filter(screen =>
+      screen.props._component.endsWith("/rowdetail")
+    )
+
+    for (let detailScreen of detailScreens) {
+      const idBinding = bindableProperties.find(p => {
+        if (
+          p.type === "context" &&
+          p.runtimeBinding.endsWith("._id") &&
+          p.model
+        ) {
+          const modelId =
+            typeof p.model === "string" ? p.model : p.model.modelId
+          return modelId === detailScreen.props.model
+        }
+        return false
+      })
+
+      if (idBinding) {
+        urls.push({
+          name: detailScreen.props._instanceName,
+          url: detailScreen.route.replace(
+            ":id",
+            `{{ ${idBinding.runtimeBinding} }}`
+          ),
+          sort: detailScreen.props._component,
+        })
+      }
+
+      return urls
+    }
+  }
 </script>
 
 <div>
   <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
     <option value="" />
-    {#each $store.allScreens as screen}
+    {#each urls as url}
-      <option value={screen.route}>{screen.props._instanceName}</option>
+      <option value={url.url}>{url.name}</option>
     {/each}
   </DataList>
 </div>

packages/builder/src/components/userInterface/pagesParsing/createProps.js

@@ -1,4 +1,4 @@
-import { isString, isUndefined } from "lodash/fp"
+import { isString, isUndefined, cloneDeep } from "lodash/fp"
 import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"
@@ -83,13 +83,13 @@ const parsePropDef = propDef => {
   if (isString(propDef)) {
     if (!TYPE_MAP[propDef]) return error(`Type ${propDef} is not recognised.`)
 
-    return TYPE_MAP[propDef].default
+    return cloneDeep(TYPE_MAP[propDef].default)
   }
 
   const type = TYPE_MAP[propDef.type]
   if (!type) return error(`Type ${propDef.type} is not recognised.`)
 
-  return propDef.default
+  return cloneDeep(propDef.default)
 }
 
 export const arrayElementComponentName = (parentComponentName, arrayPropName) =>

packages/builder/src/components/userInterface/pagesParsing/types.js

@@ -10,7 +10,6 @@ export const TYPE_MAP = {
   },
   options: {
     default: [],
-    options: [],
   },
   event: {
     default: [],

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

@@ -313,6 +313,43 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Grid",
+          _component: "@budibase/standard-components/datagrid",
+          description:
+            "a datagrid component with functionality to add, remove and edit rows.",
+          icon: "ri-file-list-line",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Source",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
+              {
+                label: "Editable",
+                key: "editable",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Theme",
+                key: "theme",
+                control: OptionSelect,
+                options: [
+                  "alpine",
+                  "alpine-dark",
+                  "balham",
+                  "balham-dark",
+                  "material",
+                ],
+                placeholder: "alpine",
+              },
+            ],
+          },
+          children: [],
+        },
         {
           _component: "@budibase/standard-components/stackedlist",
           name: "Stacked List",
@@ -356,7 +393,7 @@ export default {
               {
                 label: "destinationUrl",
                 key: "destinationUrl",
-                control: Input,
+                control: ScreenSelect,
                 placeholder: "/table/_id",
               },
             ],
@@ -405,7 +442,7 @@ export default {
                   {
                     label: "Link Url",
                     key: "linkUrl",
-                    control: Input,
+                    control: ScreenSelect,
                     placeholder: "Link URL",
                   },
                   {
@@ -480,7 +517,7 @@ export default {
                   {
                     label: "Link Url",
                     key: "linkUrl",
-                    control: Input,
+                    control: ScreenSelect,
                     placeholder: "Link URL",
                   },
                   {

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

@@ -1,75 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "Basic",
-      "components": [
-        {
-          "component": "Container",
-          "description": "This component contains things within itself",
-          "icon": "ri-layout-row-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Text",
-          "description": "This is a simple text component",
-          "icon": "ri-t-box-fill",
-          "commonProps": {
-          },
-          "type": [
-            {
-              "_component": "@budibase/standard-components/header",
-              "name": "Headline",
-              "icon": "headline",
-              "props": {
-                "type": {
-                  "type": "options",
-                  "options": [
-                    "h1",
-                    "h2"
-                  ],
-                  "default": "h1"
-                }
-              }
-            },
-            {
-              "_component": "@budibase/standard-components/text",
-              "name": "Paragraph",
-              "icon": "paragraph",
-              "props": {
-              }
-            }
-          ]
-        },
-        {
-          "component": "Button",
-          "description": "A basic html button that is ready for styling",
-          "icon": "ri-radio-button-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Icon",
-          "description": "A basic component for displaying icons",
-          "icon": "ri-sun-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Avatar",
-          "description": "A basic component for rendering an avatar",
-          "icon": "ri-user-smile-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Link",
-          "description": "A basic link component for internal and external links",
-          "icon": "ri-link",
-          "commonProps": {},
-          "type": []
-        }
-      ]
-    }
-  ]
-}

packages/builder/src/constants/backend/index.js

@@ -15,7 +15,7 @@ export const FIELDS = {
     type: "options",
     constraints: {
       type: "string",
-      presence: { allowEmpty: true },
+      presence: false,
       inclusion: [],
     },
   },
@@ -67,7 +67,7 @@ export const FIELDS = {
     type: "link",
     constraints: {
       type: "array",
-      presence: { allowEmpty: true },
+      presence: false,
     },
   },
 }

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

@@ -33,6 +33,7 @@ exports.save = async function(ctx) {
     views: {},
     ...rest,
   }
+  let renameDocs = []
 
   // if the model obj had an _id then it will have been retrieved
   const oldModel = ctx.preExisting
@@ -49,14 +50,11 @@ exports.save = async function(ctx) {
         include_docs: true,
       })
     )
-
+    renameDocs = records.rows.map(({ doc }) => {
-    const docs = records.rows.map(({ doc }) => {
       doc[_rename.updated] = doc[_rename.old]
       delete doc[_rename.old]
       return doc
     })
-
-    await db.bulkDocs(docs)
     delete modelToSave._rename
   }
 
@@ -69,9 +67,6 @@ exports.save = async function(ctx) {
     modelView.schema = modelToSave.schema
   }
 
-  const result = await db.post(modelToSave)
-  modelToSave._rev = result.rev
-
   // update linked records
   await linkRecords.updateLinks({
     instanceId,
@@ -82,6 +77,14 @@ exports.save = async function(ctx) {
     oldModel: oldModel,
   })
 
+  // don't perform any updates until relationships have been
+  // checked by the updateLinks function
+  if (renameDocs.length !== 0) {
+    await db.bulkDocs(renameDocs)
+  }
+  const result = await db.post(modelToSave)
+  modelToSave._rev = result.rev
+
   ctx.eventEmitter &&
     ctx.eventEmitter.emitModel(`model:save`, instanceId, modelToSave)
 
@@ -105,11 +108,8 @@ exports.save = async function(ctx) {
 exports.destroy = async function(ctx) {
   const instanceId = ctx.user.instanceId
   const db = new CouchDB(instanceId)
-
   const modelToDelete = await db.get(ctx.params.modelId)
 
-  await db.remove(modelToDelete)
-
   // Delete all records for that model
   const records = await db.allDocs(
     getRecordParams(ctx.params.modelId, null, {
@@ -117,7 +117,7 @@ exports.destroy = async function(ctx) {
     })
   )
   await db.bulkDocs(
-    records.rows.map(record => ({ _id: record.id, _deleted: true }))
+    records.rows.map(record => ({ ...record.doc, _deleted: true }))
   )
 
   // update linked records
@@ -127,6 +127,9 @@ exports.destroy = async function(ctx) {
     model: modelToDelete,
   })
 
+  // don't remove the table itself until very end
+  await db.remove(modelToDelete)
+
   ctx.eventEmitter &&
     ctx.eventEmitter.emitModel(`model:delete`, instanceId, modelToDelete)
   ctx.status = 200

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

@@ -68,64 +68,11 @@ exports.patch = async function(ctx) {
 }
 
 exports.save = async function(ctx) {
-  const instanceId = ctx.user.instanceId
+  if (ctx.request.body.type === "delete") {
-  const db = new CouchDB(instanceId)
+    await bulkDelete(ctx)
-  let record = ctx.request.body
+  } else {
-  record.modelId = ctx.params.modelId
+    await saveRecord(ctx)
-
-  if (!record._rev && !record._id) {
-    record._id = generateRecordID(record.modelId)
   }
-
-  // if the record obj had an _id then it will have been retrieved
-  const existingRecord = ctx.preExisting
-
-  const model = await db.get(record.modelId)
-
-  record = coerceRecordValues(record, model)
-
-  const validateResult = await validate({
-    record,
-    model,
-  })
-
-  if (!validateResult.valid) {
-    ctx.status = 400
-    ctx.body = {
-      status: 400,
-      errors: validateResult.errors,
-    }
-    return
-  }
-
-  // make sure link records are up to date
-  record = await linkRecords.updateLinks({
-    instanceId,
-    eventType: linkRecords.EventType.RECORD_SAVE,
-    record,
-    modelId: record.modelId,
-    model,
-  })
-
-  if (existingRecord) {
-    const response = await db.put(record)
-    record._rev = response.rev
-    record.type = "record"
-    ctx.body = record
-    ctx.status = 200
-    ctx.message = `${model.name} updated successfully.`
-    return
-  }
-
-  record.type = "record"
-  const response = await db.post(record)
-  record._rev = response.rev
-
-  ctx.eventEmitter &&
-    ctx.eventEmitter.emitRecord(`record:save`, instanceId, record, model)
-  ctx.body = record
-  ctx.status = 200
-  ctx.message = `${model.name} created successfully`
 }
 
 exports.fetchView = async function(ctx) {
@@ -349,3 +296,87 @@ const TYPE_TRANSFORM_MAP = {
     false: false,
   },
 }
+
+async function bulkDelete(ctx) {
+  const instanceId = ctx.user.instanceId
+  const { records } = ctx.request.body
+  const db = new CouchDB(ctx.user.instanceId)
+
+  await db.bulkDocs(
+    records.map(
+      record => ({ ...record, _deleted: true }),
+      err => {
+        if (err) {
+          ctx.status = 500
+        } else {
+          records.forEach(record => {
+            ctx.eventEmitter &&
+              ctx.eventEmitter.emitRecord(`record:delete`, instanceId, record)
+          })
+          ctx.status = 200
+        }
+      }
+    )
+  )
+}
+
+async function saveRecord(ctx) {
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
+  let record = ctx.request.body
+  record.modelId = ctx.params.modelId
+
+  if (!record._rev && !record._id) {
+    record._id = generateRecordID(record.modelId)
+  }
+
+  // if the record obj had an _id then it will have been retrieved
+  const existingRecord = ctx.preExisting
+
+  const model = await db.get(record.modelId)
+
+  record = coerceRecordValues(record, model)
+
+  const validateResult = await validate({
+    record,
+    model,
+  })
+
+  if (!validateResult.valid) {
+    ctx.status = 400
+    ctx.body = {
+      status: 400,
+      errors: validateResult.errors,
+    }
+    return
+  }
+
+  // make sure link records are up to date
+  record = await linkRecords.updateLinks({
+    instanceId,
+    eventType: linkRecords.EventType.RECORD_SAVE,
+    record,
+    modelId: record.modelId,
+    model,
+  })
+
+  if (existingRecord) {
+    const response = await db.put(record)
+    record._rev = response.rev
+    record.type = "record"
+    ctx.body = record
+    ctx.status = 200
+    ctx.message = `${model.name} updated successfully.`
+    return
+  }
+
+  record.type = "record"
+  const response = await db.post(record)
+  record._rev = response.rev
+
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitRecord(`record:save`, instanceId, record, model)
+  ctx.body = record
+  ctx.status = 200
+  ctx.message = `${model.name} created successfully`
+}

packages/server/src/db/linkedRecords/LinkController.js

@@ -161,7 +161,7 @@ class LinkController {
           })
         // now add the docs to be deleted to the bulk operation
         operations.push(...toDeleteDocs)
-        // replace this field with a simple entry to denote there are links
+        // remove the field from this row, link doc will be added to record on way out
         delete record[fieldName]
       }
     }
@@ -234,8 +234,16 @@ class LinkController {
     for (let fieldName of Object.keys(schema)) {
       const field = schema[fieldName]
       if (field.type === "link") {
+        // handle this in a separate try catch, want
+        // the put to bubble up as an error, if can't update
+        // table for some reason
+        let linkedModel
+        try {
+          linkedModel = await this._db.get(field.modelId)
+        } catch (err) {
+          continue
+        }
         // create the link field in the other model
-        const linkedModel = await this._db.get(field.modelId)
         linkedModel.schema[field.fieldName] = {
           name: field.fieldName,
           type: "link",

packages/server/src/db/linkedRecords/index.js

@@ -42,6 +42,7 @@ exports.updateLinks = async function({
   model,
   oldModel,
 }) {
+  const baseReturnObj = record == null ? model : record
   if (instanceId == null) {
     throw "Cannot operate without an instance ID."
   }
@@ -50,12 +51,16 @@ exports.updateLinks = async function({
     arguments[0].modelId = model._id
   }
   let linkController = new LinkController(arguments[0])
-  if (
+  try {
-    !(await linkController.doesModelHaveLinkedFields()) &&
+    if (
-    (oldModel == null ||
+      !(await linkController.doesModelHaveLinkedFields()) &&
-      !(await linkController.doesModelHaveLinkedFields(oldModel)))
+      (oldModel == null ||
-  ) {
+        !(await linkController.doesModelHaveLinkedFields(oldModel)))
-    return record
+    ) {
+      return baseReturnObj
+    }
+  } catch (err) {
+    return baseReturnObj
   }
   switch (eventType) {
     case EventType.RECORD_SAVE:

packages/server/src/db/utils.js

@@ -57,21 +57,26 @@ exports.generateModelID = () => {
 
 /**
  * Gets the DB allDocs/query params for retrieving a record.
- * @param {string} modelId The model in which the records have been stored.
+ * @param {string|null} modelId The model in which the records have been stored.
  * @param {string|null} recordId The ID of the record which is being specifically queried for. This can be
  * left null to get all the records in the model.
  * @param {object} otherProps Any other properties to add to the request.
  * @returns {object} Parameters which can then be used with an allDocs request.
  */
-exports.getRecordParams = (modelId, recordId = null, otherProps = {}) => {
+exports.getRecordParams = (
+  modelId = null,
+  recordId = null,
+  otherProps = {}
+) => {
   if (modelId == null) {
-    throw "Cannot build params for records without a model ID"
+    return getDocParams(DocumentTypes.RECORD, null, otherProps)
+  } else {
+    const endOfKey =
+      recordId == null
+        ? `${modelId}${SEPARATOR}`
+        : `${modelId}${SEPARATOR}${recordId}`
+    return getDocParams(DocumentTypes.RECORD, endOfKey, otherProps)
   }
-  const endOfKey =
-    recordId == null
-      ? `${modelId}${SEPARATOR}`
-      : `${modelId}${SEPARATOR}${recordId}`
-  return getDocParams(DocumentTypes.RECORD, endOfKey, otherProps)
 }
 
 /**

packages/standard-components/components.json

@@ -199,9 +199,15 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"icon": "string",	
+			"icon": "string",
-			"size": {"type": "string", "default": "fa-lg"},
+			"size": {
-			"color": {"type": "string", "default": "#000"}
+				"type": "string",
+				"default": "fa-lg"
+			},
+			"color": {
+				"type": "string",
+				"default": "#000"
+			}
 		}
 	},
 	"datatable": {
@@ -215,6 +221,25 @@
 			"color": "string"
 		}
 	},
+	"datagrid": {
+		"description": "a datagrid component with functionality to add, remove and edit rows.",
+		"data": true,
+		"props": {
+			"datasource": "models",
+			"editable": "bool",
+			"theme": {
+				"type": "options",
+				"default": "alpine",
+				"options": [
+					"alpine",
+					"alpine-dark",
+					"balham",
+					"balham-dark",
+					"material"
+				]
+			}
+		}
+	},
 	"dataform": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
@@ -538,19 +563,34 @@
 			"height": "number",
 			"axisTimeCombinations": "string",
 			"color": "string",
-			"grid": {"type":"string", "default": "horizontal"},
+			"grid": {
+				"type": "string",
+				"default": "horizontal"
+			},
 			"aspectRatio": "number",
 			"dateLabel": "string",
-			"isAnimated": {"type": "bool", "default": true},
+			"isAnimated": {
+				"type": "bool",
+				"default": true
+			},
 			"lineCurve": "string",
 			"locale": "string",
 			"numberFormat": "string",
-			"shouldShowAllDataPoints": {"type": "bool", "default": true},
+			"shouldShowAllDataPoints": {
+				"type": "bool",
+				"default": true
+			},
 			"topicLabel": "string",
 			"valueLabel": "string",
-			"xAxisValueType": {"type":"string", "default": "date"},
+			"xAxisValueType": {
+				"type": "string",
+				"default": "date"
+			},
 			"xAxisScale": "string",
-			"xAxisFormat": {"type":"string", "default": "custom"},
+			"xAxisFormat": {
+				"type": "string",
+				"default": "custom"
+			},
 			"xAxisCustomFormat": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",

packages/standard-components/package.json

@@ -37,13 +37,16 @@
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.41.0",
+    "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
+    "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",
+    "flatpickr": "^4.6.6",
     "fusioncharts": "^3.15.1-sr.1",
     "lodash.debounce": "^4.0.8",
-    "svelte-flatpickr": "^2.4.0",
+    "svelte-flatpickr": "^3.1.0",
     "svelte-fusioncharts": "^1.0.0"
   }
 }

packages/standard-components/rollup.config.js

@@ -2,6 +2,7 @@ import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import postcss from "rollup-plugin-postcss"
+import { terser } from "rollup-plugin-terser"
 
 const lodash_fp_exports = ["isEmpty"]
 
@@ -16,6 +17,7 @@ export default {
     },
   ],
   plugins: [
+    terser(),
     postcss({
       plugins: [],
     }),

packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  import AttachmentList from "../../attachments/AttachmentList.svelte"
+  //   import Modal from "./Modal.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  let anchor
+  let dropdown
+
+  export let files
+</script>
+
+<AttachmentList {files} />
+<!-- <div bind:this={anchor}>
+  <Button text small on:click={dropdown.show}>
+    <Icon name="edit" />
+  </Button>
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <h5>Edit Attachment(s)</h5>
+   <Modal
+        {_bb}
+        {model}
+        onClosed={dropdown.hide}
+        on:newRecord={() => dispatch('newRecord')} />
+ </DropdownMenu> -->
+
+<!-- <style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    place-items: start center;
+  }
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+</style> -->

packages/standard-components/src/DataGrid/Component.svelte

@@ -0,0 +1,151 @@
+<script>
+  // Import valueSetters and custom renderers
+  import { number } from "./valueSetters"
+  import { getRenderer } from "./customRenderer"
+
+  // These maps need to be set up to handle whatever types that are used in the models.
+  const setters = new Map([["number", number]])
+
+  import fetchData from "../fetchData.js"
+  import { isEmpty } from "lodash/fp"
+  import { onMount } from "svelte"
+
+  import AgGrid from "@budibase/svelte-ag-grid"
+  import CreateRowButton from "./CreateRow/Button.svelte"
+  import { TextButton as DeleteButton, Icon } from "@budibase/bbui"
+
+  export let _bb
+  export let datasource = {}
+  export let editable
+  export let theme = 'alpine'
+
+  let dataLoaded = false
+  let data
+  let columnDefs
+  let selectedRows = []
+  let model
+  let options = {
+    defaultColDef: {
+      flex: 1,
+      minWidth: 150,
+      filter: true,
+    },
+    rowSelection: editable ? "multiple" : false,
+    suppressRowClickSelection: !editable,
+  }
+
+  onMount(async () => {
+    if (datasource.modelId) {
+      const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`)
+      model = await jsonModel.json()
+      const { schema } = model
+      if (!isEmpty(datasource)) {
+        data = await fetchData(datasource)
+        columnDefs = Object.keys(schema).map((key, i) => {
+          return {
+            headerCheckboxSelection: i === 0 && editable,
+            checkboxSelection: i === 0 && editable,
+            valueSetter: setters.get(schema[key].type),
+            headerName: key.charAt(0).toUpperCase() + key.slice(1),
+            field: key,
+            hide: shouldHideField(key),
+            sortable: true,
+            editable: editable,
+            cellRenderer: getRenderer(schema[key], editable),
+            autoHeight: true,
+          }
+        })
+      }
+      dataLoaded = true
+    }
+  })
+
+  const isEditable = type =>
+    type !== "boolean" &&
+    type !== "options" &&
+    // type !== "datetime" &&
+     type !== "link" &&
+    type !== "attachment" 
+
+  const shouldHideField = name => {
+    if (name.startsWith("_")) return true
+    // always 'record'
+    if (name === "type") return true
+    // tables are always tied to a single modelId, this is irrelevant
+    if (name === "modelId") return true
+
+    return false
+  }
+
+  const handleNewRecord = async () => {
+    data = await fetchData(datasource)
+  }
+
+  const handleUpdate = ({ detail }) => {
+    data[detail.row] = detail.data
+    updateRecord(detail.data)
+  }
+
+  const updateRecord = async record => {
+    const response = await _bb.api.patch(
+      `/api/${record.modelId}/records/${record._id}`,
+      record
+    )
+    const json = await response.json()
+  }
+
+  const deleteRecords = async () => {
+    const response = await _bb.api.post(`/api/${datasource.name}/records`, {
+      records: selectedRows,
+      type: "delete",
+    })
+    data = data.filter(record => !selectedRows.includes(record))
+    selectedRows = []
+  }
+</script>
+
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
+</svelte:head>
+
+<div class="container">
+  {#if dataLoaded}
+    {#if editable}
+      <div class="controls">
+        <CreateRowButton {_bb} {model} on:newRecord={handleNewRecord} />
+        {#if selectedRows.length > 0}
+          <DeleteButton text small on:click={deleteRecords}>
+            <Icon name="addrow" />
+            Delete {selectedRows.length} row(s)
+          </DeleteButton>
+        {/if}
+      </div>
+    {/if}
+    <AgGrid
+      {theme}
+      {options}
+      {data}
+      {columnDefs}
+      on:update={handleUpdate}
+      on:select={({ detail }) => (selectedRows = detail)} />
+  {/if}
+</div>
+
+<style>
+  .container {
+    --grid-height: 800px;
+  }
+  .container :global(form) {
+    display: grid;
+    grid-template-columns: repeat(2);
+  }
+  .controls {
+    margin-bottom: var(--spacing-s);
+    display: grid;
+    grid-gap: var(--spacing-s);
+    grid-template-columns: auto auto;
+    justify-content: start;
+  }
+</style>

packages/standard-components/src/DataGrid/CreateRow/Button.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  import Modal from "./Modal.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  let anchor
+  let dropdown
+
+  export let _bb, model
+</script>
+
+<div bind:this={anchor}>
+  <Button text small on:click={dropdown.show}>
+    <Icon name="addrow" />
+    Create New Row
+  </Button>
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <h5>Add New Row</h5>
+  <Modal
+    {_bb}
+    {model}
+    onClosed={dropdown.hide}
+    on:newRecord={() => dispatch('newRecord')} />
+</DropdownMenu>
+
+<style>
+  div {
+    display: grid;
+  }
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+</style>

packages/standard-components/src/DataGrid/CreateRow/Modal.svelte

@@ -0,0 +1,151 @@
+<script>
+  import { onMount, createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import { Button, Label, DatePicker } from "@budibase/bbui"
+  import Dropzone from "../../attachments/Dropzone.svelte"
+  import debounce from "lodash.debounce"
+  const dispatch = createEventDispatcher()
+
+  const DEFAULTS_FOR_TYPE = {
+    string: "",
+    boolean: false,
+    number: null,
+    link: [],
+  }
+
+  export let _bb
+  export let model
+  export let onClosed
+
+  let record = { modelId: model._id }
+  let store = _bb.store
+  let schema = model.schema
+  let saved = false
+  let recordId
+  let isNew = true
+  let errors = {}
+
+  $: fields = schema ? Object.keys(schema) : []
+
+  $: errorMessages = Object.entries(errors).map(
+    ([field, message]) => `${field} ${message}`
+  )
+
+  const save = debounce(async () => {
+    for (let field of fields) {
+      // Assign defaults to empty fields to prevent validation issues
+      if (!(field in record)) {
+        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
+      }
+    }
+
+    const SAVE_RECORD_URL = `/api/${model._id}/records`
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
+    const json = await response.json()
+
+    if (response.status === 200) {
+      store.update(state => {
+        state[model._id] = state[model._id]
+          ? [...state[model._id], json]
+          : [json]
+        return state
+      })
+
+      errors = {}
+
+      // wipe form, if new record, otherwise update
+      // model to get new _rev
+      record = isNew ? { modelId: model._id } : json
+
+      onClosed()
+      dispatch("newRecord")
+    }
+
+    if (response.status === 400) {
+      errors = json.errors
+    }
+  })
+
+  onMount(async () => {
+    const routeParams = _bb.routeParams()
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+      return
+    }
+
+    const GET_RECORD_URL = `/api/${model._id}/records/${recordId}`
+    const response = await _bb.api.get(GET_RECORD_URL)
+    const json = await response.json()
+    record = json
+  })
+</script>
+
+<div class="actions">
+  {#each errorMessages as error}
+    <p class="error">{error}</p>
+  {/each}
+  <form on:submit|preventDefault>
+    {#each fields as field}
+      <div class="form-item">
+        <Label small forAttr={'form-stacked-text'}>{field}</Label>
+        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
+          <select bind:value={record[field]}>
+            {#each schema[field].constraints.inclusion as opt}
+              <option>{opt}</option>
+            {/each}
+          </select>
+        {:else if schema[field].type === 'datetime'}
+          <DatePicker bind:value={record[field]} />
+        {:else if schema[field].type === 'boolean'}
+          <input class="input" type="checkbox" bind:checked={record[field]} />
+        {:else if schema[field].type === 'number'}
+          <input class="input" type="number" bind:value={record[field]} />
+        {:else if schema[field].type === 'string'}
+          <input class="input" type="text" bind:value={record[field]} />
+        {:else if schema[field].type === 'attachment'}
+          <Dropzone bind:files={record[field]} />
+        {/if}
+      </div>
+      <hr />
+    {/each}
+  </form>
+</div>
+<footer>
+  <div class="button-margin-3">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+  </div>
+  <div class="button-margin-4">
+    <Button primary on:click={save}>Save</Button>
+  </div>
+</footer>
+
+<style>
+  .actions {
+    padding: var(--spacing-l) var(--spacing-xl);
+  }
+
+  footer {
+    padding: 20px 30px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+    background: var(--grey-1);
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .button-margin-3 {
+    grid-column-start: 3;
+    display: grid;
+  }
+
+  .button-margin-4 {
+    grid-column-start: 4;
+    display: grid;
+  }
+</style>

packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { DatePicker } from "@budibase/bbui"
+</script>
+
+<DatePicker />

packages/standard-components/src/DataGrid/Select/Wrapper.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let options
+
+  $: dispatch("change", value)
+</script>
+
+<Select label={false} bind:value>
+  <option value="">Choose an option</option>
+  {#each options as option}
+    <option value={option}>{option}</option>
+  {/each}
+</Select>

packages/standard-components/src/DataGrid/customRenderer.js

@@ -0,0 +1,117 @@
+// Custom renderers to handle special types
+// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
+
+import AttachmentCell from "./AttachmentCell/Button.svelte"
+import Select from "./Select/Wrapper.svelte"
+import DatePicker from "./DateTime/Wrapper.svelte"
+
+const renderers = new Map([
+  ["boolean", booleanRenderer],
+  ["attachment", attachmentRenderer],
+  ["options", optionsRenderer],
+  ["link", linkedRecordRenderer],
+])
+
+export function getRenderer({ type, constraints }, editable) {
+  if (renderers.get(type)) {
+    return renderers.get(type)(constraints, editable)
+  } else {
+    return false
+  }
+}
+
+/* eslint-disable no-unused-vars */
+function booleanRenderer(constraints, editable) {
+  return params => {
+    const toggle = e => {
+      params.value = !params.value
+      params.setValue(e.currentTarget.checked)
+    }
+    let input = document.createElement("input")
+    input.style.display = "grid"
+    input.style.placeItems = "center"
+    input.style.height = "100%"
+    input.type = "checkbox"
+    input.checked = params.value
+    if (editable) {
+      input.addEventListener("click", toggle)
+    } else {
+      input.disabled = true
+    }
+
+    return input
+  }
+}
+/* eslint-disable no-unused-vars */
+function attachmentRenderer(constraints, editable) {
+  return params => {
+    const container = document.createElement("div")
+
+    const attachmentInstance = new AttachmentCell({
+      target: container,
+      props: {
+        files: params.value || [],
+      },
+    })
+
+    return container
+  }
+}
+/* eslint-disable no-unused-vars */
+function dateRenderer(constraints, editable) {
+  return function(params) {
+    const container = document.createElement("div")
+    const toggle = e => {
+      params.setValue(e.detail[0][0])
+    }
+
+    // Options need to be passed in with minTime and maxTime! Needs bbui update.
+
+    const datePickerInstance = new DatePicker({
+      target: container,
+      props: {
+        value: params.value,
+      },
+    })
+
+    return container
+  }
+}
+
+function optionsRenderer({ inclusion }, editable) {
+  return params => {
+    if (!editable) return params.value
+    const container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.placeItems = "center"
+    container.style.height = "100%"
+    const change = e => {
+      params.setValue(e.detail)
+    }
+
+    const selectInstance = new Select({
+      target: container,
+      props: {
+        value: params.value,
+        options: inclusion,
+      },
+    })
+
+    selectInstance.$on("change", change)
+
+    return container
+  }
+}
+/* eslint-disable no-unused-vars */
+function linkedRecordRenderer(constraints, editable) {
+  return params => {
+    let container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.placeItems = "center"
+    container.style.height = "100%"
+
+    container.innerText = params.value.length || 0
+
+    return container
+  }
+}

packages/standard-components/src/DataGrid/valueSetters.js

@@ -0,0 +1,6 @@
+// https://www.ag-grid.com/javascript-grid-value-setters/
+// These handles values and makes sure they adhere to the data type provided by the model
+export const number = params => {
+  params.data[params.colDef.field] = parseFloat(params.newValue)
+  return true
+}

packages/standard-components/src/attachments/AttachmentList.svelte

@@ -11,7 +11,7 @@
     <a href={file.url} target="_blank">
       <div class="file">
         {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-          <img {width} {height} src={file.url} />
+          <img {width} {height} src={file.url} alt="preview of {file.name}" />
         {:else}
           <i class="far fa-file" />
         {/if}
@@ -57,7 +57,7 @@
   }
 
   span {
-    width: 75px;
+    width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
   }

packages/standard-components/src/index.js

@@ -15,6 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
+export { default as datagrid } from "./DataGrid/Component.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"

yarn.lock

@@ -4007,6 +4007,13 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rollup-plugin-replace@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
@@ -4393,9 +4400,10 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-svelte@^3.18.1:
+svelte@^3.28.0:
-  version "3.18.1"
+  version "3.29.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.18.1.tgz#db0f82cc46394ca8c9a9d183995e1ebfeea3bdd0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.29.0.tgz#80acac4254341ad8f3301e5ef03f4127ea967d96"
+  integrity sha512-f+A65eyOQ5ujETLy+igNXtlr6AEjAQLYd1yJE1VwNiXMQO5Z/Vmiy3rL+zblV/9jd7rtTTWqO1IcuXsP2Qv0OA==
 
 table@^5.2.3:
   version "5.4.6"