Commit 59bc6785 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: add workflow form page navigation

parent 39bc0647
Pipeline #289398 passed with stages
in 10 minutes and 52 seconds
......@@ -22,6 +22,7 @@ import type { ItemFormFields } from '@/components/item-form/useItemFormFields'
import { useWorkflowFormFields } from '@/components/item-form/useWorkflowFormFields'
import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
import { useWorkflowStepFormFields } from '@/components/item-form/useWorkflowStepFormFields'
import { WorkflowFormNavigation } from '@/components/item-form/WorkflowFormNavigation'
import { WorkflowStepPreview } from '@/components/item-form/WorkflowStepPreview'
import { WorkflowTitle } from '@/components/item-form/WorkflowTitle'
import type { Workflow, WorkflowInput } from '@/data/sshoc/api/workflow'
......@@ -74,6 +75,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
) {
switch (page.type) {
case 'workflow':
delete values['__draft__']
delete values['__submitting__']
done?.()
setPage({ type: 'steps' })
......@@ -82,6 +84,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
onSubmit(values, form, done)
break
case 'step':
delete values['__draft__']
delete values['__submitting__']
done?.()
setPage({ type: 'steps' })
......@@ -107,6 +110,7 @@ export function WorkflowForm(props: WorkflowFormProps): JSX.Element {
return (
<Form initialValues={initialValues} name={name} onSubmit={onSubmitPage} validate={_validate}>
<WorkflowFormNavigation onBeforeSubmit={onBeforeSubmit} page={page} setPage={setPage} />
{page.type === 'workflow' ? (
<WorkflowFormSections onBeforeSubmit={onBeforeSubmit} onCancel={onCancel} />
) : null}
......@@ -275,9 +279,9 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
const { index, onCancel } = props
const { t } = useI18n<'authenticated' | 'common'>()
const name = `composedOf[${index}]`
const form = useForm<WorkflowFormValues>()
const formFields = useWorkflowStepFormFields(name)
const name = `composedOf[${index}]`
const formFields = useWorkflowStepFormFields(name + '.')
function onBeforeSubmit() {
props.onBeforeSubmit?.(form)
......
.container {
display: flex;
gap: var(--space-12);
align-items: center;
justify-content: flex-end;
margin-block-end: var(--space-8);
& button .link {
display: flex;
gap: var(--space-3);
align-items: center;
& .circle {
display: flex;
align-items: center;
justify-content: center;
width: var(--size-8);
height: var(--size-8);
border: 1px solid var(--color-primary-600);
border-radius: 100%;
background-color: var(--color-neutral-50);
color: var(--color-primary-600);
transition-timing-function: var(--transition-timing-function);
transition-duration: var(--transition-duration);
transition-property: var(--transition-property);
}
&:hover .circle {
background-color: var(--color-primary-600);
color: var(--color-neutral-0);
}
}
& button:disabled .link .circle {
background-color: var(--color-primary-600);
color: var(--color-neutral-0);
}
}
import type { FormApi } from 'final-form'
import { Fragment } from 'react'
import { useForm } from 'react-final-form'
import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
import type { WorkflowFormValues } from '@/components/item-form/WorkflowForm'
import css from '@/components/item-form/WorkflowFormNavigation.module.css'
import { FormButtonLink } from '@/lib/core/form/FormButtonLink'
import { useI18n } from '@/lib/core/i18n/useI18n'
export interface WorkflowFormNavigationProps {
onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
page: WorkflowFormPage
setPage: (page: WorkflowFormPage) => void
}
export function WorkflowFormNavigation(props: WorkflowFormNavigationProps): JSX.Element {
const { page, setPage } = props
const { t } = useI18n<'authenticated' | 'common'>()
const form = useForm<WorkflowFormValues>()
if (page.type === 'step') {
return <Fragment />
}
function onBeforeSubmit() {
props.onBeforeSubmit?.(form)
}
function onNavigateBackToWorkflow() {
setPage({ type: 'workflow' })
}
return (
<nav
aria-label={t(['authenticated', 'forms', 'workflow-form-page-navigation'])}
className={css['container']}
>
<FormButtonLink isDisabled={page.type === 'workflow'} onPress={onNavigateBackToWorkflow}>
<div className={css['link']}>
<span aria-hidden className={css['circle']}>
1
</span>
{t(['common', 'item-categories', 'workflow', 'one'])}
</div>
</FormButtonLink>
<FormButtonLink isDisabled={page.type === 'steps'} onPress={onBeforeSubmit} type="submit">
<div className={css['link']}>
<span aria-hidden className={css['circle']}>
2
</span>
{t(['common', 'item-categories', 'step', 'other'])}
</div>
</FormButtonLink>
</nav>
)
}
......@@ -24,6 +24,7 @@ import type { ItemFormFields } from '@/components/item-form/useItemFormFields'
import { useWorkflowFormFields } from '@/components/item-form/useWorkflowFormFields'
import type { WorkflowFormPage } from '@/components/item-form/useWorkflowFormPage'
import { useWorkflowStepFormFields } from '@/components/item-form/useWorkflowStepFormFields'
import { WorkflowFormNavigation } from '@/components/item-form/WorkflowFormNavigation'
import { WorkflowStepPreview } from '@/components/item-form/WorkflowStepPreview'
import { WorkflowTitle } from '@/components/item-form/WorkflowTitle'
import type { ItemsDiff } from '@/data/sshoc/api/item'
......@@ -117,8 +118,9 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
validate={_validate}
>
<ReviewFormMetadata diff={diff}>
<WorkflowFormNavigation onBeforeSubmit={onBeforeSubmit} page={page} setPage={setPage} />
{page.type === 'workflow' ? (
<WorkflowFormSections onCancel={onCancel} onBeforeSubmit={onBeforeSubmit} />
<WorkflowFormSections onBeforeSubmit={onBeforeSubmit} onCancel={onCancel} />
) : null}
{page.type === 'steps' ? (
<FormSections>
......@@ -132,7 +134,11 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
</FormSections>
) : null}
{page.type === 'step' ? (
<WorkflowStepFormSections index={page.index} onCancel={onCancelStep} />
<WorkflowStepFormSections
index={page.index}
onBeforeSubmit={onBeforeSubmit}
onCancel={onCancelStep}
/>
) : null}
</ReviewFormMetadata>
</Form>
......@@ -140,8 +146,8 @@ export function WorkflowReviewForm(props: WorkflowReviewFormProps): JSX.Element
}
interface WorkflowFormSectionsProps {
onCancel: () => void
onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
onCancel: () => void
}
function WorkflowFormSections(props: WorkflowFormSectionsProps): JSX.Element {
......@@ -275,6 +281,7 @@ function WorkflowStepsFormSection(props: WorkflowStepsFormSectionProps): JSX.Ele
interface WorkflowStepFormSectionsProps {
index: number
onBeforeSubmit?: (form: FormApi<WorkflowFormValues>) => void
onCancel: () => void
}
......@@ -282,8 +289,13 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
const { index, onCancel } = props
const { t } = useI18n<'authenticated' | 'common'>()
const form = useForm<WorkflowFormValues>()
const name = `composedOf[${index}]`
const formFields = useWorkflowStepFormFields(name)
const formFields = useWorkflowStepFormFields(name + '.')
function onBeforeSubmit() {
props.onBeforeSubmit?.(form)
}
return (
<FormSections>
......@@ -296,7 +308,9 @@ function WorkflowStepFormSections(props: WorkflowStepFormSectionsProps): JSX.Ele
<FormButtonLink onPress={onCancel}>
{t(['authenticated', 'controls', 'cancel'])}
</FormButtonLink>
<FormButton type="submit">{t(['authenticated', 'controls', 'save'])}</FormButton>
<FormButton onPress={onBeforeSubmit} type="submit">
{t(['authenticated', 'controls', 'save'])}
</FormButton>
</FormControls>
</FormSections>
)
......
.workflow-title {
margin-block-end: var(--space-4);
color: var(--color-heading);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-7);
......
......@@ -65,6 +65,7 @@ export const dictionary: Dictionary = {
'add-workflow-step': 'Add step',
'edit-workflow-step': 'Edit step {{position}}',
'remove-workflow-step': 'Remove step {{position}}',
'workflow-form-page-navigation': 'Navigate between workflow details and workflow steps',
},
fields: {
label: {
......
......@@ -82,6 +82,7 @@ export interface Dictionary {
'add-workflow-step': string
'edit-workflow-step': string
'remove-workflow-step': string
'workflow-form-page-navigation': string
}
fields: {
label: Field
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment