Refactored query filters.

This commit is contained in:
Mike Cao 2023-08-04 00:51:52 -07:00
parent b65c478689
commit 157862834d
16 changed files with 118 additions and 147 deletions

View file

@ -2,12 +2,28 @@ import { useContext, useRef } from 'react';
import { useMessages } from 'hooks';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
import { ReportContext } from 'components/pages/reports/Report';
import { REPORT_PARAMETERS, WEBSITE_EVENT_FIELDS } from 'lib/constants';
import { REPORT_PARAMETERS } from 'lib/constants';
import Icons from 'components/icons';
import BaseParameters from '../BaseParameters';
import FieldAddForm from '../FieldAddForm';
import ParameterList from '../ParameterList';
import styles from './InsightsParameters.module.css';
import FieldSelectForm from '../FieldSelectForm';
import PopupForm from '../PopupForm';
import FieldFilterForm from '../FieldFilterForm';
const fieldOptions = [
{ name: 'url', type: 'string' },
{ name: 'title', type: 'string' },
{ name: 'referrer', type: 'string' },
{ name: 'query', type: 'string' },
{ name: 'browser', type: 'string' },
{ name: 'os', type: 'string' },
{ name: 'device', type: 'string' },
{ name: 'country', type: 'string' },
{ name: 'region', type: 'string' },
{ name: 'city', type: 'string' },
{ name: 'language', type: 'string' },
];
export function InsightsParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@ -16,7 +32,6 @@ export function InsightsParameters() {
const { parameters } = report || {};
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
const queryEnabled = websiteId && dateRange && fields?.length;
const fieldOptions = Object.keys(WEBSITE_EVENT_FIELDS).map(key => WEBSITE_EVENT_FIELDS[key]);
const parameterGroups = [
{ label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
@ -57,13 +72,14 @@ export function InsightsParameters() {
<Popup position="bottom" alignment="start">
{(close, element) => {
return (
<FieldAddForm
fields={fieldOptions}
group={group}
element={element}
onAdd={handleAdd}
onClose={close}
/>
<PopupForm element={element} onClose={close}>
{group === REPORT_PARAMETERS.fields && (
<FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
)}
{group === REPORT_PARAMETERS.filters && (
<FieldFilterForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
)}
</PopupForm>
);
}}
</Popup>