Merge pull request #232 from shancds/test/row-kanban-board-v1.1.1

feat(enhanced-kanban): enhance KanbanGroup component with editing and…

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx

@@ -1,14 +1,30 @@
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState, useRef, useEffect } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import TaskCard from './TaskCard';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import EnhancedKanbanCreateTaskCard from '../EnhancedKanbanCreateTaskCard';
-import { PlusOutlined } from '@ant-design/icons';
-import Button from 'antd/es/button';
 import { useTranslation } from 'react-i18next';
 import { useAuthService } from '@/hooks/useAuth';
 import useIsProjectManager from '@/hooks/useIsProjectManager';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { ITaskStatusUpdateModel } from '@/types/tasks/task-status-update-model.types';
+import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
+import { fetchStatuses } from '@/features/taskAttributes/taskStatusSlice';
+import logger from '@/utils/errorLogger';
+import { evt_project_board_column_setting_click } from '@/shared/worklenz-analytics-events';
+import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
+import { ITaskPhase } from '@/types/tasks/taskPhase.types';
+import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
+import {
+  deleteStatusToggleDrawer,
+  seletedStatusCategory,
+} from '@/features/projects/status/DeleteStatusSlice';
+import {
+  fetchEnhancedKanbanGroups,
+  IGroupBy,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
+
 
 interface KanbanGroupProps {
     group: ITaskListGroup;
@@ -33,12 +49,28 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
     hoveredTaskIdx,
     hoveredGroupId
 }) => {
-    const themeMode = useAppSelector(state => state.themeReducer.mode);
+    const [isHover, setIsHover] = useState<boolean>(false);
-    const { t } = useTranslation('kanban-board');
     const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
+    const [isEditable, setIsEditable] = useState(false);
     const isProjectManager = useIsProjectManager();
+    const [isLoading, setIsLoading] = useState(false);
+    const [name, setName] = useState(group.name);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [editName, setEdit] = useState(group.name);
+    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const themeMode = useAppSelector(state => state.themeReducer.mode);
+    const dispatch = useAppDispatch();
+    const { projectId } = useAppSelector(state => state.projectReducer);
+    const { groupBy } = useAppSelector(state => state.enhancedKanbanReducer);
+    const { statusCategories, status } = useAppSelector(state => state.taskStatusReducer);
+    const { trackMixpanelEvent } = useMixpanelTracking();
     const [showNewCardTop, setShowNewCardTop] = useState(false);
     const [showNewCardBottom, setShowNewCardBottom] = useState(false);
+    const { t } = useTranslation('kanban-board');
+
     const headerBackgroundColor = useMemo(() => {
         if (themeMode === 'dark') {
             return group.color_code_dark || group.color_code || '#1e1e1e';
@@ -46,6 +78,156 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
         return group.color_code || '#f5f5f5';
     }, [themeMode, group.color_code, group.color_code_dark]);
 
+    const getUniqueSectionName = (baseName: string): string => {
+        // Check if the base name already exists
+        const existingNames = status.map(status => status.name?.toLowerCase());
+
+        if (!existingNames.includes(baseName.toLowerCase())) {
+            return baseName;
+        }
+
+        // If the base name exists, add a number suffix
+        let counter = 1;
+        let newName = `${baseName.trim()} (${counter})`;
+
+        while (existingNames.includes(newName.toLowerCase())) {
+            counter++;
+            newName = `${baseName.trim()} (${counter})`;
+        }
+
+        return newName;
+    };
+
+    const updateStatus = async (category = group.category_id ?? null) => {
+        if (!category || !projectId || !group.id) return;
+        const sectionName = getUniqueSectionName(name);
+        const body: ITaskStatusUpdateModel = {
+            name: sectionName,
+            project_id: projectId,
+            category_id: category,
+        };
+        const res = await statusApiService.updateStatus(group.id, body, projectId);
+        if (res.done) {
+            dispatch(fetchEnhancedKanbanGroups(projectId));
+            dispatch(fetchStatuses(projectId));
+            setName(sectionName);
+        } else {
+            setName(editName);
+            logger.error('Error updating status', res.message);
+        }
+    };
+
+    const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const taskName = e.target.value;
+        setName(taskName);
+    };
+
+    const handleBlur = async () => {
+        setIsEditable(false);
+        if (name === editName) return;
+        if (name === 'Untitled section') {
+            dispatch(fetchEnhancedKanbanGroups(projectId ?? ''));
+        }
+
+        if (!projectId || !group.id) return;
+
+        if (groupBy === IGroupBy.STATUS) {
+            await updateStatus();
+        }
+
+        if (groupBy === IGroupBy.PHASE) {
+            const body = {
+                id: group.id,
+                name: name,
+            };
+
+            const res = await phasesApiService.updateNameOfPhase(
+                group.id,
+                body as ITaskPhase,
+                projectId
+            );
+            if (res.done) {
+                trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' });
+                dispatch(fetchEnhancedKanbanGroups(projectId));
+            }
+        }
+    };
+
+    const handlePressEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            setShowNewCardTop(true);
+            setShowNewCardBottom(false);
+            handleBlur();
+        }
+    };
+
+    const handleDeleteSection = async () => {
+        if (!projectId || !group.id) return;
+
+        try {
+            if (groupBy === IGroupBy.STATUS) {
+                const replacingStatusId = '';
+                const res = await statusApiService.deleteStatus(group.id, projectId, replacingStatusId);
+                if (res.message === 'At least one status should exists under each category.') return;
+                if (res.done) {
+                    dispatch(fetchEnhancedKanbanGroups(projectId));
+                } else {
+                    dispatch(
+                        seletedStatusCategory({
+                            id: group.id,
+                            name: name,
+                            category_id: group.category_id ?? '',
+                            message: res.message ?? '',
+                        })
+                    );
+                    dispatch(deleteStatusToggleDrawer());
+                }
+            } else if (groupBy === IGroupBy.PHASE) {
+                const res = await phasesApiService.deletePhaseOption(group.id, projectId);
+                if (res.done) {
+                    dispatch(fetchEnhancedKanbanGroups(projectId));
+                }
+            }
+        } catch (error) {
+            logger.error('Error deleting section', error);
+        }
+    };
+
+    const handleRename = () => {
+        setIsEditable(true);
+        setShowDropdown(false);
+        setTimeout(() => {
+            inputRef.current?.focus();
+        }, 100);
+    };
+
+    const handleCategoryChange = (categoryId: string) => {
+        updateStatus(categoryId);
+        setShowDropdown(false);
+    };
+
+    const handleDelete = () => {
+        setShowDeleteConfirm(true);
+        setShowDropdown(false);
+    };
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setShowDropdown(false);
+            }
+        };
+
+        if (showDropdown) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showDropdown]);
+
     return (
         <div className="enhanced-kanban-group">
             <div
@@ -58,12 +240,210 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                 onDragOver={onGroupDragOver}
                 onDrop={e => onGroupDrop(e, group.id)}
             >
-                <h3>{group.name}</h3>
+                <div
-                <span className="task-count">{group.tasks.length}</span>
+                    className="flex items-center justify-between w-full font-semibold rounded-md"
+                    onMouseEnter={() => setIsHover(true)}
+                    onMouseLeave={() => setIsHover(false)}
+                >
+                    <div
+                        className="flex items-center gap-2 cursor-pointer"
+                        onClick={e => {
+                            e.stopPropagation();
+                            if ((isProjectManager || isOwnerOrAdmin) && group.name !== 'Unmapped')
+                                setIsEditable(true);
+                        }}
+                        onMouseDown={e => {
+                            e.stopPropagation();
+                        }}
+                    >
+                        {isLoading && (
+                            <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
+                        )}
+                        {isEditable ? (
+                            <input
+                                ref={inputRef}
+                                value={name}
+                                className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${
+                                    themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
+                                }`}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                onKeyDown={handlePressEnter}
+                                onMouseDown={e => {
+                                    e.stopPropagation();
+                                }}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                }}
+                            />
+                        ) : (
+                            <div
+                                className={`min-w-[185px] text-sm font-semibold capitalize truncate ${
+                                    themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
+                                }`}
+                                title={isEllipsisActive ? name : undefined}
+                                onMouseDown={e => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                }}
+                                onMouseUp={e => {
+                                    e.stopPropagation();
+                                }}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                }}
+                            >
+                                {name} ({group.tasks.length})
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                        <button
+                            type="button"
+                            className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
+                            onClick={() => {
+                                setShowNewCardTop(true);
+                                setShowNewCardBottom(false);
+                            }}
+                        >
+                            <svg className="w-4 h-4 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                            </svg>
+                        </button>
+
+                        {(isOwnerOrAdmin || isProjectManager) && name !== 'Unmapped' && (
+                            <div className="relative" ref={dropdownRef}>
+                                <button
+                                    type="button"
+                                    className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
+                                    onClick={() => setShowDropdown(!showDropdown)}
+                                >
+                                    <svg className="w-4 h-4 text-gray-800 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+                                    </svg>
+                                </button>
+
+                                {showDropdown && (
+                                    <div className="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                                        <div className="py-1">
+                                            <button
+                                                type="button"
+                                                className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                onClick={handleRename}
+                                            >
+                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                </svg>
+                                                {t('rename')}
+                                            </button>
+
+                                            {groupBy === IGroupBy.STATUS && statusCategories && (
+                                                <div className="border-t border-gray-200 dark:border-gray-700">
+                                                    <div className="px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wide">
+                                                        Change category
+                                                    </div>
+                                                    {statusCategories.map(status => (
+                                                        <button
+                                                            key={status.id}
+                                                            type="button"
+                                                            className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                                                            onClick={() => status.id && handleCategoryChange(status.id)}
+                                                        >
+                                                            <div 
+                                                                className="w-3 h-3 rounded-full" 
+                                                                style={{ backgroundColor: status.color_code }}
+                                                            ></div>
+                                                            <span className={group.category_id === status.id ? 'font-bold' : ''}>
+                                                                {status.name}
+                                                            </span>
+                                                        </button>
+                                                    ))}
+                                                </div>
+                                            )}
+
+                                            {groupBy !== IGroupBy.PRIORITY && (
+                                                <div className="border-t border-gray-200 dark:border-gray-700">
+                                                    <button
+                                                        type="button"
+                                                        className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 text-red-600 dark:text-red-400"
+                                                        onClick={e => {
+                                                            e.stopPropagation();
+                                                            handleDelete();
+                                                        }}
+                                                    >
+                                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                                        </svg>
+                                                        {t('delete')}
+                                                    </button>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
             </div>
+
+            {/* Simple Delete Confirmation */}
+            {showDeleteConfirm && (
+                <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4">
+                        <div className="p-4">
+                            <div className="flex items-center gap-3 mb-3">
+                                <div className="flex-shrink-0">
+                                    <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                                        {t('deleteConfirmationTitle')}
+                                    </h3>
+                                </div>
+                            </div>
+                            <div className="flex justify-end gap-2">
+                                <button
+                                    type="button"
+                                    className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${
+                                        themeMode === 'dark' 
+                                            ? 'border-gray-600 text-gray-300 hover:bg-gray-600' 
+                                            : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                                    }`}
+                                    onClick={() => setShowDeleteConfirm(false)}
+                                >
+                                    {t('deleteConfirmationCancel')}
+                                </button>
+                                <button
+                                    type="button"
+                                    className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
+                                    onClick={() => {
+                                        handleDeleteSection();
+                                        setShowDeleteConfirm(false);
+                                    }}
+                                >
+                                    {t('deleteConfirmationOk')}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
             <div className="enhanced-kanban-group-tasks">
+                {/* Create card at top */}
+                {showNewCardTop && (isOwnerOrAdmin || isProjectManager) && (
+                    <EnhancedKanbanCreateTaskCard
+                        sectionId={group.id}
+                        setShowNewCard={setShowNewCardTop}
+                        position="top"
+                    />
+                )}
+
                 {/* If group is empty, render a drop zone */}
-                {group.tasks.length === 0 && (
+                {group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom &&(
                     <div
                         className="empty-drop-zone"
                         style={{
@@ -93,26 +473,24 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                             </div>
                         )}
                         {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
-                            <Button
+                            <button
-                                type="text"
+                                type="button"
-                                style={{
+                                className="h-10 w-full rounded-md border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors flex items-center justify-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-                                    height: '38px',
-                                    width: '100%',
-                                    borderRadius: 6,
-                                    boxShadow: 'none',
-                                }}
-                                icon={<PlusOutlined />}
                                 onClick={() => {
                                     setShowNewCardBottom(false);
                                     setShowNewCardTop(true);
                                 }}
                             >
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                                </svg>
                                 {t('addTask')}
-                            </Button>
+                            </button>
                         )}
-                        {showNewCardTop && <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardTop} position='top' />}
                     </div>
-                )}
+                )
+                }
+                
 
                 {/* Drop indicator at the top of the group */}
                 {hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
@@ -123,6 +501,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
 
                 {group.tasks.map((task, idx) => (
                     <TaskCard
+                        key={task.id}
                         task={task}
                         onTaskDragStart={onTaskDragStart}
                         onTaskDragOver={onTaskDragOver}
@@ -132,26 +511,32 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                         idx={idx}
                     />
                 ))}
+
+                {/* Create card at bottom */}
+                {showNewCardBottom && (isOwnerOrAdmin || isProjectManager) && (
+                    <EnhancedKanbanCreateTaskCard
+                        sectionId={group.id}
+                        setShowNewCard={setShowNewCardBottom}
+                        position="bottom"
+                    />
+                )}
+
+                {/* Footer Add Task Button */}
                 {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
-                    <Button
+                    <button
-                        type="text"
+                        type="button"
-                        style={{
+                        className="h-10 w-full rounded-md border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors flex items-center justify-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mt-2"
-                            height: '40px',
-                            width: '100%',
-                            borderRadius: 6,
-                            boxShadow: 'none',
-                            marginTop: 8,
-                        }}
-                        icon={<PlusOutlined />}
                         onClick={() => {
                             setShowNewCardBottom(true);
                             setShowNewCardTop(false);
                         }}
                     >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                        </svg>
                         {t('addTask')}
-                    </Button>
+                    </button>
                 )}
-                {showNewCardBottom && <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardBottom} position='bottom' />}
 
                 {/* Drop indicator at the end of the group */}
                 {hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
@@ -160,6 +545,8 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     </div>
                 )}
             </div>
+
+
         </div>
     );
 });