New goals page. Upgraded prisma.

src/app/(main)/websites/[websiteId]/goals/GoalAddForm.tsx

@@ -2,72 +2,116 @@ import {
   Form,
   FormField,
   TextField,
-  Select,
+  Grid,
   FormButtons,
   FormSubmitButton,
   Button,
+  RadioGroup,
+  Radio,
+  Text,
+  Icon,
+  Loading,
 } from '@umami/react-zen';
-import { useApi, useMessages } from '@/components/hooks';
+import { useApi, useMessages, useModified, useReportQuery } from '@/components/hooks';
+import { File, Lightning } from '@/components/icons';
+
+const defaultValues = {
+  name: '',
+  type: 'page',
+  value: '',
+};
 
 export function GoalAddForm({
+  id,
   websiteId,
   onSave,
   onClose,
 }: {
+  id?: string;
   websiteId: string;
   onSave?: () => void;
   onClose?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
+  const { touch } = useModified();
   const { post, useMutation } = useApi();
+  const { data } = useReportQuery(id);
   const { mutate, error, isPending } = useMutation({
-    mutationFn: (data: any) => post('/websites', { ...data }),
+    mutationFn: (params: any) => post(`/websites/${websiteId}/goals`, params),
   });
 
   const handleSubmit = async (data: any) => {
-    mutate(data, {
-      onSuccess: async () => {
-        onSave?.();
-        onClose?.();
+    mutate(
+      { id, ...data },
+      {
+        onSuccess: async () => {
+          onSave?.();
+          onClose?.();
+          touch('goals');
+        },
       },
-    });
+    );
   };
 
-  const items = [
-    { id: 'page', label: formatMessage(labels.page) },
-    { id: 'event', label: formatMessage(labels.event) },
-  ];
+  if (id && !data) {
+    return <Loading position="page" icon="dots" />;
+  }
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message}>
-      {websiteId}
-      <FormField
-        name="name"
-        label={formatMessage(labels.name)}
-        rules={{ required: formatMessage(labels.required) }}
-      >
-        <TextField />
-      </FormField>
-      <FormField
-        name="type"
-        label={formatMessage(labels.type)}
-        rules={{ required: formatMessage(labels.required) }}
-      >
-        <Select items={items} defaultValue="page" />
-      </FormField>
-      <FormField
-        name="value"
-        label={formatMessage(labels.value)}
-        rules={{ required: formatMessage(labels.required) }}
-      >
-        <TextField />
-      </FormField>
-      <FormButtons>
-        <Button onPress={onClose} isDisabled={isPending}>
-          {formatMessage(labels.cancel)}
-        </Button>
-        <FormSubmitButton isDisabled={false}>{formatMessage(labels.add)}</FormSubmitButton>
-      </FormButtons>
+    <Form
+      onSubmit={handleSubmit}
+      error={error?.message}
+      defaultValues={data?.parameters || defaultValues}
+    >
+      {({ watch }) => {
+        const watchType = watch('type');
+        return (
+          <>
+            <FormField
+              name="type"
+              label={formatMessage(labels.type)}
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <RadioGroup orientation="horizontal" variant="box">
+                <Grid columns="1fr 1fr" flexGrow={1} gap>
+                  <Radio value="page">
+                    <Icon>
+                      <File />
+                    </Icon>
+                    <Text>{formatMessage(labels.page)}</Text>
+                  </Radio>
+                  <Radio value="event">
+                    <Icon>
+                      <Lightning />
+                    </Icon>
+                    <Text>{formatMessage(labels.event)}</Text>
+                  </Radio>
+                </Grid>
+              </RadioGroup>
+            </FormField>
+            <FormField
+              name="name"
+              label={formatMessage(labels.name)}
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField />
+            </FormField>
+            <FormField
+              name="value"
+              label={formatMessage(watchType === 'event' ? labels.eventName : labels.path)}
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField />
+            </FormField>
+            <FormButtons>
+              <Button onPress={onClose} isDisabled={isPending}>
+                {formatMessage(labels.cancel)}
+              </Button>
+              <FormSubmitButton>{formatMessage(id ? labels.save : labels.add)}</FormSubmitButton>
+            </FormButtons>
+          </>
+        );
+      }}
     </Form>
   );
 }