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

change: add loading state to project board

Browse Source
This commit is contained in:
Jordan Knott 2020-07-16 21:14:26 -05:00
parent a90ace7a06
commit 45a92636cb
5 changed files with 207 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/Projects/Project/Board/index.tsx
View File

@ -2,9 +2,9 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
import { MENU_TYPES } from 'shared/components/TopNavbar';
import updateApolloCache from 'shared/utils/cache';
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
import LabelManagerEditor from '../LabelManagerEditor';
import styled, { css } from 'styled-components/macro';
import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
import LabelManagerEditor from '../LabelManagerEditor';
import { usePopup, Popup } from 'shared/components/PopupMenu';
import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
import {
@ -47,6 +47,7 @@ import DueDateManager from 'shared/components/DueDateManager';
import UserIDContext from 'App/context';
import LabelManager from 'shared/components/PopupMenu/LabelManager';
import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
import EmptyBoard from 'shared/components/EmptyBoard';
const ProjectBar = styled.div`
display: flex;
@ -103,12 +104,18 @@ const initialQuickCardEditorState: QuickCardEditorState = {
};
type ProjectBoardProps = {
onCardLabelClick: () => void;
cardLabelVariant: CardLabelVariant;
projectID: string;
onCardLabelClick?: () => void;
cardLabelVariant?: CardLabelVariant;
projectID?: string;
loading?: boolean;
};
const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
const ProjectBoard: React.FC<ProjectBoardProps> = ({
projectID,
onCardLabelClick,
cardLabelVariant,
loading: isLoading = false,
}) => {
const [assignTask] = useAssignTaskMutation();
const [unassignTask] = useUnassignTaskMutation();
const $labelsRef = useRef<HTMLDivElement>(null);
@ -170,7 +177,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
const [updateTaskGroupName] = useUpdateTaskGroupNameMutation({});
const { loading, data } = useFindProjectQuery({
variables: { projectId: projectID },
variables: { projectId: projectID ?? '' },
});
const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
@ -256,7 +263,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
};
const onCreateList = (listName: string) => {
if (data) {
if (data && projectID) {
const [lastColumn] = data.findProject.taskGroups.sort((a, b) => a.position - b.position).slice(-1);
let position = 65535;
if (lastColumn) {
@ -266,8 +273,42 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
}
};
if (loading) {
return <span>loading</span>;
if (loading || isLoading) {
return (
<>
<ProjectBar>
<ProjectActions>
<ProjectAction disabled>
<CheckCircle width={13} height={13} />
<ProjectActionText>All Tasks</ProjectActionText>
</ProjectAction>
<ProjectAction disabled>
<Filter width={13} height={13} />
<ProjectActionText>Filter</ProjectActionText>
</ProjectAction>
<ProjectAction disabled>
<Sort width={13} height={13} />
<ProjectActionText>Sort</ProjectActionText>
</ProjectAction>
</ProjectActions>
<ProjectActions>
<ProjectAction>
<Tags width={13} height={13} />
<ProjectActionText>Labels</ProjectActionText>
</ProjectAction>
<ProjectAction disabled>
<ToggleOn width={13} height={13} />
<ProjectActionText>Fields</ProjectActionText>
</ProjectAction>
<ProjectAction disabled>
<Bolt width={13} height={13} />
<ProjectActionText>Rules</ProjectActionText>
</ProjectAction>
</ProjectActions>
</ProjectBar>
<EmptyBoard />
</>
);
}
if (data) {
labelsRef.current = data.findProject.labels;
@ -323,7 +364,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
taskLabels={null}
labelColors={data.labelColors}
labels={labelsRef}
projectID={projectID}
projectID={projectID ?? ''}
/>,
);
}}
@ -345,8 +386,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
onTaskClick={task => {
history.push(`${match.url}/c/${task.id}`);
}}
onCardLabelClick={onCardLabelClick}
cardLabelVariant={cardLabelVariant}
onCardLabelClick={onCardLabelClick ?? (() => {})}
cardLabelVariant={cardLabelVariant ?? 'large'}
onTaskDrop={(droppedTask, previousTaskGroupID) => {
updateTaskLocation({
variables: {
@ -475,7 +516,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
labelColors={data.labelColors}
labels={labelsRef}
taskLabels={taskLabelsRef}
projectID={projectID}
projectID={projectID ?? ''}
/>,
);
}}

2
frontend/src/Projects/Project/index.tsx
View File

@ -39,6 +39,7 @@ import Input from 'shared/components/Input';
import Member from 'shared/components/Member';
import Board from './Board';
import Details from './Details';
import EmptyBoard from 'shared/components/EmptyBoard';
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
@ -202,6 +203,7 @@ const Project = () => {
return (
<>
<GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
<Board loading />
</>
);
}

30
frontend/src/shared/components/Button/index.tsx
View File

@ -1,11 +1,11 @@
import React, { useRef } from 'react';
import styled, { css } from 'styled-components/macro';
const Text = styled.span<{ fontSize: string }>`
const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
position: relative;
display: flex;
align-items: center;
justify-content: center;
justify-content: ${props => props.justifyTextContent};
transition: all 0.2s ease;
font-size: ${props => props.fontSize};
color: rgba(${props => props.theme.colors.text.secondary});
@ -112,6 +112,7 @@ type ButtonProps = {
type?: 'button' | 'submit';
className?: string;
onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
justifyTextContent?: string;
};
const Button: React.FC<ButtonProps> = ({
@ -120,6 +121,7 @@ const Button: React.FC<ButtonProps> = ({
color = 'primary',
variant = 'filled',
type = 'button',
justifyTextContent = 'center',
onClick,
className,
children,
@ -134,7 +136,9 @@ const Button: React.FC<ButtonProps> = ({
case 'filled':
return (
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Filled>
);
case 'outline':
@ -147,13 +151,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Outline>
);
case 'flat':
return (
<Flat ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Flat>
);
case 'lineDown':
@ -166,7 +174,9 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
<LineX color={color} />
</LineDown>
);
@ -180,13 +190,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Gradient>
);
case 'relief':
return (
<Relief ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Relief>
);
default:

94
frontend/src/shared/components/EmptyBoard/index.tsx Normal file
View File

@ -0,0 +1,94 @@
import React from 'react';
import styled, { keyframes } from 'styled-components/macro';
import { mixin } from 'shared/utils/styles';
export const BoardContainer = styled.div`
position: relative;
overflow-y: auto;
outline: none;
flex-grow: 1;
`;
export const BoardWrapper = styled.div`
display: flex;
user-select: none;
white-space: nowrap;
margin-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
`;
export const Container = styled.div`
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
`;
export const defaultBaseColor = '#10163a';
export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
export const skeletonKeyframes = keyframes`
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
`;
export const Wrapper = styled.div`
// background-color: #ebecf0;
// background: rgb(244, 245, 247);
min-height: 120px;
opacity: 0.8;
background: #10163a;
color: #c2c6dc;
border-radius: 5px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
white-space: normal;
background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
background-size: 200px 100%;
background-repeat: no-repeat;
animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
`;
const EmptyBoard: React.FC = () => {
return (
<BoardContainer>
<BoardWrapper>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
<Container>
<Wrapper />
</Container>
</BoardWrapper>
</BoardContainer>
);
};
export default EmptyBoard;

60
frontend/src/shared/components/TaskDetails/index.tsx
View File

@ -1,5 +1,5 @@
import React, {useState, useRef, useEffect} from 'react';
import {Bin, Cross, Plus} from 'shared/icons';
import React, { useState, useRef, useEffect } from 'react';
import { Bin, Cross, Plus } from 'shared/icons';
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
import ReactMarkdown from 'react-markdown';
@ -9,7 +9,7 @@ import {
getNewDraggablePosition,
getAfterDropDraggableList,
} from 'shared/utils/draggables';
import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import TaskAssignee from 'shared/components/TaskAssignee';
import moment from 'moment';
@ -54,7 +54,7 @@ import {
MetaDetailTitle,
MetaDetailContent,
} from './Styles';
import Checklist, {ChecklistItem, ChecklistItems} from '../Checklist';
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
import styled from 'styled-components';
const ChecklistContainer = styled.div``;
@ -69,7 +69,7 @@ type TaskLabelProps = {
onClick: ($target: React.RefObject<HTMLElement>) => void;
};
const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
const $label = useRef<HTMLDivElement>(null);
return (
<TaskDetailLabel
@ -84,14 +84,14 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
);
};
const TaskContent: React.FC<TaskContentProps> = ({description, onEditContent}) => {
const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
return description === '' ? (
<TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
) : (
<TaskDetailsMarkdown onClick={onEditContent}>
<ReactMarkdown source={description} />
</TaskDetailsMarkdown>
);
<TaskDetailsMarkdown onClick={onEditContent}>
<ReactMarkdown source={description} />
</TaskDetailsMarkdown>
);
};
type DetailsEditorProps = {
@ -214,7 +214,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
onOpenAddLabelPopup(task, $target);
};
const onDragEnd = ({draggableId, source, destination, type}: DropResult) => {
const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
if (typeof destination === 'undefined') return;
if (!isPositionChanged(source, destination)) return;
@ -233,7 +233,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
};
beforeDropDraggables = getSortedDraggables(
task.checklists.map(checklist => {
return {id: checklist.id, position: checklist.position};
return { id: checklist.id, position: checklist.position };
}),
);
if (droppedDraggable === null || beforeDropDraggables === null) {
@ -249,9 +249,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
console.log(droppedGroup);
console.log(`positiion: ${newPosition}`);
onChecklistDrop({...droppedGroup, position: newPosition});
onChecklistDrop({ ...droppedGroup, position: newPosition });
} else {
throw {error: 'task group can not be found'};
throw { error: 'task group can not be found' };
}
} else {
const targetChecklist = task.checklists.findIndex(
@ -266,7 +266,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
};
beforeDropDraggables = getSortedDraggables(
task.checklists[targetChecklist].items.map(item => {
return {id: item.id, position: item.position};
return { id: item.id, position: item.position };
}),
);
if (droppedDraggable === null || beforeDropDraggables === null) {
@ -379,8 +379,8 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
}}
/>
) : (
<TaskContent description={description} onEditContent={handleClick} />
)}
<TaskContent description={description} onEditContent={handleClick} />
)}
<DragDropContext onDragEnd={onDragEnd}>
<Droppable direction="vertical" type="checklist" droppableId="root">
{dropProvided => (
@ -438,7 +438,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
complete={item.complete}
onDeleteItem={onDeleteItem}
onChangeName={onChangeItemName}
onToggleItem={(itemID, complete) => onToggleChecklistItem(item.id, complete)}
onToggleItem={(itemID, complete) =>
onToggleChecklistItem(item.id, complete)
}
/>
)}
</Draggable>
@ -461,15 +463,23 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
<TaskDetailsSidebar>
<ActionButtons>
<ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
<ActionButton onClick={() => onToggleTaskComplete(task)}>
<ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
{task.complete ? 'Mark Incomplete' : 'Mark Complete'}
</ActionButton>
<ActionButton onClick={$target => onAddMember($target)}>Members</ActionButton>
<ActionButton onClick={$target => onAddLabel($target)}>Labels</ActionButton>
<ActionButton onClick={$target => onAddChecklist($target)}>Checklist</ActionButton>
<ActionButton onClick={$target => onOpenDueDatePopop(task, $target)}>Due Date</ActionButton>
<ActionButton>Attachment</ActionButton>
<ActionButton>Cover</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
Members
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
Labels
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
Checklist
</ActionButton>
<ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
Due Date
</ActionButton>
<ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
<ActionButton justifyTextContent="flex-start">Cover</ActionButton>
</ActionButtons>
</TaskDetailsSidebar>
</TaskDetailsWrapper>