Pipeline UI/UX redesign: inline editing, flowchart, sidebar stepper
- Add InlineEditableText, EditableCard, SidebarStepper shared components - Add PipelineFlowchart (interactive SVG stage visualization) - Add StageConfigEditor and usePipelineInlineEdit hook - Redesign detail page: flowchart replaces nested tabs, inline editing - Redesign creation wizard: sidebar stepper replaces accordion sections - Enhance list page: status dots, track indicators, relative timestamps - Convert edit page to redirect (editing now inline on detail page) - Delete old WizardSection accordion component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
46
src/hooks/use-pipeline-inline-edit.ts
Normal file
46
src/hooks/use-pipeline-inline-edit.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function usePipelineInlineEdit(pipelineId: string) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const updateMutation = trpc.pipeline.update.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.pipeline.getDraft.invalidate({ id: pipelineId })
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(`Failed to update pipeline: ${err.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const updateConfigMutation = trpc.stage.updateConfig.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.pipeline.getDraft.invalidate({ id: pipelineId })
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(`Failed to update stage: ${err.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const updatePipeline = async (
|
||||
data: { name?: string; slug?: string; status?: 'DRAFT' | 'ACTIVE' | 'CLOSED' | 'ARCHIVED'; settingsJson?: Record<string, unknown> }
|
||||
) => {
|
||||
await updateMutation.mutateAsync({ id: pipelineId, ...data })
|
||||
toast.success('Pipeline updated')
|
||||
}
|
||||
|
||||
const updateStageConfig = async (
|
||||
stageId: string,
|
||||
configJson: Record<string, unknown>,
|
||||
name?: string
|
||||
) => {
|
||||
await updateConfigMutation.mutateAsync({ id: stageId, configJson, name })
|
||||
toast.success('Stage configuration updated')
|
||||
}
|
||||
|
||||
return {
|
||||
isUpdating: updateMutation.isPending || updateConfigMutation.isPending,
|
||||
updatePipeline,
|
||||
updateStageConfig,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user