new backend beginnings

packages/builder/src/BackendRoot.svelte

@@ -1,5 +1,6 @@
 <script>
   import BackendNav from "./nav/BackendNav.svelte"
+  import SchemaManagementDrawer from "./nav/SchemaManagementDrawer.svelte"
   import Database from "./database/DatabaseRoot.svelte"
   import UserInterface from "./userInterface/UserInterfaceRoot.svelte"
   import ActionsAndTriggers from "./actionsAndTriggers/ActionsAndTriggersRoot.svelte"
@@ -7,8 +8,11 @@
   import ComingSoon from "./common/ComingSoon.svelte"
 
   import { store } from "./builderStore"
+  import { setContext } from 'svelte';
 
-  export let navWidth = "50px"
+  let activeNav = "database";
+
+  setContext("activeNav", activeNav);
 </script>
 
 <div class="root">
@@ -16,29 +20,32 @@
     <BackendNav />
   </div>
   <div class="content">
-    {#if $store.activeNav === 'database'}
+    {#if activeNav === 'database'}
       <Database />
-    {:else if $store.activeNav === 'actions'}
+    {:else if activeNav === 'actions'}
       <ActionsAndTriggers />
-    {:else if $store.activeNav === 'access levels'}
+    {:else if activeNav === 'access levels'}
       <AccessLevels />
     {/if}
   </div>
+  <div class="nav">
+    <SchemaManagementDrawer />
+  </div>
 </div>
 
 <style>
   .root {
     height: 100%;
     display: flex;
+    background: #fafafa;
   }
 
   .content {
     flex: 1 1 auto;
-    height: 100%;
-    background-color: var(--white);
-    margin: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
+    margin: 80px 60px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
   }
 
   .nav {

packages/builder/src/budibase.css

@@ -90,4 +90,12 @@
 .uk-text-right {
     display: flex;
     justify-content: flex-start;
+}
+
+.preview-pane {
+    grid-column: 2;
+    margin: 80px 60px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
 }

packages/builder/src/builderStore/store.js

@@ -55,7 +55,6 @@ export const getStore = () => {
     currentComponentProps: null,
     currentNodeIsNew: false,
     errors: [],
-    activeNav: "database",
     isBackend: true,
     hasAppPackage: false,
     accessLevels: { version: 0, levels: [] },
@@ -84,7 +83,6 @@ export const getStore = () => {
   store.deleteTrigger = deleteTrigger(store)
   store.saveLevel = saveLevel(store)
   store.deleteLevel = deleteLevel(store)
-  store.setActiveNav = setActiveNav(store)
   store.saveScreen = saveScreen(store)
   store.addComponentLibrary = addComponentLibrary(store)
   store.renameScreen = renameScreen(store)
@@ -237,7 +235,6 @@ const selectExistingNode = store => nodeId => {
     s.currentNode = getNode(shadowHierarchy, nodeId)
     s.currentNodeIsNew = false
     s.errors = []
-    s.activeNav = "database"
     return s
   })
 }
@@ -449,13 +446,6 @@ const deleteLevel = store => level => {
   })
 }
 
-const setActiveNav = store => navName => {
-  store.update(s => {
-    s.activeNav = navName
-    return s
-  })
-}
-
 const createShadowHierarchy = hierarchy =>
   constructHierarchy(JSON.parse(JSON.stringify(hierarchy)))
 

packages/builder/src/database/ActionsHeader.svelte

@@ -7,7 +7,9 @@
   import ErrorsBox from "../common/ErrorsBox.svelte"
 
   export let left
+
   let confirmDelete = false
+
   const openConfirmDelete = () => {
     confirmDelete = true
   }
@@ -59,11 +61,4 @@
     width: 100%;
     align-items: right;
   }
-
-  .actions-modal-body {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>

packages/builder/src/database/DatabaseRoot.svelte

@@ -2,6 +2,7 @@
   import HierarchyRow from "./HierarchyRow.svelte"
   import RecordView from "./RecordView.svelte"
   import IndexView from "./IndexView.svelte"
+  import ModelDataTable from "./ModelDataTable"
   import ActionsHeader from "./ActionsHeader.svelte"
   import { store } from "../builderStore"
   import getIcon from "../common/icon"
@@ -59,7 +60,7 @@
   </div>
   <div class="node-view">
     {#if !$store.currentNode}
-      <h1 style="margin-left: 100px">:)</h1>
+      <ModelDataTable />
     {:else if $store.currentNode.type === 'record'}
       <RecordView />
     {:else}

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

@@ -0,0 +1,63 @@
+<script>
+  let pages = [1, 2, 3]
+
+  export let data = []
+  export let pageSize = 10
+</script>
+
+<section>
+  <table class="uk-table">
+    <caption>Shoe Database</caption>
+    <thead>
+      <tr>
+        <th>Table Heading</th>
+        <th>Table Heading</th>
+        <th>Table Heading</th>
+      </tr>
+    </thead>
+    <tfoot>
+      <tr>
+        <td>Table Footer</td>
+        <td>Table Footer</td>
+        <td>Table Footer</td>
+      </tr>
+    </tfoot>
+    <tbody>
+      <tr>
+        <td>Table Data</td>
+        <td>Table Data</td>
+        <td>Table Data</td>
+      </tr>
+      <tr>
+        <td>Table Data</td>
+        <td>Table Data</td>
+        <td>Table Data</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="pagination">
+    <button>Previous</button>
+    <button>Next</button>
+    {#each data as page}
+      <button>{page}</button>
+    {/each}
+  </div>
+</section>
+
+<style>
+  table {
+    border: 1px solid #ccc;
+  }
+
+  thead {
+    background: var(--background-button);
+  }
+
+  thead th {
+    color: var(--button-text);
+    text-transform: capitalize;
+  }
+  tr {
+    border-bottom: 1px solid #ccc;
+  }
+</style>

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

@@ -0,0 +1 @@
+export { default } from "./ModelDataTable.svelte"

packages/builder/src/nav/BackendNav.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { setContext } from "svelte";
   import { store } from "../builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
   import DropdownButton from "../common/DropdownButton.svelte"
@@ -6,91 +7,101 @@
   import NavItem from "./NavItem.svelte"
   import getIcon from "../common/icon"
 
-  const newRootRecord = () => {
-    store.newRootRecord()
-  }
-
-  const newRootIndex = () => {
-    store.newRootIndex()
-  }
+  // top level store modifiers 
+  const newRootRecord = () => store.newRootRecord();
+  const newChildIndex = () => store.newChildIndex();
+  const newRootIndex = () => store.newRootIndex();
+  const newUser = () => {
+    store.update(state => { 
 
-  const newChildRecord = () => {
-    store.newChildRecord()
+    });
   }
+  const newDatabase = () => {
+    store.update(state => { 
 
-  const newChildIndex = () => {
-    store.newChildIndex()
+    });
   }
 
-  const defaultNewChildActions = [
-    {
-      label: "New Root Record",
-      onclick: newRootRecord,
-    },
+  const userManagementActions = [
     {
-      label: "New Root Index",
-      onclick: newRootIndex,
-    },
-  ]
-
-  let newChildActions = defaultNewChildActions
-
-  const setActiveNav = name => () => {
-    store.setActiveNav(name)
-  }
+      label: "New User",
+      onclick: newUser
+    }
+  ];
 
-  store.subscribe(db => {
-    if (!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {
-      newChildActions = defaultNewChildActions
-    } else {
-      newChildActions = [
-        {
-          label: "New Root Record",
-          onclick: newRootRecord,
-        },
-        {
-          label: "New Root Index",
-          onclick: newRootIndex,
-        },
-        {
-          label: `New Child Record of ${db.currentNode.name}`,
-          onclick: newChildRecord,
-        },
-        {
-          label: `New Index on ${db.currentNode.name}`,
-          onclick: newChildIndex,
-        },
-      ]
+  const databaseManagementActions  = [
+    {
+      label: "New Database",
+      onclick: newDatabase
     }
-  })
+  ];
+
+  // let newChildActions = defaultNewChildActions
+
+  const setActiveNav = name => () => setContext("activeNav", name);
+
+  // store.subscribe(db => {
+  //   if (!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {
+  //     newChildActions = defaultNewChildActions
+  //   } else {
+  //     newChildActions = [
+  //       {
+  //         label: "New Root Record",
+  //         onclick: newRootRecord,
+  //       },
+  //       {
+  //         label: "New Root Index",
+  //         onclick: newRootIndex,
+  //       },
+  //       {
+  //         label: `New Child Record of ${db.currentNode.name}`,
+  //         onclick: newChildRecord,
+  //       },
+  //       {
+  //         label: `New Index on ${db.currentNode.name}`,
+  //         onclick: newChildIndex,
+  //       },
+  //     ]
+  //   }
+  // })
 </script>
 
 <div class="items-root">
   <div class="hierarchy">
     <div class="components-list-container">
       <div class="nav-group-header">
-        <div>
-          {@html getIcon('database', '18')}
-        </div>
-        <div class="hierarchy-title">Database</div>
-        <DropdownButton iconName="plus" actions={newChildActions} />
+        <div class="hierarchy-title">Databases</div>
+        <DropdownButton iconName="plus" actions={databaseManagementActions} />
       </div>
     </div>
 
     <div class="hierarchy-items-container">
-      {#each $store.hierarchy.children as record}
+      <DatabasesList />
+
+      <!-- {#each $store.hierarchy.children as record}
         <HierarchyRow node={record} type="record" />
       {/each}
 
       {#each $store.hierarchy.indexes as index}
         <HierarchyRow node={index} type="index" />
-      {/each}
+      {/each} -->
     </div>
   </div>
+  <hr />
+  <div class="hierarchy">
+    <div class="components-list-container">
+      <div class="nav-group-header">
+        <div class="hierarchy-title">Users</div>
+        <DropdownButton iconName="plus" actions={userManagementActions} />
+      </div>
+    </div>
 
-  <NavItem name="actions" label="Actions & Triggers" />
-  <NavItem name="access levels" label="User Levels" />
-
+    <div class="hierarchy-items-container">
+      <!-- {#each $store.hierarchy.children as record}
+        <HierarchyRow node={record} type="record" />
+      {/each} -->
+    </div>
+  </div>
 </div>
 
 <style>
@@ -103,40 +114,15 @@
   }
 
   .nav-group-header {
-    display: grid;
-    grid-template-columns: [icon] auto [title] 1fr [button] auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 2rem 1rem 1rem 1rem;
-    font-size: 0.9rem;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.7rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > div:nth-child(2) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--primary75);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--primary75);
   }
 
   .hierarchy-title {
-    flex: auto 1 1;
     text-transform: uppercase;
+    font-size: 0.85em;
   }
 
   .hierarchy {

packages/builder/src/nav/HierarchyRow.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getContext } from "svelte";
   import { store } from "../builderStore"
   import { cloneDeep } from "lodash/fp"
   import getIcon from "../common/icon"
@@ -7,12 +8,16 @@
   export let type
 
   let navActive = ""
-  $: icon = type === "index" ? "list" : "file"
+
+  const ICON_MAP = {
+    index: "ri-equalizer-line",
+    record: "ri-list-settings-line"
+  }
 
   store.subscribe(state => {
     if (state.currentNode) {
       navActive =
-        state.activeNav === "database" && node.nodeId === state.currentNode.nodeId
+        getContext("activeNav") === "database" && node.nodeId === state.currentNode.nodeId
     }
   })
 </script>
@@ -23,7 +28,7 @@
     class="budibase__nav-item"
     style="padding-left: {20 + level * 20}px"
     class:selected={navActive}>
-    {@html getIcon(icon, 12)}
+    <i class={ICON_MAP[type]} />
     <span style="margin-left: 1rem">{node.name}</span>
   </div>
   {#if node.children}

packages/builder/src/nav/NavItem.svelte

@@ -1,17 +1,17 @@
 <script>
-  import { store } from "../builderStore"
+  import { getContext, setContext } from "svelte"; 
   import getIcon from "../common/icon"
 
   export let name = ""
   export let label = ""
 
-  let navActive = ""
+  $: navActive = getContext("activeNav") === name 
 
-  store.subscribe(db => {
-    navActive = db.activeNav === name
-  })
+  // store.subscribe(db => {
+  //   navActive = db.activeNav === name
+  // })
 
-  const setActive = () => store.setActiveNav(name)
+  const setActive = () => setContext("activeNav", name);
 </script>
 
 <div

packages/builder/src/nav/SchemaManagementDrawer.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { store } from "../builderStore"
+  import HierarchyRow from "./HierarchyRow.svelte"
+  import DropdownButton from "../common/DropdownButton.svelte"
+  import { hierarchy as hierarchyFunctions } from "../../../core/src"
+  import NavItem from "./NavItem.svelte"
+  import getIcon from "../common/icon"
+
+  const newRootRecord = () => {
+    store.newRootRecord()
+  }
+
+  const newRootIndex = () => {
+    store.newRootIndex()
+  }
+
+  const newChildRecord = () => {
+    store.newChildRecord()
+  }
+
+  const newChildIndex = () => {
+    store.newChildIndex()
+  }
+
+  const defaultNewChildActions = [
+    {
+      label: "New Root Record",
+      onclick: newRootRecord,
+    },
+    {
+      label: "New Root Index",
+      onclick: newRootIndex,
+    },
+  ]
+
+  let newChildActions = defaultNewChildActions
+
+  const setActiveNav = name => () => {
+    store.setActiveNav(name)
+  }
+
+  store.subscribe(db => {
+    if (!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {
+      newChildActions = defaultNewChildActions
+    } else {
+      newChildActions = [
+        {
+          label: "New Root Record",
+          onclick: newRootRecord,
+        },
+        {
+          label: "New Root Index",
+          onclick: newRootIndex,
+        },
+        {
+          label: `New Child Record of ${db.currentNode.name}`,
+          onclick: newChildRecord,
+        },
+        {
+          label: `New Index on ${db.currentNode.name}`,
+          onclick: newChildIndex,
+        },
+      ]
+    }
+  })
+</script>
+
+<div class="items-root">
+  <div class="hierarchy">
+    <div class="components-list-container">
+      <div class="nav-group-header">
+        <div class="hierarchy-title">Schema</div>
+        <DropdownButton iconName="plus" actions={newChildActions} />
+      </div>
+    </div>
+
+    <div class="hierarchy-items-container">
+      {#each $store.hierarchy.children as record}
+        <HierarchyRow node={record} type="record" />
+      {/each}
+
+      {#each $store.hierarchy.indexes as index}
+        <HierarchyRow node={index} type="index" />
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .items-root {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    background-color: var(--secondary5);
+  }
+
+  .nav-group-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 2rem 1rem 1rem 1rem;
+  }
+
+  .hierarchy-title {
+    align-items: center;
+    text-transform: uppercase;
+    font-size: 0.85em;
+  }
+
+  .hierarchy {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hierarchy-items-container {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+</style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -126,6 +126,7 @@
     flex-direction: column;
   }
 
+<<<<<<< HEAD
   .preview-pane {
     grid-column: 2;
     margin: 40px;
@@ -134,6 +135,8 @@
     box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
   }
 
+=======
+>>>>>>> new backend beginnings
   .components-pane {
     grid-column: 3;
     background-color: var(--secondary5);