@budibase/frontend-core 2.6.17 → 2.6.19-alpha.0

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.6.17",
+  "version": "2.6.19-alpha.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "^2.6.17",
-    "@budibase/shared-core": "^2.6.17",
+    "@budibase/bbui": "2.6.19-alpha.0",
+    "@budibase/shared-core": "2.6.19-alpha.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "2a0993fe5e3cab1ec779603cc9228f824e2cea4d"
+  "gitHead": "82e867c0f5b41fe3af88333effeb88f29b8b4d23"
 }

package/src/api/groups.js

@@ -52,6 +52,23 @@ export const buildGroupsEndpoints = API => {
       })
     },
 
+    /**
+     * Gets a group users by the group id
+     */
+    getGroupUsers: async ({ id, bookmark, emailSearch }) => {
+      let url = `/api/global/groups/${id}/users?`
+      if (bookmark) {
+        url += `bookmark=${bookmark}&`
+      }
+      if (emailSearch) {
+        url += `emailSearch=${emailSearch}&`
+      }
+
+      return await API.get({
+        url,
+      })
+    },
+
     /**
      * Adds users to a group
      * @param groupId The group to update

package/src/components/Testimonial.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { Layout } from "@budibase/bbui"
+  import Bulgaria from "../../assets/bulgaria.png"
+  import Covanta from "../../assets/covanta.png"
+  import Schnellecke from "../../assets/schnellecke.png"
+
+  const testimonials = [
+    {
+      text: "Budibase was the only solution that checked all the boxes for Covanta. Covanta expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
+      name: "Charles Link",
+      role: "Senior Director, Data and Analytics",
+      image: Covanta,
+      imageSize: 105,
+    },
+    {
+      text: "Budibase was mission-critical for us and went a long way in preventing what could have become a humanitarian crisis here in Bulgaria.",
+      name: "Bozhidar Bozhanov",
+      role: "Government of Bulgaria",
+      image: Bulgaria,
+      imageSize: 49,
+    },
+    {
+      text: "Centralization of authentication, quick turnaround time for requests, integration with different database systems has given it the edge and it’s now used daily for internal development for those apps that you know you need but don’t feel value in losing days of development to reinvent the wheel.",
+      name: "Davide Lenzarini",
+      role: "IT manager",
+      image: Schnellecke,
+      imageSize: 141,
+    },
+  ]
+  const testimonial = testimonials[Math.floor(Math.random() * 3)]
+</script>
+
+<div class="testimonial">
+  <Layout noPadding gap="S">
+    <img
+      width={testimonial.imageSize}
+      alt="a-happy-budibase-user"
+      src={testimonial.image}
+    />
+    <div class="text">
+      "{testimonial.text}"
+    </div>
+    <div class="author">
+      <div class="name">{testimonial.name}</div>
+      <div class="company">{testimonial.role}</div>
+    </div>
+  </Layout>
+</div>
+
+<style>
+  .testimonial {
+    width: 380px;
+    padding: 40px;
+  }
+  .text {
+    font-size: var(--font-size-l);
+    font-style: italic;
+  }
+  .name {
+    font-weight: bold;
+    color: var(--spectrum-global-color-gray-900);
+    font-size: var(--font-size-l);
+  }
+  .company {
+    color: var(--spectrum-global-color-gray-700);
+  }
+</style>

package/src/components/TestimonialPage.svelte

@@ -1,58 +1,15 @@
 <script>
   import SplitPage from "./SplitPage.svelte"
-  import { Layout } from "@budibase/bbui"
-  import Bulgaria from "../../assets/bulgaria.png"
-  import Covanta from "../../assets/covanta.png"
-  import Schnellecke from "../../assets/schnellecke.png"
+  import Testimonial from "./Testimonial.svelte"
 
   export let enabled = true
-
-  const testimonials = [
-    {
-      text: "Budibase was the only solution that checked all the boxes for Covanta. Covanta expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
-      name: "Charles Link",
-      role: "Senior Director, Data and Analytics",
-      image: Covanta,
-      imageSize: 105,
-    },
-    {
-      text: "Budibase was mission-critical for us and went a long way in preventing what could have become a humanitarian crisis here in Bulgaria.",
-      name: "Bozhidar Bozhanov",
-      role: "Government of Bulgaria",
-      image: Bulgaria,
-      imageSize: 49,
-    },
-    {
-      text: "Centralization of authentication, quick turnaround time for requests, integration with different database systems has given it the edge and it’s now used daily for internal development for those apps that you know you need but don’t feel value in losing days of development to reinvent the wheel.",
-      name: "Davide Lenzarini",
-      role: "IT manager",
-      image: Schnellecke,
-      imageSize: 141,
-    },
-  ]
-  const testimonial = testimonials[Math.floor(Math.random() * 3)]
 </script>
 
 <SplitPage>
   <slot />
   <div class:wrapper={enabled} slot="right">
     {#if enabled}
-      <div class="testimonial">
-        <Layout noPadding gap="S">
-          <img
-            width={testimonial.imageSize}
-            alt="a-happy-budibase-user"
-            src={testimonial.image}
-          />
-          <div class="text">
-            "{testimonial.text}"
-          </div>
-          <div class="author">
-            <div class="name">{testimonial.name}</div>
-            <div class="company">{testimonial.role}</div>
-          </div>
-        </Layout>
-      </div>
+      <Testimonial />
     {/if}
   </div>
 </SplitPage>
@@ -64,20 +21,4 @@
     display: grid;
     place-items: center;
   }
-  .testimonial {
-    width: 380px;
-    padding: 40px;
-  }
-  .text {
-    font-size: var(--font-size-l);
-    font-style: italic;
-  }
-  .name {
-    font-weight: bold;
-    color: var(--spectrum-global-color-gray-900);
-    font-size: var(--font-size-l);
-  }
-  .company {
-    color: var(--spectrum-global-color-gray-700);
-  }
 </style>

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

@@ -32,6 +32,7 @@
   $: readonly =
     column.schema.autocolumn ||
     column.schema.disabled ||
+    column.schema.type === "formula" ||
     (!$config.allowEditRows && row._id)
 
   // Register this cell API if the row is focused

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

@@ -1,17 +1,22 @@
 <script>
   import dayjs from "dayjs"
   import { CoreDatePicker, Icon } from "@budibase/bbui"
+  import { onMount } from "svelte"
 
   export let value
   export let schema
   export let onChange
   export let focused = false
   export let readonly = false
+  export let api
 
-  // adding the 0- will turn a string like 00:00:00 into a valid ISO
+  let flatpickr
+  let isOpen
+
+  // Adding the 0- will turn a string like 00:00:00 into a valid ISO
   // date, but will make actual ISO dates invalid
-  $: time = new Date(`0-${value}`)
-  $: timeOnly = !isNaN(time) || schema?.timeOnly
+  $: isTimeValue = !isNaN(new Date(`0-${value}`))
+  $: timeOnly = isTimeValue || schema?.timeOnly
   $: dateOnly = schema?.dateOnly
   $: format = timeOnly
     ? "HH:mm:ss"
@@ -19,12 +24,45 @@
     ? "MMM D YYYY"
     : "MMM D YYYY, HH:mm"
   $: editable = focused && !readonly
+  $: displayValue = getDisplayValue(value, format, timeOnly, isTimeValue)
+
+  const getDisplayValue = (value, format, timeOnly, isTimeValue) => {
+    if (!value) {
+      return ""
+    }
+    // Parse full date strings
+    if (!timeOnly || !isTimeValue) {
+      return dayjs(value).format(format)
+    }
+    // Otherwise must be a time string
+    return dayjs(`0-${value}`).format(format)
+  }
+
+  // Ensure we close flatpickr when unselected
+  $: {
+    if (!focused) {
+      flatpickr?.close()
+    }
+  }
+
+  const onKeyDown = () => {
+    return isOpen
+  }
+
+  onMount(() => {
+    api = {
+      onKeyDown,
+      focus: () => flatpickr?.open(),
+      blur: () => flatpickr?.close(),
+      isActive: () => isOpen,
+    }
+  })
 </script>
 
 <div class="container">
   <div class="value">
     {#if value}
-      {dayjs(timeOnly ? time : value).format(format)}
+      {displayValue}
     {/if}
   </div>
   {#if editable}
@@ -42,6 +80,10 @@
       {timeOnly}
       time24hr
       ignoreTimezones={schema.ignoreTimezones}
+      bind:flatpickr
+      on:open={() => (isOpen = true)}
+      on:close={() => (isOpen = false)}
+      useKeyboardShortcuts={false}
     />
   </div>
 {/if}

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -1,6 +1,13 @@
 <script>
-  import { clickOutside, Menu, MenuItem, notifications } from "@budibase/bbui"
+  import {
+    clickOutside,
+    Menu,
+    MenuItem,
+    Helpers,
+    notifications,
+  } from "@budibase/bbui"
   import { getContext } from "svelte"
+  import { NewRowID } from "../lib/constants"
 
   const {
     focusedRow,
@@ -14,9 +21,11 @@
     clipboard,
     dispatch,
     focusedCellAPI,
+    focusedRowId,
   } = getContext("grid")
 
   $: style = makeStyle($menu)
+  $: isNewRow = $focusedRowId === NewRowID
 
   const makeStyle = menu => {
     return `left:${menu.left}px; top:${menu.top}px;`
@@ -36,6 +45,11 @@
       $focusedCellId = `${newRow._id}-${column}`
     }
   }
+
+  const copyToClipboard = async value => {
+    await Helpers.copyToClipboard(value)
+    notifications.success("Copied to clipboard")
+  }
 </script>
 
 {#if $menu.visible}
@@ -58,22 +72,38 @@
       </MenuItem>
       <MenuItem
         icon="Maximize"
-        disabled={!$config.allowEditRows}
+        disabled={isNewRow || !$config.allowEditRows}
         on:click={() => dispatch("edit-row", $focusedRow)}
         on:click={menu.actions.close}
       >
         Edit row in modal
       </MenuItem>
+      <MenuItem
+        icon="Copy"
+        disabled={isNewRow || !$focusedRow?._id}
+        on:click={() => copyToClipboard($focusedRow?._id)}
+        on:click={menu.actions.close}
+      >
+        Copy row _id
+      </MenuItem>
+      <MenuItem
+        icon="Copy"
+        disabled={isNewRow || !$focusedRow?._rev}
+        on:click={() => copyToClipboard($focusedRow?._rev)}
+        on:click={menu.actions.close}
+      >
+        Copy row _rev
+      </MenuItem>
       <MenuItem
         icon="Duplicate"
-        disabled={!$config.allowAddRows}
+        disabled={isNewRow || !$config.allowAddRows}
         on:click={duplicate}
       >
         Duplicate row
       </MenuItem>
       <MenuItem
         icon="Delete"
-        disabled={!$config.allowDeleteRows}
+        disabled={isNewRow || !$config.allowDeleteRows}
         on:click={deleteRow}
       >
         Delete row

package/src/components/grid/stores/rows.js

@@ -338,15 +338,11 @@ export const deriveStores = context => {
         ...state,
         [rowId]: true,
       }))
-      const newRow = { ...row, ...get(rowChangeCache)[rowId] }
-      const saved = await API.saveRow(newRow)
+      const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
 
       // Update state after a successful change
       rows.update(state => {
-        state[index] = {
-          ...newRow,
-          _rev: saved._rev,
-        }
+        state[index] = saved
         return state.slice()
       })
       rowChangeCache.update(state => {

package/src/components/index.js

@@ -1,3 +1,4 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
+export { default as Testimonial } from "./Testimonial.svelte"
 export { Grid } from "./grid"

package/src/fetch/DataFetch.js

@@ -362,13 +362,35 @@ export default class DataFetch {
       return
     }
     this.store.update($store => ({ ...$store, loading: true }))
-    const { rows, info, error } = await this.getPage()
+    const { rows, info, error, cursor } = await this.getPage()
+
+    let { cursors } = get(this.store)
+    const { pageNumber } = get(this.store)
+
+    if (!rows.length && pageNumber > 0) {
+      // If the full page is gone but we have previous pages, navigate to the previous page
+      this.store.update($store => ({
+        ...$store,
+        loading: false,
+        cursors: cursors.slice(0, pageNumber),
+      }))
+      return await this.prevPage()
+    }
+
+    const currentNextCursor = cursors[pageNumber + 1]
+    if (currentNextCursor != cursor) {
+      // If the current cursor changed, all the next pages need to be updated, so we mark them as stale
+      cursors = cursors.slice(0, pageNumber + 1)
+      cursors[pageNumber + 1] = cursor
+    }
+
     this.store.update($store => ({
       ...$store,
       rows,
       info,
       loading: false,
       error,
+      cursors,
     }))
   }
 

package/src/fetch/GroupUserFetch.js

@@ -0,0 +1,51 @@
+import { get } from "svelte/store"
+import DataFetch from "./DataFetch.js"
+import { TableNames } from "../constants"
+
+export default class GroupUserFetch extends DataFetch {
+  constructor(opts) {
+    super({
+      ...opts,
+      datasource: {
+        tableId: TableNames.USERS,
+      },
+    })
+  }
+
+  determineFeatureFlags() {
+    return {
+      supportsSearch: true,
+      supportsSort: false,
+      supportsPagination: true,
+    }
+  }
+
+  async getDefinition() {
+    return {
+      schema: {},
+    }
+  }
+
+  async getData() {
+    const { query, cursor } = get(this.store)
+    try {
+      const res = await this.API.getGroupUsers({
+        id: query.groupId,
+        emailSearch: query.emailSearch,
+        bookmark: cursor,
+      })
+
+      return {
+        rows: res?.users || [],
+        hasNextPage: res?.hasNextPage || false,
+        cursor: res?.bookmark || null,
+      }
+    } catch (error) {
+      return {
+        rows: [],
+        hasNextPage: false,
+        error,
+      }
+    }
+  }
+}

package/src/fetch/fetchData.js

@@ -6,6 +6,7 @@ import NestedProviderFetch from "./NestedProviderFetch.js"
 import FieldFetch from "./FieldFetch.js"
 import JSONArrayFetch from "./JSONArrayFetch.js"
 import UserFetch from "./UserFetch.js"
+import GroupUserFetch from "./GroupUserFetch.js"
 
 const DataFetchMap = {
   table: TableFetch,
@@ -13,6 +14,7 @@ const DataFetchMap = {
   query: QueryFetch,
   link: RelationshipFetch,
   user: UserFetch,
+  groupUser: GroupUserFetch,
 
   // Client specific datasource types
   provider: NestedProviderFetch,