Disable action if SMTP has not been setup

This commit is contained in:
Peter Clement 2021-10-19 16:44:30 +01:00
parent 1366d824f7
commit f3990b70e2
1 changed files with 49 additions and 12 deletions

View File

@ -1,11 +1,26 @@
<script> <script>
import { ModalContent, Layout, Detail, Body, Icon } from "@budibase/bbui" import {
ModalContent,
Layout,
Detail,
Body,
Icon,
Tooltip,
} from "@budibase/bbui"
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import { admin } from "stores/portal"
import { externalActions } from "./ExternalActions" import { externalActions } from "./ExternalActions"
export let blockIdx export let blockIdx
export let blockComplete export let blockComplete
const disabled = {
SEND_EMAIL_SMTP: {
disabled: $admin.checklist.smtp.checked,
message: "Please configure SMTP",
},
}
let selectedAction let selectedAction
let actionVal let actionVal
let actions = Object.entries($automationStore.blockDefinitions.ACTION) let actions = Object.entries($automationStore.blockDefinitions.ACTION)
@ -55,6 +70,7 @@
}} }}
> >
<Body size="XS">Select an app or event.</Body> <Body size="XS">Select an app or event.</Body>
<Layout noPadding> <Layout noPadding>
<Body size="S">Apps</Body> <Body size="S">Apps</Body>
@ -85,6 +101,23 @@
<div class="item-list"> <div class="item-list">
{#each Object.entries(internal) as [idx, action]} {#each Object.entries(internal) as [idx, action]}
{#if disabled[idx] && !disabled[idx].disabled}
<Tooltip text={disabled[idx].message} direction="bottom">
<div
class="item"
class:selected={selectedAction === action.name}
class:disabled={disabled[idx]}
on:click={() => selectAction(action)}
>
<div class="item-body">
<Icon name={action.icon} />
<span class="icon-spacing">
<Body size="XS">{action.name}</Body></span
>
</div>
</div>
</Tooltip>
{:else}
<div <div
class="item" class="item"
class:selected={selectedAction === action.name} class:selected={selectedAction === action.name}
@ -97,12 +130,17 @@
> >
</div> </div>
</div> </div>
{/if}
{/each} {/each}
</div> </div>
</Layout> </Layout>
</ModalContent> </ModalContent>
<style> <style>
.disabled {
opacity: 0.3;
pointer-events: none;
}
.icon-spacing { .icon-spacing {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
@ -118,7 +156,6 @@
.item { .item {
cursor: pointer; cursor: pointer;
display: grid;
grid-gap: var(--spectrum-alias-grid-margin-xsmall); grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s); padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary); background: var(--spectrum-alias-background-color-secondary);