Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add my tasks list view

Browse Source
This commit is contained in:
Jordan Knott
2020-12-30 20:56:59 -06:00
parent d6101d9221
commit dcf53b9077
30 changed files with 2640 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/shared/components/PopupMenu/index.tsx
View File

@ -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}

52
frontend/src/shared/components/Select/index.tsx
View File

@ -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;

1
frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx
View File

@ -43,6 +43,7 @@ export const Default = () => {
onDashboardClick={action('open dashboard')}
onRemoveFromBoard={action('remove project')}
onProfileClick={action('profile click')}
onMyTasksClick={action('profile click')}
/>
</>
);

4
frontend/src/shared/components/TopNavbar/index.tsx
View File

@ -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}>

134
frontend/src/shared/generated/graphql.tsx
View File

@ -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>;

1
frontend/src/shared/graphql/fragments/task.ts
View File

@ -6,6 +6,7 @@ const TASK_FRAGMENT = gql`
name
description
dueDate
hasTime
complete
completedAt
position

24
frontend/src/shared/graphql/myTasks.graphqls Normal file
View 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
}
}
}

4
frontend/src/shared/graphql/task/createTask.ts
View File

@ -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
View 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
View 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
View 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
View 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
View 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;

8
frontend/src/shared/icons/index.ts
View File

@ -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,
};