@budibase/frontend-core 2.23.6 → 2.23.9

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.23.6",
+  "version": "2.23.9",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.23.6",
-    "@budibase/shared-core": "2.23.6",
-    "@budibase/types": "2.23.6",
+    "@budibase/bbui": "2.23.9",
+    "@budibase/shared-core": "2.23.9",
+    "@budibase/types": "2.23.9",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
+    "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "c19bcab71d54cb614911afbb6229e9c42bde16aa"
+  "gitHead": "90609c97ad49b770b3b5b8092bb724041339e28e"
 }

package/src/api/attachments.js

@@ -61,34 +61,6 @@ export const buildAttachmentEndpoints = API => {
       })
       return { publicUrl }
     },
-
-    /**
-     * Deletes attachments from the bucket.
-     * @param keys the attachments to delete
-     * @param tableId the associated table ID
-     */
-    deleteAttachments: async ({ keys, tableId }) => {
-      return await API.post({
-        url: `/api/attachments/${tableId}/delete`,
-        body: {
-          keys,
-        },
-      })
-    },
-
-    /**
-     * Deletes attachments from the builder bucket.
-     * @param keys the attachments to delete
-     */
-    deleteBuilderAttachments: async keys => {
-      return await API.post({
-        url: `/api/attachments/delete`,
-        body: {
-          keys,
-        },
-      })
-    },
-
     /**
      * Download an attachment from a row given its column name.
      * @param datasourceId the ID of the datasource to download from

package/src/components/FilterBuilder.svelte

@@ -0,0 +1,363 @@
+<script>
+  import {
+    Body,
+    Button,
+    Combobox,
+    DatePicker,
+    Icon,
+    Input,
+    Layout,
+    Select,
+    Label,
+    Multiselect,
+  } from "@budibase/bbui"
+  import { FieldType, SearchFilterOperator } from "@budibase/types"
+  import { generate } from "shortid"
+  import { LuceneUtils, Constants } from "@budibase/frontend-core"
+  import { getContext } from "svelte"
+  import FilterUsers from "./FilterUsers.svelte"
+
+  const { OperatorOptions } = Constants
+
+  export let schemaFields
+  export let filters = []
+  export let datasource
+  export let behaviourFilters = false
+  export let allowBindings = false
+  export let filtersLabel = "Filters"
+
+  $: matchAny = filters?.find(filter => filter.operator === "allOr") != null
+  $: onEmptyFilter =
+    filters?.find(filter => filter.onEmptyFilter)?.onEmptyFilter ?? "all"
+
+  $: fieldFilters = filters.filter(
+    filter => filter.operator !== "allOr" && !filter.onEmptyFilter
+  )
+
+  const behaviourOptions = [
+    { value: "and", label: "Match all filters" },
+    { value: "or", label: "Match any filter" },
+  ]
+  const onEmptyOptions = [
+    { value: "all", label: "Return all table rows" },
+    { value: "none", label: "Return no rows" },
+  ]
+
+  const context = getContext("context")
+
+  $: fieldOptions = (schemaFields ?? [])
+    .filter(field => getValidOperatorsForType(field).length)
+    .map(field => ({
+      label: field.displayName || field.name,
+      value: field.name,
+    }))
+
+  const addFilter = () => {
+    filters = [
+      ...(filters || []),
+      {
+        id: generate(),
+        field: null,
+        operator: OperatorOptions.Equals.value,
+        value: null,
+        valueType: "Value",
+      },
+    ]
+  }
+
+  const removeFilter = id => {
+    filters = filters.filter(field => field.id !== id)
+  }
+
+  const duplicateFilter = id => {
+    const existingFilter = filters.find(filter => filter.id === id)
+    const duplicate = { ...existingFilter, id: generate() }
+    filters = [...filters, duplicate]
+  }
+
+  const onFieldChange = filter => {
+    const previousType = filter.type
+    sanitizeTypes(filter)
+    sanitizeOperator(filter)
+    sanitizeValue(filter, previousType)
+  }
+
+  const onOperatorChange = filter => {
+    sanitizeOperator(filter)
+    sanitizeValue(filter, filter.type)
+  }
+
+  const onValueTypeChange = filter => {
+    sanitizeValue(filter)
+  }
+
+  const getFieldOptions = field => {
+    const schema = schemaFields.find(x => x.name === field)
+    return schema?.constraints?.inclusion || []
+  }
+
+  const getSchema = filter => {
+    return schemaFields.find(field => field.name === filter.field)
+  }
+
+  const getValidOperatorsForType = filter => {
+    if (!filter?.field && !filter?.name) {
+      return []
+    }
+
+    return LuceneUtils.getValidOperatorsForType(
+      filter,
+      filter.field || filter.name,
+      datasource
+    )
+  }
+
+  $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
+
+  const sanitizeTypes = filter => {
+    // Update type based on field
+    const fieldSchema = schemaFields.find(x => x.name === filter.field)
+    filter.type = fieldSchema?.type
+    filter.subtype = fieldSchema?.subtype
+
+    // Update external type based on field
+    filter.externalType = getSchema(filter)?.externalType
+  }
+
+  const sanitizeOperator = filter => {
+    // Ensure a valid operator is selected
+    const operators = getValidOperatorsForType(filter).map(x => x.value)
+    if (!operators.includes(filter.operator)) {
+      filter.operator = operators[0] ?? OperatorOptions.Equals.value
+    }
+
+    // Update the noValue flag if the operator does not take a value
+    const noValueOptions = [
+      OperatorOptions.Empty.value,
+      OperatorOptions.NotEmpty.value,
+    ]
+    filter.noValue = noValueOptions.includes(filter.operator)
+  }
+
+  const sanitizeValue = (filter, previousType) => {
+    // Check if the operator allows a value at all
+    if (filter.noValue) {
+      filter.value = null
+      return
+    }
+
+    // Ensure array values are properly set and cleared
+    if (Array.isArray(filter.value)) {
+      if (filter.valueType !== "Value" || filter.type !== FieldType.ARRAY) {
+        filter.value = null
+      }
+    } else if (
+      filter.type === FieldType.ARRAY &&
+      filter.valueType === "Value"
+    ) {
+      filter.value = []
+    } else if (
+      previousType !== filter.type &&
+      (previousType === FieldType.BB_REFERENCE ||
+        filter.type === FieldType.BB_REFERENCE)
+    ) {
+      filter.value = filter.type === FieldType.ARRAY ? [] : null
+    }
+  }
+
+  function handleAllOr(option) {
+    filters = filters.filter(f => f.operator !== "allOr")
+    if (option === "or") {
+      filters.push({ operator: "allOr" })
+    }
+  }
+
+  function handleOnEmptyFilter(value) {
+    filters = filters?.filter(filter => !filter.onEmptyFilter)
+    filters.push({ onEmptyFilter: value })
+  }
+</script>
+
+<div class="container" class:mobile={$context?.device?.mobile}>
+  <Layout noPadding>
+    {#if fieldOptions?.length}
+      <Body size="S">
+        {#if !fieldFilters?.length}
+          Add your first filter expression.
+        {:else}
+          <slot name="filtering-hero-content" />
+          {#if behaviourFilters}
+            <div class="behaviour-filters">
+              <Select
+                label="Behaviour"
+                value={matchAny ? "or" : "and"}
+                options={behaviourOptions}
+                getOptionLabel={opt => opt.label}
+                getOptionValue={opt => opt.value}
+                on:change={e => handleAllOr(e.detail)}
+                placeholder={null}
+              />
+              {#if datasource?.type === "table"}
+                <Select
+                  label="When filter empty"
+                  value={onEmptyFilter}
+                  options={onEmptyOptions}
+                  getOptionLabel={opt => opt.label}
+                  getOptionValue={opt => opt.value}
+                  on:change={e => handleOnEmptyFilter(e.detail)}
+                  placeholder={null}
+                />
+              {/if}
+            </div>
+          {/if}
+        {/if}
+      </Body>
+      {#if fieldFilters?.length}
+        <div>
+          {#if filtersLabel}
+            <div class="filter-label">
+              <Label>{filtersLabel}</Label>
+            </div>
+          {/if}
+          <div class="fields" class:with-bindings={allowBindings}>
+            {#each fieldFilters as filter}
+              <Select
+                bind:value={filter.field}
+                options={fieldOptions}
+                on:change={() => onFieldChange(filter)}
+                placeholder="Column"
+              />
+              <Select
+                disabled={!filter.field}
+                options={getValidOperatorsForType(filter)}
+                bind:value={filter.operator}
+                on:change={() => onOperatorChange(filter)}
+                placeholder={null}
+              />
+              {#if allowBindings}
+                <Select
+                  disabled={filter.noValue || !filter.field}
+                  options={valueTypeOptions}
+                  bind:value={filter.valueType}
+                  on:change={() => onValueTypeChange(filter)}
+                  placeholder={null}
+                />
+              {/if}
+              {#if allowBindings && filter.field && filter.valueType === "Binding"}
+                <slot name="binding" {filter} />
+              {:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
+                <Input disabled={filter.noValue} bind:value={filter.value} />
+              {:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === SearchFilterOperator.ONE_OF)}
+                <Multiselect
+                  disabled={filter.noValue}
+                  options={getFieldOptions(filter.field)}
+                  bind:value={filter.value}
+                />
+              {:else if filter.type === FieldType.OPTIONS}
+                <Combobox
+                  disabled={filter.noValue}
+                  options={getFieldOptions(filter.field)}
+                  bind:value={filter.value}
+                />
+              {:else if filter.type === FieldType.BOOLEAN}
+                <Combobox
+                  disabled={filter.noValue}
+                  options={[
+                    { label: "True", value: "true" },
+                    { label: "False", value: "false" },
+                  ]}
+                  bind:value={filter.value}
+                />
+              {:else if filter.type === FieldType.DATETIME}
+                <DatePicker
+                  disabled={filter.noValue}
+                  enableTime={!getSchema(filter)?.dateOnly}
+                  timeOnly={getSchema(filter)?.timeOnly}
+                  bind:value={filter.value}
+                />
+              {:else if filter.type === FieldType.BB_REFERENCE}
+                <FilterUsers
+                  bind:value={filter.value}
+                  multiselect={[
+                    OperatorOptions.In.value,
+                    OperatorOptions.ContainsAny.value,
+                  ].includes(filter.operator)}
+                  disabled={filter.noValue}
+                />
+              {:else}
+                <Input disabled />
+              {/if}
+              <div class="controls">
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateFilter(filter.id)}
+                />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeFilter(filter.id)}
+                />
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      <div>
+        <Button icon="AddCircle" size="M" secondary on:click={addFilter}>
+          Add filter
+        </Button>
+      </div>
+    {:else}
+      <Body size="S">None of the table column can be used for filtering.</Body>
+    {/if}
+  </Layout>
+</div>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  .fields {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    align-items: center;
+    grid-template-columns: 1fr 120px 1fr auto auto;
+  }
+  .fields.with-bindings {
+    grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
+  }
+
+  .controls {
+    display: contents;
+  }
+
+  .container.mobile .fields {
+    grid-template-columns: 1fr;
+  }
+  .container.mobile .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-s) 0;
+    gap: var(--spacing-s);
+  }
+
+  .filter-label {
+    margin-bottom: var(--spacing-s);
+  }
+
+  .behaviour-filters {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    align-items: center;
+    grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
+  }
+</style>

package/src/components/FilterUsers.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Select, Multiselect } from "@budibase/bbui"
+  import { fetchData } from "@budibase/frontend-core"
+  import { createAPIClient } from "../api"
+
+  export let API = createAPIClient()
+  export let value = null
+  export let disabled
+  export let multiselect = false
+
+  $: fetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      limit: 100,
+    },
+  })
+
+  $: options = $fetch.rows
+
+  $: component = multiselect ? Multiselect : Select
+</script>
+
+<svelte:component
+  this={component}
+  bind:value
+  autocomplete
+  {options}
+  getOptionLabel={option => option.email}
+  getOptionValue={option => option._id}
+  {disabled}
+/>

package/src/components/grid/cells/AttachmentCell.svelte

@@ -61,14 +61,6 @@
     }
   }
 
-  const deleteAttachments = async fileList => {
-    try {
-      return await API.deleteBuilderAttachments(fileList)
-    } catch (error) {
-      return []
-    }
-  }
-
   onMount(() => {
     api = {
       focus: () => open(),
@@ -101,7 +93,6 @@
       on:change={e => onChange(e.detail)}
       maximum={maximum || schema.constraints?.length?.maximum}
       {processFiles}
-      {deleteAttachments}
       {handleFileTooLarge}
     />
   </div>

package/src/components/index.js

@@ -6,3 +6,4 @@ export { default as UserAvatars } from "./UserAvatars.svelte"
 export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
+export { default as FilterBuilder } from "./FilterBuilder.svelte"

package/src/fetch/DataFetch.js

@@ -348,8 +348,7 @@ export default class DataFetch {
    * Determine the feature flag for this datasource definition
    * @param definition
    */
-  // eslint-disable-next-line no-unused-vars
-  determineFeatureFlags(definition) {
+  determineFeatureFlags(_definition) {
     return {
       supportsSearch: false,
       supportsSort: false,