Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight the late tasks in the Action Task List #424

Merged
merged 2 commits into from
Oct 29, 2024
Merged

Highlight the late tasks in the Action Task List #424

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94654ca
Highlight the late tasks in the Action Task List
lilia1891 Oct 29, 2024
b0ff0e1
Refactor code
lilia1891 Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 44 additions & 5 deletions components/actions/TaskList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ import RichText from 'components/common/RichText';
import { useLocale, useTranslations } from 'next-intl';
import { usePlan } from 'context/plan';
import { getDateFormat } from 'utils/dates.utils';
import { setLightness } from 'polished';
import {
StyledStatusBadge,
StyledStatusWrapper,
StyledStatusIndicator,
StyledStatusLabel,
} from 'components/common/StatusBadge';

const StyledDate = styled.span`
font-size: ${(props) => props.theme.fontSizeSm};
Expand Down Expand Up @@ -100,6 +107,14 @@ const ListGroupTitle = styled.h3`

const ListGroupItem = styled(BaseListGroupItem)`
padding: ${(props) => props.theme.spaces.s050};
background: ${(props) =>
props.isLate
? setLightness(0.95, props.theme.taskStatusColors.late)
: 'transparent'};
border: ${(props) =>
props.isLate ? `1px solid ${props.theme.taskStatusColors.late}` : 'none'};
border-radius: ${(props) => props.theme.cardBorderRadius};
margin-bottom: 8px;

&:first-child {
border-top-left-radius: ${(props) => props.theme.cardBorderRadius};
Expand All @@ -116,6 +131,10 @@ const ListGroupItem = styled(BaseListGroupItem)`
}
`;

const StyledStatusBadgeNoBorder = styled(StyledStatusBadge)`
border: none;
`;

function parseTimestamp(timestamp) {
const timeFormat = 'L';
return dayjs(timestamp).format(timeFormat);
Expand All @@ -135,6 +154,8 @@ const Task = (props) => {
getDateFormat(dateFormat)
);

const isLate = !completed && new Date(task.dueAt) < new Date();

return (
<TaskWrapper>
{completed ? (
Expand Down Expand Up @@ -178,6 +199,17 @@ const Task = (props) => {
</>
)}
</TaskContent>
{isLate && (
<StyledStatusBadgeNoBorder
style={{ marginLeft: 'auto' }}
$statusColor={theme.taskStatusColors.late}
>
<StyledStatusWrapper>
<StyledStatusIndicator $statusColor={theme.taskStatusColors.late} />
<StyledStatusLabel>{t('late')}</StyledStatusLabel>
</StyledStatusWrapper>
</StyledStatusBadgeNoBorder>
)}
</TaskWrapper>
);
};
Expand All @@ -196,11 +228,18 @@ function TaskList(props) {
function filterTasks(state, completed) {
return sortedTasks
.filter((item) => item.state === state)
.map((item) => (
<ListGroupItem key={item.id} className={`state--${item.state}`}>
<Task task={item} theme={theme} completed={completed} />
</ListGroupItem>
));
.map((item) => {
const isLate = !completed && new Date(item.dueAt) < new Date();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extract isLate into a function (see above)?
Also, just a curious peculiarity: new Date() is always in the browser's local timezone, but item.dueAt is in the plan's local timezone. I don't think we need to do anything about it though, because it always works as intended from the customer's own browsers. Only from the other side of the world it might sometimes be one day off but no big deal.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed to isTaskLate and extracted into a reusable function.

return (
<ListGroupItem
key={item.id}
className={`state--${item.state}`}
isLate={isLate}
>
<Task task={item} theme={theme} completed={completed} />
</ListGroupItem>
);
});
}

const notStartedTasks = filterTasks('NOT_STARTED', false);
Expand Down
8 changes: 4 additions & 4 deletions components/common/StatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type StatusProps = {
$statusColor: string;
};

const StyledStatusBadge = styled.div<StatusProps>`
export const StyledStatusBadge = styled.div<StatusProps>`
display: inline-block;
border: ${({ $subtle, $statusColor }) =>
$subtle ? 'none' : `2px solid ${$statusColor}`};
Expand All @@ -28,23 +28,23 @@ const StyledStatusBadgeWithReason = styled(StyledStatusBadge)`
display: block;
`;

const StyledStatusIndicator = styled.div<StatusProps>`
export const StyledStatusIndicator = styled.div<StatusProps>`
background: ${({ $statusColor }) => $statusColor};
border-radius: 10px;
width: 10px;
height: 10px;
flex-shrink: 0;
`;

const StyledStatusLabel = styled.div<{ $subtle?: boolean }>`
export const StyledStatusLabel = styled.div<{ $subtle?: boolean }>`
color: ${({ theme }) => theme.textColor.primary};
font-size: ${({ theme }) => theme.fontSizeSm};
line-height: ${({ theme }) => theme.lineHeightSm};
font-weight: ${({ $subtle, theme }) =>
$subtle ? theme.fontWeightNormal : theme.fontWeightBold};
`;

const StyledStatusWrapper = styled.div`
export const StyledStatusWrapper = styled.div`
display: flex;
gap: ${({ theme }) => theme.spaces.s050};
align-items: center;
Expand Down
3 changes: 2 additions & 1 deletion locales/en/actions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,5 +60,6 @@
"action-dependencies": "{context, select, CASE_STUDY {Case study dependencies} STRATEGY {Strategy dependencies} other {Action dependencies}}",
"no-action-version-available": "No --{versionType}--- version available",
"feedback-on-category": "Give feedback on this category",
"feedback-on-category-description": "You can leave a comment or feedback on this category"
"feedback-on-category-description": "You can leave a comment or feedback on this category",
"late": "Late"
}
Loading