Merge pull request #5007 from kobotoolbox/release-2.024.19-fix-data-t…

…able-filters-not-appearing Fix bug with table column filters not appearing
kobotoolbox · Jul 10, 2024 · 794dab3 · 794dab3
2 parents c6ad0e6 + 11b1cc4
commit 794dab3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
@@ -59,14 +59,14 @@ import {
   TABLE_MEDIA_TYPES,
   DEFAULT_DATA_CELL_WIDTH,
   CELLS_WIDTH_OVERRIDES,
-  DROPDOWN_FILTER_QUESTION_TYPES,
 } from 'js/components/submissions/tableConstants';
 import {
   getColumnLabel,
   getColumnHXLTags,
   getBackgroundAudioQuestionName,
   buildFilterQuery,
-  isTableColumnFilterable,
+  isTableColumnFilterableByTextInput,
+  isTableColumnFilterableByDropdown,
 } from 'js/components/submissions/tableUtils';
 import tableStore from 'js/components/submissions/tableStore';
 import type {TableStoreData} from 'js/components/submissions/tableStore';
@@ -888,7 +888,11 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
         accessor: (row) => row[key],
         index: index,
         question: q,
+        // This (and the Filter itself) will be set below (we do it separately,
+        // because we need to do it for all the columns, not only the ones in
+        // this loop)
         filterable: false,
+        // Filter
         sortable: false,
         className: elClassNames.join(' '),
         headerClassName: elClassNames.join(' '),
@@ -1067,12 +1071,10 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     const frozenColumn = tableStore.getFrozenColumn();
 
     columnsToRender.forEach((col: TableColumn) => {
-      const columnQuestionType = col.question?.type;
+      const columnQuestion = col.question;
 
-      if (
-        columnQuestionType &&
-        columnQuestionType in DROPDOWN_FILTER_QUESTION_TYPES
-      ) {
+      // We set filters here, so they apply for all columns
+      if (isTableColumnFilterableByDropdown(columnQuestion?.type)) {
         col.filterable = true;
         col.Filter = ({filter, onChange}) => (
           <select
@@ -1082,7 +1084,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
           >
             <option value=''>{t('Show All')}</option>
             {choices
-              .filter((choiceItem) => choiceItem.list_name === col.question?.select_from_list_name)
+              .filter((choiceItem) => choiceItem.list_name === columnQuestion?.select_from_list_name)
               .map((item, n) => {
                 const displayName = getQuestionOrChoiceDisplayName(
                   item,
@@ -1096,8 +1098,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
               })}
           </select>
         );
-      }
-      if (isTableColumnFilterable(col)) {
+      } else if (isTableColumnFilterableByTextInput(columnQuestion?.type, col.id)) {
         col.filterable = true;
         col.Filter = ({filter, onChange}) => (
           <DebounceInput
@@ -1108,7 +1109,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
             placeholder={t('Search')}
           />
         );
-      }
+      };
 
       if (frozenColumn === col.id) {
         col.className = col.className

diff --git a/jsapp/js/components/submissions/tableConstants.ts b/jsapp/js/components/submissions/tableConstants.ts
@@ -70,7 +70,7 @@ Object.freeze(CELLS_WIDTH_OVERRIDES);
  * For these question types the UI will display a dropdown filter in Data Table
  * for the matching column.
  */
-export const DROPDOWN_FILTER_QUESTION_TYPES = [
+export const DROPDOWN_FILTER_QUESTION_TYPES: AnyRowTypeName[] = [
   QuestionTypeName.select_multiple,
   QuestionTypeName.select_one,
 ];

diff --git a/jsapp/js/components/submissions/tableUtils.ts b/jsapp/js/components/submissions/tableUtils.ts
@@ -5,6 +5,7 @@ import {
   META_QUESTION_TYPES,
   SUPPLEMENTAL_DETAILS_PROP,
 } from 'js/constants';
+import type {AnyRowTypeName} from 'js/constants';
 import {ValidationStatusAdditionalName} from 'js/components/submissions/validationStatus.constants';
 import {
   EXCLUDED_COLUMNS,
@@ -13,6 +14,7 @@ import {
   TEXT_FILTER_QUESTION_IDS,
   TEXT_FILTER_QUESTION_TYPES,
   FILTER_EXACT_TYPES,
+  DROPDOWN_FILTER_QUESTION_TYPES,
 } from 'js/components/submissions/tableConstants';
 import type {
   SubmissionResponse,
@@ -353,13 +355,26 @@ export function buildFilterQuery(
 }
 
 /**
- * For checking if given column from Data Table should display a filter. It
- * works for columns associated with form questions and for other columns too.
+ * For checking if given column from Data Table should display a text input
+ * filter. It works for columns associated with form questions and for other
+ * columns too (e.g. submission metadata).
  */
-export function isTableColumnFilterable(column: TableColumn) {
-  if (column.question?.type && column.question?.type in TEXT_FILTER_QUESTION_TYPES) {
-    return TEXT_FILTER_QUESTION_TYPES.includes(column.question.type);
-  } else {
-    return TEXT_FILTER_QUESTION_IDS.includes(column.id);
-  }
+export function isTableColumnFilterableByTextInput(
+  questionType: AnyRowTypeName | undefined,
+  columnId: string
+) {
+  return (
+    (questionType && TEXT_FILTER_QUESTION_TYPES.includes(questionType)) ||
+    TEXT_FILTER_QUESTION_IDS.includes(columnId)
+  );
+}
+
+/**
+ * For checking if given column from Data Table should display a dropdown
+ * filter.
+ */
+export function isTableColumnFilterableByDropdown(
+  questionType: AnyRowTypeName | undefined
+) {
+  return questionType && DROPDOWN_FILTER_QUESTION_TYPES.includes(questionType);
 }