2020-06-18 03:51:10 +12:00
|
|
|
<script>
|
2021-04-01 22:29:47 +13:00
|
|
|
import { tables } from "stores/backend"
|
2020-06-18 03:51:10 +12:00
|
|
|
import api from "builderStore/api"
|
2020-10-07 04:02:48 +13:00
|
|
|
import { Select, Label, Multiselect } from "@budibase/bbui"
|
2020-09-30 06:27:35 +13:00
|
|
|
import { capitalise } from "../../helpers"
|
2020-06-18 03:51:10 +12:00
|
|
|
|
2020-09-30 06:27:35 +13:00
|
|
|
export let schema
|
2020-10-10 07:10:28 +13:00
|
|
|
export let linkedRows = []
|
2020-06-18 03:51:10 +12:00
|
|
|
|
2020-10-10 07:10:28 +13:00
|
|
|
let rows = []
|
2021-05-04 22:32:22 +12:00
|
|
|
let linkedIds = (linkedRows || [])?.map(row => row?._id || row)
|
2020-10-09 00:21:05 +13:00
|
|
|
|
2021-02-26 00:34:35 +13:00
|
|
|
$: linkedRows = linkedIds
|
2020-09-30 06:27:35 +13:00
|
|
|
$: label = capitalise(schema.name)
|
2020-10-10 06:49:23 +13:00
|
|
|
$: linkedTableId = schema.tableId
|
2021-05-04 22:32:22 +12:00
|
|
|
$: linkedTable = $tables.list.find(table => table._id === linkedTableId)
|
2020-10-10 07:10:28 +13:00
|
|
|
$: fetchRows(linkedTableId)
|
2020-06-24 00:50:45 +12:00
|
|
|
|
2020-10-10 07:10:28 +13:00
|
|
|
async function fetchRows(linkedTableId) {
|
|
|
|
const FETCH_ROWS_URL = `/api/${linkedTableId}/rows`
|
2020-10-09 00:21:05 +13:00
|
|
|
try {
|
2020-10-10 07:10:28 +13:00
|
|
|
const response = await api.get(FETCH_ROWS_URL)
|
|
|
|
rows = await response.json()
|
2020-10-09 00:21:05 +13:00
|
|
|
} catch (error) {
|
|
|
|
console.log(error)
|
2020-10-10 07:10:28 +13:00
|
|
|
rows = []
|
2020-10-09 00:21:05 +13:00
|
|
|
}
|
2020-06-18 03:51:10 +12:00
|
|
|
}
|
|
|
|
|
2020-10-10 07:10:28 +13:00
|
|
|
function getPrettyName(row) {
|
|
|
|
return row[linkedTable.primaryDisplay || "_id"]
|
2020-06-18 03:51:10 +12:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-10-10 06:49:23 +13:00
|
|
|
{#if linkedTable.primaryDisplay == null}
|
2020-09-30 06:27:35 +13:00
|
|
|
<Label extraSmall grey>{label}</Label>
|
|
|
|
<Label small black>
|
2020-10-15 08:38:32 +13:00
|
|
|
Please choose a display column for the
|
2020-10-10 06:49:23 +13:00
|
|
|
<b>{linkedTable.name}</b>
|
2020-09-30 06:27:35 +13:00
|
|
|
table.
|
|
|
|
</Label>
|
2021-05-04 22:04:42 +12:00
|
|
|
{:else if schema.relationshipType === "one-to-many"}
|
|
|
|
<Select
|
|
|
|
value={linkedIds?.[0]}
|
|
|
|
options={rows}
|
|
|
|
getOptionLabel={getPrettyName}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionValue={row => row._id}
|
|
|
|
on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
|
2021-05-04 22:04:42 +12:00
|
|
|
{label}
|
2021-08-20 21:03:21 +12:00
|
|
|
sort
|
2021-05-04 22:04:42 +12:00
|
|
|
/>
|
2020-09-30 06:27:35 +13:00
|
|
|
{:else}
|
2021-05-04 22:04:42 +12:00
|
|
|
<Multiselect
|
|
|
|
bind:value={linkedIds}
|
|
|
|
{label}
|
|
|
|
options={rows}
|
|
|
|
getOptionLabel={getPrettyName}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionValue={row => row._id}
|
2021-08-20 21:03:21 +12:00
|
|
|
sort
|
2021-05-04 22:04:42 +12:00
|
|
|
/>
|
2020-09-30 06:27:35 +13:00
|
|
|
{/if}
|