deletion of views, statistics calculation popover, unit tests

packages/builder/package.json

@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.23.1",
+    "@budibase/bbui": "^1.24.0",
     "@budibase/client": "^0.1.17",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",

packages/builder/src/builderStore/store/backend.js

@@ -23,13 +23,10 @@ export const getBackendUiStore = () => {
     database: {
       select: async db => {
         const modelsResponse = await api.get(`/api/models`)
-        const viewsResponse = await api.get(`/api/views`)
         const models = await modelsResponse.json()
-        const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
           state.models = models
-          state.views = views
           return state
         })
       },
@@ -59,7 +56,7 @@ export const getBackendUiStore = () => {
         store.update(state => {
           state.selectedModel = model
           state.draftModel = cloneDeep(model)
-          state.selectedView = `all_${model._id}`
+          state.selectedView = { name: `all_${model._id}` }
           return state
         }),
       save: async model => {
@@ -119,12 +116,19 @@ export const getBackendUiStore = () => {
           state.selectedModel = {}
           return state
         }),
-      save: async view => {
+      delete: async view => {
-        const response = await api.post(`/api/views`, view)
+        await api.delete(`/api/views/${view}`)
-        const savedView = await response.json()
-        await store.actions.models.fetch()
         store.update(state => {
-          state.selectedView = view.name
+          store.actions.models.select(state.models[0])
+          return state
+        })
+        await store.actions.models.fetch()
+      },
+      save: async view => {
+        await api.post(`/api/views`, view)
+        store.update(state => {
+          state.selectedModel.views[view.name] = view 
+          state.selectedView = view
           return state
         })
       }

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

@@ -23,12 +23,11 @@
   let modalOpen = false
   let data = []
   let headers = []
-  let views = []
   let currentPage = 0
   let search
 
   $: {
-    if ($backendUiStore.selectedView) {
+    if ($backendUiStore.selectedView && $backendUiStore.selectedView.name.startsWith("all_")) {
       api.fetchDataForView($backendUiStore.selectedView).then(records => {
         data = records || []
       })
@@ -49,22 +48,6 @@
   )
 
   $: schema = $backendUiStore.selectedModel.schema
-
-  const createNewRecord = () => {
-    open(
-      CreateEditRecordModal,
-      {
-        onClosed: close,
-      },
-      { styleContent: { padding: "0" } }
-    )
-  }
-
-  onMount(() => {
-    if (views.length) {
-      backendUiStore.actions.views.select(views[0])
-    }
-  })
 </script>
 
 <section>
@@ -105,7 +88,7 @@
             <td>
               {#if schema[header].type === 'link'}
                 <LinkedRecord field={schema[header]} ids={row[header]} />
-              {:else}{getOr("", header, row)}{/if}
+              {:else}{getOr('', header, row)}{/if}
             </td>
           {/each}
         </tr>

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

@@ -0,0 +1,150 @@
+<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 Select from "components/common/Select.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"
+
+  export let columns = []
+  export let data = []
+  export let title
+
+  const ITEMS_PER_PAGE = 10
+
+  let currentPage = 0
+
+  $: paginatedData =
+    data && data.length
+      ? data.slice(
+          currentPage * ITEMS_PER_PAGE,
+          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+        )
+      : []
+  $: sort = $backendUiStore.sort
+  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
+</script>
+
+<section>
+  <div class="table-controls">
+    <h2 class="title">{title}</h2>
+    <div class="popovers">
+      <slot />
+    </div>
+  </div>
+  <table class="uk-table">
+    <thead>
+      <tr>
+        {#each columns as header}
+          <th>{header.name}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if paginatedData.length === 0}
+        <div class="no-data">No Data.</div>
+      {/if}
+      {#each paginatedData as row}
+        <tr>
+          {#each columns as header}
+            <td>{getOr('', header.key, row)}</td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  <TablePagination
+    {data}
+    bind:currentPage
+    pageItemCount={data.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);
+  }
+
+  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

@@ -0,0 +1,63 @@
+<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 Select from "components/common/Select.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"
+
+  const COLUMNS = [
+    {
+      name: "sum",
+      key: "value.sum",
+    },
+    {
+      name: "min",
+      key: "value.min",
+    },
+    {
+      name: "max",
+      key: "value.max",
+    },
+    {
+      name: "sumsqr",
+      key: "value.sumsqr",
+    },
+    {
+      name: "count",
+      key: "value.count",
+    },
+    {
+      name: "avg",
+      key: "value.avg",
+    },
+  ]
+
+  let data = []
+
+  $: selectedView = $backendUiStore.selectedView
+  $: !selectedView.name.startsWith("all_") && fetchViewData(selectedView)
+
+  async function fetchViewData() {
+    const QUERY_VIEW_URL = `/api/views/${$backendUiStore.selectedView.name}?stats=true`
+
+    const response = await api.get(QUERY_VIEW_URL)
+    data = await response.json()
+  }
+</script>
+
+<Table title={decodeURI(selectedView.name)} columns={COLUMNS} {data}>
+  <CalculationPopover view={selectedView} />
+</Table>

packages/builder/src/components/database/DataTable/api.js

@@ -6,20 +6,6 @@ export async function createUser(user) {
   return await response.json()
 }
 
-export async function createDatabase(appname, instanceName) {
-  const CREATE_DATABASE_URL = `/api/${appname}/instances`
-  const response = await api.post(CREATE_DATABASE_URL, {
-    name: instanceName,
-  })
-  return await response.json()
-}
-
-export async function deleteRecord(record) {
-  const DELETE_RECORDS_URL = `/api/${record.modelId}/records/${record._id}/${record._rev}`
-  const response = await api.delete(DELETE_RECORDS_URL)
-  return response
-}
-
 export async function saveRecord(record, modelId) {
   const SAVE_RECORDS_URL = `/api/${modelId}/records`
   const response = await api.post(SAVE_RECORDS_URL, record)
@@ -27,8 +13,14 @@ export async function saveRecord(record, modelId) {
   return await response.json()
 }
 
-export async function fetchDataForView(viewName) {
+export async function deleteRecord(record) {
-  const FETCH_RECORDS_URL = `/api/views/${viewName}`
+  const DELETE_RECORDS_URL = `/api/${record.modelId}/records/${record._id}/${record._rev}`
+  const response = await api.delete(DELETE_RECORDS_URL)
+  return response
+}
+
+export async function fetchDataForView(view) {
+  const FETCH_RECORDS_URL = `/api/views/${view.name}`
 
   const response = await api.get(FETCH_RECORDS_URL)
   return await response.json()

packages/builder/src/components/database/DataTable/modals/DeleteView.svelte

@@ -0,0 +1,60 @@
+<script>
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { notifier } from "builderStore/store/notifications"
+  import { store, backendUiStore } from "builderStore"
+  import * as api from "../api"
+
+  export let view
+  export let onClosed
+</script>
+
+<section>
+  <div class="content">
+    <heading>
+      <i class="ri-information-line alert" />
+      <h4 class="budibase__title--4">Delete View</h4>
+    </heading>
+    <p>
+      Are you sure you want to delete this view? All of your data will be
+      permanently removed. This action cannot be undone.
+    </p>
+  </div>
+  <div class="modal-actions">
+    <ActionButton on:click={onClosed}>Cancel</ActionButton>
+    <ActionButton
+      alert
+      on:click={async () => {
+        await backendUiStore.actions.views.delete(view)
+        notifier.danger('View deleted')
+        onClosed()
+      }}>
+      Delete
+    </ActionButton>
+  </div>
+</section>
+
+<style>
+  .alert {
+    color: rgba(255, 0, 31, 1);
+    background: var(--grey-1);
+    padding: 5px;
+  }
+
+  .modal-actions {
+    padding: 10px;
+    background: var(--grey-1);
+    border-top: 1px solid #ccc;
+  }
+
+  heading {
+    display: flex;
+    align-items: center;
+  }
+  .content {
+    padding: 30px;
+  }
+
+  h4 {
+    margin: 0 0 0 10px;
+  }
+</style>

packages/builder/src/components/database/DataTable/modals/index.js

@@ -1,4 +1,3 @@
 export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
 export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
-export { default as CreateEditViewModal } from "./CreateEditView.svelte"
 export { default as CreateUserModal } from "./CreateUser.svelte"

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

@@ -0,0 +1,88 @@
+<script>
+  import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+
+  const CALCULATIONS = [
+    {
+      name: "Statistics",
+      key: "stats",
+    },
+  ]
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+
+  $: viewModel = $backendUiStore.models.find(
+    ({ _id }) => _id === $backendUiStore.selectedView.modelId
+  )
+  $: fields =
+    viewModel &&
+    Object.keys(viewModel.schema).filter(
+      field => viewModel.schema[field].type === "number"
+    )
+
+  function saveView() {
+    backendUiStore.actions.views.save(view)
+    notifier.success(`View ${view.name} saved.`)
+    dropdown.hide()
+  }
+</script>
+
+<div bind:this={anchor}>
+  <Button text small on:click={dropdown.show}>
+    <Icon name="calculate" />
+    Calculate
+  </Button>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <h5>Calculate</h5>
+  <div class="input-group-row">
+    <p>The</p>
+    <Select secondary thin bind:value={view.calculation}>
+      {#each CALCULATIONS as calculation}
+        <option value={calculation.key}>{calculation.name}</option>
+      {/each}
+    </Select>
+    <p>of</p>
+    <Select secondary thin bind:value={view.field}>
+      {#each fields as field}
+        <option value={field}>{field}</option>
+      {/each}
+    </Select>
+  </div>
+  <div class="button-group">
+    <Button secondary on:click={dropdown.hide}>Cancel</Button>
+    <Button primary on:click={saveView}>Save</Button>
+  </div>
+</Popover>
+
+<style>
+  h5 {
+    margin-bottom: var(--spacing-l);
+    font-weight: 500;
+  }
+
+  .button-group {
+    margin-top: var(--spacing-l);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-s);
+  }
+
+  .input-group-row {
+    display: grid;
+    grid-template-columns: 50px 1fr 20px 1fr;
+    gap: var(--spacing-s);
+    margin-bottom: var(--spacing-l);
+    align-items: center;
+  }
+
+  p {
+    margin: 0;
+    font-size: var(--font-size-xs);
+  }
+</style>

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

@@ -1,18 +1,29 @@
 <script>
   import { Popover, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
 
   let anchor
   let dropdown
 
   let name
+  let field
+
+  $: fields = Object.keys($backendUiStore.selectedModel.schema).filter(key => {
+    return $backendUiStore.selectedModel.schema[key].type === "number"
+  })
 
   function saveView() {
     backendUiStore.actions.views.save({
       name,
-      modelId: $backendUiStore.selectedModel._id
+      modelId: $backendUiStore.selectedModel._id,
+      field
     })
+    notifier.success(`View ${name} created`)
+    dropdown.hide()
+    $goto(`../../../view/${name}`)
   }
 </script>
 
@@ -26,6 +37,11 @@
   <h5>Create View</h5>
   <div class="input-group-column">
     <Input placeholder="View Name" thin bind:value={name} />
+    <Select thin secondary bind:value={field}>
+      {#each fields as field}
+        <option value={field}>{field}</option>
+      {/each}
+    </Select>
   </div>
   <div class="button-group">
     <Button secondary on:click={dropdown.hide}>Cancel</Button>
@@ -38,4 +54,17 @@
     margin-bottom: var(--spacing-l);
     font-weight: 500;
   }
+
+  .button-group {
+    margin-top: var(--spacing-l);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-s);
+  }
+
+  .input-group-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+  }
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte

@@ -1,127 +0,0 @@
-<script>
-  import Textbox from "components/common/Textbox.svelte"
-  import CodeArea from "components/common/CodeArea.svelte"
-  import Button from "components/common/Button.svelte"
-  import Dropdown from "components/common/Dropdown.svelte"
-  import { store, backendUiStore } from "builderStore"
-  import { filter, some, map, compose } from "lodash/fp"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import api from "builderStore/api"
-
-  const SNIPPET_EDITORS = {
-    MAP: "Map",
-    FILTER: "Filter",
-    REDUCE: "Reduce",
-  }
-
-  const COUCHDB_FUNCTION = `function(doc) {
-
-  }`
-
-  export let onClosed
-  export let view = {}
-
-  let currentSnippetEditor = SNIPPET_EDITORS.MAP
-
-  $: instanceId = $backendUiStore.selectedDatabase._id
-
-  function deleteView() {}
-
-  async function saveView() {
-    const SAVE_VIEW_URL = `/api/views`
-    const response = await api.post(SAVE_VIEW_URL, view)
-    backendUiStore.update(state => {
-      state.views = [...state.views, response.view]
-      return state
-    })
-    onClosed()
-  }
-</script>
-
-<div class="header">
-  <i class="ri-eye-line button--toggled" />
-  <h3 class="budibase__title--3">Create / Edit View</h3>
-</div>
-<form on:submit|preventDefault class="uk-form-stacked root">
-  {#if $store.errors && $store.errors.length > 0}
-    <ErrorsBox errors={$store.errors} />
-  {/if}
-  <div class="main">
-    <div class="uk-grid-small" uk-grid>
-      <div class="uk-width-1-2@s">
-        <Textbox bind:text={view.name} label="Name" />
-      </div>
-    </div>
-    <div class="code-snippets">
-      {#each Object.values(SNIPPET_EDITORS) as snippetType}
-        <span
-          class="snippet-selector__heading hoverable"
-          class:highlighted={currentSnippetEditor === snippetType}
-          on:click={() => (currentSnippetEditor = snippetType)}>
-          {snippetType}
-        </span>
-      {/each}
-      {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
-        <CodeArea bind:text={view.map} label="Map" />
-      {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
-        <CodeArea bind:text={view.filter} label="Filter" />
-      {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
-        <CodeArea bind:text={view.reduce} label="Reduce" />
-      {/if}
-    </div>
-  </div>
-  <div class="buttons">
-    <div class="button">
-      <ActionButton secondary on:click={deleteView}>Delete</ActionButton>
-    </div>
-    <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
-  </div>
-</form>
-
-<style>
-  .root {
-    height: 100%;
-  }
-
-  .highlighted {
-    opacity: 1;
-  }
-
-  h3 {
-    margin: 0 0 0 10px;
-    color: var(--ink);
-  }
-
-  .snippet-selector__heading {
-    margin-right: 20px;
-    font-size: 14px;
-    color: var(--grey-5);
-  }
-
-  .header {
-    padding: 20px 40px 0 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  .main {
-    margin: 20px 40px 0px 40px;
-  }
-
-  .code-snippets {
-    margin: 20px 0px 20px 0px;
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: flex-end;
-    background-color: var(--grey-1);
-    margin: 0 40px;
-    padding: 20px 0;
-  }
-
-  .button {
-    margin-right: 20px;
-  }
-</style>

packages/builder/src/components/nav/HierarchyRow.svelte

@@ -1,45 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import { cloneDeep } from "lodash/fp"
-  import getIcon from "../common/icon"
-  import { CreateEditViewModal } from "components/database/ModelDataTable/modals"
-  import api from "builderStore/api"
-
-  const { open, close } = getContext("simple-modal")
-
-  export let node
-  export let type
-  export let onSelect
-
-  let navActive = ""
-
-  const ICON_MAP = {
-    index: "ri-eye-line",
-    model: "ri-list-settings-line",
-  }
-</script>
-
-<div>
-  <div
-    on:click={() => onSelect(node)}
-    class="budibase__nav-item hierarchy-item"
-    class:capitalized={type === 'model'}
-    class:selected={$backendUiStore.selectedView === `all_${node._id}`}>
-    <i class={ICON_MAP[type]} />
-    <span style="margin-left: 1rem">{node.name}</span>
-  </div>
-</div>
-
-<style>
-  .hierarchy-item {
-    font-size: 13px;
-    font-weight: 400;
-    margin-bottom: 10px;
-    padding-left: 20px;
-  }
-
-  .capitalized {
-    text-transform: capitalize;
-  }
-</style>

packages/builder/src/components/nav/ModelNavigator/EditTable.svelte

@@ -3,7 +3,7 @@
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import DeleteTableModal from "components/database/ModelDataTable/modals/DeleteTable.svelte"
+  import DeleteTableModal from "components/database/DataTable/modals/DeleteTable.svelte"
 
   const { open, close } = getContext("simple-modal")
 
@@ -28,7 +28,7 @@
     open(
       DeleteTableModal,
       {
-        onClosed: close,
+        onClosed: hideEditor,
         table,
       },
       { styleContent: { padding: "0" } }

packages/builder/src/components/nav/ModelNavigator/EditView.svelte

@@ -3,11 +3,11 @@
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import DeleteTableModal from "components/database/ModelDataTable/modals/DeleteTable.svelte"
+  import DeleteViewModal from "components/database/DataTable/modals/DeleteView.svelte"
 
   const { open, close } = getContext("simple-modal")
 
-  export let table
+  export let view
 
   let anchor
   let dropdown
@@ -24,19 +24,19 @@
     close()
   }
 
-  const deleteTable = () => {
+  const deleteView = () => {
     open(
-      DeleteTableModal,
+      DeleteViewModal,
       {
         onClosed: close,
-        table,
+        view,
       },
       { styleContent: { padding: "0" } }
     )
   }
 
   function save() {
-    backendUiStore.actions.models.save(table)
+    backendUiStore.actions.views.save(view)
     hideEditor()
   }
 </script>
@@ -48,7 +48,7 @@
   {#if editing}
     <h5>Edit View</h5>
     <div class="container">
-      <Input placeholder="Table Name" thin bind:value={table.name} />
+      <Input placeholder="Table Name" thin bind:value={view} />
     </div>
     <footer>
       <div class="button-margin-3">
@@ -64,7 +64,7 @@
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-table" on:click={deleteTable}>
+      <li data-cy="delete-view" on:click={deleteView}>
         <Icon name="delete" />
         Delete
       </li>

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -12,7 +12,7 @@
 
   const { open, close } = getContext("simple-modal")
 
-  $: selectedTab = $backendUiStore.tabs.NAVIGATION_PANEL
+  $: selectedView = $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
   function selectModel(model) {
     backendUiStore.actions.models.select(model)
@@ -21,7 +21,7 @@
 
   function selectView(view) {
     backendUiStore.actions.views.select(view)
-    $goto(`./view/${view}`)
+    $goto(`./view/${view.name}`)
   }
 </script>
 
@@ -34,7 +34,7 @@
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
             <ListItem
-              selected={$backendUiStore.selectedView === `all_${model._id}`}
+              selected={selectedView === `all_${model._id}`}
               title={model.name}
               icon="ri-table-fill"
               on:click={() => selectModel(model)}>
@@ -43,10 +43,13 @@
             {#each Object.keys(model.views || {}) as view}
               <ListItem
                 indented
-                selected={$backendUiStore.selectedView === view}
+                selected={selectedView === view}
                 title={view}
                 icon="ri-eye-line"
-                on:click={() => selectView(view)}>
+                on:click={() => selectView({
+                  name: view,
+                  ...model.views[view]
+                })}>
                 <EditViewPopover {view} />
               </ListItem>
             {/each}

packages/builder/src/components/userInterface/ModelSelect.svelte

@@ -1,16 +1,16 @@
 <script>
+  import { Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
 
   export let value
 </script>
 
-<div class="uk-margin block-field">
+<Select thin secondary wide on:change {value}>
-  <div class="uk-form-controls">
-    <select class="budibase__input" on:change {value}>
   <option value="" />
   {#each $backendUiStore.models as model}
     <option value={model._id}>{model.name}</option>
+    {#each Object.keys(model.views) as view}
+      <option value={view}>{view}</option>
     {/each}
-    </select>
+  {/each}
-  </div>
+</Select>
-</div>

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { getContext } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import * as api from "components/database/DataTable/api"
+  import ModelNavigator from "components/nav/ModelNavigator/ModelNavigator.svelte"
+</script>
+
+<div class="root">
+  <div class="nav">
+    <ModelNavigator />
+  </div>
+  <div class="content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 300px minmax(0, 1fr);
+    background: var(--grey-1);
+    line-height: 1;
+  }
+  .content {
+    flex: 1 1 auto;
+    margin: 20px 40px;
+  }
+  .nav {
+    flex: 0 1 auto;
+    width: 300px;
+    height: 100%;
+  }
+</style>

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ModelDataTable from "components/database/ModelDataTable"
+  import ModelDataTable from "components/database/DataTable"
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/ModelDataTable/api"
+  import * as api from "components/database/DataTable/api"
-  import { CreateEditRecordModal } from "components/database/ModelDataTable/modals"
+  import { CreateEditRecordModal } from "components/database/DataTable/modals"
 
   const { open, close } = getContext("simple-modal")
 

packages/builder/src/pages/[application]/backend/view/[selectedView]/_layout.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
+
+  if ($params.selectedView) {
+    let view
+    const viewName = decodeURI($params.selectedView)
+    for (let model of $backendUiStore.models) {
+      if (model.views && model.views[viewName]) {
+        view = model.views[viewName]
+      }
+    }
+    if (view) {
+      backendUiStore.actions.views.select({
+        name: viewName,
+        ...view,
+      })
+    }
+  }
+</script>
+
+<slot />

packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { getContext } from "svelte"
+  import { Button } from "@budibase/bbui"
+  import ViewDataTable from "components/database/DataTable/ViewDataTable"
+  import { backendUiStore } from "builderStore"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import * as api from "components/database/DataTable/api"
+  import { CreateEditRecordModal } from "components/database/DataTable/modals"
+
+  const { open, close } = getContext("simple-modal")
+
+  $: selectedView = $backendUiStore.selectedView
+</script>
+
+{#if $backendUiStore.selectedDatabase._id && selectedView}
+  <ViewDataTable />
+{:else}
+  <i>create your first table to start building</i>
+{/if}
+
+<style>
+  i {
+    font-size: 20px;
+    margin-right: 10px;
+    color: var(--grey-4);
+  }
+</style>

packages/builder/yarn.lock

@@ -775,13 +775,28 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.23.1":
+"@budibase/bbui@^1.24.0":
-  version "1.23.1"
+  version "1.24.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.23.1.tgz#232b0d31379ef64afe5e76f477d5489e67defc22"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.24.0.tgz#8e41d808c2b73fe63d39ad8120ee3ef2a6ce5893"
-  integrity sha512-L5KbkBPbTaPUGUEM33hxV2G8R6e+ckBZmph6LnjLsI6a5Bs0hWPv6pYHukeiOMXLPyGlF+ShIfYgoFHi+GRRGA==
+  integrity sha512-mARLxLASvqIo33xyYnm8YE+bIR3ncuG1KhSUaxXmFIchsdhVWQUDUX3adE23LU9HR6g+tnvsKtnw5N43grydTw==
   dependencies:
     sirv-cli "^0.4.6"
 
+"@budibase/client@^0.1.17":
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.17.tgz#9ec8848c75711751c9d088361122f181e8eb44e1"
+  integrity sha512-6O9iWHkpIWksUMm+/ysN/Yb8QufF3FE4CfxCEFUVWaeYqyIXZifiqZxeAR380JIqwxjHltSC/23wgCWzhhiMUw==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1563,6 +1578,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1649,6 +1669,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1762,6 +1789,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bcryptjs@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
+  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
+
 better-assert@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
@@ -2939,6 +2971,26 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3239,6 +3291,36 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3640,7 +3722,7 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -4171,11 +4253,21 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -4190,6 +4282,11 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4205,6 +4302,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+
 is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -4226,7 +4328,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4305,6 +4407,11 @@ is-installed-globally@0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -4317,6 +4424,11 @@ is-number-like@^1.0.3:
   dependencies:
     lodash.isfinite "^3.3.2"
 
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4386,6 +4498,18 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4396,6 +4520,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -4403,6 +4532,16 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4413,6 +4552,16 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4443,6 +4592,11 @@ isarray@2.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
   integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -5785,6 +5939,14 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -6540,6 +6702,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -7092,13 +7267,21 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-shortid@^2.2.15:
+shortid@^2.2.15, shortid@^2.2.8:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
   integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7457,7 +7640,7 @@ string.prototype.padend@^3.0.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
@@ -7483,7 +7666,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
@@ -7608,6 +7791,11 @@ svelte@3.23.x:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f"
   integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
 
+svelte@^3.9.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
+
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
@@ -8051,6 +8239,27 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
@@ -8061,6 +8270,18 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

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

@@ -80,10 +80,25 @@ exports.save = async function(ctx) {
 
 exports.fetchView = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
+  const { stats, groupBy } = ctx.query
   const response = await db.query(`database/${ctx.params.viewName}`, {
-    include_docs: true,
+    include_docs: !stats,
+    group: !!groupBy
   })
-  ctx.body = response.rows.map(row => row.doc)
+
+  if (stats) {
+    for (row of response.rows) {
+      row.value = {
+        ...row.value,
+        avg: row.value.sum / row.value.count
+      }
+    }
+  } else {
+    response.rows = response.rows.map(row => row.doc)
+  }
+
+  ctx.body = response.rows
+
 }
 
 exports.fetchModelRecords = async function(ctx) {

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

@@ -68,7 +68,22 @@ const controller = {
   },
   destroy: async ctx => {
     const db = new CouchDB(ctx.user.instanceId)
-    ctx.body = await db.destroy(ctx.params.userId)
+    const designDoc = await db.get("_design/database")
+
+    const viewName = decodeURI(ctx.params.viewName)
+
+    const view = designDoc.views[viewName]
+
+    delete designDoc.views[viewName]
+
+    await db.put(designDoc)
+
+    const model = await db.get(view.meta.modelId)
+    delete model.views[viewName]
+    await db.put(model)
+
+    ctx.body = view
+    ctx.message = `View ${ctx.params.viewName} saved successfully.`
   },
 }
 

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

@@ -7,7 +7,15 @@ function statsViewTemplate({
     meta: {
       field,
       modelId,
-      groupBy
+      groupBy,
+      schema: {
+        sum: "number",
+        min: "number",
+        max: "number",
+        count: "number",
+        sumsqr: "number",
+        avg: "number"
+      }
     },
     map: `function (doc) {
       if (doc.modelId === "${modelId}") {

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

@@ -12,8 +12,9 @@ router
     authorized(READ_VIEW, ctx => ctx.params.viewName),
     recordController.fetchView
   )
-  .get("/api/views", viewController.fetch)
+  .get("/api/views", authorized(BUILDER), viewController.fetch)
-  .post("/api/views/query/:viewName", viewController.query)
+  // .post("/api/views/query/:viewName", authorized(BUILDER), viewController.query)
-  .post("/api/views", viewController.save)
+  .delete("/api/views/:viewName", authorized(BUILDER), viewController.destroy)
+  .post("/api/views", authorized(BUILDER), viewController.save)
 
 module.exports = router

packages/server/src/app.js

@@ -45,6 +45,8 @@ const server = http.createServer(app.callback())
 
 server.on("close", () => console.log("Server Closed"))
 
+process.on('SIGINT', () => process.exit(1));
+
 module.exports = server.listen(env.PORT || 4001, () => {
   console.log(`Budibase running on ${JSON.stringify(server.address())}`)
 })