|
|
@ -5,6 +5,7 @@ |
|
|
import SelectEditRenderer from "./SelectEditRenderer.svelte" |
|
|
import SelectEditRenderer from "./SelectEditRenderer.svelte" |
|
|
import { cloneDeep, deepGet } from "../helpers" |
|
|
import { cloneDeep, deepGet } from "../helpers" |
|
|
import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte" |
|
|
import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte" |
|
|
|
|
|
import Checkbox from "../Form/Checkbox.svelte" |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* The expected schema is our normal couch schemas for our tables. |
|
|
* The expected schema is our normal couch schemas for our tables. |
|
|
@ -31,7 +32,6 @@ |
|
|
export let allowEditRows = true |
|
|
export let allowEditRows = true |
|
|
export let allowEditColumns = true |
|
|
export let allowEditColumns = true |
|
|
export let selectedRows = [] |
|
|
export let selectedRows = [] |
|
|
export let editColumnTitle = "Edit" |
|
|
|
|
|
export let customRenderers = [] |
|
|
export let customRenderers = [] |
|
|
export let disableSorting = false |
|
|
export let disableSorting = false |
|
|
export let autoSortColumns = true |
|
|
export let autoSortColumns = true |
|
|
@ -50,6 +50,8 @@ |
|
|
// Table state |
|
|
// Table state |
|
|
let height = 0 |
|
|
let height = 0 |
|
|
let loaded = false |
|
|
let loaded = false |
|
|
|
|
|
let checkboxStatus = false |
|
|
|
|
|
|
|
|
$: schema = fixSchema(schema) |
|
|
$: schema = fixSchema(schema) |
|
|
$: if (!loading) loaded = true |
|
|
$: if (!loading) loaded = true |
|
|
$: fields = getFields(schema, showAutoColumns, autoSortColumns) |
|
|
$: fields = getFields(schema, showAutoColumns, autoSortColumns) |
|
|
@ -67,6 +69,16 @@ |
|
|
$: showEditColumn = allowEditRows || allowSelectRows |
|
|
$: showEditColumn = allowEditRows || allowSelectRows |
|
|
$: cellStyles = computeCellStyles(schema) |
|
|
$: cellStyles = computeCellStyles(schema) |
|
|
|
|
|
|
|
|
|
|
|
// Deselect the "select all" checkbox when the user navigates to a new page |
|
|
|
|
|
$: { |
|
|
|
|
|
let checkRowCount = rows.filter(o1 => |
|
|
|
|
|
selectedRows.some(o2 => o1._id === o2._id) |
|
|
|
|
|
) |
|
|
|
|
|
if (checkRowCount.length === 0) { |
|
|
|
|
|
checkboxStatus = false |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const fixSchema = schema => { |
|
|
const fixSchema = schema => { |
|
|
let fixedSchema = {} |
|
|
let fixedSchema = {} |
|
|
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => { |
|
|
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => { |
|
|
@ -197,13 +209,32 @@ |
|
|
if (!allowSelectRows) { |
|
|
if (!allowSelectRows) { |
|
|
return |
|
|
return |
|
|
} |
|
|
} |
|
|
if (selectedRows.includes(row)) { |
|
|
if (selectedRows.some(selectedRow => selectedRow._id === row._id)) { |
|
|
selectedRows = selectedRows.filter(selectedRow => selectedRow !== row) |
|
|
selectedRows = selectedRows.filter( |
|
|
|
|
|
selectedRow => selectedRow._id !== row._id |
|
|
|
|
|
) |
|
|
} else { |
|
|
} else { |
|
|
selectedRows = [...selectedRows, row] |
|
|
selectedRows = [...selectedRows, row] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const toggleSelectAll = e => { |
|
|
|
|
|
const select = !!e.detail |
|
|
|
|
|
if (select) { |
|
|
|
|
|
// Add any rows which are not already in selected rows |
|
|
|
|
|
rows.forEach(row => { |
|
|
|
|
|
if (selectedRows.findIndex(x => x._id === row._id) === -1) { |
|
|
|
|
|
selectedRows.push(row) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} else { |
|
|
|
|
|
// Remove any rows from selected rows that are in the current data set |
|
|
|
|
|
selectedRows = selectedRows.filter(el => |
|
|
|
|
|
rows.every(f => f._id !== el._id) |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const computeCellStyles = schema => { |
|
|
const computeCellStyles = schema => { |
|
|
let styles = {} |
|
|
let styles = {} |
|
|
Object.keys(schema || {}).forEach(field => { |
|
|
Object.keys(schema || {}).forEach(field => { |
|
|
@ -244,7 +275,14 @@ |
|
|
<div |
|
|
<div |
|
|
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit" |
|
|
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit" |
|
|
> |
|
|
> |
|
|
{editColumnTitle || ""} |
|
|
{#if allowSelectRows} |
|
|
|
|
|
<Checkbox |
|
|
|
|
|
bind:value={checkboxStatus} |
|
|
|
|
|
on:change={toggleSelectAll} |
|
|
|
|
|
/> |
|
|
|
|
|
{:else} |
|
|
|
|
|
Edit |
|
|
|
|
|
{/if} |
|
|
</div> |
|
|
</div> |
|
|
{/if} |
|
|
{/if} |
|
|
{#each fields as field} |
|
|
{#each fields as field} |
|
|
@ -302,11 +340,16 @@ |
|
|
{#if showEditColumn} |
|
|
{#if showEditColumn} |
|
|
<div |
|
|
<div |
|
|
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit" |
|
|
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit" |
|
|
|
|
|
on:click={e => { |
|
|
|
|
|
toggleSelectRow(row) |
|
|
|
|
|
e.stopPropagation() |
|
|
|
|
|
}} |
|
|
> |
|
|
> |
|
|
<SelectEditRenderer |
|
|
<SelectEditRenderer |
|
|
data={row} |
|
|
data={row} |
|
|
selected={selectedRows.includes(row)} |
|
|
selected={selectedRows.findIndex( |
|
|
onToggleSelection={() => toggleSelectRow(row)} |
|
|
selectedRow => selectedRow._id === row._id |
|
|
|
|
|
) !== -1} |
|
|
onEdit={e => editRow(e, row)} |
|
|
onEdit={e => editRow(e, row)} |
|
|
{allowSelectRows} |
|
|
{allowSelectRows} |
|
|
{allowEditRows} |
|
|
{allowEditRows} |
|
|
|
Peter Clement
5 years ago
GitHub