|
|
|
@ -2,37 +2,28 @@ |
|
|
|
import { onMount } from "svelte" |
|
|
|
import { backendUiStore } from "builderStore" |
|
|
|
import api from "builderStore/api" |
|
|
|
import { Select, Label } from "@budibase/bbui" |
|
|
|
import { capitalise } from "../../helpers" |
|
|
|
|
|
|
|
export let modelId |
|
|
|
export let linkName |
|
|
|
export let linked = [] |
|
|
|
export let schema |
|
|
|
export let linkedRecords = [] |
|
|
|
|
|
|
|
let records = [] |
|
|
|
let model = {} |
|
|
|
|
|
|
|
let linkedRecords = new Set(linked) |
|
|
|
|
|
|
|
$: linked = [...linkedRecords] |
|
|
|
$: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name] |
|
|
|
$: schema = $backendUiStore.selectedModel.schema |
|
|
|
$: label = capitalise(schema.name) |
|
|
|
$: linkedModelId = schema.modelId |
|
|
|
$: linkedModel = $backendUiStore.models.find( |
|
|
|
model => model._id === linkedModelId |
|
|
|
) |
|
|
|
|
|
|
|
async function fetchRecords() { |
|
|
|
const FETCH_RECORDS_URL = `/api/${modelId}/records` |
|
|
|
const FETCH_RECORDS_URL = `/api/${linkedModelId}/records` |
|
|
|
const response = await api.get(FETCH_RECORDS_URL) |
|
|
|
const modelResponse = await api.get(`/api/models/${modelId}`) |
|
|
|
|
|
|
|
model = await modelResponse.json() |
|
|
|
records = await response.json() |
|
|
|
} |
|
|
|
|
|
|
|
function linkRecord(id) { |
|
|
|
if (linkedRecords.has(id)) { |
|
|
|
linkedRecords.delete(id) |
|
|
|
} else { |
|
|
|
linkedRecords.add(id) |
|
|
|
} |
|
|
|
|
|
|
|
linkedRecords = linkedRecords |
|
|
|
function getPrettyName(record) { |
|
|
|
return record[linkedModel.primaryDisplay || "_id"] |
|
|
|
} |
|
|
|
|
|
|
|
onMount(() => { |
|
|
|
@ -40,63 +31,18 @@ |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<section> |
|
|
|
<header> |
|
|
|
<h3>{linkName}</h3> |
|
|
|
</header> |
|
|
|
{#each records as record} |
|
|
|
<div class="linked-record" on:click={() => linkRecord(record._id)}> |
|
|
|
<div class="fields" class:selected={linkedRecords.has(record._id)}> |
|
|
|
{#each Object.keys(model.schema).filter(key => !FIELDS_TO_HIDE.includes(key)) as key} |
|
|
|
<div class="field"> |
|
|
|
<span>{model.schema[key].name}</span> |
|
|
|
<p>{record[key]}</p> |
|
|
|
</div> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/each} |
|
|
|
</section> |
|
|
|
|
|
|
|
<style> |
|
|
|
.fields.selected { |
|
|
|
background: var(--grey-2); |
|
|
|
border: var(--purple) 1px solid; |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 600; |
|
|
|
margin-bottom: 12px; |
|
|
|
color: var(--ink); |
|
|
|
} |
|
|
|
|
|
|
|
.fields { |
|
|
|
padding: 15px; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr 1fr; |
|
|
|
grid-gap: 20px; |
|
|
|
background: var(--white); |
|
|
|
border: 1px solid var(--grey); |
|
|
|
border-radius: 5px; |
|
|
|
transition: 0.5s all; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.fields:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.field span { |
|
|
|
color: var(--ink-lighter); |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.field p { |
|
|
|
color: var(--ink); |
|
|
|
font-size: 14px; |
|
|
|
word-break: break-word; |
|
|
|
font-weight: 500; |
|
|
|
margin-top: 4px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
{#if linkedModel.primaryDisplay == null} |
|
|
|
<Label extraSmall grey>{label}</Label> |
|
|
|
<Label small black> |
|
|
|
Please choose a primary display column for the |
|
|
|
<b>{linkedModel.name}</b> |
|
|
|
table. |
|
|
|
</Label> |
|
|
|
{:else} |
|
|
|
<Select thin secondary bind:value={linkedRecords[0]} {label}> |
|
|
|
<option value="">Choose an option</option> |
|
|
|
{#each records as record} |
|
|
|
<option value={record._id}>{getPrettyName(record)}</option> |
|
|
|
{/each} |
|
|
|
</Select> |
|
|
|
{/if} |
|
|
|
|
Andrew Kingston
6 years ago