|
|
|
@ -1,9 +1,11 @@ |
|
|
|
<script> |
|
|
|
import { backendUiStore } from "builderStore" |
|
|
|
import { backendUiStore, store } from "builderStore" |
|
|
|
import { notifier } from "builderStore/store/notifications" |
|
|
|
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui" |
|
|
|
import { FIELDS } from "constants/backend" |
|
|
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|
|
|
import screenTemplates from "builderStore/store/screenTemplates" |
|
|
|
import api from "builderStore/api" |
|
|
|
|
|
|
|
export let table |
|
|
|
|
|
|
|
@ -11,6 +13,10 @@ |
|
|
|
let dropdown |
|
|
|
let editing |
|
|
|
let confirmDeleteDialog |
|
|
|
let error = "" |
|
|
|
let originalName = table.name |
|
|
|
let templateScreens |
|
|
|
let willBeDeleted |
|
|
|
|
|
|
|
$: fields = Object.keys(table.schema) |
|
|
|
|
|
|
|
@ -24,12 +30,18 @@ |
|
|
|
} |
|
|
|
|
|
|
|
function showModal() { |
|
|
|
const screens = $store.allScreens |
|
|
|
templateScreens = screens.filter(screen => screen.props.table === table._id) |
|
|
|
willBeDeleted = ["All table data"].concat( |
|
|
|
templateScreens.map(screen => `Screen ${screen.props._instanceName}`) |
|
|
|
) |
|
|
|
hideEditor() |
|
|
|
confirmDeleteDialog.show() |
|
|
|
} |
|
|
|
|
|
|
|
async function deleteTable() { |
|
|
|
await backendUiStore.actions.tables.delete(table) |
|
|
|
store.deleteScreens(templateScreens) |
|
|
|
notifier.success("Table deleted") |
|
|
|
hideEditor() |
|
|
|
} |
|
|
|
@ -39,6 +51,18 @@ |
|
|
|
notifier.success("Table renamed successfully") |
|
|
|
hideEditor() |
|
|
|
} |
|
|
|
|
|
|
|
function checkValid(evt) { |
|
|
|
const tableName = evt.target.value |
|
|
|
if ( |
|
|
|
originalName !== tableName && |
|
|
|
$backendUiStore.models?.some(model => model.name === tableName) |
|
|
|
) { |
|
|
|
error = `Table with name ${tableName} already exists. Please choose another name.` |
|
|
|
return |
|
|
|
} |
|
|
|
error = "" |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<div bind:this={anchor} class="icon" on:click={dropdown.show}> |
|
|
|
@ -48,7 +72,12 @@ |
|
|
|
{#if editing} |
|
|
|
<div class="actions"> |
|
|
|
<h5>Edit Table</h5> |
|
|
|
<Input label="Table Name" thin bind:value={table.name} /> |
|
|
|
<Input |
|
|
|
label="Table Name" |
|
|
|
thin |
|
|
|
bind:value={table.name} |
|
|
|
on:input={checkValid} |
|
|
|
{error} /> |
|
|
|
<Select |
|
|
|
label="Primary Display Column" |
|
|
|
thin |
|
|
|
@ -61,7 +90,7 @@ |
|
|
|
</Select> |
|
|
|
<footer> |
|
|
|
<Button secondary on:click={hideEditor}>Cancel</Button> |
|
|
|
<Button primary on:click={save}>Save</Button> |
|
|
|
<Button primary disabled={error} on:click={save}>Save</Button> |
|
|
|
</footer> |
|
|
|
</div> |
|
|
|
{:else} |
|
|
|
@ -79,10 +108,21 @@ |
|
|
|
</DropdownMenu> |
|
|
|
<ConfirmDialog |
|
|
|
bind:this={confirmDeleteDialog} |
|
|
|
body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`} |
|
|
|
okText="Delete Table" |
|
|
|
onOk={deleteTable} |
|
|
|
title="Confirm Delete" /> |
|
|
|
title="Confirm Delete"> |
|
|
|
Are you sure you wish to delete the table |
|
|
|
<i>{table.name}?</i> |
|
|
|
The following will also be deleted: |
|
|
|
<b> |
|
|
|
<div class="delete-items"> |
|
|
|
{#each willBeDeleted as item} |
|
|
|
<div>{item}</div> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
</b> |
|
|
|
This action cannot be undone. |
|
|
|
</ConfirmDialog> |
|
|
|
|
|
|
|
<style> |
|
|
|
div.icon { |
|
|
|
@ -96,6 +136,17 @@ |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
div.delete-items { |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
div.delete-items div { |
|
|
|
margin-top: 4px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.actions { |
|
|
|
padding: var(--spacing-xl); |
|
|
|
display: grid; |
|
|
|
|
Andrew Kingston
6 years ago