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

Merge pull request #8965 from Budibase/cheeks-fixes 

Misc fixes
This commit is contained in:
Andrew Kingston 2022-12-07 13:01:14 +00:00 committed by GitHub
parent 3ffbb90f5f 2b4ad2d0b9
commit 5cad5e2604
12 changed files with 124 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -205,7 +205,10 @@
width: 100%;
}
.spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spectrum-Picker {
width: 100%;

6
packages/builder/src/builderStore/dataBinding.js
View File

@ -481,6 +481,7 @@ const getSelectedRowsBindings = asset => {
block._id + "-table"
)}.${makePropSafe("selectedRows")}`,
readableBinding: `${block._instanceName}.Selected rows`,
category: "Selected rows",
}))
)
}
@ -1004,7 +1005,10 @@ const bindingReplacement = (
* {{ literal [componentId] }}
*/
const extractLiteralHandlebarsID = value => {
return value?.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1]
if (!value || typeof value !== "string") {
return null
}
return value.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1]
}
/**

4
packages/builder/src/builderStore/store/frontend.js
View File

@ -1049,8 +1049,8 @@ export const getFrontendStore = () => {
const updatedSetting = settings.find(setting => setting.key === name)
if (
updatedSetting.type === "dataSource" ||
updatedSetting.type === "table"
updatedSetting?.type === "dataSource" ||
updatedSetting?.type === "table"
) {
const { schema } = getSchemaForDatasource(null, value)
const columnNames = Object.keys(schema || {})

13
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -38,13 +38,15 @@
export let testData
export let schemaProperties
export let isTestModal = false
let webhookModal
let drawer
let tempFilters = lookForFilters(schemaProperties) || []
let fillWidth = true
let codeBindingOpen = false
let inputData
$: filters = lookForFilters(schemaProperties) || []
$: tempFilters = filters
$: stepId = block.stepId
$: bindings = getAvailableBindings(
block || $automationStore.selectedBlock,
@ -222,16 +224,17 @@
{:else if value.customType === "filters"}
<ActionButton on:click={drawer.show}>Define filters</ActionButton>
<Drawer bind:this={drawer} {fillWidth} title="Filtering">
<Button cta slot="buttons" on:click={() => saveFilters(key)}
>Save</Button
>
<Button cta slot="buttons" on:click={() => saveFilters(key)}>
Save
</Button>
<FilterDrawer
slot="body"
bind:filters={tempFilters}
{filters}
{bindings}
{schemaFields}
panel={AutomationBindingPanel}
fillWidth
on:change={e => (tempFilters = e.detail)}
/>
</Drawer>
{:else if value.customType === "password"}

5
packages/builder/src/components/backend/DataTable/DataTable.svelte
View File

@ -25,6 +25,7 @@
import { API } from "api"
let hideAutocolumns = true
let filters
$: isUsersTable = $tables.selected?._id === TableNames.USERS
$: type = $tables.selected?.type
@ -102,8 +103,9 @@
// Fetch data whenever filters change
const onFilter = e => {
filters = e.detail
fetch.update({
filter: e.detail,
filter: filters,
})
}
@ -178,6 +180,7 @@
{#key id}
<TableFilterButton
{schema}
{filters}
on:change={onFilter}
disabled={!hasCols}
/>

8
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View File

@ -8,9 +8,10 @@
export let disabled = false
const dispatch = createEventDispatcher()
let modal
let tempValue = filters || []
let modal
$: tempValue = filters || []
$: schemaFields = Object.values(schema || {})
</script>
@ -34,8 +35,9 @@
<div class="wrapper">
<FilterDrawer
allowBindings={false}
bind:filters={tempValue}
{filters}
{schemaFields}
on:change={e => (tempValue = e.detail)}
/>
</div>
</ModalContent>

91
packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
View File

@ -17,22 +17,30 @@
import { generate } from "shortid"
import { LuceneUtils, Constants } from "@budibase/frontend-core"
import { getFields } from "helpers/searchFields"
import { createEventDispatcher, onMount } from "svelte"
const dispatch = createEventDispatcher()
const { OperatorOptions } = Constants
const { getValidOperatorsForType } = LuceneUtils
import { createEventDispatcher } from "svelte"
export let schemaFields
export let filters = []
export let bindings = []
export let panel = ClientBindingPanel
export let allowBindings = true
export let allOr = false
export let fillWidth = false
export let tableId
$: dispatch("change", filters)
const dispatch = createEventDispatcher()
const { OperatorOptions } = Constants
const { getValidOperatorsForType } = LuceneUtils
const KeyedFieldRegex = /\d[0-9]*:/g
const behaviourOptions = [
{ value: "and", label: "Match all filters" },
{ value: "or", label: "Match any filter" },
]
let rawFilters
let matchAny = false
$: parseFilters(filters)
$: dispatch("change", enrichFilters(rawFilters, matchAny))
$: enrichedSchemaFields = getFields(
schemaFields || [],
{ allowLinks: true },
@ -41,14 +49,41 @@
$: fieldOptions = enrichedSchemaFields.map(field => field.name) || []
$: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
let behaviourValue
const behaviourOptions = [
{ value: "and", label: "Match all of the following filters" },
{ value: "or", label: "Match any of the following filters" },
]
// Remove field key prefixes and determine whether to use the "match all"
// or "match any" behaviour
const parseFilters = filters => {
matchAny = filters?.find(filter => filter.operator === "allOr") != null
rawFilters = (filters || [])
.filter(filter => filter.operator !== "allOr")
.map(filter => {
const { field } = filter
let newFilter = { ...filter }
delete newFilter.allOr
if (typeof field === "string" && field.match(KeyedFieldRegex) != null) {
const parts = field.split(":")
parts.shift()
newFilter.field = parts.join(":")
}
return newFilter
})
}
// Add field key prefixes and a special metadata filter object to indicate
// whether to use the "match all" or "match any" behaviour
const enrichFilters = (rawFilters, matchAny) => {
let count = 1
return rawFilters
.filter(filter => filter.field)
.map(filter => ({
...filter,
field: `${count++}:${filter.field}`,
}))
.concat(matchAny ? [{ operator: "allOr" }] : [])
}
const addFilter = () => {
filters = [
...filters,
rawFilters = [
...rawFilters,
{
id: generate(),
field: null,
@ -60,13 +95,13 @@
}
const removeFilter = id => {
filters = filters.filter(field => field.id !== id)
rawFilters = rawFilters.filter(field => field.id !== id)
}
const duplicateFilter = id => {
const existingFilter = filters.find(filter => filter.id === id)
const existingFilter = rawFilters.find(filter => filter.id === id)
const duplicate = { ...existingFilter, id: generate() }
filters = [...filters, duplicate]
rawFilters = [...rawFilters, duplicate]
}
const getSchema = filter => {
@ -133,32 +168,22 @@
const schema = enrichedSchemaFields.find(x => x.name === field)
return schema?.constraints?.inclusion || []
}
onMount(() => {
behaviourValue = allOr ? "or" : "and"
})
</script>
<DrawerContent>
<div class="container">
<Layout noPadding>
<Body size="S">
{#if !filters?.length}
Add your first filter expression.
{#if !rawFilters?.length}
<Body size="S">Add your first filter expression.</Body>
{:else}
Results are filtered to only those which match all of the following
constraints.
{/if}
</Body>
{#if filters?.length}
<div class="fields">
<Select
label="Behaviour"
value={behaviourValue}
value={matchAny ? "or" : "and"}
options={behaviourOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => (allOr = e.detail === "or")}
on:change={e => (matchAny = e.detail === "or")}
placeholder={null}
/>
</div>
@ -167,7 +192,7 @@
<Label>Filters</Label>
</div>
<div class="fields">
{#each filters as filter, idx}
{#each rawFilters as filter, idx}
<Select
bind:value={filter.field}
options={fieldOptions}
@ -269,7 +294,7 @@
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: 1fr 150px 120px 1fr 16px 16px;
grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
}
.filter-label {

67
packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
View File

@ -8,74 +8,22 @@
import FilterDrawer from "./FilterDrawer.svelte"
import { currentAsset } from "builderStore"
const QUERY_START_REGEX = /\d[0-9]*:/g
const dispatch = createEventDispatcher()
export let value = []
export let componentInstance
export let bindings = []
let drawer,
toSaveFilters = null,
allOr,
initialAllOr
let drawer
$: initialFilters = correctFilters(value || [])
$: tempValue = value
$: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource($currentAsset, dataSource)?.schema
$: schemaFields = Object.values(schema || {})
function addNumbering(filters) {
let count = 1
for (let value of filters) {
if (value.field && value.field?.match(QUERY_START_REGEX) == null) {
value.field = `${count++}:${value.field}`
}
}
return filters
}
function correctFilters(filters) {
const corrected = []
for (let filter of filters) {
let field = filter.field
if (filter.operator === "allOr") {
initialAllOr = allOr = true
continue
}
if (
typeof filter.field === "string" &&
filter.field.match(QUERY_START_REGEX) != null
) {
const parts = field.split(":")
const number = parts[0]
// it's the new format, remove number
if (!isNaN(parseInt(number))) {
parts.shift()
field = parts.join(":")
}
}
corrected.push({
...filter,
field,
})
}
return corrected
}
async function saveFilter() {
if (!toSaveFilters && allOr !== initialAllOr) {
toSaveFilters = initialFilters
}
const filters = toSaveFilters?.filter(filter => filter.operator !== "allOr")
if (allOr && filters) {
filters.push({ operator: "allOr" })
}
// only save if anything was updated
if (filters) {
dispatch("change", addNumbering(filters))
}
notifications.success("Filters saved.")
dispatch("change", tempValue)
notifications.success("Filters saved")
drawer.hide()
}
</script>
@ -85,13 +33,10 @@
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<FilterDrawer
slot="body"
filters={initialFilters}
filters={value}
{bindings}
{schemaFields}
tableId={dataSource.tableId}
bind:allOr
on:change={event => {
toSaveFilters = event.detail
}}
on:change={e => (tempValue = e.detail)}
/>
</Drawer>

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View File

@ -61,6 +61,13 @@
align-items: center;
gap: var(--spacing-l);
}
.header-left {
flex: 1 1 auto;
width: 0;
}
.header-left :global(> *) {
max-width: 100%;
}
.header-left :global(.spectrum-Picker) {
font-weight: 600;
color: var(--spectrum-global-color-gray-900);

8
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
View File

@ -282,12 +282,16 @@
gap: var(--spacing-l);
display: grid;
align-items: center;
grid-template-columns: auto 160px auto 1fr 130px 130px 1fr auto auto;
grid-template-columns:
auto 150px auto minmax(140px, 1fr) 120px 100px minmax(140px, 1fr)
auto auto;
border-radius: var(--border-radius-s);
transition: background-color ease-in-out 130ms;
}
.condition.update {
grid-template-columns: auto 160px 1fr auto 1fr auto 1fr 130px 130px 1fr auto auto;
grid-template-columns:
auto 150px minmax(140px, 1fr) auto minmax(140px, 1fr) auto
minmax(140px, 1fr) 120px 100px minmax(140px, 1fr) auto auto;
}
.condition:hover {
background-color: var(--spectrum-global-color-gray-100);

20
packages/client/src/components/app/SidePanel.svelte
View File

@ -29,6 +29,17 @@
// Derive visibility
$: open = $sidePanelStore.contentId === $component.id
// Derive a render key which is only changed whenever this panel is made
// visible after being hidden. We need to key the content to avoid showing
// stale data when re-revealing a side panel that was closed, but we cannot
// hide the content altogether when hidden as this breaks ejection.
let renderKey = null
$: {
if (open) {
renderKey = Math.random()
}
}
const showInSidePanel = (el, visible) => {
const update = visible => {
const target = document.getElementById("side-panel-container")
@ -47,7 +58,10 @@
// Apply initial visibility
update(visible)
return { update }
return {
update,
destroy: () => update(false),
}
}
</script>
@ -57,9 +71,9 @@
class="side-panel"
class:open
>
{#if $sidePanelStore.open}
{#key renderKey}
<slot />
{/if}
{/key}
</div>
<style>

4
packages/frontend-core/src/constants.js
View File

@ -28,11 +28,11 @@ export const OperatorOptions = {
},
MoreThan: {
value: "rangeLow",
label: "More than",
label: "More than or equal to",
},
LessThan: {
value: "rangeHigh",
label: "Less than",
label: "Less than or equal to",
},
Contains: {
value: "contains",