Case 1

Diagram BPMN

Step by Step

Asumsi menggunakan alurkerja-ui starter

Struktur Page

Rule: Folder structure untuk penamaan pages ./pages/{BPMN}/usertask/{Usertask}

Rule: Isi folder usertask terdapat file [Usertask].tsx dan index.tsx untuk export nya

Pada diagram BPMN bisa terdapat 3 usertask, setiap usertask paling minimal memiliki 1 halaman, artinya terdapat 3 page yaitu (TaskA, TaskB, TaskC). berikut hasilnya:

di setiap folder user task umumnya isi nya seperti ini

Struktur Route

Rule: Folder structure untuk penamaan routes ./routes/{BPMN}routes.tsx isinya semua routing untuk satu BPMN

Membuat Page

// pages/SimpleB/usertask/TaskA/TaskACreate.tsx
import { AlurkerjaForm } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'
import { useNavigate, useParams } from 'react-router-dom'

export const TaskACreate = () => {
  const { formState, handleSubmit, control, setValue } = useForm()
  const { id, task_id } = useParams()
  const navigate = useNavigate()

  return (
    <section className="bg-white p-6">
      {id && task_id && (
        <AlurkerjaForm
          id={id}
          isUsertask
          taskId={task_id}
          baseUrl={import.meta.env.VITE_API_BASEURL}
          specPath="/api/simple-b/task-a"
          formState={formState}
          handleSubmit={handleSubmit}
          control={control}
          setValue={setValue}
          onSuccess={() => navigate('/simple-b')}
        />
      )}
    </section>
  )
}

// pages/SimpleB/usertask/index.tsx
export * from './TaskA'

// pages/SimpleB/index.tsx
export * from './UserTask'

Membuat Route

import { Outlet, RouteObject } from 'react-router-dom'
import {
  TaskACreate,
} from '@/pages/SimpleB'
import { AdminLayout } from '@/layouts'

export const simpleBRoutes: RouteObject[] = [
  {
    path: 'simple-B',
    element: <AdminLayout />,
    children: [
      { index: true, element: <ListSimpleBPage /> },
      {
        path: 'task-a',
        element: <Outlet />,
        children: [{ path: ':id/task/:task_id', element: <TaskACreate /> }],
      },

    ],
  },
]

Ulangi