fixing JSON and CSV import/export

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -62,10 +62,10 @@
         {/each}
       </Select>
     {:else if value.customType === 'password'}
-      <Input type="password" extraThin bind:value={block.inputs[key]}/>
+      <Input type="password" extraThin bind:value={block.inputs[key]} />
     {:else if value.customType === 'email'}
       <BindableInput
-        type={"email"}
+        type={'email'}
         extraThin
         bind:value={block.inputs[key]}
         {bindings} />

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

@@ -20,13 +20,12 @@
   let exportFormat = FORMATS[0].key
 
   async function exportView() {
-    const response = await api.post(
-      `/api/views/export?format=${exportFormat}`,
-      view
+    download(
+      `/api/views/export?view=${encodeURIComponent(
+        view.name
+      )}&format=${exportFormat}`
     )
-    const downloadInfo = await response.json()
     onClosed()
-    window.location = downloadInfo.url
   }
 </script>
 

packages/builder/src/components/start/AppCard.svelte

@@ -30,13 +30,13 @@
   <Spacer medium />
   <div class="card-footer">
     <TextButton text medium blue href="/_builder/{_id}">
-      Open {name} →
+      Open
+      {name}
+      →
     </TextButton>
     {#if appExportLoading}
       <Spinner size="10" />
-    {:else}
-      <i class="ri-folder-download-line" on:click={exportApp} />
-    {/if}
+    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
   </div>
 </div>
 

packages/server/src/api/controllers/view/index.js

@@ -83,23 +83,42 @@ const controller = {
     ctx.message = `View ${ctx.params.viewName} saved successfully.`
   },
   exportView: async ctx => {
-    const view = ctx.query.view
+    const db = new CouchDB(ctx.user.appId)
+    const designDoc = await db.get("_design/database")
+
+    const viewName = decodeURI(ctx.query.view)
+
+    const view = designDoc.views[viewName]
     const format = ctx.query.format
 
+    if (view) {
+      ctx.params.viewName = viewName
       // Fetch view rows
-    ctx.params.viewName = view.name
-    ctx.query.group = view.groupBy
-    if (view.field) {
-      ctx.query.stats = true
-      ctx.query.field = view.field
+      ctx.query = {
+        group: view.meta.groupBy,
+        calculation: view.meta.calculation,
+        stats: !!view.meta.field,
+        field: view.meta.field,
       }
+    } else {
+      // table all_ view
+      ctx.params.viewName = viewName
+    }
+
     await fetchView(ctx)
 
+    let schema = view && view.meta && view.meta.schema
+    if (!schema) {
+      const tableId = ctx.params.tableId || view.meta.tableId
+      const table = await db.get(tableId)
+      schema = table.schema
+    }
+
     // Export part
-    let headers = Object.keys(view.schema)
+    let headers = Object.keys(schema)
     const exporter = exporters[format]
     const exportedFile = exporter(headers, ctx.body)
-    const filename = `${view.name}.${format}`
+    const filename = `${viewName}.${format}`
     fs.writeFileSync(join(os.tmpdir(), filename), exportedFile)
 
     ctx.attachment(filename)

packages/server/src/api/routes/view.js

@@ -12,6 +12,7 @@ const usage = require("../../middleware/usageQuota")
 const router = Router()
 
 router
+  .get("/api/views/export", authorized(BUILDER), viewController.exportView)
   .get(
     "/api/views/:viewName",
     authorized(PermissionTypes.VIEW, PermissionLevels.READ),
@@ -25,6 +26,5 @@ router
     viewController.destroy
   )
   .post("/api/views", authorized(BUILDER), usage, viewController.save)
-  .post("/api/views/export", authorized(BUILDER), viewController.exportView)
 
 module.exports = router

packages/standard-components/src/Navigation.svelte

@@ -60,13 +60,18 @@
   .nav__menu {
     display: flex;
     margin-top: 40px;
-    gap: 16px;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .nav__menu > a {
+
+  .nav__menu > * {
+    margin-right: 16px;
+  }
+
+  :global(.nav__menu > a) {
     font-size: 1.5em;
     text-decoration: none;
+    margin-right: 16px;
   }
 </style>

packages/standard-components/src/Search.svelte

@@ -0,0 +1,103 @@
+<script>
+  import { getContext } from "svelte"
+  import { isEmpty } from "lodash/fp"
+  import { Button, Label, Select, Toggle, Input } from "@budibase/bbui"
+
+  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
+  const component = getContext("component")
+
+  export let datasource = []
+  export let fields = []
+
+  let rows = []
+  let loaded = false
+  let table
+  let searchableFields = []
+  let search = {}
+
+  $: schema = table?.schema || {}
+  $: searchableFields = Object.keys(schema).filter(
+    key => schema[key].searchable
+  )
+
+  $: console.log(search)
+
+  $: fetchData(datasource)
+
+  async function fetchData(datasource) {
+    if (!isEmpty(datasource)) {
+      table = await API.fetchTableDefinition(datasource.tableId)
+      rows = await API.fetchDatasource({
+        ...datasource,
+        search,
+      })
+    }
+    loaded = true
+  }
+</script>
+
+<div use:styleable={$component.styles}>
+  <div class="query-builder">
+    {#each searchableFields as field}
+      <div class="form-field">
+        <Label extraSmall grey>{schema[field].name}</Label>
+        {#if schema[field].type === 'options'}
+          <Select secondary bind:value={search[field]}>
+            <option value="">Choose an option</option>
+            {#each schema[field].constraints.inclusion as opt}
+              <option>{opt}</option>
+            {/each}
+          </Select>
+        {:else if schema[field].type === 'boolean'}
+          <Toggle text={schema[field].name} bind:checked={search[field]} />
+        {:else if schema[field].type === 'number'}
+          <Input type="number" bind:value={search[field]} />
+        {:else if schema[field].type === 'string'}
+          <Input bind:value={search[field]} />
+        {/if}
+      </div>
+    {/each}
+    <Button blue on:click={() => fetchData(datasource)}>Search</Button>
+    <Button
+      red
+      on:click={() => {
+        search = {}
+        fetchData(datasource)
+      }}>
+      Reset
+    </Button>
+  </div>
+  {#if rows.length > 0}
+    {#if $component.children === 0 && $builderStore.inBuilder}
+      <p>Add some components too</p>
+    {:else}
+      {#each rows as row}
+        <DataProvider {row}>
+          <slot />
+        </DataProvider>
+      {/each}
+    {/if}
+  {:else if loaded && $builderStore.inBuilder}
+    <p>Feed me some data</p>
+  {/if}
+</div>
+
+<style>
+  p {
+    display: grid;
+    place-items: center;
+    background: #f5f5f5;
+    border: #ccc 1px solid;
+    padding: var(--spacing-m);
+  }
+
+  .query-builder {
+    padding: var(--spacing-m);
+    background: var(--background);
+    border-radius: var(--border-radius-s);
+  }
+
+  .form-field {
+    margin-bottom: var(--spacing-m);
+  }
+</style>