Fix linked record selector rendering in client apps

This commit is contained in:
Andrew Kingston 2020-10-12 14:19:54 +01:00
parent 448b0ca2ae
commit 5450cca9f4
1 changed files with 13 additions and 15 deletions

View File

@ -1,6 +1,5 @@
<script> <script>
import { onMount } from "svelte" import { Label, Multiselect } from "@budibase/bbui"
import { Select, Label, Multiselect } from "@budibase/bbui"
import api from "./api" import api from "./api"
import { capitalise } from "./helpers" import { capitalise } from "./helpers"
@ -10,10 +9,11 @@
export let secondary export let secondary
let linkedModel let linkedModel
let allRecords = []
$: label = capitalise(schema.name) $: label = capitalise(schema.name)
$: linkedModelId = schema.modelId $: linkedModelId = schema.modelId
$: recordsPromise = fetchRecords(linkedModelId) $: fetchRecords(linkedModelId)
$: fetchModel(linkedModelId) $: fetchModel(linkedModelId)
async function fetchModel() { async function fetchModel() {
@ -31,7 +31,7 @@
} }
const FETCH_RECORDS_URL = `/api/${linkedModelId}/records` const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
const response = await api.get(FETCH_RECORDS_URL) const response = await api.get(FETCH_RECORDS_URL)
return await response.json() allRecords = await response.json()
} }
function getPrettyName(record) { function getPrettyName(record) {
@ -50,16 +50,14 @@
table. table.
</Label> </Label>
{:else} {:else}
{#await recordsPromise then records}
<Multiselect <Multiselect
{secondary} {secondary}
bind:value={linkedRecords} bind:value={linkedRecords}
label={showLabel ? label : null} label={showLabel ? label : null}
placeholder="Choose some options"> placeholder="Choose some options">
{#each records as record} {#each allRecords as record}
<option value={record._id}>{getPrettyName(record)}</option> <option value={record._id}>{getPrettyName(record)}</option>
{/each} {/each}
</Multiselect> </Multiselect>
{/await}
{/if} {/if}
{/if} {/if}