Add spectrum table to BBUI and update builder
This commit is contained in:
Andrew Kingston
parent
886f895f58
commit
ed77135093
|
|
@ -43,6 +43,14 @@
|
||||||
"dist"
|
"dist"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@spectrum-css/actionbutton": "^1.0.1",
|
||||||
|
"@spectrum-css/button": "^3.0.1",
|
||||||
|
"@spectrum-css/checkbox": "^3.0.1",
|
||||||
|
"@spectrum-css/icon": "^3.0.1",
|
||||||
|
"@spectrum-css/label": "^2.0.9",
|
||||||
|
"@spectrum-css/table": "^3.0.1",
|
||||||
|
"@spectrum-css/vars": "^3.0.1",
|
||||||
|
"dayjs": "^1.10.4",
|
||||||
"markdown-it": "^12.0.4",
|
"markdown-it": "^12.0.4",
|
||||||
"quill": "^1.3.7",
|
"quill": "^1.3.7",
|
||||||
"sirv-cli": "^0.4.6",
|
"sirv-cli": "^0.4.6",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<script>
|
||||||
|
export let value
|
||||||
|
|
||||||
|
const displayLimit = 5
|
||||||
|
$: attachments = value?.slice(0, displayLimit) ?? []
|
||||||
|
$: leftover = (value?.length ?? 0) - attachments.length
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each attachments as attachment}
|
||||||
|
{#if attachment.type.startsWith('image')}
|
||||||
|
<img src={attachment.url} alt={attachment.extension} />
|
||||||
|
{:else}
|
||||||
|
<div class="file">{attachment.extension}</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{#if leftover}
|
||||||
|
<div>+{leftover} more</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
img {
|
||||||
|
height: 32px;
|
||||||
|
max-width: 64px;
|
||||||
|
}
|
||||||
|
.file {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
color: var(--spectrum-global-color-gray-800);
|
||||||
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
|
border-radius: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/checkbox/dist/index-vars.css"
|
||||||
|
|
||||||
|
export let value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<label
|
||||||
|
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="spectrum-Checkbox-input"
|
||||||
|
id="checkbox-1"
|
||||||
|
disabled
|
||||||
|
checked={!!value} />
|
||||||
|
<span class="spectrum-Checkbox-box">
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true">
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true">
|
||||||
|
<use xlink:href="#spectrum-css-icon-Dash100" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.spectrum-Checkbox {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.spectrum-Checkbox-box {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script>
|
||||||
|
import StringRenderer from "./StringRenderer.svelte"
|
||||||
|
import BooleanRenderer from "./BooleanRenderer.svelte"
|
||||||
|
import DateTimeRenderer from "./DateTimeRenderer.svelte"
|
||||||
|
import RelationshipRenderer from "./RelationshipRenderer.svelte"
|
||||||
|
import AttachmentRenderer from "./AttachmentRenderer.svelte"
|
||||||
|
|
||||||
|
export let schema
|
||||||
|
export let value
|
||||||
|
|
||||||
|
const plainTypes = ["string", "options", "number", "longform"]
|
||||||
|
$: type = schema?.type ?? "string"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if value != null && value !== ''}
|
||||||
|
{#if plainTypes.includes(type)}
|
||||||
|
<StringRenderer {value} />
|
||||||
|
{:else if type === 'boolean'}
|
||||||
|
<BooleanRenderer {value} />
|
||||||
|
{:else if type === 'datetime'}
|
||||||
|
<DateTimeRenderer {value} />
|
||||||
|
{:else if type === 'link'}
|
||||||
|
<RelationshipRenderer {value} />
|
||||||
|
{:else if type === 'attachment'}
|
||||||
|
<AttachmentRenderer {value} />
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
import dayjs from "dayjs"
|
||||||
|
|
||||||
|
export let value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/label/dist/index-vars.css"
|
||||||
|
|
||||||
|
export let value
|
||||||
|
|
||||||
|
const displayLimit = 5
|
||||||
|
$: relationships = value?.slice(0, displayLimit) ?? []
|
||||||
|
$: leftover = (value?.length ?? 0) - relationships.length
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each relationships as relationship}
|
||||||
|
{#if relationship?.primaryDisplay}
|
||||||
|
<span class="spectrum-Label spectrum-Label--grey">
|
||||||
|
{relationship.primaryDisplay}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{#if leftover}
|
||||||
|
<div>+{leftover} more</div>
|
||||||
|
{/if}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/checkbox/dist/index-vars.css"
|
||||||
|
import "@spectrum-css/actionbutton/dist/index-vars.css"
|
||||||
|
|
||||||
|
export let selected
|
||||||
|
export let onToggleSelection
|
||||||
|
export let onEdit
|
||||||
|
export let allowSelectRows = false
|
||||||
|
export let allowEditRows = false
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if allowSelectRows}
|
||||||
|
<label
|
||||||
|
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="spectrum-Checkbox-input"
|
||||||
|
id="checkbox-1"
|
||||||
|
bind:checked={selected} />
|
||||||
|
<span class="spectrum-Checkbox-box">
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true">
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true">
|
||||||
|
<use xlink:href="#spectrum-css-icon-Dash100" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
{#if allowEditRows}
|
||||||
|
<button
|
||||||
|
class="spectrum-ActionButton spectrum-ActionButton--sizeS"
|
||||||
|
on:click={onEdit}>
|
||||||
|
<span class="spectrum-ActionButton-label">Edit</span>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
label {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
export let value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{value}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,356 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
import "@spectrum-css/table/dist/index-vars.css"
|
||||||
|
import CellRenderer from "./CellRenderer.svelte"
|
||||||
|
import SelectEditRenderer from "./SelectEditRenderer.svelte"
|
||||||
|
|
||||||
|
export let data = []
|
||||||
|
export let schema = {}
|
||||||
|
export let showAutoColumns = false
|
||||||
|
export let rowCount = 14
|
||||||
|
export let quiet = true
|
||||||
|
export let loading = false
|
||||||
|
export let allowSelectRows = true
|
||||||
|
export let allowEditRows = true
|
||||||
|
export let allowEditColumns = true
|
||||||
|
export let selectedRows = []
|
||||||
|
export let customColumnRenderer = SelectEditRenderer
|
||||||
|
export let customColumnTitle
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
// Config
|
||||||
|
const rowHeight = 55
|
||||||
|
const headerHeight = 36
|
||||||
|
const rowPreload = 5
|
||||||
|
const maxRows = 100
|
||||||
|
|
||||||
|
// Sorting state
|
||||||
|
let sortColumn
|
||||||
|
let sortOrder
|
||||||
|
|
||||||
|
// Table state
|
||||||
|
let loaded = false
|
||||||
|
$: if (!loading) loaded = true
|
||||||
|
$: rows = data ?? []
|
||||||
|
$: visibleRowCount = loaded
|
||||||
|
? Math.min(rows.length, rowCount || maxRows, maxRows)
|
||||||
|
: rowCount || 8
|
||||||
|
$: scroll = rows.length > visibleRowCount
|
||||||
|
$: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
|
||||||
|
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
|
||||||
|
$: fields = getFields(schema, showAutoColumns)
|
||||||
|
|
||||||
|
// Scrolling state
|
||||||
|
let timeout
|
||||||
|
let nextScrollTop = 0
|
||||||
|
let scrollTop = 0
|
||||||
|
$: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
|
||||||
|
$: lastVisibleRow = calculateLastVisibleRow(
|
||||||
|
firstVisibleRow,
|
||||||
|
visibleRowCount,
|
||||||
|
rows.length
|
||||||
|
)
|
||||||
|
|
||||||
|
const getContentStyle = (visibleRows, useFixedHeight) => {
|
||||||
|
if (!useFixedHeight) {
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortRows = (rows, sortColumn, sortOrder) => {
|
||||||
|
if (!sortColumn || !sortOrder) {
|
||||||
|
return rows
|
||||||
|
}
|
||||||
|
return rows.slice().sort((a, b) => {
|
||||||
|
const colA = a[sortColumn]
|
||||||
|
const colB = b[sortColumn]
|
||||||
|
if (sortOrder === "Descending") {
|
||||||
|
return colA > colB ? -1 : 1
|
||||||
|
} else {
|
||||||
|
return colA > colB ? 1 : -1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortBy = field => {
|
||||||
|
if (field === sortColumn) {
|
||||||
|
sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
|
||||||
|
} else {
|
||||||
|
sortColumn = field
|
||||||
|
sortOrder = "Descending"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFields = (schema, showAutoColumns) => {
|
||||||
|
let columns = []
|
||||||
|
let autoColumns = []
|
||||||
|
Object.entries(schema).forEach(([field, fieldSchema]) => {
|
||||||
|
if (!fieldSchema?.autocolumn) {
|
||||||
|
columns.push(field)
|
||||||
|
} else if (showAutoColumns) {
|
||||||
|
autoColumns.push(field)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return columns.sort().concat(autoColumns)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onScroll = event => {
|
||||||
|
nextScrollTop = event.target.scrollTop
|
||||||
|
if (timeout) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
scrollTop = nextScrollTop
|
||||||
|
timeout = null
|
||||||
|
}, 50)
|
||||||
|
}
|
||||||
|
|
||||||
|
const calculateFirstVisibleRow = scrollTop => {
|
||||||
|
return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
|
||||||
|
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
|
||||||
|
}
|
||||||
|
|
||||||
|
const editColumn = (e, field) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
dispatch("editcolumn", field)
|
||||||
|
}
|
||||||
|
|
||||||
|
const editRow = (e, row) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
dispatch("editrow", row)
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleSelectRow = row => {
|
||||||
|
if (!allowSelectRows) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (selectedRows.includes(row)) {
|
||||||
|
selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
|
||||||
|
} else {
|
||||||
|
selectedRows = [...selectedRows, row]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !loaded}
|
||||||
|
<div class="loading" style={contentStyle} />
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
on:scroll={onScroll}
|
||||||
|
class:quiet
|
||||||
|
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
|
||||||
|
class="container">
|
||||||
|
<div style={contentStyle}>
|
||||||
|
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
|
||||||
|
<thead class="spectrum-Table-head">
|
||||||
|
<tr>
|
||||||
|
{#if customColumnRenderer}
|
||||||
|
<th class="spectrum-Table-headCell">
|
||||||
|
<div class="spectrum-Table-headCell-content">
|
||||||
|
{customColumnTitle || ''}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
{/if}
|
||||||
|
{#each fields as field}
|
||||||
|
<th
|
||||||
|
class="spectrum-Table-headCell is-sortable"
|
||||||
|
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
|
||||||
|
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
|
||||||
|
on:click={() => sortBy(field)}>
|
||||||
|
<div class="spectrum-Table-headCell-content">
|
||||||
|
<div class="title">
|
||||||
|
{schema[field]?.displayName || schema[field]?.name}
|
||||||
|
</div>
|
||||||
|
{#if schema[field]?.autocolumn}
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||||
|
focusable="false">
|
||||||
|
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
{#if sortColumn === field}
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true">
|
||||||
|
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
{#if allowEditColumns}
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-Table-editIcon"
|
||||||
|
focusable="false"
|
||||||
|
on:click={e => editColumn(e, field)}>
|
||||||
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="spectrum-Table-body">
|
||||||
|
{#each sortedRows as row, idx}
|
||||||
|
<tr
|
||||||
|
on:click={() => toggleSelectRow(row)}
|
||||||
|
class="spectrum-Table-row"
|
||||||
|
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
|
||||||
|
{#if idx >= firstVisibleRow && idx <= lastVisibleRow}
|
||||||
|
{#if customColumnRenderer}
|
||||||
|
<td class="spectrum-Table-cell spectrum-Table-cell--divider">
|
||||||
|
<div class="spectrum-Table-cell-content">
|
||||||
|
<svelte:component
|
||||||
|
this={customColumnRenderer}
|
||||||
|
data={row}
|
||||||
|
selected={selectedRows.includes(row)}
|
||||||
|
onToggleSelection={() => toggleSelectRow(row)}
|
||||||
|
onEdit={e => editRow(e, row)}
|
||||||
|
{allowSelectRows}
|
||||||
|
{allowEditRows} />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
{#each fields as field}
|
||||||
|
<td class="spectrum-Table-cell">
|
||||||
|
<div class="spectrum-Table-cell-content">
|
||||||
|
<CellRenderer schema={schema[field]} value={row[field]} />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.loading,
|
||||||
|
.container,
|
||||||
|
th {
|
||||||
|
background-color: var(--spectrum-global-color-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid
|
||||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--spectrum-global-color-gray-300)
|
||||||
|
var(--spectrum-global-color-gray-100);
|
||||||
|
}
|
||||||
|
.container::-webkit-scrollbar {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
.container::-webkit-scrollbar-track {
|
||||||
|
background: var(--spectrum-global-color-gray-100);
|
||||||
|
}
|
||||||
|
.container::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--spectrum-global-color-gray-300);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 4px solid var(--spectrum-global-color-gray-100);
|
||||||
|
}
|
||||||
|
.container::-webkit-scrollbar-corner {
|
||||||
|
background: var(--spectrum-global-color-gray-100);
|
||||||
|
}
|
||||||
|
.container.quiet {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spectrum-Table-headCell .spectrum-Icon {
|
||||||
|
pointer-events: all;
|
||||||
|
margin-left: var(
|
||||||
|
--spectrum-table-header-sort-icon-gap,
|
||||||
|
var(--spectrum-global-dimension-size-125)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.spectrum-Table-editIcon,
|
||||||
|
.spectrum-Table-autoIcon {
|
||||||
|
width: var(--spectrum-global-dimension-size-150);
|
||||||
|
height: var(--spectrum-global-dimension-size-150);
|
||||||
|
}
|
||||||
|
.spectrum-Table-editIcon {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.spectrum-Table-headCell:hover .spectrum-Table-editIcon {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spectrum,
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid
|
||||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
vertical-align: middle;
|
||||||
|
height: var(--header-height);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.spectrum-Table-headCell-content {
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.spectrum-Table-headCell-content .title {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
tbody tr {
|
||||||
|
height: var(--row-height);
|
||||||
|
}
|
||||||
|
tbody tr.hidden {
|
||||||
|
height: calc(var(--row-height) + 1px);
|
||||||
|
}
|
||||||
|
tbody tr.offset {
|
||||||
|
background-color: red;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: none !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
border-top: 1px solid
|
||||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||||
|
}
|
||||||
|
tr:first-child td {
|
||||||
|
border-top: none !important;
|
||||||
|
}
|
||||||
|
.spectrum:not(.quiet) td.spectrum-Table-cell--divider {
|
||||||
|
width: 1px;
|
||||||
|
border-right: 1px solid
|
||||||
|
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||||
|
}
|
||||||
|
.spectrum-Table-cell-content {
|
||||||
|
height: var(--row-height);
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Table } from "./Table.svelte"
|
||||||
|
|
@ -30,6 +30,7 @@ export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
|
||||||
export { default as Multiselect } from "./Form/Multiselect.svelte"
|
export { default as Multiselect } from "./Form/Multiselect.svelte"
|
||||||
export { default as Slider } from "./Form/Slider.svelte"
|
export { default as Slider } from "./Form/Slider.svelte"
|
||||||
export { default as Context } from "./context"
|
export { default as Context } from "./context"
|
||||||
|
export { default as Table } from "./Table/Table.svelte"
|
||||||
|
|
||||||
// Actions
|
// Actions
|
||||||
export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
|
export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,41 @@
|
||||||
lodash "^4.17.4"
|
lodash "^4.17.4"
|
||||||
read-pkg-up "^7.0.0"
|
read-pkg-up "^7.0.0"
|
||||||
|
|
||||||
|
"@spectrum-css/actionbutton@^1.0.1":
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
|
||||||
|
integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
|
||||||
|
|
||||||
|
"@spectrum-css/button@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
|
||||||
|
integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
|
||||||
|
|
||||||
|
"@spectrum-css/checkbox@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
|
||||||
|
integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
|
||||||
|
|
||||||
|
"@spectrum-css/icon@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
|
||||||
|
integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
|
||||||
|
|
||||||
|
"@spectrum-css/label@^2.0.9":
|
||||||
|
version "2.0.9"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
|
||||||
|
integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
|
||||||
|
|
||||||
|
"@spectrum-css/table@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
|
||||||
|
integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
|
||||||
|
|
||||||
|
"@spectrum-css/vars@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
|
||||||
|
integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
|
||||||
|
|
||||||
"@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
|
"@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
|
||||||
version "1.0.0-next.5"
|
version "1.0.0-next.5"
|
||||||
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
|
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
|
||||||
|
|
@ -1638,6 +1673,11 @@ dateformat@^3.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
||||||
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
|
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
|
||||||
|
|
||||||
|
dayjs@^1.10.4:
|
||||||
|
version "1.10.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
|
||||||
|
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
|
||||||
|
|
||||||
debug@2.6.9:
|
debug@2.6.9:
|
||||||
version "2.6.9"
|
version "2.6.9"
|
||||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
import { goto, params } from "@roxi/routify"
|
import { goto, params } from "@roxi/routify"
|
||||||
import AgGrid from "@budibase/svelte-ag-grid"
|
import { Table, Modal } from "@budibase/bbui"
|
||||||
|
|
||||||
import api from "builderStore/api"
|
import api from "builderStore/api"
|
||||||
import { notifier } from "builderStore/store/notifications"
|
import { notifier } from "builderStore/store/notifications"
|
||||||
import Spinner from "components/common/Spinner.svelte"
|
import Spinner from "components/common/Spinner.svelte"
|
||||||
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
|
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
|
||||||
import {
|
import CreateEditRow from "./modals/CreateEditRow.svelte"
|
||||||
getRenderer,
|
import CreateEditUser from "./modals/CreateEditUser.svelte"
|
||||||
editRowRenderer,
|
import CreateEditColumn from "./modals/CreateEditColumn.svelte"
|
||||||
userRowRenderer,
|
|
||||||
} from "./cells/cellRenderers"
|
|
||||||
import TableLoadingOverlay from "./TableLoadingOverlay"
|
|
||||||
import TableHeader from "./TableHeader"
|
|
||||||
import "@budibase/svelte-ag-grid/dist/index.css"
|
import "@budibase/svelte-ag-grid/dist/index.css"
|
||||||
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
|
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
|
||||||
|
|
||||||
|
|
@ -28,105 +24,24 @@
|
||||||
|
|
||||||
let columnDefs = []
|
let columnDefs = []
|
||||||
let selectedRows = []
|
let selectedRows = []
|
||||||
|
let editableColumn
|
||||||
let options = {
|
let editableRow
|
||||||
defaultColDef: {
|
let editRowModal
|
||||||
flex: 1,
|
let editColumnModal
|
||||||
filter: true,
|
|
||||||
},
|
|
||||||
rowSelection: allowEditing ? "multiple" : false,
|
|
||||||
rowMultiSelectWithClick: true,
|
|
||||||
suppressRowClickSelection: false,
|
|
||||||
suppressFieldDotNotation: true,
|
|
||||||
paginationAutoPageSize: true,
|
|
||||||
pagination: true,
|
|
||||||
enableRangeSelection: true,
|
|
||||||
popupParent: document.body,
|
|
||||||
components: {
|
|
||||||
customLoadingOverlay: TableLoadingOverlay,
|
|
||||||
},
|
|
||||||
loadingOverlayComponent: "customLoadingOverlay",
|
|
||||||
animateRows: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
$: isUsersTable = tableId === TableNames.USERS
|
$: isUsersTable = tableId === TableNames.USERS
|
||||||
|
$: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
|
||||||
$: {
|
$: {
|
||||||
if (isUsersTable) {
|
if (isUsersTable) {
|
||||||
schema.email.displayFieldName = "Email"
|
console.log(schema)
|
||||||
schema.roleId.displayFieldName = "Role"
|
schema.email.displayName = "Email"
|
||||||
|
schema.roleId.displayName = "Role"
|
||||||
if (schema.status) {
|
if (schema.status) {
|
||||||
schema.status.displayFieldName = "Status"
|
schema.status.displayName = "Status"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
|
||||||
// Reset selection every time data changes
|
|
||||||
selectedRows = []
|
|
||||||
|
|
||||||
let result = []
|
|
||||||
if (allowEditing) {
|
|
||||||
result = [
|
|
||||||
{
|
|
||||||
checkboxSelection: true,
|
|
||||||
lockPosition: true,
|
|
||||||
headerName: "Edit",
|
|
||||||
pinned: "left",
|
|
||||||
sortable: false,
|
|
||||||
resizable: false,
|
|
||||||
suppressMovable: true,
|
|
||||||
suppressMenu: true,
|
|
||||||
minWidth: 114,
|
|
||||||
width: 114,
|
|
||||||
cellRenderer: isUsersTable ? userRowRenderer : editRowRenderer,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const canEditColumn = key => {
|
|
||||||
if (!allowEditing) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return !(isUsersTable && UNEDITABLE_USER_FIELDS.includes(key))
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let [key, value] of Object.entries(schema || {})) {
|
|
||||||
// skip autocolumns if hiding
|
|
||||||
if (hideAutocolumns && value.autocolumn) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
let config = {
|
|
||||||
headerCheckboxSelection: false,
|
|
||||||
headerComponent: TableHeader,
|
|
||||||
headerComponentParams: {
|
|
||||||
field: schema[key],
|
|
||||||
editable: canEditColumn(key),
|
|
||||||
},
|
|
||||||
headerName: value.displayFieldName || key,
|
|
||||||
field: key,
|
|
||||||
sortable: true,
|
|
||||||
cellRenderer: getRenderer({
|
|
||||||
schema: schema[key],
|
|
||||||
editable: true,
|
|
||||||
isUsersTable,
|
|
||||||
}),
|
|
||||||
cellRendererParams: {
|
|
||||||
selectRelationship,
|
|
||||||
},
|
|
||||||
autoHeight: true,
|
|
||||||
resizable: true,
|
|
||||||
minWidth: 200,
|
|
||||||
}
|
|
||||||
// sort auto-columns to the end if they are present
|
|
||||||
if (value.autocolumn) {
|
|
||||||
result.push(config)
|
|
||||||
} else {
|
|
||||||
result.unshift(config)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
columnDefs = result
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectRelationship(row, fieldName) {
|
function selectRelationship(row, fieldName) {
|
||||||
if (!row?.[fieldName]?.length) {
|
if (!row?.[fieldName]?.length) {
|
||||||
return
|
return
|
||||||
|
|
@ -145,6 +60,20 @@
|
||||||
notifier.success(`Successfully deleted ${selectedRows.length} rows`)
|
notifier.success(`Successfully deleted ${selectedRows.length} rows`)
|
||||||
selectedRows = []
|
selectedRows = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const editRow = row => {
|
||||||
|
editableRow = row
|
||||||
|
if (row) {
|
||||||
|
editRowModal.show()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const editColumn = field => {
|
||||||
|
editableColumn = schema?.[field]
|
||||||
|
if (editableColumn) {
|
||||||
|
editColumnModal.show()
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -163,17 +92,24 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-wrapper">
|
{#key tableId}
|
||||||
{#key columnDefs.length}
|
<Table
|
||||||
<AgGrid
|
{data}
|
||||||
{theme}
|
{schema}
|
||||||
{options}
|
{loading}
|
||||||
{data}
|
customColumnTitle="Edit"
|
||||||
{columnDefs}
|
bind:selectedRows
|
||||||
{loading}
|
showAutoColumns={!hideAutocolumns}
|
||||||
on:select={({ detail }) => (selectedRows = detail)} />
|
on:editcolumn={e => editColumn(e.detail)}
|
||||||
{/key}
|
on:editrow={e => editRow(e.detail)} />
|
||||||
</div>
|
{/key}
|
||||||
|
|
||||||
|
<Modal bind:this={editRowModal}>
|
||||||
|
<svelte:component this={editRowComponent} row={editableRow} />
|
||||||
|
</Modal>
|
||||||
|
<Modal bind:this={editColumnModal}>
|
||||||
|
<CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.table-title {
|
.table-title {
|
||||||
|
|
@ -206,108 +142,4 @@
|
||||||
.popovers :global(button svg) {
|
.popovers :global(button svg) {
|
||||||
margin-right: var(--spacing-xs);
|
margin-right: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-wrapper {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
.grid-wrapper :global(> *) {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
:global(.grid-wrapper) {
|
|
||||||
--ag-modal-overlay-background-color: transparent;
|
|
||||||
--ag-border-color: var(--grey-3);
|
|
||||||
--ag-header-background-color: var(--grey-1);
|
|
||||||
--ag-odd-row-background-color: var(--grey-1);
|
|
||||||
--ag-row-border-color: var(--grey-3);
|
|
||||||
--ag-background-color: var(--background);
|
|
||||||
--ag-foreground-color: var(--ink);
|
|
||||||
}
|
|
||||||
:global(.ag-overlay-loading-center) {
|
|
||||||
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
|
|
||||||
border-color: var(--grey-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-menu) {
|
|
||||||
border: var(--border-dark) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-popup-child) {
|
|
||||||
border-radius: var(--border-radius-m) !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-header-cell-text) {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-filter) {
|
|
||||||
background: var(--background);
|
|
||||||
padding: var(--spacing-s);
|
|
||||||
outline: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: var(--ink);
|
|
||||||
border-radius: var(--border-radius-m);
|
|
||||||
font-family: var(--font-sans) !important;
|
|
||||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-menu) {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-simple-filter-body-wrapper > *) {
|
|
||||||
margin-bottom: var(--spacing-m) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-select) {
|
|
||||||
height: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-menu input) {
|
|
||||||
color: var(--ink) !important;
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
border-radius: var(--border-radius-s) !important;
|
|
||||||
border: none;
|
|
||||||
background-color: var(--grey-2) !important;
|
|
||||||
padding: var(--spacing-m);
|
|
||||||
margin: 0;
|
|
||||||
outline: none;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
border: var(--border-transparent) !important;
|
|
||||||
transition: 0.2s all;
|
|
||||||
}
|
|
||||||
:global(.ag-menu input:focus) {
|
|
||||||
border: var(--border-blue) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-picker-field-display) {
|
|
||||||
color: var(--ink) !important;
|
|
||||||
font-size: var(--font-size-xs) !important;
|
|
||||||
border-radius: var(--border-radius-s) !important;
|
|
||||||
background-color: var(--grey-2) !important;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
border: var(--border-transparent) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-picker-field-wrapper) {
|
|
||||||
background: var(--grey-2) !important;
|
|
||||||
border: var(--border-transparent) !important;
|
|
||||||
padding-top: var(--spacing-xs);
|
|
||||||
padding-bottom: var(--spacing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-header) {
|
|
||||||
height: 61px !important;
|
|
||||||
min-height: 61px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ag-header-row) {
|
|
||||||
height: 60px !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue