Added toggle-all functionality to the formblock and update context to the ComponentSettingsSection
This commit is contained in:
Dean
parent
555f8fc22c
commit
f35daee07f
|
|
@ -11,6 +11,7 @@
|
|||
export let componentBindings
|
||||
export let bindings
|
||||
export let parseSettings
|
||||
export let disabled
|
||||
|
||||
const draggable = getContext("draggable")
|
||||
const dispatch = createEventDispatcher()
|
||||
|
|
@ -90,6 +91,7 @@
|
|||
open = true
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
/>
|
||||
|
||||
<Popover
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<script>
|
||||
import { DrawerContent, Drawer, Button, Icon } from "@budibase/bbui"
|
||||
import ValidationDrawer from "components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte"
|
||||
export let column
|
||||
export let type
|
||||
|
||||
let drawer
|
||||
</script>
|
||||
|
||||
<Icon name="Settings" hoverable size="S" on:click={drawer.show} />
|
||||
<Drawer bind:this={drawer} title="Field Validation">
|
||||
<svelte:fragment slot="description">
|
||||
"{column.name}" field validation
|
||||
</svelte:fragment>
|
||||
<Button cta slot="buttons" on:click={drawer.hide}>Save</Button>
|
||||
<DrawerContent slot="body">
|
||||
<div class="container">
|
||||
<ValidationDrawer
|
||||
slot="body"
|
||||
bind:rules={column.validation}
|
||||
fieldName={column.name}
|
||||
{type}
|
||||
/>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
|
@ -1,202 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Button,
|
||||
Icon,
|
||||
DrawerContent,
|
||||
Layout,
|
||||
Select,
|
||||
Label,
|
||||
Body,
|
||||
Input,
|
||||
} from "@budibase/bbui"
|
||||
import { flip } from "svelte/animate"
|
||||
import { dndzone } from "svelte-dnd-action"
|
||||
import { generate } from "shortid"
|
||||
import CellEditor from "./CellEditor.svelte"
|
||||
|
||||
export let columns = []
|
||||
export let options = []
|
||||
export let schema = {}
|
||||
|
||||
const flipDurationMs = 150
|
||||
let dragDisabled = true
|
||||
|
||||
$: unselectedColumns = getUnselectedColumns(options, columns)
|
||||
$: columns.forEach(column => {
|
||||
if (!column.id) {
|
||||
column.id = generate()
|
||||
}
|
||||
})
|
||||
|
||||
const getUnselectedColumns = (allColumns, selectedColumns) => {
|
||||
let optionsObj = {}
|
||||
allColumns.forEach(option => {
|
||||
optionsObj[option] = true
|
||||
})
|
||||
selectedColumns?.forEach(column => {
|
||||
delete optionsObj[column.name]
|
||||
})
|
||||
return Object.keys(optionsObj)
|
||||
}
|
||||
|
||||
const getRemainingColumnOptions = selectedColumn => {
|
||||
if (!selectedColumn || unselectedColumns.includes(selectedColumn)) {
|
||||
return unselectedColumns
|
||||
}
|
||||
return [selectedColumn, ...unselectedColumns]
|
||||
}
|
||||
|
||||
const addColumn = () => {
|
||||
columns = [...columns, {}]
|
||||
}
|
||||
|
||||
const removeColumn = id => {
|
||||
columns = columns.filter(column => column.id !== id)
|
||||
}
|
||||
|
||||
const updateColumnOrder = e => {
|
||||
columns = e.detail.items
|
||||
}
|
||||
|
||||
const handleFinalize = e => {
|
||||
updateColumnOrder(e)
|
||||
dragDisabled = true
|
||||
}
|
||||
|
||||
const addAllColumns = () => {
|
||||
let newColumns = columns || []
|
||||
options.forEach(field => {
|
||||
const fieldSchema = schema[field]
|
||||
const hasCol = columns && columns.findIndex(x => x.name === field) !== -1
|
||||
if (!fieldSchema?.autocolumn && !hasCol) {
|
||||
newColumns.push({
|
||||
name: field,
|
||||
displayName: field,
|
||||
})
|
||||
}
|
||||
})
|
||||
columns = newColumns
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
columns = []
|
||||
}
|
||||
|
||||
const getFieldType = column => {
|
||||
return `validation/${schema[column.name]?.type}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div class="container">
|
||||
<Layout noPadding gap="S">
|
||||
{#if columns?.length}
|
||||
<Layout noPadding gap="XS">
|
||||
<div class="column">
|
||||
<div />
|
||||
<Label size="L">Column</Label>
|
||||
<Label size="L">Label</Label>
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="columns"
|
||||
use:dndzone={{
|
||||
items: columns,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
dragDisabled,
|
||||
}}
|
||||
on:finalize={handleFinalize}
|
||||
on:consider={updateColumnOrder}
|
||||
>
|
||||
{#each columns as column (column.id)}
|
||||
<div class="column" animate:flip={{ duration: flipDurationMs }}>
|
||||
<div
|
||||
class="handle"
|
||||
aria-label="drag-handle"
|
||||
style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
|
||||
on:mousedown={() => (dragDisabled = false)}
|
||||
>
|
||||
<Icon name="DragHandle" size="XL" />
|
||||
</div>
|
||||
<Select
|
||||
bind:value={column.name}
|
||||
placeholder="Column"
|
||||
options={getRemainingColumnOptions(column.name)}
|
||||
on:change={e => (column.displayName = e.detail)}
|
||||
/>
|
||||
<Input bind:value={column.displayName} placeholder="Label" />
|
||||
<CellEditor type={getFieldType(column)} bind:column />
|
||||
<Icon
|
||||
name="Close"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => removeColumn(column.id)}
|
||||
disabled={columns.length === 1}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Layout>
|
||||
{:else}
|
||||
<div class="column">
|
||||
<div class="wide">
|
||||
<Body size="S">Add columns to be included in your form below.</Body>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="column">
|
||||
<div class="buttons wide">
|
||||
<Button secondary icon="Add" on:click={addColumn}>Add column</Button>
|
||||
<Button secondary quiet on:click={addAllColumns}>
|
||||
Add all columns
|
||||
</Button>
|
||||
{#if columns?.length}
|
||||
<Button secondary quiet on:click={reset}>Reset columns</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.column {
|
||||
gap: var(--spacing-l);
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr 1fr 16px 16px;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-s);
|
||||
transition: background-color ease-in-out 130ms;
|
||||
}
|
||||
.column:hover {
|
||||
background-color: var(--spectrum-global-color-gray-100);
|
||||
}
|
||||
.handle {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.wide {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { Toggle } from "@budibase/bbui"
|
||||
import { cloneDeep, isEqual } from "lodash/fp"
|
||||
import {
|
||||
getDatasourceForProvider,
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
} from "builderStore/dataBinding"
|
||||
import { currentAsset } from "builderStore"
|
||||
import DraggableList from "../DraggableList/DraggableList.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { createEventDispatcher, getContext } from "svelte"
|
||||
import { store, selectedScreen } from "builderStore"
|
||||
import FieldSetting from "./FieldSetting.svelte"
|
||||
import { convertOldFieldFormat, getComponentForField } from "./utils"
|
||||
|
|
@ -16,6 +17,8 @@
|
|||
export let componentInstance
|
||||
export let value
|
||||
|
||||
const updates = getContext("settings")
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let sanitisedFields
|
||||
let fieldList
|
||||
|
|
@ -25,6 +28,9 @@
|
|||
let sanitisedValue
|
||||
let unconfigured
|
||||
|
||||
let selectAll = true
|
||||
let updating = false
|
||||
|
||||
$: bindings = getBindableProperties($selectedScreen, componentInstance._id)
|
||||
$: actionType = componentInstance.actionType
|
||||
let componentBindings = []
|
||||
|
|
@ -43,6 +49,10 @@
|
|||
cachedValue = cloneDeep(value)
|
||||
}
|
||||
|
||||
$: if (typeof $updates.resp == "string") {
|
||||
updating = false
|
||||
}
|
||||
|
||||
const updateState = value => {
|
||||
schema = getSchema($currentAsset, datasource)
|
||||
options = Object.keys(schema || {})
|
||||
|
|
@ -145,16 +155,37 @@
|
|||
dispatch("change", getValidColumns(parentFieldsUpdated, options))
|
||||
}
|
||||
|
||||
const listUpdated = e => {
|
||||
const parsedColumns = getValidColumns(e.detail, options)
|
||||
const listUpdated = columns => {
|
||||
const parsedColumns = getValidColumns(columns, options)
|
||||
dispatch("change", parsedColumns)
|
||||
}
|
||||
|
||||
const toggleAll = update => {
|
||||
updating = true
|
||||
listUpdated(update)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="field-configuration">
|
||||
<div class="toggle-all">
|
||||
<span />
|
||||
<Toggle
|
||||
on:change={() => {
|
||||
let update = fieldList.map(field => ({
|
||||
...field,
|
||||
active: selectAll,
|
||||
}))
|
||||
toggleAll(update)
|
||||
}}
|
||||
text=""
|
||||
bind:value={selectAll}
|
||||
thin
|
||||
disabled={updating}
|
||||
/>
|
||||
</div>
|
||||
{#if fieldList?.length}
|
||||
<DraggableList
|
||||
on:change={listUpdated}
|
||||
on:change={e => listUpdated(e.detail)}
|
||||
on:itemChange={processItemUpdate}
|
||||
items={fieldList}
|
||||
listItemKey={"_id"}
|
||||
|
|
@ -162,7 +193,9 @@
|
|||
listTypeProps={{
|
||||
componentBindings,
|
||||
bindings,
|
||||
updating,
|
||||
}}
|
||||
draggable={!updating}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -171,4 +204,21 @@
|
|||
.field-configuration :global(.spectrum-ActionButton) {
|
||||
width: 100%;
|
||||
}
|
||||
.toggle-all {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.toggle-all :global(.spectrum-Switch) {
|
||||
margin-right: 0px;
|
||||
padding-right: calc(var(--spacing-s) - 1px);
|
||||
min-height: unset;
|
||||
}
|
||||
.toggle-all :global(.spectrum-Switch .spectrum-Switch-switch) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.toggle-all span {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
font-size: 12px;
|
||||
margin-left: calc(var(--spacing-s) - 1px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
export let componentBindings
|
||||
export let bindings
|
||||
export let anchor
|
||||
export let updating //or disabled
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onToggle = item => {
|
||||
|
|
@ -49,6 +50,7 @@
|
|||
{bindings}
|
||||
{parseSettings}
|
||||
on:change
|
||||
disabled={updating}
|
||||
>
|
||||
<div slot="header" class="type-icon">
|
||||
<Icon name={componentDef.icon} />
|
||||
|
|
@ -58,7 +60,13 @@
|
|||
<div class="field-label">{readableText}</div>
|
||||
</div>
|
||||
<div class="list-item-right">
|
||||
<Toggle on:change={onToggle(item)} text="" value={item.active} thin />
|
||||
<Toggle
|
||||
on:change={onToggle(item)}
|
||||
text=""
|
||||
value={item.active}
|
||||
thin
|
||||
disabled={updating}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
import { getComponentForSetting } from "components/design/settings/componentSettings"
|
||||
import InfoDisplay from "./InfoDisplay.svelte"
|
||||
import analytics, { Events } from "analytics"
|
||||
import { setContext } from "svelte"
|
||||
import { writable } from "svelte/store"
|
||||
|
||||
export let componentDefinition
|
||||
export let componentInstance
|
||||
|
|
@ -19,6 +21,21 @@
|
|||
export let includeHidden = false
|
||||
export let tag
|
||||
|
||||
let status = writable({
|
||||
status: null,
|
||||
lastUpdate: null,
|
||||
})
|
||||
|
||||
const updateStatus = resp => {
|
||||
status.update(state => ({
|
||||
...state,
|
||||
resp,
|
||||
lastUpdate: new Date().getTime(),
|
||||
}))
|
||||
}
|
||||
|
||||
setContext("settings", status)
|
||||
|
||||
$: sections = getSections(
|
||||
componentInstance,
|
||||
componentDefinition,
|
||||
|
|
@ -76,6 +93,7 @@
|
|||
} else {
|
||||
await store.actions.components.updateSetting(setting.key, value)
|
||||
}
|
||||
updateStatus("success")
|
||||
// Send event if required
|
||||
if (setting.sendEvents) {
|
||||
analytics.captureEvent(Events.COMPONENT_UPDATED, {
|
||||
|
|
@ -85,6 +103,7 @@
|
|||
})
|
||||
}
|
||||
} catch (error) {
|
||||
updateStatus("failed")
|
||||
notifications.error("Error updating component prop")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue