Add button action allowing for export of client row selection

4 years ago · ea63b9b065
14 changed files with 155 additions and 24 deletions
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -331,7 +331,9 @@ const getSelectedRowsBindings = asset => {
    bindings = bindings.concat(
      tables.map(table => ({
        type: "context",
-        runtimeBinding: `${safeState}.${makePropSafe(table._id)}`,
+        runtimeBinding: `${safeState}.${makePropSafe(table._id)}.${makePropSafe(
+          "selectedRows"
+        )}`,
        readableBinding: `${table._instanceName}.Selected rows`,
      }))
    )
@ -343,7 +345,9 @@ const getSelectedRowsBindings = asset => {
    bindings = bindings.concat(
      tableBlocks.map(block => ({
        type: "context",
-        runtimeBinding: `${safeState}.${makePropSafe(block._id + "-table")}`,
+        runtimeBinding: `${safeState}.${makePropSafe(
+          block._id + "-table"
+        )}.${makePropSafe("selectedRows")}`,
        readableBinding: `${block._instanceName}.Selected rows`,
      }))
    )
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExportData.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ExportData.svelte
@ -0,0 +1,71 @@
+<script>
+  import { Label, Select, Body } from "@budibase/bbui"
+  import { tables } from "stores/backend"
+  import { onMount } from "svelte"
+
+  export let parameters
+  $: tableOptions = $tables.list || []
+
+  const FORMATS = [
+    {
+      label: "CSV",
+      value: "csv",
+    },
+    {
+      label: "JSON",
+      value: "json",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "csv"
+    }
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Choose the table that you would like to export your row selection from.
+    <br />
+    Please ensure you have enabled row selection in the table settings
+  </Body>
+
+  <div class="params">
+    <Label small>Table</Label>
+    <Select
+      bind:value={parameters.tableId}
+      options={tableOptions}
+      getOptionLabel={option => option.name}
+      getOptionValue={option => option._id}
+    />
+
+    <Label small>Type</Label>
+    <Select bind:value={parameters.type} options={FORMATS} />
+  </div>
+</div>
+
+<style>
+  .root {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+
+  .root :global(p) {
+    line-height: 1.5;
+  }
+
+  .params {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 100px 1fr;
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@ -12,3 +12,4 @@ export { default as UpdateState } from "./UpdateState.svelte"
 export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
 export { default as DuplicateRow } from "./DuplicateRow.svelte"
 export { default as S3Upload } from "./S3Upload.svelte"
+export { default as ExportData } from "./ExportData.svelte"
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@ -80,6 +80,10 @@
          "value": "publicUrl"
        }
      ]
+    },
+    {
+      "name": "Export Data",
+      "component": "ExportData"
    }
  ]
 }
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -32,6 +32,7 @@
    "@spectrum-css/vars": "^3.0.1",
    "apexcharts": "^3.22.1",
    "dayjs": "^1.10.5",
+    "downloadjs": "1.4.7",
    "regexparam": "^1.3.0",
    "rollup-plugin-polyfill-node": "^0.8.0",
    "shortid": "^2.2.15",
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@ -42,6 +42,7 @@
  $: {
    rowSelectionStore.actions.updateSelection(
      $component.id,
+      selectedRows.length ? selectedRows[0].tableId : "",
      selectedRows.map(row => row._id)
    )
  }
--- a/packages/client/src/stores/rowSelection.js
+++ b/packages/client/src/stores/rowSelection.js
@ -1,20 +1,29 @@
-import { writable } from "svelte/store"
+import { get, writable } from "svelte/store"

 const createRowSelectionStore = () => {
  const store = writable({})

-  function updateSelection(componentId, selectedRows) {
+  function updateSelection(componentId, tableId, selectedRows) {
    store.update(state => {
-      state[componentId] = [...selectedRows]
+      state[componentId] = { tableId: tableId, selectedRows: selectedRows }
      return state
    })
  }

+  function getSelection(tableId) {
+    const selection = get(store)
+    const componentId = Object.keys(selection).find(
+      componentId => selection[componentId].tableId === tableId
+    )
+    return componentId ? selection[componentId] : {}
+  }
+
  return {
    subscribe: store.subscribe,
    set: store.set,
    actions: {
      updateSelection,
+      getSelection,
    },
  }
 }
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@ -1,4 +1,5 @@
 import { get } from "svelte/store"
+import download from "downloadjs"
 import {
  routeStore,
  builderStore,
@ -8,6 +9,7 @@ import {
  notificationStore,
  dataSourceStore,
  uploadStore,
+  rowSelectionStore,
 } from "stores"
 import { API } from "api"
 import { ActionTypes } from "constants"
@ -239,6 +241,26 @@ const s3UploadHandler = async action => {
  }
 }

+const exportDataHandler = async action => {
+  let selection = rowSelectionStore.actions.getSelection(
+    action.parameters.tableId
+  )
+  if (selection.selectedRows && selection.selectedRows.length > 0) {
+    try {
+      const data = await API.exportRows({
+        tableId: selection.tableId,
+        rows: selection.selectedRows,
+      })
+
+      download(JSON.stringify(data), `export.${action.parameters.type}`)
+    } catch (error) {
+      notificationStore.actions.error("There was an error exporting the data")
+    }
+  } else {
+    notificationStore.actions.error("Please select at least one row")
+  }
+}
+
 const handlerMap = {
  ["Save Row"]: saveRowHandler,
  ["Duplicate Row"]: duplicateRowHandler,
@ -254,6 +276,7 @@ const handlerMap = {
  ["Change Form Step"]: changeFormStepHandler,
  ["Update State"]: updateStateHandler,
  ["Upload File to S3"]: s3UploadHandler,
+  ["Export Data"]: exportDataHandler,
 }

 const confirmTextMap = {
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@ -464,6 +464,11 @@ domutils@^2.6.0:
    domelementtype "^2.2.0"
    domhandler "^4.2.0"

+downloadjs@1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=
+
 electron-to-chromium@^1.3.896:
  version "1.3.900"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.900.tgz#5be2c5818a2a012c511b4b43e87b6ab7a296d4f5"
--- a/packages/frontend-core/src/api/rows.js
+++ b/packages/frontend-core/src/api/rows.js
@ -60,4 +60,18 @@ export const buildRowEndpoints = API => ({
      },
    })
  },
+
+  /**
+   * Exports rows.
+   * @param tableId the table ID to export the rows from
+   * @param rows the array of rows to export
+   */
+  exportRows: async ({ tableId, rows }) => {
+    return await API.post({
+      url: `/api/${tableId}/rows/exportRows`,
+      body: {
+        rows,
+      },
+    })
+  },
 })
--- a/packages/server/src/api/controllers/row/external.js
+++ b/packages/server/src/api/controllers/row/external.js
@ -164,14 +164,15 @@ exports.exportRows = async ctx => {
  ctx.request.body = {
    query: {
      oneOf: {
-        [table.primaryDisplay]: ctx.request.body.map(id => breakRowIdField(id)[0])
+        [table.primaryDisplay]: ctx.request.body.map(
+          id => breakRowIdField(id)[0]
+        ),
      },
    },
  }
  return exports.search(ctx)
 }

-
 exports.fetchEnrichedRow = async ctx => {
  const id = ctx.params.rowId
  const tableId = ctx.params.tableId
--- a/packages/server/src/api/controllers/row/index.js
+++ b/packages/server/src/api/controllers/row/index.js
@ -145,5 +145,4 @@ exports.export = async function (ctx) {
  } catch (err) {
    ctx.throw(400, err)
  }
-
 }
--- a/packages/server/src/api/controllers/row/internal.js
+++ b/packages/server/src/api/controllers/row/internal.js
@ -365,7 +365,7 @@ exports.validate = async ctx => {
 exports.exportRows = async ctx => {
  const db = getAppDB()
  const table = await db.get(ctx.params.tableId)
-  const rowIds = ctx.request.body
+  const rowIds = ctx.request.body.rows
  let response = (
    await db.allDocs({
      include_docs: true,
@ -378,7 +378,6 @@ exports.exportRows = async ctx => {
  return rows
 }

-
 exports.fetchEnrichedRow = async ctx => {
  const db = getAppDB()
  const tableId = ctx.params.tableId
--- a/packages/server/src/api/routes/row.js
+++ b/packages/server/src/api/routes/row.js
@ -253,25 +253,24 @@ router
  )

  /**
- * @api {post} /api/:tableId/rows/export Export Rows
- * @apiName Export rows
- * @apiGroup rows
- * @apiPermission table write access
- * @apiDescription This API can export a number of provided rows
- *
- * @apiParam {string} tableId The ID of the table the row is to be deleted from.
- *
- * @apiParam (Body) {object[]} [rows] The row IDs which are to be exported
- *
- * @apiSuccess {object[]|object} 
- */
+   * @api {post} /api/:tableId/rows/exportRows Export Rows
+   * @apiName Export rows
+   * @apiGroup rows
+   * @apiPermission table write access
+   * @apiDescription This API can export a number of provided rows
+   *
+   * @apiParam {string} tableId The ID of the table the row is to be deleted from.
+   *
+   * @apiParam (Body) {object[]} [rows] The row IDs which are to be exported
+   *
+   * @apiSuccess {object[]|object}
+   */
  .post(
-    "/api/:tableId/rows/export",
+    "/api/:tableId/rows/exportRows",
    paramResource("tableId"),
    authorized(PermissionTypes.TABLE, PermissionLevels.WRITE),
    usage,
    rowController.export
  )

-
 module.exports = router