mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
5 changed files with 67 additions and 252 deletions
@ -1,201 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import { cssVars } from "./cssVars" |
|
||||
import ArrowUp from "./icons/ArrowUp.svelte" |
|
||||
import ArrowDown from "./icons/ArrowDown.svelte" |
|
||||
import fsort from "fast-sort" |
|
||||
import fetchData from "./fetchData.js" |
|
||||
import { isEmpty } from "lodash/fp" |
|
||||
import AttachmentList from "./attachments/AttachmentList.svelte" |
|
||||
|
|
||||
export let backgroundColor |
|
||||
export let color |
|
||||
export let stripeColor |
|
||||
export let borderColor |
|
||||
export let datasource |
|
||||
export let _bb |
|
||||
|
|
||||
let data = [] |
|
||||
let headers = [] |
|
||||
let sort = {} |
|
||||
let sorted = [] |
|
||||
let schema = {} |
|
||||
let store = _bb.store |
|
||||
|
|
||||
$: cssVariables = { |
|
||||
backgroundColor, |
|
||||
color, |
|
||||
stripeColor, |
|
||||
borderColor, |
|
||||
} |
|
||||
|
|
||||
$: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data |
|
||||
|
|
||||
async function fetchTable(tableId) { |
|
||||
const FETCH_TABLE_URL = `/api/tables/${tableId}` |
|
||||
const response = await _bb.api.get(FETCH_TABLE_URL) |
|
||||
const table = await response.json() |
|
||||
return table.schema |
|
||||
} |
|
||||
|
|
||||
onMount(async () => { |
|
||||
if (!isEmpty(datasource)) { |
|
||||
data = await fetchData(datasource, $store) |
|
||||
|
|
||||
// Get schema for datasource |
|
||||
// Views with "Calculate" applied provide their own schema. |
|
||||
// For everything else, use the tableId property to pull to table schema |
|
||||
if (datasource.schema) { |
|
||||
schema = datasource.schema |
|
||||
headers = Object.keys(schema).filter(shouldDisplayField) |
|
||||
} else { |
|
||||
schema = await fetchTable(datasource.tableId) |
|
||||
headers = Object.keys(schema).filter(shouldDisplayField) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
const shouldDisplayField = name => { |
|
||||
if (name.startsWith("_")) return false |
|
||||
// always 'row' |
|
||||
if (name === "type") return false |
|
||||
// tables are always tied to a single tableId, this is irrelevant |
|
||||
if (name === "tableId") return false |
|
||||
return true |
|
||||
} |
|
||||
|
|
||||
function sortColumn(column) { |
|
||||
if (column === sort.column) { |
|
||||
sort = { |
|
||||
direction: sort.direction === "asc" ? "desc" : null, |
|
||||
column: sort.direction === "asc" ? sort.column : null, |
|
||||
} |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
sort = { |
|
||||
column, |
|
||||
direction: "asc", |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<table use:cssVars={cssVariables}> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
{#each headers as header} |
|
||||
<th on:click={() => sortColumn(header)}> |
|
||||
<span> |
|
||||
{header} |
|
||||
{#if sort.column === header} |
|
||||
<svelte:component |
|
||||
this={sort.direction === 'asc' ? ArrowDown : ArrowUp} |
|
||||
style="height: 1em;" /> |
|
||||
{/if} |
|
||||
</span> |
|
||||
</th> |
|
||||
{/each} |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
{#each sorted as row (row._id)} |
|
||||
<tr> |
|
||||
{#each headers as header} |
|
||||
{#if schema[header] !== undefined} |
|
||||
<!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid --> |
|
||||
{#if schema[header] && schema[header].type === 'attachment'} |
|
||||
<AttachmentList files={row[header]} /> |
|
||||
{:else if schema[header] && schema[header].type === 'link'} |
|
||||
<td>{row[header] ? row[header].length : 0} related row(s)</td> |
|
||||
{:else} |
|
||||
<td>{row[header] == null ? '' : row[header]}</td> |
|
||||
{/if} |
|
||||
{/if} |
|
||||
{/each} |
|
||||
</tr> |
|
||||
{/each} |
|
||||
</tbody> |
|
||||
</table> |
|
||||
|
|
||||
<style> |
|
||||
table { |
|
||||
width: 100%; |
|
||||
border-collapse: collapse; |
|
||||
overflow: scroll; /* Scrollbar are always visible */ |
|
||||
overflow: auto; /* Scrollbar is displayed as it's needed */ |
|
||||
} |
|
||||
|
|
||||
/* Zebra striping */ |
|
||||
tr:nth-of-type(odd) { |
|
||||
background: var(--stripeColor); |
|
||||
} |
|
||||
|
|
||||
th { |
|
||||
background-color: var(--backgroundColor); |
|
||||
color: var(--color); |
|
||||
font-weight: bold; |
|
||||
text-transform: capitalize; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
th span { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
td, |
|
||||
th { |
|
||||
padding: 16px; |
|
||||
border: 1px solid var(--borderColor); |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
@media only screen and (max-width: 760px), |
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) { |
|
||||
table { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
/* Force table to not be like tables anymore */ |
|
||||
table, |
|
||||
thead, |
|
||||
tbody, |
|
||||
th, |
|
||||
td, |
|
||||
tr { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
/* Hide table headers (but not display: none;, for accessibility) */ |
|
||||
thead tr { |
|
||||
position: absolute; |
|
||||
top: -9999px; |
|
||||
left: -9999px; |
|
||||
} |
|
||||
|
|
||||
tr { |
|
||||
border: 1px solid var(--borderColor); |
|
||||
} |
|
||||
|
|
||||
td { |
|
||||
/* Behave like a "row" */ |
|
||||
border: none; |
|
||||
border-bottom: 1px solid #eee; |
|
||||
position: relative; |
|
||||
padding-left: 10%; |
|
||||
} |
|
||||
|
|
||||
td:before { |
|
||||
/* Now like a table header */ |
|
||||
position: absolute; |
|
||||
/* Top/left values mimic padding */ |
|
||||
top: 6px; |
|
||||
left: 6px; |
|
||||
width: 45%; |
|
||||
padding-right: 10px; |
|
||||
white-space: nowrap; |
|
||||
/* Label the data */ |
|
||||
content: attr(data-column); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue