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 all commits
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
53 changes: 48 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,11 +131,19 @@ const ListGroupItem = styled(BaseListGroupItem)`
}
`;

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

function parseTimestamp(timestamp) {
const timeFormat = 'L';
return dayjs(timestamp).format(timeFormat);
}

const isTaskLate = (task, completed) => {
return !completed && new Date(task.dueAt) < new Date();
};

const Task = (props) => {
const t = useTranslations();
const locale = useLocale();
Expand All @@ -135,6 +158,8 @@ const Task = (props) => {
getDateFormat(dateFormat)
);

const isLate = isTaskLate(task, completed);

return (
<TaskWrapper>
{completed ? (
Expand Down Expand Up @@ -178,6 +203,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 +232,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 = isTaskLate(item, completed);
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