components.form.task.window.TaskForm.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation
GEARS Frontend
There is a newer version: 0.80.3
import Fallback from 'components/common/Fallback';
import TaskSubmit from 'components/form/task/TaskSubmit';
import TaskFields from 'components/form/task/window/TaskFields';
import TaskSave from 'components/form/task/window/TaskSave';
import { embeddedBasedOn } from 'components/form/task/window/TaskWindow';
import { focusOnField } from 'components/form/utils/field-utils';
import { getFocusPathFromValues } from 'components/form/utils/input-utils';
import { setStepIconTabIndices } from 'components/form/utils/task-utils';
import { RenderValue } from 'components/render';
import { usePagePanelContext, useWindowPageContext } from 'components/wm';
import RenderContextProvider from 'contexts/RenderContext';
import ValuesProvider from 'contexts/ValuesContext';
import { Form as FormikForm, Formik } from 'formik';
import { useFormInfo } from 'hooks/form';
import { FormikFormInfo, FormikType } from 'hooks/submit';
import { useValues } from 'hooks/values';
import { useEffect, useMemo, useRef } from 'react';
import Types from 'types/types';
import { isEmptyValue } from 'utils/utils';

import { Box } from '@mui/material';

type TaskFormProps = {
  onSubmit: (values: any, formInfo: FormikFormInfo) => void 
}

/** This is a step with error handling */
function TaskForm(props: TaskFormProps) {
  return (
    
      
        
          
        
      
    
  )
}

/** Render the contents of a step */
const TaskFormContents = ({onSubmit}: TaskFormProps) => {
  const { values } = useValues()
  const formikRef  = useRef()
  const formInfo   = useFormInfo()

  // let the window manager know about formik
  const { ref } = useWindowPageContext()
  ref.current.data.formikRef = formikRef

  function handleSubmit(values: any) {
    const formik = formikRef.current
    onSubmit(values, {...formInfo, formik: formik! })
  }

  const autoFocus = async () => {
    const focusPath = getFocusPathFromValues(formInfo, values)
    if (focusPath) {
      console.log("Focus on path: %o", focusPath)
      focusOnField(focusPath)
    }
  }

  useEffect(() => {
    setStepIconTabIndices()
  },[])

  useEffect(() => {
    autoFocus()
  },[])

  // add the save button to the window pane
  const {setButtons} = usePagePanelContext()
  useEffect(() => { 
    if (!formInfo.isStartForm) {
      setButtons(buttons => {
        if (!buttons.find(button => button.id == "save")) {
          return [...buttons,
          {
            id: "save",
            component: 
          }
          ]
        } else return buttons
      })
    }
  }, [])

  return (
    <>
      
        
          
        
      
    
  )
}

const TaskBody = () => {
  const formInfo        = useFormInfo()
  const nonSubmitFields = useMemo(() => 
    formInfo.form.fields.filter(field => !Types.isSubmitField(formInfo, field)),
    [formInfo]
  )
  const submitFields    = useMemo(() => 
    formInfo.form.fields.filter(field => Types.isSubmitField(formInfo, field)),
    [formInfo]
  )

  return (
    
      
        
        
      
      
        
      
      
    
  )
}

const TaskBasedOn = () => {
  const formInfo  = useFormInfo()
  const basedOn   = formInfo.basedOn
  const embedded = useMemo(() => embeddedBasedOn(formInfo, basedOn), [formInfo])

  if (!embedded || isEmptyValue(basedOn))
    return null

  return (
    <>
      
        
          {basedOn} 
        
      
    
  )
}
 
export default TaskForm;