feat: add my tasks list view
This commit is contained in:
Jordan Knott
145
frontend/src/MyTasks/MyTasksSort.tsx
Normal file
145
frontend/src/MyTasks/MyTasksSort.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
|
||||
import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
|
||||
import Input from 'shared/components/ControlledInput';
|
||||
import { Popup, usePopup } from 'shared/components/PopupMenu';
|
||||
import produce from 'immer';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import Member from 'shared/components/Member';
|
||||
import { MyTasksSort } from 'shared/generated/graphql';
|
||||
|
||||
const FilterMember = styled(Member)`
|
||||
margin: 2px 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Labels = styled.ul`
|
||||
list-style: none;
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
export const Label = styled.li`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const CardLabel = styled.span<{ active: boolean; color: string }>`
|
||||
${props =>
|
||||
props.active &&
|
||||
css`
|
||||
margin-left: 4px;
|
||||
box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
|
||||
border-radius: 3px;
|
||||
`}
|
||||
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
min-height: 20px;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
transition: padding 85ms, margin 85ms, box-shadow 85ms;
|
||||
background-color: ${props => props.color};
|
||||
color: #fff;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 31px;
|
||||
`;
|
||||
|
||||
export const ActionsList = styled.ul`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const ActionItem = styled.li`
|
||||
position: relative;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActionTitle = styled.span`
|
||||
margin-left: 20px;
|
||||
`;
|
||||
|
||||
const ActionItemSeparator = styled.li`
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.25rem;
|
||||
`;
|
||||
|
||||
const ActiveIcon = styled(Checkmark)`
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
`;
|
||||
|
||||
const ItemIcon = styled.div`
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
const TaskNameInput = styled(Input)`
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const ActionItemLine = styled.div`
|
||||
height: 1px;
|
||||
border-top: 1px solid #414561;
|
||||
margin: 0.25rem !important;
|
||||
`;
|
||||
|
||||
type MyTasksSortProps = {
|
||||
sort: MyTasksSort;
|
||||
onChangeSort: (sort: MyTasksSort) => void;
|
||||
};
|
||||
|
||||
const MyTasksSortPopup: React.FC<MyTasksSortProps> = ({ sort: initialSort, onChangeSort }) => {
|
||||
const [sort, setSort] = useState(initialSort);
|
||||
const handleChangeSort = (f: MyTasksSort) => {
|
||||
setSort(f);
|
||||
onChangeSort(f);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup tab={0} title={null}>
|
||||
<ActionsList>
|
||||
<ActionItem onClick={() => handleChangeSort(MyTasksSort.None)}>
|
||||
{sort === MyTasksSort.None && <ActiveIcon width={16} height={16} />}
|
||||
<ActionTitle>None</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem onClick={() => handleChangeSort(MyTasksSort.Project)}>
|
||||
{sort === MyTasksSort.Project && <ActiveIcon width={16} height={16} />}
|
||||
<ActionTitle>Project</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem onClick={() => handleChangeSort(MyTasksSort.DueDate)}>
|
||||
{sort === MyTasksSort.DueDate && <ActiveIcon width={16} height={16} />}
|
||||
<ActionTitle>Due Date</ActionTitle>
|
||||
</ActionItem>
|
||||
</ActionsList>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyTasksSortPopup;
|
||||
413
frontend/src/MyTasks/TaskEntry.tsx
Normal file
413
frontend/src/MyTasks/TaskEntry.tsx
Normal file
@ -0,0 +1,413 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import dayjs from 'dayjs';
|
||||
import { CheckCircleOutline, CheckCircle, Cross, Briefcase, ChevronRight } from 'shared/icons';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
|
||||
const RIGHT_ROW_WIDTH = 327;
|
||||
const TaskName = styled.div<{ focused: boolean }>`
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
margin-right: 4px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
height: 20px;
|
||||
padding: 0 1px;
|
||||
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
&:hover {
|
||||
${props =>
|
||||
!props.focused &&
|
||||
css`
|
||||
border-color: #9ca6af !important;
|
||||
border: 1px solid ${props.theme.colors.primary} !important;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
const DueDateCell = styled.div`
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const CellPlaceholder = styled.div<{ width: number }>`
|
||||
min-width: ${p => p.width}px;
|
||||
width: ${p => p.width}px;
|
||||
`;
|
||||
const DueDateCellDisplay = styled.div`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const DueDateCellLabel = styled.div`
|
||||
align-items: center;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
|
||||
font-size: 11px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
white-space: pre-wrap;
|
||||
`;
|
||||
|
||||
const DueDateRemoveButton = styled.div`
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: 4px;
|
||||
padding-right: 8px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
svg {
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.text.secondary};
|
||||
}
|
||||
`;
|
||||
const TaskGroupItemCell = styled.div<{ width: number; focused: boolean }>`
|
||||
width: ${p => p.width}px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
|
||||
border: 1px solid #414561;
|
||||
justify-content: space-between;
|
||||
margin-right: -1px;
|
||||
z-index: 0;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 37px;
|
||||
overflow: hidden;
|
||||
&:hover ${DueDateRemoveButton} {
|
||||
visibility: visible;
|
||||
}
|
||||
&:hover ${TaskName} {
|
||||
${props =>
|
||||
!props.focused &&
|
||||
css`
|
||||
background: ${props.theme.colors.bg.secondary};
|
||||
border: 1px solid ${mixin.darken(props.theme.colors.bg.secondary, 0.25)};
|
||||
border-radius: 2px;
|
||||
cursor: text;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
const TaskGroupItem = styled.div`
|
||||
padding-right: 24px;
|
||||
contain: style;
|
||||
display: flex;
|
||||
margin-bottom: -1px;
|
||||
margin-top: -1px;
|
||||
height: 37px;
|
||||
&:hover {
|
||||
background-color: #161d31;
|
||||
}
|
||||
& ${TaskGroupItemCell}:first-child {
|
||||
position: absolute;
|
||||
padding: 0 4px 0 0;
|
||||
margin-left: 24px;
|
||||
left: 0;
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
& ${TaskGroupItemCell}:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const TaskItemComplete = styled.div`
|
||||
flex: 0 0 auto;
|
||||
margin: 0 3px 0 0;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
width: 16px;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transition: all 0.2 ease;
|
||||
}
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
const TaskDetailsButton = styled.div`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
opacity: 0;
|
||||
padding-left: 4px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
svg {
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
const TaskDetailsArea = styled.div`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
height: 100%;
|
||||
margin-right: 24px;
|
||||
&:hover ${TaskDetailsButton} {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const TaskDetailsWorkpace = styled(Briefcase)`
|
||||
flex: 0 0 auto;
|
||||
margin-right: 8px;
|
||||
`;
|
||||
const TaskDetailsLabel = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const TaskDetailsChevron = styled(ChevronRight)`
|
||||
margin-left: 4px;
|
||||
flex: 0 0 auto;
|
||||
`;
|
||||
|
||||
const TaskNameShadow = styled.div`
|
||||
box-sizing: border-box;
|
||||
min-height: 1em;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
white-space: pre;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
padding: 0 4px;
|
||||
text-rendering: optimizeSpeed;
|
||||
`;
|
||||
|
||||
const TaskNameInput = styled.textarea`
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
padding: 0 4px;
|
||||
text-rendering: optimizeSpeed;
|
||||
`;
|
||||
|
||||
const ProjectPill = styled.div`
|
||||
background-color: ${props => props.theme.colors.bg.primary};
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
padding: 0 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const ProjectPillContents = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const ProjectPillName = styled.span`
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
const ProjectPillColor = styled.svg`
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
fill: #0064fb;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
`;
|
||||
|
||||
type TaskEntryProps = {
|
||||
name: string;
|
||||
dueDate?: string | null;
|
||||
onEditName: (name: string) => void;
|
||||
project: string;
|
||||
hasTime: boolean;
|
||||
autoFocus?: boolean;
|
||||
onEditProject: ($target: React.RefObject<HTMLElement>) => void;
|
||||
onToggleComplete: (complete: boolean) => void;
|
||||
complete: boolean;
|
||||
onEditDueDate: ($target: React.RefObject<HTMLElement>) => void;
|
||||
onTaskDetails: () => void;
|
||||
onRemoveDueDate: () => void;
|
||||
};
|
||||
|
||||
const TaskEntry: React.FC<TaskEntryProps> = ({
|
||||
autoFocus = false,
|
||||
onToggleComplete,
|
||||
onEditName,
|
||||
onTaskDetails,
|
||||
name: initialName,
|
||||
complete,
|
||||
project,
|
||||
dueDate,
|
||||
hasTime,
|
||||
onEditProject,
|
||||
onEditDueDate,
|
||||
onRemoveDueDate,
|
||||
}) => {
|
||||
const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
|
||||
const [focused, setFocused] = useState(autoFocus);
|
||||
const [name, setName] = useState(initialName);
|
||||
const $projects = useRef<HTMLDivElement>(null);
|
||||
const $dueDate = useRef<HTMLDivElement>(null);
|
||||
const $nameInput = useRef<HTMLTextAreaElement>(null);
|
||||
return (
|
||||
<TaskGroupItem>
|
||||
<TaskGroupItemCell focused={focused} width={leftRow}>
|
||||
<TaskItemComplete onClick={() => onToggleComplete(!complete)}>
|
||||
{complete ? <CheckCircle width={16} height={16} /> : <CheckCircleOutline width={16} height={16} />}
|
||||
</TaskItemComplete>
|
||||
<TaskName focused={focused}>
|
||||
<TaskNameShadow>{name}</TaskNameShadow>
|
||||
<TaskNameInput
|
||||
autoFocus={autoFocus}
|
||||
onFocus={() => setFocused(true)}
|
||||
ref={$nameInput}
|
||||
onBlur={() => {
|
||||
setFocused(false);
|
||||
onEditName(name);
|
||||
}}
|
||||
onKeyDown={e => {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
if ($nameInput.current) {
|
||||
$nameInput.current.blur();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onChange={e => setName(e.currentTarget.value)}
|
||||
wrap="off"
|
||||
rows={1}
|
||||
>
|
||||
{name}
|
||||
</TaskNameInput>
|
||||
</TaskName>
|
||||
<TaskDetailsArea onClick={() => onTaskDetails()}>
|
||||
<TaskDetailsButton>
|
||||
<TaskDetailsWorkpace width={16} height={16} />
|
||||
<TaskDetailsLabel>
|
||||
Details
|
||||
<TaskDetailsChevron width={12} height={12} />
|
||||
</TaskDetailsLabel>
|
||||
</TaskDetailsButton>
|
||||
</TaskDetailsArea>
|
||||
</TaskGroupItemCell>
|
||||
<CellPlaceholder width={leftRow} />
|
||||
<TaskGroupItemCell width={120} focused={false} ref={$dueDate}>
|
||||
<DueDateCell onClick={() => onEditDueDate($dueDate)}>
|
||||
<DueDateCellDisplay>
|
||||
<DueDateCellLabel>
|
||||
{dueDate ? dayjs(dueDate).format(hasTime ? 'MMM D [at] h:mm A' : 'MMM D') : ''}
|
||||
</DueDateCellLabel>
|
||||
</DueDateCellDisplay>
|
||||
</DueDateCell>
|
||||
{dueDate && (
|
||||
<DueDateRemoveButton onClick={() => onRemoveDueDate()}>
|
||||
<Cross width={12} height={12} />
|
||||
</DueDateRemoveButton>
|
||||
)}
|
||||
</TaskGroupItemCell>
|
||||
<TaskGroupItemCell width={120} focused={false} ref={$projects}>
|
||||
<ProjectPill
|
||||
onClick={() => {
|
||||
onEditProject($projects);
|
||||
}}
|
||||
>
|
||||
<ProjectPillContents>
|
||||
<ProjectPillColor viewBox="0 0 24 24" focusable={false}>
|
||||
<path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
|
||||
</ProjectPillColor>
|
||||
<ProjectPillName>{project}</ProjectPillName>
|
||||
</ProjectPillContents>
|
||||
</ProjectPill>
|
||||
</TaskGroupItemCell>
|
||||
<TaskGroupItemCell width={50} focused={false} />
|
||||
</TaskGroupItem>
|
||||
);
|
||||
};
|
||||
export default TaskEntry;
|
||||
type NewTaskEntryProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
const AddTaskLabel = styled.span`
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
|
||||
justify-content: space-between;
|
||||
z-index: 0;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 37px;
|
||||
flex: 1 1;
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
`;
|
||||
|
||||
const NewTaskEntry: React.FC<NewTaskEntryProps> = ({ onClick }) => {
|
||||
const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
|
||||
return (
|
||||
<TaskGroupItem>
|
||||
<AddTaskLabel onClick={onClick}>Add task...</AddTaskLabel>
|
||||
</TaskGroupItem>
|
||||
);
|
||||
};
|
||||
|
||||
export { NewTaskEntry };
|
||||
868
frontend/src/MyTasks/index.tsx
Normal file
868
frontend/src/MyTasks/index.tsx
Normal file
@ -0,0 +1,868 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import GlobalTopNavbar from 'App/TopNavbar';
|
||||
import Details from 'Projects/Project/Details';
|
||||
import {
|
||||
useMyTasksQuery,
|
||||
MyTasksSort,
|
||||
MyTasksStatus,
|
||||
useCreateTaskMutation,
|
||||
MyTasksQuery,
|
||||
MyTasksDocument,
|
||||
useUpdateTaskNameMutation,
|
||||
useSetTaskCompleteMutation,
|
||||
useUpdateTaskDueDateMutation,
|
||||
} from 'shared/generated/graphql';
|
||||
|
||||
import { Route, useRouteMatch, useHistory, RouteComponentProps } from 'react-router-dom';
|
||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
import produce from 'immer';
|
||||
import NOOP from 'shared/utils/noop';
|
||||
import { Sort, Cogs, CaretDown, CheckCircle, CaretRight } from 'shared/icons';
|
||||
import Select from 'react-select';
|
||||
import { editorColourStyles } from 'shared/components/Select';
|
||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||
import DueDateManager from 'shared/components/DueDateManager';
|
||||
import dayjs from 'dayjs';
|
||||
import useStickyState from 'shared/hooks/useStickyState';
|
||||
import MyTasksSortPopup from './MyTasksSort';
|
||||
import TaskEntry from './TaskEntry';
|
||||
|
||||
type TaskRouteProps = {
|
||||
taskID: string;
|
||||
};
|
||||
|
||||
function prettySort(sort: MyTasksSort) {
|
||||
if (sort === MyTasksSort.None) {
|
||||
return 'Sort';
|
||||
}
|
||||
return `Sort: ${sort.charAt(0) +
|
||||
sort
|
||||
.slice(1)
|
||||
.toLowerCase()
|
||||
.replace(/_/gi, ' ')}`;
|
||||
}
|
||||
|
||||
type Group = {
|
||||
id: string;
|
||||
name: string | null;
|
||||
tasks: Array<Task>;
|
||||
};
|
||||
const DueDateEditorLabel = styled.div`
|
||||
align-items: center;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
|
||||
font-size: 11px;
|
||||
padding: 0 8px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
white-space: pre-wrap;
|
||||
height: 35px;
|
||||
`;
|
||||
|
||||
const ProjectBar = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
`;
|
||||
|
||||
const ProjectActions = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
}
|
||||
${props =>
|
||||
props.disabled &&
|
||||
css`
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
`}
|
||||
`;
|
||||
|
||||
const ProjectActionText = styled.span`
|
||||
padding-left: 4px;
|
||||
`;
|
||||
|
||||
type ProjectActionProps = {
|
||||
onClick?: (target: React.RefObject<HTMLElement>) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
|
||||
const $container = useRef<HTMLDivElement>(null);
|
||||
const handleClick = () => {
|
||||
if (onClick) {
|
||||
onClick($container);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
|
||||
{children}
|
||||
</ProjectActionWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const EditorPositioner = styled.div<{ top: number; left: number }>`
|
||||
position: absolute;
|
||||
top: ${p => p.top}px;
|
||||
justify-content: flex-end;
|
||||
margin-left: -100vw;
|
||||
z-index: 10000;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
left: ${p => p.left}px;
|
||||
`;
|
||||
|
||||
const EditorPositionerContents = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const EditorContainer = styled.div<{ width: number }>`
|
||||
border: 1px solid ${props => props.theme.colors.primary};
|
||||
background: ${props => props.theme.colors.bg.secondary};
|
||||
position: relative;
|
||||
width: ${p => p.width}px;
|
||||
`;
|
||||
|
||||
const EditorCell = styled.div<{ width: number }>`
|
||||
display: flex;
|
||||
width: ${p => p.width}px;
|
||||
`;
|
||||
|
||||
// TABLE
|
||||
const VerticalScoller = styled.div`
|
||||
contain: strict;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 1px;
|
||||
position: relative;
|
||||
|
||||
min-height: 1px;
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
const VerticalScollerInner = styled.div`
|
||||
min-height: 100%;
|
||||
overflow-y: hidden;
|
||||
min-width: 1px;
|
||||
overflow-x: auto;
|
||||
`;
|
||||
|
||||
const VerticalScollerInnerBar = styled.div`
|
||||
display: flex;
|
||||
margin: 0 24px;
|
||||
margin-bottom: 1px;
|
||||
border-top: 1px solid #414561;
|
||||
`;
|
||||
|
||||
const TableContents = styled.div`
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-bottom: 32px;
|
||||
min-width: 100%;
|
||||
`;
|
||||
|
||||
const TaskGroupContainer = styled.div``;
|
||||
|
||||
const TaskGroupHeader = styled.div`
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TaskGroupItems = styled.div`
|
||||
overflow: unset;
|
||||
`;
|
||||
|
||||
const ProjectPill = styled.div`
|
||||
background-color: ${props => props.theme.colors.bg.primary};
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
padding: 0 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const ProjectPillContents = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const ProjectPillName = styled.span`
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
const ProjectPillColor = styled.svg`
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
fill: #0064fb;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
`;
|
||||
|
||||
const SingleValue = ({ children, ...props }: any) => {
|
||||
return (
|
||||
<ProjectPill>
|
||||
<ProjectPillContents>
|
||||
<ProjectPillColor viewBox="0 0 24 24" focusable={false}>
|
||||
<path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
|
||||
</ProjectPillColor>
|
||||
<ProjectPillName>{children}</ProjectPillName>
|
||||
</ProjectPillContents>
|
||||
</ProjectPill>
|
||||
);
|
||||
};
|
||||
|
||||
const OptionWrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #414561;
|
||||
}
|
||||
`;
|
||||
|
||||
const OptionLabel = styled.div`
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
min-width: 1px;
|
||||
`;
|
||||
|
||||
const OptionTitle = styled.div`
|
||||
min-width: 50px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
const OptionSubTitle = styled.div`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
font-size: 11px;
|
||||
margin-left: 8px;
|
||||
min-width: 50px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
const Option = ({ innerProps, data }: any) => {
|
||||
return (
|
||||
<OptionWrapper {...innerProps}>
|
||||
<OptionLabel>
|
||||
<OptionTitle>{data.label}</OptionTitle>
|
||||
<OptionSubTitle>{data.label}</OptionSubTitle>
|
||||
</OptionLabel>
|
||||
</OptionWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const TaskGroupHeaderContents = styled.div<{ width: number }>`
|
||||
width: ${p => p.width}px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-left: 24px;
|
||||
line-height: 20px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-height: 30px;
|
||||
padding-right: 32px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
`;
|
||||
|
||||
const TaskGroupMinify = styled.div`
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
min-width: 28px;
|
||||
width: 28px;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
|
||||
margin-right: 4px;
|
||||
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: background, border, box-shadow, fill;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
fill: ${props => props.theme.colors.text.primary};
|
||||
transition-duration: 0.2s;
|
||||
transition-property: background, border, box-shadow, fill;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: ${props => props.theme.colors.text.secondary};
|
||||
}
|
||||
`;
|
||||
const TaskGroupName = styled.div`
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
min-width: 1px;
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
font-weight: 400;
|
||||
`;
|
||||
|
||||
// HEADER
|
||||
const ScrollContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
height: 37px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const RowHeaderLeft = styled.div<{ width: number }>`
|
||||
width: ${p => p.width}px;
|
||||
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 37px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
`;
|
||||
const RowHeaderLeftInner = styled.div`
|
||||
align-items: stretch;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
font-size: 12px;
|
||||
margin-right: -1px;
|
||||
padding-left: 24px;
|
||||
`;
|
||||
const RowHeaderLeftName = styled.div`
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border-right: 1px solid #414561;
|
||||
border-top: 1px solid #414561;
|
||||
border-bottom: 1px solid #414561;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const RowHeaderLeftNameText = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const RowHeaderRight = styled.div<{ left: number }>`
|
||||
left: ${p => p.left}px;
|
||||
right: 0px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
const RowScrollable = styled.div`
|
||||
min-width: 1px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const RowScrollContent = styled.div`
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
height: 37px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const RowHeaderRightContainer = styled.div`
|
||||
padding-right: 24px;
|
||||
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
height: 37px;
|
||||
justify-content: flex-end;
|
||||
margin: -1px 0;
|
||||
`;
|
||||
|
||||
const ItemWrapper = styled.div<{ width: number }>`
|
||||
width: ${p => p.width}px;
|
||||
align-items: center;
|
||||
border: 1px solid #414561;
|
||||
border-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
margin-right: -1px;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
border-bottom: 1px solid #414561;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
}
|
||||
`;
|
||||
const ItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
& ${ItemWrapper}:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemName = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
`;
|
||||
type DateEditorState = {
|
||||
open: boolean;
|
||||
pos: { top: number; left: number } | null;
|
||||
task: null | Task;
|
||||
};
|
||||
|
||||
type ProjectEditorState = {
|
||||
open: boolean;
|
||||
pos: { top: number; left: number } | null;
|
||||
task: null | Task;
|
||||
};
|
||||
const RIGHT_ROW_WIDTH = 327;
|
||||
|
||||
const Projects = () => {
|
||||
const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [filters, setFilters] = useStickyState<{ sort: MyTasksSort; status: MyTasksStatus }>(
|
||||
{ sort: MyTasksSort.None, status: MyTasksStatus.All },
|
||||
'my_tasks_filter',
|
||||
);
|
||||
const { data } = useMyTasksQuery({ variables: { sort: filters.sort, status: filters.status } });
|
||||
const [dateEditor, setDateEditor] = useState<DateEditorState>({ open: false, pos: null, task: null });
|
||||
const onEditDueDate = (task: Task, $target: React.RefObject<HTMLElement>) => {
|
||||
if ($target && $target.current && data) {
|
||||
const pos = $target.current.getBoundingClientRect();
|
||||
setDateEditor({
|
||||
open: true,
|
||||
pos: {
|
||||
top: pos.top,
|
||||
left: pos.right,
|
||||
},
|
||||
task,
|
||||
});
|
||||
}
|
||||
};
|
||||
const [newTask, setNewTask] = useState<{ open: boolean }>({ open: false });
|
||||
const match = useRouteMatch();
|
||||
const history = useHistory();
|
||||
const [projectEditor, setProjectEditor] = useState<ProjectEditorState>({ open: false, pos: null, task: null });
|
||||
const onEditProject = ($target: React.RefObject<HTMLElement>) => {
|
||||
if ($target && $target.current) {
|
||||
const pos = $target.current.getBoundingClientRect();
|
||||
setProjectEditor({
|
||||
open: true,
|
||||
pos: {
|
||||
top: pos.top,
|
||||
left: pos.right,
|
||||
},
|
||||
task: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
const { showPopup } = usePopup();
|
||||
const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
|
||||
const $editorContents = useRef<HTMLDivElement>(null);
|
||||
const $dateContents = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (dateEditor.open && $dateContents.current && dateEditor.task) {
|
||||
showPopup(
|
||||
$dateContents,
|
||||
<Popup tab={0} title={null}>
|
||||
<DueDateManager
|
||||
task={dateEditor.task}
|
||||
onCancel={() => null}
|
||||
onDueDateChange={(task, dueDate, hasTime) => {
|
||||
if (dateEditor.task) {
|
||||
updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate, hasTime } });
|
||||
setDateEditor(prev => ({ ...prev, task: { ...task, dueDate: dueDate.toISOString(), hasTime } }));
|
||||
}
|
||||
}}
|
||||
onRemoveDueDate={task => {
|
||||
if (dateEditor.task) {
|
||||
updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate: null, hasTime: false } });
|
||||
setDateEditor(prev => ({ ...prev, task: { ...task, hasTime: false } }));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Popup>,
|
||||
{ onClose: () => setDateEditor({ open: false, task: null, pos: null }) },
|
||||
);
|
||||
}
|
||||
}, [dateEditor]);
|
||||
|
||||
const [createTask] = useCreateTaskMutation({
|
||||
update: (client, newTaskData) => {
|
||||
updateApolloCache<MyTasksQuery>(
|
||||
client,
|
||||
MyTasksDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
if (newTaskData.data) {
|
||||
draftCache.myTasks.tasks.unshift(newTaskData.data.createTask);
|
||||
}
|
||||
}),
|
||||
{ status: MyTasksStatus.All, sort: MyTasksSort.None },
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const [setTaskComplete] = useSetTaskCompleteMutation();
|
||||
const [updateTaskName] = useUpdateTaskNameMutation();
|
||||
const [minified, setMinified] = useStickyState<Array<string>>([], 'my_tasks_minified');
|
||||
useOnOutsideClick(
|
||||
$editorContents,
|
||||
projectEditor.open,
|
||||
() =>
|
||||
setProjectEditor({
|
||||
open: false,
|
||||
task: null,
|
||||
pos: null,
|
||||
}),
|
||||
null,
|
||||
);
|
||||
if (data) {
|
||||
const groups: Array<Group> = [];
|
||||
if (filters.sort === MyTasksSort.None) {
|
||||
groups.push({
|
||||
id: 'recently-assigned',
|
||||
name: 'Recently Assigned',
|
||||
tasks: data.myTasks.tasks.map(task => ({
|
||||
...task,
|
||||
labels: [],
|
||||
position: 0,
|
||||
})),
|
||||
});
|
||||
} else {
|
||||
let { tasks } = data.myTasks;
|
||||
if (filters.sort === MyTasksSort.DueDate) {
|
||||
const group: Group = { id: 'due_date', name: null, tasks: [] };
|
||||
data.myTasks.tasks.forEach(task => {
|
||||
if (task.dueDate) {
|
||||
group.tasks.push({ ...task, labels: [], position: 0 });
|
||||
}
|
||||
});
|
||||
groups.push(group);
|
||||
tasks = tasks.filter(t => t.dueDate === null);
|
||||
}
|
||||
const projects = new Map<string, Array<Task>>();
|
||||
data.myTasks.projects.forEach(p => {
|
||||
if (!projects.has(p.projectID)) {
|
||||
projects.set(p.projectID, []);
|
||||
}
|
||||
const prev = projects.get(p.projectID);
|
||||
const task = tasks.find(t => t.id === p.taskID);
|
||||
if (prev && task) {
|
||||
projects.set(p.projectID, [...prev, { ...task, labels: [], position: 0 }]);
|
||||
}
|
||||
});
|
||||
for (const [id, pTasks] of projects) {
|
||||
const project = data.projects.find(c => c.id === id);
|
||||
if (pTasks.length === 0) continue;
|
||||
if (project) {
|
||||
groups.push({
|
||||
id,
|
||||
name: project.name,
|
||||
tasks: pTasks.sort((a, b) => {
|
||||
if (a.dueDate === null && b.dueDate === null) return 0;
|
||||
if (a.dueDate === null && b.dueDate !== null) return 1;
|
||||
if (a.dueDate !== null && b.dueDate === null) return -1;
|
||||
const first = dayjs(a.dueDate);
|
||||
const second = dayjs(b.dueDate);
|
||||
if (first.isSame(second, 'minute')) return 0;
|
||||
if (first.isAfter(second)) return -1;
|
||||
return 1;
|
||||
}),
|
||||
});
|
||||
}
|
||||
}
|
||||
groups.sort((a, b) => {
|
||||
if (a.name === null && b.name === null) return 0;
|
||||
if (a.name === null) return -1;
|
||||
if (b.name === null) return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
|
||||
<ProjectBar>
|
||||
<ProjectActions />
|
||||
<ProjectActions>
|
||||
<ProjectAction disabled>
|
||||
<CheckCircle width={13} height={13} />
|
||||
<ProjectActionText>All Tasks</ProjectActionText>
|
||||
</ProjectAction>
|
||||
<ProjectAction
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<MyTasksSortPopup
|
||||
sort={filters.sort}
|
||||
onChangeSort={sort => setFilters(prev => ({ ...prev, sort }))}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Sort width={13} height={13} />
|
||||
<ProjectActionText>{prettySort(filters.sort)}</ProjectActionText>
|
||||
</ProjectAction>
|
||||
<ProjectAction disabled>
|
||||
<Cogs width={13} height={13} />
|
||||
<ProjectActionText>Customize</ProjectActionText>
|
||||
</ProjectAction>
|
||||
</ProjectActions>
|
||||
</ProjectBar>
|
||||
<ScrollContainer>
|
||||
<Row>
|
||||
<RowHeaderLeft width={leftRow}>
|
||||
<RowHeaderLeftInner>
|
||||
<RowHeaderLeftName>
|
||||
<RowHeaderLeftNameText>Task name</RowHeaderLeftNameText>
|
||||
</RowHeaderLeftName>
|
||||
</RowHeaderLeftInner>
|
||||
</RowHeaderLeft>
|
||||
<RowHeaderRight left={leftRow}>
|
||||
<RowScrollable>
|
||||
<RowScrollContent>
|
||||
<RowHeaderRightContainer>
|
||||
<ItemsContainer>
|
||||
<ItemWrapper width={120}>
|
||||
<ItemName>Due date</ItemName>
|
||||
</ItemWrapper>
|
||||
<ItemWrapper width={120}>
|
||||
<ItemName>Project</ItemName>
|
||||
</ItemWrapper>
|
||||
<ItemWrapper width={50} />
|
||||
</ItemsContainer>
|
||||
</RowHeaderRightContainer>
|
||||
</RowScrollContent>
|
||||
</RowScrollable>
|
||||
</RowHeaderRight>
|
||||
</Row>
|
||||
<VerticalScoller>
|
||||
<VerticalScollerInner>
|
||||
<TableContents>
|
||||
{groups.map(group => {
|
||||
const isMinified = minified.find(m => m === group.id) ?? false;
|
||||
return (
|
||||
<TaskGroupContainer key={group.id}>
|
||||
{group.name && (
|
||||
<TaskGroupHeader>
|
||||
<TaskGroupHeaderContents width={leftRow}>
|
||||
<TaskGroupMinify
|
||||
onClick={() => {
|
||||
setMinified(prev => {
|
||||
if (isMinified) {
|
||||
return prev.filter(c => c !== group.id);
|
||||
}
|
||||
return [...prev, group.id];
|
||||
});
|
||||
}}
|
||||
>
|
||||
{isMinified ? (
|
||||
<CaretRight width={16} height={16} />
|
||||
) : (
|
||||
<CaretDown width={16} height={16} />
|
||||
)}
|
||||
</TaskGroupMinify>
|
||||
<TaskGroupName>{group.name}</TaskGroupName>
|
||||
</TaskGroupHeaderContents>
|
||||
</TaskGroupHeader>
|
||||
)}
|
||||
<TaskGroupItems>
|
||||
{!isMinified &&
|
||||
group.tasks.map(task => {
|
||||
const projectID = data.myTasks.projects.find(t => t.taskID === task.id)?.projectID;
|
||||
const projectName = data.projects.find(p => p.id === projectID)?.name;
|
||||
return (
|
||||
<TaskEntry
|
||||
key={task.id}
|
||||
complete={task.complete ?? false}
|
||||
onToggleComplete={complete => {
|
||||
setTaskComplete({ variables: { taskID: task.id, complete } });
|
||||
}}
|
||||
onTaskDetails={() => {
|
||||
history.push(`${match.url}/c/${task.id}`);
|
||||
}}
|
||||
onRemoveDueDate={() => {
|
||||
updateTaskDueDate({ variables: { taskID: task.id, dueDate: null, hasTime: false } });
|
||||
}}
|
||||
project={projectName ?? 'none'}
|
||||
dueDate={task.dueDate}
|
||||
hasTime={task.hasTime ?? false}
|
||||
name={task.name}
|
||||
onEditName={name => updateTaskName({ variables: { taskID: task.id, name } })}
|
||||
onEditProject={onEditProject}
|
||||
onEditDueDate={$target => onEditDueDate({ ...task, position: 0, labels: [] }, $target)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TaskGroupItems>
|
||||
</TaskGroupContainer>
|
||||
);
|
||||
})}
|
||||
</TableContents>
|
||||
</VerticalScollerInner>
|
||||
</VerticalScoller>
|
||||
</ScrollContainer>
|
||||
{dateEditor.open && dateEditor.pos !== null && dateEditor.task && (
|
||||
<EditorPositioner left={dateEditor.pos.left} top={dateEditor.pos.top}>
|
||||
<EditorPositionerContents ref={$dateContents}>
|
||||
<EditorContainer width={120}>
|
||||
<EditorCell width={120}>
|
||||
<DueDateEditorLabel>
|
||||
{dateEditor.task.dueDate
|
||||
? dayjs(dateEditor.task.dueDate).format(dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D')
|
||||
: ''}
|
||||
</DueDateEditorLabel>
|
||||
</EditorCell>
|
||||
</EditorContainer>
|
||||
</EditorPositionerContents>
|
||||
</EditorPositioner>
|
||||
)}
|
||||
{projectEditor.open && projectEditor.pos !== null && (
|
||||
<EditorPositioner left={projectEditor.pos.left} top={projectEditor.pos.top}>
|
||||
<EditorPositionerContents ref={$editorContents}>
|
||||
<EditorContainer width={300}>
|
||||
<EditorCell width={300}>
|
||||
<Select
|
||||
components={{ SingleValue, Option }}
|
||||
autoFocus
|
||||
styles={editorColourStyles}
|
||||
options={[{ label: 'hello', value: '1' }]}
|
||||
onInputChange={(query, { action }) => {
|
||||
if (action === 'input-change') {
|
||||
setMenuOpen(true);
|
||||
}
|
||||
}}
|
||||
onChange={() => setMenuOpen(false)}
|
||||
onBlur={() => setMenuOpen(false)}
|
||||
menuIsOpen={menuOpen}
|
||||
/>
|
||||
</EditorCell>
|
||||
</EditorContainer>
|
||||
</EditorPositionerContents>
|
||||
</EditorPositioner>
|
||||
)}
|
||||
<Route
|
||||
path={`${match.path}/c/:taskID`}
|
||||
render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
|
||||
<Details
|
||||
refreshCache={NOOP}
|
||||
availableMembers={[]}
|
||||
projectURL={`${match.url}`}
|
||||
taskID={routeProps.match.params.taskID}
|
||||
onTaskNameChange={(updatedTask, newName) => {
|
||||
updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
|
||||
}}
|
||||
onTaskDescriptionChange={(updatedTask, newDescription) => {
|
||||
/*
|
||||
updateTaskDescription({
|
||||
variables: { taskID: updatedTask.id, description: newDescription },
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateTaskDescription: {
|
||||
__typename: 'Task',
|
||||
id: updatedTask.id,
|
||||
description: newDescription,
|
||||
},
|
||||
},
|
||||
});
|
||||
*/
|
||||
}}
|
||||
onDeleteTask={deletedTask => {
|
||||
// deleteTask({ variables: { taskID: deletedTask.id } });
|
||||
history.push(`${match.url}`);
|
||||
}}
|
||||
onOpenAddLabelPopup={(task, $targetRef) => {
|
||||
/*
|
||||
taskLabelsRef.current = task.labels;
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<LabelManagerEditor
|
||||
onLabelToggle={labelID => {
|
||||
toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
|
||||
}}
|
||||
labelColors={data.labelColors}
|
||||
labels={labelsRef}
|
||||
taskLabels={taskLabelsRef}
|
||||
projectID={projectID}
|
||||
/>,
|
||||
);
|
||||
*/
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
Reference in New Issue
Block a user