Add no column valid message

This commit is contained in:
Adria Navarro 2024-04-11 12:48:06 +02:00
parent 3f85514a0a
commit 9edde27620
1 changed files with 94 additions and 90 deletions

View File

@ -148,101 +148,105 @@
<div class="container" class:mobile={$context?.device?.mobile}> <div class="container" class:mobile={$context?.device?.mobile}>
<Layout noPadding> <Layout noPadding>
<Body size="S"> {#if fieldOptions?.length}
{#if !filters?.length} <Body size="S">
Add your first filter expression. {#if !filters?.length}
{:else} Add your first filter expression.
<slot name="filteringHeroContent" /> {:else}
{/if} <slot name="filteringHeroContent" />
</Body> {/if}
{#if filters?.length} </Body>
<div class="filter-label"> {#if filters?.length}
<Label>Filters</Label> <div class="filter-label">
</div> <Label>Filters</Label>
<div class="fields"> </div>
{#each filters as filter} <div class="fields">
<Select {#each filters as filter}
bind:value={filter.field}
options={fieldOptions}
on:change={() => onFieldChange(filter)}
placeholder="Column"
/>
<Select
disabled={!filter.field}
options={getValidOperatorsForType(filter)}
bind:value={filter.operator}
on:change={() => onOperatorChange(filter)}
placeholder={null}
/>
{#if allowBindings}
<Select <Select
disabled={filter.noValue || !filter.field} bind:value={filter.field}
options={valueTypeOptions} options={fieldOptions}
bind:value={filter.valueType} on:change={() => onFieldChange(filter)}
on:change={() => onValueTypeChange(filter)} placeholder="Column"
/>
<Select
disabled={!filter.field}
options={getValidOperatorsForType(filter)}
bind:value={filter.operator}
on:change={() => onOperatorChange(filter)}
placeholder={null} placeholder={null}
/> />
{/if} {#if allowBindings}
{#if allowBindings && filter.field && filter.valueType === "Binding"} <Select
<slot name="binding" {filter} /> disabled={filter.noValue || !filter.field}
{:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)} options={valueTypeOptions}
<Input disabled={filter.noValue} bind:value={filter.value} /> bind:value={filter.valueType}
{:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === SearchQueryOperators.ONE_OF)} on:change={() => onValueTypeChange(filter)}
<Multiselect placeholder={null}
disabled={filter.noValue} />
options={getFieldOptions(filter.field)} {/if}
bind:value={filter.value} {#if allowBindings && filter.field && filter.valueType === "Binding"}
/> <slot name="binding" {filter} />
{:else if filter.type === FieldType.OPTIONS} {:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
<Combobox <Input disabled={filter.noValue} bind:value={filter.value} />
disabled={filter.noValue} {:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === SearchQueryOperators.ONE_OF)}
options={getFieldOptions(filter.field)} <Multiselect
bind:value={filter.value} disabled={filter.noValue}
/> options={getFieldOptions(filter.field)}
{:else if filter.type === FieldType.BOOLEAN} bind:value={filter.value}
<Combobox />
disabled={filter.noValue} {:else if filter.type === FieldType.OPTIONS}
options={[ <Combobox
{ label: "True", value: "true" }, disabled={filter.noValue}
{ label: "False", value: "false" }, options={getFieldOptions(filter.field)}
]} bind:value={filter.value}
bind:value={filter.value} />
/> {:else if filter.type === FieldType.BOOLEAN}
{:else if filter.type === FieldType.DATETIME} <Combobox
<DatePicker disabled={filter.noValue}
disabled={filter.noValue} options={[
enableTime={!getSchema(filter)?.dateOnly} { label: "True", value: "true" },
timeOnly={getSchema(filter)?.timeOnly} { label: "False", value: "false" },
bind:value={filter.value} ]}
/> bind:value={filter.value}
{:else} />
<Input disabled /> {:else if filter.type === FieldType.DATETIME}
{/if} <DatePicker
<div class="controls"> disabled={filter.noValue}
<Icon enableTime={!getSchema(filter)?.dateOnly}
class timeOnly={getSchema(filter)?.timeOnly}
name="Duplicate" bind:value={filter.value}
hoverable />
size="S" {:else}
on:click={() => duplicateFilter(filter.id)} <Input disabled />
/> {/if}
</div> <div class="controls">
<div class="controls"> <Icon
<Icon class
name="Close" name="Duplicate"
hoverable hoverable
size="S" size="S"
on:click={() => removeFilter(filter.id)} on:click={() => duplicateFilter(filter.id)}
/> />
</div> </div>
{/each} <div class="controls">
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeFilter(filter.id)}
/>
</div>
{/each}
</div>
{/if}
<div>
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
Add filter
</Button>
</div> </div>
{:else}
<Body size="S">None of the table column can be used for filtering.</Body>
{/if} {/if}
<div>
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
Add filter
</Button>
</div>
</Layout> </Layout>
</div> </div>