From e58546729d73d84d4295b94ffb9ed9f828f4f8d0 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sun, 22 Mar 2020 13:59:42 +0000
Subject: [PATCH] modal styling

---
 packages/builder/src/budibase.css             |  2 +-
 packages/builder/src/common/Modal.svelte      |  4 ++
 .../builder/src/database/ActionsHeader.svelte |  5 ++-
 .../builder/src/database/DatabaseRoot.svelte  |  9 ++---
 .../modals/CreateEditRecord.svelte            |  8 +---
 .../builder/src/database/ModelView.svelte     |  1 -
 packages/builder/src/nav/BackendNav.svelte    | 28 +++++++------
 packages/builder/src/nav/UsersList.svelte     | 40 +++++++++----------
 8 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 7d0a06ef68..166fe4d62f 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -110,7 +110,7 @@
     background: #fafafa;
 }
 
-.budibase__table th {
+.budibase__table thead > tr > th {
     color: var(--button-text);
     text-transform: capitalize;
     font-weight: 500;
diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index f47665f9f9..49c75d98e9 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -41,6 +41,9 @@
         {/if}
         <slot />
       </div>
+      <div class="uk-modal-footer">
+        <slot name="footer" />
+      </div>
     </div>
   {/if}
 </div>
@@ -52,5 +55,6 @@
     height: 80vh;
     display: flex;
     flex-direction: column;
+    padding: 0;
   }
 </style>
diff --git a/packages/builder/src/database/ActionsHeader.svelte b/packages/builder/src/database/ActionsHeader.svelte
index 5cbcae28e5..a4c3aca4fc 100644
--- a/packages/builder/src/database/ActionsHeader.svelte
+++ b/packages/builder/src/database/ActionsHeader.svelte
@@ -39,9 +39,12 @@
 <style>
   .root {
     display: flex;
-    background: #fafafa;
     width: 100%;
     border-top: 1px solid #ccc;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
   }
 
   .button-container {
diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte
index 1439d4da46..bf230b02c6 100644
--- a/packages/builder/src/database/DatabaseRoot.svelte
+++ b/packages/builder/src/database/DatabaseRoot.svelte
@@ -13,7 +13,7 @@
     CreateEditModelModal,
     CreateEditViewModal,
     CreateDatabaseModal,
-    DeleteRecordModal
+    DeleteRecordModal,
   } from "./ModelDataTable/modals"
 
   let selectedRecord
@@ -52,21 +52,20 @@
   {/if}
 </Modal>
 
-
 <div class="root">
   <div class="node-view">
     <div class="database-actions">
       <div class="budibase__label--big">
         {#if $backendUiStore.selectedDatabase.name}
-          {$backendUiStore.selectedDatabase.name} {breadcrumbs} 
+          {$backendUiStore.selectedDatabase.name} {breadcrumbs}
         {/if}
-        </div>
+      </div>
       {#if $backendUiStore.selectedDatabase.id}
         <ActionButton
           primary
           on:click={() => {
             selectedRecord = null
-            backendUiStore.actions.modals.show("RECORD")
+            backendUiStore.actions.modals.show('RECORD')
           }}>
           Create new record
         </ActionButton>
diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
index 4b2b04e9d1..23773de0a4 100644
--- a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -81,10 +81,4 @@
       </ActionButton>
     </div>
   </div>
-</div>
-
-<style>
-  .actions {
-    /* position: absolute; */
-  }
-</style>
+</div>
\ No newline at end of file
diff --git a/packages/builder/src/database/ModelView.svelte b/packages/builder/src/database/ModelView.svelte
index 9b4743a178..4d34d35c59 100644
--- a/packages/builder/src/database/ModelView.svelte
+++ b/packages/builder/src/database/ModelView.svelte
@@ -166,7 +166,6 @@
 <style>
   .root {
     height: 100%;
-    padding: 2rem;
   }
 
   .horizontal-stack {
diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte
index 6116726f7f..dfba27fc53 100644
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@@ -25,7 +25,9 @@
     <div class="components-list-container">
       <div class="nav-group-header">
         <div class="hierarchy-title">Databases</div>
-        <i class="ri-add-line hoverable" on:click={() => backendUiStore.actions.modals.show("DATABASE")} />
+        <i
+          class="ri-add-line hoverable"
+          on:click={() => backendUiStore.actions.modals.show('DATABASE')} />
       </div>
     </div>
 
@@ -34,20 +36,22 @@
     </div>
   </div>
   <hr />
-  <div class="hierarchy">
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <div class="hierarchy-title">Users</div>
-        <i class="ri-add-line" />
+  {#if $backendUiStore.selectedDatabase.id}
+    <div class="hierarchy">
+      <div class="components-list-container">
+        <div class="nav-group-header">
+          <div class="hierarchy-title">Users</div>
+          <i class="ri-add-line" />
+        </div>
       </div>
-    </div>
 
-    <div class="hierarchy-items-container">
-      <UsersList />
-    </div>
+      <div class="hierarchy-items-container">
+        <UsersList />
+      </div>
 
-    <NavItem name="ACCESS_LEVELS" label="User Levels" />
-  </div>
+      <NavItem name="ACCESS_LEVELS" label="User Levels" />
+    </div>
+  {/if}
 </div>
 
 <style>
diff --git a/packages/builder/src/nav/UsersList.svelte b/packages/builder/src/nav/UsersList.svelte
index 384114d5d1..fa6925e6e2 100644
--- a/packages/builder/src/nav/UsersList.svelte
+++ b/packages/builder/src/nav/UsersList.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { store } from "../builderStore"
+  import { onMount } from "svelte"
+  import { store, backendUiStore } from "../builderStore"
+  import api from "../builderStore/api";
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
@@ -8,34 +10,28 @@
     return { name, props }
   }
 
-  const pages = [
-    {
-      title: "Joe",
-      id: "joe",
-    },
-    {
-      title: "Mike",
-      id: "mike",
-    },
-    {
-      title: "Martin",
-      id: "martin",
-    },
-  ]
+  let users = []
 
-  store.setCurrentPage("main")
+  $: currentAppInfo = {
+    appname: $store.appname,
+    instanceId: $backendUiStore.selectedDatabase.id
+  }
+
+  async function fetchUsers() {
+    const DELETE_RECORDS_URL = `/_builder/instance/${currentAppInfo.appname}/${currentAppInfo.instanceId}/api/users`
+    const response = await api.get(DELETE_RECORDS_URL);
+    users = await response.json()
+  }
+
+  onMount(fetchUsers)
 </script>
 
 <div class="root">
   <ul>
-    {#each pages as { title, id }}
+    {#each users as user}
       <li>
         <i class="ri-user-4-line" />
-        <button
-          class:active={id === $store.currentPageName}
-          on:click={() => store.setCurrentPage(id)}>
-          {title}
-        </button>
+        <button class:active={user.id === $store.currentUserId}>{user.name}</button>
       </li>
     {/each}
   </ul>