From 927be235457868cddd5e54eb23c72af2849a4ce2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 23 Mar 2020 10:43:34 +0000
Subject: [PATCH] solving initial table load issue

---
 .../builder/src/database/DatabaseRoot.svelte  |   6 +-
 .../ModelDataTable/ModelDataTable.svelte      | 151 +++++++++---------
 packages/builder/src/nav/BackendNav.svelte    |   2 +-
 3 files changed, 79 insertions(+), 80 deletions(-)

diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte
index 83d40b7f4e..412e9bf65b 100644
--- a/packages/builder/src/database/DatabaseRoot.svelte
+++ b/packages/builder/src/database/DatabaseRoot.svelte
@@ -76,7 +76,11 @@
         </ActionButton>
       {/if}
     </div>
-    <ModelDataTable {selectRecord} />
+    {#if $backendUiStore.selectedDatabase.id}
+      <ModelDataTable {selectRecord} />
+    {:else}
+      Please select a database
+    {/if}
   </div>
 </div>
 
diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
index e4996e9883..697926bd3e 100644
--- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
@@ -21,7 +21,7 @@
   $: views = $store.hierarchy.indexes
   $: currentAppInfo = {
     appname: $store.appname,
-    instanceId: $backendUiStore.selectedDatabase.id
+    instanceId: $backendUiStore.selectedDatabase.id,
   }
   $: data = $backendUiStore.selectedView.records.slice(
     currentPage * ITEMS_PER_PAGE,
@@ -43,93 +43,88 @@
   }
 
   onMount(async () => {
-    if (showTable) {
+    if (views.length > 0) {
       await fetchRecordsForView(views[0].name, currentAppInfo)
     }
   })
 </script>
 
-{#if showTable} 
-  <section>
-    <div class="table-controls">
-      <h4 class="budibase__title--3">{$backendUiStore.selectedDatabase.name || ""}</h4>
-      <Select
-        icon="ri-eye-line"
-        on:change={e => fetchRecordsForView(e.target.value)}>
-        {#each views as view}
-          <option value={view.name}>{view.name}</option>
+<section>
+  <div class="table-controls">
+    <h4 class="budibase__title--3">
+      {$backendUiStore.selectedDatabase.name || ''}
+    </h4>
+    <Select
+      icon="ri-eye-line"
+      on:change={e => fetchRecordsForView(e.target.value)}>
+      {#each views as view}
+        <option value={view.name}>{view.name}</option>
+      {/each}
+    </Select>
+  </div>
+  <table class="uk-table">
+    <thead>
+      <tr>
+        <th>Edit</th>
+        {#each headers as header}
+          <th>{header}</th>
         {/each}
-      </Select>
-    </div>
-    <table class="uk-table">
-      <thead>
-        <tr>
-          <th>Edit</th>
-          {#each headers as header}
-            <th>{header}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#if data.length === 0}
-          <div class="no-data">No Data.</div>
-        {/if}
-        {#each data as row}
-          <tr class="hoverable">
-            <td>
-              <div class="uk-inline">
-                <i class="ri-more-line" />
-                <div uk-dropdown="mode: click">
-                  <ul class="uk-nav uk-dropdown-nav">
-                    <li>
-                      <div
-                        on:click={async () => {
-                            // fetch the child records for that particular row
-                        }}>
-                        View
-                      </div>
-                    </li>
-                    <li
+      </tr>
+    </thead>
+    <tbody>
+      {#if data.length === 0}
+        <div class="no-data">No Data.</div>
+      {/if}
+      {#each data as row}
+        <tr class="hoverable">
+          <td>
+            <div class="uk-inline">
+              <i class="ri-more-line" />
+              <div uk-dropdown="mode: click">
+                <ul class="uk-nav uk-dropdown-nav">
+                  <li>
+                    <div on:click={async () => {}}>View</div>
+                  </li>
+                  <li
+                    on:click={() => {
+                      selectRecord(row)
+                      backendUiStore.actions.modals.show('RECORD')
+                    }}>
+                    <div>Edit</div>
+                  </li>
+                  <li>
+                    <div
                       on:click={() => {
                         selectRecord(row)
-                        backendUiStore.actions.modals.show('RECORD')
+                        backendUiStore.actions.modals.show('DELETE_RECORD')
                       }}>
-                      <div>Edit</div>
-                    </li>
-                    <li>
-                      <div
-                        on:click={() => {
-                          selectRecord(row)
-                          backendUiStore.actions.modals.show('DELETE_RECORD')
-                        }}>
-                        Delete
-                      </div>
-                    </li>
-                    <li>
-                      <div
-                        on:click={async () => {
-                          const response = await api.saveRecord(row)
-                        }}>
-                        Duplicate
-                      </div>
-                    </li>
-                  </ul>
-                </div>
+                      Delete
+                    </div>
+                  </li>
+                  <li>
+                    <div
+                      on:click={async () => {
+                        const response = await api.saveRecord(row)
+                      }}>
+                      Duplicate
+                    </div>
+                  </li>
+                </ul>
               </div>
-            </td>
-            {#each headers as header}
-              <td>{row[header]}</td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-    <TablePagination bind:currentPage pageItemCount={data.length} {ITEMS_PER_PAGE} />
-  </section>
-{:else}
-  Please select a database.
-{/if}
-
+            </div>
+          </td>
+          {#each headers as header}
+            <td>{row[header]}</td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  <TablePagination
+    bind:currentPage
+    pageItemCount={data.length}
+    {ITEMS_PER_PAGE} />
+</section>
 
 <style>
   table {
diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte
index dfba27fc53..a13f1cde49 100644
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@@ -49,9 +49,9 @@
         <UsersList />
       </div>
 
-      <NavItem name="ACCESS_LEVELS" label="User Levels" />
     </div>
   {/if}
+  <NavItem name="ACCESS_LEVELS" label="User Levels" />
 </div>
 
 <style>