Merge pull request #4131 from mathesar-foundation/4094_filter_improve…

…ments Fix UX issue with case-sensitive filtering
mathesar-foundation · Jan 15, 2025 · 47d5613 · 47d5613
2 parents 937eaa8 + ea03b45
commit 47d5613
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 41 deletions.
diff --git a/mathesar_ui/src/stores/abstract-types/operations/filtering.ts b/mathesar_ui/src/stores/abstract-types/operations/filtering.ts
@@ -79,7 +79,6 @@ const equalityFiltersResponse: AbstractTypeFilterDefinitionResponse[] = [
 // This is the API response expected from the server
 // Might be better if we can have this with the types endpoint
 const filterResponse: AbstractTypeFilterDefinitionResponse[] = [
-  ...equalityFiltersResponse,
   {
     id: 'contains_case_insensitive',
     name: 'contains',
@@ -100,6 +99,7 @@ const filterResponse: AbstractTypeFilterDefinitionResponse[] = [
     },
     hasParams: true,
   },
+  ...equalityFiltersResponse,
   {
     id: 'uri_scheme_equals',
     name: 'URI scheme is',

diff --git a/mathesar_ui/src/systems/table-view/actions-pane/record-operations/filter/Filter.svelte b/mathesar_ui/src/systems/table-view/actions-pane/record-operations/filter/Filter.svelte
@@ -5,6 +5,7 @@
   import { _ } from 'svelte-i18n';
 
   import type { LinkedRecordInputElement } from '@mathesar/components/cell-fabric/data-types/components/linked-record/LinkedRecordUtils';
+  import ProcessedColumnName from '@mathesar/components/column/ProcessedColumnName.svelte';
   import { validateFilterEntry } from '@mathesar/components/filter-entry';
   import { FILTER_INPUT_CLASS } from '@mathesar/components/filter-entry/utils';
   import { iconAddNew } from '@mathesar/icons';
@@ -15,7 +16,7 @@
   } from '@mathesar/stores/table-data';
   import type { FilterCombination } from '@mathesar/stores/table-data/filtering';
   import type RecordSummaryStore from '@mathesar/stores/table-data/record-summaries/RecordSummaryStore';
-  import { Button, Icon } from '@mathesar-component-library';
+  import { ButtonMenuItem, DropdownMenu } from '@mathesar-component-library';
 
   import { deepCloneFiltering } from '../utils';
 
@@ -57,11 +58,8 @@
     filtering.set(newFiltering);
   }
 
-  function addFilter(columnId?: number) {
-    const column =
-      columnId === undefined
-        ? [...processedColumns.values()][0]
-        : processedColumns.get(columnId);
+  function addFilter(columnId: number) {
+    const column = processedColumns.get(columnId);
     if (!column) {
       return;
     }
@@ -135,17 +133,24 @@
   </div>
   {#if processedColumns.size}
     <div class="footer">
-      <Button
-        appearance="secondary"
-        on:click={async () => {
-          addFilter();
-          await tick();
-          activateLastFilterInput();
-        }}
+      <DropdownMenu
+        icon={iconAddNew}
+        label={$_('add_new_filter')}
+        disabled={processedColumns.size === 0}
+        triggerAppearance="secondary"
       >
-        <Icon {...iconAddNew} />
-        <span>{$_('add_new_filter')}</span>
-      </Button>
+        {#each [...processedColumns.values()] as column (column.id)}
+          <ButtonMenuItem
+            on:click={async () => {
+              addFilter(column.id);
+              await tick();
+              activateLastFilterInput();
+            }}
+          >
+            <ProcessedColumnName processedColumn={column} />
+          </ButtonMenuItem>
+        {/each}
+      </DropdownMenu>
     </div>
   {/if}
 </div>

diff --git a/mathesar_ui/src/systems/table-view/actions-pane/record-operations/group/Group.svelte b/mathesar_ui/src/systems/table-view/actions-pane/record-operations/group/Group.svelte
@@ -2,8 +2,9 @@
   import type { Writable } from 'svelte/store';
   import { _ } from 'svelte-i18n';
 
-  import ColumnName from '@mathesar/components/column/ColumnName.svelte';
+  import ProcessedColumnName from '@mathesar/components/column/ProcessedColumnName.svelte';
   import GroupEntryComponent from '@mathesar/components/group-entry/GroupEntry.svelte';
+  import { iconAddNew } from '@mathesar/icons';
   import {
     type Grouping,
     type ProcessedColumn,
@@ -70,24 +71,14 @@
   </div>
   <footer>
     <DropdownMenu
+      icon={iconAddNew}
       label={$_('add_new_grouping')}
       disabled={availableColumns.length === 0}
       triggerAppearance="secondary"
     >
       {#each availableColumns as column (column.id)}
         <ButtonMenuItem on:click={() => addGroupColumn(column)}>
-          <ColumnName
-            column={{
-              name: $processedColumns.get(column.id)?.column.name ?? '',
-              type: $processedColumns.get(column.id)?.column.type ?? '',
-              type_options:
-                $processedColumns.get(column.id)?.column.type_options ?? null,
-              constraintsType: getColumnConstraintTypeByColumnId(
-                column.id,
-                $processedColumns,
-              ),
-            }}
-          />
+          <ProcessedColumnName processedColumn={column} />
         </ButtonMenuItem>
       {/each}
     </DropdownMenu>

diff --git a/mathesar_ui/src/systems/table-view/actions-pane/record-operations/sort/Sort.svelte b/mathesar_ui/src/systems/table-view/actions-pane/record-operations/sort/Sort.svelte
@@ -2,6 +2,7 @@
   import type { Writable } from 'svelte/store';
   import { _ } from 'svelte-i18n';
 
+  import ProcessedColumnName from '@mathesar/components/column/ProcessedColumnName.svelte';
   import SortEntry from '@mathesar/components/sort-entry/SortEntry.svelte';
   import type { SortDirection } from '@mathesar/components/sort-entry/utils';
   import {
@@ -15,21 +16,25 @@
     getTabularDataStoreFromContext,
   } from '@mathesar/stores/table-data';
   import { getColumnConstraintTypeByColumnId } from '@mathesar/utils/columnUtils';
-  import { Button, Icon } from '@mathesar-component-library';
+  import {
+    ButtonMenuItem,
+    DropdownMenu,
+    Icon,
+  } from '@mathesar-component-library';
 
   const tabularData = getTabularDataStoreFromContext();
 
   export let sorting: Writable<Sorting>;
   $: ({ processedColumns } = $tabularData);
 
   /** Columns which are not already used as a sorting entry */
-  $: availableColumnIds = [...$processedColumns.values()]
-    .filter((column) => !$sorting.has(column.id))
-    .map((entry) => entry.id);
+  $: availableColumns = [...$processedColumns.values()].filter(
+    (c) => !$sorting.has(c.id),
+  );
+  $: availableColumnIds = availableColumns.map((c) => c.id);
 
-  function addSortColumn() {
-    const [newSortColumnId] = availableColumnIds;
-    sorting.update((s) => s.with(newSortColumnId, 'ASCENDING'));
+  function addSortColumn(columnId: number) {
+    sorting.update((s) => s.with(columnId, 'ASCENDING'));
   }
 
   function removeSortColumn(columnId: number) {
@@ -97,10 +102,18 @@
   </div>
   {#if availableColumnIds.length > 0}
     <div class="footer">
-      <Button appearance="secondary" on:click={addSortColumn}>
-        <Icon {...iconAddNew} />
-        <span>{$_('add_new_sort_condition')}</span>
-      </Button>
+      <DropdownMenu
+        icon={iconAddNew}
+        label={$_('add_new_sort_condition')}
+        disabled={availableColumns.length === 0}
+        triggerAppearance="secondary"
+      >
+        {#each availableColumns as column (column.id)}
+          <ButtonMenuItem on:click={() => addSortColumn(column.id)}>
+            <ProcessedColumnName processedColumn={column} />
+          </ButtonMenuItem>
+        {/each}
+      </DropdownMenu>
     </div>
   {/if}
 </div>