feat: [18904] Working List Filter component for null and not null Values

cypress/e2e/WorkingLists/sharedSteps.js

@@ -88,7 +88,7 @@ When(/^you set the first name filter to (.*)$/, (name) => {
         .click();
 
     cy.get('[data-test="list-view-filter-contents"]')
-        .find('input')
+        .find('input[placeholder="Contains text"]')
         .type(name)
         .blur();
 });

i18n/en.pot

@@ -477,6 +477,12 @@ msgstr "Absolute range"
 msgid "Relative range"
 msgstr "Relative range"
 
+msgid "Is empty"
+msgstr "Is empty"
+
+msgid "Is not empty"
+msgstr "Is not empty"
+
 msgid "Max"
 msgstr "Max"
 

src/core_modules/capture-core-utils/featuresSupport/support.ts

@@ -17,6 +17,7 @@ export const FEATURES = Object.freeze({
     kotlinRuleEngine: 'kotlinRuleEngine',
     orgUnitReplaceOuQueryParam: 'orgUnitReplaceOuQueryParam',
     enrollmentStatusReplaceProgramStatusQueryParam: 'enrollmentStatusReplaceProgramStatusQueryParam',
+    emptyValueFilter: 'emptyValueFilter',
 });
 
 const MINOR_VERSION_SUPPORT = Object.freeze({
@@ -38,6 +39,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.kotlinRuleEngine]: 42,
     [FEATURES.orgUnitReplaceOuQueryParam]: 42,
     [FEATURES.enrollmentStatusReplaceProgramStatusQueryParam]: 42,
+    [FEATURES.emptyValueFilter]: 42,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string | number, featureName: string) =>

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/EmptyValueFilterCheckboxes.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Checkbox, MenuDivider } from '@dhis2/ui';
+import { useFeature, FEATURES } from 'capture-core-utils/featuresSupport';
+import {
+    EMPTY_VALUE_FILTER,
+    NOT_EMPTY_VALUE_FILTER,
+    EMPTY_VALUE_FILTER_LABEL,
+    NOT_EMPTY_VALUE_FILTER_LABEL,
+} from './constants';
+import type { EmptyValueFilterCheckboxesProps } from './types';
+
+export const EmptyValueFilterCheckboxes = ({
+    value,
+    onEmptyChange,
+    onNotEmptyChange,
+}: EmptyValueFilterCheckboxesProps) => {
+    const emptyValueFilterSupported = useFeature(FEATURES.emptyValueFilter);
+
+    if (!emptyValueFilterSupported) {
+        return null;
+    }
+
+    return (
+        <div>
+            <Checkbox
+                label={EMPTY_VALUE_FILTER_LABEL}
+                checked={value === EMPTY_VALUE_FILTER}
+                onChange={onEmptyChange}
+            />
+            <Checkbox
+                label={NOT_EMPTY_VALUE_FILTER_LABEL}
+                checked={value === NOT_EMPTY_VALUE_FILTER}
+                onChange={onNotEmptyChange}
+            />
+            <MenuDivider />
+        </div>
+    );
+};

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/constants/emptyValue.const.ts

@@ -0,0 +1,10 @@
+import i18n from '@dhis2/d2-i18n';
+
+export const EMPTY_VALUE_FILTER = 'EMPTY_VALUE_FILTER';
+export const NOT_EMPTY_VALUE_FILTER = 'NOT_EMPTY_VALUE_FILTER';
+
+export const API_NOT_EMPTY_VALUE_FILTER = '!null';
+export const API_EMPTY_VALUE_FILTER = 'null';
+
+export const EMPTY_VALUE_FILTER_LABEL = i18n.t('Is empty');
+export const NOT_EMPTY_VALUE_FILTER_LABEL = i18n.t('Is not empty');

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/constants/index.ts

@@ -0,0 +1 @@
+export * from './emptyValue.const';

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/converters.ts

@@ -0,0 +1,26 @@
+import {
+    API_EMPTY_VALUE_FILTER,
+    EMPTY_VALUE_FILTER_LABEL,
+    NOT_EMPTY_VALUE_FILTER_LABEL,
+} from './constants';
+import type { EmptyValueFilterData } from './types';
+
+export const fromApiEmptyValueFilter = (filter: Record<string, unknown>): EmptyValueFilterData | undefined => {
+    if (typeof filter?.[API_EMPTY_VALUE_FILTER] === 'boolean') {
+        return {
+            isEmpty: filter[API_EMPTY_VALUE_FILTER] as boolean,
+            value: filter[API_EMPTY_VALUE_FILTER] ? EMPTY_VALUE_FILTER_LABEL : NOT_EMPTY_VALUE_FILTER_LABEL,
+        };
+    }
+    return undefined;
+};
+
+export const toApiEmptyValueFilter = (filter: EmptyValueFilterData): Record<string, boolean> | undefined => {
+    if (filter.isEmpty === true) {
+        return { [API_EMPTY_VALUE_FILTER]: true };
+    }
+    if (filter.isEmpty === false) {
+        return { [API_EMPTY_VALUE_FILTER]: false };
+    }
+    return undefined;
+};

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/emptyValueFilterHelpers.ts

@@ -0,0 +1,13 @@
+import {
+    EMPTY_VALUE_FILTER,
+    NOT_EMPTY_VALUE_FILTER,
+} from './constants';
+
+export const isEmptyValueFilter = (value?: string | null): boolean =>
+    value === EMPTY_VALUE_FILTER || value === NOT_EMPTY_VALUE_FILTER;
+
+export const makeCheckboxHandler =
+    (flag: string) =>
+        (onCommit: (value?: string | null) => void) =>
+            ({ checked }: { checked: boolean }) =>
+                onCommit(checked ? flag : '');

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/index.ts

@@ -0,0 +1,4 @@
+export { EmptyValueFilterCheckboxes } from './EmptyValueFilterCheckboxes.component';
+export * from './emptyValueFilterHelpers';
+export * from './constants';
+export * from './converters';

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/types/emptyValue.types.ts

@@ -0,0 +1,10 @@
+export type EmptyValueFilterCheckboxesProps = {
+    value?: string | null;
+    onEmptyChange: (args: { checked: boolean }) => void;
+    onNotEmptyChange: (args: { checked: boolean }) => void;
+};
+
+export type EmptyValueFilterData = {
+    value: string;
+    isEmpty?: boolean;
+};

src/core_modules/capture-core/components/FiltersForTypes/EmptyValue/types/index.ts

@@ -0,0 +1 @@
+export type { EmptyValueFilterCheckboxesProps, EmptyValueFilterData } from './emptyValue.types';

src/core_modules/capture-core/components/FiltersForTypes/Text/Input.component.tsx

@@ -10,17 +10,19 @@ type Props = {
 };
 
 class InputPlain extends React.Component<Props> {
-    handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    handleKeyDown = (payload: { value?: string }, event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
-            this.props.onEnterKey(this.props.value);
+            if (payload.value) {
+                this.props.onEnterKey(payload.value);
+            }
         }
-    }
+    };
 
     render() {
         const { onEnterKey, ...passOnProps } = this.props;
         return (
             <D2TextField
-                onKeyPress={this.handleKeyPress}
+                onKeyDown={this.handleKeyDown}
                 placeholder={i18n.t('Contains text')}
                 {...passOnProps}
             />

src/core_modules/capture-core/components/FiltersForTypes/Text/TextFilter.component.tsx

@@ -3,15 +3,18 @@ import { Input } from './Input.component';
 import { getTextFilterData } from './textFilterDataGetter';
 import type { UpdatableFilterContent } from '../types';
 import type { TextFilterProps, Value } from './Text.types';
+import {
+    makeCheckboxHandler,
+    isEmptyValueFilter,
+    EMPTY_VALUE_FILTER,
+    NOT_EMPTY_VALUE_FILTER,
+    EmptyValueFilterCheckboxes,
+} from '../EmptyValue';
 
 export class TextFilter extends Component<TextFilterProps> implements UpdatableFilterContent<Value> {
     onGetUpdateData(updatedValue?: Value) {
         const value = typeof updatedValue !== 'undefined' ? updatedValue : this.props.value;
 
-        if (!value) {
-            return null;
-        }
-
         return getTextFilterData(value);
     }
 
@@ -20,22 +23,36 @@ export class TextFilter extends Component<TextFilterProps> implements UpdatableF
     }
 
     handleBlur = (value: string) => {
-        this.props.onCommitValue(value);
-    }
+        if (value) {
+            this.props.onCommitValue(value);
+        }
+    };
 
-    handleChange = (value: string) => {
+    handleInputChange = (value: string) => {
         this.props.onCommitValue(value);
-    }
+    };
+
+    handleEmptyValueCheckboxChange = makeCheckboxHandler(EMPTY_VALUE_FILTER)(this.props.onCommitValue);
+    handleNotEmptyValueCheckboxChange = makeCheckboxHandler(NOT_EMPTY_VALUE_FILTER)(this.props.onCommitValue);
 
     render() {
         const { value } = this.props;
+
         return (
-            <Input
-                onChange={this.handleChange}
-                onBlur={this.handleBlur}
-                onEnterKey={this.handleEnterKey}
-                value={value}
-            />
+            <>
+                <EmptyValueFilterCheckboxes
+                    value={value}
+                    onEmptyChange={this.handleEmptyValueCheckboxChange}
+                    onNotEmptyChange={this.handleNotEmptyValueCheckboxChange}
+                />
+
+                <Input
+                    onChange={this.handleInputChange}
+                    onBlur={this.handleBlur}
+                    onEnterKey={this.handleEnterKey}
+                    value={!isEmptyValueFilter(value) ? value : ''}
+                />
+            </>
         );
     }
 }

src/core_modules/capture-core/components/FiltersForTypes/Text/TextFilterManager.component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextFilter } from './TextFilter.component';
 import type { TextFilterData } from './types';
+import { EMPTY_VALUE_FILTER, NOT_EMPTY_VALUE_FILTER } from '../EmptyValue';
 import type { Value } from './Text.types';
 
 type Props = {
@@ -16,9 +17,10 @@ type State = {
 
 export class TextFilterManager extends React.Component<Props, State> {
     static calculateDefaultState(filter: TextFilterData | null | undefined) {
-        return {
-            value: (filter && filter.value ? filter.value : undefined),
-        };
+        if (filter?.isEmpty === true) return { value: EMPTY_VALUE_FILTER };
+        if (filter?.isEmpty === false) return { value: NOT_EMPTY_VALUE_FILTER };
+
+        return { value: filter?.value || undefined };
     }
 
     constructor(props: Props) {

src/core_modules/capture-core/components/FiltersForTypes/Text/textFilterDataGetter.ts

@@ -1,7 +1,16 @@
+import {
+    isEmptyValueFilter,
+    EMPTY_VALUE_FILTER,
+    EMPTY_VALUE_FILTER_LABEL,
+    NOT_EMPTY_VALUE_FILTER_LABEL,
+} from '../EmptyValue';
 import type { TextFilterData } from './types';
 
-export function getTextFilterData(value: string): TextFilterData {
-    return {
-        value,
-    };
-}
+export const getTextFilterData = (value: string | null | undefined): TextFilterData | null | undefined => {
+    if (isEmptyValueFilter(value)) {
+        return value === EMPTY_VALUE_FILTER
+            ? { value: EMPTY_VALUE_FILTER_LABEL, isEmpty: true }
+            : { value: NOT_EMPTY_VALUE_FILTER_LABEL, isEmpty: false };
+    }
+    return value ? { value } : null;
+};

src/core_modules/capture-core/components/FiltersForTypes/Text/types/text.types.ts

@@ -1,3 +1,4 @@
 export type TextFilterData = {
     value: string;
+    isEmpty?: boolean,
 };

src/core_modules/capture-core/components/FiltersForTypes/index.ts

@@ -5,6 +5,7 @@ export { BooleanFilter } from './Boolean';
 export { DateFilter } from './Date';
 export { OptionSetFilter } from './OptionSet';
 export { AssigneeFilter, modeKeys as assigneeFilterModeKeys } from './Assignee';
+export { EmptyValueFilterCheckboxes } from './EmptyValue';
 
 export { assigneeFilterModes } from './Assignee/constants';
 export { dateFilterTypes } from './Date/constants';

src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.tsx

@@ -8,6 +8,7 @@ type Props = {
     placeholder?: string;
     dataTest?: string;
     onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (payload: { value?: string }, event: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 
 export class D2TextField extends Component<Props> {

src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/helpers/eventFilters/apiEventFilterToClientConfigConverter/convertToClientConfig.ts

@@ -5,7 +5,7 @@ import { getCustomColumnsConfiguration } from '../getCustomColumnsConfiguration'
 import { getOptionSetFilter } from './optionSet';
 import { apiAssigneeFilterModes, apiDateFilterTypes } from '../../../constants';
 import type { QuerySingleResource } from '../../../../../../utils/api/api.types';
-
+import { fromApiEmptyValueFilter } from '../../../../../FiltersForTypes/EmptyValue';
 import {
     filterTypesObject,
     type AssigneeFilterData,
@@ -174,6 +174,11 @@ const getDataElementFilters = (
             return null;
         }
 
+        const emptyValueFilter = fromApiEmptyValueFilter(serverFilter);
+        if (emptyValueFilter) {
+            return { id: serverFilter.dataItem, ...emptyValueFilter };
+        }
+
         if (isOptionSetFilter(element.type, serverFilter)) {
             return {
                 ...getOptionSetFilter(serverFilter as any, element.type),

src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/helpers/eventFilters/clientConfigToApiEventFilterQueryCriteriaConverter/convertToEventFilterEventQueryCriteria.ts

@@ -22,6 +22,7 @@ import type {
     ApiDataFilterAssignee,
     ApiEventQueryCriteria,
 } from '../../../types';
+import { toApiEmptyValueFilter } from '../../../../../FiltersForTypes/EmptyValue';
 
 type ColumnForConverterBase = {
     id: string,
@@ -117,6 +118,10 @@ const typeConvertFilters = (filters: any, columns: ColumnsForConverter) => Objec
             return null;
         }
 
+        if (typeof filter.isEmpty === 'boolean') {
+            return { ...toApiEmptyValueFilter(filter), dataItem: key };
+        }
+
         if (filter.usingOptionSet) {
             return {
                 ...getApiOptionSetFilter(filter, element.type),

src/core_modules/capture-core/components/WorkingLists/TrackerWorkingLists/helpers/TEIFilters/apiTEIFilterToClientConfigConverter/convertToClientFilters.ts

@@ -24,6 +24,7 @@ import { areRelativeRangeValuesSupported }
 import { DATE_TYPES, ASSIGNEE_MODES, MAIN_FILTERS } from '../../../constants';
 import { ADDITIONAL_FILTERS } from '../../eventFilters';
 import { type DataElement } from '../../../../../../metaData';
+import { fromApiEmptyValueFilter } from '../../../../../FiltersForTypes/EmptyValue';
 
 const getTextFilter = (
     filter: ApiDataFilterText & ApiDataFilterTextUnique,
@@ -164,6 +165,12 @@ const convertDataElementFilters = (
         if (!element || !getFilterByType[element.type]) {
             return acc;
         }
+
+        const emptyValueFilter = fromApiEmptyValueFilter(serverFilter);
+        if (emptyValueFilter) {
+            return { ...acc, [serverFilter.dataItem]: emptyValueFilter };
+        }
+
         const value = isOptionSetFilter(element.type, serverFilter)
             ? getOptionSetFilter(serverFilter, element.type)
             : getFilterByType[element.type](serverFilter);
@@ -181,6 +188,12 @@ const convertAttributeFilters = (
         if (!element || !getFilterByType[element.type]) {
             return acc;
         }
+
+        const emptyValueFilter = fromApiEmptyValueFilter(serverFilter);
+        if (emptyValueFilter) {
+            return { ...acc, [serverFilter.attribute]: emptyValueFilter };
+        }
+
         const value = isOptionSetFilter(element.type, serverFilter)
             ? getOptionSetFilter(serverFilter, element.type)
             : getFilterByType[element.type](serverFilter, element);