From d85c04acbfabeb04320a4ac7b1b7efb865f453d1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 24 Mar 2020 11:35:46 +0000
Subject: [PATCH 1/3] reactive model data table

---
 packages/builder/rollup.config.js             |  4 +-
 packages/builder/src/PackageRoot.svelte       |  2 +-
 .../builder/src/builderStore/store/backend.js |  7 +-
 .../ModelDataTable/ModelDataTable.svelte      | 66 +++++++++++--------
 .../ModelDataTable/modals/CreateUser.svelte   |  6 +-
 5 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 2ec676b0e8..2ebde91183 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -105,7 +105,9 @@ const lodash_fp_exports = [
   "toPairs",
   "remove",
   "findIndex",
-  "compose"
+  "compose",
+  "get",
+  "tap"
 ]
 
 const lodash_exports = [
diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte
index fcdc2d5c71..ab07f2bac1 100644
--- a/packages/builder/src/PackageRoot.svelte
+++ b/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",
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 1fff326d46..5fa14b5c5f 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -23,7 +23,6 @@ export const getBackendUiStore = () => {
       name: ""
     },
     breadcrumbs: [],
-    selectedRecord: {},
     selectedDatabase: {},
     selectedModel: {},
   }
@@ -49,6 +48,12 @@ 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 }))
diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
index 126b4f6cce..4a59d11298 100644
--- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
+++ b/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,58 +15,70 @@
 
   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,
     })
   }
 
   function drillIntoRecord(record) {
     backendUiStore.update(state => {
-      state.selectedRecord = record 
+      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}
diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte
index 35ac8c2c1f..d6f027125d 100644
--- a/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte
@@ -2,15 +2,15 @@
   import Modal from "../../../common/Modal.svelte"
   import { store } from "../../../builderStore"
   import ActionButton from "../../../common/ActionButton.svelte"
-  import * as api from "../api"
+  // import * as api from "../api"
 
   export let onClosed
 
   let userName
 
   async function createUser() {
-    const response = await api.createUser($store.appname, userName)
-    store.createUserForInstance(response)
+    // const response = await api.createUser($store.appname, userName)
+    // store.createUserForInstance(response)
     onClosed()
   }
 </script>

From 57c3598d9f6792ea3348b0377297af0fedfd5fb2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 24 Mar 2020 16:17:10 +0000
Subject: [PATCH 2/3] user creation

---
 packages/builder/src/common/CodeArea.svelte   | 11 +----
 .../src/database/ModelDataTable/api.js        |  6 +++
 .../ModelDataTable/modals/CreateUser.svelte   | 45 ++++++++++++++-----
 packages/builder/src/nav/BackendNav.svelte    |  5 ++-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/common/CodeArea.svelte b/packages/builder/src/common/CodeArea.svelte
index 97de1002c2..a58fc12240 100644
--- a/packages/builder/src/common/CodeArea.svelte
+++ b/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>
diff --git a/packages/builder/src/database/ModelDataTable/api.js b/packages/builder/src/database/ModelDataTable/api.js
index 278c8eda33..dd4243fe6f 100644
--- a/packages/builder/src/database/ModelDataTable/api.js
+++ b/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)
diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte
index d6f027125d..ef79221900 100644
--- a/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte
+++ b/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"
+  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 {
diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte
index 5604ac20f1..3ca63cead7 100644
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/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>
 

From ad8617406fce8d874da2ec150ed3ab19d25eef49 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 24 Mar 2020 19:59:30 +0000
Subject: [PATCH 3/3] tidy up

---
 packages/builder/package.json                 |  1 -
 .../builder/src/builderStore/store/backend.js |  5 ---
 .../builder/src/database/IndexView.svelte     | 31 +++++++++----------
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 70a9602309..fa92be46a2 100644
--- a/packages/builder/package.json
+++ b/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": {
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 5fa14b5c5f..0a3da2fb50 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -57,11 +57,6 @@ export const getBackendUiStore = () => {
     modals: {
       show: modal => store.update(state => ({ ...state, visibleModal: modal })),
       hide: () => store.update(state => ({ ...state, visibleModal: null }))
-    },
-    nodes: {
-      select: () => {},
-      update: () => {},
-      delete: () => {},
     }
   }
 
diff --git a/packages/builder/src/database/IndexView.svelte b/packages/builder/src/database/IndexView.svelte
index b60c4b4cb4..22a868ea15 100644
--- a/packages/builder/src/database/IndexView.svelte
+++ b/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
 
+  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 = pipe(
-      $store.hierarchy,
-      [
-        hierarchyFunctions.getFlattenedHierarchy,
-        filter(hierarchyFunctions.isDecendant(index.parent())),
-        filter(hierarchyFunctions.isRecord),
-        map(node => ({
-          node,
-          isallowed: index.allowedRecordNodeIds.some(id => node.nodeId === id),
-        })),
-      ]
-    )
+    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)
     }