From 7fa26e7dae4fea79f41e6786dfcde14a9e5ccfb7 Mon Sep 17 00:00:00 2001 From: Elena Grednikova Date: Fri, 20 Dec 2024 20:23:13 +0100 Subject: [PATCH] Update table filters --- .../ChoiceColumn/SelectChoiceColumn/index.tsx | 3 +- .../ChoiceColumn/ValueSetColumn/index.tsx | 3 +- .../SearchBarColumn/DateColumn/index.tsx | 3 +- .../SearchBarColumn/ReferenceColumn/index.tsx | 3 +- .../SearchBar/SearchBarColumn/index.tsx | 8 +-- .../SearchBar/SearchBarColumn/types.ts | 4 ++ src/components/Table/TableFilter/index.tsx | 46 +++++++++++----- src/components/Table/TableFilter/styles.ts | 53 ++++++++++++++----- src/components/Table/index.tsx | 1 + src/components/Table/table.scss | 7 +++ src/containers/App/index.tsx | 4 +- .../PatientResourceListExample/index.tsx | 40 ++++++++++++-- 12 files changed, 137 insertions(+), 38 deletions(-) create mode 100644 src/components/Table/table.scss diff --git a/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx index 6fb9b945..f9bb8faf 100644 --- a/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx +++ b/src/components/SearchBar/SearchBarColumn/ChoiceColumn/SelectChoiceColumn/index.tsx @@ -7,7 +7,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); @@ -23,6 +23,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 index dfe87d67..1da18900 100644 --- a/src/components/SearchBar/SearchBarColumn/ChoiceColumn/ValueSetColumn/index.tsx +++ b/src/components/SearchBar/SearchBarColumn/ChoiceColumn/ValueSetColumn/index.tsx @@ -6,7 +6,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); @@ -22,6 +22,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 index d41283cd..ebc7dbe3 100644 --- a/src/components/SearchBar/SearchBarColumn/DateColumn/index.tsx +++ b/src/components/SearchBar/SearchBarColumn/DateColumn/index.tsx @@ -8,7 +8,7 @@ import { SearchBarColumnDateTypeProps } from '../types'; const { RangePicker } = DatePicker; export function DateColumn(props: SearchBarColumnDateTypeProps) { - const { columnFilterValue } = props; + const { columnFilterValue, defaultOpen } = props; const { onColumnChange } = useDateColumn(props); @@ -18,6 +18,7 @@ export function DateColumn(props: SearchBarColumnDateTypeProps) { placeholder={columnFilterValue.column.placeholder} value={columnFilterValue.value} onChange={onColumnChange} + defaultOpen={defaultOpen} /> ); diff --git a/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx b/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx index 84b05fc6..6906905a 100644 --- a/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx +++ b/src/components/SearchBar/SearchBarColumn/ReferenceColumn/index.tsx @@ -7,7 +7,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); @@ -22,6 +22,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 index a0387f64..3d69df17 100644 --- a/src/components/SearchBar/SearchBarColumn/index.tsx +++ b/src/components/SearchBar/SearchBarColumn/index.tsx @@ -11,7 +11,7 @@ import { } from '../types'; export function SearchBarColumn(props: SearchBarColumnProps) { - const { columnFilterValue } = props; + const { columnFilterValue, defaultOpen } = props; if (isStringColumnFilterValue(columnFilterValue)) { const stringProps = { @@ -26,7 +26,7 @@ export function SearchBarColumn(props: SearchBarColumnProps) { ...props, columnFilterValue, }; - return ; + return ; } if (isReferenceColumnFilterValue(columnFilterValue)) { @@ -34,7 +34,7 @@ export function SearchBarColumn(props: SearchBarColumnProps) { ...props, columnFilterValue, }; - return ; + return ; } if (isChoiceColumnFilterValue(columnFilterValue)) { @@ -42,7 +42,7 @@ export function SearchBarColumn(props: SearchBarColumnProps) { ...props, columnFilterValue, }; - return ; + return ; } return null; diff --git a/src/components/SearchBar/SearchBarColumn/types.ts b/src/components/SearchBar/SearchBarColumn/types.ts index 23791a9f..48d9ec8d 100644 --- a/src/components/SearchBar/SearchBarColumn/types.ts +++ b/src/components/SearchBar/SearchBarColumn/types.ts @@ -9,6 +9,7 @@ import { export type SearchBarColumnProps = { columnFilterValue: ColumnFilterValue; onChange: (value: ColumnFilterValue['value'], key: string) => void; + defaultOpen?: boolean; }; export interface SearchBarColumnStringTypeProps { @@ -19,14 +20,17 @@ export interface SearchBarColumnStringTypeProps { export interface SearchBarColumnDateTypeProps { columnFilterValue: DateTypeColumnFilterValue; onChange: (value: DateTypeColumnFilterValue['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; } diff --git a/src/components/Table/TableFilter/index.tsx b/src/components/Table/TableFilter/index.tsx index 3423ac7f..43f83882 100644 --- 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, 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 ( + // + // + // + // + // + // ); + // } return ( - - { - onChange(value, key); - close(); - }} - /> - + + + + + ); } diff --git a/src/components/Table/TableFilter/styles.ts b/src/components/Table/TableFilter/styles.ts index 769af208..f6a8f9f4 100644 --- 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 index cf7c7658..e3ca20d3 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -2,6 +2,7 @@ import { Table as ANTDTable } from 'antd'; import { TableProps } from 'antd/lib/table'; import s from './Table.module.scss'; +import './table.scss'; export function Table(props: TableProps) { return ( diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss new file mode 100644 index 00000000..fe8ee153 --- /dev/null +++ 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/App/index.tsx b/src/containers/App/index.tsx index cbfb7798..4e758625 100644 --- a/src/containers/App/index.tsx +++ b/src/containers/App/index.tsx @@ -36,6 +36,7 @@ import { OrganizationScheduling } from '../OrganizationScheduling'; import { DocumentPrint } from '../PatientDetails/DocumentPrint'; import { Prescriptions } from '../Prescriptions'; import { SetPassword } from '../SetPassword'; +import { PatientResourceListExample } from '../PatientResourceListExample'; interface AppProps { authenticatedRoutes?: ReactElement; @@ -156,7 +157,8 @@ function AuthenticatedUserApp({ defaultRoute, extra }: RouteProps) { } /> } /> } /> - } /> + } /> + } /> } /> } /> documents/:id/edit} /> diff --git a/src/containers/PatientResourceListExample/index.tsx b/src/containers/PatientResourceListExample/index.tsx index 307702e8..a663b5f7 100644 --- a/src/containers/PatientResourceListExample/index.tsx +++ b/src/containers/PatientResourceListExample/index.tsx @@ -42,14 +42,21 @@ export function PatientResourceListExample() { dataIndex: 'name', key: 'name', render: (_text, { resource }) => renderHumanName(resource.name?.[0]), - width: 250, + width: 300, }, { title: Birth date, dataIndex: 'birthDate', key: 'birthDate', render: (_text, { resource }) => (resource.birthDate ? formatHumanDate(resource.birthDate) : null), - width: '25%', + width: 150, + }, + { + title: Gender, + dataIndex: 'gender', + key: 'gender', + render: (_text, { resource }) => resource.gender, + width: 150, }, { title: SSN, @@ -57,7 +64,7 @@ export function PatientResourceListExample() { 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,32 @@ export function PatientResourceListExample() { searchParam: 'name', type: SearchBarColumnType.STRING, placeholder: t`Find patient`, - placement: ['search-bar'], + placement: ['search-bar', '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) => [