-
-
Notifications
You must be signed in to change notification settings - Fork 352
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into fix_grouping
- Loading branch information
Showing
8 changed files
with
314 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
mathesar_ui/src/sections/table-view/display-options/FilterEntry.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher, onMount, onDestroy } from 'svelte'; | ||
| import { | ||
| faTimes, | ||
| } from '@fortawesome/free-solid-svg-icons'; | ||
| import { | ||
| Icon, | ||
| Button, | ||
| Select, | ||
| TextInput, | ||
| } from '@mathesar-components'; | ||
| import type { | ||
| FilterEntry, | ||
| } from '@mathesar/stores/tableData'; | ||
| import type { SelectOption } from '@mathesar-components/types'; | ||
| const dispatch = createEventDispatcher(); | ||
| export let options: SelectOption[]; | ||
| export let conditions: SelectOption[]; | ||
| export let column: FilterEntry['column']; | ||
| export let condition: FilterEntry['condition']; | ||
| export let value: FilterEntry['value']; | ||
| let inputValue: string; | ||
| let timer; | ||
| onMount(() => { | ||
| inputValue = value; | ||
| }); | ||
| onDestroy(() => { | ||
| clearTimeout(timer); | ||
| }); | ||
| function onValueChange(_inputValue: string) { | ||
| clearTimeout(timer); | ||
| timer = setTimeout(() => { | ||
| if (value !== _inputValue) { | ||
| value = _inputValue; | ||
| dispatch('reload'); | ||
| } | ||
| }, 500); | ||
| } | ||
| $: onValueChange(inputValue); | ||
| </script> | ||
|
|
||
| <tr> | ||
| <td class="column"> | ||
| <Select {options} bind:value={column} | ||
| on:change={() => dispatch('reload')}/> | ||
| </td> | ||
| <td class="dir"> | ||
| <Select options={conditions} bind:value={condition} | ||
| on:change={() => dispatch('reload')}/> | ||
| </td> | ||
| <td class="value"> | ||
| <TextInput bind:value={inputValue}/> | ||
| </td> | ||
| <td> | ||
| <Button size="small" on:click={() => dispatch('removeFilter')}> | ||
| <Icon data={faTimes}/> | ||
| </Button> | ||
| </td> | ||
| </tr> |
148 changes: 148 additions & 0 deletions
148
mathesar_ui/src/sections/table-view/display-options/FilterSection.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher, onMount } from 'svelte'; | ||
| import { | ||
| faTimes, | ||
| faPlus, | ||
| } from '@fortawesome/free-solid-svg-icons'; | ||
| import { | ||
| Icon, | ||
| Button, | ||
| Select, | ||
| TextInput, | ||
| } from '@mathesar-components'; | ||
| import type { | ||
| FilterOption, | ||
| } from '@mathesar/stores/tableData'; | ||
| import type { SelectOption } from '@mathesar-components/types'; | ||
| import FilterEntry from './FilterEntry.svelte'; | ||
| const dispatch = createEventDispatcher(); | ||
| export let options: SelectOption[]; | ||
| export let filter: FilterOption; | ||
| let filterCombination: SelectOption; | ||
| let filterColumn: SelectOption; | ||
| let filterCondition: SelectOption; | ||
| let filterValue = ''; | ||
| let addNew = false; | ||
| const combinations = [ | ||
| { id: 'and', label: 'and' }, | ||
| { id: 'or', label: 'or' }, | ||
| ]; | ||
| const conditions = [ | ||
| { id: 'eq', label: 'equals' }, | ||
| { id: 'ne', label: 'not equals' }, | ||
| ]; | ||
| onMount(() => { | ||
| filterCombination = filter?.combination ?? combinations[0]; | ||
| }); | ||
| function addFilter() { | ||
| filter = { | ||
| combination: filterCombination || filter?.combination || combinations[0], | ||
| filters: [ | ||
| ...(filter?.filters || []), | ||
| { | ||
| column: filterColumn, | ||
| condition: filterCondition, | ||
| value: filterValue, | ||
| }, | ||
| ], | ||
| }; | ||
| [filterColumn] = options; | ||
| [filterCondition] = conditions; | ||
| filterValue = ''; | ||
| dispatch('reload'); | ||
| addNew = false; | ||
| } | ||
| function removeFilter(index: number) { | ||
| filter?.filters?.splice(index, 1); | ||
| filter = { ...filter }; | ||
| dispatch('reload'); | ||
| } | ||
| function setFilterCombination() { | ||
| filter = { | ||
| ...filter, | ||
| combination: filterCombination, | ||
| }; | ||
| dispatch('reload'); | ||
| } | ||
| </script> | ||
|
|
||
| <section> | ||
| <div class="header"> | ||
| <span> | ||
| Filters | ||
| {#if filter?.filters?.length > 0} | ||
| ({filter?.filters?.length}) | ||
| {/if} | ||
| </span> | ||
| </div> | ||
| <div class="content"> | ||
| <table> | ||
| {#if filter?.filters?.length > 0} | ||
| <tr> | ||
| <td> | ||
| <Select options={combinations} bind:value={filterCombination} | ||
| on:change={setFilterCombination}/> | ||
| </td> | ||
| </tr> | ||
| {/if} | ||
| {#each filter?.filters || [] as option, index (option)} | ||
| <FilterEntry {options} {conditions} | ||
| bind:column={option.column} | ||
| bind:condition={option.condition} | ||
| bind:value={option.value} | ||
| on:removeFilter={() => removeFilter(index)} | ||
| on:reload={() => dispatch('reload')}/> | ||
| {:else} | ||
| <tr> | ||
| <td class="empty-msg" colspan="3"> | ||
| No filters added | ||
| </td> | ||
| </tr> | ||
| {/each} | ||
|
|
||
| {#if options.length > 0} | ||
| {#if !addNew} | ||
| <tr class="add-option"> | ||
| <td colspan="3"> | ||
| <Button on:click={() => { addNew = true; }}> | ||
| Add new filter | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
|
|
||
| {:else} | ||
| <tr class="add-option"> | ||
| <td class="column"> | ||
| <Select {options} bind:value={filterColumn}/> | ||
| </td> | ||
| <td class="dir"> | ||
| <Select options={conditions} bind:value={filterCondition}/> | ||
| </td> | ||
| <td class="value" colspan="2"> | ||
| <TextInput bind:value={filterValue}/> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td class="filter-action" colspan="4"> | ||
| <Button size="small" on:click={addFilter}> | ||
| <Icon data={faPlus}/> | ||
| </Button> | ||
| <Button size="small" on:click={() => { addNew = false; }}> | ||
| <Icon data={faTimes}/> | ||
| </Button> | ||
| </td> | ||
| </tr> | ||
| {/if} | ||
| {/if} | ||
| </table> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.