[NGO Admin] Add form wizard

web/src/components/LanguageSelector/LanguageSelector.tsx

@@ -1,11 +1,16 @@
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import i18n from '@/i18n';
+import { useRouter } from '@tanstack/react-router';
 import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Label } from '../ui/label';
 
 export const LanguageSelector: FC = () => {
+  const {  i18n } = useTranslation(); // not passing any namespace will use the defaultNS (by default set to 'translation')
+  const router = useRouter();
+
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
+    router.invalidate();
   };
 
   const options = [

web/src/components/layout/Layout.tsx

@@ -1,12 +1,13 @@
-import type { ReactNode } from 'react';
 import type { FunctionComponent } from '@/common/types';
-import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
+import type { ReactNode } from 'react';
 import BackButton from './Breadcrumbs/BackButton';
+import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 
 interface LayoutProps {
   title?: string;
   subtitle?: string;
   enableBreadcrumbs?: boolean;
+  enableBackButton?: boolean;
   breadcrumbs?: ReactNode;
   backButton?: ReactNode;
   actions?: ReactNode;
@@ -21,6 +22,7 @@ const Layout = ({
   breadcrumbs,
   children,
   enableBreadcrumbs = true,
+  enableBackButton,
 }: LayoutProps): FunctionComponent => {
   return (
     <>
@@ -29,6 +31,7 @@ const Layout = ({
           {enableBreadcrumbs && (breadcrumbs || <Breadcrumbs />)}
           <h1 className='flex flex-row items-center gap-3 text-3xl font-bold tracking-tight text-gray-900'>
             {enableBreadcrumbs && (backButton || <BackButton />)}
+            {enableBackButton && (backButton || <BackButton />)}
             {title}
           </h1>
           {subtitle ?? <h3 className='text-lg font-light'>{subtitle}</h3>}

web/src/features/forms/components/Dashboard/Dashboard.tsx

@@ -6,7 +6,7 @@ import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumn
 import { QueryParamsDataTable } from '@/components/ui/DataTable/QueryParamsDataTable';
 import { useConfirm } from '@/components/ui/alert-dialog-provider';
 import { Badge } from '@/components/ui/badge';
-import { buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   DropdownMenu,
@@ -31,17 +31,17 @@ import {
   EllipsisVerticalIcon,
   FunnelIcon,
   PhotoIcon,
+  PlusIcon,
 } from '@heroicons/react/24/outline';
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate, useRouter } from '@tanstack/react-router';
+import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
 import { useDebounce } from '@uidotdev/usehooks';
 import { format } from 'date-fns';
 import { useMemo, useState, type ReactElement } from 'react';
 import { FormBase, FormStatus } from '../../models/form';
 import { formsKeys, useForms } from '../../queries';
 import AddTranslationsDialog, { useAddTranslationsDialog } from './AddTranslationsDialog';
-import CreateForm from './CreateForm';
 import { FormFilters } from './FormFilters/FormFilters';
 import EditFormAccessDialog, { useEditFormAccessDialog } from './EditFormAccessDialog';
 import { useElectionRoundDetails } from '@/features/election-event/hooks/election-event-hooks';
@@ -725,9 +725,12 @@ export default function FormsDashboard(): ReactElement {
             {i18n.t('electionEvent.observerForms.cardTitle')}
           </div>
           <div>
-            <CreateDialog title={i18n.t('electionEvent.observerForms.createDialogTitle')}>
-              <CreateForm />
-            </CreateDialog>
+            <Link to='/forms/new'>
+              <Button title='Create form' variant='default'>
+                <PlusIcon className='w-5 h-5 mr-2 -ml-1.5' />
+                <span>Create form</span>
+              </Button>
+            </Link>
           </div>
         </CardTitle>
         <Separator />

web/src/features/forms/components/EditForm/EditForm.tsx

@@ -1,4 +1,4 @@
-import { QuestionType, ZFormType, type FunctionComponent } from '@/common/types';
+import { QuestionType, ZFormType } from '@/common/types';
 import FormQuestionsEditor from '@/components/questionsEditor/FormQuestionsEditor';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Form } from '@/components/ui/form';
@@ -25,17 +25,12 @@ import { Button, buttonVariants } from '@/components/ui/button';
 import { LanguageBadge } from '@/components/ui/language-badge';
 import { toast } from '@/components/ui/use-toast';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
-import {
-  cn,
-  ensureTranslatedStringCorrectness,
-  isNilOrWhitespace,
-  isNotNilOrWhitespace
-} from '@/lib/utils';
+import { cn, ensureTranslatedStringCorrectness, isNilOrWhitespace, isNotNilOrWhitespace } from '@/lib/utils';
 import { queryClient } from '@/main';
 import { Route } from '@/routes/forms_.$formId.edit';
 import { useMutation } from '@tanstack/react-query';
 import { useBlocker, useNavigate, useRouter } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { UpdateFormRequest } from '../../models/form';
 import { formDetailsQueryOptions, formsKeys } from '../../queries';
 import {
@@ -49,7 +44,6 @@ import {
   ZEditQuestionType,
   ZTranslatedString,
 } from '../../types';
-import { FormDetailsBreadcrumbs } from '../FormDetailsBreadcrumbs/FormDetailsBreadcrumbs';
 import EditFormDetails from './EditFormDetails';
 
 export const ZEditFormType = z
@@ -215,7 +209,11 @@ export const ZEditFormType = z
 
 export type EditFormType = z.infer<typeof ZEditFormType>;
 
-export default function EditForm(): FunctionComponent {
+interface EditFormProps {
+  currentTab?: string;
+}
+
+const EditForm: FC<EditFormProps> = ({ currentTab }) => {
   const { formId } = Route.useParams();
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: formData } = useSuspenseQuery(formDetailsQueryOptions(currentElectionRoundId, formId));
@@ -383,7 +381,7 @@ export default function EditForm(): FunctionComponent {
       description: ensureTranslatedStringCorrectness(formData.description, formData.languages),
       formType: formData.formType,
       questions: editQuestions,
-      icon: formData.icon ?? ''
+      icon: formData.icon ?? '',
     },
     mode: 'all',
   });
@@ -423,7 +421,7 @@ export default function EditForm(): FunctionComponent {
       });
     },
 
-    onSuccess: async (_, { shouldExitEditor,electionRoundId }) => {
+    onSuccess: async (_, { shouldExitEditor, electionRoundId }) => {
       toast({
         title: 'Success',
         description: 'Form updated successfully',
@@ -474,14 +472,21 @@ export default function EditForm(): FunctionComponent {
     }
   }, [form.formState.isSubmitSuccessful, form.reset]);
 
+  const [activeTab, setActiveTab] = useState(currentTab ?? 'form-details');
+
   return (
     <Layout
+      enableBackButton
       backButton={<NavigateBack to='/election-event/$tab' params={{ tab: 'observer-forms' }} />}
-      breadcrumbs={<FormDetailsBreadcrumbs formCode={code} formName={name[languageCode] ?? ''} />}
+      enableBreadcrumbs={false}
       title={`${code} - ${name[languageCode]}`}>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(saveForm)} className='flex flex-col flex-1'>
-          <Tabs className='flex flex-col flex-1' defaultValue='form-details'>
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className='flex flex-col flex-1'
+            defaultValue='form-details'>
             <TabsList className='grid grid-cols-2 bg-gray-200 w-[400px] mb-4'>
               <TabsTrigger
                 value='form-details'
@@ -556,4 +561,6 @@ export default function EditForm(): FunctionComponent {
       </Form>
     </Layout>
   );
-}
+};
+
+export default EditForm;

web/src/features/forms/components/FormBuilder/components/CreateFormPage.tsx

@@ -0,0 +1,204 @@
+import { authApi } from '@/common/auth-api';
+import { ZFormType } from '@/common/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import LanguageSelect from '@/containers/LanguageSelect';
+import { useCurrentElectionRoundStore } from '@/context/election-round.store';
+import { useElectionRoundDetails } from '@/features/election-event/hooks/election-event-hooks';
+import { FormBase, NewFormRequest } from '@/features/forms/models/form';
+import { formsKeys } from '@/features/forms/queries';
+import { cn, mapFormType, newTranslatedString } from '@/lib/utils';
+import { queryClient } from '@/main';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+export const CreateFormPage: FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
+  const { data: electionRound } = useElectionRoundDetails(currentElectionRoundId);
+
+  const newFormFormSchema = z.object({
+    code: z.string().nonempty('Form code is required'),
+    name: z.string().nonempty('Form name is required'),
+    description: z.string().optional(),
+    defaultLanguage: z.string().nonempty(),
+    formType: ZFormType.catch(ZFormType.Values.Opening),
+  });
+
+  const form = useForm<z.infer<typeof newFormFormSchema>>({
+    resolver: zodResolver(newFormFormSchema),
+  });
+
+  function onSubmit(values: z.infer<typeof newFormFormSchema>) {
+    const name = newTranslatedString([values.defaultLanguage], values.defaultLanguage, values.name);
+    const description = newTranslatedString([values.defaultLanguage], values.defaultLanguage, values.description ?? '');
+
+    const newForm: NewFormRequest = {
+      ...values,
+      description,
+      name,
+      languages: [values.defaultLanguage],
+    };
+
+    newFormMutation.mutate({ electionRoundId: currentElectionRoundId, newForm });
+  }
+
+  const newFormMutation = useMutation({
+    mutationFn: ({ electionRoundId, newForm }: { electionRoundId: string; newForm: NewFormRequest }) => {
+      return authApi.post<FormBase>(`/election-rounds/${electionRoundId}/forms`, newForm);
+    },
+
+    onSuccess: ({ data: form }) => {
+      queryClient.invalidateQueries({ queryKey: formsKeys.all(currentElectionRoundId) });
+      navigate({ to: `/forms/$formId/edit`, params: { formId: form.id }, search: { tab: 'questions' } });
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Tabs className='flex flex-col flex-1' defaultValue='form-details'>
+          <TabsList className='grid grid-cols-2 bg-gray-200 w-[400px] mb-4'>
+            <TabsTrigger
+              value='form-details'
+              className={cn({
+                'border-b-4 border-red-400': form.getFieldState('name').invalid || form.getFieldState('code').invalid,
+              })}>
+              Form details
+            </TabsTrigger>
+            <TabsTrigger value='questions' disabled>
+              Questions
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value='form-details'>
+            <Card className='pt-0'>
+              <CardHeader className='flex gap-2 flex-column'>
+                <div className='flex flex-row items-center justify-between'>
+                  <CardTitle className='text-xl'>Form details</CardTitle>
+                </div>
+                <Separator />
+              </CardHeader>
+              <CardContent className='flex flex-col items-baseline gap-6'>
+                <div className='md:inline-flex md:space-x-6 w-full'>
+                  <div className='space-y-4 md:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='name'
+                      render={({ field, fieldState }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.field.name')}</FormLabel>
+                          <Input placeholder={t('form.placeholder.name')} {...field} {...fieldState} />
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='code'
+                      render={({ field, fieldState }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.field.code')}</FormLabel>
+                          <Input placeholder={t('form.placeholder.code')} {...field} {...fieldState} />
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='formType'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.field.formType')}</FormLabel>
+                          <Select onValueChange={field.onChange} defaultValue={field.value}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder='Select a form type' />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value={ZFormType.Values.Opening}>
+                                {mapFormType(ZFormType.Values.Opening)}
+                              </SelectItem>
+                              <SelectItem value={ZFormType.Values.Voting}>
+                                {mapFormType(ZFormType.Values.Voting)}
+                              </SelectItem>
+                              <SelectItem value={ZFormType.Values.ClosingAndCounting}>
+                                {mapFormType(ZFormType.Values.ClosingAndCounting)}
+                              </SelectItem>
+                              {electionRound?.isMonitoringNgoForCitizenReporting && (
+                                <SelectItem value={ZFormType.Values.CitizenReporting}>
+                                  {mapFormType(ZFormType.Values.CitizenReporting)}
+                                </SelectItem>
+                              )}
+                              <SelectItem value={ZFormType.Values.IncidentReporting}>
+                                {mapFormType(ZFormType.Values.IncidentReporting)}
+                              </SelectItem>
+                              <SelectItem value={ZFormType.Values.Other}>
+                                {mapFormType(ZFormType.Values.Other)}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='defaultLanguage'
+                      render={({ field, fieldState }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.field.defaultLanguage')}</FormLabel>
+                          <LanguageSelect languageCode={field.value} onLanguageSelected={field.onChange} />
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <div className='md:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='description'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.field.description')}</FormLabel>
+                          <Textarea
+                            resizable={false}
+                            rows={10}
+                            cols={100}
+                            {...field}
+                            placeholder={t('form.placeholder.description')}
+                          />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+        <footer className='fixed left-0 bottom-0 h-[64px] w-full bg-white'>
+          <div className='container flex items-center justify-end h-full gap-4'>
+            <Button title='Next' type='submit' variant='default' disabled={!form.formState.isValid}>
+              Next
+            </Button>
+          </div>
+        </footer>
+      </form>
+    </Form>
+  );
+};