update to work with new backend

Tschonti · Gerviba · commit 713169d3867d · 2024-07-11T00:33:59.000+02:00
diff --git a/frontend/src/pages/form/components/GridField.tsx b/frontend/src/pages/form/components/GridField.tsx
@@ -1,4 +1,4 @@
-import { Grid, GridItem } from '@chakra-ui/react'
+import { Grid, GridItem, Input } from '@chakra-ui/react'
 import { FormField, GridFieldValues } from '../../../util/views/form.view'
 import { Fragment, useEffect } from 'react'
 import { GridFieldItem } from './GridFieldItem'
@@ -9,21 +9,30 @@ type Props = {
   field: FormField
   choice: boolean
   disabled: boolean
+  dirty: boolean
 }
 
-export function GridField({ field, choice, disabled }: Props) {
+export function GridField({ field, choice, disabled, dirty }: Props) {
   try {
     const format: GridFieldValues = JSON.parse(field.values)
     if (!isValidGridField(format)) {
       throw new Error('Invalid form format')
     }
-    const { setValue } = useFormContext()
+    const { setValue, watch, register } = useFormContext()
 
     useEffect(() => {
-      if (choice) {
-        format.questions.forEach((q) => {
-          setValue(`${format.prefix}${field.fieldName}${q.key}`, format.options[0].key)
-        })
+      if (!dirty) {
+        if (choice) {
+          format.questions.forEach((q) => {
+            setValue(field.fieldName, { ...watch(field.fieldName), [q.key]: format.options[0].key })
+          })
+        } else {
+          format.questions.forEach((q) => {
+            format.options.forEach((o) => {
+              setValue(field.fieldName, { ...watch(field.fieldName), [`${q.key}_${o.key}`]: false })
+            })
+          })
+        }
       }
     }, [])
     return (
@@ -34,6 +43,7 @@ export function GridField({ field, choice, disabled }: Props) {
         templateColumns={`repeat(${format.options.length + 1}, 1fr)`}
         gap={2}
       >
+        <Input {...register(field.fieldName)} disabled hidden />
         <GridItem />
         {format.options.map((opt) => (
           <GridItem key={opt.key}>{opt.label}</GridItem>
@@ -44,13 +54,7 @@ export function GridField({ field, choice, disabled }: Props) {
             <GridItem>{q.label}</GridItem>
             {format.options.map((o) => (
               <GridItem key={o.key}>
-                <GridFieldItem
-                  radio={choice}
-                  disabled={disabled}
-                  questionKey={q.key}
-                  optionKey={o.key}
-                  fieldName={format.prefix + field.fieldName}
-                />
+                <GridFieldItem radio={choice} disabled={disabled} questionKey={q.key} optionKey={o.key} fieldName={field.fieldName} />
               </GridItem>
             ))}
           </Fragment>
@@ -65,7 +69,6 @@ export function GridField({ field, choice, disabled }: Props) {
 
 function isValidGridField(metadata: any): metadata is GridFieldValues {
   return (
-    typeof metadata.prefix === 'string' &&
     Array.isArray(metadata.questions) &&
     Array.isArray(metadata.options) &&
     ![...metadata.questions, ...metadata.options].some((v) => !v.label || !v.key)
diff --git a/frontend/src/pages/form/components/GridFieldItem.tsx b/frontend/src/pages/form/components/GridFieldItem.tsx
@@ -11,31 +11,19 @@ type Props = {
 }
 
 export function GridFieldItem({ questionKey, optionKey, fieldName, disabled, radio }: Props) {
-  const { register, setValue, watch } = useFormContext()
+  const { setValue, watch } = useFormContext()
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (radio) {
-      setValue(`${fieldName}${questionKey}`, optionKey)
+      setValue(fieldName, { ...watch(fieldName), [questionKey]: optionKey })
     } else {
-      setValue(`${fieldName}${questionKey}${optionKey}`, `${e.target.checked}`)
+      setValue(fieldName, { ...watch(fieldName), [`${questionKey}_${optionKey}`]: e.target.checked })
     }
   }
 
   return radio ? (
-    <Radio
-      {...register(`${fieldName}${questionKey}`)}
-      isChecked={watch(`${fieldName}${questionKey}`) === optionKey}
-      onChange={onChange}
-      colorScheme="brand"
-      isDisabled={disabled}
-    />
+    <Radio isChecked={watch(fieldName)[questionKey] === optionKey} onChange={onChange} colorScheme="brand" isDisabled={disabled} />
   ) : (
-    <Checkbox
-      {...register(`${fieldName}${questionKey}${optionKey}`)}
-      isChecked={`${watch(`${fieldName}${questionKey}${optionKey}`)}` === 'true'}
-      onChange={onChange}
-      colorScheme="brand"
-      isDisabled={disabled}
-    />
+    <Checkbox isChecked={watch(fieldName)[`${questionKey}_${optionKey}`]} onChange={onChange} colorScheme="brand" isDisabled={disabled} />
   )
 }
diff --git a/frontend/src/pages/form/components/autoFormField.tsx b/frontend/src/pages/form/components/autoFormField.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { Control, useController } from 'react-hook-form'
 import Markdown from '../../../common-components/Markdown'
 import { VotingField } from '../../../common-components/VotingField'
-import { isCheckbox } from '../../../util/core-functions.util'
+import { isCheckbox, isGridField } from '../../../util/core-functions.util'
 import { FormField, FormFieldVariants, VotingFieldOption } from '../../../util/views/form.view'
 import { GridField } from './GridField'
 
@@ -19,7 +19,9 @@ export const AutoFormField = ({ fieldProps, control, disabled, submittedValue }:
   let defaultValue = isCheckbox(fieldProps.type) ? fieldProps.defaultValue === 'true' : fieldProps.defaultValue
 
   if (submittedValue) {
-    defaultValue = isCheckbox(fieldProps.type) ? submittedValue === 'true' : submittedValue
+    if (isCheckbox(fieldProps.type)) defaultValue = submittedValue === 'true'
+    else if (isGridField(fieldProps.type)) defaultValue = JSON.parse(submittedValue)
+    else defaultValue = submittedValue
   } else if (!defaultValue) {
     if (fieldProps.type === FormFieldVariants.SELECT) defaultValue = selectValues[0]
     else defaultValue = ''
@@ -123,7 +125,14 @@ export const AutoFormField = ({ fieldProps, control, disabled, submittedValue }:
       break
     case FormFieldVariants.SELECTION_GRID:
     case FormFieldVariants.CHOICE_GRID:
-      component = <GridField disabled={disabled} field={fieldProps} choice={fieldProps.type === FormFieldVariants.CHOICE_GRID} />
+      component = (
+        <GridField
+          disabled={disabled}
+          field={fieldProps}
+          dirty={!!submittedValue}
+          choice={fieldProps.type === FormFieldVariants.CHOICE_GRID}
+        />
+      )
       break
   }
   return (
diff --git a/frontend/src/pages/form/form.page.tsx b/frontend/src/pages/form/form.page.tsx
@@ -15,14 +15,14 @@ import { CmschPage } from '../../common-components/layout/CmschPage'
 import Markdown from '../../common-components/Markdown'
 import { PageStatus } from '../../common-components/PageStatus'
 import { CookieKeys } from '../../util/configs/cookies.config'
-import { isCheckbox } from '../../util/core-functions.util'
+import { isCheckbox, isGridField } from '../../util/core-functions.util'
 import { l } from '../../util/language'
 import { AbsolutePaths } from '../../util/paths'
 import { FormFieldVariants, FormStatus, FormSubmitMessage, FormSubmitResult } from '../../util/views/form.view'
 import { AutoFormField } from './components/autoFormField'
 import { FormStatusBadge } from './components/formStatusBadge'
 
-interface FormPageProps {}
+interface FormPageProps { }
 
 const FormPage: FunctionComponent<FormPageProps> = () => {
   const toast = useToast()
@@ -50,15 +50,15 @@ const FormPage: FunctionComponent<FormPageProps> = () => {
   const { form, submission, message, status, detailsValidated } = data
   const available = form && form.availableFrom * 1000 < Date.now() && form.availableUntil * 1000 > Date.now() && !detailsValidated
 
-  const onSubmit = (values: Record<string, string>) => {
-    form?.formFields
-      .filter(({ type }) => type === FormFieldVariants.CHOICE_GRID || type === FormFieldVariants.SELECTION_GRID)
-      .forEach(({ fieldName }) => {
-        delete values[fieldName]
-      })
+  const onSubmit = (values: Record<string, any>) => {
     const newValues: Record<string, string> = {}
     Object.keys(values).forEach((v) => {
-      newValues[v] = values[v].toString()
+      const formField = form?.formFields.find((ff) => ff.fieldName === v)
+      if (isGridField(formField?.type)) {
+        newValues[v] = JSON.stringify(values[v])
+      } else {
+        newValues[v] = values[v]
+      }
     })
     if (available) {
       submit(newValues, status !== FormStatus.NO_SUBMISSION)
diff --git a/frontend/src/util/core-functions.util.ts b/frontend/src/util/core-functions.util.ts
@@ -71,6 +71,10 @@ export function isCheckbox(type: FormFieldVariants) {
   return type === FormFieldVariants.CHECKBOX || type === FormFieldVariants.MUST_AGREE
 }
 
+export function isGridField(type?: FormFieldVariants | undefined) {
+  return type === FormFieldVariants.CHOICE_GRID || type === FormFieldVariants.SELECTION_GRID
+}
+
 export function getCdnUrl(path: string) {
   return joinPath(API_BASE_URL, 'cdn', path)
 }
diff --git a/frontend/src/util/views/form.view.ts b/frontend/src/util/views/form.view.ts
@@ -30,7 +30,6 @@ export type FormField = {
 }
 
 export type GridFieldValues = {
-  prefix: string
   options: {
     key: string
     label: string

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,10 @@ export function isCheckbox(type: FormFieldVariants) {`
`71`	`71`	`return type === FormFieldVariants.CHECKBOX \|\| type === FormFieldVariants.MUST_AGREE`
`72`	`72`	`}`
`73`	`73`
	`74`	`+export function isGridField(type?: FormFieldVariants \| undefined) {`
	`75`	`+ return type === FormFieldVariants.CHOICE_GRID \|\| type === FormFieldVariants.SELECTION_GRID`
	`76`	`+}`
	`77`	`+`
`74`	`78`	`export function getCdnUrl(path: string) {`
`75`	`79`	`return joinPath(API_BASE_URL, 'cdn', path)`
`76`	`80`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@ export type FormField = {`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`export type GridFieldValues = {`
`33`		`- prefix: string`
`34`	`33`	`options: {`
`35`	`34`	`key: string`
`36`	`35`	`label: string`