Converts datasources dropdowns to use ActionMenu

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-26 12:11:51 +02:00
parent 65d6ca6b5d
commit d8d01e56d5
2 changed files with 13 additions and 33 deletions

View File

@ -2,13 +2,12 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { datasources } from "stores/backend" import { datasources } from "stores/backend"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { Icon, Popover } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let datasource export let datasource
let anchor
let dropdown let dropdown
let confirmDeleteDialog let confirmDeleteDialog
@ -23,8 +22,6 @@
async function deleteDatasource() { async function deleteDatasource() {
const wasSelectedSource = $datasources.selected const wasSelectedSource = $datasources.selected
console.log(wasSelectedSource)
console.log(datasource)
await datasources.delete(datasource) await datasources.delete(datasource)
notifications.success("Datasource deleted") notifications.success("Datasource deleted")
// navigate to first index page if the source you are deleting is selected // navigate to first index page if the source you are deleting is selected
@ -35,21 +32,13 @@
} }
</script> </script>
<div on:click|stopPropagation> <ActionMenu bind:this={dropdown}>
<div bind:this={anchor} class="icon" on:click={dropdown.show}> <div slot="button" class="icon" on:click={dropdown.show}>
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<Popover align="left" {anchor} bind:this={dropdown}> <MenuItem icon="Delete" on:click={showModal}>Delete</MenuItem>
<DropdownContainer> </ActionMenu>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
data-cy="delete-datasource"
/>
</DropdownContainer>
</Popover>
</div>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
okText="Delete Datasource" okText="Delete Datasource"

View File

@ -1,12 +1,11 @@
<script> <script>
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { Icon, Popover } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let query export let query
let anchor
let dropdown let dropdown
let confirmDeleteDialog let confirmDeleteDialog
@ -26,21 +25,13 @@
} }
</script> </script>
<div on:click|stopPropagation> <ActionMenu bind:this={dropdown}>
<div bind:this={anchor} class="icon" on:click={dropdown.show}> <div slot="button" class="icon" on:click={dropdown.show}>
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<Popover align="left" {anchor} bind:this={dropdown}> <MenuItem icon="Delete" on:click={showModal}>Delete</MenuItem>
<DropdownContainer> </ActionMenu>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
data-cy="delete-datasource"
/>
</DropdownContainer>
</Popover>
</div>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
okText="Delete Query" okText="Delete Query"