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>
{/if}
</div>
<ModelDataTable {selectRecord} />
{#if $backendUiStore.selectedDatabase.id}
<ModelDataTable {selectRecord} />
{:else}
Please select a database
{/if}
</div>
</div>

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

@ -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 {

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

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