iterate over package app instances

packages/builder/src/BackendRoot.svelte

@@ -20,13 +20,13 @@
     <BackendNav />
   </div>
   <div class="content">
-    {#if activeNav === 'database'}
+    <!-- {#if activeNav === 'database'} -->
       <Database />
-    {:else if activeNav === 'actions'}
+    <!-- {:else if activeNav === 'actions'}
       <ActionsAndTriggers />
     {:else if activeNav === 'access levels'}
       <AccessLevels />
-    {/if}
+    {/if} -->
   </div>
   <div class="nav">
     <SchemaManagementDrawer />
@@ -43,9 +43,6 @@
   .content {
     flex: 1 1 auto;
     margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
   }
 
   .nav {

packages/builder/src/PackageRoot.svelte

@@ -6,6 +6,13 @@
   import { fade } from "svelte/transition"
   import { SettingsIcon, PreviewIcon, HelpIcon } from "./common/Icons/"
 
+  const TABS = {
+    BACKEND: "backend",
+    FRONTEND: "frontend",
+  }
+
+  let selectedTab = TABS.BACKEND 
+
 </script>
 
 <div class="root">
@@ -19,37 +26,37 @@
                       color="var(--slate)"
                       hoverColor="var(--secondary75)"/> -->
       <span
-        class:active={$store.isBackend}
+        class:active={selectedTab === TABS.BACKEND}
         class="topnavitem"
-        on:click={store.showBackend}>
+        on:click={() => selectedTab = TABS.BACKEND}>
         Backend
       </span>
       <span
-        class:active={!$store.isBackend}
+        class:active={selectedTab === TABS.FRONTEND}
         class="topnavitem"
-        on:click={store.showFrontend}>
+        on:click={() => selectedTab = TABS.FRONTEND}>
         Frontend
       </span>
     </div>
 
     <div class="toprightnav">
       <span
-        class:active={!$store.isBackend}
+        class:active={selectedTab === TABS.FRONTEND}
         class="topnavitemright"
-        on:click={store.showFrontend}>
+        on:click={() => selectedTab === TABS.FRONTEND}>
         <SettingsIcon /> 
       </span>
       <span
-        class:active={!$store.isBackend}
+        class:active={selectedTab === TABS.FRONTEND}
         class="topnavitemright"
-        on:click={store.showFrontend}>
+        on:click={() => selectedTab === TABS.FRONTEND}>
         <PreviewIcon />      
       </span>
     </div>
   </div>
 
   <div class="content">
-    {#if $store.isBackend}
+    {#if selectedTab === TABS.BACKEND}
       <div in:fade out:fade>
         <BackendRoot />
       </div>

packages/builder/src/builderStore/store.js

@@ -55,7 +55,6 @@ export const getStore = () => {
     currentComponentProps: null,
     currentNodeIsNew: false,
     errors: [],
-    isBackend: true,
     hasAppPackage: false,
     accessLevels: { version: 0, levels: [] },
     currentNode: null,
@@ -66,6 +65,61 @@ export const getStore = () => {
 
   const store = writable(initial)
 
+  // store.api = {
+  //   appDefinition: {
+  //     create: () => {},
+  //   },
+  //   records: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   indexes: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   pages: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   screens: {
+  //     create: () => {},
+  //     select: () => {},
+  //     rename: () => {}
+  //   },
+  //   accessLevels: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   users: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   actions: {
+  //     update: () => {},
+  //     delete: () => {}
+  //   },
+  //   triggers: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   stylesheets: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   },
+  //   components: {
+  //     create: () => {},
+  //     update: () => {},
+  //     delete: () => {},
+  //   }
+  // }
+
   store.initialise = initialise(store, initial)
   store.newChildRecord = newRecord(store, false)
   store.newRootRecord = newRecord(store, true)
@@ -94,8 +148,8 @@ export const getStore = () => {
   store.addStylesheet = addStylesheet(store)
   store.removeStylesheet = removeStylesheet(store)
   store.savePage = savePage(store)
-  store.showFrontend = showFrontend(store)
-  store.showBackend = showBackend(store)
+  // store.showFrontend = showFrontend(store)
+  // store.showBackend = showBackend(store)
   store.showSettings = showSettings(store)
   store.useAnalytics = useAnalytics(store)
   store.createGeneratedComponents = createGeneratedComponents(store)
@@ -172,6 +226,7 @@ const initialise = (store, initial) => async () => {
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.actions = values(pkg.appDefinition.actions)
   initial.triggers = pkg.appDefinition.triggers
+  initial.appInstances = pkg.application.instances
 
   if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
     initial.hierarchy = constructHierarchy(initial.hierarchy)
@@ -185,9 +240,9 @@ const initialise = (store, initial) => async () => {
 }
 
 const showSettings = store => () => {
-  store.update(s => {
-    s.showSettings = !s.showSettings
-    return s
+  store.update(state => {
+    state.showSettings = !state.showSettings
+    return state
   })
 }
 
@@ -198,20 +253,6 @@ const useAnalytics = store => () => {
   })
 }
 
-const showBackend = store => () => {
-  store.update(s => {
-    s.isBackend = true
-    return s
-  })
-}
-
-const showFrontend = store => () => {
-  store.update(s => {
-    s.isBackend = false
-    return s
-  })
-}
-
 const newRecord = (store, useRoot) => () => {
   store.update(s => {
     s.currentNodeIsNew = true
@@ -377,10 +418,10 @@ const saveAction = store => (newAction, isNew, oldAction = null) => {
 }
 
 const deleteAction = store => action => {
-  store.update(s => {
-    s.actions = filter(a => a.name !== action.name)(s.actions)
-    saveBackend(s)
-    return s
+  store.update(state => {
+    state.actions = state.actions.filter(a => a.name !== action.name);
+    saveBackend(state);
+    return state;
   })
 }
 

packages/builder/src/common/Select.svelte

@@ -14,12 +14,12 @@
 
 <style>
   .select-container {
-    padding-bottom: 10px;
     font-size: 0.9rem;
     color: var(--secondary50);
     font-weight: bold;
     position: relative;
     max-width: 300px;
+    min-width: 200px;
   }
 
   select {
@@ -43,7 +43,6 @@
   .arrow {
     position: absolute;
     right: 10px;
-    top: 0;
     bottom: 0;
     margin: auto;
     width: 30px;

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

@@ -1,52 +1,60 @@
 <script>
+  import Select from "../../common/Select.svelte"
+  import ActionButton from "../../common/ActionButton.svelte"
+
   let pages = [1, 2, 3]
 
-  export let data = []
+  export let data = [
+    { name: "Joe", inStock: true },
+    { name: "Mike", inStock: false },
+    { name: "Martin", inStock: true },
+  ]
+  export let headers = ["name", "inStock"]
   export let pageSize = 10
 </script>
 
 <section>
+  <h4 class="budibase__title--3">Shoe database</h4>
+  <div class="table-controls">
+    <Select />
+    <ActionButton primary>Create new record</ActionButton>
+  </div>
   <table class="uk-table">
-    <caption>Shoe Database</caption>
     <thead>
       <tr>
-        <th>Table Heading</th>
-        <th>Table Heading</th>
-        <th>Table Heading</th>
+        <th>Edit</th>
+        {#each headers as header}
+          <th>{header}</th>
+        {/each}
       </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>
+      {#each data as row}
+        <tr>
+          <td>
+            <i class="ri-more-line" />
+          </td>
+          {#each headers as header}
+            <td>{row[header]}</td>
+          {/each}
+        </tr>
+      {/each}
     </tbody>
   </table>
   <div class="pagination">
     <button>Previous</button>
     <button>Next</button>
-    {#each data as page}
+    <!-- {#each data as page}
       <button>{page}</button>
-    {/each}
+    {/each} -->
   </div>
 </section>
 
 <style>
   table {
     border: 1px solid #ccc;
+    background: #fff;
+    border-radius: 2px;
   }
 
   thead {
@@ -56,8 +64,16 @@
   thead th {
     color: var(--button-text);
     text-transform: capitalize;
+    font-weight: 500;
   }
+
   tr {
     border-bottom: 1px solid #ccc;
   }
-</style>
+
+  .table-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

packages/builder/src/nav/BackendNav.svelte

@@ -3,7 +3,7 @@
   import { store } from "../builderStore"
   import HierarchyRow from "./HierarchyRow.svelte"
   import DatabasesList from "./DatabasesList.svelte"
-  import DropdownButton from "../common/DropdownButton.svelte"
+  import UsersList from "./UsersList.svelte"
   import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
   import getIcon from "../common/icon"
@@ -68,7 +68,7 @@
     <div class="components-list-container">
       <div class="nav-group-header">
         <div class="hierarchy-title">Databases</div>
-        <DropdownButton iconName="plus" actions={databaseManagementActions} />
+        <i class="ri-add-line" />
       </div>
     </div>
 
@@ -89,11 +89,12 @@
     <div class="components-list-container">
       <div class="nav-group-header">
         <div class="hierarchy-title">Users</div>
-        <DropdownButton iconName="plus" actions={userManagementActions} />
+        <i class="ri-add-line" />
       </div>
     </div>
 
     <div class="hierarchy-items-container">
+      <UsersList />
       <!-- {#each $store.hierarchy.children as record}
         <HierarchyRow node={record} type="record" />
       {/each} -->

packages/builder/src/nav/DatabasesList.svelte

@@ -3,30 +3,12 @@
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
-  const getPage = (s, name) => {
-    const props = s.pages[name]
-    return { name, props }
-  }
-
-  $: databases = $store.app
-
-  const pages = [
-    {
-      title: "Main",
-      id: "main",
-    },
-    {
-      title: "Login",
-      id: "unauthenticated",
-    },
-  ]
-
-  store.setCurrentPage("main")
+  $: instances = $store.appInstances
 </script>
 
 <div class="root">
   <ul>
-    {#each pages as { title, id }}
+    {#each $store.appInstances as { id, name }}
       <li>
         <span class="icon">
           {#if id === $store.currentPageName}
@@ -37,7 +19,7 @@
         <button
           class:active={id === $store.currentPageName}
           on:click={() => store.setCurrentPage(id)}>
-          {title}
+          {name}
         </button>
       </li>
     {/each}

packages/builder/src/nav/HierarchyRow.svelte

@@ -25,7 +25,8 @@
 <div>
   <div
     on:click={() => store.selectExistingNode(node.nodeId)}
-    class="budibase__nav-item"
+    class="budibase__nav-item hierarchy-item"
+    class:capitalized={type === "record"}
     style="padding-left: {20 + level * 20}px"
     class:selected={navActive}>
     <i class={ICON_MAP[type]} />
@@ -42,3 +43,14 @@
     {/each}
   {/if}
 </div>
+
+<style>
+.hierarchy-item {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.capitalized {
+  text-transform: capitalize;
+}
+</style>

packages/builder/src/nav/SchemaManagementDrawer.svelte

@@ -98,6 +98,7 @@
   .nav-group-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 2rem 1rem 1rem 1rem;
   }
 

packages/builder/src/nav/UsersList.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { store } from "../builderStore"
+  import getIcon from "../common/icon"
+  import { CheckIcon } from "../common/Icons"
+
+  const getPage = (s, name) => {
+    const props = s.pages[name]
+    return { name, props }
+  }
+
+  const pages = [
+    {
+      title: "Joe",
+      id: "joe",
+    },
+    {
+      title: "Mike",
+      id: "mike",
+    },
+    {
+      title: "Martin",
+      id: "martin",
+    },
+  ]
+
+  store.setCurrentPage("main")
+</script>
+
+<div class="root">
+  <ul>
+    {#each pages as { title, id }}
+      <li>
+        <i class="ri-user-4-line" />
+        <button
+          class:active={id === $store.currentPageName}
+          on:click={() => store.setCurrentPage(id)}>
+          {title}
+        </button>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .root {
+    padding-bottom: 10px;
+    font-size: 0.9rem;
+    color: var(--secondary50);
+    font-weight: bold;
+    position: relative;
+    padding-left: 1.8rem;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    margin: 0.5rem 0;
+  }
+
+  button {
+    margin: 0 0 0 6px;
+    padding: 0;
+    border: none;
+    font-family: Roboto;
+    font-size: 0.8rem;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .active {
+    font-weight: 500;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 14px;
+    color: #333;
+  }
+</style>