Add confirmation params for some actions

This commit is contained in:
Andrew Kingston 2021-06-21 09:58:24 +01:00
parent 2003c69698
commit 0ef31accb8
6 changed files with 108 additions and 48 deletions

View File

@ -1,5 +1,5 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { Select, Label, Checkbox, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
@ -35,6 +35,17 @@
value={parameters.revId}
on:change={value => (parameters.revId = value.detail)}
/>
<Label small />
<Checkbox text="Require confirmation" bind:value={parameters.confirm} />
{#if parameters.confirm}
<Label small>Confirm text</Label>
<Input
placeholder="Are you sure you want to delete this row?"
bind:value={parameters.confirmText}
/>
{/if}
</div>
<style>
@ -42,8 +53,8 @@
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr;
align-items: baseline;
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
margin: 0 auto;
}

View File

@ -1,5 +1,5 @@
<script>
import { Select, Layout } from "@budibase/bbui"
import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { datasources, integrations, queries } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
@ -25,7 +25,7 @@
}
</script>
<Layout>
<Layout gap="XS">
<Select
label="Datasource"
bind:value={parameters.datasourceId}
@ -44,22 +44,34 @@
getOptionLabel={query => query.name}
getOptionValue={query => query._id}
/>
{/if}
{#if query?.parameters?.length > 0}
<div>
<ParameterBuilder
bind:customParams={parameters.queryParams}
parameters={query.parameters}
bindings={bindableProperties}
/>
<IntegrationQueryEditor
height={200}
{query}
schema={fetchQueryDefinition(query)}
editable={false}
{datasource}
/>
</div>
{#if parameters.queryId}
<Checkbox text="Require confirmation" bind:value={parameters.confirm} />
{#if parameters.confirm}
<Input
label="Confirm text"
placeholder="Are you sure you want to execute this query?"
bind:value={parameters.confirmText}
/>
{/if}
{#if query?.parameters?.length > 0}
<div>
<ParameterBuilder
bind:customParams={parameters.queryParams}
parameters={query.parameters}
bindings={bindableProperties}
/>
<IntegrationQueryEditor
height={200}
{query}
schema={fetchQueryDefinition(query)}
editable={false}
{datasource}
/>
</div>
{/if}
{/if}
{/if}
</Layout>

View File

@ -79,7 +79,7 @@
on:click={() => removeField(field[0])}
/>
{/each}
<div>
<div style="margin-top: 10px">
<Button icon="AddCircle" secondary on:click={addField}>
Add
{fieldLabel}

View File

@ -1,5 +1,5 @@
<script>
import { Select, Label, Body } from "@budibase/bbui"
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import {
@ -33,7 +33,8 @@
optional.<br />
You can always add or override fields manually.
</Body>
<div class="fields">
<div class="params">
<Label small>Data Source</Label>
<Select
bind:value={parameters.providerId}
@ -51,37 +52,58 @@
getOptionValue={option => option._id}
/>
{#if parameters.tableId}
<Label small />
<Checkbox text="Require confirmation" bind:value={parameters.confirm} />
{#if parameters.confirm}
<Label small>Confirm text</Label>
<Input
placeholder="Are you sure you want to save this row?"
bind:value={parameters.confirmText}
/>
{/if}
</div>
{#if parameters.tableId}
<div class="fields">
<SaveFields
parameterFields={parameters.fields}
{schemaFields}
on:change={onFieldsChanged}
/>
{/if}
</div>
</div>
{/if}
</div>
<style>
.root {
width: 100%;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-xl);
}
.root :global(p) {
line-height: 1.5;
}
.params {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
}
.fields {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
grid-template-columns: 60px 1fr auto 1fr auto;
align-items: center;
}
.fields :global(> div:nth-child(2)),
.fields :global(> div:nth-child(4)) {
grid-column-start: 2;
grid-column-end: 6;
}
</style>

View File

@ -1,5 +1,5 @@
<script>
import { Select, Label, Input } from "@budibase/bbui"
import { Select, Label, Input, Checkbox } from "@budibase/bbui"
import { automationStore } from "builderStore"
import SaveFields from "./SaveFields.svelte"
@ -72,7 +72,7 @@
</div>
</div>
<div class="fields">
<div class="params">
<Label small>Automation</Label>
{#if automationStatus === AUTOMATION_STATUS.EXISTING}
@ -90,6 +90,19 @@
/>
{/if}
<Label small />
<Checkbox text="Require confirmation" bind:value={parameters.confirm} />
{#if parameters.confirm}
<Label small>Confirm text</Label>
<Input
placeholder="Are you sure you want to trigger this automation?"
bind:value={parameters.confirmText}
/>
{/if}
</div>
<div class="fields">
{#key parameters.automationId}
<SaveFields
schemaFields={selectedSchema}
@ -107,16 +120,21 @@
margin: 0 auto;
}
.fields {
.params {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
grid-template-columns: 60px 1fr;
align-items: center;
}
.fields :global(> div:nth-child(2)) {
grid-column: 2 / span 4;
.fields {
margin-top: var(--spacing-l);
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr auto 1fr auto;
align-items: center;
}
.radios,

View File

@ -24,15 +24,12 @@
<style>
.root {
display: flex;
flex-direction: row;
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
margin: 0 auto;
}
.root :global(> div) {
flex: 1;
margin-left: var(--spacing-l);
}
</style>