Disable action if SMTP has not been setup
This commit is contained in:
parent
1366d824f7
commit
f3990b70e2
|
@ -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,24 +101,46 @@
|
||||||
|
|
||||||
<div class="item-list">
|
<div class="item-list">
|
||||||
{#each Object.entries(internal) as [idx, action]}
|
{#each Object.entries(internal) as [idx, action]}
|
||||||
<div
|
{#if disabled[idx] && !disabled[idx].disabled}
|
||||||
class="item"
|
<Tooltip text={disabled[idx].message} direction="bottom">
|
||||||
class:selected={selectedAction === action.name}
|
<div
|
||||||
on:click={() => selectAction(action)}
|
class="item"
|
||||||
>
|
class:selected={selectedAction === action.name}
|
||||||
<div class="item-body">
|
class:disabled={disabled[idx]}
|
||||||
<Icon name={action.icon} />
|
on:click={() => selectAction(action)}
|
||||||
<span class="icon-spacing">
|
|
||||||
<Body size="XS">{action.name}</Body></span
|
|
||||||
>
|
>
|
||||||
|
<div class="item-body">
|
||||||
|
<Icon name={action.icon} />
|
||||||
|
<span class="icon-spacing">
|
||||||
|
<Body size="XS">{action.name}</Body></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="item"
|
||||||
|
class:selected={selectedAction === action.name}
|
||||||
|
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>
|
</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);
|
||||||
|
|
Loading…
Reference in New Issue