diff --git a/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css b/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css index 826cc949..be7bb954 100644 --- a/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css +++ b/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css @@ -1,7 +1,7 @@ .popup { display: flex; max-width: 300px; - max-height: 400px; + max-height: 210px; overflow-x: hidden; } @@ -19,6 +19,6 @@ min-width: 180px; } -.menu { - min-width: 200px; +.text { + min-width: 180px; } diff --git a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx index 932f302b..e38f3d65 100644 --- a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx +++ b/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx @@ -1,6 +1,19 @@ import { useState, useMemo } from 'react'; -import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics'; +import { + Form, + FormRow, + Item, + Flexbox, + Dropdown, + Button, + TextField, + Menu, + Popup, + PopupTrigger, +} from 'react-basics'; import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks'; +import { safeDecodeURIComponent } from 'next-basics'; +import { OPERATORS } from 'lib/constants'; import styles from './FieldFilterForm.module.css'; export interface FieldFilterFormProps { @@ -22,12 +35,11 @@ export default function FieldFilterForm({ }: FieldFilterFormProps) { const { formatMessage, labels } = useMessages(); const [filter, setFilter] = useState('eq'); - const [value, setValue] = useState(); + const [value, setValue] = useState(''); const { getFilters } = useFilters(); const { formatValue } = useFormat(); const { locale } = useLocale(); const filters = getFilters(type); - const [search, setSearch] = useState(''); const formattedValues = useMemo(() => { const formatted = {}; @@ -45,21 +57,25 @@ export default function FieldFilterForm({ }, [formatValue, locale, name, values]); const filteredValues = useMemo(() => { - return search ? values.filter(n => n.includes(search)) : values; - }, [search, formattedValues]); + return value ? values.filter(n => n.includes(value)) : values; + }, [value, formattedValues]); const renderFilterValue = value => { return filters.find(f => f.value === value)?.label; }; - const renderValue = value => { - return formattedValues[value]; - }; - const handleAdd = () => { onSelect({ name, type, filter, value }); }; + const handleMenuSelect = value => { + setValue(value); + }; + + const showMenu = + [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) && + !(filteredValues.length === 1 && filteredValues[0] === value); + return (