stash

Author: rob-at-cortex

src/components/DigitalColleagues/EditableField.tsx

@@ -10,8 +10,9 @@ interface EditableFieldProps {
   value: string;
   label: string;
   multiline?: boolean;
-  onSave: (fieldName: string, value: string) => void;
+  onSave: (fieldName: string, value: string) => void | Promise<void>;
   className?: string;
+  disabled?: boolean;
 }
 
 export const EditableField: React.FC<EditableFieldProps> = ({
@@ -20,19 +21,22 @@ export const EditableField: React.FC<EditableFieldProps> = ({
   label,
   multiline = false,
   onSave,
-  className = ""
+  className = "",
+  disabled = false
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [tempValue, setTempValue] = useState('');
 
   const handleFieldClick = () => {
-    setIsEditing(true);
-    setTempValue(value);
+    if (!disabled) {
+      setIsEditing(true);
+      setTempValue(value);
+    }
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (tempValue !== value) {
-      onSave(fieldName, tempValue);
+      await onSave(fieldName, tempValue);
     }
     setIsEditing(false);
   };
@@ -75,14 +79,16 @@ export const EditableField: React.FC<EditableFieldProps> = ({
       ) : (
         <div
           onClick={handleFieldClick}
-          className={`cursor-pointer hover:bg-muted/50 p-2 rounded border border-transparent hover:border-border transition-colors group ${
+          className={`${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} hover:bg-muted/50 p-2 rounded border border-transparent hover:border-border transition-colors group ${
             multiline ? "min-h-[100px]" : "min-h-[40px]"
           } flex items-start gap-2`}
         >
           <span className={multiline ? "text-sm text-muted-foreground" : "text-lg font-medium text-foreground"}>
             {value || "Click to edit..."}
           </span>
-          <Edit className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+          {!disabled && (
+            <Edit className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+          )}
         </div>
       )}
     </div>

src/components/DigitalColleagues/SearchableSelect.tsx

@@ -23,6 +23,7 @@ interface SearchableSelectProps {
   options: SearchableSelectOption[];
   placeholder?: string;
   allowCustomValue?: boolean;
+  disabled?: boolean;
 }
 
 export const SearchableSelect: React.FC<SearchableSelectProps> = ({
@@ -31,7 +32,8 @@ export const SearchableSelect: React.FC<SearchableSelectProps> = ({
   onValueChange,
   options,
   placeholder = 'Search...',
-  allowCustomValue = false
+  allowCustomValue = false,
+  disabled = false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -55,15 +57,21 @@ export const SearchableSelect: React.FC<SearchableSelectProps> = ({
     }
   };
 
+  const handleOpenChange = (open: boolean) => {
+    if (!disabled) {
+      setIsOpen(open);
+    }
+  };
+  
   return (
     <div className="space-y-1">
       <Label className="text-xs text-muted-foreground">{label}</Label>
-      <Select value={value} onValueChange={handleSelect} open={isOpen} onOpenChange={setIsOpen}>
+      <Select value={value} onValueChange={handleSelect} open={isOpen} onOpenChange={handleOpenChange} disabled={disabled}>
         <SelectTrigger className="h-auto p-0 border-none bg-transparent hover:bg-muted/50 rounded-md">
           <Badge 
             variant="secondary" 
-            className="cursor-pointer hover:bg-muted transition-colors"
-            onClick={() => setIsOpen(!isOpen)}
+            className={`${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} hover:bg-muted transition-colors`}
+            onClick={() => !disabled && setIsOpen(!isOpen)}
           >
             {selectedOption?.label || value || 'Select...'}
           </Badge>

src/components/DigitalColleagues/TaskDetailsModal.stories.tsx

@@ -9,11 +9,53 @@ const meta: Meta<typeof TaskDetailsModal> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  argTypes: {
+    onUpdateTask: { action: 'update task' },
+    onDeleteTask: { action: 'delete task' },
+    onClose: { action: 'close' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TaskDetailsModal>;
 
+// Mock async functions
+const mockUpdateTask = (taskId: string, updates: any) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      console.log('Task updated:', taskId, updates);
+      resolve();
+    }, 2000); // 2 second delay to show loading state
+  });
+};
+
+const mockDeleteTask = (taskId: string) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      console.log('Task deleted:', taskId);
+      resolve();
+    }, 1500); // 1.5 second delay to show loading state
+  });
+};
+
+const mockUpdateTaskFail = (taskId: string, updates: any) => {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      console.log('Task update failed:', taskId, updates);
+      reject(new Error('Update failed'));
+    }, 2000);
+  });
+};
+
+const mockDeleteTaskFail = (taskId: string) => {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      console.log('Task delete failed:', taskId);
+      reject(new Error('Delete failed'));
+    }, 1500);
+  });
+};
+
 const mockEpics = [
   {
     id: '1',
@@ -81,8 +123,56 @@ export const Default: Story = {
     epics: mockEpics,
     sprints: mockSprints,
     onClose: () => {},
-    onUpdateTask: () => {},
-    onDeleteTask: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
+  },
+};
+
+export const WithLoadingStates: Story = {
+  args: {
+    isOpen: true,
+    task: {
+      id: '1',
+      title: 'Design login page',
+      description: 'Create wireframes and mockups for the login interface',
+      status: 'in-progress',
+      priority: 'high',
+      type: 'story',
+      epicId: '1',
+      sprintId: '2',
+      assignee: 'John Doe',
+      points: 8,
+      createdAt: new Date('2024-01-15'),
+    },
+    epics: mockEpics,
+    sprints: mockSprints,
+    onClose: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
+  },
+};
+
+export const WithErrorStates: Story = {
+  args: {
+    isOpen: true,
+    task: {
+      id: '1',
+      title: 'Design login page',
+      description: 'Create wireframes and mockups for the login interface',
+      status: 'in-progress',
+      priority: 'high',
+      type: 'story',
+      epicId: '1',
+      sprintId: '2',
+      assignee: 'John Doe',
+      points: 8,
+      createdAt: new Date('2024-01-15'),
+    },
+    epics: mockEpics,
+    sprints: mockSprints,
+    onClose: () => {},
+    onUpdateTask: mockUpdateTaskFail,
+    onDeleteTask: mockDeleteTaskFail,
   },
 };
 
@@ -105,8 +195,8 @@ export const BugTask: Story = {
     epics: mockEpics,
     sprints: mockSprints,
     onClose: () => {},
-    onUpdateTask: () => {},
-    onDeleteTask: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
   },
 };
 
@@ -129,8 +219,8 @@ export const CompletedTask: Story = {
     epics: mockEpics,
     sprints: mockSprints,
     onClose: () => {},
-    onUpdateTask: () => {},
-    onDeleteTask: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
   },
 };
 
@@ -153,8 +243,8 @@ export const SpikeTask: Story = {
     epics: mockEpics,
     sprints: mockSprints,
     onClose: () => {},
-    onUpdateTask: () => {},
-    onDeleteTask: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
   },
 };
 
@@ -177,7 +267,7 @@ export const NoSprint: Story = {
     epics: mockEpics,
     sprints: mockSprints,
     onClose: () => {},
-    onUpdateTask: () => {},
-    onDeleteTask: () => {},
+    onUpdateTask: mockUpdateTask,
+    onDeleteTask: mockDeleteTask,
   },
 };