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

Move multiselect to BBUI

This commit is contained in:
Andrew Kingston 2020-10-06 16:02:48 +01:00
parent 921d63eea1
commit 517fb201ec
6 changed files with 131 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -63,7 +63,7 @@
} }
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.39.0", "@budibase/bbui": "^1.40.1",
"@budibase/client": "^0.1.23", "@budibase/client": "^0.1.23",
"@budibase/colorpicker": "^1.0.1", "@budibase/colorpicker": "^1.0.1",
"@fortawesome/fontawesome-free": "^5.14.0", "@fortawesome/fontawesome-free": "^5.14.0",

24
packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte
View File

@ -2,39 +2,33 @@
import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui" import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte" import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "../../../helpers" import { capitalise } from "../../../helpers"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
export let meta export let meta
export let value = meta.type === "boolean" ? false : "" export let value = meta.type === "boolean" ? false : ""
const type = determineInputType(meta) $: type = meta.type
const label = capitalise(meta.name) $: label = capitalise(meta.name)
function determineInputType(meta) {
if (meta.type === "datetime") return "date"
if (meta.type === "number") return "number"
if (meta.type === "boolean") return "checkbox"
if (meta.type === "attachment") return "file"
if (meta.type === "options") return "select"
return "text"
}
</script> </script>
{#if type === 'select'} {#if type === 'options'}
<Select thin secondary {label} data-cy="{meta.name}-select" bind:value> <Select thin secondary {label} data-cy="{meta.name}-select" bind:value>
<option value="">Choose an option</option> <option value="">Choose an option</option>
{#each meta.constraints.inclusion as opt} {#each meta.constraints.inclusion as opt}
<option value={opt}>{opt}</option> <option value={opt}>{opt}</option>
{/each} {/each}
</Select> </Select>
{:else if type === 'date'} {:else if type === 'datetime'}
<DatePicker {label} bind:value /> <DatePicker {label} bind:value />
{:else if type === 'file'} {:else if type === 'attachment'}
<div> <div>
<Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label> <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
<Dropzone bind:files={value} /> <Dropzone bind:files={value} />
</div> </div>
{:else if type === 'checkbox'} {:else if type === 'boolean'}
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" /> <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
{:else if type === 'link'}
<LinkedRecordSelector bind:linkedRecords={value} schema={meta} />
{:else} {:else}
<Input thin {label} data-cy="{meta.name}-input" {type} bind:value /> <Input thin {label} data-cy="{meta.name}-input" {type} bind:value />
{/if} {/if}

7
packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
import RecordFieldControl from "../RecordFieldControl.svelte" import RecordFieldControl from "../RecordFieldControl.svelte"
import * as api from "../api" import * as api from "../api"
import { Modal } from "components/common/Modal" import { Modal } from "components/common/Modal"
@ -44,11 +43,7 @@
<ErrorsBox {errors} /> <ErrorsBox {errors} />
{#each modelSchema as [key, meta]} {#each modelSchema as [key, meta]}
<div> <div>
{#if meta.type === 'link'} <RecordFieldControl {meta} bind:value={record[key]} />
<LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} />
{:else}
<RecordFieldControl {meta} bind:value={record[key]} />
{/if}
</div> </div>
{/each} {/each}
</Modal> </Modal>

13
packages/builder/src/components/common/LinkedRecordSelector.svelte
View File

@ -2,9 +2,8 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import api from "builderStore/api" import api from "builderStore/api"
import { Select, Label } from "@budibase/bbui" import { Select, Label, Multiselect } from "@budibase/bbui"
import { capitalise } from "../../helpers" import { capitalise } from "../../helpers"
import MultiSelect from "components/common/MultiSelect.svelte"
export let schema export let schema
export let linkedRecords = [] export let linkedRecords = []
@ -19,8 +18,7 @@
async function fetchRecords(linkedModelId) { async function fetchRecords(linkedModelId) {
const FETCH_RECORDS_URL = `/api/${linkedModelId}/records` const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
const response = await api.get(FETCH_RECORDS_URL) const response = await api.get(FETCH_RECORDS_URL)
const result = await response.json() return await response.json()
return result
} }
function getPrettyName(record) { function getPrettyName(record) {
@ -37,15 +35,14 @@
</Label> </Label>
{:else} {:else}
{#await promise then records} {#await promise then records}
<MultiSelect <Multiselect
thin
secondary secondary
bind:value={linkedRecords} bind:value={linkedRecords}
{label} {label}
placeholder="Choose an option"> placeholder="Choose some options">
{#each records as record} {#each records as record}
<option value={record._id}>{getPrettyName(record)}</option> <option value={record._id}>{getPrettyName(record)}</option>
{/each} {/each}
</MultiSelect> </Multiselect>
{/await} {/await}
{/if} {/if}

146
packages/builder/src/components/common/MultiSelect.svelte
View File

@ -1,19 +1,25 @@
<script> <script>
import { onMount } from "svelte" import { onMount, afterUpdate } from "svelte"
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
import { Label } from "@budibase/bbui" import { Label } from "@budibase/bbui"
import buildStyle from "@budibase/bbui/src/utils/buildStyle"
const xPath = const xPath =
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
export let value = [] export let value = []
export let label export let label = undefined
export let secondary = false
export let outline = false
export let disabled = false
export let placeholder = undefined
let placeholder = "Type to search"
let options = [] let options = []
let optionsVisible = false let optionsVisible = false
let selected = {} let selected = {}
let first = true let first = true
let slot let slot
let anchor
let dimensions = { top: 0, left: 0, minWidth: 0, maxHeight: 0 }
onMount(() => { onMount(() => {
const domOptions = Array.from(slot.querySelectorAll("option")) const domOptions = Array.from(slot.querySelectorAll("option"))
@ -31,6 +37,13 @@
first = false first = false
}) })
// Update dimensions after each dom update
afterUpdate(() => {
if (anchor) {
updateDimensions()
}
})
// Keep value up to date with selected options // Keep value up to date with selected options
$: { $: {
if (!first) { if (!first) {
@ -38,6 +51,24 @@
} }
} }
// Build CSS styles for options dropdown
$: menuStyle = buildStyle({
"max-height": `${dimensions.maxHeight.toFixed(0)}px`,
"min-width": `${dimensions.minWidth.toFixed(0)}px`,
top: `${dimensions.top}px`,
left: `${dimensions.left}px`,
})
function updateDimensions() {
const { bottom, left, width } = anchor.getBoundingClientRect()
dimensions = {
top: bottom,
left,
minWidth: width - 4,
maxHeight: window.innerHeight - bottom - 30,
}
}
function add(token) { function add(token) {
selected[token.value] = token selected[token.value] = token
} }
@ -47,10 +78,6 @@
selected = rest selected = rest
} }
function removeAll() {
selected = []
}
function showOptions(show) { function showOptions(show) {
optionsVisible = show optionsVisible = show
} }
@ -79,12 +106,20 @@
<div class="multiselect"> <div class="multiselect">
<div class="tokens-wrapper"> <div class="tokens-wrapper">
<div <div
bind:this={anchor}
class="tokens" class="tokens"
class:outline
class:disabled
class:secondary
class:optionsVisible class:optionsVisible
on:click|self={handleClick} on:click|self={handleClick}
class:empty={!value || !value.length}> class:empty={!value || !value.length}>
{#each Object.values(selected) as option} {#each Object.values(selected) as option}
<div class="token" data-id={option.value} on:click|self={handleClick}> <div
class="token"
class:secondary
data-id={option.value}
on:click|self={handleClick}>
<span>{option.name}</span> <span>{option.name}</span>
<div <div
class="token-remove" class="token-remove"
@ -101,7 +136,13 @@
</div> </div>
</div> </div>
{/each} {/each}
{#if !value || !value.length}&nbsp;{/if} {#if !value || !value.length}
{#if placeholder && placeholder.length}
<div class:disabled class="placeholder">{placeholder}</div>
{:else}
<div class="placeholder">&nbsp;</div>
{/if}
{/if}
</div> </div>
</div> </div>
@ -110,20 +151,24 @@
</select> </select>
{#if optionsVisible} {#if optionsVisible}
<div class="options-overlay" on:click|self={() => showOptions(false)} /> <div class="options-overlay" on:mousedown|self={() => showOptions(false)}>
<ul <ul
class="options" class="options"
transition:fly={{ duration: 200, y: 5 }} style={menuStyle}
on:mousedown|preventDefault={handleOptionMousedown}> transition:fly={{ duration: 200, y: 5 }}
{#each options as option} on:mousedown|preventDefault={handleOptionMousedown}>
<li class:selected={selected[option.value]} data-value={option.value}> {#each options as option}
{option.name} <li
</li> class:selected={selected[option.value]}
{/each} data-value={option.value}>
{#if !options.length} {option.name}
<li class="no-results">No results</li> </li>
{/if} {/each}
</ul> {#if !options.length}
<li class="no-results">No results</li>
{/if}
</ul>
</div>
{/if} {/if}
</div> </div>
</div> </div>
@ -135,6 +180,7 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
font-family: var(--font-sans);
} }
.multiselect:hover { .multiselect:hover {
border-bottom-color: hsl(0, 0%, 50%); border-bottom-color: hsl(0, 0%, 50%);
@ -146,7 +192,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex: 0 1 auto; flex: 0 1 auto;
z-index: 2;
} }
.tokens { .tokens {
@ -156,12 +201,22 @@
position: relative; position: relative;
width: 0; width: 0;
flex: 1 1 auto; flex: 1 1 auto;
background-color: var(--grey-2); background-color: white;
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs)) padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
calc(var(--spacing-m) / 2); calc(var(--spacing-m) / 2);
border: var(--border-transparent); border: var(--border-transparent);
} }
.tokens.disabled {
background-color: var(--grey-4);
pointer-events: none;
}
.tokens.outline {
border: var(--border-dark);
}
.tokens.secondary {
background-color: var(--grey-2);
}
.tokens:hover { .tokens:hover {
cursor: pointer; cursor: pointer;
} }
@ -188,24 +243,34 @@
width: 100%; width: 100%;
left: 0; left: 0;
} }
.token { .token {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
align-items: center; background-color: var(--grey-2);
background-color: white;
border-radius: var(--border-radius-l); border-radius: var(--border-radius-l);
display: flex; display: flex;
flex-direction: row;
align-items: center;
margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0 margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
calc(var(--spacing-m) / 2); calc(var(--spacing-m) / 2);
max-height: 1.3rem; max-height: 1.3rem;
padding: var(--spacing-xs) var(--spacing-s); padding: var(--spacing-xs) var(--spacing-s);
transition: background-color 0.3s; transition: background-color 0.3s;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
}
.token.secondary {
background-color: white;
} }
.token span { .token span {
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.token-remove { .token .token-remove {
align-items: center; align-items: center;
background-color: var(--grey-4); background-color: var(--grey-4);
border-radius: 50%; border-radius: 50%;
@ -216,12 +281,20 @@
width: 1rem; width: 1rem;
margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs)) margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
var(--spacing-xs); var(--spacing-xs);
flex: 0 0 auto;
} }
.token-remove:hover { .token .token-remove:hover {
background-color: var(--grey-5); background-color: var(--grey-5);
cursor: pointer; cursor: pointer;
} }
.placeholder {
pointer-events: none;
}
.placeholder.disabled {
color: var(--grey-6);
}
.icon-clear path { .icon-clear path {
fill: white; fill: white;
} }
@ -232,11 +305,10 @@
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 1; z-index: 999;
} }
.options { .options {
z-index: 2;
left: 0; left: 0;
list-style: none; list-style: none;
margin-block-end: 0; margin-block-end: 0;
@ -244,12 +316,10 @@
overflow-y: auto; overflow-y: auto;
padding-inline-start: 0; padding-inline-start: 0;
position: absolute; position: absolute;
top: calc(100% + 1px);
width: calc(100% - 4px);
border: var(--border-dark); border: var(--border-dark);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
margin-top: var(--spacing-xs); margin: var(--spacing-xs) 0;
padding: var(--spacing-s) 0; padding: var(--spacing-s) 0;
background-color: white; background-color: white;
max-height: 200px; max-height: 200px;
@ -273,6 +343,12 @@
} }
.hidden { .hidden {
display: none; height: 0;
overflow: hidden;
visibility: hidden;
padding: 0;
margin: 0;
border: 0;
outline: 0;
} }
</style> </style>

12
packages/builder/yarn.lock
View File

@ -709,10 +709,10 @@
lodash "^4.17.13" lodash "^4.17.13"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@budibase/bbui@^1.39.0": "@budibase/bbui@^1.40.1":
version "1.39.0" version "1.40.1"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.39.0.tgz#7d3e259a60a0b4602f3d2da3452679d91a591fdd" resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.40.1.tgz#7ebfd52b4da822312d3395447a4f73caa41f8014"
integrity sha512-9IL5Lw488sdYCa9mjHHdrap11VqW6wQHNcNTL8fFHaWNzummtlaUlVMScs9cunYgsR/L4NCgH0zSFdP0RnrUqw== integrity sha512-0t5Makyn5jOURKZIQPvd+8G4m6ps4GyfLUkAz5rKJSnAQSAgLiuZ+RihcEReDEJK8tnfW7h2echJTffJduQRRQ==
dependencies: dependencies:
sirv-cli "^0.4.6" sirv-cli "^0.4.6"
svelte-flatpickr "^2.4.0" svelte-flatpickr "^2.4.0"
@ -5844,10 +5844,6 @@ svelte-portal@^0.1.0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742" resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
svelte-simple-modal@^0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.4.2.tgz#2cfe26ec8c0760b89813d65dfee836399620d6b2"
svelte@^3.24.1: svelte@^3.24.1:
version "3.25.1" version "3.25.1"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4"