forked from tsai/budibase
Michael Shanks
6 years ago
17 changed files with 206 additions and 52 deletions
@ -1,30 +1,6 @@ |
|||
<script> |
|||
import { createEventDispatcher } from "svelte" |
|||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui" |
|||
import AttachmentList from "../../attachments/AttachmentList.svelte" |
|||
// import Modal from "./Modal.svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
let anchor |
|||
let dropdown |
|||
|
|||
export let files |
|||
</script> |
|||
|
|||
<AttachmentList {files} /> |
|||
<!-- <div bind:this={anchor}> |
|||
<Button text small on:click={dropdown.show}> |
|||
<Icon name="edit" /> |
|||
</Button> |
|||
</div> |
|||
<DropdownMenu bind:this={dropdown} {anchor} align="left"> |
|||
<h5>Edit Attachment(s)</h5> |
|||
<Modal |
|||
{_bb} |
|||
{table} |
|||
onClosed={dropdown.hide} |
|||
on:newRow={() => dispatch('newRow')} /> |
|||
</DropdownMenu> --> |
|||
|
|||
<!--<style ✂prettier:content✂="CiAgZGl2IHsKICAgIGRpc3BsYXk6IGdyaWQ7CiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gYXV0bzsKICAgIHBsYWNlLWl0ZW1zOiBzdGFydCBjZW50ZXI7CiAgfQogIGg1IHsKICAgIHBhZGRpbmc6IHZhcigtLXNwYWNpbmcteGwpIDAgMCB2YXIoLS1zcGFjaW5nLXhsKTsKICAgIG1hcmdpbjogMDsKICAgIGZvbnQtd2VpZ2h0OiA1MDA7CiAgfQo=" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂=""></style>--> |
|||
<AttachmentList {files} on:delete /> |
|||
@ -0,0 +1,69 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import api from "../../api" |
|||
import { getTable } from "./tableCache" |
|||
|
|||
export let columnName |
|||
export let row |
|||
|
|||
$: count = |
|||
row && columnName && Array.isArray(row[columnName]) |
|||
? row[columnName].length |
|||
: 0 |
|||
let linkedRows = [] |
|||
let displayColumn |
|||
|
|||
onMount(async () => { |
|||
linkedRows = await fetchLinkedRowsData(row, columnName) |
|||
if (linkedRows && linkedRows.length) { |
|||
const table = await getTable(linkedRows[0].tableId) |
|||
if (table && table.primaryDisplay) { |
|||
displayColumn = table.primaryDisplay |
|||
} |
|||
} |
|||
}) |
|||
|
|||
async function fetchLinkedRowsData(row, columnName) { |
|||
if (!row || !row._id) { |
|||
return [] |
|||
} |
|||
const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich` |
|||
const response = await api.get(QUERY_URL) |
|||
const enrichedRow = await response.json() |
|||
return enrichedRow[columnName] |
|||
} |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
{#if linkedRows && linkedRows.length && displayColumn} |
|||
{#each linkedRows as linkedRow} |
|||
{#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''} |
|||
<div class="linked-row">{linkedRow[displayColumn]}</div> |
|||
{/if} |
|||
{/each} |
|||
{:else}{count} related row(s){/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
gap: var(--spacing-xs); |
|||
width: 100%; |
|||
} |
|||
|
|||
/* This styling is opinionated to ensure these always look consistent */ |
|||
.linked-row { |
|||
color: white; |
|||
background-color: #616161; |
|||
border-radius: var(--border-radius-xs); |
|||
padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px) |
|||
var(--spacing-s); |
|||
line-height: 1; |
|||
font-size: 0.8em; |
|||
font-family: var(--font-sans); |
|||
font-weight: 500; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
import api from "../../api" |
|||
|
|||
let cache = {} |
|||
|
|||
async function fetchTable(id) { |
|||
const FETCH_TABLE_URL = `/api/tables/${id}` |
|||
const response = await api.get(FETCH_TABLE_URL) |
|||
return await response.json() |
|||
} |
|||
|
|||
export async function getTable(tableId) { |
|||
if (!tableId) { |
|||
return null |
|||
} |
|||
if (!cache[tableId]) { |
|||
cache[tableId] = fetchTable(tableId) |
|||
cache[tableId] = await cache[tableId] |
|||
} |
|||
return await cache[tableId] |
|||
} |
|||
Loading…
Reference in new issue