Update backend export popover to be line with new popover structure

packages/builder/src/components/backend/DataTable/ModelDataTable.svelte

@@ -3,6 +3,7 @@
   import CreateRowButton from "./buttons/CreateRowButton.svelte"
   import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
   import CreateViewButton from "./buttons/CreateViewButton.svelte"
+  import ExportButton from "./buttons/ExportButton.svelte"
   import * as api from "./api"
   import Table from "./Table.svelte"
 
@@ -10,6 +11,10 @@
 
   $: title = $backendUiStore.selectedModel.name
   $: schema = $backendUiStore.selectedModel.schema
+  $: modelView = {
+    schema,
+    name: $backendUiStore.selectedView.name,
+  }
 
   // Fetch records for specified model
   $: {
@@ -26,5 +31,6 @@
   {#if Object.keys(schema).length > 0}
     <CreateRowButton />
     <CreateViewButton />
+    <ExportButton view={modelView} />
   {/if}
 </Table>

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -4,6 +4,7 @@
   import CalculateButton from "./buttons/CalculateButton.svelte"
   import GroupByButton from "./buttons/GroupByButton.svelte"
   import FilterButton from "./buttons/FilterButton.svelte"
+  import ExportButton from "./buttons/ExportButton.svelte"
 
   export let view = {}
 
@@ -39,4 +40,5 @@
   {#if view.calculation}
     <GroupByButton {view} />
   {/if}
+  <ExportButton {view} />
 </Table>

packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { TextButton, Icon, Popover } from "@budibase/bbui"
+  import api from "builderStore/api"
+  import ExportPopover from "../popovers/ExportPopover.svelte"
+
+  export let view
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show}>
+    <Icon name="download" />
+    Export
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <ExportPopover {view} onClosed={dropdown.hide} />
+</Popover>

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

@@ -0,0 +1,61 @@
+<script>
+  import api from "builderStore/api"
+  import { Button, Select } from "@budibase/bbui"
+
+  const FORMATS = [
+    {
+      name: "CSV",
+      key: "csv",
+    },
+    {
+      name: "JSON",
+      key: "json",
+    },
+  ]
+
+  export let view
+  export let onClosed
+
+  let exportFormat = FORMATS[0].key
+
+  async function exportView() {
+    const response = await api.post(
+      `/api/views/export?format=${exportFormat}`,
+      view
+    )
+    const downloadInfo = await response.json()
+    onClosed()
+    window.location = downloadInfo.url
+  }
+</script>
+
+<div class="popover">
+  <h5>Export Data</h5>
+  <Select label="Format" secondary thin bind:value={exportFormat}>
+    {#each FORMATS as format}
+      <option value={format.key}>{format.name}</option>
+    {/each}
+  </Select>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button primary on:click={exportView}>Export</Button>
+  </div>
+</div>
+
+<style>
+  .popover {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -1,196 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import fsort from "fast-sort"
-  import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import { Button, Icon } from "@budibase/bbui"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte"
-  import AttachmentList from "./AttachmentList.svelte"
-  import TablePagination from "./TablePagination.svelte"
-  import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
-  import RowPopover from "./popovers/Row.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
-  import ViewPopover from "./popovers/View.svelte"
-  import ExportPopover from "./popovers/Export.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
-  import * as api from "./api"
-
-  const ITEMS_PER_PAGE = 10
-  // Internal headers we want to hide from the user
-  const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"]
-
-  let modalOpen = false
-  let data = []
-  let headers = []
-  let currentPage = 0
-  let search
-
-  $: {
-    if (
-      $backendUiStore.selectedView &&
-      $backendUiStore.selectedView.name.startsWith("all_")
-    ) {
-      api.fetchDataForView($backendUiStore.selectedView).then(records => {
-        data = records || []
-      })
-    }
-  }
-
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
-  $: paginatedData = sorted
-    ? sorted.slice(
-        currentPage * ITEMS_PER_PAGE,
-        currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
-      )
-    : []
-
-  $: headers = Object.keys($backendUiStore.selectedModel.schema)
-    .sort()
-    .filter(id => !INTERNAL_HEADERS.includes(id))
-
-  $: schema = $backendUiStore.selectedModel.schema
-  $: modelView = {
-    schema: $backendUiStore.selectedModel.schema,
-    name: $backendUiStore.selectedView.name,
-  }
-</script>
-
-<section>
-  <div class="table-controls">
-    <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
-    <div class="popovers">
-      <ColumnPopover />
-      {#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
-        <RowPopover />
-        <ViewPopover />
-        <ExportPopover view={modelView} />
-      {/if}
-    </div>
-  </div>
-  <table class="bb-table">
-    <thead>
-      <tr>
-        <th class="edit-header">
-          <div>Edit</div>
-        </th>
-        {#each headers as header}
-          <th>
-            <ColumnHeaderPopover
-              field={$backendUiStore.selectedModel.schema[header]} />
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#if paginatedData.length === 0}
-        <div class="no-data">No Data.</div>
-      {/if}
-      {#each paginatedData as row}
-        <tr>
-          <td>
-            <EditRowPopover {row} />
-          </td>
-          {#each headers as header}
-            <td>
-              {#if schema[header].type === 'link'}
-                <LinkedRecord field={schema[header]} ids={row[header]} />
-              {:else if schema[header].type === 'attachment'}
-                <AttachmentList files={row[header] || []} />
-              {:else}{getOr('', header, row)}{/if}
-            </td>
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-  <TablePagination
-    {data}
-    bind:currentPage
-    pageItemCount={paginatedData.length}
-    {ITEMS_PER_PAGE} />
-</section>
-
-<style>
-  section {
-    margin-bottom: 20px;
-  }
-
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    text-transform: capitalize;
-  }
-
-  table {
-    border: 1px solid var(--grey-4);
-    background: #fff;
-    border-radius: 3px;
-    border-collapse: collapse;
-  }
-
-  thead {
-    height: 40px;
-    background: var(--grey-3);
-    border: 1px solid var(--grey-4);
-  }
-
-  thead th {
-    color: var(--ink);
-    text-transform: capitalize;
-    font-weight: 500;
-    font-size: 14px;
-    text-rendering: optimizeLegibility;
-    transition: 0.5s all;
-    vertical-align: middle;
-  }
-
-  .edit-header {
-    width: 100px;
-    cursor: default;
-  }
-
-  .edit-header:hover {
-    color: var(--ink);
-  }
-
-  th:hover {
-    color: var(--blue);
-    cursor: pointer;
-  }
-
-  td {
-    max-width: 200px;
-    text-overflow: ellipsis;
-    border: 1px solid var(--grey-4);
-    overflow: hidden;
-    white-space: pre;
-    box-sizing: border-box;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid var(--grey-4);
-    transition: 0.3s background-color;
-    color: var(--ink);
-    font-size: 12px;
-  }
-
-  tbody tr:hover {
-    background: var(--grey-1);
-  }
-
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  .no-data {
-    padding: 14px;
-  }
-</style>

packages/builder/src/components/database/DataTable/ViewDataTable.svelte

@@ -1,56 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import fsort from "fast-sort"
-  import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import Table from "./Table.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte"
-  import TablePagination from "./TablePagination.svelte"
-  import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
-  import RowPopover from "./popovers/Row.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
-  import ViewPopover from "./popovers/View.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
-  import CalculationPopover from "./popovers/Calculate.svelte"
-  import GroupByPopover from "./popovers/GroupBy.svelte"
-  import FilterPopover from "./popovers/Filter.svelte"
-  import ExportPopover from "./popovers/Export.svelte"
-
-  export let view = {}
-
-  let data = []
-
-  $: name = view.name
-  $: filters = view.filters
-  $: field = view.field
-  $: groupBy = view.groupBy
-  $: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
-
-  async function fetchViewData(name, field, groupBy) {
-    const params = new URLSearchParams()
-
-    if (field) {
-      params.set("field", field)
-      params.set("stats", true)
-    }
-    if (groupBy) params.set("group", groupBy)
-
-    let QUERY_VIEW_URL = `/api/views/${name}?${params}`
-
-    const response = await api.get(QUERY_VIEW_URL)
-    data = await response.json()
-  }
-</script>
-
-<Table title={decodeURI(name)} schema={view.schema} {data}>
-  <FilterPopover {view} />
-  <CalculationPopover {view} />
-  {#if view.calculation}
-    <GroupByPopover {view} />
-  {/if}
-  <ExportPopover {view} />
-</Table>

packages/builder/src/components/database/DataTable/popovers/Export.svelte

@@ -1,71 +0,0 @@
-<script>
-  import {
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-    Popover,
-  } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import api from "builderStore/api"
-
-  const FORMATS = [
-    {
-      name: "CSV",
-      key: "csv",
-    },
-    {
-      name: "JSON",
-      key: "json",
-    },
-  ]
-
-  export let view
-
-  let anchor
-  let dropdown
-  let exportFormat
-
-  async function exportView() {
-    const response = await api.post(
-      `/api/views/export?format=${exportFormat}`,
-      view
-    )
-    const downloadInfo = await response.json()
-    window.location = downloadInfo.url
-  }
-</script>
-
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="download" />
-    Export
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <h5>Export Format</h5>
-  <Select secondary thin bind:value={exportFormat}>
-    <option value={''}>Select an option</option>
-    {#each FORMATS as format}
-      <option value={format.key}>{format.name}</option>
-    {/each}
-  </Select>
-  <div class="button-group">
-    <Button secondary on:click={dropdown.hide}>Cancel</Button>
-    <Button primary on:click={exportView}>Export</Button>
-  </div>
-</Popover>
-
-<style>
-  h5 {
-    margin-top: 0;
-  }
-
-  .button-group {
-    margin-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-  }
-</style>