Add Single Date Search bar control

src/components/SearchBar/SearchBarColumn/DateSingleColumn/hooks.ts

@@ -0,0 +1,19 @@
+import moment from 'moment';
+import { useCallback } from 'react';
+
+import { SearchBarColumnSingleDateTypeProps } from '../types';
+
+export function useDateColumn(props: SearchBarColumnSingleDateTypeProps) {
+    const { onChange, columnFilterValue } = props;
+
+    const onColumnChange = useCallback(
+        (value: moment.Moment | null) => {
+            if (value) {
+                onChange(value, columnFilterValue.column.id);
+            }
+        },
+        [onChange, columnFilterValue],
+    );
+
+    return { onColumnChange };
+}

src/components/SearchBar/SearchBarColumn/DateSingleColumn/index.tsx

@@ -0,0 +1,20 @@
+import { DatePicker } from 'src/components/DatePicker';
+
+import { useDateColumn } from './hooks';
+import { SearchBarColumnSingleDateTypeProps } from '../types';
+
+export function DateSingleColumn(props: SearchBarColumnSingleDateTypeProps) {
+    const { columnFilterValue } = props;
+    const { placeholder } = columnFilterValue.column;
+    const { onColumnChange } = useDateColumn(props);
+
+    return (
+        <DatePicker
+            showTime={false}
+            onChange={onColumnChange}
+            value={columnFilterValue.value}
+            placeholder={placeholder}
+            clearIcon={false}
+        />
+    );
+}

src/components/SearchBar/SearchBarColumn/DateSingleColumn/types.ts

@@ -0,0 +1,4 @@
+import { RangePickerProps } from 'antd/lib/date-picker/generatePicker';
+import moment from 'moment';
+
+export type RangePickerOnChange = Exclude<RangePickerProps<moment.Moment>['onChange'], undefined>;

src/components/SearchBar/SearchBarColumn/index.tsx

@@ -1,5 +1,6 @@
 import { ChoiceColumn } from './ChoiceColumn';
 import { DateColumn } from './DateColumn';
+import { DateSingleColumn } from './DateSingleColumn';
 import { ReferenceColumn } from './ReferenceColumn';
 import { SolidChoiceColumn } from './SolidChoiceColumn';
 import { StringColumn } from './StringColumn';
@@ -10,6 +11,7 @@ import {
     isReferenceColumnFilterValue,
     isChoiceColumnFilterValue,
     isSolidChoiceColumnFilterValue,
+    isSingleDateColumnFilterValue,
 } from '../types';
 
 export function SearchBarColumn(props: SearchBarColumnProps) {
@@ -31,6 +33,14 @@ export function SearchBarColumn(props: SearchBarColumnProps) {
         return <DateColumn {...dateProps} />;
     }
 
+    if (isSingleDateColumnFilterValue(columnFilterValue)) {
+        const dateProps = {
+            ...props,
+            columnFilterValue,
+        };
+        return <DateSingleColumn {...dateProps} />;
+    }
+
     if (isReferenceColumnFilterValue(columnFilterValue)) {
         const referenceProps = {
             ...props,

src/components/SearchBar/SearchBarColumn/types.ts

@@ -5,6 +5,7 @@ import {
     DateTypeColumnFilterValue,
     ReferenceTypeColumnFilterValue,
     StringTypeColumnFilterValue,
+    SingleDateTypeColumnFilterValue,
 } from '../types';
 
 export type SearchBarColumnProps = {
@@ -22,6 +23,11 @@ export interface SearchBarColumnDateTypeProps {
     onChange: (value: DateTypeColumnFilterValue['value'], key: string) => void;
 }
 
+export interface SearchBarColumnSingleDateTypeProps {
+    columnFilterValue: SingleDateTypeColumnFilterValue;
+    onChange: (value: SingleDateTypeColumnFilterValue['value'], key: string) => void;
+}
+
 export interface SearchBarColumnReferenceTypeProps {
     columnFilterValue: ReferenceTypeColumnFilterValue;
     onChange: (value: ReferenceTypeColumnFilterValue['value'], key: string) => void;

src/components/SearchBar/hooks.ts

@@ -14,13 +14,16 @@ import {
     isChoiceColumnFilterValue,
     isSolidChoiceColumn,
     isSolidChoiceColumnFilterValue,
+    isSingleDateColumn,
+    isSingleDateColumnFilterValue,
 } from './types';
 import {
     validateStringColumnFilterValue,
     validateDateColumnFilterValue,
     validateReferenceColumnFilterValue,
     validateChoiceColumnFilterValue,
     validateSolidChoiceColumnFilterValue,
+    validateSingleDateColumnFilterValue,
 } from './validate';
 
 export function useSearchBar(props: SearchBarProps): SearchBarData {
@@ -36,6 +39,10 @@ export function useSearchBar(props: SearchBarProps): SearchBarData {
                 return { column, value: undefined };
             }
 
+            if (isSingleDateColumn(column)) {
+                return { column, value: column.defaultValue ?? undefined };
+            }
+
             if (isReferenceColumn(column)) {
                 return { column, value: null };
             }
@@ -78,6 +85,13 @@ export function useSearchBar(props: SearchBarProps): SearchBarData {
                         }
                     }
 
+                    if (isSingleDateColumnFilterValue(newFilterValue)) {
+                        if (validateSingleDateColumnFilterValue(value)) {
+                            newFilterValue.value = value;
+                            return newFilterValue;
+                        }
+                    }
+
                     if (isReferenceColumnFilterValue(newFilterValue)) {
                         if (validateReferenceColumnFilterValue(value)) {
                             newFilterValue.value = value;

src/components/SearchBar/types.ts

@@ -8,6 +8,7 @@ import { LoadResourceOption } from 'src/services/questionnaire';
 export enum SearchBarColumnType {
     STRING = 'string',
     DATE = 'date',
+    SINGLEDATE = 'singleDate',
     REFERENCE = 'reference',
     CHOICE = 'choice',
     SOLIDCHOICE = 'solidChoice',
@@ -26,6 +27,12 @@ export type SearchBarDateColumn = {
     type: SearchBarColumnType.DATE;
     placeholder: [string, string];
 };
+export type SearchBarSingleDateColumn = {
+    id: string;
+    type: SearchBarColumnType.SINGLEDATE;
+    placeholder: string;
+    defaultValue?: moment.Moment;
+};
 export type SearchBarReferenceColumn = {
     id: string;
     type: SearchBarColumnType.REFERENCE;
@@ -63,6 +70,7 @@ export type SearchBarSolidChoiceColumn = {
 export type SearchBarColumn =
     | SearchBarStringColumn
     | SearchBarDateColumn
+    | SearchBarSingleDateColumn
     | SearchBarReferenceColumn
     | SearchBarChoiceColumn
     | SearchBarSolidChoiceColumn;
@@ -72,6 +80,9 @@ export function isStringColumn(column: SearchBarColumn): column is SearchBarStri
 export function isDateColumn(column: SearchBarColumn): column is SearchBarDateColumn {
     return column.type === SearchBarColumnType.DATE;
 }
+export function isSingleDateColumn(column: SearchBarColumn): column is SearchBarSingleDateColumn {
+    return column.type === SearchBarColumnType.SINGLEDATE;
+}
 export function isReferenceColumn(column: SearchBarColumn): column is SearchBarReferenceColumn {
     return column.type === SearchBarColumnType.REFERENCE;
 }
@@ -83,6 +94,7 @@ export function isSolidChoiceColumn(column: SearchBarColumn): column is SearchBa
 }
 
 export type DateColumnFilterValue = [moment.Moment, moment.Moment];
+export type SingleDateColumnFilterValue = moment.Moment;
 
 export interface StringTypeColumnFilterValue {
     column: SearchBarStringColumn;
@@ -92,6 +104,11 @@ export interface DateTypeColumnFilterValue {
     column: SearchBarDateColumn;
     value?: DateColumnFilterValue;
 }
+
+export interface SingleDateTypeColumnFilterValue {
+    column: SearchBarSingleDateColumn;
+    value?: SingleDateColumnFilterValue;
+}
 export interface ReferenceTypeColumnFilterValue {
     column: SearchBarReferenceColumn;
     value?: LoadResourceOption<Resource> | null;
@@ -109,6 +126,7 @@ export interface SolidChoiceTypeColumnFilterValue {
 export type ColumnFilterValue =
     | StringTypeColumnFilterValue
     | DateTypeColumnFilterValue
+    | SingleDateTypeColumnFilterValue
     | ReferenceTypeColumnFilterValue
     | ChoiceTypeColumnFilterValue
     | SolidChoiceTypeColumnFilterValue;
@@ -118,6 +136,11 @@ export function isStringColumnFilterValue(filterValue: ColumnFilterValue): filte
 export function isDateColumnFilterValue(filterValue: ColumnFilterValue): filterValue is DateTypeColumnFilterValue {
     return isDateColumn(filterValue.column);
 }
+export function isSingleDateColumnFilterValue(
+    filterValue: ColumnFilterValue,
+): filterValue is SingleDateTypeColumnFilterValue {
+    return isSingleDateColumn(filterValue.column);
+}
 export function isReferenceColumnFilterValue(
     filterValue: ColumnFilterValue,
 ): filterValue is ReferenceTypeColumnFilterValue {

src/components/SearchBar/utils.ts

@@ -1,10 +1,11 @@
-import { formatFHIRDateTime } from '@beda.software/fhir-react';
+import { formatFHIRDate, formatFHIRDateTime } from '@beda.software/fhir-react';
 
 import {
     ColumnFilterValue,
     isChoiceColumnFilterValue,
     isDateColumnFilterValue,
     isReferenceColumnFilterValue,
+    isSingleDateColumnFilterValue,
     isSolidChoiceColumnFilterValue,
     isStringColumnFilterValue,
     SearchBarColumn,
@@ -34,6 +35,10 @@ export function getSearchBarColumnFilterValue(filterValue: ColumnFilterValue) {
             : undefined;
     }
 
+    if (isSingleDateColumnFilterValue(filterValue)) {
+        return filterValue.value ? formatFHIRDate(filterValue.value) : undefined;
+    }
+
     if (isReferenceColumnFilterValue(filterValue)) {
         return filterValue.value?.value.Reference.id;
     }

src/components/SearchBar/validate.ts

@@ -6,6 +6,7 @@ import {
     ColumnFilterValue,
     DateTypeColumnFilterValue,
     ReferenceTypeColumnFilterValue,
+    SingleDateTypeColumnFilterValue,
     SolidChoiceTypeColumnFilterValue,
     StringTypeColumnFilterValue,
 } from './types';
@@ -33,6 +34,16 @@ export function validateDateColumnFilterValue(
     throw new Error('Invalid date column filter value');
 }
 
+export function validateSingleDateColumnFilterValue(
+    value?: ColumnFilterValue['value'],
+): value is SingleDateTypeColumnFilterValue['value'] {
+    if (_.isUndefined(value) || moment.isMoment(value)) {
+        return true;
+    }
+
+    throw new Error('Invalid single date column filter value');
+}
+
 export function validateReferenceColumnFilterValue(
     value?: ColumnFilterValue['value'],
 ): value is ReferenceTypeColumnFilterValue['value'] {
@@ -76,5 +87,5 @@ export function validateSolidChoiceColumnFilterValue(
         return true;
     }
 
-    throw new Error('Invalid choice column filter value');
+    throw new Error('Invalid solid choice column filter value');
 }