From c9f09b550687847274e7a28d780553d59ee082b8 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 9 Jul 2024 16:47:26 +1200 Subject: [PATCH 01/13] add tasks section --- .../datatrak-web/src/api/queries/useTasks.ts | 27 ++-- .../features/Tasks/TasksTable/TasksTable.tsx | 14 +- .../src/views/LandingPage/LandingPage.tsx | 14 +- .../views/LandingPage/SurveySelectSection.tsx | 43 ++--- .../src/views/LandingPage/TasksSection.tsx | 151 ++++++++++++++++++ 5 files changed, 207 insertions(+), 42 deletions(-) create mode 100644 packages/datatrak-web/src/views/LandingPage/TasksSection.tsx diff --git a/packages/datatrak-web/src/api/queries/useTasks.ts b/packages/datatrak-web/src/api/queries/useTasks.ts index 816b5b28fa..0c5b6cbf53 100644 --- a/packages/datatrak-web/src/api/queries/useTasks.ts +++ b/packages/datatrak-web/src/api/queries/useTasks.ts @@ -9,7 +9,7 @@ import { get } from '../api'; type Filter = { id: string; - value: string; + value: string | object; }; type SortBy = { @@ -17,13 +17,15 @@ type SortBy = { desc: boolean; }; -export const useTasks = ( - projectId?: string, - pageSize?: number, - page?: number, - filters: Filter[] = [], - sortBy?: SortBy[], -) => { +interface UseTasksOptions { + projectId?: string; + pageSize?: number; + page?: number; + filters?: Filter[]; + sortBy?: SortBy[]; +} + +export const useTasks = ({ projectId, pageSize, page, filters = [], sortBy }: UseTasksOptions) => { return useQuery( ['tasks', projectId, pageSize, page, filters, sortBy], (): Promise => @@ -31,18 +33,11 @@ export const useTasks = ( params: { pageSize, page, - filters: [ - ...filters, - { - id: 'survey.project_id', - value: projectId, - }, - ], + filters, sort: sortBy?.map(({ id, desc }) => `${id} ${desc ? 'DESC' : 'ASC'}`) ?? [], }, }), { - enabled: !!projectId, // This needs to be true so that when changing the page number, the total number of records is not reset keepPreviousData: true, }, diff --git a/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx b/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx index 560febc845..b5aa50d36f 100644 --- a/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx +++ b/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx @@ -145,7 +145,19 @@ const useTasksTable = () => { const urlFilters = searchParams.get('filters'); const filters = urlFilters ? JSON.parse(urlFilters) : []; - const { data, isLoading, isFetching } = useTasks(projectId, pageSize, page, filters, sortBy); + const { data, isLoading, isFetching } = useTasks({ + projectId, + pageSize, + page, + filters: [ + ...filters, + { + id: 'survey.project_id', + value: projectId, + }, + ], + sortBy, + }); const updateSorting = newSorting => { searchParams.set('sortBy', JSON.stringify(newSorting)); diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index 177985a749..13b8bc545a 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -11,6 +11,7 @@ import { SurveyResponsesSection } from './SurveyResponsesSection'; import { LeaderboardSection } from './LeaderboardSection'; import { ActivityFeedSection } from './ActivityFeedSection'; import { RecentSurveysSection } from './RecentSurveysSection'; +import { TasksSection } from './TasksSection'; import { DESKTOP_MEDIA_QUERY, HEADER_HEIGHT } from '../../constants'; const PageContainer = styled(BasePageContainer)` @@ -21,7 +22,7 @@ const PageContainer = styled(BasePageContainer)` const PageBody = styled.div` display: flex; flex-direction: column; - padding: 1.5rem 0; + padding: 1.5rem 0 1.5rem; width: 100%; max-width: 85rem; margin: 0 auto; @@ -33,7 +34,7 @@ const PageBody = styled.div` } ${DESKTOP_MEDIA_QUERY} { - padding-top: 4rem; + padding-top: 1rem; padding-bottom: 2.5rem; } `; @@ -60,6 +61,8 @@ const Grid = styled.div` grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-template-areas: + 'surveySelect surveySelect' + 'tasks tasks' 'recentSurveys leaderboard' 'recentResponses activityFeed'; @@ -72,7 +75,8 @@ const Grid = styled.div` ${({ theme }) => theme.breakpoints.up('lg')} { grid-template-columns: 23% 1fr 1fr 28%; grid-template-areas: - 'recentSurveys recentSurveys recentSurveys leaderboard' + 'surveySelect surveySelect surveySelect tasks' + 'recentSurveys recentSurveys recentSurveys tasks' 'recentResponses activityFeed activityFeed leaderboard'; > div { min-height: auto; @@ -80,7 +84,6 @@ const Grid = styled.div` } ${DESKTOP_MEDIA_QUERY} { - margin-top: 2.5rem; gap: 1.81rem; } `; @@ -89,8 +92,9 @@ export const LandingPage = () => { return ( - + + diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index 4b631a23bc..2197af75b2 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -11,7 +11,8 @@ import { Button, ButtonLink as BaseButtonLink } from '../../components'; const TUPAIA_REDIRECT_URL = process.env.REACT_APP_TUPAIA_REDIRECT_URL || 'https://tupaia.org'; -const SurveyAlert = styled.div` +const SectionContainer = styled.div` + grid-area: surveySelect; background-color: ${({ theme }) => theme.palette.background.paper}; border-radius: 0.625rem; padding: 1rem; @@ -19,8 +20,22 @@ const SurveyAlert = styled.div` position: relative; align-items: flex-start; justify-content: space-between; + ${({ theme }) => theme.breakpoints.up('sm')} { - padding: 1rem 2.3rem; + padding: 1rem 3rem 1rem 2.2rem; + margin-top: 1.95rem; + } +`; + +const SectionContent = styled.div` + display: flex; + flex-direction: column-reverse; + width: 70%; + padding-right: 2rem; + ${({ theme }) => theme.breakpoints.up('md')} { + flex-direction: row; + width: 100%; + align-items: center; } `; @@ -73,7 +88,7 @@ const TextWrapper = styled.div` const Text = styled(Typography)` ${({ theme }) => theme.breakpoints.up('sm')} { - font-size: 1rem; + font-size: 0.9rem; line-height: 1.5; } `; @@ -94,7 +109,7 @@ const SurveysImage = styled.img` top: -1.5rem; ${({ theme }) => theme.breakpoints.up('lg')} { top: -20%; - right: 2rem; + right: -1rem; height: 150%; } @@ -104,22 +119,10 @@ const SurveysImage = styled.img` } `; -const SurveyAlertContent = styled.div` - display: flex; - flex-direction: column-reverse; - width: 70%; - padding-right: 2rem; - ${({ theme }) => theme.breakpoints.up('md')} { - flex-direction: row; - width: 100%; - align-items: center; - } -`; - export const SurveySelectSection = () => { return ( - - + + Select survey + +); diff --git a/packages/datatrak-web/src/features/Tasks/index.ts b/packages/datatrak-web/src/features/Tasks/index.ts index 9ff3bda7a1..f485b56f39 100644 --- a/packages/datatrak-web/src/features/Tasks/index.ts +++ b/packages/datatrak-web/src/features/Tasks/index.ts @@ -5,3 +5,5 @@ export { TaskPageHeader } from './TaskPageHeader'; export { TasksTable } from './TasksTable'; +export { NoTasksSection } from './NoTasksSection'; +export { TaskTile } from './TaskTile'; diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index 6f47cddb9a..13e10ff5e8 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -7,9 +7,11 @@ import React from 'react'; import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import { Link } from 'react-router-dom'; +import { FlexColumn, FlexSpaceBetween } from '@tupaia/ui-components'; import { SectionHeading } from './SectionHeading'; import { useCurrentUserContext, useTasks } from '../../api'; -import { TaskTile } from '../../features/Tasks/TaskTile'; +import { NoTasksSection, TaskTile } from '../../features/Tasks'; +import { ROUTES } from '../../constants'; const SectionContainer = styled.section` grid-area: tasks; @@ -25,21 +27,10 @@ const Paper = styled.div` overflow: auto; `; -const TasksContainer = styled.div` - display: flex; - flex-direction: column; -`; - const TextButton = styled(Button)` font-size: 0.75rem; `; -const SectionHeader = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -`; - export const TasksSection = () => { const { id: userId } = useCurrentUserContext(); const filters = [ @@ -52,22 +43,32 @@ export const TasksSection = () => { }, }, ]; - const { data } = useTasks({ filters }); + const { data, isFetching } = useTasks({ filters }); + + if (isFetching) { + return 'loading...'; + } return ( - + My tasks - - View more... - - + {data.tasks.length < 0 && ( + + View more... + + )} + - - {data?.tasks.map(task => ( - - ))} - + {data?.tasks?.length < 0 ? ( + + {data?.tasks.map(task => ( + + ))} + + ) : ( + + )} ); From 041c5f40b2128f70867a0d37b23dbfc95b4ab1b3 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Thu, 11 Jul 2024 17:01:39 +1200 Subject: [PATCH 04/13] styling --- .../src/features/Tasks/NoTasksSection.tsx | 22 +++++++++---- .../src/features/Tasks/TaskTile.tsx | 6 ++-- .../src/views/LandingPage/TasksSection.tsx | 31 +++++++------------ 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx index 4ebac30c95..b99d30fad6 100644 --- a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx +++ b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx @@ -5,10 +5,14 @@ import React from 'react'; import styled from 'styled-components'; import { Typography } from '@material-ui/core'; -import { FlexColumn } from '@tupaia/ui-components'; +import { Button as UIButton } from '@tupaia/ui-components'; import { Link } from 'react-router-dom'; import { ROUTES } from '../../constants'; -import { Button } from '../../components'; + +const Container = styled.div` + text-align: center; + padding: 0.5rem 0.5rem 1rem; +`; const Image = styled.img.attrs({ src: '/tupaia-high-five.svg', @@ -22,12 +26,18 @@ const Image = styled.img.attrs({ const Text = styled(Typography)` text-align: center; - font-size: 15px; - line-height: 22px; + font-size: 0.93rem; + line-height: 1.5; margin-bottom: 1rem; `; + +const Button = styled(UIButton)` + font-size: 0.75rem; + max-width: 10rem; + padding: 0.25rem 1rem; +`; export const NoTasksSection = () => ( - + Congratulations, you have no tasks to complete! You can view all other tasks for your project @@ -36,5 +46,5 @@ export const NoTasksSection = () => ( - + ); diff --git a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx index 5cfc4b7813..8a0916c78b 100644 --- a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx +++ b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx @@ -73,10 +73,12 @@ const CommentsContainer = styled.div` } `; -const Comments = () => { +// Todo: Update with actual comments count and set default to 0 +const Comments = ({ commentsCount = 2 }) => { return ( - 2 + + {commentsCount} ); }; diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index 13e10ff5e8..6ddf10f605 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -5,9 +5,8 @@ import React from 'react'; import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; import { Link } from 'react-router-dom'; -import { FlexColumn, FlexSpaceBetween } from '@tupaia/ui-components'; +import { FlexSpaceBetween, TextButton } from '@tupaia/ui-components'; import { SectionHeading } from './SectionHeading'; import { useCurrentUserContext, useTasks } from '../../api'; import { NoTasksSection, TaskTile } from '../../features/Tasks'; @@ -27,8 +26,9 @@ const Paper = styled.div` overflow: auto; `; -const TextButton = styled(Button)` +const ViewMoreButton = styled(TextButton)` font-size: 0.75rem; + font-weight: 500; `; export const TasksSection = () => { @@ -43,32 +43,23 @@ export const TasksSection = () => { }, }, ]; - const { data, isFetching } = useTasks({ filters }); - - if (isFetching) { - return 'loading...'; - } + const { data, isSuccess } = useTasks({ filters }); + const hasTasks = isSuccess && data?.tasks.length > 0; + const hasNoTasks = isSuccess && data?.tasks.length === 0; return ( My tasks - {data.tasks.length < 0 && ( - + {hasTasks && ( + View more... - + )} - {data?.tasks?.length < 0 ? ( - - {data?.tasks.map(task => ( - - ))} - - ) : ( - - )} + {hasTasks && data?.tasks.map(task => )} + {hasNoTasks && } ); From a3ddb181f107cc962c02e7155db0695d89c6fce1 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 16 Jul 2024 11:44:50 +1200 Subject: [PATCH 05/13] styling landing page --- .../src/views/LandingPage/LandingPage.tsx | 11 ++++---- .../views/LandingPage/SurveySelectSection.tsx | 27 +++++++++---------- .../src/views/LandingPage/TasksSection.tsx | 8 ++++-- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index 13b8bc545a..f10292cf61 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -22,7 +22,7 @@ const PageContainer = styled(BasePageContainer)` const PageBody = styled.div` display: flex; flex-direction: column; - padding: 1.5rem 0 1.5rem; + padding: 0.5rem 0 1.5rem; width: 100%; max-width: 85rem; margin: 0 auto; @@ -30,7 +30,7 @@ const PageBody = styled.div` ${({ theme }) => theme.breakpoints.up('md')} { height: calc(100vh - ${HEADER_HEIGHT}); - padding: 2rem 2.75rem 0.8rem 2.75rem; + padding: 1rem 2.75rem 0.8rem 2.75rem; } ${DESKTOP_MEDIA_QUERY} { @@ -61,10 +61,9 @@ const Grid = styled.div` grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-template-areas: - 'surveySelect surveySelect' - 'tasks tasks' - 'recentSurveys leaderboard' - 'recentResponses activityFeed'; + 'surveySelect surveySelect tasks tasks' + 'recentSurveys recentSurveys recentResponses recentResponses' + 'activityFeed activityFeed leaderboard leaderboard'; > section { margin: 0; diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index 2197af75b2..4d2396426e 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -11,7 +11,7 @@ import { Button, ButtonLink as BaseButtonLink } from '../../components'; const TUPAIA_REDIRECT_URL = process.env.REACT_APP_TUPAIA_REDIRECT_URL || 'https://tupaia.org'; -const SectionContainer = styled.div` +const SectionContainer = styled.section` grid-area: surveySelect; background-color: ${({ theme }) => theme.palette.background.paper}; border-radius: 0.625rem; @@ -20,10 +20,11 @@ const SectionContainer = styled.div` position: relative; align-items: flex-start; justify-content: space-between; + overflow: visible !important; ${({ theme }) => theme.breakpoints.up('sm')} { padding: 1rem 3rem 1rem 2.2rem; - margin-top: 1.95rem; + margin-top: 0.5rem; } `; @@ -71,10 +72,11 @@ const ButtonWrapper = styled.div` `; const TextWrapper = styled.div` - margin: 0; + margin-bottom: 1rem; display: flex; flex-direction: column; ${({ theme }) => theme.breakpoints.up('md')} { + margin-bottom: 0; padding-right: 4rem; max-width: 75%; padding-left: 2rem; @@ -94,29 +96,26 @@ const Text = styled(Typography)` `; const DesktopText = styled.span` - ${({ theme }) => theme.breakpoints.down('sm')} { + ${({ theme }) => theme.breakpoints.down('xs')} { display: none; } `; const SurveysImage = styled.img` - width: auto; - height: calc(100% + 3rem); position: absolute; + width: auto; display: flex; align-items: center; - right: 0; - top: -1.5rem; + top: 50%; + transform: translateY(-50%); + right: 1rem; + height: 100%; + ${({ theme }) => theme.breakpoints.up('lg')} { - top: -20%; + top: 60%; right: -1rem; height: 150%; } - - ${DESKTOP_MEDIA_QUERY} { - top: -2rem; - height: calc(100% + 6rem); - } `; export const SurveySelectSection = () => { diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index 6ddf10f605..75862c342c 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -18,6 +18,10 @@ const SectionContainer = styled.section` flex-direction: column; `; +const SectionHeader = styled(FlexSpaceBetween)` + height: 2rem; +`; + const Paper = styled.div` background: ${({ theme }) => theme.palette.background.paper}; border-radius: 10px; @@ -49,14 +53,14 @@ export const TasksSection = () => { return ( - + My tasks {hasTasks && ( View more... )} - + {hasTasks && data?.tasks.map(task => )} {hasNoTasks && } From 683c94c0df33c4c41d4c312272b37facfb546568 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 16 Jul 2024 12:38:08 +1200 Subject: [PATCH 06/13] styling --- .../src/features/Tasks/TaskTile.tsx | 22 +++++++++--------- .../src/views/LandingPage/LandingPage.tsx | 11 +++++---- .../src/views/LandingPage/SectionHeading.tsx | 1 + .../views/LandingPage/SurveySelectSection.tsx | 8 +++---- .../src/views/LandingPage/TasksSection.tsx | 23 ++++++++++++------- 5 files changed, 37 insertions(+), 28 deletions(-) diff --git a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx index 8a0916c78b..ee5e56538f 100644 --- a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx +++ b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx @@ -3,31 +3,31 @@ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ +import React from 'react'; +import styled from 'styled-components'; import { generatePath, Link } from 'react-router-dom'; import ChatIcon from '@material-ui/icons/ChatBubbleOutline'; import { ROUTES } from '../../constants'; import { StatusPill } from './StatusPill'; import { displayDate } from '../../utils'; import { ButtonLink } from '../../components'; -import React from 'react'; -import styled from 'styled-components'; const TileContainer = styled.div` display: flex; justify-content: space-between; border-radius: 10px; border: 1px solid ${({ theme }) => theme.palette.divider}; - height: 60px; + //height: 3.75rem; width: 100%; - padding: 6px 11px 5px; - margin-bottom: 0.5rem; + padding: 0.4rem 0.7rem; + margin-block-end: 0.5rem; .MuiButton-root { - padding: 3px 16px; + padding: 0.2rem 1.2rem; } .MuiButton-label { - font-size: 12px; + font-size: 0.75rem; } `; @@ -36,13 +36,13 @@ const TileTitle = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin-bottom: 4px; + margin-block-end: 0.25rem; color: ${({ theme }) => theme.palette.text.primary}; `; const TileLeft = styled.div` flex: 1; - padding-right: 1rem; + padding-inline-end: 1rem; min-width: 0; `; @@ -53,7 +53,7 @@ const TileContent = styled.div` align-items: center; > span { - margin-right: 5px; + margin-inline-end: 0.6rem; } `; @@ -69,7 +69,7 @@ const CommentsContainer = styled.div` .MuiSvgIcon-root { font-size: 1rem; - margin-right: 0.2rem; + margin-inline-end: 0.2rem; } `; diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index f10292cf61..86a4e6d8ac 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -30,12 +30,11 @@ const PageBody = styled.div` ${({ theme }) => theme.breakpoints.up('md')} { height: calc(100vh - ${HEADER_HEIGHT}); - padding: 1rem 2.75rem 0.8rem 2.75rem; + padding: 0.2rem 1rem 0.8rem; } ${DESKTOP_MEDIA_QUERY} { - padding-top: 1rem; - padding-bottom: 2.5rem; + padding: 1rem 2.75rem 2rem; } `; @@ -72,7 +71,7 @@ const Grid = styled.div` } ${({ theme }) => theme.breakpoints.up('lg')} { - grid-template-columns: 23% 1fr 1fr 28%; + grid-template-columns: 23% 1fr 1fr 30%; grid-template-areas: 'surveySelect surveySelect surveySelect tasks' 'recentSurveys recentSurveys recentSurveys tasks' @@ -88,12 +87,14 @@ const Grid = styled.div` `; export const LandingPage = () => { + const showTasks = process.env.REACT_APP_TUPAIA_TASKS; + return ( - + {showTasks && } diff --git a/packages/datatrak-web/src/views/LandingPage/SectionHeading.tsx b/packages/datatrak-web/src/views/LandingPage/SectionHeading.tsx index bd8236837b..d1bc45fe2b 100644 --- a/packages/datatrak-web/src/views/LandingPage/SectionHeading.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SectionHeading.tsx @@ -10,6 +10,7 @@ export const SectionHeading = styled(Typography).attrs({ variant: 'h2', })` font-size: 1rem; + line-height: 1.2; font-weight: 500; margin-bottom: 0.75rem; `; diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index 4d2396426e..a0ae25fbf9 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Typography } from '@material-ui/core'; import styled from 'styled-components'; -import { DESKTOP_MEDIA_QUERY, ROUTES } from '../../constants'; +import { ROUTES } from '../../constants'; import { Button, ButtonLink as BaseButtonLink } from '../../components'; const TUPAIA_REDIRECT_URL = process.env.REACT_APP_TUPAIA_REDIRECT_URL || 'https://tupaia.org'; @@ -24,7 +24,7 @@ const SectionContainer = styled.section` ${({ theme }) => theme.breakpoints.up('sm')} { padding: 1rem 3rem 1rem 2.2rem; - margin-top: 0.5rem; + margin-top: 2.1rem !important; } `; @@ -112,9 +112,9 @@ const SurveysImage = styled.img` height: 100%; ${({ theme }) => theme.breakpoints.up('lg')} { - top: 60%; + top: 50%; right: -1rem; - height: 150%; + height: 160%; } `; diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index 75862c342c..d8c13be09f 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -18,10 +18,6 @@ const SectionContainer = styled.section` flex-direction: column; `; -const SectionHeader = styled(FlexSpaceBetween)` - height: 2rem; -`; - const Paper = styled.div` background: ${({ theme }) => theme.palette.background.paper}; border-radius: 10px; @@ -31,8 +27,19 @@ const Paper = styled.div` `; const ViewMoreButton = styled(TextButton)` - font-size: 0.75rem; - font-weight: 500; + padding-block: 0; + margin-block-end: 0.5rem; + + .MuiButton-label { + font-size: 0.75rem; + font-weight: 700; + color: #4e3838; + } + + &:hover { + text-decoration: underline; + background-color: initial; + } `; export const TasksSection = () => { @@ -53,14 +60,14 @@ export const TasksSection = () => { return ( - + My tasks {hasTasks && ( View more... )} - + {hasTasks && data?.tasks.map(task => )} {hasNoTasks && } From ddf3eb2fb1e5f92ef69009f25458acbbdb81deea Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 16 Jul 2024 12:39:35 +1200 Subject: [PATCH 07/13] Update TaskTile.tsx --- packages/datatrak-web/src/features/Tasks/TaskTile.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx index ee5e56538f..745420a257 100644 --- a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx +++ b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx @@ -17,7 +17,6 @@ const TileContainer = styled.div` justify-content: space-between; border-radius: 10px; border: 1px solid ${({ theme }) => theme.palette.divider}; - //height: 3.75rem; width: 100%; padding: 0.4rem 0.7rem; margin-block-end: 0.5rem; From f07a3faeb4207e47fc8f2841e14f6ce380ab4681 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Tue, 16 Jul 2024 16:37:56 +1200 Subject: [PATCH 08/13] pr changes --- .../src/features/Tasks/NoTasksSection.tsx | 2 +- .../src/features/Tasks/TaskTile.tsx | 8 ++++--- .../src/views/LandingPage/LandingPage.tsx | 1 + .../views/LandingPage/SurveySelectSection.tsx | 22 +++++++++---------- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx index b99d30fad6..0fab5fff20 100644 --- a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx +++ b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx @@ -28,7 +28,7 @@ const Text = styled(Typography)` text-align: center; font-size: 0.93rem; line-height: 1.5; - margin-bottom: 1rem; + margin-block-end: 1rem; `; const Button = styled(UIButton)` diff --git a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx index 745420a257..be1f2a707e 100644 --- a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx +++ b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx @@ -72,8 +72,10 @@ const CommentsContainer = styled.div` } `; -// Todo: Update with actual comments count and set default to 0 -const Comments = ({ commentsCount = 2 }) => { +const Comments = ({ commentsCount = 0 }) => { + if (!commentsCount) { + return null; + } return ( @@ -100,7 +102,7 @@ export const TaskTile = ({ task }) => { - Complete + Complete task diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index 86a4e6d8ac..018c5681f7 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -87,6 +87,7 @@ const Grid = styled.div` `; export const LandingPage = () => { + // Todo: Remove this once the feature is complete const showTasks = process.env.REACT_APP_TUPAIA_TASKS; return ( diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index a0ae25fbf9..8ce20245f2 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -24,7 +24,7 @@ const SectionContainer = styled.section` ${({ theme }) => theme.breakpoints.up('sm')} { padding: 1rem 3rem 1rem 2.2rem; - margin-top: 2.1rem !important; + margin-block-start: 2.1rem !important; } `; @@ -32,7 +32,7 @@ const SectionContent = styled.div` display: flex; flex-direction: column-reverse; width: 70%; - padding-right: 2rem; + padding-inline-end: 2rem; ${({ theme }) => theme.breakpoints.up('md')} { flex-direction: row; width: 100%; @@ -42,13 +42,12 @@ const SectionContent = styled.div` const ButtonLink = styled(BaseButtonLink)` font-size: 1rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline: 0.5rem; & ~ .MuiButtonBase-root { - margin-left: 0; // override default margin from ui-components + margin-inline-start: 0; // override default margin from ui-components } &:last-child { - margin-top: 1rem; + margin-block-start: 1rem; } `; @@ -66,24 +65,23 @@ const ButtonWrapper = styled.div` line-height: 1.1; padding: 0.75rem; &:last-child { - margin-top: 0.625rem; + margin-block-start: 0.625rem; } } `; const TextWrapper = styled.div` - margin-bottom: 1rem; + margin-block-end: 1rem; display: flex; flex-direction: column; ${({ theme }) => theme.breakpoints.up('md')} { - margin-bottom: 0; - padding-right: 4rem; + margin-block-end: 0; max-width: 75%; - padding-left: 2rem; + padding-inline: 2rem 4rem; } ${({ theme }) => theme.breakpoints.up('lg')} { - padding-right: 1rem; + padding-inline-end: 1rem; max-width: 80%; } `; From aab62e3d0484243fd11279b54070f0d6f4128dbd Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Thu, 18 Jul 2024 17:28:26 +1200 Subject: [PATCH 09/13] styling --- .../src/features/Tasks/NoTasksSection.tsx | 4 ++- .../src/features/Tasks/TaskTile.tsx | 1 + .../src/views/LandingPage/LandingPage.tsx | 1 + .../views/LandingPage/SurveySelectSection.tsx | 1 + .../src/views/LandingPage/TasksSection.tsx | 36 ++++++++++++++++--- 5 files changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx index 0fab5fff20..7f40692bd1 100644 --- a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx +++ b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx @@ -32,7 +32,9 @@ const Text = styled(Typography)` `; const Button = styled(UIButton)` - font-size: 0.75rem; + .MuiButton-label { + font-size: 0.75rem; + } max-width: 10rem; padding: 0.25rem 1rem; `; diff --git a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx index be1f2a707e..d53f41e9ff 100644 --- a/packages/datatrak-web/src/features/Tasks/TaskTile.tsx +++ b/packages/datatrak-web/src/features/Tasks/TaskTile.tsx @@ -14,6 +14,7 @@ import { ButtonLink } from '../../components'; const TileContainer = styled.div` display: flex; + text-align: left; justify-content: space-between; border-radius: 10px; border: 1px solid ${({ theme }) => theme.palette.divider}; diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index 018c5681f7..8ee33f56a1 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -71,6 +71,7 @@ const Grid = styled.div` } ${({ theme }) => theme.breakpoints.up('lg')} { + grid-template-rows: 10.5rem auto auto; grid-template-columns: 23% 1fr 1fr 30%; grid-template-areas: 'surveySelect surveySelect surveySelect tasks' diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index 8ce20245f2..60a639ba4f 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -21,6 +21,7 @@ const SectionContainer = styled.section` align-items: flex-start; justify-content: space-between; overflow: visible !important; + height: max-content; ${({ theme }) => theme.breakpoints.up('sm')} { padding: 1rem 3rem 1rem 2.2rem; diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index d8c13be09f..df6ec5d5bb 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -6,7 +6,7 @@ import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; -import { FlexSpaceBetween, TextButton } from '@tupaia/ui-components'; +import { FlexSpaceBetween, TextButton, Button as UIButton } from '@tupaia/ui-components'; import { SectionHeading } from './SectionHeading'; import { useCurrentUserContext, useTasks } from '../../api'; import { NoTasksSection, TaskTile } from '../../features/Tasks'; @@ -16,9 +16,13 @@ const SectionContainer = styled.section` grid-area: tasks; display: flex; flex-direction: column; + ${({ theme }) => theme.breakpoints.up('lg')} { + max-height: 21.5rem; + } `; const Paper = styled.div` + text-align: center; background: ${({ theme }) => theme.palette.background.paper}; border-radius: 10px; flex: 1; @@ -42,6 +46,15 @@ const ViewMoreButton = styled(TextButton)` } `; +const Button = styled(UIButton)` + margin: 0.3rem auto 0; + display: inline-block; + padding: 0.1rem 1rem 0.2rem; + .MuiButton-label { + font-size: 0.75rem; + } +`; + export const TasksSection = () => { const { id: userId } = useCurrentUserContext(); const filters = [ @@ -54,9 +67,11 @@ export const TasksSection = () => { }, }, ]; - const { data, isSuccess } = useTasks({ filters }); - const hasTasks = isSuccess && data?.tasks.length > 0; - const hasNoTasks = isSuccess && data?.tasks.length === 0; + const { data, isSuccess } = useTasks({ filters, pageSize: 5 }); + const tasks = data?.tasks ?? []; + const showTasksDashboardLink = data?.numberOfPages > 1; + const hasTasks = tasks.length > 0; + const hasNoTasks = isSuccess && tasks.length === 0; return ( @@ -69,7 +84,18 @@ export const TasksSection = () => { )} - {hasTasks && data?.tasks.map(task => )} + {hasTasks && ( + <> + {tasks.map(task => ( + + ))} + {showTasksDashboardLink && ( + + )} + + )} {hasNoTasks && } From 011c7e949e15fba354bde375a0bd3e6e23833063 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Fri, 19 Jul 2024 10:44:23 +1200 Subject: [PATCH 10/13] responsive styles --- .../src/features/Tasks/NoTasksSection.tsx | 19 +++++---- .../src/views/LandingPage/LandingPage.tsx | 17 ++++---- .../views/LandingPage/SurveySelectSection.tsx | 6 ++- .../src/views/LandingPage/TasksSection.tsx | 42 +++++++++++-------- 4 files changed, 48 insertions(+), 36 deletions(-) diff --git a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx index 7f40692bd1..d8b1455c0b 100644 --- a/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx +++ b/packages/datatrak-web/src/features/Tasks/NoTasksSection.tsx @@ -10,33 +10,38 @@ import { Link } from 'react-router-dom'; import { ROUTES } from '../../constants'; const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 100%; text-align: center; - padding: 0.5rem 0.5rem 1rem; `; const Image = styled.img.attrs({ src: '/tupaia-high-five.svg', alt: 'Illustration of two hands giving a high five', })` + flex: 1; height: auto; - max-width: 100%; - width: 8rem; + min-height: 5rem; + width: auto; margin: 0 auto 1rem; `; const Text = styled(Typography)` text-align: center; - font-size: 0.93rem; + font-size: 0.9rem; line-height: 1.5; - margin-block-end: 1rem; + margin-block-end: 0.5rem; `; const Button = styled(UIButton)` + padding: 0.25rem 1rem; + margin-block-end: 0.5rem; + .MuiButton-label { font-size: 0.75rem; } - max-width: 10rem; - padding: 0.25rem 1rem; `; export const NoTasksSection = () => ( diff --git a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx index 8ee33f56a1..304cf976fe 100644 --- a/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx +++ b/packages/datatrak-web/src/views/LandingPage/LandingPage.tsx @@ -32,10 +32,6 @@ const PageBody = styled.div` height: calc(100vh - ${HEADER_HEIGHT}); padding: 0.2rem 1rem 0.8rem; } - - ${DESKTOP_MEDIA_QUERY} { - padding: 1rem 2.75rem 2rem; - } `; const Grid = styled.div` @@ -44,6 +40,8 @@ const Grid = styled.div` flex-direction: column; margin-top: 1rem; min-height: 0; // This is needed to stop the grid overflowing the flex container + max-width: 38rem; + margin-inline: auto; .MuiButtonBase-root { margin-left: 0; // clear spacing of adjacent buttons @@ -57,12 +55,13 @@ const Grid = styled.div` ${({ theme }) => theme.breakpoints.up('md')} { display: grid; gap: 1.25rem; - grid-template-rows: auto auto; - grid-template-columns: 1fr 1fr; + grid-template-rows: 20rem auto auto; + grid-template-columns: 2fr 1fr; grid-template-areas: - 'surveySelect surveySelect tasks tasks' - 'recentSurveys recentSurveys recentResponses recentResponses' - 'activityFeed activityFeed leaderboard leaderboard'; + 'surveySelect tasks' + 'recentSurveys recentResponses' + 'activityFeed leaderboard'; + max-width: none; > section { margin: 0; diff --git a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx index 60a639ba4f..3505e838cf 100644 --- a/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/SurveySelectSection.tsx @@ -110,9 +110,11 @@ const SurveysImage = styled.img` right: 1rem; height: 100%; - ${({ theme }) => theme.breakpoints.up('lg')} { - top: 50%; + ${({ theme }) => theme.breakpoints.up('md')} { right: -1rem; + } + + ${({ theme }) => theme.breakpoints.up('lg')} { height: 160%; } `; diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index df6ec5d5bb..7882d205ef 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -11,6 +11,7 @@ import { SectionHeading } from './SectionHeading'; import { useCurrentUserContext, useTasks } from '../../api'; import { NoTasksSection, TaskTile } from '../../features/Tasks'; import { ROUTES } from '../../constants'; +import { LoadingTile } from '../../components'; const SectionContainer = styled.section` grid-area: tasks; @@ -67,11 +68,30 @@ export const TasksSection = () => { }, }, ]; - const { data, isSuccess } = useTasks({ filters, pageSize: 5 }); + const { data, isLoading, isSuccess } = useTasks({ filters, pageSize: 5 }); const tasks = data?.tasks ?? []; const showTasksDashboardLink = data?.numberOfPages > 1; - const hasTasks = tasks.length > 0; - const hasNoTasks = isSuccess && tasks.length === 0; + const hasTasks = isSuccess && tasks.length > 0; + + let Contents: React.ReactNode; + if (isLoading) { + Contents = ; + } else if (hasTasks) { + Contents = ( + <> + {tasks.map(task => ( + + ))} + {showTasksDashboardLink && ( + + )} + + ); + } else { + Contents = ; + } return ( @@ -83,21 +103,7 @@ export const TasksSection = () => { )} - - {hasTasks && ( - <> - {tasks.map(task => ( - - ))} - {showTasksDashboardLink && ( - - )} - - )} - {hasNoTasks && } - + {Contents} ); }; From a585cf8ce316d2fa0d5390ea03f9ba42e964e995 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Fri, 19 Jul 2024 11:05:41 +1200 Subject: [PATCH 11/13] Update useTasks.ts --- packages/datatrak-web/src/api/queries/useTasks.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/datatrak-web/src/api/queries/useTasks.ts b/packages/datatrak-web/src/api/queries/useTasks.ts index 0c5b6cbf53..440121fead 100644 --- a/packages/datatrak-web/src/api/queries/useTasks.ts +++ b/packages/datatrak-web/src/api/queries/useTasks.ts @@ -33,11 +33,18 @@ export const useTasks = ({ projectId, pageSize, page, filters = [], sortBy }: Us params: { pageSize, page, - filters, + filters: [ + ...filters, + { + id: 'survey.project_id', + value: projectId, + }, + ], sort: sortBy?.map(({ id, desc }) => `${id} ${desc ? 'DESC' : 'ASC'}`) ?? [], }, }), { + enabled: !!projectId, // This needs to be true so that when changing the page number, the total number of records is not reset keepPreviousData: true, }, From fd556ca9f53b54562b52323be1c68a7e6406190e Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Fri, 19 Jul 2024 11:35:34 +1200 Subject: [PATCH 12/13] fix use tasks --- .../src/apiV2/tasks/GETTasks.js | 23 +++++++++++-------- .../src/routes/TasksRoute.ts | 2 ++ .../features/Tasks/TasksTable/TasksTable.tsx | 2 +- .../src/views/LandingPage/TasksSection.tsx | 12 ++++++---- 4 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/central-server/src/apiV2/tasks/GETTasks.js b/packages/central-server/src/apiV2/tasks/GETTasks.js index 457c72c27e..65fa0fd7a4 100644 --- a/packages/central-server/src/apiV2/tasks/GETTasks.js +++ b/packages/central-server/src/apiV2/tasks/GETTasks.js @@ -26,20 +26,23 @@ export class GETTasks extends GETHandler { } async getDbQueryOptions() { - const { multiJoin, sort, ...restOfOptions } = await super.getDbQueryOptions(); + const { multiJoin, sort, rawSort, ...restOfOptions } = await super.getDbQueryOptions(); - return { + const options = { ...restOfOptions, - // Strip table prefix from `task_status` and `assignee_name` as these are customColumns - sort: - !restOfOptions.rawSort && - sort?.map(s => - s - .replace('task.task_status', 'task_status') - .replace('task.assignee_name', 'assignee_name'), - ), // Appending the multi-join from the Record class so that we can fetch the `task_status` and `assignee_name` multiJoin: mergeMultiJoin(multiJoin, this.models.task.DatabaseRecordClass.joins), }; + + if (rawSort) { + options.rawSort = rawSort; + } else { + // Strip table prefix from `task_status` and `assignee_name` as these are customColumns + options.sort = sort?.map(s => + s.replace('task.task_status', 'task_status').replace('task.assignee_name', 'assignee_name'), + ); + } + + return options; } } diff --git a/packages/datatrak-web-server/src/routes/TasksRoute.ts b/packages/datatrak-web-server/src/routes/TasksRoute.ts index 5d3bbcbb73..915cc4b4cf 100644 --- a/packages/datatrak-web-server/src/routes/TasksRoute.ts +++ b/packages/datatrak-web-server/src/routes/TasksRoute.ts @@ -147,12 +147,14 @@ export class TasksRoute extends Route { this.formatFilters(); await this.processFilterSettings(); + console.log(' ---- SORT ----', sort); // If no sort is provided, default to sorting completed and cancelled tasks to the bottom and by due date const rawSort = !sort && "CASE status WHEN 'completed' THEN 1 WHEN 'cancelled' THEN 2 ELSE 0 END ASC, due_date ASC"; + console.log(' ---- raw sort ----', rawSort); const tasks = await ctx.services.central.fetchResources('tasks', { filter: this.filters, columns: FIELDS, diff --git a/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx b/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx index 30c13878bd..f8b0b13746 100644 --- a/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx +++ b/packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx @@ -50,7 +50,7 @@ const useTasksTable = () => { const urlFilters = searchParams.get('filters'); const filters = urlFilters ? JSON.parse(urlFilters) : []; - const { data, isLoading } = useTasks(projectId, pageSize, page, filters, sortBy); + const { data, isLoading } = useTasks({ projectId, pageSize, page, filters, sortBy }); const updateSorting = newSorting => { searchParams.set('sortBy', JSON.stringify(newSorting)); diff --git a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx index 7882d205ef..8bbd154029 100644 --- a/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx +++ b/packages/datatrak-web/src/views/LandingPage/TasksSection.tsx @@ -57,7 +57,7 @@ const Button = styled(UIButton)` `; export const TasksSection = () => { - const { id: userId } = useCurrentUserContext(); + const { id: userId, projectId } = useCurrentUserContext(); const filters = [ { id: 'assignee_id', value: userId as string }, { @@ -68,9 +68,13 @@ export const TasksSection = () => { }, }, ]; - const { data, isLoading, isSuccess } = useTasks({ filters, pageSize: 5 }); - const tasks = data?.tasks ?? []; - const showTasksDashboardLink = data?.numberOfPages > 1; + const { + data = { tasks: [], numberOfPages: 0 }, + isLoading, + isSuccess, + } = useTasks({ projectId, filters, pageSize: 5 }); + const tasks = data.tasks; + const showTasksDashboardLink = data.numberOfPages > 1; const hasTasks = isSuccess && tasks.length > 0; let Contents: React.ReactNode; From 48b5567458212baed683a3e6c4da5f4c089d1875 Mon Sep 17 00:00:00 2001 From: Tom Caiger Date: Fri, 19 Jul 2024 11:36:17 +1200 Subject: [PATCH 13/13] Update TasksRoute.ts --- packages/datatrak-web-server/src/routes/TasksRoute.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/datatrak-web-server/src/routes/TasksRoute.ts b/packages/datatrak-web-server/src/routes/TasksRoute.ts index 915cc4b4cf..bacddce998 100644 --- a/packages/datatrak-web-server/src/routes/TasksRoute.ts +++ b/packages/datatrak-web-server/src/routes/TasksRoute.ts @@ -147,14 +147,11 @@ export class TasksRoute extends Route { this.formatFilters(); await this.processFilterSettings(); - console.log(' ---- SORT ----', sort); - // If no sort is provided, default to sorting completed and cancelled tasks to the bottom and by due date const rawSort = !sort && "CASE status WHEN 'completed' THEN 1 WHEN 'cancelled' THEN 2 ELSE 0 END ASC, due_date ASC"; - console.log(' ---- raw sort ----', rawSort); const tasks = await ctx.services.central.fetchResources('tasks', { filter: this.filters, columns: FIELDS,