web: edit report and edit dashboard

apps/web/src/modals/EditDashboard.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { ButtonContainer } from '@/components/ButtonContainer';
+import { InputWithLabel } from '@/components/forms/InputWithLabel';
+import { Button } from '@/components/ui/button';
+import { toast } from '@/components/ui/use-toast';
+import { useRefetchActive } from '@/hooks/useRefetchActive';
+import { api, handleError } from '@/utils/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface EditDashboardProps {
+  id: string;
+}
+
+const validator = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+});
+
+type IForm = z.infer<typeof validator>;
+
+export default function EditDashboard({ id }: EditDashboardProps) {
+  const refetch = useRefetchActive();
+  const mutation = api.dashboard.update.useMutation({
+    onError: handleError,
+    onSuccess() {
+      toast({
+        title: 'Success',
+        description: 'Dashboard updated.',
+      });
+      popModal();
+      refetch();
+    },
+  });
+  const query = api.dashboard.get.useQuery({ id });
+  const data = query.data;
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      id: '',
+      name: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Edit dashboard" />
+      <form
+        onSubmit={handleSubmit((values) => {
+          mutation.mutate(values);
+        })}
+      >
+        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <ButtonContainer>
+          <Button type="button" variant="outline" onClick={() => popModal()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!formState.isDirty}>
+            Update
+          </Button>
+        </ButtonContainer>
+      </form>
+    </ModalContent>
+  );
+}

apps/web/src/modals/EditReport.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { ButtonContainer } from '@/components/ButtonContainer';
+import { InputWithLabel } from '@/components/forms/InputWithLabel';
+import { Button } from '@/components/ui/button';
+import { toast } from '@/components/ui/use-toast';
+import { useRefetchActive } from '@/hooks/useRefetchActive';
+import { api, handleError } from '@/utils/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+const validator = z.object({
+  name: z.string().min(1),
+});
+
+type IForm = z.infer<typeof validator>;
+
+interface EditReportProps {
+  form: IForm;
+  onSubmit: SubmitHandler<IForm>;
+}
+
+export default function EditReport({ form, onSubmit }: EditReportProps) {
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: form,
+  });
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Edit report" />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <ButtonContainer>
+          <Button type="button" variant="outline" onClick={() => popModal()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!formState.isDirty}>
+            Update
+          </Button>
+        </ButtonContainer>
+      </form>
+    </ModalContent>
+  );
+}

apps/web/src/modals/SaveReport.tsx

@@ -54,7 +54,7 @@ export default function SaveReport({ report }: SaveReportProps) {
     useForm<IForm>({
       resolver: zodResolver(validator),
       defaultValues: {
-        name: '',
+        name: report.name,
         dashboardId: '',
       },
     });
@@ -136,7 +136,7 @@ export default function SaveReport({ report }: SaveReportProps) {
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel
           </Button>
-          <Button type="submit" disabled={!formState.isDirty}>
+          <Button type="submit" disabled={!formState.isValid}>
             Save
           </Button>
         </ButtonContainer>

apps/web/src/modals/index.tsx

@@ -34,6 +34,12 @@ const modals = {
   AddDashboard: dynamic(() => import('./AddDashboard'), {
     loading: Loading,
   }),
+  EditDashboard: dynamic(() => import('./EditDashboard'), {
+    loading: Loading,
+  }),
+  EditReport: dynamic(() => import('./EditReport'), {
+    loading: Loading,
+  }),
 };
 
 const emitter = mitt<{