MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

solving initial table load issue

This commit is contained in:
Martin McKeaveney 2020-03-23 10:43:34 +00:00
parent 6f6d8f669c
commit 927be23545
3 changed files with 79 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/builder/src/database/DatabaseRoot.svelte
View File

@ -76,7 +76,11 @@
</ActionButton> </ActionButton>
{/if} {/if}
</div> </div>
<ModelDataTable {selectRecord} /> {#if $backendUiStore.selectedDatabase.id}
<ModelDataTable {selectRecord} />
{:else}
Please select a database
{/if}
</div> </div>
</div> </div>

151
packages/builder/src/database/ModelDataTable/ModelDataTable.svelte
View File

@ -21,7 +21,7 @@
$: views = $store.hierarchy.indexes $: views = $store.hierarchy.indexes
$: currentAppInfo = { $: currentAppInfo = {
appname: $store.appname, appname: $store.appname,
instanceId: $backendUiStore.selectedDatabase.id instanceId: $backendUiStore.selectedDatabase.id,
} }
$: data = $backendUiStore.selectedView.records.slice( $: data = $backendUiStore.selectedView.records.slice(
currentPage * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE,
@ -43,93 +43,88 @@
} }
onMount(async () => { onMount(async () => {
if (showTable) { if (views.length > 0) {
await fetchRecordsForView(views[0].name, currentAppInfo) await fetchRecordsForView(views[0].name, currentAppInfo)
} }
}) })
</script> </script>
{#if showTable} <section>
<section> <div class="table-controls">
<div class="table-controls"> <h4 class="budibase__title--3">
<h4 class="budibase__title--3">{$backendUiStore.selectedDatabase.name || ""}</h4> {$backendUiStore.selectedDatabase.name || ''}
<Select </h4>
icon="ri-eye-line" <Select
on:change={e => fetchRecordsForView(e.target.value)}> icon="ri-eye-line"
{#each views as view} on:change={e => fetchRecordsForView(e.target.value)}>
<option value={view.name}>{view.name}</option> {#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} {/each}
</Select> </tr>
</div> </thead>
<table class="uk-table"> <tbody>
<thead> {#if data.length === 0}
<tr> <div class="no-data">No Data.</div>
<th>Edit</th> {/if}
{#each headers as header} {#each data as row}
<th>{header}</th> <tr class="hoverable">
{/each} <td>
</tr> <div class="uk-inline">
</thead> <i class="ri-more-line" />
<tbody> <div uk-dropdown="mode: click">
{#if data.length === 0} <ul class="uk-nav uk-dropdown-nav">
<div class="no-data">No Data.</div> <li>
{/if} <div on:click={async () => {}}>View</div>
{#each data as row} </li>
<tr class="hoverable"> <li
<td> on:click={() => {
<div class="uk-inline"> selectRecord(row)
<i class="ri-more-line" /> backendUiStore.actions.modals.show('RECORD')
<div uk-dropdown="mode: click"> }}>
<ul class="uk-nav uk-dropdown-nav"> <div>Edit</div>
<li> </li>
<div <li>
on:click={async () => { <div
// fetch the child records for that particular row
}}>
View
</div>
</li>
<li
on:click={() => { on:click={() => {
selectRecord(row) selectRecord(row)
backendUiStore.actions.modals.show('RECORD') backendUiStore.actions.modals.show('DELETE_RECORD')
}}> }}>
<div>Edit</div> Delete
</li> </div>
<li> </li>
<div <li>
on:click={() => { <div
selectRecord(row) on:click={async () => {
backendUiStore.actions.modals.show('DELETE_RECORD') const response = await api.saveRecord(row)
}}> }}>
Delete Duplicate
</div> </div>
</li> </li>
<li> </ul>
<div
on:click={async () => {
const response = await api.saveRecord(row)
}}>
Duplicate
</div>
</li>
</ul>
</div>
</div> </div>
</td> </div>
{#each headers as header} </td>
<td>{row[header]}</td> {#each headers as header}
{/each} <td>{row[header]}</td>
</tr> {/each}
{/each} </tr>
</tbody> {/each}
</table> </tbody>
<TablePagination bind:currentPage pageItemCount={data.length} {ITEMS_PER_PAGE} /> </table>
</section> <TablePagination
{:else} bind:currentPage
Please select a database. pageItemCount={data.length}
{/if} {ITEMS_PER_PAGE} />
</section>
<style> <style>
table { table {

2
packages/builder/src/nav/BackendNav.svelte
View File

@ -49,9 +49,9 @@
<UsersList /> <UsersList />
</div> </div>
<NavItem name="ACCESS_LEVELS" label="User Levels" />
</div> </div>
{/if} {/if}
<NavItem name="ACCESS_LEVELS" label="User Levels" />
</div> </div>
<style> <style>