feat: aggiunta funzionalità di modifica e gestione delle categorie nella chat

Gabry848 · Gabry848 · commit 67b77957e89d · 2026-01-15T14:56:47.000+04:00
diff --git a/src/components/BotChat/MessageBubble.tsx b/src/components/BotChat/MessageBubble.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, View, Text, Animated } from 'react-native';
+import { StyleSheet, View, Text, Animated, Alert } from 'react-native';
 import { MessageBubbleProps, ToolWidget, TaskItem } from './types';
 import TaskListBubble from './TaskListBubble'; // Nuovo componente card-based
 import TaskTableBubble from './TaskTableBubble'; // Mantieni per backward compatibility
@@ -8,8 +8,10 @@ import WidgetBubble from './widgets/WidgetBubble';
 import VisualizationModal from './widgets/VisualizationModal';
 import ItemDetailModal from './widgets/ItemDetailModal';
 import TaskEditModal from '../Task/TaskEditModal';
+import EditCategoryModal from '../Category/EditCategoryModal';
+import CategoryMenu from '../Category/CategoryMenu';
 import { Task as TaskType } from '../../services/taskService';
-import { updateTask } from '../../services/taskService';
+import { updateTask, updateCategory, deleteCategory } from '../../services/taskService';
 
 const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
   const isBot = message.sender === 'bot';
@@ -31,6 +33,15 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
   const [taskEditModalVisible, setTaskEditModalVisible] = useState(false);
   const [selectedTaskForEdit, setSelectedTaskForEdit] = useState<TaskType | null>(null);
 
+  // Stato per category edit modal e menu
+  const [categoryEditModalVisible, setCategoryEditModalVisible] = useState(false);
+  const [categoryMenuVisible, setCategoryMenuVisible] = useState(false);
+  const [selectedCategoryForEdit, setSelectedCategoryForEdit] = useState<any>(null);
+  const [editCategoryName, setEditCategoryName] = useState('');
+  const [editCategoryDescription, setEditCategoryDescription] = useState('');
+  const [isEditingCategory, setIsEditingCategory] = useState(false);
+  const [isDeletingCategory, setIsDeletingCategory] = useState(false);
+
   // Animazioni per i punti di streaming
   const streamingDot1 = useRef(new Animated.Value(0.5)).current;
   const streamingDot2 = useRef(new Animated.Value(0.5)).current;
@@ -244,6 +255,100 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
     }
   };
 
+  // Handler per aprire il menu della categoria
+  const handleCategoryPress = (category: any) => {
+    console.log('[MessageBubble] handleCategoryPress called with:', category);
+    setSelectedCategoryForEdit(category);
+    setCategoryMenuVisible(true);
+  };
+
+  // Handler per chiudere il menu della categoria
+  const handleCloseCategoryMenu = () => {
+    setCategoryMenuVisible(false);
+  };
+
+  // Handler per aprire la modal di modifica dalla voce menu
+  const handleEditCategory = () => {
+    console.log('[MessageBubble] handleEditCategory - selectedCategoryForEdit:', selectedCategoryForEdit);
+    console.log('[MessageBubble] handleEditCategory - name:', selectedCategoryForEdit?.name);
+    console.log('[MessageBubble] handleEditCategory - description:', selectedCategoryForEdit?.description);
+    setCategoryMenuVisible(false);
+    setEditCategoryName(selectedCategoryForEdit?.name || '');
+    setEditCategoryDescription(selectedCategoryForEdit?.description || '');
+    setCategoryEditModalVisible(true);
+  };
+
+  // Handler per salvare le modifiche alla categoria
+  const handleSaveCategory = async () => {
+    if (!selectedCategoryForEdit) return;
+
+    if (editCategoryName.trim() === '') {
+      Alert.alert('Errore', 'Il nome della categoria non può essere vuoto');
+      return;
+    }
+
+    setIsEditingCategory(true);
+    try {
+      await updateCategory(selectedCategoryForEdit.name, {
+        name: editCategoryName.trim(),
+        description: editCategoryDescription.trim()
+      });
+
+      Alert.alert('Successo', 'Categoria aggiornata con successo');
+      setCategoryEditModalVisible(false);
+      setSelectedCategoryForEdit(null);
+    } catch (error) {
+      console.error('[MessageBubble] Error updating category:', error);
+      Alert.alert('Errore', 'Impossibile aggiornare la categoria. Riprova più tardi.');
+    } finally {
+      setIsEditingCategory(false);
+    }
+  };
+
+  // Handler per chiudere la modal di modifica categoria
+  const handleCancelCategoryEdit = () => {
+    setCategoryEditModalVisible(false);
+    setEditCategoryName('');
+    setEditCategoryDescription('');
+  };
+
+  // Handler per eliminare una categoria
+  const handleDeleteCategory = async () => {
+    if (!selectedCategoryForEdit) return;
+
+    Alert.alert(
+      'Conferma eliminazione',
+      `Sei sicuro di voler eliminare la categoria "${selectedCategoryForEdit.name}"?`,
+      [
+        { text: 'Annulla', style: 'cancel' },
+        {
+          text: 'Elimina',
+          style: 'destructive',
+          onPress: async () => {
+            setIsDeletingCategory(true);
+            try {
+              await deleteCategory(selectedCategoryForEdit.name);
+              Alert.alert('Successo', 'Categoria eliminata con successo');
+              setCategoryMenuVisible(false);
+              setSelectedCategoryForEdit(null);
+            } catch (error) {
+              console.error('[MessageBubble] Error deleting category:', error);
+              Alert.alert('Errore', 'Impossibile eliminare la categoria. Riprova più tardi.');
+            } finally {
+              setIsDeletingCategory(false);
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  // Handler placeholder per condivisione categoria
+  const handleShareCategory = () => {
+    setCategoryMenuVisible(false);
+    Alert.alert('Info', 'Funzionalità di condivisione non ancora disponibile nella chat');
+  };
+
   return (
     <Animated.View style={[
       styles.messageContainer,
@@ -264,6 +369,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
               onOpenVisualization={handleOpenVisualization}
               onOpenItemDetail={handleOpenItemDetail}
               onTaskPress={handleTaskPress}
+              onCategoryPress={handleCategoryPress}
             />
           ))}
         </View>
@@ -303,6 +409,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
           widget={selectedVisualizationWidget}
           onClose={() => setVisualizationModalVisible(false)}
           onItemPress={handleOpenItemDetail}
+          onCategoryPress={handleCategoryPress}
         />
       )}
 
@@ -326,6 +433,34 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({ message, style }) => {
           onSave={handleSaveTask}
         />
       )}
+
+      {/* Category Menu */}
+      {selectedCategoryForEdit && (
+        <CategoryMenu
+          visible={categoryMenuVisible}
+          onClose={handleCloseCategoryMenu}
+          onEdit={handleEditCategory}
+          onDelete={handleDeleteCategory}
+          onShare={handleShareCategory}
+          isDeleting={isDeletingCategory}
+          isOwned={selectedCategoryForEdit.isOwned !== undefined ? selectedCategoryForEdit.isOwned : true}
+          permissionLevel={selectedCategoryForEdit.permissionLevel || "READ_WRITE"}
+        />
+      )}
+
+      {/* Category Edit Modal */}
+      {selectedCategoryForEdit && (
+        <EditCategoryModal
+          visible={categoryEditModalVisible}
+          onClose={handleCancelCategoryEdit}
+          onSave={handleSaveCategory}
+          title={editCategoryName}
+          description={editCategoryDescription}
+          onTitleChange={setEditCategoryName}
+          onDescriptionChange={setEditCategoryDescription}
+          isEditing={isEditingCategory}
+        />
+      )}
     </Animated.View>
   );
 };
diff --git a/src/components/BotChat/types.ts b/src/components/BotChat/types.ts
@@ -201,6 +201,7 @@ export interface WidgetBubbleProps {
   onOpenVisualization?: (widget: ToolWidget) => void;
   onOpenItemDetail?: (item: any, type: 'task' | 'category' | 'note') => void;
   onTaskPress?: (task: any) => void;
+  onCategoryPress?: (category: any) => void;
 }
 
 // Props per CreationWidgetCard
@@ -215,6 +216,7 @@ export interface VisualizationModalProps {
   widget: ToolWidget;
   onClose: () => void;
   onItemPress?: (item: any, type: 'task' | 'category' | 'note') => void;
+  onCategoryPress?: (category: any) => void;
 }
 
 // Props per ItemDetailModal
diff --git a/src/components/BotChat/widgets/VisualizationModal.tsx b/src/components/BotChat/widgets/VisualizationModal.tsx
@@ -8,10 +8,10 @@ import {
   ScrollView,
   SafeAreaView,
   TextInput,
+  Image,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { VisualizationModalProps, TaskListItem } from '../types';
-import Category from '../../Category/Category';
 import Task from '../../Task/Task';
 import { Task as TaskType } from '../../../services/taskService';
 import CalendarGrid from '../../Calendar/CalendarGrid';
@@ -26,6 +26,7 @@ const VisualizationModal: React.FC<VisualizationModalProps> = ({
   widget,
   onClose,
   onItemPress,
+  onCategoryPress,
 }) => {
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
@@ -248,19 +249,53 @@ const VisualizationModal: React.FC<VisualizationModalProps> = ({
       );
 
       return (
-        <View key={index} style={styles.categoryCardWrapper}>
-          <Category
-            title={item.name}
-            description={item.description}
-            imageUrl={isValidUrl ? validImageUrl : undefined}
-            taskCount={item.taskCount || item.task_count || 0}
-            categoryId={item.id}
-            isShared={item.isShared || false}
-            isOwned={item.isOwned !== undefined ? item.isOwned : true}
-            ownerName={item.ownerName}
-            permissionLevel={item.permissionLevel || "READ_WRITE"}
-          />
-        </View>
+        <TouchableOpacity
+          key={index}
+          style={styles.categoryCard}
+          activeOpacity={0.7}
+          onPress={() => {
+            console.log('[VisualizationModal] Category pressed:', item.name);
+            console.log('[VisualizationModal] onCategoryPress available:', !!onCategoryPress);
+            if (onCategoryPress) {
+              onCategoryPress(item);
+            } else {
+              console.warn('[VisualizationModal] onCategoryPress is not defined!');
+            }
+          }}
+        >
+          <View style={styles.categoryIconContainer}>
+            {isValidUrl ? (
+              <Image source={{ uri: validImageUrl }} style={styles.categoryImage} />
+            ) : (
+              <Ionicons name="folder" size={32} color="#007AFF" />
+            )}
+          </View>
+          <View style={styles.categoryTextContainer}>
+            <Text style={styles.categoryTitle} numberOfLines={1}>
+              {item.name}
+            </Text>
+            {item.description && (
+              <Text style={styles.categoryDescription} numberOfLines={2}>
+                {item.description}
+              </Text>
+            )}
+            <View style={styles.categoryMetaContainer}>
+              <View style={styles.categoryTaskCount}>
+                <Ionicons name="list-outline" size={14} color="#666666" />
+                <Text style={styles.categoryTaskCountText}>
+                  {item.taskCount || item.task_count || 0} task
+                </Text>
+              </View>
+              {item.isShared && (
+                <View style={styles.categorySharedBadge}>
+                  <Ionicons name="people-outline" size={14} color="#007AFF" />
+                  <Text style={styles.categorySharedText}>Condiviso</Text>
+                </View>
+              )}
+            </View>
+          </View>
+          <Ionicons name="chevron-forward" size={20} color="#C7C7CC" />
+        </TouchableOpacity>
       );
     }
 
@@ -780,6 +815,85 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontFamily: 'System',
   },
+  // Stili per le category card personalizzate nella chat
+  categoryCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    marginBottom: 12,
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 1,
+    borderWidth: 1.5,
+    borderColor: '#E1E5E9',
+  },
+  categoryIconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#E5F1FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+    overflow: 'hidden',
+  },
+  categoryImage: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+  },
+  categoryTextContainer: {
+    flex: 1,
+  },
+  categoryTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#000000',
+    marginBottom: 4,
+    fontFamily: 'System',
+  },
+  categoryDescription: {
+    fontSize: 14,
+    color: '#666666',
+    marginBottom: 6,
+    fontFamily: 'System',
+  },
+  categoryMetaContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  categoryTaskCount: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  categoryTaskCountText: {
+    fontSize: 13,
+    color: '#666666',
+    fontFamily: 'System',
+  },
+  categorySharedBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    backgroundColor: '#E5F1FF',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 8,
+  },
+  categorySharedText: {
+    fontSize: 12,
+    color: '#007AFF',
+    fontWeight: '600',
+    fontFamily: 'System',
+  },
 });
 
 export default VisualizationModal;
diff --git a/src/components/BotChat/widgets/VisualizationWidget.tsx b/src/components/BotChat/widgets/VisualizationWidget.tsx
@@ -9,14 +9,15 @@ interface VisualizationWidgetProps {
   widget: ToolWidget;
   onOpen: (widget: ToolWidget) => void;
   onTaskPress?: (task: any) => void;
+  onCategoryPress?: (category: any) => void;
 }
 
 /**
  * Widget per tool di visualizzazione (show_tasks_to_user, show_categories_to_user, show_notes_to_user)
  * Per task_list: mostra preview card-based (max 3)
  * Per altri tipi: mostra card semplice con pulsante
  */
-const VisualizationWidget: React.FC<VisualizationWidgetProps> = ({ widget, onOpen, onTaskPress }) => {
+const VisualizationWidget: React.FC<VisualizationWidgetProps> = ({ widget, onOpen, onTaskPress, onCategoryPress }) => {
   const output = widget.toolOutput;
 
   // Se è in stato loading e non ha ancora output, mostra lo skeleton loader
diff --git a/src/components/BotChat/widgets/WidgetBubble.tsx b/src/components/BotChat/widgets/WidgetBubble.tsx

Original file line number	Diff line number	Diff line change
`@@ -201,6 +201,7 @@ export interface WidgetBubbleProps {`
`201`	`201`	`onOpenVisualization?: (widget: ToolWidget) => void;`
`202`	`202`	`onOpenItemDetail?: (item: any, type: 'task' \| 'category' \| 'note') => void;`
`203`	`203`	`onTaskPress?: (task: any) => void;`
	`204`	`+ onCategoryPress?: (category: any) => void;`
`204`	`205`	`}`
`205`	`206`
`206`	`207`	`// Props per CreationWidgetCard`
`@@ -215,6 +216,7 @@ export interface VisualizationModalProps {`
`215`	`216`	`widget: ToolWidget;`
`216`	`217`	`onClose: () => void;`
`217`	`218`	`onItemPress?: (item: any, type: 'task' \| 'category' \| 'note') => void;`
	`219`	`+ onCategoryPress?: (category: any) => void;`
`218`	`220`	`}`
`219`	`221`
`220`	`222`	`// Props per ItemDetailModal`