Change steps when viewing a process instance model (#18)

spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py

@@ -112,6 +112,7 @@ class ProcessInstanceModel(SpiffworkflowBaseDBModel):
             "end_in_seconds": self.end_in_seconds,
             "process_initiator_id": self.process_initiator_id,
             "bpmn_xml_file_contents": local_bpmn_xml_file_contents,
+            "spiff_step": self.spiff_step,
         }
 
     @property

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -96,6 +96,62 @@ export default function ProcessInstanceShow() {
     return taskIds;
   };
 
+  const currentSpiffStep = (processInstanceToUse: any) => {
+    if (typeof params.spiff_step === 'undefined') {
+      return processInstanceToUse.spiff_step;
+    }
+
+    return Number(params.spiff_step);
+  };
+
+  const showingFirstSpiffStep = (processInstanceToUse: any) => {
+    return currentSpiffStep(processInstanceToUse) === 1;
+  };
+
+  const showingLastSpiffStep = (processInstanceToUse: any) => {
+    return (
+      currentSpiffStep(processInstanceToUse) === processInstanceToUse.spiff_step
+    );
+  };
+
+  const spiffStepLink = (
+    processInstanceToUse: any,
+    label: string,
+    distance: number
+  ) => {
+    return (
+      <li>
+        <Link
+          reloadDocument
+          data-qa="process-instance-step-link"
+          to={`/admin/process-models/${params.process_group_id}/${
+            params.process_model_id
+          }/process-instances/${params.process_instance_id}/${
+            currentSpiffStep(processInstanceToUse) + distance
+          }`}
+        >
+          {label}
+        </Link>
+      </li>
+    );
+  };
+
+  const previousStepLink = (processInstanceToUse: any) => {
+    if (showingFirstSpiffStep(processInstanceToUse)) {
+      return null;
+    }
+
+    return spiffStepLink(processInstanceToUse, 'Previous Step', -1);
+  };
+
+  const nextStepLink = (processInstanceToUse: any) => {
+    if (showingLastSpiffStep(processInstanceToUse)) {
+      return null;
+    }
+
+    return spiffStepLink(processInstanceToUse, 'Next Step', 1);
+  };
+
   const getInfoTag = (processInstanceToUse: any) => {
     const currentEndDate = convertSecondsToFormattedDate(
       processInstanceToUse.end_in_seconds
@@ -135,6 +191,12 @@ export default function ProcessInstanceShow() {
             Messages
           </Link>
         </li>
+        <li>
+          Step {currentSpiffStep(processInstanceToUse)} of{' '}
+          {processInstanceToUse.spiff_step}
+        </li>
+        {previousStepLink(processInstanceToUse)}
+        {nextStepLink(processInstanceToUse)}
       </ul>
     );
   };
@@ -234,7 +296,9 @@ export default function ProcessInstanceShow() {
   };
 
   const canEditTaskData = (task: any) => {
-    return task.state === 'READY';
+    return (
+      task.state === 'READY' && showingLastSpiffStep(processInstance as any)
+    );
   };
 
   const cancelEditingTaskData = () => {