Merge branch 'new-backend' of github.com:Budibase/budibase into new-backend

packages/builder/package.json

@@ -47,7 +47,6 @@
     "safe-buffer": "^5.1.2",
     "shortid": "^2.2.8",
     "string_decoder": "^1.2.0",
-    "svelte-routing": "^1.4.2",
     "uikit": "^3.1.7"
   },
   "devDependencies": {

packages/builder/rollup.config.js

@@ -105,7 +105,9 @@ const lodash_fp_exports = [
   "toPairs",
   "remove",
   "findIndex",
-  "compose"
+  "compose",
+  "get",
+  "tap"
 ]
 
 const lodash_exports = [

packages/builder/src/PackageRoot.svelte

@@ -4,7 +4,7 @@
   import UserInterfaceRoot from "./userInterface/UserInterfaceRoot.svelte"
   import BackendRoot from "./BackendRoot.svelte"
   import { fade } from "svelte/transition"
-  import { SettingsIcon, PreviewIcon, HelpIcon } from "./common/Icons/"
+  import { SettingsIcon, PreviewIcon } from "./common/Icons/"
 
   const TABS = {
     BACKEND: "backend",

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

@@ -23,7 +23,6 @@ export const getBackendUiStore = () => {
       name: ""
     },
     breadcrumbs: [],
-    selectedRecord: {},
     selectedDatabase: {},
     selectedModel: {},
   }
@@ -49,14 +48,15 @@ export const getBackendUiStore = () => {
         return state
       }),
     },
+    views: {
+      select: view => store.update(state => { 
+        state.selectedView = { ...state.selectedView, ...view }
+        return state
+      })
+    },
     modals: {
       show: modal => store.update(state => ({ ...state, visibleModal: modal })),
       hide: () => store.update(state => ({ ...state, visibleModal: null }))
-    },
-    nodes: {
-      select: () => {},
-      update: () => {},
-      delete: () => {},
     }
   }
 

packages/builder/src/common/CodeArea.svelte

@@ -11,20 +11,11 @@
     padding: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
-    background: var(--primary100);
+    background: var(--secondary80);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
     width: 95%;
     height: 100px;
     border-radius: 5px;
   }
-
-  span {
-    margin-left: 5px;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-  }
 </style>

packages/builder/src/database/IndexView.svelte

@@ -4,11 +4,9 @@
   import Button from "../common/Button.svelte"
   import Dropdown from "../common/Dropdown.svelte"
   import { store } from "../builderStore"
-  import { filter, some, map } from "lodash/fp"
+  import { filter, some, map, compose } from "lodash/fp"
   import { hierarchy as hierarchyFunctions, common } from "../../../core/src"
 
-  const pipe = common.$
-
   const SNIPPET_EDITORS = {
     MAP: "Map",
     FILTER: "Filter",
@@ -19,25 +17,26 @@
   let indexableRecords = []
   let currentSnippetEditor = SNIPPET_EDITORS.MAP
 
-  store.subscribe($store => {
-    index = $store.currentNode
-    indexableRecords = pipe(
-      $store.hierarchy,
-      [
-        hierarchyFunctions.getFlattenedHierarchy,
-        filter(hierarchyFunctions.isDecendant(index.parent())),
-        filter(hierarchyFunctions.isRecord),
+  const indexableRecordsFromIndex = compose(
     map(node => ({
       node,
       isallowed: index.allowedRecordNodeIds.some(id => node.nodeId === id),
     })),
-      ]
+    filter(hierarchyFunctions.isRecord),
+    filter(hierarchyFunctions.isDecendant(index.parent())),
+    hierarchyFunctions.getFlattenedHierarchy
   )
+
+  store.subscribe($store => {
+    index = $store.currentNode
+    indexableRecords = indexableRecordsFromIndex($store.hierarchy)
   })
 
   const toggleAllowedRecord = record => {
     if (record.isallowed) {
-      index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter(id => id !== record.node.nodeId)
+      index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter(
+        id => id !== record.node.nodeId
+      )
     } else {
       index.allowedRecordNodeIds.push(record.node.nodeId)
     }

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { store, backendUiStore } from "../../builderStore"
-  import { last } from "lodash/fp";
+  import { tap, get, find, last, compose, flatten, map } from "lodash/fp"
   import Select from "../../common/Select.svelte"
   import { getIndexSchema } from "../../common/core"
   import ActionButton from "../../common/ActionButton.svelte"
@@ -15,31 +15,49 @@
 
   let selectedView = ""
   let modalOpen = false
+  let data = []
   let headers = []
-  let selectedRecord
+  let views = []
   let currentPage = 0
 
-  $: views = $store.hierarchy.indexes
+  $: views = $backendUiStore.selectedRecord
+    ? childViewsForRecord($store.hierarchy)
+    : $store.hierarchy.indexes
+
   $: currentAppInfo = {
     appname: $store.appname,
     instanceId: $backendUiStore.selectedDatabase.id,
   }
-  $: data = $backendUiStore.selectedView.records.slice(
-    currentPage * ITEMS_PER_PAGE,
-    currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  // $: data =
+  //   $backendUiStore.selectedDatabase &&
+  //   $backendUiStore.selectedView.records.slice(
+  //     currentPage * ITEMS_PER_PAGE,
+  //     currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  //   )
+
+  $: fetchRecordsForView(
+    $backendUiStore.selectedView,
+    $backendUiStore.selectedDatabase
+  ).then(records => {
+    data = records
+    headers = getSchema($backendUiStore.selectedView).map(get("name"))
+  })
+
+  const childViewsForRecord = compose(
+    flatten,
+    map("indexes"),
+    get("children")
   )
-  $: showTable = currentAppInfo.instanceId && views.length > 0
 
   const getSchema = getIndexSchema($store.hierarchy)
 
-  async function fetchRecordsForView(viewName) {
-    const recordsForIndex = await api.fetchDataForView(viewName, currentAppInfo)
-    backendUiStore.update(state => {
-      state.selectedView.records = recordsForIndex
-      if (state.selectedView.records.length > 0) {
-        headers = Object.keys(recordsForIndex[0]) 
-      }
-      return state
+  async function fetchRecordsForView(view, instance) {
+    const viewName = $backendUiStore.selectedRecord
+      ? `${$backendUiStore.selectedRecord.type}/`
+      : view.name
+    return await api.fetchDataForView(view.name, {
+      appname: $store.appname,
+      instanceId: instance.id,
     })
   }
 
@@ -47,26 +65,20 @@
     backendUiStore.update(state => {
       state.selectedRecord = record
       state.breadcrumbs = [state.selectedDatabase.name, record.id]
-      // Update the dropdown with the child indexes for that record
       return state
     })
   }
-
-  onMount(async () => {
-    if (views.length > 0) {
-      await fetchRecordsForView(views[0].name, currentAppInfo)
-    }
-  })
 </script>
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">
-      {last($backendUiStore.breadcrumbs)}
-    </h4>
+    <h4 class="budibase__title--3">{last($backendUiStore.breadcrumbs)}</h4>
     <Select
       icon="ri-eye-line"
-      on:change={e => fetchRecordsForView(e.target.value)}>
+      on:change={e => {
+        const view = e.target.value
+        backendUiStore.actions.views.select(view)
+      }}>
       {#each views as view}
         <option value={view.name}>{view.name}</option>
       {/each}

packages/builder/src/database/ModelDataTable/api.js

@@ -1,6 +1,12 @@
 import api from "../../builderStore/api"
 import { getNewRecord, getNewInstance } from "../../common/core"
 
+export async function createUser(user, { appname, instanceId }) {
+  const CREATE_USER_URL = `/_builder/instance/${appname}/${instanceId}/api/createUser`
+  const response = await api.post(CREATE_USER_URL, user)
+  return await response.json()
+}
+
 export async function createDatabase(appname, instanceName) {
   const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record/`
   const database = getNewInstance(appname, instanceName)

packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte

@@ -1,30 +1,51 @@
 <script>
   import Modal from "../../../common/Modal.svelte"
-  import { store } from "../../../builderStore"
+  import { store, backendUiStore } from "../../../builderStore"
   import ActionButton from "../../../common/ActionButton.svelte"
   import * as api from "../api"
 
   export let onClosed
 
-  let userName
+  let username
+  let password
+  let accessLevels = []
+
+  $: valid = username && password && accessLevels.length
+  $: currentAppInfo = {
+    appname: $store.appname,
+    instanceId: $backendUiStore.selectedDatabase.id,
+  }
 
   async function createUser() {
-    const response = await api.createUser($store.appname, userName)
-    store.createUserForInstance(response)
+    const response = await api.createUser(
+      {
+        username,
+        password,
+        accessLevels,
+        enabled: true,
+      },
+      currentAppInfo
+    )
     onClosed()
   }
 </script>
 
-<section>
-  User Name
-  <input class="uk-input" type="text" bind:value={userName} />
+<form class="uk-form-stacked">
+  <label class="uk-form-label" for="form-stacked-text">Username</label>
+  <input class="uk-input" type="text" bind:value={username} />
+  <label class="uk-form-label" for="form-stacked-text">Password</label>
+  <input class="uk-input" type="password" bind:value={password} />
+  <label class="uk-form-label" for="form-stacked-text">Access Levels</label>
+  <select multiple bind:value={accessLevels}>
+    {#each $store.accessLevels.levels as level}
+      <option value={level.name}>{level.name}</option>
+    {/each}
+  </select>
   <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!userName} on:click={createUser}>
-      Save
-    </ActionButton>
+    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
   </footer>
-</section>
+</form>
 
 <style>
   footer {

packages/builder/src/nav/BackendNav.svelte

@@ -30,7 +30,10 @@
       <div class="components-list-container">
         <div class="nav-group-header">
           <div class="hierarchy-title">Users</div>
-          <i class="ri-add-line" />
+          <i 
+            class="ri-add-line hoverable" 
+            on:click={() => backendUiStore.actions.modals.show('USER')} 
+          />
         </div>
       </div>