Replace backend usages of dropdown menus with common components
This commit is contained in:
Andrew Kingston
parent
26bb3ebb98
commit
a978312768
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
|
||||
import { DropdownMenu, Modal } from "@budibase/bbui"
|
||||
import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
|
||||
import * as api from "../api"
|
||||
import { notifier } from "builderStore/store/notifications"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||
|
||||
export let row
|
||||
|
||||
|
|
@ -34,16 +35,13 @@
|
|||
<i class="ri-more-line" />
|
||||
</div>
|
||||
<DropdownMenu bind:this={dropdown} {anchor} align="left">
|
||||
<ul>
|
||||
<li data-cy="edit-row" on:click={showModal}>
|
||||
<Icon name="edit" />
|
||||
<span>Edit</span>
|
||||
</li>
|
||||
<li data-cy="delete-row" on:click={showDelete}>
|
||||
<Icon name="delete" />
|
||||
<span>Delete</span>
|
||||
</li>
|
||||
</ul>
|
||||
<DropdownContainer>
|
||||
<DropdownItem icon="ri-edit-line" title="Edit" on:click={showModal} />
|
||||
<DropdownItem
|
||||
icon="ri-delete-bin-line"
|
||||
title="Delete"
|
||||
on:click={showDelete} />
|
||||
</DropdownContainer>
|
||||
</DropdownMenu>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
|
|
@ -59,36 +57,4 @@
|
|||
.ri-more-line:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
padding: var(--spacing-s) 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin: auto 0px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
|
||||
li:active {
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<script>
|
||||
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 { DropdownMenu, Button, Input } from "@budibase/bbui"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import screenTemplates from "builderStore/store/screenTemplates"
|
||||
import api from "builderStore/api"
|
||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||
|
||||
export let table
|
||||
|
||||
|
|
@ -31,9 +29,11 @@
|
|||
|
||||
function showModal() {
|
||||
const screens = $store.screens
|
||||
templateScreens = screens.filter(screen => screen.autoTableId === table._id)
|
||||
templateScreens = screens.filter(
|
||||
(screen) => screen.autoTableId === table._id
|
||||
)
|
||||
willBeDeleted = ["All table data"].concat(
|
||||
templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
|
||||
templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
|
||||
)
|
||||
hideEditor()
|
||||
confirmDeleteDialog.show()
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
const tableName = evt.target.value
|
||||
if (
|
||||
originalName !== tableName &&
|
||||
$backendUiStore.models?.some(model => model.name === tableName)
|
||||
$backendUiStore.models?.some((model) => model.name === tableName)
|
||||
) {
|
||||
error = `Table with name ${tableName} already exists. Please choose another name.`
|
||||
return
|
||||
|
|
@ -66,37 +66,36 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
|
||||
<i class="ri-more-line" />
|
||||
<div on:click|stopPropagation>
|
||||
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
|
||||
<i class="ri-more-line" />
|
||||
</div>
|
||||
<DropdownMenu align="left" {anchor} bind:this={dropdown}>
|
||||
{#if editing}
|
||||
<div class="actions">
|
||||
<h5>Edit Table</h5>
|
||||
<Input
|
||||
label="Table Name"
|
||||
thin
|
||||
bind:value={table.name}
|
||||
on:input={checkValid}
|
||||
{error} />
|
||||
<footer>
|
||||
<Button secondary on:click={hideEditor}>Cancel</Button>
|
||||
<Button primary disabled={error} on:click={save}>Save</Button>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<DropdownContainer>
|
||||
<DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
|
||||
<DropdownItem
|
||||
icon="ri-delete-bin-line"
|
||||
title="Delete"
|
||||
on:click={showModal} />
|
||||
</DropdownContainer>
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<DropdownMenu align="left" {anchor} bind:this={dropdown}>
|
||||
{#if editing}
|
||||
<div class="actions">
|
||||
<h5>Edit Table</h5>
|
||||
<Input
|
||||
label="Table Name"
|
||||
thin
|
||||
bind:value={table.name}
|
||||
on:input={checkValid}
|
||||
{error} />
|
||||
<footer>
|
||||
<Button secondary on:click={hideEditor}>Cancel</Button>
|
||||
<Button primary disabled={error} on:click={save}>Save</Button>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<ul>
|
||||
<li on:click={showEditor}>
|
||||
<Icon name="edit" />
|
||||
Edit
|
||||
</li>
|
||||
<li data-cy="delete-table" on:click={showModal}>
|
||||
<Icon name="delete" />
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
okText="Delete Table"
|
||||
|
|
@ -155,29 +154,4 @@
|
|||
justify-content: flex-end;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--spacing-s) 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin: auto 0px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
|
||||
li:active {
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import { goto } from "@sveltech/routify"
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { notifier } from "builderStore/store/notifications"
|
||||
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
|
||||
import { FIELDS } from "constants/backend"
|
||||
import { DropdownMenu, Button, Input } from "@budibase/bbui"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||
|
||||
export let view
|
||||
|
||||
|
|
@ -46,32 +46,31 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
|
||||
<i class="ri-more-line" />
|
||||
<div on:click|stopPropagation>
|
||||
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
|
||||
<i class="ri-more-line" />
|
||||
</div>
|
||||
<DropdownMenu align="left" {anchor} bind:this={dropdown}>
|
||||
{#if editing}
|
||||
<div class="actions">
|
||||
<h5>Edit View</h5>
|
||||
<Input label="View Name" thin bind:value={view.name} />
|
||||
<footer>
|
||||
<Button secondary on:click={hideEditor}>Cancel</Button>
|
||||
<Button primary on:click={save}>Save</Button>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<DropdownContainer>
|
||||
<DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
|
||||
<DropdownItem
|
||||
icon="ri-delete-bin-line"
|
||||
title="Delete"
|
||||
on:click={showDelete} />
|
||||
</DropdownContainer>
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<DropdownMenu align="left" {anchor} bind:this={dropdown}>
|
||||
{#if editing}
|
||||
<div class="actions">
|
||||
<h5>Edit View</h5>
|
||||
<Input label="View Name" thin bind:value={view.name} />
|
||||
<footer>
|
||||
<Button secondary on:click={hideEditor}>Cancel</Button>
|
||||
<Button primary on:click={save}>Save</Button>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<ul>
|
||||
<li on:click={showEditor}>
|
||||
<Icon name="edit" />
|
||||
Edit
|
||||
</li>
|
||||
<li data-cy="delete-view" on:click={showDelete}>
|
||||
<Icon name="delete" />
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
|
||||
|
|
@ -108,29 +107,4 @@
|
|||
justify-content: flex-end;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--spacing-s) 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin: auto 0px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
|
||||
li:active {
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue