Show tooltip when initially applying filters to a table
This commit is contained in:
parent
0b7998f898
commit
d47bb4f191
3 changed files with 21 additions and 9 deletions
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
export let text = null
|
export let text = null
|
||||||
export let condition = true
|
export let condition = true
|
||||||
export let duration = 3000
|
export let duration = 5000
|
||||||
export let position
|
export let position
|
||||||
export let type
|
export let type
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,30 @@
|
||||||
<script>
|
<script>
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
import { Modal, ActionButton } from "@budibase/bbui"
|
import { Modal, ActionButton, TooltipType, TempTooltip } from "@budibase/bbui"
|
||||||
import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
|
import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
|
||||||
|
|
||||||
const { rows, columns } = getContext("grid")
|
const { rows, columns, filter } = getContext("grid")
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
|
let firstFilterUsage = false
|
||||||
|
|
||||||
$: disabled = !$columns.length || !$rows.length
|
$: disabled = !$columns.length || !$rows.length
|
||||||
|
$: {
|
||||||
|
if ($filter?.length && !firstFilterUsage) {
|
||||||
|
firstFilterUsage = true
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
|
<TempTooltip
|
||||||
Add view
|
text="Create a view to save your filters"
|
||||||
</ActionButton>
|
type={TooltipType.Info}
|
||||||
|
condition={firstFilterUsage}
|
||||||
|
>
|
||||||
|
<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
|
||||||
|
Create view
|
||||||
|
</ActionButton>
|
||||||
|
</TempTooltip>
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<GridCreateViewModal />
|
<GridCreateViewModal />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
|
@ -46,13 +46,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
title="Create View"
|
title="Create view"
|
||||||
confirmText="Create View"
|
confirmText="Create view"
|
||||||
onConfirm={saveView}
|
onConfirm={saveView}
|
||||||
disabled={nameExists}
|
disabled={nameExists}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
label="View Name"
|
label="View name"
|
||||||
thin
|
thin
|
||||||
bind:value={name}
|
bind:value={name}
|
||||||
error={nameExists ? "A view already exists with that name" : null}
|
error={nameExists ? "A view already exists with that name" : null}
|
||||||
|
|
Loading…
Reference in a new issue