[NGO Admin] Move the form for adding individual observers into a modal

web/src/features/monitoring-observers/components/CreateMonitoringObserver.tsx → web/src/features/monitoring-observers/components/MonitoringObserversList/CreateMonitoringObserverDialog.tsx

@@ -1,28 +1,28 @@
 import { authApi } from '@/common/auth-api';
-import Layout from '@/components/layout/Layout';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
 import TagsSelectFormField from '@/components/ui/tag-selector';
 import { toast } from '@/components/ui/use-toast';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { useMonitoringObserversTags } from '@/hooks/tags-queries';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { MonitorObserverBackButton } from './MonitoringObserverBackButton';
-import { monitoringObserversKeys } from '../hooks/monitoring-observers-queries';
+import { monitoringObserversKeys } from '../../hooks/monitoring-observers-queries';
 
-export default function CreateMonitoringObserver() {
+export interface CreateMonitoringObserverDialogProps {
+  open: boolean;
+  onOpenChange: (open: any) => void;
+}
+
+function CreateMonitoringObserverDialog({ open, onOpenChange }: CreateMonitoringObserverDialogProps) {
   const { t } = useTranslation('translation', { keyPrefix: 'observers.addObserver' });
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: availableTags } = useMonitoringObserversTags(currentElectionRoundId);
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const newObserverSchema = z.object({
     firstName: z.string(),
@@ -47,18 +47,15 @@ export default function CreateMonitoringObserver() {
       return authApi.post(`/election-rounds/${electionRoundId}/monitoring-observers`, { observers: [values] });
     },
 
-    onSuccess: (_, {electionRoundId}) => {
+    onSuccess: (_, { electionRoundId }) => {
       toast({
         title: 'Success',
         description: t('onSuccess'),
       });
 
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
-
-      navigate({
-        to: '/monitoring-observers/$tab',
-        params: { tab: 'list' },
-      });
+      form.reset({});
+      onOpenChange(false);
     },
     onError: () => {
       toast({
@@ -68,16 +65,19 @@ export default function CreateMonitoringObserver() {
       });
     },
   });
+
   return (
-    <Layout title={''} backButton={<MonitorObserverBackButton />} enableBreadcrumbs={false}>
-      <Card className='w-[800px] pt-0'>
-        <CardHeader className='flex gap-2 flex-column'>
-          <div className='flex flex-row items-center justify-between'>
-            <CardTitle className='text-xl'>{t('title')}</CardTitle>
-          </div>
-          <Separator />
-        </CardHeader>
-        <CardContent>
+    <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
+      <DialogContent
+        className='min-w-[650px] min-h-[350px]'
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+        onEscapeKeyDown={(e) => {
+          e.preventDefault();
+        }}>
+        <DialogTitle className='mb-3.5'>{t('title')}</DialogTitle>
+        <div className='flex flex-col gap-3'>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
               <FormField
@@ -147,29 +147,22 @@ export default function CreateMonitoringObserver() {
                 )}
               />
 
-              <div className='flex justify-between'>
-                <div className='flex gap-2'>
-                  <Button
-                    variant='outline'
-                    type='button'
-                    onClick={() => {
-                      void navigate({
-                        to: '/monitoring-observers/$tab',
-                        params: { tab: 'list' },
-                      });
-                    }}>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button className='text-purple-900 border border-purple-900 border-input bg-background hover:bg-purple-50 hover:text-purple-600'>
                     Cancel
                   </Button>
-
-                  <Button title={t('addBtnText')} type='submit' className='px-6'>
-                    {t('addBtnText')}
-                  </Button>
-                </div>
-              </div>
+                </DialogClose>
+                <Button title={t('addBtnText')} type='submit' className='px-6'>
+                  {t('addBtnText')}
+                </Button>
+              </DialogFooter>
             </form>
           </Form>
-        </CardContent>
-      </Card>
-    </Layout>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
+
+export default CreateMonitoringObserverDialog;

web/src/features/monitoring-observers/components/MonitoringObserversList/MonitoringObserversList.tsx

@@ -16,7 +16,7 @@ import { Separator } from '@/components/ui/separator';
 import { useDialog } from '@/components/ui/use-dialog';
 import { Cog8ToothIcon, EllipsisVerticalIcon, FunnelIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import { useMutation } from '@tanstack/react-query';
-import { Link, useNavigate, useRouter } from '@tanstack/react-router';
+import { useNavigate, useRouter } from '@tanstack/react-router';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -38,98 +38,101 @@ import { MonitoringObserver, MonitoringObserverStatus } from '../../models/monit
 import ImportMonitoringObserversDialog from '../MonitoringObserversList/ImportMonitoringObserversDialog';
 import ImportMonitoringObserversErrorsDialog from '../MonitoringObserversList/ImportMonitoringObserversErrorsDialog';
 import ConfirmResendInvitationDialog from './ConfirmResendInvitationDialog';
+import CreateMonitoringObserverDialog from './CreateMonitoringObserverDialog';
 
 function MonitoringObserversList() {
   const navigate = useNavigate();
   const router = useRouter();
   const search = Route.useSearch();
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
 
-  const monitoringObserverColDefs: ColumnDef<MonitoringObserver>[] = useMemo(()=>{
+  const monitoringObserverColDefs: ColumnDef<MonitoringObserver>[] = useMemo(() => {
     return [
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Name' column={column} />,
-      accessorKey: 'name',
-      enableSorting: true,
-      enableGlobalFilter: true,
-      cell: ({
-        row: {
-          original: { firstName, lastName },
-        },
-      }) => (
-        <p>
-          {firstName} {lastName}
-        </p>
-      ),
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Email' column={column} />,
-      accessorKey: 'email',
-      enableSorting: true,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
-      accessorKey: 'tags',
-      cell: ({
-        row: {
-          original: { tags },
-        },
-      }) => <TableTagList tags={tags} />,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Phone' column={column} />,
-      accessorKey: 'phoneNumber',
-      enableSorting: true,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Observer status' column={column} />,
-      accessorKey: 'status',
-      enableSorting: true,
-      cell: ({
-        row: {
-          original: { status },
-        },
-      }) => <Badge className={'badge-' + status}>{status}</Badge>,
-    },
-    {
-      header: ({ column }) => <DataTableColumnHeader title='Latest activity at' column={column} />,
-      accessorKey: 'latestActivityAt',
-      enableSorting: true,
-      cell: ({
-        row: {
-          original: { latestActivityAt },
-        },
-      }) => <p>{latestActivityAt ? format(latestActivityAt, DateTimeFormat) : '-'}</p>,
-    },
-    {
-      header: '',
-      accessorKey: 'action',
-      enableSorting: true,
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <EllipsisVerticalIcon className='w-[24px] h-[24px] text-purple-600' />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={() => navigateToObserver(row.original.id)}>View</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => navigateToEdit(row.original.id)}>Edit</DropdownMenuItem>
-            <DropdownMenuItem
-              disabled={row.original.status !== MonitoringObserverStatus.Pending}
-              onClick={() => handleResendInviteToObserver(row.original.id)}>
-              Resend invitation email
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];}, [currentElectionRoundId]);
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Name' column={column} />,
+        accessorKey: 'name',
+        enableSorting: true,
+        enableGlobalFilter: true,
+        cell: ({
+          row: {
+            original: { firstName, lastName },
+          },
+        }) => (
+          <p>
+            {firstName} {lastName}
+          </p>
+        ),
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Email' column={column} />,
+        accessorKey: 'email',
+        enableSorting: true,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Observer tags' column={column} />,
+        accessorKey: 'tags',
+        cell: ({
+          row: {
+            original: { tags },
+          },
+        }) => <TableTagList tags={tags} />,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Phone' column={column} />,
+        accessorKey: 'phoneNumber',
+        enableSorting: true,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Observer status' column={column} />,
+        accessorKey: 'status',
+        enableSorting: true,
+        cell: ({
+          row: {
+            original: { status },
+          },
+        }) => <Badge className={'badge-' + status}>{status}</Badge>,
+      },
+      {
+        header: ({ column }) => <DataTableColumnHeader title='Latest activity at' column={column} />,
+        accessorKey: 'latestActivityAt',
+        enableSorting: true,
+        cell: ({
+          row: {
+            original: { latestActivityAt },
+          },
+        }) => <p>{latestActivityAt ? format(latestActivityAt, DateTimeFormat) : '-'}</p>,
+      },
+      {
+        header: '',
+        accessorKey: 'action',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <EllipsisVerticalIcon className='w-[24px] h-[24px] text-purple-600' />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onClick={() => navigateToObserver(row.original.id)}>View</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => navigateToEdit(row.original.id)}>Edit</DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={row.original.status !== MonitoringObserverStatus.Pending}
+                onClick={() => handleResendInviteToObserver(row.original.id)}>
+                Resend invitation email
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+    ];
+  }, [currentElectionRoundId]);
 
   const [searchText, setSearchText] = useState(search.searchText);
   const debouncedSearch = useDebounce(search, 300);
   const debouncedSearchText = useDebounce(searchText, 300);
 
   const [importErrorsFileId, setImportErrorsFileId] = useState<string | undefined>();
   const [monitoringObserverId, setMonitoringObserverId] = useState<string | undefined>();
+  const createMonitoringObserverDialog = useDialog();
   const importMonitoringObserversDialog = useDialog();
   const importMonitoringObserverErrorsDialog = useDialog();
   const confirmResendInvitesDialog = useDialog();
@@ -155,7 +158,7 @@ function MonitoringObserversList() {
     const params = [
       ['status', debouncedSearch.monitoringObserverStatus],
       ['tags', debouncedSearch.tags],
-      ['searchText', debouncedSearch.searchText]
+      ['searchText', debouncedSearch.searchText],
     ].filter(([_, value]) => value);
 
     return Object.fromEntries(params);
@@ -184,7 +187,7 @@ function MonitoringObserversList() {
       });
     },
 
-    onSuccess: (_, {electionRoundId}) => {
+    onSuccess: (_, { electionRoundId }) => {
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
       router.invalidate();
 
@@ -251,19 +254,13 @@ function MonitoringObserversList() {
         <div className='flex flex-row items-center justify-between px-6'>
           <CardTitle className='text-xl'>Monitoring observers list</CardTitle>
           <div className='flex flex-row-reverse gap-4 table-actions flex-row-'>
-            <Link to='/monitoring-observers/new-observer'>
-              <Button>
-                <Plus className='mr-2' width={18} height={18} />
-                {i18n.t('observers.addObserver.addBtnText')}
-              </Button>
-            </Link>
-
             {!!importErrorsFileId && (
               <ImportMonitoringObserversErrorsDialog
                 fileId={importErrorsFileId}
                 {...importMonitoringObserverErrorsDialog.dialogProps}
               />
             )}
+
             <ImportMonitoringObserversDialog
               {...importMonitoringObserversDialog.dialogProps}
               onImportError={(fileId) => {
@@ -291,6 +288,12 @@ function MonitoringObserversList() {
               </svg>
               Import observer list
             </Button>
+            <Button variant='secondary' onClick={() => createMonitoringObserverDialog.trigger()}>
+              <Plus className='mr-2' width={18} height={18} />
+              {i18n.t('observers.addObserver.addBtnText')}
+            </Button>
+            <CreateMonitoringObserverDialog {...createMonitoringObserverDialog.dialogProps} />
+
             <Button
               className='text-purple-900 bg-background hover:bg-purple-50 hover:text-purple-500'
               onClick={exportMonitoringObservers}>