bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
chamikaJ
2025-07-09 17:11:15 +05:30
parent db9b481e8d
commit 8f5de8f1a1
4 changed files with 73 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
worklenz-backend/src/controllers/tasks-controller-v2.ts
View File

@@ -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;

35
worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
View File

@@ -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,9 +131,13 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
<div className="w-4" />
<div className="w-2" />
{!isAdding ? (
{isActive ? (
!isAdding ? (
<button
onClick={() => setIsAdding(true)}
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" />
@@ -153,6 +161,10 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
}}
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,7 +266,11 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
{!isLoadingSubtasks && (
<>
{/* Render all add subtask rows */}
{addSubtaskRows.map((rowId, index) => (
{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}
@@ -258,10 +278,13 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
visibleColumns={visibleColumns}
onSubtaskAdded={handleSubtaskAdded}
rowId={rowId}
autoFocus={index === addSubtaskRows.length - 1} // Auto-focus the latest row
autoFocus={isLastRow && activeRowId === rowId} // Auto-focus the latest row when it becomes active
isActive={isRowActive}
onActivate={handleRowActivate}
/>
</div>
))}
);
})}
</>
)}
</>

17
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -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}
/>

4
worklenz-frontend/src/features/task-management/task-management.slice.ts
View File

@@ -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;