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}
+    />
   );
 };