UserTasks (AppSDK)

'use server';
 
import { getEngineClient } from '@5minds/processcube_app_sdk/server';
 
function engine() {
  return getEngineClient();
}
 
export async function fetchWaitingUserTasks() {
  const result = await engine().userTasks.query({
    state: 'suspended' as any,
  });
  return result?.userTasks ?? [];
}
 
export async function fetchUserTaskById(flowNodeInstanceId: string) {
  const tasks = await fetchWaitingUserTasks();
  return tasks.find((t: any) => t.flowNodeInstanceId === flowNodeInstanceId) ?? null;
}
 
export async function completeUserTask(
  flowNodeInstanceId: string,
  userTaskResult: Record<string, any>
) {
  await engine().userTasks.finishUserTask(flowNodeInstanceId, userTaskResult as any);
}
 
export async function startSampleProcess() {
  await engine().processModels.startProcessInstance({
    processModelId: 'SampleWithAppSDK_Process',
    startEventId: 'StartEvent_1',
    initialToken: {},
  });
}

'use client';
 
import { useEffect, useState, useCallback } from 'react';
import { fetchWaitingUserTasks } from './actions';
 
export default function Home() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
 
  const loadTasks = useCallback(async () => {
    try {
      const result = await fetchWaitingUserTasks();
      setTasks(result);
    } catch {}
  }, []);
 
  // Polling alle 3 Sekunden
  useEffect(() => {
    let active = true;
    async function poll() {
      while (active) {
        await loadTasks();
        await new Promise((r) => setTimeout(r, 3000));
      }
    }
    poll();
    return () => { active = false; };
  }, [loadTasks]);
 
  // ...
}

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  if (!selectedTask) return;
 
  const formData = new FormData(e.currentTarget);
  const result: Record<string, any> = {};
 
  for (const field of selectedTask.userTaskConfig?.formFields ?? []) {
    result[field.id] = formData.get(field.id) ?? '';
  }
 
  await completeUserTask(selectedTask.flowNodeInstanceId, result);
  handleBack();
  await loadTasks();
}
 
// Rendering
<form onSubmit={handleSubmit}>
  {formFields.map((field: any) => (
    <div key={field.id} className="form-group">
      <label htmlFor={field.id} className="form-label">
        {field.label}
      </label>
      <input
        id={field.id}
        name={field.id}
        type="text"
        defaultValue={field.defaultValue ?? ''}
        className="form-input"
      />
    </div>
  ))}
  <button type="submit" className="btn btn-primary">
    Abschliessen
  </button>
</form>

import { fetchWaitingUserTasks, completeUserTask } from '../../actions';
 
export const dynamic = 'force-dynamic';
 
export default async function UserTaskPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const userTasks = await fetchWaitingUserTasks();
  const task = userTasks.find(
    (t: any) => t.flowNodeInstanceId === id
  );
 
  if (!task) {
    return (
      <main>
        <h1>Task nicht gefunden</h1>
        <a href="/tasks">Zurueck zur Uebersicht</a>
      </main>
    );
  }
 
  const formFields = task.userTaskConfig?.formFields ?? [];
 
  async function submitTask(formData: FormData) {
    'use server';
    const result: Record<string, any> = {};
    for (const field of formFields) {
      result[field.id] = formData.get(field.id) ?? '';
    }
    await completeUserTask(id, result);
  }
 
  return (
    <main>
      <h1>{task.flowNodeName}</h1>
      <p>{task.processModelId}</p>
      <form action={submitTask}>
        {formFields.map((field: any) => (
          <div key={field.id}>
            <label htmlFor={field.id}>{field.label}</label>
            <input
              id={field.id}
              name={field.id}
              type="text"
              defaultValue={field.defaultValue ?? ''}
            />
          </div>
        ))}
        <button type="submit">Abschliessen</button>
      </form>
    </main>
  );
}