Request new name for row actions rather than autonaming
This commit is contained in:
parent
df54d5dd2b
commit
714d05a9d2
|
@ -30,7 +30,9 @@
|
||||||
export let custom = false
|
export let custom = false
|
||||||
|
|
||||||
const { hide, cancel } = getContext(Context.Modal)
|
const { hide, cancel } = getContext(Context.Modal)
|
||||||
|
|
||||||
let loading = false
|
let loading = false
|
||||||
|
|
||||||
$: confirmDisabled = disabled || loading
|
$: confirmDisabled = disabled || loading
|
||||||
|
|
||||||
async function secondary(e) {
|
async function secondary(e) {
|
||||||
|
@ -90,7 +92,7 @@
|
||||||
|
|
||||||
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
||||||
<section class="spectrum-Dialog-content content-grid">
|
<section class="spectrum-Dialog-content content-grid">
|
||||||
<slot />
|
<slot {loading} />
|
||||||
</section>
|
</section>
|
||||||
{#if showCancelButton || showConfirmButton || $$slots.footer}
|
{#if showCancelButton || showConfirmButton || $$slots.footer}
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -6,6 +6,9 @@
|
||||||
Button,
|
Button,
|
||||||
Toggle,
|
Toggle,
|
||||||
notifications,
|
notifications,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
Input,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import DetailPopover from "components/common/DetailPopover.svelte"
|
import DetailPopover from "components/common/DetailPopover.svelte"
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
|
@ -15,6 +18,10 @@
|
||||||
|
|
||||||
const { datasource } = getContext("grid")
|
const { datasource } = getContext("grid")
|
||||||
|
|
||||||
|
let popover
|
||||||
|
let createModal
|
||||||
|
let newName
|
||||||
|
|
||||||
$: ds = $datasource
|
$: ds = $datasource
|
||||||
$: tableId = ds?.tableId
|
$: tableId = ds?.tableId
|
||||||
$: viewId = ds?.id
|
$: viewId = ds?.id
|
||||||
|
@ -22,6 +29,7 @@
|
||||||
$: tableRowActions = $rowActions[tableId] || []
|
$: tableRowActions = $rowActions[tableId] || []
|
||||||
$: viewRowActions = $rowActions[viewId] || []
|
$: viewRowActions = $rowActions[viewId] || []
|
||||||
$: actionCount = isView ? viewRowActions.length : tableRowActions.length
|
$: actionCount = isView ? viewRowActions.length : tableRowActions.length
|
||||||
|
$: newNameInvalid = newName && tableRowActions.some(x => x.name === newName)
|
||||||
|
|
||||||
const rowActionUrl = derived([url, appStore], ([$url, $appStore]) => {
|
const rowActionUrl = derived([url, appStore], ([$url, $appStore]) => {
|
||||||
return ({ automationId }) => {
|
return ({ automationId }) => {
|
||||||
|
@ -29,17 +37,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const createRowAction = async () => {
|
|
||||||
try {
|
|
||||||
const newRowAction = await rowActions.createRowAction(tableId, viewId)
|
|
||||||
notifications.success("Row action created successfully")
|
|
||||||
$goto($rowActionUrl(newRowAction))
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
notifications.error("Error creating row action")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleAction = async (action, enabled) => {
|
const toggleAction = async (action, enabled) => {
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
await rowActions.enableView(tableId, viewId, action.id)
|
await rowActions.enableView(tableId, viewId, action.id)
|
||||||
|
@ -47,9 +44,30 @@
|
||||||
await rowActions.disableView(tableId, viewId, action.id)
|
await rowActions.disableView(tableId, viewId, action.id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const showCreateModal = () => {
|
||||||
|
newName = null
|
||||||
|
popover.hide()
|
||||||
|
createModal.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
const createRowAction = async () => {
|
||||||
|
try {
|
||||||
|
const newRowAction = await rowActions.createRowAction(
|
||||||
|
tableId,
|
||||||
|
viewId,
|
||||||
|
newName
|
||||||
|
)
|
||||||
|
notifications.success("Row action created successfully")
|
||||||
|
$goto($rowActionUrl(newRowAction))
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
notifications.error("Error creating row action")
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DetailPopover title="Row actions">
|
<DetailPopover title="Row actions" bind:this={popover}>
|
||||||
<svelte:fragment slot="anchor" let:open>
|
<svelte:fragment slot="anchor" let:open>
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon="Engagement"
|
icon="Engagement"
|
||||||
|
@ -88,12 +106,34 @@
|
||||||
</List>
|
</List>
|
||||||
{/if}
|
{/if}
|
||||||
<div>
|
<div>
|
||||||
<Button secondary icon="Engagement" on:click={createRowAction}>
|
<Button secondary icon="Engagement" on:click={showCreateModal}>
|
||||||
Create row action
|
Create row action
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DetailPopover>
|
</DetailPopover>
|
||||||
|
|
||||||
|
<Modal bind:this={createModal}>
|
||||||
|
<ModalContent
|
||||||
|
size="S"
|
||||||
|
title="Create row action"
|
||||||
|
confirmText="Create"
|
||||||
|
showCancelButton={false}
|
||||||
|
showDivider={false}
|
||||||
|
showCloseIcon={false}
|
||||||
|
disabled={!newName || newNameInvalid}
|
||||||
|
onConfirm={createRowAction}
|
||||||
|
let:loading
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label="Name"
|
||||||
|
bind:value={newName}
|
||||||
|
error={newNameInvalid && !loading
|
||||||
|
? "A row action with this name already exists"
|
||||||
|
: null}
|
||||||
|
/>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
span :global(.spectrum-Switch) {
|
span :global(.spectrum-Switch) {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
|
@ -41,16 +41,18 @@ export class RowActionStore extends BudiStore {
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
createRowAction = async (tableId, viewId) => {
|
createRowAction = async (tableId, viewId, name) => {
|
||||||
if (!tableId) {
|
if (!tableId) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get a unique name for this action
|
// Get a unique name for this action
|
||||||
const existingRowActions = get(this.store)[tableId] || []
|
if (!name) {
|
||||||
const name = getSequentialName(existingRowActions, "New row action ", {
|
const existingRowActions = get(this.store)[tableId] || []
|
||||||
getName: x => x.name,
|
name = getSequentialName(existingRowActions, "New row action ", {
|
||||||
})
|
getName: x => x.name,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// Create the action
|
// Create the action
|
||||||
const res = await API.rowActions.create({
|
const res = await API.rowActions.create({
|
||||||
|
|
Loading…
Reference in New Issue