add event_data to goal.

src/app/(main)/reports/goals/GoalsAddForm.tsx

@@ -6,27 +6,48 @@ import styles from './GoalsAddForm.module.css';
 export function GoalsAddForm({
   type: defaultType = 'url',
   value: defaultValue = '',
+  property: defaultProperty = '',
+  operator: defaultAggregae = null,
   goal: defaultGoal = 10,
   onChange,
 }: {
   type?: string;
   value?: string;
+  operator?: string;
+  property?: string;
   goal?: number;
-  onChange?: (step: { type: string; value: string; goal: number }) => void;
+  onChange?: (step: {
+    type: string;
+    value: string;
+    goal: number;
+    operator?: string;
+    property?: string;
+  }) => void;
 }) {
   const [type, setType] = useState(defaultType);
   const [value, setValue] = useState(defaultValue);
+  const [operator, setOperator] = useState(defaultAggregae);
+  const [property, setProperty] = useState(defaultProperty);
   const [goal, setGoal] = useState(defaultGoal);
   const { formatMessage, labels } = useMessages();
   const items = [
     { label: formatMessage(labels.url), value: 'url' },
     { label: formatMessage(labels.event), value: 'event' },
+    { label: formatMessage(labels.eventData), value: 'event-data' },
+  ];
+  const operators = [
+    { label: formatMessage(labels.count), value: 'count' },
+    { label: formatMessage(labels.average), value: 'average' },
+    { label: formatMessage(labels.sum), value: 'sum' },
   ];
   const isDisabled = !type || !value;
 
   const handleSave = () => {
-    onChange({ type, value, goal });
+    onChange(
+      type === 'event-data' ? { type, value, goal, operator, property } : { type, value, goal },
+    );
     setValue('');
+    setProperty('');
     setGoal(10);
   };
 
@@ -45,6 +66,10 @@ export function GoalsAddForm({
     return items.find(item => item.value === value)?.label;
   };
 
+  const renderoperatorValue = (value: any) => {
+    return operators.find(item => item.value === value)?.label;
+  };
+
   return (
     <Flexbox direction="column" gap={10}>
       <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
@@ -70,6 +95,31 @@ export function GoalsAddForm({
           />
         </Flexbox>
       </FormRow>
+      {type === 'event-data' && (
+        <FormRow label={formatMessage(labels.property)}>
+          <Flexbox gap={10}>
+            <Dropdown
+              className={styles.dropdown}
+              items={operators}
+              value={operator}
+              renderValue={renderoperatorValue}
+              onChange={(value: any) => setOperator(value)}
+            >
+              {({ value, label }) => {
+                return <Item key={value}>{label}</Item>;
+              }}
+            </Dropdown>
+            <TextField
+              className={styles.input}
+              value={property}
+              onChange={e => handleChange(e, setProperty)}
+              autoFocus={true}
+              autoComplete="off"
+              onKeyDown={handleKeyDown}
+            />
+          </Flexbox>
+        </FormRow>
+      )}
       <FormRow label={formatMessage(labels.goal)}>
         <Flexbox gap={10}>
           <TextField