feat: add my tasks list view
This commit is contained in:
Jordan Knott
@ -4,6 +4,7 @@ import * as H from 'history';
|
||||
|
||||
import Dashboard from 'Dashboard';
|
||||
import Admin from 'Admin';
|
||||
import MyTasks from 'MyTasks';
|
||||
import Confirm from 'Confirm';
|
||||
import Projects from 'Projects';
|
||||
import Project from 'Projects/Project';
|
||||
@ -69,6 +70,7 @@ const AuthorizedRoutes = () => {
|
||||
<Route path="/teams/:teamID" component={Teams} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
<Route path="/tasks" component={MyTasks} />
|
||||
</MainContent>
|
||||
</Switch>
|
||||
);
|
||||
|
||||
@ -439,6 +439,9 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
||||
onDashboardClick={() => {
|
||||
history.push('/');
|
||||
}}
|
||||
onMyTasksClick={() => {
|
||||
history.push('/tasks');
|
||||
}}
|
||||
projectMembers={projectMembers}
|
||||
projectInvitedMembers={projectInvitedMembers}
|
||||
onProfileClick={onProfileClick}
|
||||
|
||||
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;
|
||||
@ -426,6 +426,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
||||
name,
|
||||
complete: false,
|
||||
completedAt: null,
|
||||
hasTime: false,
|
||||
taskGroup: {
|
||||
__typename: 'TaskGroup',
|
||||
id: taskGroup.id,
|
||||
|
||||
@ -17,7 +17,7 @@ import {
|
||||
} from './Styles';
|
||||
|
||||
function getPopupOptions(options?: PopupOptions) {
|
||||
const popupOptions = {
|
||||
const popupOptions: PopupOptionsInternal = {
|
||||
borders: true,
|
||||
diamondColor: theme.colors.bg.secondary,
|
||||
targetPadding: '10px',
|
||||
@ -40,6 +40,9 @@ function getPopupOptions(options?: PopupOptions) {
|
||||
if (options.diamondColor) {
|
||||
popupOptions.diamondColor = options.diamondColor;
|
||||
}
|
||||
if (options.onClose) {
|
||||
popupOptions.onClose = options.onClose;
|
||||
}
|
||||
}
|
||||
return popupOptions;
|
||||
}
|
||||
@ -136,6 +139,7 @@ type PopupOptionsInternal = {
|
||||
targetPadding: string;
|
||||
diamondColor: string;
|
||||
showDiamond: boolean;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
type PopupOptions = {
|
||||
@ -144,6 +148,7 @@ type PopupOptions = {
|
||||
width?: number | null;
|
||||
borders?: boolean | null;
|
||||
diamondColor?: string | null;
|
||||
onClose?: () => void;
|
||||
};
|
||||
const defaultState = {
|
||||
isOpen: false,
|
||||
@ -239,7 +244,12 @@ export const PopupProvider: React.FC = ({ children }) => {
|
||||
top={currentState.top}
|
||||
targetPadding={currentState.options.targetPadding}
|
||||
left={currentState.left}
|
||||
onClose={() => setState(defaultState)}
|
||||
onClose={() => {
|
||||
if (currentState.options && currentState.options.onClose) {
|
||||
currentState.options.onClose();
|
||||
}
|
||||
setState(defaultState);
|
||||
}}
|
||||
width={currentState.options.width}
|
||||
>
|
||||
{currentState.content}
|
||||
|
||||
@ -84,6 +84,58 @@ export const colourStyles = {
|
||||
},
|
||||
};
|
||||
|
||||
export const editorColourStyles = {
|
||||
...colourStyles,
|
||||
input: (styles: any) => ({
|
||||
...styles,
|
||||
color: '#000',
|
||||
}),
|
||||
singleValue: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
color: '#000',
|
||||
};
|
||||
},
|
||||
menu: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
backgroundColor: '#fff',
|
||||
};
|
||||
},
|
||||
indicatorsContainer: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
display: 'none',
|
||||
};
|
||||
},
|
||||
container: (styles: any) => {
|
||||
return {
|
||||
...styles,
|
||||
display: 'flex',
|
||||
flex: '1 1',
|
||||
};
|
||||
},
|
||||
control: (styles: any, data: any) => {
|
||||
return {
|
||||
...styles,
|
||||
flex: '1 1',
|
||||
backgroundColor: 'transparent',
|
||||
boxShadow: 'none',
|
||||
borderRadius: '0',
|
||||
minHeight: '35px',
|
||||
border: '0',
|
||||
':hover': {
|
||||
boxShadow: 'none',
|
||||
borderRadius: '0',
|
||||
},
|
||||
':active': {
|
||||
boxShadow: 'none',
|
||||
borderRadius: '0',
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const InputLabel = styled.span<{ width: string }>`
|
||||
width: ${props => props.width};
|
||||
padding-left: 0.7rem;
|
||||
|
||||
@ -43,6 +43,7 @@ export const Default = () => {
|
||||
onDashboardClick={action('open dashboard')}
|
||||
onRemoveFromBoard={action('remove project')}
|
||||
onProfileClick={action('profile click')}
|
||||
onMyTasksClick={action('profile click')}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -179,6 +179,7 @@ type NavBarProps = {
|
||||
onRemoveFromBoard?: (userID: string) => void;
|
||||
onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
|
||||
onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
|
||||
onMyTasksClick: () => void;
|
||||
};
|
||||
|
||||
const NavBar: React.FC<NavBarProps> = ({
|
||||
@ -201,6 +202,7 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
onProfileClick,
|
||||
onNotificationClick,
|
||||
onDashboardClick,
|
||||
onMyTasksClick,
|
||||
user,
|
||||
projectMembers,
|
||||
onOpenSettings,
|
||||
@ -306,7 +308,7 @@ const NavBar: React.FC<NavBarProps> = ({
|
||||
<IconContainer onClick={() => onDashboardClick()}>
|
||||
<HomeDashboard width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
<IconContainer onClick={() => onMyTasksClick()}>
|
||||
<CheckCircle width={20} height={20} />
|
||||
</IconContainer>
|
||||
<IconContainer disabled onClick={NOOP}>
|
||||
|
||||
@ -302,6 +302,7 @@ export type Query = {
|
||||
invitedUsers: Array<InvitedUserAccount>;
|
||||
labelColors: Array<LabelColor>;
|
||||
me: MePayload;
|
||||
myTasks: MyTasksPayload;
|
||||
notifications: Array<Notification>;
|
||||
organizations: Array<Organization>;
|
||||
projects: Array<Project>;
|
||||
@ -332,6 +333,11 @@ export type QueryFindUserArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type QueryMyTasksArgs = {
|
||||
input: MyTasks;
|
||||
};
|
||||
|
||||
|
||||
export type QueryProjectsArgs = {
|
||||
input?: Maybe<ProjectsFilter>;
|
||||
};
|
||||
@ -682,6 +688,40 @@ export type MutationUpdateUserRoleArgs = {
|
||||
input: UpdateUserRole;
|
||||
};
|
||||
|
||||
export enum MyTasksStatus {
|
||||
All = 'ALL',
|
||||
Incomplete = 'INCOMPLETE',
|
||||
CompleteAll = 'COMPLETE_ALL',
|
||||
CompleteToday = 'COMPLETE_TODAY',
|
||||
CompleteYesterday = 'COMPLETE_YESTERDAY',
|
||||
CompleteOneWeek = 'COMPLETE_ONE_WEEK',
|
||||
CompleteTwoWeek = 'COMPLETE_TWO_WEEK',
|
||||
CompleteThreeWeek = 'COMPLETE_THREE_WEEK'
|
||||
}
|
||||
|
||||
export enum MyTasksSort {
|
||||
None = 'NONE',
|
||||
Project = 'PROJECT',
|
||||
DueDate = 'DUE_DATE'
|
||||
}
|
||||
|
||||
export type MyTasks = {
|
||||
status: MyTasksStatus;
|
||||
sort: MyTasksSort;
|
||||
};
|
||||
|
||||
export type ProjectTaskMapping = {
|
||||
__typename?: 'ProjectTaskMapping';
|
||||
projectID: Scalars['UUID'];
|
||||
taskID: Scalars['UUID'];
|
||||
};
|
||||
|
||||
export type MyTasksPayload = {
|
||||
__typename?: 'MyTasksPayload';
|
||||
tasks: Array<Task>;
|
||||
projects: Array<ProjectTaskMapping>;
|
||||
};
|
||||
|
||||
export type TeamRole = {
|
||||
__typename?: 'TeamRole';
|
||||
teamID: Scalars['UUID'];
|
||||
@ -859,6 +899,7 @@ export type NewTask = {
|
||||
taskGroupID: Scalars['UUID'];
|
||||
name: Scalars['String'];
|
||||
position: Scalars['Float'];
|
||||
assigned?: Maybe<Array<Scalars['UUID']>>;
|
||||
};
|
||||
|
||||
export type AssignTaskInput = {
|
||||
@ -1529,7 +1570,7 @@ export type FindTaskQuery = (
|
||||
|
||||
export type TaskFieldsFragment = (
|
||||
{ __typename?: 'Task' }
|
||||
& Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'completedAt' | 'position'>
|
||||
& Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'hasTime' | 'complete' | 'completedAt' | 'position'>
|
||||
& { badges: (
|
||||
{ __typename?: 'TaskBadges' }
|
||||
& { checklist?: Maybe<(
|
||||
@ -1605,6 +1646,33 @@ export type MeQuery = (
|
||||
) }
|
||||
);
|
||||
|
||||
export type MyTasksQueryVariables = Exact<{
|
||||
status: MyTasksStatus;
|
||||
sort: MyTasksSort;
|
||||
}>;
|
||||
|
||||
|
||||
export type MyTasksQuery = (
|
||||
{ __typename?: 'Query' }
|
||||
& { projects: Array<(
|
||||
{ __typename?: 'Project' }
|
||||
& Pick<Project, 'id' | 'name'>
|
||||
)>, myTasks: (
|
||||
{ __typename?: 'MyTasksPayload' }
|
||||
& { tasks: Array<(
|
||||
{ __typename?: 'Task' }
|
||||
& Pick<Task, 'id' | 'name' | 'dueDate' | 'hasTime' | 'complete' | 'completedAt'>
|
||||
& { taskGroup: (
|
||||
{ __typename?: 'TaskGroup' }
|
||||
& Pick<TaskGroup, 'id' | 'name'>
|
||||
) }
|
||||
)>, projects: Array<(
|
||||
{ __typename?: 'ProjectTaskMapping' }
|
||||
& Pick<ProjectTaskMapping, 'projectID' | 'taskID'>
|
||||
)> }
|
||||
) }
|
||||
);
|
||||
|
||||
export type DeleteProjectMutationVariables = Exact<{
|
||||
projectID: Scalars['UUID'];
|
||||
}>;
|
||||
@ -1712,6 +1780,7 @@ export type CreateTaskMutationVariables = Exact<{
|
||||
taskGroupID: Scalars['UUID'];
|
||||
name: Scalars['String'];
|
||||
position: Scalars['Float'];
|
||||
assigned?: Maybe<Array<Scalars['UUID']>>;
|
||||
}>;
|
||||
|
||||
|
||||
@ -2559,6 +2628,7 @@ export const TaskFieldsFragmentDoc = gql`
|
||||
name
|
||||
description
|
||||
dueDate
|
||||
hasTime
|
||||
complete
|
||||
completedAt
|
||||
position
|
||||
@ -3238,6 +3308,59 @@ export function useMeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptio
|
||||
export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
|
||||
export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
|
||||
export type MeQueryResult = ApolloReactCommon.QueryResult<MeQuery, MeQueryVariables>;
|
||||
export const MyTasksDocument = gql`
|
||||
query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
|
||||
projects {
|
||||
id
|
||||
name
|
||||
}
|
||||
myTasks(input: {status: $status, sort: $sort}) {
|
||||
tasks {
|
||||
id
|
||||
taskGroup {
|
||||
id
|
||||
name
|
||||
}
|
||||
name
|
||||
dueDate
|
||||
hasTime
|
||||
complete
|
||||
completedAt
|
||||
}
|
||||
projects {
|
||||
projectID
|
||||
taskID
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* __useMyTasksQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useMyTasksQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useMyTasksQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useMyTasksQuery({
|
||||
* variables: {
|
||||
* status: // value for 'status'
|
||||
* sort: // value for 'sort'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useMyTasksQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<MyTasksQuery, MyTasksQueryVariables>) {
|
||||
return ApolloReactHooks.useQuery<MyTasksQuery, MyTasksQueryVariables>(MyTasksDocument, baseOptions);
|
||||
}
|
||||
export function useMyTasksLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<MyTasksQuery, MyTasksQueryVariables>) {
|
||||
return ApolloReactHooks.useLazyQuery<MyTasksQuery, MyTasksQueryVariables>(MyTasksDocument, baseOptions);
|
||||
}
|
||||
export type MyTasksQueryHookResult = ReturnType<typeof useMyTasksQuery>;
|
||||
export type MyTasksLazyQueryHookResult = ReturnType<typeof useMyTasksLazyQuery>;
|
||||
export type MyTasksQueryResult = ApolloReactCommon.QueryResult<MyTasksQuery, MyTasksQueryVariables>;
|
||||
export const DeleteProjectDocument = gql`
|
||||
mutation deleteProject($projectID: UUID!) {
|
||||
deleteProject(input: {projectID: $projectID}) {
|
||||
@ -3440,8 +3563,10 @@ export type UpdateProjectMemberRoleMutationHookResult = ReturnType<typeof useUpd
|
||||
export type UpdateProjectMemberRoleMutationResult = ApolloReactCommon.MutationResult<UpdateProjectMemberRoleMutation>;
|
||||
export type UpdateProjectMemberRoleMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateProjectMemberRoleMutation, UpdateProjectMemberRoleMutationVariables>;
|
||||
export const CreateTaskDocument = gql`
|
||||
mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
|
||||
createTask(input: {taskGroupID: $taskGroupID, name: $name, position: $position}) {
|
||||
mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!, $assigned: [UUID!]) {
|
||||
createTask(
|
||||
input: {taskGroupID: $taskGroupID, name: $name, position: $position, assigned: $assigned}
|
||||
) {
|
||||
...TaskFields
|
||||
}
|
||||
}
|
||||
@ -3464,6 +3589,7 @@ export type CreateTaskMutationFn = ApolloReactCommon.MutationFunction<CreateTask
|
||||
* taskGroupID: // value for 'taskGroupID'
|
||||
* name: // value for 'name'
|
||||
* position: // value for 'position'
|
||||
* assigned: // value for 'assigned'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
@ -5175,4 +5301,4 @@ export function useUsersLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOp
|
||||
}
|
||||
export type UsersQueryHookResult = ReturnType<typeof useUsersQuery>;
|
||||
export type UsersLazyQueryHookResult = ReturnType<typeof useUsersLazyQuery>;
|
||||
export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
|
||||
export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
|
||||
|
||||
@ -6,6 +6,7 @@ const TASK_FRAGMENT = gql`
|
||||
name
|
||||
description
|
||||
dueDate
|
||||
hasTime
|
||||
complete
|
||||
completedAt
|
||||
position
|
||||
|
||||
24
frontend/src/shared/graphql/myTasks.graphqls
Normal file
24
frontend/src/shared/graphql/myTasks.graphqls
Normal file
@ -0,0 +1,24 @@
|
||||
query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
|
||||
projects {
|
||||
id
|
||||
name
|
||||
}
|
||||
myTasks(input: { status: $status, sort: $sort }) {
|
||||
tasks {
|
||||
id
|
||||
taskGroup {
|
||||
id
|
||||
name
|
||||
}
|
||||
name
|
||||
dueDate
|
||||
hasTime
|
||||
complete
|
||||
completedAt
|
||||
}
|
||||
projects {
|
||||
projectID
|
||||
taskID
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,8 +2,8 @@ import gql from 'graphql-tag';
|
||||
import TASK_FRAGMENT from '../fragments/task';
|
||||
|
||||
const CREATE_TASK_MUTATION = gql`
|
||||
mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
|
||||
createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
|
||||
mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!, $assigned: [UUID!]) {
|
||||
createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position, assigned: $assigned }) {
|
||||
...TaskFields
|
||||
}
|
||||
}
|
||||
|
||||
14
frontend/src/shared/hooks/useStickyState.ts
Normal file
14
frontend/src/shared/hooks/useStickyState.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
function useStickyState<T>(defaultValue: any, key: string): [T, React.Dispatch<React.SetStateAction<T>>] {
|
||||
const [value, setValue] = React.useState<T>(() => {
|
||||
const stickyValue = window.localStorage.getItem(key);
|
||||
return stickyValue !== null ? JSON.parse(stickyValue) : defaultValue;
|
||||
});
|
||||
React.useEffect(() => {
|
||||
window.localStorage.setItem(key, JSON.stringify(value));
|
||||
}, [key, value]);
|
||||
return [value, setValue];
|
||||
}
|
||||
|
||||
export default useStickyState;
|
||||
12
frontend/src/shared/icons/Briefcase.tsx
Normal file
12
frontend/src/shared/icons/Briefcase.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const Briefcase: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||
<path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default Briefcase;
|
||||
12
frontend/src/shared/icons/CheckCircleOutline.tsx
Normal file
12
frontend/src/shared/icons/CheckCircleOutline.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const CheckCircleOutline: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckCircleOutline;
|
||||
12
frontend/src/shared/icons/ChevronRight.tsx
Normal file
12
frontend/src/shared/icons/ChevronRight.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const ChevronRight: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||
<path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChevronRight;
|
||||
12
frontend/src/shared/icons/Cogs.tsx
Normal file
12
frontend/src/shared/icons/Cogs.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Icon, { IconProps } from './Icon';
|
||||
|
||||
const Cogs: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||
return (
|
||||
<Icon width={width} height={height} className={className} viewBox="0 0 640 512">
|
||||
<path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z" />
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cogs;
|
||||
@ -1,7 +1,11 @@
|
||||
import Cross from './Cross';
|
||||
import Cog from './Cog';
|
||||
import Cogs from './Cogs';
|
||||
import ArrowDown from './ArrowDown';
|
||||
import CheckCircleOutline from './CheckCircleOutline';
|
||||
import Briefcase from './Briefcase';
|
||||
import ListUnordered from './ListUnordered';
|
||||
import ChevronRight from './ChevronRight';
|
||||
import Dot from './Dot';
|
||||
import CaretDown from './CaretDown';
|
||||
import Eye from './Eye';
|
||||
@ -102,5 +106,9 @@ export {
|
||||
Dot,
|
||||
ArrowDown,
|
||||
CaretRight,
|
||||
CheckCircleOutline,
|
||||
Briefcase,
|
||||
DotCircle,
|
||||
ChevronRight,
|
||||
Cogs,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user