refactor(task-management): update search handling and improve task filtering

- Modified search handling to utilize the taskManagement slice for consistent state management across components. - Enhanced placeholder text in search filters for better user guidance. - Updated task fetching logic to ensure accurate search value retrieval from the correct state slice.
2025-07-09 17:11:15 +05:30
parent db9b481e8d
commit 8f5de8f1a1
4 changed files with 73 additions and 49 deletions
--- a/worklenz-backend/src/controllers/tasks-controller-v2.ts
+++ b/worklenz-backend/src/controllers/tasks-controller-v2.ts
@@ -109,7 +109,7 @@ export default class TasksControllerV2 extends TasksControllerBase {
  }

  private static getQuery(userId: string, options: ParsedQs) {
-    const searchField = options.search ? "t.name" : "sort_order";
+    const searchField = options.search ? ["t.name", "CONCAT((SELECT key FROM projects WHERE id = t.project_id), '-', task_no)"] : "sort_order";
    const { searchQuery, sortField } = TasksControllerV2.toPaginationOptions(options, searchField);

    const isSubTasks = !!options.parent_task;
--- a/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
@@ -35,6 +35,8 @@ interface AddSubtaskRowProps {
  onSubtaskAdded: (rowId: string) => void;
  rowId: string; // Unique identifier for this add subtask row
  autoFocus?: boolean; // Whether this row should auto-focus on mount
+  isActive?: boolean; // Whether this row should show the input/button
+  onActivate?: (rowId: string) => void; // Callback when row becomes active
 }

 const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({ 
@@ -43,7 +45,9 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
  visibleColumns, 
  onSubtaskAdded,
  rowId,
-  autoFocus = false
+  autoFocus = false,
+  isActive = true,
+  onActivate
 }) => {
  const [isAdding, setIsAdding] = useState(autoFocus);
  const [subtaskName, setSubtaskName] = useState('');
@@ -127,32 +131,40 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
              <div className="w-4" />
              <div className="w-2" />
              
-              {!isAdding ? (
-                <button
-                  onClick={() => setIsAdding(true)}
-                  className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors h-full"
-                >
-                  <PlusOutlined className="text-xs" />
-                  {t('addSubTaskText')}
-                </button>
+              {isActive ? (
+                !isAdding ? (
+                  <button
+                    onClick={() => {
+                      onActivate?.(rowId);
+                      setIsAdding(true);
+                    }}
+                    className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors h-full"
+                  >
+                    <PlusOutlined className="text-xs" />
+                    {t('addSubTaskText')}
+                  </button>
+                ) : (
+                  <Input
+                    ref={inputRef}
+                    value={subtaskName}
+                    onChange={(e) => setSubtaskName(e.target.value)}
+                    onPressEnter={handleAddSubtask}
+                    onBlur={handleCancel}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Type subtask name and press Enter to save"
+                    className="w-full h-full border-none shadow-none bg-transparent"
+                    style={{ 
+                      height: '100%',
+                      minHeight: '32px',
+                      padding: '0',
+                      fontSize: '14px'
+                    }}
+                    autoFocus
+                  />
+                )
              ) : (
-                <Input
-                  ref={inputRef}
-                  value={subtaskName}
-                  onChange={(e) => setSubtaskName(e.target.value)}
-                  onPressEnter={handleAddSubtask}
-                  onBlur={handleCancel}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Type subtask name and press Enter to save"
-                  className="w-full h-full border-none shadow-none bg-transparent"
-                  style={{ 
-                    height: '100%',
-                    minHeight: '32px',
-                    padding: '0',
-                    fontSize: '14px'
-                  }}
-                  autoFocus
-                />
+                // Empty space when not active
+                <div className="h-full" />
              )}
            </div>
          </div>
@@ -208,6 +220,10 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
    });
  }, [taskId]);

+  const handleRowActivate = useCallback((rowId: string) => {
+    setActiveRowId(rowId);
+  }, []);
+
  if (!task) {
    return null;
  }
@@ -250,18 +266,25 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
          {!isLoadingSubtasks && (
            <>
              {/* Render all add subtask rows */}
-              {addSubtaskRows.map((rowId, index) => (
-                <div key={rowId} className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
-                  <AddSubtaskRow
-                    parentTaskId={taskId}
-                    projectId={projectId}
-                    visibleColumns={visibleColumns}
-                    onSubtaskAdded={handleSubtaskAdded}
-                    rowId={rowId}
-                    autoFocus={index === addSubtaskRows.length - 1} // Auto-focus the latest row
-                  />
-                </div>
-              ))}
+              {addSubtaskRows.map((rowId, index) => {
+                const isLastRow = index === addSubtaskRows.length - 1;
+                const isRowActive = activeRowId === null ? isLastRow : activeRowId === rowId;
+                
+                return (
+                  <div key={rowId} className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
+                    <AddSubtaskRow
+                      parentTaskId={taskId}
+                      projectId={projectId}
+                      visibleColumns={visibleColumns}
+                      onSubtaskAdded={handleSubtaskAdded}
+                      rowId={rowId}
+                      autoFocus={isLastRow && activeRowId === rowId} // Auto-focus the latest row when it becomes active
+                      isActive={isRowActive}
+                      onActivate={handleRowActivate}
+                    />
+                  </div>
+                );
+              })}
            </>
          )}
        </>
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -660,7 +660,7 @@ const SearchFilter: React.FC<{
              type="text"
              value={localValue}
              onChange={e => setLocalValue(e.target.value)}
-              placeholder={placeholder || t('searchTasks')}
+              placeholder={placeholder || t('searchTasks') || 'Search tasks by name or key...'}
                                className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-150 ${
                    isDarkMode
                      ? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
@@ -919,10 +919,10 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
  useFilterDataLoader();

  // Get search value from Redux based on position
-  const taskReducerSearch = useAppSelector(state => state.taskReducer?.search || '');
+  const taskManagementSearch = useAppSelector(state => state.taskManagement?.search || '');
  const kanbanSearch = useAppSelector(state => state.enhancedKanbanReducer?.search || '');
  
-  const searchValue = position === 'board' ? kanbanSearch : taskReducerSearch;
+  const searchValue = position === 'board' ? kanbanSearch : taskManagementSearch;

  // Local state for filter sections
  const [filterSections, setFilterSections] = useState<FilterSection[]>([]);
@@ -1001,8 +1001,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
    // Debounced search change function
    debouncedSearchChangeRef.current = createDebouncedFunction(
      (projectId: string, value: string) => {
-        // Always use taskReducer search for list view since that's what we read from
-        dispatch(setSearch(value));
+        // Use taskManagement search for list view
+        dispatch(setTaskManagementSearch(value));

        // Trigger task refetch with new search value
        dispatch(fetchTasksV3(projectId));
@@ -1142,6 +1142,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
        }
      } else {
        // Use debounced search for list view
+        dispatch(setTaskManagementSearch(value));
        if (projectId) {
          debouncedSearchChangeRef.current?.(projectId, value);
        }
@@ -1177,8 +1178,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla

      // Prepare all Redux actions to be dispatched together
      const reduxUpdates = () => {
-        // Clear search - always use taskReducer for list view
-        dispatch(setSearch(''));
+        // Clear search - use taskManagementSearch for list view
+        dispatch(setTaskManagementSearch(''));

        // Clear label filters
        const clearedLabels = currentTaskLabels.map(label => ({
@@ -1249,7 +1250,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
          <SearchFilter
            value={searchValue}
            onChange={handleSearchChange}
-            placeholder="Search tasks..."
+            placeholder="Search tasks by name or key..."
            themeClasses={themeClasses}
          />

--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -227,8 +227,8 @@ export const fetchTasksV3 = createAsyncThunk(
      // Get selected priorities from taskReducer
      const selectedPriorities = state.taskReducer.priorities.join(' ');

-      // Get search value from taskReducer
-      const searchValue = state.taskReducer.search || '';
+      // Get search value from taskManagement slice
+      const searchValue = state.taskManagement.search || '';

      // Get archived state from task management slice
      const archivedState = state.taskManagement.archived;