adds events when records are deleted and adds more stylish controls

packages/server/src/api/controllers/record.js

@@ -159,24 +159,19 @@ async function validate({ instanceId, modelId, record, model }) {
 
 async function bulkDelete(ctx) {
   const { records } = ctx.request.body
-  console.log(records)
   const db = new CouchDB(ctx.user.instanceId)
 
   await db.bulkDocs(
-    records.map(record => ({ ...record, _deleted: true })), console.log)
-  // await db.bulkDocs(
-  //   records.rows.map(record => ({ _id: record.id, _deleted: true }))
-  // )
-  // const record = await db.get(ctx.params.recordId)
-  // if (record.modelId !== ctx.params.modelId) {
-  //   ctx.throw(400, "Supplied modelId doesn't match the record's modelId")
-  //   return
-  // }
-  // ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
-  ctx.status = 200
-  // // for automations
-  // ctx.record = record
-  // emitEvent(`record:delete`, ctx, record)
+    records.map(record => ({ ...record, _deleted: true }), (err, res) => {
+      if (err) {
+        ctx.status = 500
+      } else {
+        records.forEach(record => {
+          emitEvent(`record:delete`, ctx, record)
+        })
+        ctx.status = 200
+      }
+    }))
 }
 
 async function saveRecords(ctx) {

packages/standard-components/src/DataGrid/Component.svelte

@@ -13,6 +13,8 @@
 
   import AgGrid from "@budibase/svelte-ag-grid"
   import InputForm from "./InputForm.svelte"
+  import CreateRowButton from "./CreateRow/Button.svelte"
+  import { TextButton as DeleteButton, Icon } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}
@@ -87,11 +89,12 @@
 
 <div class="container">
   <div class="controls">
-    <button>Add Row</button>
+    <CreateRowButton />
     {#if selectedRows.length > 0}
-      <button on:click={deleteRecords}>
+      <DeleteButton text small on:click={deleteRecords}>
+        <Icon name="addrow" />
         Delete {selectedRows.length} row(s)
-      </button>
+      </DeleteButton>
     {/if}
   </div>
   {#if dataLoaded}
@@ -100,10 +103,8 @@
       {columnDefs}
       on:update={handleUpdate}
       on:select={({ detail }) => (selectedRows = detail)} />
-    <InputForm fields={columnDefs} on:submit={handleSubmit} />
   {/if}
 </div>
-<pre>{JSON.stringify(data, 0, 2)}</pre>
 
 <style>
   .container {
@@ -114,7 +115,10 @@
     grid-template-columns: repeat(2);
   }
   .controls {
-    display: flex;
-    flex-direction: row;
+    margin-bottom: var(--spacing-s);
+    display: grid;
+    grid-gap: var(--spacing-s);
+    grid-template-columns: auto auto;
+    justify-content: start;
   }
 </style>

packages/standard-components/src/DataGrid/CreateRow/Button.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  //   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <Button text small on:click={dropdown.show}>
+    <Icon name="addrow" />
+    Create New Row
+  </Button>
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <h5>Add New Row</h5>
+  popup goes here!
+  <!-- <CreateEditRecord onClosed={dropdown.hide} /> -->
+</DropdownMenu>
+
+<style>
+  div {
+    display: grid;
+  }
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+</style>

packages/standard-components/src/DataGrid/InputForm.svelte

@@ -1,22 +0,0 @@
-<script>
-  import Form from "@svelteschool/svelte-forms"
-  import { Input } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
-  let values
-  export let fields
-
-  const handleSubmit = () => {
-    dispatch("submit", values)
-    values = {}
-  }
-</script>
-
-<Form bind:values>
-  {#each fields as { field, hide }}
-    {#if !hide}
-      <Input thin placeholder="Enter {field}" name={field} />
-    {/if}
-  {/each}
-  <button on:click|preventDefault={handleSubmit}>Add row</button>
-</Form>