Fix for table and view editing. Mutation was causing several issues in the builder
This commit is contained in:
parent
41e017f3ba
commit
57cda93bf5
2 changed files with 30 additions and 9 deletions
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
|
import { cloneDeep } from "lodash/fp"
|
||||||
import { tables, datasources } from "stores/backend"
|
import { tables, datasources } from "stores/backend"
|
||||||
import {
|
import {
|
||||||
ActionMenu,
|
ActionMenu,
|
||||||
|
@ -18,7 +19,10 @@
|
||||||
let editorModal
|
let editorModal
|
||||||
let confirmDeleteDialog
|
let confirmDeleteDialog
|
||||||
let error = ""
|
let error = ""
|
||||||
let originalName = table.name
|
|
||||||
|
let originalName
|
||||||
|
let updatedName
|
||||||
|
|
||||||
let templateScreens
|
let templateScreens
|
||||||
let willBeDeleted
|
let willBeDeleted
|
||||||
let deleteTableName
|
let deleteTableName
|
||||||
|
@ -59,7 +63,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
await tables.save(table)
|
const updatedTable = cloneDeep(table)
|
||||||
|
updatedTable.name = updatedName
|
||||||
|
await tables.save(updatedTable)
|
||||||
notifications.success("Table renamed successfully")
|
notifications.success("Table renamed successfully")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -70,6 +76,11 @@
|
||||||
? `Table with name ${tableName} already exists. Please choose another name.`
|
? `Table with name ${tableName} already exists. Please choose another name.`
|
||||||
: ""
|
: ""
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const initForm = () => {
|
||||||
|
originalName = table.name + ""
|
||||||
|
updatedName = table.name + ""
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if allowDeletion}
|
{#if allowDeletion}
|
||||||
|
@ -84,17 +95,17 @@
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Modal bind:this={editorModal}>
|
<Modal bind:this={editorModal} on:show={initForm}>
|
||||||
<ModalContent
|
<ModalContent
|
||||||
title="Edit Table"
|
title="Edit Table"
|
||||||
confirmText="Save"
|
confirmText="Save"
|
||||||
onConfirm={save}
|
onConfirm={save}
|
||||||
disabled={table.name === originalName || error}
|
disabled={updatedName === originalName || error}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
label="Table Name"
|
label="Table Name"
|
||||||
thin
|
thin
|
||||||
bind:value={table.name}
|
bind:value={updatedName}
|
||||||
on:input={checkValid}
|
on:input={checkValid}
|
||||||
{error}
|
{error}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
import { views } from "stores/backend"
|
import { views } from "stores/backend"
|
||||||
|
import { cloneDeep } from "lodash/fp"
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
import {
|
import {
|
||||||
notifications,
|
notifications,
|
||||||
|
@ -15,13 +16,17 @@
|
||||||
export let view
|
export let view
|
||||||
|
|
||||||
let editorModal
|
let editorModal
|
||||||
let originalName = view.name
|
let originalName
|
||||||
|
let updatedName
|
||||||
let confirmDeleteDialog
|
let confirmDeleteDialog
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
|
const updatedView = cloneDeep(view)
|
||||||
|
updatedView.name = updatedName
|
||||||
|
|
||||||
await views.save({
|
await views.save({
|
||||||
originalName,
|
originalName,
|
||||||
...view,
|
...updatedView,
|
||||||
})
|
})
|
||||||
notifications.success("View renamed successfully")
|
notifications.success("View renamed successfully")
|
||||||
}
|
}
|
||||||
|
@ -37,6 +42,11 @@
|
||||||
notifications.error("Error deleting view")
|
notifications.error("Error deleting view")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const initForm = () => {
|
||||||
|
updatedName = view.name + ""
|
||||||
|
originalName = view.name + ""
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
|
@ -46,9 +56,9 @@
|
||||||
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
|
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
<Modal bind:this={editorModal}>
|
<Modal bind:this={editorModal} on:show={initForm}>
|
||||||
<ModalContent title="Edit View" onConfirm={save} confirmText="Save">
|
<ModalContent title="Edit View" onConfirm={save} confirmText="Save">
|
||||||
<Input label="View Name" thin bind:value={view.name} />
|
<Input label="View Name" thin bind:value={updatedName} />
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|
Loading…
Reference in a new issue