Added delete functionality to the edit table row modal
This commit is contained in:
parent
4c0fe0925a
commit
7b65b693e0
4 changed files with 71 additions and 24 deletions
|
@ -28,9 +28,9 @@
|
|||
let loading = false
|
||||
$: confirmDisabled = disabled || loading
|
||||
|
||||
async function secondary() {
|
||||
async function secondary(e) {
|
||||
loading = true
|
||||
if (!secondaryAction || (await secondaryAction()) !== false) {
|
||||
if (!secondaryAction || (await secondaryAction(e)) !== false) {
|
||||
hide()
|
||||
}
|
||||
loading = false
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
|
||||
import { API } from "api"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
|
||||
import CreateEditRow from "./modals/CreateEditRow.svelte"
|
||||
import CreateEditUser from "./modals/CreateEditUser.svelte"
|
||||
|
@ -34,8 +35,8 @@
|
|||
let editRowModal
|
||||
let editColumnModal
|
||||
let customRenderers = []
|
||||
let confirmDelete
|
||||
|
||||
$: isInternal = type !== "external"
|
||||
$: isUsersTable = tableId === TableNames.USERS
|
||||
$: data && resetSelectedRows()
|
||||
$: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
|
||||
|
@ -89,15 +90,17 @@
|
|||
)
|
||||
}
|
||||
|
||||
const deleteRows = async () => {
|
||||
const deleteRows = async targetRows => {
|
||||
try {
|
||||
await API.deleteRows({
|
||||
tableId,
|
||||
rows: selectedRows,
|
||||
rows: targetRows,
|
||||
})
|
||||
data = data.filter(row => !selectedRows.includes(row))
|
||||
notifications.success(`Successfully deleted ${selectedRows.length} rows`)
|
||||
selectedRows = []
|
||||
|
||||
const deletedRowIds = targetRows.map(row => row._id)
|
||||
data = data.filter(row => deletedRowIds.indexOf(row._id))
|
||||
|
||||
notifications.success(`Successfully deleted ${targetRows.length} rows`)
|
||||
} catch (error) {
|
||||
notifications.error("Error deleting rows")
|
||||
}
|
||||
|
@ -133,7 +136,14 @@
|
|||
<div class="popovers">
|
||||
<slot />
|
||||
{#if !isUsersTable && selectedRows.length > 0}
|
||||
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
|
||||
<DeleteRowsButton
|
||||
on:updaterows
|
||||
{selectedRows}
|
||||
deleteRows={async rows => {
|
||||
await deleteRows(rows)
|
||||
resetSelectedRows()
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
|
@ -164,8 +174,33 @@
|
|||
</Layout>
|
||||
|
||||
<Modal bind:this={editRowModal}>
|
||||
<svelte:component this={editRowComponent} on:updaterows row={editableRow} />
|
||||
<svelte:component
|
||||
this={editRowComponent}
|
||||
on:updaterows
|
||||
on:deleteRows={() => {
|
||||
confirmDelete.show()
|
||||
}}
|
||||
row={editableRow}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDelete}
|
||||
okText="Delete"
|
||||
onOk={async () => {
|
||||
if (editableRow) {
|
||||
await deleteRows([editableRow])
|
||||
}
|
||||
editableRow = undefined
|
||||
}}
|
||||
onCancel={async () => {
|
||||
editRow(editableRow)
|
||||
}}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you want to delete this row?
|
||||
</ConfirmDialog>
|
||||
|
||||
<Modal bind:this={editColumnModal}>
|
||||
<CreateEditColumn
|
||||
field={editableColumn}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
let modal
|
||||
|
||||
async function confirmDeletion() {
|
||||
await deleteRows()
|
||||
await deleteRows(selectedRows)
|
||||
modal?.hide()
|
||||
dispatch("updaterows")
|
||||
}
|
||||
|
|
|
@ -50,22 +50,34 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title={creating ? "Create Row" : "Edit Row"}
|
||||
confirmText={creating ? "Create Row" : "Save Row"}
|
||||
onConfirm={saveRow}
|
||||
>
|
||||
{#each tableSchema as [key, meta]}
|
||||
{#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
|
||||
<div>
|
||||
<RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</ModalContent>
|
||||
<span class="modal-wrap">
|
||||
<ModalContent
|
||||
title={creating ? "Create Row" : "Edit Row"}
|
||||
confirmText={creating ? "Create Row" : "Save Row"}
|
||||
onConfirm={saveRow}
|
||||
showCancelButton={creating}
|
||||
showSecondaryButton={!creating}
|
||||
secondaryButtonWarning={!creating}
|
||||
secondaryButtonText="Delete"
|
||||
secondaryAction={() => {
|
||||
dispatch("deleteRows", row)
|
||||
}}
|
||||
>
|
||||
{#each tableSchema as [key, meta]}
|
||||
{#if !meta.autocolumn && meta.type !== FORMULA_TYPE}
|
||||
<div>
|
||||
<RowFieldControl error={errors[key]} {meta} bind:value={row[key]} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</ModalContent>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
div {
|
||||
min-width: 0;
|
||||
}
|
||||
.modal-wrap :global(.secondary-action) {
|
||||
margin-right: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue