@budibase/frontend-core 2.6.15 → 2.6.16-alpha.1

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.6.15",
+  "version": "2.6.16-alpha.1",
   "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.15",
-    "@budibase/shared-core": "^2.6.15",
+    "@budibase/bbui": "2.6.16-alpha.1",
+    "@budibase/shared-core": "2.6.16-alpha.1",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "f66535137bdbfa0e3a4d9fca8e738a6845beeafb"
+  "gitHead": "f117256d4e83d59b5ac23b0070ee25591e8f6d93"
 }

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/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,12 +1,17 @@
 <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
+
+  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
@@ -19,6 +24,26 @@
     ? "MMM D YYYY"
     : "MMM D YYYY, HH:mm"
   $: editable = focused && !readonly
+
+  // 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">
@@ -42,6 +67,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/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,