|
|
|
@ -1,12 +1,18 @@ |
|
|
|
<script> |
|
|
|
import { Button, Icon, DrawerContent, Layout, Select } from "@budibase/bbui" |
|
|
|
import { |
|
|
|
Button, |
|
|
|
Body, |
|
|
|
Icon, |
|
|
|
DrawerContent, |
|
|
|
Layout, |
|
|
|
Select, |
|
|
|
} from "@budibase/bbui" |
|
|
|
import { flip } from "svelte/animate" |
|
|
|
import { dndzone } from "svelte-dnd-action" |
|
|
|
import { generate } from "shortid" |
|
|
|
import DrawerBindableInput from "../../../common/bindings/DrawerBindableInput.svelte" |
|
|
|
import ColorPicker from "./ColorPicker.svelte" |
|
|
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" |
|
|
|
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene" |
|
|
|
import { getBindableProperties } from "../../../../builderStore/dataBinding" |
|
|
|
import { getBindableProperties } from "builderStore/dataBinding" |
|
|
|
import { currentAsset, selectedComponent, store } from "builderStore" |
|
|
|
import { getComponentForSettingType } from "./componentSettings" |
|
|
|
import PropertyControl from "./PropertyControl.svelte" |
|
|
|
@ -15,16 +21,16 @@ |
|
|
|
|
|
|
|
const flipDurationMs = 150 |
|
|
|
const actionOptions = [ |
|
|
|
{ |
|
|
|
label: "Show component", |
|
|
|
value: "show", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "Hide component", |
|
|
|
value: "hide", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "Update component setting", |
|
|
|
label: "Show component", |
|
|
|
value: "show", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "Update setting", |
|
|
|
value: "update", |
|
|
|
}, |
|
|
|
] |
|
|
|
@ -64,7 +70,8 @@ |
|
|
|
conditions = [ |
|
|
|
...conditions, |
|
|
|
{ |
|
|
|
action: "show", |
|
|
|
id: generate(), |
|
|
|
action: "hide", |
|
|
|
operator: OperatorOptions.Equals.value, |
|
|
|
}, |
|
|
|
] |
|
|
|
@ -94,16 +101,22 @@ |
|
|
|
on:consider={updateLinks} |
|
|
|
> |
|
|
|
{#each conditions as condition (condition.id)} |
|
|
|
<div class="condition" animate:flip={{ duration: flipDurationMs }}> |
|
|
|
<div |
|
|
|
class="condition" |
|
|
|
class:update={condition.action === "update"} |
|
|
|
animate:flip={{ duration: flipDurationMs }} |
|
|
|
> |
|
|
|
<Icon name="DragHandle" size="XL" /> |
|
|
|
<Select |
|
|
|
draggable={false} |
|
|
|
placeholder={null} |
|
|
|
options={actionOptions} |
|
|
|
bind:value={condition.action} |
|
|
|
/> |
|
|
|
{#if condition.action === "update"} |
|
|
|
<Select options={settings} bind:value={condition.setting} /> |
|
|
|
<div>TO</div> |
|
|
|
{#if getSettingDefinition(condition.setting)} |
|
|
|
<div>TO</div> |
|
|
|
<PropertyControl |
|
|
|
type={getSettingDefinition(condition.setting).type} |
|
|
|
control={getComponentForSetting(condition.setting)} |
|
|
|
@ -117,6 +130,8 @@ |
|
|
|
.placeholder, |
|
|
|
}} |
|
|
|
/> |
|
|
|
{:else} |
|
|
|
<Select disabled placeholder=" " /> |
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
<div>IF</div> |
|
|
|
@ -146,8 +161,10 @@ |
|
|
|
</div> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
{:else} |
|
|
|
<Body size="S">Add your first condition to get started.</Body> |
|
|
|
{/if} |
|
|
|
<div class="button-container"> |
|
|
|
<div> |
|
|
|
<Button secondary icon="Add" on:click={addCondition}> |
|
|
|
Add condition |
|
|
|
</Button> |
|
|
|
@ -160,30 +177,27 @@ |
|
|
|
.container { |
|
|
|
width: 100%; |
|
|
|
max-width: 1200px; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.conditions { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: stretch; |
|
|
|
gap: var(--spacing-s); |
|
|
|
gap: var(--spacing-m); |
|
|
|
} |
|
|
|
.condition { |
|
|
|
gap: var(--spacing-l); |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
display: grid; |
|
|
|
align-items: center; |
|
|
|
grid-template-columns: auto 1fr auto 1fr 1fr 1fr auto; |
|
|
|
border-radius: var(--border-radius-s); |
|
|
|
transition: background-color ease-in-out 130ms; |
|
|
|
} |
|
|
|
.condition.update { |
|
|
|
grid-template-columns: auto 1fr 1fr auto 1fr auto 1fr 1fr 1fr auto; |
|
|
|
} |
|
|
|
.condition:hover { |
|
|
|
background-color: var(--spectrum-global-color-gray-100); |
|
|
|
} |
|
|
|
.condition > :global(.spectrum-Form-item) { |
|
|
|
flex: 1 1 auto; |
|
|
|
width: 0; |
|
|
|
} |
|
|
|
.button-container { |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Andrew Kingston
5 years ago