Refactored filter parameters.

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(
     <PopupForm>
       {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
-      {selected && group === REPORT_PARAMETERS.fields && (
-        <FieldAggregateForm {...selected} onSelect={handleSave} />
-      )}
-      {selected && group === REPORT_PARAMETERS.filters && (
-        <FieldFilterEditForm {...selected} onChange={handleSave} />
-      )}
     </PopupForm>,
     document.body,
   );

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;
 }

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 (
     <Form>
@@ -97,35 +143,54 @@ export default function FieldFilterEditForm({
             <Dropdown
               className={styles.dropdown}
               items={filters}
-              value={filter}
+              value={operator}
               renderValue={renderFilterValue}
-              onChange={(key: any) => setFilter(key)}
+              onChange={handleOperatorChange}
             >
               {({ value, label }) => {
                 return <Item key={value}>{label}</Item>;
               }}
             </Dropdown>
           )}
-          <PopupTrigger>
-            <TextField
-              className={styles.text}
-              value={decodeURIComponent(value)}
-              placeholder={formatMessage(labels.enter)}
-              onChange={e => setValue(e.target.value)}
-            />
-            {showMenu && (
-              <Popup className={styles.popup} alignment="start">
+          {selected && isEquals && (
+            <div className={styles.selected} onClick={handleReset}>
+              <Text>{selected}</Text>
+              <Icon>
+                <Icons.Close />
+              </Icon>
+            </div>
+          )}
+          {!selected && isEquals && (
+            <div className={styles.search}>
+              <SearchField
+                className={styles.text}
+                value={value}
+                placeholder={formatMessage(labels.enter)}
+                onChange={e => setValue(e.target.value)}
+                onSearch={handleSearch}
+                delay={500}
+                onFocus={() => setShowMenu(true)}
+                onBlur={handleBlur}
+              />
+              {showMenu && (
                 <ResultsMenu
                   values={filteredValues}
                   type={name}
                   isLoading={isLoading}
-                  onSelect={handleMenuSelect}
+                  onSelect={handleMenuSelect.bind(null, close)}
                 />
-              </Popup>
-            )}
-          </PopupTrigger>
+              )}
+            </div>
+          )}
+          {!selected && !isEquals && (
+            <TextField
+              className={styles.text}
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+          )}
         </Flexbox>
-        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
+        <Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
           {isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
         </Button>
       </FormRow>
@@ -136,17 +201,23 @@ export default function FieldFilterEditForm({
 const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
   const { formatValue } = useFormat();
   if (isLoading) {
-    return <Loading icon="dots" position="center" />;
+    return (
+      <Menu>
+        <Item>
+          <Loading icon="dots" position="center" />
+        </Item>
+      </Menu>
+    );
   }
 
   if (!values?.length) {
-    return null;
+    return <h1>poop</h1>;
   }
 
   return (
-    <Menu variant="popup" onSelect={onSelect}>
+    <Menu className={styles.menu} variant="popup" onSelect={onSelect}>
       {values?.map(value => {
-        return <Item key={value}>{safeDecodeURIComponent(formatValue(value, type))}</Item>;
+        return <Item key={value}>{formatValue(value, type)}</Item>;
       })}
     </Menu>
   );

src/app/(main)/reports/[reportId]/FilterParameters.module.css

@@ -15,7 +15,7 @@
   white-space: nowrap;
 }
 
-.filter {
+.op {
   color: var(--blue900);
   background-color: var(--blue100);
   font-size: 12px;

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import { safeDecodeURIComponent } from 'next-basics';
 import { useMessages, useFormat, useFilters, useFields } from 'components/hooks';
 import Icons from 'components/icons';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
@@ -15,9 +14,8 @@ export function FilterParameters() {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
-  const { filterLabels } = useFilters();
   const { parameters } = report || {};
-  const { websiteId, filters } = parameters || {};
+  const { websiteId, filters, dateRange } = parameters || {};
   const { fields } = useFields();
 
   const handleAdd = (value: { name: any }) => {
@@ -30,7 +28,7 @@ export function FilterParameters() {
     updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
   };
 
-  const handleChange = filter => {
+  const handleChange = (close: () => void, filter: { name: any }) => {
     updateReport({
       parameters: {
         filters: filters.map(f => {
@@ -41,6 +39,7 @@ export function FilterParameters() {
         }),
       },
     });
+    close();
   };
 
   const AddButton = () => {
@@ -67,44 +66,66 @@ export function FilterParameters() {
   return (
     <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
       <ParameterList>
-        {filters.map(({ name, filter, value }: { name: string; filter: string; value: string }) => {
-          const label = fields.find(f => f.name === name)?.label;
-          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any);
-          return (
-            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
-              <FilterParameter
-                name={name}
-                label={label}
-                filter={filterLabels[filter]}
-                value={isEquals ? formatValue(value, name) : value}
-                onChange={handleChange}
-              />
-            </ParameterList.Item>
-          );
-        })}
+        {filters.map(
+          ({ name, operator, value }: { name: string; operator: string; value: string }) => {
+            const label = fields.find(f => f.name === name)?.label;
+            const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
+            return (
+              <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+                <FilterParameter
+                  {...dateRange}
+                  websiteId={websiteId}
+                  name={name}
+                  label={label}
+                  operator={operator}
+                  value={isEquals ? formatValue(value, name) : value}
+                  onChange={handleChange}
+                />
+              </ParameterList.Item>
+            );
+          },
+        )}
       </ParameterList>
     </FormRow>
   );
 }
 
-const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => {
+const FilterParameter = ({
+  websiteId,
+  name,
+  label,
+  operator,
+  value,
+  type = 'string',
+  startDate,
+  endDate,
+  onChange,
+}) => {
+  const { filterLabels } = useFilters();
+
   return (
     <PopupTrigger>
       <div className={styles.item}>
         <div className={styles.label}>{label}</div>
-        <div className={styles.filter}>{filter}</div>
-        <div className={styles.value}>{safeDecodeURIComponent(value)}</div>
+        <div className={styles.op}>{filterLabels[operator]}</div>
+        <div className={styles.value}>{value}</div>
       </div>
       <Popup className={styles.edit} alignment="start">
-        <PopupForm>
-          <FieldFilterEditForm
-            name={name}
-            label={label}
-            type={type}
-            defaultValue={value}
-            onChange={onChange}
-          />
-        </PopupForm>
+        {(close: any) => (
+          <PopupForm>
+            <FieldFilterEditForm
+              websiteId={websiteId}
+              name={name}
+              label={label}
+              type={type}
+              startDate={startDate}
+              endDate={endDate}
+              operator={operator}
+              defaultValue={value}
+              onChange={onChange.bind(null, close)}
+            />
+          </PopupForm>
+        )}
       </Popup>
     </PopupTrigger>
   );

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import FieldSelectForm from './FieldSelectForm';
 import FieldFilterEditForm from './FieldFilterEditForm';
+import { useDateRange } from 'components/hooks';
 
 export interface FilterSelectFormProps {
   websiteId?: string;
   fields: any[];
-  onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
+  onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
   allowFilterSelect?: boolean;
 }
 
@@ -16,6 +17,7 @@ export default function FilterSelectForm({
   allowFilterSelect,
 }: FilterSelectFormProps) {
   const [field, setField] = useState<{ name: string; label: string; type: string }>();
+  const [{ startDate, endDate }] = useDateRange(websiteId);
 
   if (!field) {
     return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
@@ -29,6 +31,8 @@ export default function FilterSelectForm({
       name={name}
       label={label}
       type={type}
+      startDate={startDate}
+      endDate={endDate}
       onChange={onChange}
       allowFilterSelect={allowFilterSelect}
       isNew={true}