MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remount table when columns change to avoid rare crashes

This commit is contained in:
Andrew Kingston 2022-11-23 12:32:20 +00:00
parent cac780eb50
commit ff5a44692d
1 changed files with 139 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
packages/bbui/src/Table/Table.svelte
View File

@ -270,155 +270,157 @@
} }
</script> </script>
<div {#key fields?.length}
class="wrapper" <div
class:wrapper--quiet={quiet} class="wrapper"
class:wrapper--compact={compact} class:wrapper--quiet={quiet}
bind:offsetHeight={height} class:wrapper--compact={compact}
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`} bind:offsetHeight={height}
> style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
{#if !loaded} >
<div class="loading" style={heightStyle}> {#if !loaded}
<ProgressCircle /> <div class="loading" style={heightStyle}>
</div> <ProgressCircle />
{:else} </div>
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}> {:else}
{#if fields.length} <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
<div class="spectrum-Table-head"> {#if fields.length}
{#if showEditColumn} <div class="spectrum-Table-head">
<div
class:noBorderHeader={!showHeaderBorder}
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
>
{#if allowSelectRows}
<Checkbox
bind:value={checkboxStatus}
on:change={toggleSelectAll}
/>
{:else}
Edit
{/if}
</div>
{/if}
{#each fields as field}
<div
class="spectrum-Table-headCell"
class:noBorderHeader={!showHeaderBorder}
class:spectrum-Table-headCell--alignCenter={schema[field]
.align === "Center"}
class:spectrum-Table-headCell--alignRight={schema[field].align ===
"Right"}
class:is-sortable={schema[field].sortable !== false}
class:is-sorted-desc={sortColumn === field &&
sortOrder === "Descending"}
class:is-sorted-asc={sortColumn === field &&
sortOrder === "Ascending"}
on:click={() => sortBy(schema[field])}
>
<div class="title">{getDisplayName(schema[field])}</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 && schema[field]?.editable !== false}
<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>
{/each}
</div>
{/if}
{#if sortedRows?.length}
{#each sortedRows as row, idx}
<div class="spectrum-Table-row">
{#if showEditColumn} {#if showEditColumn}
<div <div
class:noBorderCheckbox={!showHeaderBorder} class:noBorderHeader={!showHeaderBorder}
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit" class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
on:click={e => {
toggleSelectRow(row)
e.stopPropagation()
}}
> >
<SelectEditRenderer {#if allowSelectRows}
data={row} <Checkbox
selected={selectedRows.findIndex( bind:value={checkboxStatus}
selectedRow => selectedRow._id === row._id on:change={toggleSelectAll}
) !== -1} />
onEdit={e => editRow(e, row)} {:else}
{allowSelectRows} Edit
{allowEditRows} {/if}
/>
</div> </div>
{/if} {/if}
{#each fields as field} {#each fields as field}
<div <div
class="spectrum-Table-cell" class="spectrum-Table-headCell"
class:spectrum-Table-cell--divider={!!schema[field].divider} class:noBorderHeader={!showHeaderBorder}
style={cellStyles[field]} class:spectrum-Table-headCell--alignCenter={schema[field]
on:click={() => { .align === "Center"}
if (!schema[field]?.preventSelectRow) { class:spectrum-Table-headCell--alignRight={schema[field]
dispatch("click", row) .align === "Right"}
toggleSelectRow(row) class:is-sortable={schema[field].sortable !== false}
} class:is-sorted-desc={sortColumn === field &&
}} sortOrder === "Descending"}
class:is-sorted-asc={sortColumn === field &&
sortOrder === "Ascending"}
on:click={() => sortBy(schema[field])}
> >
<CellRenderer <div class="title">{getDisplayName(schema[field])}</div>
{customRenderers} {#if schema[field]?.autocolumn}
{row} <svg
schema={schema[field]} class="spectrum-Icon spectrum-Table-autoIcon"
value={deepGet(row, field)} focusable="false"
on:clickrelationship >
on:buttonclick <use xlink:href="#spectrum-icon-18-MagicWand" />
> </svg>
<slot /> {/if}
</CellRenderer> {#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 && schema[field]?.editable !== false}
<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> </div>
{/each} {/each}
</div> </div>
{/each} {/if}
{:else} {#if sortedRows?.length}
<div {#each sortedRows as row, idx}
class="placeholder" <div class="spectrum-Table-row">
class:placeholder--custom={customPlaceholder} {#if showEditColumn}
class:placeholder--no-fields={!fields?.length} <div
> class:noBorderCheckbox={!showHeaderBorder}
{#if customPlaceholder} class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
<slot name="placeholder" /> on:click={e => {
{:else} toggleSelectRow(row)
<div class="placeholder-content"> e.stopPropagation()
<svg }}
class="spectrum-Icon spectrum-Icon--sizeXXL" >
focusable="false" <SelectEditRenderer
> data={row}
<use xlink:href="#spectrum-icon-18-Table" /> selected={selectedRows.findIndex(
</svg> selectedRow => selectedRow._id === row._id
<div>{placeholderText}</div> ) !== -1}
onEdit={e => editRow(e, row)}
{allowSelectRows}
{allowEditRows}
/>
</div>
{/if}
{#each fields as field}
<div
class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider}
style={cellStyles[field]}
on:click={() => {
if (!schema[field]?.preventSelectRow) {
dispatch("click", row)
toggleSelectRow(row)
}
}}
>
<CellRenderer
{customRenderers}
{row}
schema={schema[field]}
value={deepGet(row, field)}
on:clickrelationship
on:buttonclick
>
<slot />
</CellRenderer>
</div>
{/each}
</div> </div>
{/if} {/each}
</div> {:else}
{/if} <div
</div> class="placeholder"
{/if} class:placeholder--custom={customPlaceholder}
</div> class:placeholder--no-fields={!fields?.length}
>
{#if customPlaceholder}
<slot name="placeholder" />
{:else}
<div class="placeholder-content">
<svg
class="spectrum-Icon spectrum-Icon--sizeXXL"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
<div>{placeholderText}</div>
</div>
{/if}
</div>
{/if}
</div>
{/if}
</div>
{/key}
<style> <style>
/* Wrapper */ /* Wrapper */