Filter tag enhancements.

src/components/hooks/useFilters.ts

@@ -4,7 +4,7 @@ import { OPERATORS } from 'lib/constants';
 export function useFilters() {
   const { formatMessage, labels } = useMessages();
 
-  const filterLabels = {
+  const operatorLabels = {
     [OPERATORS.equals]: formatMessage(labels.is),
     [OPERATORS.notEquals]: formatMessage(labels.isNot),
     [OPERATORS.set]: formatMessage(labels.isSet),
@@ -37,11 +37,17 @@ export function useFilters() {
     uuid: [OPERATORS.equals],
   };
 
+  const filters = Object.keys(typeFilters).flatMap(key => {
+    return (
+      typeFilters[key]?.map(value => ({ type: key, value, label: operatorLabels[value] })) ?? []
+    );
+  });
+
   const getFilters = type => {
-    return typeFilters[type]?.map(key => ({ type, value: key, label: filterLabels[key] })) ?? [];
+    return typeFilters[type]?.map(key => ({ type, value: key, label: operatorLabels[key] })) ?? [];
   };
 
-  return { getFilters, filterLabels, typeFilters };
+  return { filters, operatorLabels, typeFilters, getFilters };
 }
 
 export default useFilters;

src/components/metrics/FilterTags.module.css

@@ -13,18 +13,39 @@
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  font-size: var(--font-size-sm);
-  border: 1px solid var(--blue400);
+  background: var(--base75);
+  border: 1px solid var(--base400);
   border-radius: var(--border-radius);
+  box-shadow: 1px 1px 1px var(--base500);
   padding: 8px 16px;
   cursor: pointer;
-  background: var(--blue100);
 }
 
 .tag:hover {
-  background: var(--blue200);
+  background: var(--base100);
 }
 
-.tag b {
-  text-transform: lowercase;
+.close {
+  font-weight: 700;
+}
+
+.name,
+.value {
+  color: var(--base700);
+  font-weight: 700;
+}
+
+.operator {
+  text-transform: lowercase;
+  font-weight: 900;
+}
+
+.icon {
+  margin-left: 10px;
+  padding: 2px;
+  border-radius: 100%;
+}
+
+.icon:hover {
+  background: var(--base200);
 }

src/components/metrics/FilterTags.tsx

@@ -1,30 +1,61 @@
-import { safeDecodeURI } from 'next-basics';
-import { Button, Icon, Icons, Text } from 'react-basics';
-import { useNavigation } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { useFormat } from 'components/hooks';
+import { MouseEvent } from 'react';
+import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
+import {
+  useDateRange,
+  useFields,
+  useNavigation,
+  useMessages,
+  useFormat,
+  useFilters,
+} from 'components/hooks';
+import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
+import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditForm';
+import { OPERATOR_PREFIXES } from 'lib/constants';
+import { operatorEquals, parseParameterValue } from 'lib/params';
 import styles from './FilterTags.module.css';
 
-export function FilterTags({ params }) {
+export function FilterTags({
+  websiteId,
+  params,
+}: {
+  websiteId: string;
+  params: { [key: string]: string };
+}) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
+  const [dateRange] = useDateRange(websiteId);
   const {
     router,
     renderUrl,
     query: { view },
   } = useNavigation();
+  const { fields } = useFields();
+  const { operatorLabels } = useFilters();
+  const { startDate, endDate } = dateRange;
 
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
   }
 
-  function handleCloseFilter(param?: string) {
+  const handleCloseFilter = (param: string, e: MouseEvent) => {
+    e.stopPropagation();
     router.push(renderUrl({ [param]: undefined }));
-  }
+  };
 
-  function handleResetFilter() {
+  const handleResetFilter = () => {
     router.push(renderUrl({ view }, true));
-  }
+  };
+
+  const handleChangeFilter = (
+    values: { name: string; operator: string; value: string },
+    close: () => void,
+  ) => {
+    const { name, operator, value } = values;
+    const prefix = OPERATOR_PREFIXES[operator];
+
+    router.push(renderUrl({ [name]: prefix + value }));
+    close();
+  };
 
   return (
     <div className={styles.filters}>
@@ -33,18 +64,43 @@ export function FilterTags({ params }) {
         if (!params[key]) {
           return null;
         }
+        const label = fields.find(f => f.name === key)?.label;
+        const { operator, value } = parseParameterValue(params[key]);
+        const paramValue = operatorEquals(operator) ? formatValue(value, key) : value;
+
         return (
-          <div key={key} className={styles.tag} onClick={() => handleCloseFilter(key)}>
-            <Text>
-              <b>{formatMessage(labels[key])}</b> = {formatValue(safeDecodeURI(params[key]), key)}
-            </Text>
-            <Icon>
-              <Icons.Close />
-            </Icon>
-          </div>
+          <PopupTrigger key={key}>
+            <div key={key} className={styles.tag}>
+              <Text className={styles.name}>{label}</Text>
+              <Text className={styles.operator}>{operatorLabels[operator]}</Text>
+              <Text className={styles.value}>{paramValue}</Text>
+              <Icon className={styles.icon} onClick={e => handleCloseFilter(key, e)}>
+                <Icons.Close />
+              </Icon>
+            </div>
+            <Popup alignment="start">
+              {(close: () => void) => {
+                return (
+                  <PopupForm>
+                    <FieldFilterEditForm
+                      label={label}
+                      type="string"
+                      websiteId={websiteId}
+                      name={key}
+                      operator={operator}
+                      defaultValue={value}
+                      startDate={startDate}
+                      endDate={endDate}
+                      onChange={values => handleChangeFilter(values, close)}
+                    />
+                  </PopupForm>
+                );
+              }}
+            </Popup>
+          </PopupTrigger>
         );
       })}
-      <Button size="sm" variant="quiet" onClick={handleResetFilter}>
+      <Button className={styles.close} variant="quiet" onClick={handleResetFilter}>
         <Icon>
           <Icons.Close />
         </Icon>