diff --git a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
index 32a0b0af..9217ce4d 100644
--- a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx
@@ -3,8 +3,6 @@ import { createPortal } from 'react-dom';
import { REPORT_PARAMETERS } from 'lib/constants';
import PopupForm from './PopupForm';
import FieldSelectForm from './FieldSelectForm';
-import FieldAggregateForm from './FieldAggregateForm';
-import FieldFilterEditForm from './FieldFilterEditForm';
export function FieldAddForm({
fields = [],
@@ -17,7 +15,11 @@ export function FieldAddForm({
onAdd: (group: string, value: string) => void;
onClose: () => void;
}) {
- const [selected, setSelected] = useState<{ name: string; type: string; value: string }>();
+ const [selected, setSelected] = useState<{
+ name: string;
+ type: string;
+ value: string;
+ }>();
const handleSelect = (value: any) => {
const { type } = value;
@@ -39,12 +41,6 @@ export function FieldAddForm({
return createPortal(
{!selected && }
- {selected && group === REPORT_PARAMETERS.fields && (
-
- )}
- {selected && group === REPORT_PARAMETERS.filters && (
-
- )}
,
document.body,
);
diff --git a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css
index ed78512d..43a34438 100644
--- a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css
+++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css
@@ -1,12 +1,7 @@
-.popup {
- display: flex;
+.menu {
+ position: absolute;
max-width: 300px;
max-height: 210px;
- overflow: hidden;
-}
-
-.popup > div {
- overflow-y: auto;
}
.filter {
@@ -16,9 +11,26 @@
}
.dropdown {
- min-width: 180px;
+ min-width: 200px;
}
.text {
- min-width: 180px;
+ min-width: 200px;
+}
+
+.selected {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 16px;
+ white-space: nowrap;
+ min-width: 200px;
+ font-weight: 900;
+ background: var(--base100);
+ border-radius: var(--border-radius);
+ cursor: pointer;
+}
+
+.search {
+ position: relative;
}
diff --git a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
index f3b5b247..96faeb9c 100644
--- a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
@@ -6,14 +6,15 @@ import {
Flexbox,
Dropdown,
Button,
+ SearchField,
TextField,
+ Text,
+ Icon,
+ Icons,
Menu,
- Popup,
- PopupTrigger,
Loading,
} from 'react-basics';
import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
-import { safeDecodeURIComponent } from 'next-basics';
import { OPERATORS } from 'lib/constants';
import styles from './FieldFilterEditForm.module.css';
@@ -22,8 +23,11 @@ export interface FieldFilterFormProps {
name: string;
label?: string;
type: string;
+ startDate: Date;
+ endDate: Date;
+ operator?: string;
defaultValue?: string;
- onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
+ onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
allowFilterSelect?: boolean;
isNew?: boolean;
}
@@ -33,19 +37,37 @@ export default function FieldFilterEditForm({
name,
label,
type,
- defaultValue,
+ startDate,
+ endDate,
+ operator: defaultOperator = 'eq',
+ defaultValue = '',
onChange,
allowFilterSelect = true,
isNew,
}: FieldFilterFormProps) {
const { formatMessage, labels } = useMessages();
- const [filter, setFilter] = useState('eq');
- const [value, setValue] = useState(defaultValue ?? '');
+ const [operator, setOperator] = useState(defaultOperator);
+ const [value, setValue] = useState(defaultValue);
+ const [showMenu, setShowMenu] = useState(false);
+ const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
+ const [search, setSearch] = useState('');
+ const [selected, setSelected] = useState(isEquals ? value : '');
const { getFilters } = useFilters();
const { formatValue } = useFormat();
const { locale } = useLocale();
const filters = getFilters(type);
- const { data: values = [], isLoading } = useWebsiteValues(websiteId, name);
+ const isDisabled = !operator || (isEquals && !selected) || (!isEquals && !value);
+ const {
+ data: values = [],
+ isLoading,
+ refetch,
+ } = useWebsiteValues({
+ websiteId,
+ type: name,
+ startDate,
+ endDate,
+ search,
+ });
const formattedValues = useMemo(() => {
if (!values) {
@@ -69,25 +91,49 @@ export default function FieldFilterEditForm({
const filteredValues = useMemo(() => {
return value
- ? values.filter(n => formattedValues[n].toLowerCase().includes(value.toLowerCase()))
+ ? values.filter((n: string | number) =>
+ formattedValues[n].toLowerCase().includes(value.toLowerCase()),
+ )
: values;
}, [value, formattedValues]);
- const renderFilterValue = value => {
- return filters.find(f => f.value === value)?.label;
+ const renderFilterValue = (value: any) => {
+ return filters.find((f: { value: any }) => f.value === value)?.label;
};
const handleAdd = () => {
- onChange({ name, type, filter, value });
+ onChange({ name, type, operator, value: isEquals ? selected : value });
};
- const handleMenuSelect = value => {
- setValue(value);
+ const handleMenuSelect = (close: () => void, value: string) => {
+ setSelected(value);
+ close();
};
- const showMenu =
- [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
- !(filteredValues?.length === 1 && filteredValues[0] === formattedValues[value]);
+ const handleSearch = (value: string) => {
+ setSearch(value);
+ };
+
+ const handleReset = () => {
+ setSelected('');
+ setValue('');
+ setSearch('');
+ refetch();
+ };
+
+ const handleOperatorChange = (value: any) => {
+ setOperator(value);
+
+ if ([OPERATORS.equals, OPERATORS.notEquals].includes(value)) {
+ setValue('');
+ } else {
+ setSelected('');
+ }
+ };
+
+ const handleBlur = () => {
+ window.setTimeout(() => setShowMenu(false), 500);
+ };
return (