Merge branch '354-generic-resource-list' of github.com:beda-software/…

…fhir-emr into update-app-layout
beda-software · Dec 20, 2024 · c2e4c3b · c2e4c3b
2 parents c79126d + 7fa26e7
commit c2e4c3b
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 39 deletions.
diff --git a/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx
@@ -5,7 +5,7 @@ import { SearchBarColumnChoiceTypeProps } from '../../types';
 import { useChoiceColumn } from '../hooks';
 
 export function SelectChoiceColumn(props: SearchBarColumnChoiceTypeProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
     const { options, placeholder, repeats } = columnFilterValue.column;
 
     const { onSelect, getOptionLabel, isOptionSelected } = useChoiceColumn(props);
@@ -20,6 +20,7 @@ export function SelectChoiceColumn(props: SearchBarColumnChoiceTypeProps) {
             getOptionLabel={getOptionLabel}
             classNamePrefix="react-select"
             placeholder={placeholder}
+            defaultMenuIsOpen={defaultOpen}
         />
     );
 }
diff --git a/src/components/SearchBar/SearchBarColumn/ChoiceColumn/ValueSetColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/ChoiceColumn/ValueSetColumn/index.tsx
@@ -4,7 +4,7 @@ import { SearchBarColumnChoiceTypeProps } from '../../types';
 import { useChoiceColumn } from '../hooks';
 
 export function ValueSetColumn(props: SearchBarColumnChoiceTypeProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
     const { placeholder, repeats } = columnFilterValue.column;
 
     const { onSelect, isOptionSelected, getOptionLabel, debouncedLoadOptions } = useChoiceColumn(props);
@@ -19,6 +19,7 @@ export function ValueSetColumn(props: SearchBarColumnChoiceTypeProps) {
             isOptionSelected={isOptionSelected}
             getOptionLabel={getOptionLabel}
             placeholder={placeholder}
+            defaultMenuIsOpen={defaultOpen}
         />
     );
 }
diff --git a/src/components/SearchBar/SearchBarColumn/DateColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/DateColumn/index.tsx
@@ -6,7 +6,7 @@ import { SearchBarColumnDateTypeProps } from '../types';
 const { RangePicker } = DatePicker;
 
 export function DateColumn(props: SearchBarColumnDateTypeProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
 
     const { onColumnChange } = useDateColumn(props);
 
@@ -15,6 +15,7 @@ export function DateColumn(props: SearchBarColumnDateTypeProps) {
             placeholder={columnFilterValue.column.placeholder}
             value={columnFilterValue.value}
             onChange={onColumnChange}
+            defaultOpen={defaultOpen}
         />
     );
 }
diff --git a/src/components/SearchBar/SearchBarColumn/DateSingleColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/DateSingleColumn/index.tsx
@@ -4,7 +4,7 @@ import { useDateColumn } from './hooks';
 import { SearchBarColumnSingleDateTypeProps } from '../types';
 
 export function DateSingleColumn(props: SearchBarColumnSingleDateTypeProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
     const { placeholder } = columnFilterValue.column;
     const { onColumnChange } = useDateColumn(props);
 
@@ -15,6 +15,7 @@ export function DateSingleColumn(props: SearchBarColumnSingleDateTypeProps) {
             value={columnFilterValue.value}
             placeholder={placeholder}
             clearIcon={false}
+            defaultOpen={defaultOpen}
         />
     );
 }
diff --git a/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx
@@ -5,7 +5,7 @@ import { useReferenceColumn } from './hooks';
 import { SearchBarColumnReferenceTypeProps } from '../types';
 
 export function ReferenceColumn(props: SearchBarColumnReferenceTypeProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
 
     const { debouncedLoadOptions, onOptionChange } = useReferenceColumn(props);
 
@@ -19,6 +19,7 @@ export function ReferenceColumn(props: SearchBarColumnReferenceTypeProps) {
             getOptionValue={(option) => getAnswerCode(option.value)}
             isMulti={false}
             placeholder={columnFilterValue.column.placeholder}
+            defaultMenuIsOpen={defaultOpen}
         />
     );
 }
diff --git a/src/components/SearchBar/SearchBarColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/index.tsx
@@ -15,7 +15,7 @@ import {
 } from '../types';
 
 export function SearchBarColumn(props: SearchBarColumnProps) {
-    const { columnFilterValue } = props;
+    const { columnFilterValue, defaultOpen } = props;
 
     if (isStringColumnFilterValue(columnFilterValue)) {
         const stringProps = {
@@ -30,31 +30,31 @@ export function SearchBarColumn(props: SearchBarColumnProps) {
             ...props,
             columnFilterValue,
         };
-        return <DateColumn {...dateProps} />;
+        return <DateColumn {...dateProps} defaultOpen={defaultOpen} />;
     }
 
     if (isSingleDateColumnFilterValue(columnFilterValue)) {
         const dateProps = {
             ...props,
             columnFilterValue,
         };
-        return <DateSingleColumn {...dateProps} />;
+        return <DateSingleColumn {...dateProps} defaultOpen={defaultOpen} />;
     }
 
     if (isReferenceColumnFilterValue(columnFilterValue)) {
         const referenceProps = {
             ...props,
             columnFilterValue,
         };
-        return <ReferenceColumn {...referenceProps} />;
+        return <ReferenceColumn {...referenceProps} defaultOpen={defaultOpen} />;
     }
 
     if (isChoiceColumnFilterValue(columnFilterValue)) {
         const choiceProps = {
             ...props,
             columnFilterValue,
         };
-        return <ChoiceColumn {...choiceProps} />;
+        return <ChoiceColumn {...choiceProps} defaultOpen={defaultOpen} />;
     }
 
     if (isSolidChoiceColumnFilterValue(columnFilterValue)) {

diff --git a/src/components/SearchBar/SearchBarColumn/types.ts b/src/components/SearchBar/SearchBarColumn/types.ts
@@ -11,6 +11,7 @@ import {
 export type SearchBarColumnProps = {
     columnFilterValue: ColumnFilterValue;
     onChange: (value: ColumnFilterValue['value'], key: string) => void;
+    defaultOpen?: boolean;
 };
 
 export interface SearchBarColumnStringTypeProps {
@@ -21,21 +22,25 @@ export interface SearchBarColumnStringTypeProps {
 export interface SearchBarColumnDateTypeProps {
     columnFilterValue: DateTypeColumnFilterValue;
     onChange: (value: DateTypeColumnFilterValue['value'], key: string) => void;
+    defaultOpen?: boolean;
 }
 
 export interface SearchBarColumnSingleDateTypeProps {
     columnFilterValue: SingleDateTypeColumnFilterValue;
     onChange: (value: SingleDateTypeColumnFilterValue['value'], key: string) => void;
+    defaultOpen?: boolean;
 }
 
 export interface SearchBarColumnReferenceTypeProps {
     columnFilterValue: ReferenceTypeColumnFilterValue;
     onChange: (value: ReferenceTypeColumnFilterValue['value'], key: string) => void;
+    defaultOpen?: boolean;
 }
 
 export interface SearchBarColumnChoiceTypeProps {
     columnFilterValue: ChoiceTypeColumnFilterValue;
     onChange: (value: ChoiceTypeColumnFilterValue['value'], key: string) => void;
+    defaultOpen?: boolean;
 }
 
 export interface SearchBarColumnSolidChoiceTypeProps {

diff --git a/src/components/Table/TableFilter/index.tsx b/src/components/Table/TableFilter/index.tsx
@@ -1,25 +1,45 @@
-import { ColumnFilterValue } from 'src/components/SearchBar/types';
+import { ColumnFilterValue, isSingleDateColumn, isStringColumn } from 'src/components/SearchBar/types';
 import { SearchBarColumn } from 'src/components/SearchBar/SearchBarColumn';
 import { S } from './styles';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
+import _ from 'lodash';
 
-interface Props extends FilterDropdownProps {
+interface Props {
     filter: ColumnFilterValue;
     onChange: (value: ColumnFilterValue['value'], key: string) => void;
 }
 
-export function TableFilter(props: Props) {
-    const { filter, onChange, close } = props;
+interface TableFilterProps extends FilterDropdownProps, Props {}
+
+export function TableFilter(props: TableFilterProps) {
+    const { filter, onChange: onInitialChange, close, visible } = props;
+
+    const onChange = (value: ColumnFilterValue['value'], key: string) => {
+        if (isStringColumn(filter.column)) {
+            onInitialChange(value, key);
+
+            return;
+        }
+
+        onInitialChange(value, key);
+        close();
+    };
+
+    if (isSingleDateColumn(filter.column)) {
+        return (
+            <S.Container>
+                <S.DatePickerFilter>
+                    <SearchBarColumn columnFilterValue={filter} onChange={onChange} defaultOpen={visible} />
+                </S.DatePickerFilter>
+            </S.Container>
+        );
+    }
 
     return (
-        <S.Filter>
-            <SearchBarColumn
-                columnFilterValue={filter}
-                onChange={(value, key) => {
-                    onChange(value, key);
-                    close();
-                }}
-            />
-        </S.Filter>
+        <S.Container>
+            <S.Filter>
+                <SearchBarColumn columnFilterValue={filter} onChange={onChange} defaultOpen={visible} />
+            </S.Filter>
+        </S.Container>
     );
 }
diff --git a/src/components/Table/TableFilter/styles.ts b/src/components/Table/TableFilter/styles.ts
@@ -1,17 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const S = {
-    Filter: styled.div`
-        display: flex;
-        flex-direction: column;
-        padding: 8px;
-        border-radius: 8px;
-        box-shadow:
-            0px 6px 16px 0px ${({ theme }) => theme.neutral.dividers},
-            0px 3px 6px -4px ${({ theme }) => theme.neutral.border},
-            0px 9px 28px 8px ${({ theme }) => theme.neutral.background};
-        min-width: 240px;
+const shadows = css`
+    ${({ theme }) =>
+        theme.mode === 'light' &&
+        css`
+            box-shadow:
+                0px 6px 16px 0px ${({ theme }) => theme.neutral.dividers},
+                0px 3px 6px -4px ${({ theme }) => theme.neutral.border},
+                0px 9px 28px 8px ${({ theme }) => theme.neutral.background};
+        `}
+
+    ${({ theme }) =>
+        theme.mode === 'dark' &&
+        css`
+            box-shadow:
+                0 6px 16px 0 rgba(0, 0, 0, 0.08),
+                0 3px 6px -4px rgba(0, 0, 0, 0.12),
+                0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        `}
+`;
 
+export const S = {
+    Container: styled.div`
         .ant-input-search,
         .ant-picker,
         .react-select__control {
@@ -35,4 +45,23 @@ export const S = {
             padding: 0;
         }
     `,
+    DatePickerFilter: styled.div`
+        width: 288px;
+
+        .ant-picker {
+            ${shadows}
+        }
+    `,
+    Filter: styled.div`
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        border-radius: 8px;
+        min-width: 240px;
+        background-color: ${({ theme }) => theme.neutralPalette.gray_1};
+        border-radius: 6px;
+        overflow: hidden;
+
+        ${shadows}
+    `,
 };
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -3,6 +3,7 @@ import { TableProps as ANTDTableProps } from 'antd/lib/table';
 
 import { S } from './styles';
 import { TableCards } from './TableCards';
+import './table.scss';
 
 interface TableProps<T> extends ANTDTableProps<T> {
     showCardsOnMobile?: boolean;

diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss
@@ -0,0 +1,7 @@
+.ant-dropdown .ant-table-filter-dropdown {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    position: relative;
+    overflow: visible;
+}
diff --git a/src/containers/PatientResourceListExample/index.tsx b/src/containers/PatientResourceListExample/index.tsx
@@ -42,22 +42,29 @@ export function PatientResourceListExample() {
                     dataIndex: 'name',
                     key: 'name',
                     render: (_text, { resource }) => renderHumanName(resource.name?.[0]),
-                    width: 250,
+                    width: 300,
                 },
                 {
                     title: <Trans>Birth date</Trans>,
                     dataIndex: 'birthDate',
                     key: 'birthDate',
                     render: (_text, { resource }) => (resource.birthDate ? formatHumanDate(resource.birthDate) : null),
-                    width: '25%',
+                    width: 150,
+                },
+                {
+                    title: <Trans>Gender</Trans>,
+                    dataIndex: 'gender',
+                    key: 'gender',
+                    render: (_text, { resource }) => resource.gender,
+                    width: 150,
                 },
                 {
                     title: <Trans>SSN</Trans>,
                     dataIndex: 'identifier',
                     key: 'identifier',
                     render: (_text, { resource }) =>
                         resource.identifier?.find(({ system }) => system === 'http://hl7.org/fhir/sid/us-ssn')?.value,
-                    width: '25%',
+                    width: 250,
                 },
             ]}
             getFilters={() => [
@@ -66,7 +73,39 @@ export function PatientResourceListExample() {
                     searchParam: 'name',
                     type: SearchBarColumnType.STRING,
                     placeholder: t`Find patient`,
-                    placement: ['search-bar'],
+                    placement: ['search-bar', 'table'],
+                },
+                {
+                    id: 'birthDate',
+                    searchParam: 'birthdate',
+                    type: SearchBarColumnType.SINGLEDATE,
+                    placeholder: t`Birth date`,
+                    placement: ['table'],
+                },
+                {
+                    id: 'gender',
+                    searchParam: 'gender',
+                    type: SearchBarColumnType.CHOICE,
+                    placeholder: t`Choose gender`,
+                    options: [
+                        {
+                            value: {
+                                Coding: {
+                                    code: 'male',
+                                    display: 'Male',
+                                },
+                            },
+                        },
+                        {
+                            value: {
+                                Coding: {
+                                    code: 'female',
+                                    display: 'Female',
+                                },
+                            },
+                        },
+                    ],
+                    placement: ['table'],
                 },
             ]}
             getRecordActions={(record) => [