Make app dynamic filter component respsonsive
This commit is contained in:
Andrew Kingston
parent
406776088d
commit
1e8ef54956
|
|
@ -4,7 +4,6 @@
|
||||||
Button,
|
Button,
|
||||||
Combobox,
|
Combobox,
|
||||||
DatePicker,
|
DatePicker,
|
||||||
DrawerContent,
|
|
||||||
Icon,
|
Icon,
|
||||||
Input,
|
Input,
|
||||||
Layout,
|
Layout,
|
||||||
|
|
@ -12,10 +11,12 @@
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { generate } from "shortid"
|
import { generate } from "shortid"
|
||||||
import { LuceneUtils, Constants } from "@budibase/frontend-core"
|
import { LuceneUtils, Constants } from "@budibase/frontend-core"
|
||||||
|
import { getContext } from "svelte"
|
||||||
|
|
||||||
export let schemaFields
|
export let schemaFields
|
||||||
export let filters = []
|
export let filters = []
|
||||||
|
|
||||||
|
const context = getContext("context")
|
||||||
const BannedTypes = ["link", "attachment", "json"]
|
const BannedTypes = ["link", "attachment", "json"]
|
||||||
|
|
||||||
$: fieldOptions = (schemaFields ?? [])
|
$: fieldOptions = (schemaFields ?? [])
|
||||||
|
|
@ -89,55 +90,55 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerContent>
|
<div class="container" class:mobile={$context.device.mobile}>
|
||||||
<div class="container">
|
<Layout noPadding>
|
||||||
<Layout noPadding>
|
<Body size="S">
|
||||||
<Body size="S">
|
{#if !filters?.length}
|
||||||
{#if !filters?.length}
|
Add your first filter expression.
|
||||||
Add your first filter expression.
|
{:else}
|
||||||
{:else}
|
Results are filtered to only those which match all of the following
|
||||||
Results are filtered to only those which match all of the following
|
constraints.
|
||||||
constraints.
|
{/if}
|
||||||
{/if}
|
</Body>
|
||||||
</Body>
|
{#if filters?.length}
|
||||||
{#if filters?.length}
|
<div class="fields">
|
||||||
<div class="fields">
|
{#each filters as filter, idx}
|
||||||
{#each filters as filter, idx}
|
<Select
|
||||||
<Select
|
bind:value={filter.field}
|
||||||
bind:value={filter.field}
|
options={fieldOptions}
|
||||||
options={fieldOptions}
|
on:change={e => onFieldChange(filter, e.detail)}
|
||||||
on:change={e => onFieldChange(filter, e.detail)}
|
placeholder="Column"
|
||||||
placeholder="Column"
|
/>
|
||||||
|
<Select
|
||||||
|
disabled={!filter.field}
|
||||||
|
options={LuceneUtils.getValidOperatorsForType(filter.type)}
|
||||||
|
bind:value={filter.operator}
|
||||||
|
on:change={e => onOperatorChange(filter, e.detail)}
|
||||||
|
placeholder={null}
|
||||||
|
/>
|
||||||
|
{#if ["string", "longform", "number", "formula"].includes(filter.type)}
|
||||||
|
<Input disabled={filter.noValue} bind:value={filter.value} />
|
||||||
|
{:else if ["options", "array"].includes(filter.type)}
|
||||||
|
<Combobox
|
||||||
|
disabled={filter.noValue}
|
||||||
|
options={getFieldOptions(filter.field)}
|
||||||
|
bind:value={filter.value}
|
||||||
/>
|
/>
|
||||||
<Select
|
{:else if filter.type === "boolean"}
|
||||||
disabled={!filter.field}
|
<Combobox
|
||||||
options={LuceneUtils.getValidOperatorsForType(filter.type)}
|
disabled={filter.noValue}
|
||||||
bind:value={filter.operator}
|
options={[
|
||||||
on:change={e => onOperatorChange(filter, e.detail)}
|
{ label: "True", value: "true" },
|
||||||
placeholder={null}
|
{ label: "False", value: "false" },
|
||||||
|
]}
|
||||||
|
bind:value={filter.value}
|
||||||
/>
|
/>
|
||||||
{#if ["string", "longform", "number", "formula"].includes(filter.type)}
|
{:else if filter.type === "datetime"}
|
||||||
<Input disabled={filter.noValue} bind:value={filter.value} />
|
<DatePicker disabled={filter.noValue} bind:value={filter.value} />
|
||||||
{:else if ["options", "array"].includes(filter.type)}
|
{:else}
|
||||||
<Combobox
|
<Input disabled />
|
||||||
disabled={filter.noValue}
|
{/if}
|
||||||
options={getFieldOptions(filter.field)}
|
<div class="controls">
|
||||||
bind:value={filter.value}
|
|
||||||
/>
|
|
||||||
{:else if filter.type === "boolean"}
|
|
||||||
<Combobox
|
|
||||||
disabled={filter.noValue}
|
|
||||||
options={[
|
|
||||||
{ label: "True", value: "true" },
|
|
||||||
{ label: "False", value: "false" },
|
|
||||||
]}
|
|
||||||
bind:value={filter.value}
|
|
||||||
/>
|
|
||||||
{:else if filter.type === "datetime"}
|
|
||||||
<DatePicker disabled={filter.noValue} bind:value={filter.value} />
|
|
||||||
{:else}
|
|
||||||
<Input disabled />
|
|
||||||
{/if}
|
|
||||||
<Icon
|
<Icon
|
||||||
name="Duplicate"
|
name="Duplicate"
|
||||||
hoverable
|
hoverable
|
||||||
|
|
@ -150,17 +151,17 @@
|
||||||
size="S"
|
size="S"
|
||||||
on:click={() => removeFilter(filter.id)}
|
on:click={() => removeFilter(filter.id)}
|
||||||
/>
|
/>
|
||||||
{/each}
|
</div>
|
||||||
</div>
|
{/each}
|
||||||
{/if}
|
|
||||||
<div>
|
|
||||||
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
|
|
||||||
Add filter
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
{/if}
|
||||||
</div>
|
<div>
|
||||||
</DrawerContent>
|
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
|
||||||
|
Add filter
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -175,4 +176,19 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
grid-template-columns: 1fr 120px 1fr auto auto;
|
grid-template-columns: 1fr 120px 1fr auto auto;
|
||||||
}
|
}
|
||||||
|
.controls {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.mobile .fields {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.container.mobile .controls {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--spacing-s) 0;
|
||||||
|
gap: var(--spacing-s);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue