feat: unify tasks board component

webapp/src/views/projects/tasks/TasksBoard.tsx → webapp/src/component/task/TasksBoard.tsx

@@ -1,19 +1,16 @@
 import { Box, styled, useTheme } from '@mui/material';
-
-import { TaskFilterType } from 'tg.component/task/taskFilter/TaskFilterPopover';
-import { useProject } from 'tg.hooks/useProject';
-import { components, operations } from 'tg.service/apiSchema.generated';
-
+import { components } from 'tg.service/apiSchema.generated';
 import { BoxLoading } from 'tg.component/common/BoxLoading';
 import { BoardColumn } from 'tg.component/task/BoardColumn';
-import { useProjectBoardTasks } from './useProjectBoardTasks';
 import { useTranslate } from '@tolgee/react';
 import { LoadingButton } from '@mui/lab';
+
 import { useTaskStateTranslation } from 'tg.translationTools/useTaskStateTranslation';
 import { useStateColor } from 'tg.component/task/TaskState';
+import type { useProjectBoardTasks } from 'tg.views/projects/tasks/useProjectBoardTasks';
 
 type TaskModel = components['schemas']['TaskModel'];
-type QueryParameters = operations['getTasks_1']['parameters']['query'];
+type SimpleProjectModel = components['schemas']['SimpleProjectModel'];
 
 const StyledColumns = styled(Box)`
  padding-top: 12px;
@@ -28,53 +25,30 @@ const StyledContainer = styled(Box)`
  overflow: auto;
 `;
 
+type TasksLoadable = ReturnType<typeof useProjectBoardTasks>;
+
 type Props = {
  showClosed: boolean;
- filter: TaskFilterType;
  onOpenDetail: (task: TaskModel) => void;
- search: string;
+ newTasks: TasksLoadable;
+ inProgressTasks: TasksLoadable;
+ doneTasks: TasksLoadable;
+ project?: SimpleProjectModel;
 };
 
 export const TasksBoard = ({
  showClosed,
- filter,
  onOpenDetail,
- search,
+ newTasks,
+ inProgressTasks,
+ doneTasks,
+ project,
 }: Props) => {
- const project = useProject();
  const theme = useTheme();
  const { t } = useTranslate();
  const translateState = useTaskStateTranslation();
  const stateColor = useStateColor();
 
- const query = {
- size: 20,
- search,
- sort: ['createdAt,desc'],
- filterAssignee: filter.assignees,
- filterLanguage: filter.languages,
- filterType: filter.types,
- } satisfies QueryParameters;
-
- const newTasks = useProjectBoardTasks({
- projectId: project.id,
- query: { ...query, filterState: ['NEW'] },
- });
-
- const inProgressTasks = useProjectBoardTasks({
- projectId: project.id,
- query: { ...query, filterState: ['IN_PROGRESS'] },
- });
-
- const doneTasks = useProjectBoardTasks({
- projectId: project.id,
- query: {
- ...query,
- filterState: showClosed ? ['DONE', 'CLOSED'] : ['DONE'],
- filterDoneMinClosedAt: filter.doneMinClosedAt,
- },
- });
-
  const canFetchMore =
  newTasks.hasNextPage ||
  inProgressTasks.hasNextPage ||

webapp/src/component/task/tasksHeader/TasksHeader.tsx

@@ -0,0 +1,16 @@
+import { TasksHeaderBig } from './TasksHeaderBig';
+import { TasksHeaderCompact } from './TasksHeaderCompact';
+
+type Props = React.ComponentProps<typeof TasksHeaderBig> & { isSmall: boolean };
+
+export const TasksHeader = ({ isSmall, ...props }: Props) => {
+ return (
+ <>
+ {isSmall ? (
+ <TasksHeaderCompact {...props} />
+ ) : (
+ <TasksHeaderBig {...props} />
+ )}
+ </>
+ );
+};

webapp/src/views/projects/tasks/TasksHeader.tsx → webapp/src/component/task/tasksHeader/TasksHeaderBig.tsx

@@ -21,8 +21,10 @@ import {
 import { useTranslate } from '@tolgee/react';
 import { TaskFilterType } from 'tg.component/task/taskFilter/TaskFilterPopover';
 import { TaskFilter } from 'tg.component/task/taskFilter/TaskFilter';
-import { useProject } from 'tg.hooks/useProject';
 import { LabelHint } from 'tg.component/common/LabelHint';
+import { components } from 'tg.service/apiSchema.generated';
+
+type SimpleProjectModel = components['schemas']['SimpleProjectModel'];
 
 const StyledContainer = styled(Box)`
  display: flex;
@@ -47,9 +49,10 @@ type Props = {
  onAddTask?: () => void;
  view: TaskView;
  onViewChange: (view: TaskView) => void;
+ project?: SimpleProjectModel;
 };
 
-export const TasksHeader = ({
+export const TasksHeaderBig = ({
  sx,
  className,
  onSearchChange,
@@ -60,11 +63,11 @@ export const TasksHeader = ({
  onAddTask,
  view,
  onViewChange,
+ project,
 }: Props) => {
  const [localSearch, setLocalSearch] = useState('');
  const onDebouncedSearchChange = useDebounceCallback(onSearchChange, 500);
  const { t } = useTranslate();
- const project = useProject();
 
  return (
  <StyledContainer {...{ sx, className }}>

webapp/src/views/projects/tasks/TasksHeaderCompact.tsx → webapp/src/component/task/tasksHeader/TasksHeaderCompact.tsx

@@ -16,11 +16,13 @@ import {
  TaskFilterPopover,
  TaskFilterType,
 } from 'tg.component/task/taskFilter/TaskFilterPopover';
-import { useProject } from 'tg.hooks/useProject';
 import { LabelHint } from 'tg.component/common/LabelHint';
 import { filterEmpty } from 'tg.component/task/taskFilter/taskFilterUtils';
 import { useApiQuery } from 'tg.service/http/useQueryApi';
 import { HeaderSearchField } from 'tg.component/layout/HeaderSearchField';
+import { components } from 'tg.service/apiSchema.generated';
+
+type SimpleProjectModel = components['schemas']['SimpleProjectModel'];
 
 const StyledContainer = styled(Box)`
  display: flex;
@@ -59,6 +61,7 @@ type Props = {
  onAddTask?: () => void;
  view: TaskView;
  onViewChange: (view: TaskView) => void;
+ project?: SimpleProjectModel;
 };
 
 export const TasksHeaderCompact = ({
@@ -70,14 +73,12 @@ export const TasksHeaderCompact = ({
  filter,
  onFilterChange,
  onAddTask,
- view,
- onViewChange,
+ project,
 }: Props) => {
  const [localSearch, setLocalSearch] = useState('');
  const [searchOpen, setSearchOpen] = useState(false);
  const onDebouncedSearchChange = useDebounceCallback(onSearchChange, 500);
  const { t } = useTranslate();
- const project = useProject();
  const filtersAnchorEl = useRef(null);
  const [filtersOpen, setFiltersOpen] = useState(false);
 

webapp/src/views/myTasks/MyTasksBoard.tsx

@@ -1,26 +1,12 @@
-import { Box, styled, useTheme } from '@mui/material';
-
 import { TaskFilterType } from 'tg.component/task/taskFilter/TaskFilterPopover';
 import { components, operations } from 'tg.service/apiSchema.generated';
 
-import { BoxLoading } from 'tg.component/common/BoxLoading';
-import { BoardColumn } from 'tg.component/task/BoardColumn';
 import { useMyBoardTask } from './useMyBoardTask';
-import LoadingButton from 'tg.component/common/form/LoadingButton';
-import { useTranslate } from '@tolgee/react';
-import { useTaskStateTranslation } from 'tg.translationTools/useTaskStateTranslation';
-import { useStateColor } from 'tg.component/task/TaskState';
+import { TasksBoard } from 'tg.component/task/TasksBoard';
 
 type TaskWithProjectModel = components['schemas']['TaskWithProjectModel'];
 type QueryParameters = operations['getTasks_1']['parameters']['query'];
 
-const StyledColumns = styled(Box)`
- padding-top: 12px;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: 16px;
-`;
-
 type Props = {
  showClosed: boolean;
  filter: TaskFilterType;
@@ -34,11 +20,6 @@ export const MyTasksBoard = ({
  onOpenDetail,
  search,
 }: Props) => {
- const { t } = useTranslate();
- const translateState = useTaskStateTranslation();
- const stateColor = useStateColor();
- const theme = useTheme();
-
  const query = {
  size: 20,
  search,
@@ -63,90 +44,13 @@ export const MyTasksBoard = ({
  },
  });
 
- const canFetchMore =
- newTasks.hasNextPage ||
- inProgressTasks.hasNextPage ||
- doneTasks.hasNextPage;
-
- function handleFetchMore() {
- newTasks.fetchNextPage();
- inProgressTasks.fetchNextPage();
- doneTasks.fetchNextPage();
- }
-
- const isLoading =
- newTasks.isLoading || inProgressTasks.isLoading || doneTasks.isLoading;
- const isFetching =
- newTasks.isFetching || inProgressTasks.isFetching || doneTasks.isFetching;
-
- if (isLoading) {
- return (
- <Box display="flex" justifyContent="center">
- <BoxLoading />
- </Box>
- );
- }
-
  return (
- <StyledColumns>
- <BoardColumn
- state="NEW"
- tasks={newTasks.items}
- total={newTasks.data?.pages?.[0]?.page?.totalElements ?? 0}
- onDetailOpen={(t) => onOpenDetail(t as TaskWithProjectModel)}
- />
- <BoardColumn
- state="IN_PROGRESS"
- tasks={inProgressTasks.items}
- total={inProgressTasks.data?.pages?.[0]?.page?.totalElements ?? 0}
- onDetailOpen={(t) => onOpenDetail(t as TaskWithProjectModel)}
- />
- <BoardColumn
- state="DONE"
- title={
- showClosed ? (
- <Box>
- <Box display="inline" color={stateColor('DONE')}>
- {translateState('DONE')}
- </Box>
- <Box display="inline" color={stateColor('CLOSED')}>
- {' & '}
- {translateState('CLOSED')}
- </Box>
- </Box>
- ) : (
- <Box>
- <Box display="inline" color={stateColor('DONE')}>
- {translateState('DONE')}
- </Box>
- <Box
- display="inline"
- textTransform="lowercase"
- fontSize="12px"
- color={theme.palette.text.secondary}
- >
- {' '}
- {t('task_board_last_30_days')}
- </Box>
- </Box>
- )
- }
- tasks={doneTasks.items}
- total={doneTasks.data?.pages?.[0]?.page?.totalElements ?? 0}
- onDetailOpen={(t) => onOpenDetail(t as TaskWithProjectModel)}
- />
- {canFetchMore && (
- <Box
- display="flex"
- justifyContent="center"
- gridColumn="1 / -1"
- paddingBottom={4}
- >
- <LoadingButton loading={isFetching} onClick={handleFetchMore}>
- {t('global_load_more')}
- </LoadingButton>
- </Box>
- )}
- </StyledColumns>
+ <TasksBoard
+ showClosed={showClosed}
+ onOpenDetail={(t) => onOpenDetail(t as TaskWithProjectModel)}
+ doneTasks={doneTasks}
+ inProgressTasks={inProgressTasks}
+ newTasks={newTasks}
+ />
  );
 };