feat(doprocess): Change task type

Closes #3872
signalco-io · Nov 25, 2023 · ba653a4 · ba653a4
1 parent de5b4c0
commit ba653a4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/web/apps/doprocess/components/processes/tasks/TaskDetailsToolbar.tsx b/web/apps/doprocess/components/processes/tasks/TaskDetailsToolbar.tsx
@@ -1,13 +1,17 @@
 'use client';
 
 import { useState } from 'react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Modal } from '@signalco/ui-primitives/Modal';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
-import { Delete, MoreHorizontal } from '@signalco/ui-icons';
+import { Delete, MoreHorizontal, Replace } from '@signalco/ui-icons';
 import { Toolbar } from '../../shared/Toolbar';
 import { SavingIndicator } from '../../shared/SavingIndicator';
 import { useProcessTaskDefinition } from '../../../src/hooks/useProcessTaskDefinition';
+import TaskDetailsTypePicker from './TaskDetailsTypePicker';
 import { TaskDeleteModal } from './TaskDeleteModal';
 
 type TaskDetailsToolbarProps = {
@@ -20,6 +24,7 @@ type TaskDetailsToolbarProps = {
 export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable }: TaskDetailsToolbarProps) {
     const { data: taskDefinition } = useProcessTaskDefinition(processId, selectedTaskId);
     const [deleteOpen, setDeleteOpen] = useState(false);
+    const [typePickerOpen, setTypePickerOpen] = useState(false);
 
     return (
         <>
@@ -36,6 +41,10 @@ export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable
                         </IconButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
+                        <DropdownMenuItem startDecorator={<Replace />} onClick={() => setTypePickerOpen(true)}>
+                            Change type...
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
                         <DropdownMenuItem startDecorator={<Delete />} onClick={() => setDeleteOpen(true)}>
                             Delete...
                         </DropdownMenuItem>
@@ -48,6 +57,18 @@ export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable
                     open={deleteOpen}
                     onOpenChange={setDeleteOpen} />
             )}
+            {typePickerOpen && selectedTaskId && (
+                <Modal open={typePickerOpen} onOpenChange={setTypePickerOpen}>
+                    <Stack spacing={1}>
+                        <Typography level="h5">Change task type</Typography>
+                        <TaskDetailsTypePicker
+                            processId={processId}
+                            taskDefinitionId={selectedTaskId}
+                            onPicked={() => setTypePickerOpen(false)}
+                        />
+                    </Stack>
+                </Modal>
+            )}
         </>
     );
 }
diff --git a/web/apps/doprocess/components/processes/tasks/TaskDetailsTypePicker.tsx b/web/apps/doprocess/components/processes/tasks/TaskDetailsTypePicker.tsx
@@ -11,7 +11,7 @@ import { Loadable } from '@signalco/ui/Loadable';
 import { useProcessTaskDefinitionUpdate } from '../../../src/hooks/useProcessTaskDefinitionUpdate';
 import { useDocuments } from '../../../src/hooks/useDocuments';
 
-export default function TaskDetailsTypePicker({ processId, taskDefinitionId }: { processId: string, taskDefinitionId: string }) {
+export default function TaskDetailsTypePicker({ processId, taskDefinitionId, onPicked }: { processId: string, taskDefinitionId: string, onPicked?: (type: string, typeData?: string) => void }) {
     const taskDefinitionUpdate = useProcessTaskDefinitionUpdate();
 
     const handleTypePicked = async (type: string, typeData?: string) => {
@@ -21,6 +21,7 @@ export default function TaskDetailsTypePicker({ processId, taskDefinitionId }: {
             type,
             typeData
         });
+        onPicked?.(type, typeData);
     }
 
     const [selectDocumentOpen, setSelectDocumentOpen] = useState(false);

diff --git a/web/packages/ui-icons/src/lucide/index.ts b/web/packages/ui-icons/src/lucide/index.ts
@@ -24,6 +24,11 @@ export {
     ChevronDown as Down,
     ChevronLeft as Left,
     ChevronsRight as Right,
+    Copy,
+    Check,
+    CircleSlashed as Disabled,
+    CircleEqual,
+    Circle as Empty,
     Filter,
     Square as Stop,
     LayoutList,
@@ -62,11 +67,7 @@ export {
     FileInput,
     Text,
     Outdent as TextLinked,
-    Copy,
-    Check,
-    CircleSlashed as Disabled,
-    CircleEqual,
-    Circle as Empty,
+    Replace,
     Meh as SmileMeh,
     Smile as SmileHappy,
     Laugh as SmileVeryHappy,