Merge pull request #4901 from nocodb/fix/select-filtering

fix: filtering options for select columns

packages/nc-gui/utils/filterUtils.ts

@@ -67,7 +67,7 @@ export const comparisonOpList: {
   {
     text: 'contains any of',
     value: 'anyof',
-    includedTypes: [UITypes.MultiSelect],
+    includedTypes: [UITypes.MultiSelect, UITypes.SingleSelect],
   },
   {
     text: 'does not contain all of',
@@ -77,26 +77,26 @@ export const comparisonOpList: {
   {
     text: 'does not contain any of',
     value: 'nanyof',
-    includedTypes: [UITypes.MultiSelect],
+    includedTypes: [UITypes.MultiSelect, UITypes.SingleSelect],
   },
   {
     text: '>',
     value: 'gt',
-    excludedTypes: [UITypes.Checkbox],
+    excludedTypes: [UITypes.Checkbox, UITypes.MultiSelect, UITypes.SingleSelect],
   },
   {
     text: '<',
     value: 'lt',
-    excludedTypes: [UITypes.Checkbox],
+    excludedTypes: [UITypes.Checkbox, UITypes.MultiSelect, UITypes.SingleSelect],
   },
   {
     text: '>=',
     value: 'gte',
-    excludedTypes: [UITypes.Checkbox],
+    excludedTypes: [UITypes.Checkbox, UITypes.MultiSelect, UITypes.SingleSelect],
   },
   {
     text: '<=',
     value: 'lte',
-    excludedTypes: [UITypes.Checkbox],
+    excludedTypes: [UITypes.Checkbox, UITypes.MultiSelect, UITypes.SingleSelect],
   },
 ]

tests/playwright/tests/columnSingleSelect.spec.ts

@@ -2,6 +2,7 @@ import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import { GridPage } from '../pages/Dashboard/Grid';
 import setup from '../setup';
+import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 
 test.describe('Single select', () => {
   let dashboard: DashboardPage, grid: GridPage;
@@ -93,3 +94,95 @@ test.describe('Single select', () => {
     await grid.column.delete({ title: 'SingleSelect' });
   });
 });
+
+test.describe('Single select - filter & sort', () => {
+  // Row values
+  // no values (row ❶)
+  // only Foo (row ❷)
+  // only Bar (row ❸)
+  // only Baz (row ❹)
+
+  //   Example filters:
+  //
+  // where tags contains any of [Foo, Bar]
+  //   result: rows 2,3
+  // where tags does not contain any of [Foo, Bar]
+  //   result: rows 1,4
+
+  let dashboard: DashboardPage, grid: GridPage, toolbar: ToolbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+    grid = dashboard.grid;
+
+    await dashboard.treeView.createTable({ title: 'sheet1' });
+
+    await grid.column.create({ title: 'SingleSelect', type: 'SingleSelect' });
+    await grid.column.selectOption.addOptions({
+      columnTitle: 'SingleSelect',
+      options: ['foo', 'bar', 'baz'],
+    });
+    await grid.addNewRow({ index: 0, value: '1' });
+    await grid.addNewRow({ index: 1, value: '2' });
+    await grid.addNewRow({ index: 2, value: '3' });
+    await grid.addNewRow({ index: 3, value: '4' });
+
+    await grid.cell.selectOption.select({ index: 1, columnHeader: 'SingleSelect', option: 'foo', multiSelect: false });
+    await grid.cell.selectOption.select({ index: 2, columnHeader: 'SingleSelect', option: 'bar', multiSelect: false });
+    await grid.cell.selectOption.select({ index: 3, columnHeader: 'SingleSelect', option: 'baz', multiSelect: false });
+  });
+
+  // define validateRowArray function
+  async function validateRowArray(value: string[]) {
+    const length = value.length;
+    for (let i = 0; i < length; i++) {
+      await dashboard.grid.cell.verify({
+        index: i,
+        columnHeader: 'Title',
+        value: value[i],
+      });
+    }
+  }
+
+  async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
+    await toolbar.clickFilter();
+    await toolbar.filter.add({
+      columnTitle: 'SingleSelect',
+      opType: param.opType,
+      value: param.value,
+      isLocallySaved: false,
+    });
+    await toolbar.clickFilter();
+
+    // verify filtered rows
+    await validateRowArray(param.result);
+    // Reset filter
+    await toolbar.filter.reset();
+  }
+
+  test('Select and clear options and rename options', async () => {
+    await verifyFilter({ opType: 'contains any of', value: 'foo,bar', result: ['2', '3'] });
+    await verifyFilter({ opType: 'does not contain any of', value: 'foo,bar', result: ['1', '4'] });
+
+    // Sort column
+    await toolbar.sort.add({
+      columnTitle: 'SingleSelect',
+      isAscending: true,
+      isLocallySaved: false,
+    });
+    await validateRowArray(['1', '3', '4', '2']);
+    await toolbar.sort.reset();
+
+    // sort descending & validate
+    await toolbar.sort.add({
+      columnTitle: 'SingleSelect',
+      isAscending: false,
+      isLocallySaved: false,
+    });
+    await validateRowArray(['2', '4', '3', '1']);
+    await toolbar.sort.reset();
+  });
+});