Add spectrum table to BBUI and update builder
This commit is contained in:
Andrew Kingston
parent
eb143f9af3
commit
5ef5106f07
|
|
@ -43,6 +43,14 @@
|
|||
"dist"
|
||||
],
|
||||
"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",
|
||||
"quill": "^1.3.7",
|
||||
"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 Slider } from "./Form/Slider.svelte"
|
||||
export { default as Context } from "./context"
|
||||
export { default as Table } from "./Table/Table.svelte"
|
||||
|
||||
// Actions
|
||||
export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
|
||||
|
|
|
|||
|
|
@ -410,6 +410,41 @@
|
|||
lodash "^4.17.4"
|
||||
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":
|
||||
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"
|
||||
|
|
@ -1638,6 +1673,11 @@ dateformat@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
||||
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:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
<script>
|
||||
import { fade } from "svelte/transition"
|
||||
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 { notifier } from "builderStore/store/notifications"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
|
||||
import {
|
||||
getRenderer,
|
||||
editRowRenderer,
|
||||
userRowRenderer,
|
||||
} from "./cells/cellRenderers"
|
||||
import TableLoadingOverlay from "./TableLoadingOverlay"
|
||||
import TableHeader from "./TableHeader"
|
||||
import CreateEditRow from "./modals/CreateEditRow.svelte"
|
||||
import CreateEditUser from "./modals/CreateEditUser.svelte"
|
||||
import CreateEditColumn from "./modals/CreateEditColumn.svelte"
|
||||
import "@budibase/svelte-ag-grid/dist/index.css"
|
||||
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
|
||||
|
||||
|
|
@ -28,105 +24,24 @@
|
|||
|
||||
let columnDefs = []
|
||||
let selectedRows = []
|
||||
|
||||
let options = {
|
||||
defaultColDef: {
|
||||
flex: 1,
|
||||
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,
|
||||
}
|
||||
let editableColumn
|
||||
let editableRow
|
||||
let editRowModal
|
||||
let editColumnModal
|
||||
|
||||
$: isUsersTable = tableId === TableNames.USERS
|
||||
$: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
|
||||
$: {
|
||||
if (isUsersTable) {
|
||||
schema.email.displayFieldName = "Email"
|
||||
schema.roleId.displayFieldName = "Role"
|
||||
console.log(schema)
|
||||
schema.email.displayName = "Email"
|
||||
schema.roleId.displayName = "Role"
|
||||
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) {
|
||||
if (!row?.[fieldName]?.length) {
|
||||
return
|
||||
|
|
@ -145,6 +60,20 @@
|
|||
notifier.success(`Successfully deleted ${selectedRows.length} rows`)
|
||||
selectedRows = []
|
||||
}
|
||||
|
||||
const editRow = row => {
|
||||
editableRow = row
|
||||
if (row) {
|
||||
editRowModal.show()
|
||||
}
|
||||
}
|
||||
|
||||
const editColumn = field => {
|
||||
editableColumn = schema?.[field]
|
||||
if (editableColumn) {
|
||||
editColumnModal.show()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
|
|
@ -163,17 +92,24 @@
|
|||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-wrapper">
|
||||
{#key columnDefs.length}
|
||||
<AgGrid
|
||||
{theme}
|
||||
{options}
|
||||
{data}
|
||||
{columnDefs}
|
||||
{loading}
|
||||
on:select={({ detail }) => (selectedRows = detail)} />
|
||||
{/key}
|
||||
</div>
|
||||
{#key tableId}
|
||||
<Table
|
||||
{data}
|
||||
{schema}
|
||||
{loading}
|
||||
customColumnTitle="Edit"
|
||||
bind:selectedRows
|
||||
showAutoColumns={!hideAutocolumns}
|
||||
on:editcolumn={e => editColumn(e.detail)}
|
||||
on:editrow={e => editRow(e.detail)} />
|
||||
{/key}
|
||||
|
||||
<Modal bind:this={editRowModal}>
|
||||
<svelte:component this={editRowComponent} row={editableRow} />
|
||||
</Modal>
|
||||
<Modal bind:this={editColumnModal}>
|
||||
<CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.table-title {
|
||||
|
|
@ -206,108 +142,4 @@
|
|||
.popovers :global(button svg) {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue