Update tables to use button actions rather than link settings
This commit is contained in:
parent
aa81e0451a
commit
8b941df5ff
5 changed files with 36 additions and 38 deletions
|
@ -64,7 +64,7 @@
|
||||||
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
||||||
}
|
}
|
||||||
svg.hoverable:hover {
|
svg.hoverable:hover {
|
||||||
color: var(--spectrum-alias-icon-color-selected-hover);
|
color: var(--spectrum-alias-icon-color-selected-hover) !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3786,29 +3786,13 @@
|
||||||
"info": "Row selection is only compatible with internal or SQL tables"
|
"info": "Row selection is only compatible with internal or SQL tables"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "boolean",
|
"type": "event",
|
||||||
"label": "Link table rows",
|
"label": "On row click",
|
||||||
"key": "linkRows"
|
"key": "onClick",
|
||||||
},
|
"context": [
|
||||||
{
|
{
|
||||||
"type": "boolean",
|
"label": "Clicked row",
|
||||||
"label": "Open link screens in modal",
|
"key": "row"
|
||||||
"key": "linkPeek"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "url",
|
|
||||||
"label": "Link screen",
|
|
||||||
"key": "linkURL"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"section": true,
|
|
||||||
"name": "Advanced",
|
|
||||||
"settings": [
|
|
||||||
{
|
|
||||||
"type": "field",
|
|
||||||
"label": "ID column for linking (appended to URL)",
|
|
||||||
"key": "linkColumn",
|
|
||||||
"placeholder": "Default"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -249,7 +249,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="side-panel-container" class:open={$sidePanelStore.open}>
|
<div id="side-panel-container" class:open={$sidePanelStore.open}>
|
||||||
<div class="side-panel-header">
|
<div class="side-panel-header">
|
||||||
<Icon name="Close" hoverable on:click={sidePanelStore.actions.close} />
|
<Icon
|
||||||
|
color="var(--spectrum-global-color-gray-600)"
|
||||||
|
name="RailRightClose"
|
||||||
|
hoverable
|
||||||
|
on:click={sidePanelStore.actions.close}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -345,7 +350,7 @@
|
||||||
margin-right: -410px;
|
margin-right: -410px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-xl);
|
gap: 30px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-left: 1px solid var(--spectrum-global-color-gray-300);
|
border-left: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,6 +46,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.side-panel {
|
.side-panel {
|
||||||
|
flex: 1 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
|
@ -11,12 +11,15 @@
|
||||||
export let rowCount
|
export let rowCount
|
||||||
export let quiet
|
export let quiet
|
||||||
export let size
|
export let size
|
||||||
|
export let allowSelectRows
|
||||||
|
export let compact
|
||||||
|
export let onClick
|
||||||
|
|
||||||
|
// Legacy settings, still supported for old apps
|
||||||
export let linkRows
|
export let linkRows
|
||||||
export let linkURL
|
export let linkURL
|
||||||
export let linkColumn
|
export let linkColumn
|
||||||
export let linkPeek
|
export let linkPeek
|
||||||
export let allowSelectRows
|
|
||||||
export let compact
|
|
||||||
|
|
||||||
const component = getContext("component")
|
const component = getContext("component")
|
||||||
const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
|
const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
|
||||||
|
@ -28,7 +31,9 @@
|
||||||
component: SlotRenderer,
|
component: SlotRenderer,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
let selectedRows = []
|
let selectedRows = []
|
||||||
|
|
||||||
$: hasChildren = $component.children
|
$: hasChildren = $component.children
|
||||||
$: loading = dataProvider?.loading ?? false
|
$: loading = dataProvider?.loading ?? false
|
||||||
$: data = dataProvider?.rows || []
|
$: data = dataProvider?.rows || []
|
||||||
|
@ -40,7 +45,6 @@
|
||||||
ActionTypes.SetDataProviderSorting
|
ActionTypes.SetDataProviderSorting
|
||||||
)
|
)
|
||||||
$: table = dataProvider?.datasource?.type === "table"
|
$: table = dataProvider?.datasource?.type === "table"
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
rowSelectionStore.actions.updateSelection(
|
rowSelectionStore.actions.updateSelection(
|
||||||
$component.id,
|
$component.id,
|
||||||
|
@ -118,10 +122,13 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onClick = e => {
|
const handleClick = e => {
|
||||||
if (!linkRows || !linkURL) {
|
if (onClick) {
|
||||||
return
|
onClick({ row: e.detail })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle legacy settings
|
||||||
|
else if (linkRows && linkURL) {
|
||||||
const col = linkColumn || "_id"
|
const col = linkColumn || "_id"
|
||||||
const id = e.detail?.[col]
|
const id = e.detail?.[col]
|
||||||
if (!id) {
|
if (!id) {
|
||||||
|
@ -130,6 +137,7 @@
|
||||||
const split = linkURL.split("/:")
|
const split = linkURL.split("/:")
|
||||||
routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
|
routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
rowSelectionStore.actions.updateSelection($component.id, [])
|
rowSelectionStore.actions.updateSelection($component.id, [])
|
||||||
|
@ -153,7 +161,7 @@
|
||||||
disableSorting
|
disableSorting
|
||||||
autoSortColumns={!columns?.length}
|
autoSortColumns={!columns?.length}
|
||||||
on:sort={onSort}
|
on:sort={onSort}
|
||||||
on:click={onClick}
|
on:click={handleClick}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</Table>
|
</Table>
|
||||||
|
|
Loading…
Reference in a new issue