make it easy for users to create children

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

@@ -49,6 +49,10 @@ export const getBackendUiStore = () => {
         state.breadcrumbs = [state.selectedDatabase.name, record.id]
         return state
       }),
+      select: record => store.update(state => {
+        state.selectedRecord = record
+        return state
+      })
     },
     views: {
       select: view => store.update(state => { 
@@ -59,6 +63,13 @@ export const getBackendUiStore = () => {
     modals: {
       show: modal => store.update(state => ({ ...state, visibleModal: modal })),
       hide: () => store.update(state => ({ ...state, visibleModal: null }))
+    },
+    users: {
+      create: user => store.update(state => {
+        state.users.push(user)
+        state.users = state.users
+        return state
+      })
     }
   }
 

packages/builder/src/database/ActionsHeader.svelte

@@ -29,6 +29,8 @@
     <ActionButton color="secondary" on:click={store.saveCurrentNode}>
       Save
     </ActionButton>
+
+    <slot />
   </div>
 
 </div>

packages/builder/src/database/IndexView.svelte

@@ -21,7 +21,9 @@
   const indexableRecordsFromIndex = compose(
     map(node => ({
       node,
-      isallowed: index.allowedRecordNodeIds.some(id => node.nodeId === id),
+      isallowed:
+        index.allowedRecordNodeIds &&
+        index.allowedRecordNodeIds.some(id => node.nodeId === id),
     })),
     filter(hierarchyFunctions.isRecord),
     filter(hierarchyFunctions.isDecendant($store.currentNode.parent())),

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { store, backendUiStore } from "../../../builderStore"
-  import { findIndex } from "lodash/fp"
+  import { compose, map, get, flatten } from "lodash/fp"
   import Modal from "../../../common/Modal.svelte"
   import ActionButton from "../../../common/ActionButton.svelte"
   import Select from "../../../common/Select.svelte"
@@ -13,12 +13,20 @@
 
   let selectedModel
 
+  const childModelsForModel = compose(
+    flatten,
+    map("children"),
+    get("children")
+  )
+
   $: currentAppInfo = {
     appname: $store.appname,
     instanceId: $backendUiStore.selectedDatabase.id,
   }
   $: recordFields = record ? Object.keys(record) : []
-  $: models = $store.hierarchy.children
+  $: models = $backendUiStore.selectedRecord
+    ? childModelsForModel($store.hierarchy)
+    : $store.hierarchy.children
   $: modelFields = selectedModel
     ? selectedModel.fields.map(({ name }) => name)
     : []
@@ -77,10 +85,7 @@
     </form>
     <footer>
       <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-      <ActionButton
-        on:click={saveRecord}>
-        Save
-      </ActionButton>
+      <ActionButton on:click={saveRecord}>Save</ActionButton>
     </footer>
   </div>
 </div>

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

@@ -17,16 +17,18 @@
   }
 
   async function createUser() {
-    const response = await api.createUser(
-      password,
-      {
-        name:username,
+    const user = {
+      name: username,
       accessLevels,
       enabled: true,
-        temporaryAccessId: ""
-      },
+      temporaryAccessId: "",
+    }
+    const response = await api.createUser(
+      password,
+      user,
       currentAppInfo
     )
+    backendUiStore.actions.users.save(user)
     onClosed()
   }
 </script>

packages/builder/src/database/ModelView.svelte

@@ -2,12 +2,14 @@
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
   import Select from "../common/Select.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import getIcon from "../common/icon"
   import FieldView from "./FieldView.svelte"
   import Modal from "../common/Modal.svelte"
   import { map, join, filter, some, find, keys, isDate } from "lodash/fp"
   import { store } from "../builderStore"
   import { common, hierarchy } from "../../../core/src"
+  import { getNode } from "../common/core"
   import { templateApi, pipe, validate } from "../common/core"
   import ActionsHeader from "./ActionsHeader.svelte"
   import ErrorsBox from "../common/ErrorsBox.svelte"
@@ -22,9 +24,11 @@
   let deleteField
   let onFinishedFieldEdit
   let editIndex
-  let parentRecord
 
   $: models = $store.hierarchy.children
+  $: parent = record && record.parent()
+  $: isChildModel = parent.name !== "root"
+  $: modelExistsInHierarchy = getNode($store.hierarchy, $store.currentNode.nodeId)
 
   store.subscribe($store => {
     record = $store.currentNode
@@ -107,23 +111,13 @@
 
     <form class="uk-form-stacked">
 
-      <div class="horizontal-stack">
       <Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
+      {#if isChildModel}
         <div>
           <label class="uk-form-label">Parent</label>
-          <div class="uk-form-controls">
-            <Select
-              value={parentRecord}
-              on:change={e => {
-                store.selectExistingNode(record)
-                store.newChildRecord()
-              }}>
-              {#each models as model}
-                <option value={model}>{model.name}</option>
-              {/each}
-            </Select>
-          </div>
+          <div class="uk-form-controls parent-name">{parent.name}</div>
         </div>
+      {/if}
     </form>
 
     <div class="table-controls">
@@ -155,7 +149,13 @@
         {/each}
       </tbody>
     </table>
-    <ActionsHeader />
+    <ActionsHeader>
+      {#if modelExistsInHierarchy}
+      <ActionButton color="primary" on:click={store.newChildRecord}>
+        Create Child Model on {record.name}
+      </ActionButton>
+      {/if}
+    </ActionsHeader>
   {:else}
     <FieldView
       field={fieldToEdit}
@@ -170,11 +170,6 @@
     height: 100%;
   }
 
-  .horizontal-stack {
-    display: flex;
-    justify-content: space-between
-  }
-
   .new-field {
     font-size: 16px;
     font-weight: bold;
@@ -208,4 +203,8 @@
   h3 {
     margin: 0 0 0 10px;
   }
+
+  .parent-name {
+    font-weight: bold;
+  }
 </style>

packages/builder/src/nav/DatabasesList.svelte

@@ -7,6 +7,7 @@
 
   function selectDatabase(database) {
     backendUiStore.actions.database.select(database)
+    backendUiStore.actions.records.select(null)
     backendUiStore.actions.navigate("DATABASE")
   }
 </script>

packages/builder/src/nav/UsersList.svelte

@@ -21,6 +21,10 @@
     const FETCH_USERS_URL = `/_builder/instance/${currentAppInfo.appname}/${currentAppInfo.instanceId}/api/users`
     const response = await api.get(FETCH_USERS_URL);
     users = await response.json()
+    backendUiStore.update(state => {
+      state.users = users
+      return state
+    })
   }
 
   onMount(fetchUsers)