MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #650 from Budibase/fix-select-elements 

fix select elements
This commit is contained in:
Martin McKeaveney 2020-09-30 15:42:19 +01:00 committed by GitHub
parent 33b86cc656 253ece59bc
commit 27d9d98b68
6 changed files with 8 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
View File

@ -52,14 +52,14 @@
<div class="input-group-row">
<p>The</p>
<Select secondary thin bind:value={view.calculation}>
<option value={null} />
<option value="">Choose an option</option>
{#each CALCULATIONS as calculation}
<option value={calculation.key}>{calculation.name}</option>
{/each}
</Select>
<p>of</p>
<Select secondary thin bind:value={view.field}>
<option value={null} />
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{/each}

3
packages/builder/src/components/database/DataTable/popovers/Filter.svelte
View File

@ -106,17 +106,20 @@
<p>Where</p>
{:else}
<Select secondary thin bind:value={filter.conjunction}>
<option value="">Choose an option</option>
{#each CONJUNCTIONS as conjunction}
<option value={conjunction.key}>{conjunction.name}</option>
{/each}
</Select>
{/if}
<Select secondary thin bind:value={filter.key}>
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
<Select secondary thin bind:value={filter.condition}>
<option value="">Choose an option</option>
{#each CONDITIONS as condition}
<option value={condition.key}>{condition.name}</option>
{/each}

2
packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
View File

@ -46,7 +46,7 @@
<div class="input-group-row">
<p>Group By</p>
<Select secondary thin bind:value={view.groupBy}>
<option value={false} />
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{/each}

1
packages/builder/src/components/settings/UserRow.svelte
View File

@ -15,6 +15,7 @@
name="Name"
placeholder="Username" />
<Select disabled={!editMode} bind:value={user.accessLevelId} thin>
<option value="">Choose an option</option>
<option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option>
</Select>

1
packages/builder/src/components/settings/tabs/Users.svelte
View File

@ -62,6 +62,7 @@
name="Password"
placeholder="Password" />
<Select bind:value={accessLevelId} thin>
<option value="">Choose an option</option>
<option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option>
</Select>

139
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -1,139 +0,0 @@
<script>
import { Button, Select } from "@budibase/bbui"
import StateBindingCascader from "./StateBindingCascader.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core"
import {
EVENT_TYPE_MEMBER_NAME,
allHandlers,
} from "components/common/eventHandlers"
import { store } from "builderStore"
export let handler
export let onCreate
export let onChanged
export let onRemoved
export let index
export let newHandler
let eventOptions
let handlerType
let parameters = []
$: eventOptions = allHandlers()
$: {
if (handler) {
handlerType = handler[EVENT_TYPE_MEMBER_NAME]
parameters = Object.entries(handler.parameters).map(([name, value]) => ({
name,
value,
}))
} else {
// Empty Handler
handlerType = ""
parameters = []
}
}
const handlerChanged = (type, params) => {
const handlerParams = {}
for (let param of params) {
handlerParams[param.name] = param.value
}
const updatedHandler = {
[EVENT_TYPE_MEMBER_NAME]: type,
parameters: handlerParams,
}
onChanged(updatedHandler, index)
}
const handlerTypeChanged = e => {
const handlerType = eventOptions.find(
handler => handler.name === e.target.value
)
const defaultParams = handlerType.parameters.map(param => ({
name: param,
value: "",
}))
handlerChanged(handlerType.name, defaultParams)
}
const onParameterChanged = index => e => {
const value = e.target ? e.target.value : e
const newParams = [...parameters]
newParams[index].value = value
handlerChanged(handlerType, newParams)
}
</script>
<div class="type-selector-container {newHandler && 'new-handler'}">
<div class="handler-controls">
<div class="handler-option">
<span>Action</span>
<Select value={handlerType} on:change={handlerTypeChanged}>
<option />
{#each eventOptions as option}
<option value={option.name}>{option.name}</option>
{/each}
</Select>
</div>
{#if parameters}
<br />
{#each parameters as parameter, idx}
<StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
{/each}
{/if}
{#if parameters.length > 0}
<div class="button-container">
{#if newHandler}
<Button primary thin on:click={onCreate}>Add Action</Button>
{:else}
<Button outline thin on:click={onRemoved}>Remove Action</Button>
{/if}
</div>
{/if}
</div>
</div>
<style>
.type-selector-container {
display: grid;
grid-gap: 20px;
width: 100%;
background: rgba(223, 223, 223, 0.5);
border: 1px solid #dfdfdf;
margin-bottom: 18px;
}
.handler-option {
display: flex;
flex-direction: column;
}
.new-handler {
background: #fff;
}
.handler-controls {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
padding: 22px;
}
.button-container {
display: grid;
justify-items: end;
}
span {
font-size: 18px;
margin-bottom: 10px;
font-weight: 500;
}
</style>