bugfix: fix user checklist item toggle completion
This commit is contained in:
Jordan Knott
parent
d8daa60729
commit
1e9813601e
@ -1,9 +1,9 @@
|
||||
import React, {useState, useContext, useEffect} from 'react';
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import Modal from 'shared/components/Modal';
|
||||
import TaskDetails from 'shared/components/TaskDetails';
|
||||
import PopupMenu, {Popup, usePopup} from 'shared/components/PopupMenu';
|
||||
import PopupMenu, { Popup, usePopup } from 'shared/components/PopupMenu';
|
||||
import MemberManager from 'shared/components/MemberManager';
|
||||
import {useRouteMatch, useHistory} from 'react-router';
|
||||
import { useRouteMatch, useHistory } from 'react-router';
|
||||
import {
|
||||
useDeleteTaskChecklistMutation,
|
||||
useUpdateTaskChecklistNameMutation,
|
||||
@ -29,7 +29,7 @@ import produce from 'immer';
|
||||
import styled from 'styled-components';
|
||||
import Button from 'shared/components/Button';
|
||||
import Input from 'shared/components/Input';
|
||||
import {useForm} from 'react-hook-form';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import updateApolloCache from 'shared/utils/cache';
|
||||
|
||||
const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
|
||||
@ -49,7 +49,7 @@ const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
|
||||
}, 0),
|
||||
0,
|
||||
);
|
||||
return {total, complete};
|
||||
return { total, complete };
|
||||
};
|
||||
|
||||
const DeleteChecklistButton = styled(Button)`
|
||||
@ -82,8 +82,8 @@ const InputError = styled.span`
|
||||
type CreateChecklistPopupProps = {
|
||||
onCreateChecklist: (data: CreateChecklistData) => void;
|
||||
};
|
||||
const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({onCreateChecklist}) => {
|
||||
const {register, handleSubmit, errors} = useForm<CreateChecklistData>();
|
||||
const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
|
||||
const { register, handleSubmit, errors } = useForm<CreateChecklistData>();
|
||||
const createUser = (data: CreateChecklistData) => {
|
||||
onCreateChecklist(data);
|
||||
};
|
||||
@ -98,7 +98,7 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({onCreateChec
|
||||
id="name"
|
||||
name="name"
|
||||
variant="alternate"
|
||||
ref={register({required: 'Checklist name is required'})}
|
||||
ref={register({ required: 'Checklist name is required' })}
|
||||
/>
|
||||
<CreateChecklistButton type="submit">Create</CreateChecklistButton>
|
||||
</CreateChecklistForm>
|
||||
@ -116,7 +116,7 @@ type DetailsProps = {
|
||||
refreshCache: () => void;
|
||||
};
|
||||
|
||||
const initialMemberPopupState = {taskID: '', isOpen: false, top: 0, left: 0};
|
||||
const initialMemberPopupState = { taskID: '', isOpen: false, top: 0, left: 0 };
|
||||
|
||||
const Details: React.FC<DetailsProps> = ({
|
||||
projectURL,
|
||||
@ -128,8 +128,8 @@ const Details: React.FC<DetailsProps> = ({
|
||||
availableMembers,
|
||||
refreshCache,
|
||||
}) => {
|
||||
const {userID} = useContext(UserIDContext);
|
||||
const {showPopup, hidePopup} = usePopup();
|
||||
const { userID } = useContext(UserIDContext);
|
||||
const { showPopup, hidePopup } = usePopup();
|
||||
const history = useHistory();
|
||||
const match = useRouteMatch();
|
||||
const [currentMemberTask, setCurrentMemberTask] = useState('');
|
||||
@ -142,7 +142,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const {prevChecklistID, checklistID, checklistItem} = response.data.updateTaskChecklistItemLocation;
|
||||
const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
|
||||
console.log(`${checklistID} !== ${prevChecklistID}`);
|
||||
if (checklistID !== prevChecklistID) {
|
||||
const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
|
||||
@ -164,7 +164,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
}
|
||||
}
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -175,14 +175,14 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const {complete, total} = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -193,10 +193,10 @@ const Details: React.FC<DetailsProps> = ({
|
||||
FindTaskDocument,
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const {checklists} = cache.findTask;
|
||||
const { checklists } = cache.findTask;
|
||||
console.log(deleteData)
|
||||
draftCache.findTask.checklists = checklists.filter(c => c.id !== deleteData.data.deleteTaskChecklist.taskChecklist.id);
|
||||
const {complete, total} = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
@ -206,7 +206,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
draftCache.findTask.badges.checklist = null;
|
||||
}
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -219,9 +219,9 @@ const Details: React.FC<DetailsProps> = ({
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const item = createData.data.createTaskChecklist;
|
||||
draftCache.findTask.checklists.push({...item});
|
||||
draftCache.findTask.checklists.push({ ...item });
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -238,14 +238,14 @@ const Details: React.FC<DetailsProps> = ({
|
||||
if (targetIdx > -1) {
|
||||
draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(c => item.id !== c.id);
|
||||
}
|
||||
const {complete, total} = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
total,
|
||||
};
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -257,11 +257,11 @@ const Details: React.FC<DetailsProps> = ({
|
||||
cache =>
|
||||
produce(cache, draftCache => {
|
||||
const item = newTaskItem.data.createTaskChecklistItem;
|
||||
const {checklists} = cache.findTask;
|
||||
const { checklists } = cache.findTask;
|
||||
const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
|
||||
if (idx !== -1) {
|
||||
draftCache.findTask.checklists[idx].items.push({...item});
|
||||
const {complete, total} = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.checklists[idx].items.push({ ...item });
|
||||
const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
|
||||
draftCache.findTask.badges.checklist = {
|
||||
__typename: 'ChecklistBadge',
|
||||
complete,
|
||||
@ -269,11 +269,11 @@ const Details: React.FC<DetailsProps> = ({
|
||||
};
|
||||
}
|
||||
}),
|
||||
{taskID},
|
||||
{ taskID },
|
||||
);
|
||||
},
|
||||
});
|
||||
const {loading, data, refetch} = useFindTaskQuery({variables: {taskID}});
|
||||
const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
|
||||
const [setTaskComplete] = useSetTaskCompleteMutation();
|
||||
const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
|
||||
onCompleted: () => {
|
||||
@ -312,7 +312,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
task={data.findTask}
|
||||
onChecklistDrop={checklist => {
|
||||
updateTaskChecklistLocation({
|
||||
variables: {checklistID: checklist.id, position: checklist.position},
|
||||
variables: { checklistID: checklist.id, position: checklist.position },
|
||||
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
@ -329,7 +329,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
}}
|
||||
onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
|
||||
updateTaskChecklistItemLocation({
|
||||
variables: {checklistID, checklistItemID: checklistItem.id, position: checklistItem.position},
|
||||
variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
|
||||
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
@ -350,22 +350,36 @@ const Details: React.FC<DetailsProps> = ({
|
||||
onTaskNameChange={onTaskNameChange}
|
||||
onTaskDescriptionChange={onTaskDescriptionChange}
|
||||
onToggleTaskComplete={task => {
|
||||
setTaskComplete({variables: {taskID: task.id, complete: !task.complete}});
|
||||
setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
|
||||
}}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onChangeItemName={(itemID, itemName) => {
|
||||
updateTaskChecklistItemName({variables: {taskChecklistItemID: itemID, name: itemName}});
|
||||
updateTaskChecklistItemName({ variables: { taskChecklistItemID: itemID, name: itemName } });
|
||||
}}
|
||||
onCloseModal={() => history.push(projectURL)}
|
||||
onChangeChecklistName={(checklistID, newName) => {
|
||||
updateTaskChecklistName({variables: {taskChecklistID: checklistID, name: newName}});
|
||||
updateTaskChecklistName({ variables: { taskChecklistID: checklistID, name: newName } });
|
||||
}}
|
||||
onDeleteItem={itemID => {
|
||||
deleteTaskChecklistItem({variables: {taskChecklistItemID: itemID}});
|
||||
onDeleteItem={(checklistID, itemID) => {
|
||||
deleteTaskChecklistItem({
|
||||
variables: { taskChecklistItemID: itemID },
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteTaskChecklistItem: {
|
||||
__typename: 'DeleteTaskChecklistItemPayload',
|
||||
ok: true,
|
||||
taskChecklistItem: {
|
||||
__typename: 'TaskChecklistItem',
|
||||
id: itemID,
|
||||
taskChecklistID: checklistID,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
onToggleChecklistItem={(itemID, complete) => {
|
||||
setTaskChecklistItemComplete({
|
||||
variables: {taskChecklistItemID: itemID, complete},
|
||||
variables: { taskChecklistItemID: itemID, complete },
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
setTaskChecklistItemComplete: {
|
||||
@ -377,19 +391,19 @@ const Details: React.FC<DetailsProps> = ({
|
||||
});
|
||||
}}
|
||||
onAddItem={(taskChecklistID, name, position) => {
|
||||
createTaskChecklistItem({variables: {taskChecklistID, name, position}});
|
||||
createTaskChecklistItem({ variables: { taskChecklistID, name, position } });
|
||||
}}
|
||||
onMemberProfile={($targetRef, memberID) => {
|
||||
const member = data.findTask.assigned.find(m => m.id === memberID);
|
||||
if (member) {
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<Popup title={null} onClose={() => {}} tab={0}>
|
||||
<Popup title={null} onClose={() => { }} tab={0}>
|
||||
<MiniProfile
|
||||
user={member}
|
||||
bio="None"
|
||||
onRemoveFromTask={() => {
|
||||
unassignTask({variables: {taskID: data.findTask.id, userID: userID ?? ''}});
|
||||
unassignTask({ variables: { taskID: data.findTask.id, userID: userID ?? '' } });
|
||||
}}
|
||||
/>
|
||||
</Popup>,
|
||||
@ -399,15 +413,15 @@ const Details: React.FC<DetailsProps> = ({
|
||||
onOpenAddMemberPopup={(task, $targetRef) => {
|
||||
showPopup(
|
||||
$targetRef,
|
||||
<Popup title="Members" tab={0} onClose={() => {}}>
|
||||
<Popup title="Members" tab={0} onClose={() => { }}>
|
||||
<MemberManager
|
||||
availableMembers={availableMembers}
|
||||
activeMembers={data.findTask.assigned}
|
||||
onMemberChange={(member, isActive) => {
|
||||
if (isActive) {
|
||||
assignTask({variables: {taskID: data.findTask.id, userID: userID ?? ''}});
|
||||
assignTask({ variables: { taskID: data.findTask.id, userID: userID ?? '' } });
|
||||
} else {
|
||||
unassignTask({variables: {taskID: data.findTask.id, userID: userID ?? ''}});
|
||||
unassignTask({ variables: { taskID: data.findTask.id, userID: userID ?? '' } });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -457,7 +471,7 @@ const Details: React.FC<DetailsProps> = ({
|
||||
<DeleteChecklistButton
|
||||
color="danger"
|
||||
onClick={() => {
|
||||
deleteTaskChecklist({variables: {taskChecklistID: checklistID}});
|
||||
deleteTaskChecklist({ variables: { taskChecklistID: checklistID } });
|
||||
hidePopup();
|
||||
}}
|
||||
>
|
||||
@ -479,14 +493,14 @@ const Details: React.FC<DetailsProps> = ({
|
||||
<DueDateManager
|
||||
task={task}
|
||||
onRemoveDueDate={t => {
|
||||
updateTaskDueDate({variables: {taskID: t.id, dueDate: null}});
|
||||
updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
|
||||
hidePopup();
|
||||
}}
|
||||
onDueDateChange={(t, newDueDate) => {
|
||||
updateTaskDueDate({variables: {taskID: t.id, dueDate: newDueDate}});
|
||||
updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
|
||||
hidePopup();
|
||||
}}
|
||||
onCancel={() => {}}
|
||||
onCancel={() => { }}
|
||||
/>
|
||||
</Popup>,
|
||||
);
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import React, {useState} from 'react';
|
||||
import {action} from '@storybook/addon-actions';
|
||||
import BaseStyles from 'App/BaseStyles';
|
||||
import NormalizeStyles from 'App/NormalizeStyles';
|
||||
import { theme } from 'App/ThemeStyles';
|
||||
import {theme} from 'App/ThemeStyles';
|
||||
import produce from 'immer';
|
||||
import styled, { ThemeProvider } from 'styled-components';
|
||||
import Checklist, { ChecklistItem } from '.';
|
||||
import styled, {ThemeProvider} from 'styled-components';
|
||||
import Checklist, {ChecklistItem} from '.';
|
||||
|
||||
export default {
|
||||
component: Checklist,
|
||||
title: 'Checklist',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
{name: 'gray', value: '#f8f8f8', default: true},
|
||||
{name: 'white', value: '#ffffff'},
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -138,6 +138,7 @@ export const Default = () => {
|
||||
key={item.id}
|
||||
wrapperProps={{}}
|
||||
handleProps={{}}
|
||||
checklistID='id'
|
||||
itemID={item.id}
|
||||
name={item.name}
|
||||
complete={item.complete}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import React, {useState, useRef, useEffect} from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { CheckSquare, Trash, Square, CheckSquareOutline, Clock, Cross, AccountPlus } from 'shared/icons';
|
||||
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
|
||||
import {CheckSquare, Trash, Square, CheckSquareOutline, Clock, Cross, AccountPlus} from 'shared/icons';
|
||||
import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
|
||||
import {
|
||||
isPositionChanged,
|
||||
getSortedDraggables,
|
||||
@ -81,7 +81,7 @@ const ChecklistProgressBar = styled.div`
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
`;
|
||||
const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
|
||||
const ChecklistProgressBarCurrent = styled.div<{width: number}>`
|
||||
width: ${props => props.width}%;
|
||||
background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
|
||||
bottom: 0;
|
||||
@ -129,9 +129,10 @@ const ChecklistItemTextControls = styled.div`
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ChecklistItemText = styled.span<{ complete: boolean }>`
|
||||
const ChecklistItemText = styled.span<{complete: boolean}>`
|
||||
color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
|
||||
${props => props.complete && 'text-decoration: line-through;'}
|
||||
line-height: 20px;
|
||||
@ -155,6 +156,11 @@ const ControlButton = styled.div`
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
background-color: rgba(${props => props.theme.colors.primary}, 1);
|
||||
}
|
||||
@ -206,7 +212,7 @@ const TrashButton = styled(Trash)`
|
||||
fill: rgba(${props => props.theme.colors.text.primary});
|
||||
`;
|
||||
|
||||
const ChecklistItemWrapper = styled.div<{ ref: any }>`
|
||||
const ChecklistItemWrapper = styled.div<{ref: any}>`
|
||||
user-select: none;
|
||||
clear: both;
|
||||
padding-left: 40px;
|
||||
@ -216,6 +222,9 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
|
||||
transition-property: transform, opacity, height, padding, margin;
|
||||
transition-duration: 0.14s;
|
||||
transition-timing-function: ease-in;
|
||||
& ${ControlButton}:last-child {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
||||
@ -274,18 +283,19 @@ const ChecklistNewItem = styled.div`
|
||||
|
||||
type ChecklistItemProps = {
|
||||
itemID: string;
|
||||
checklistID: string;
|
||||
complete: boolean;
|
||||
name: string;
|
||||
onChangeName: (itemID: string, currentName: string) => void;
|
||||
wrapperProps: any;
|
||||
handleProps: any;
|
||||
onToggleItem: (itemID: string, complete: boolean) => void;
|
||||
onDeleteItem: (itemID: string) => void;
|
||||
onDeleteItem: (checklistIDID: string, itemID: string) => void;
|
||||
};
|
||||
|
||||
export const ChecklistItem = React.forwardRef(
|
||||
(
|
||||
{ itemID, complete, name, wrapperProps, handleProps, onChangeName, onToggleItem, onDeleteItem }: ChecklistItemProps,
|
||||
{itemID, checklistID, complete, name, wrapperProps, handleProps, onChangeName, onToggleItem, onDeleteItem}: ChecklistItemProps,
|
||||
$item,
|
||||
) => {
|
||||
const $editor = useRef<HTMLTextAreaElement>(null);
|
||||
@ -352,7 +362,7 @@ export const ChecklistItem = React.forwardRef(
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
setEditting(false);
|
||||
onDeleteItem(itemID);
|
||||
onDeleteItem(checklistID, itemID);
|
||||
}}
|
||||
>
|
||||
<Trash width={16} height={16} />
|
||||
@ -378,7 +388,7 @@ export const ChecklistItem = React.forwardRef(
|
||||
<ControlButton
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDeleteItem(itemID);
|
||||
onDeleteItem(checklistID, itemID);
|
||||
}}
|
||||
>
|
||||
<TrashButton width={14} height={14} />
|
||||
@ -397,7 +407,7 @@ type AddNewItemProps = {
|
||||
onAddItem: (name: string) => void;
|
||||
};
|
||||
|
||||
const AddNewItem: React.FC<AddNewItemProps> = ({ onAddItem }) => {
|
||||
const AddNewItem: React.FC<AddNewItemProps> = ({onAddItem}) => {
|
||||
const $editor = useRef<HTMLTextAreaElement>(null);
|
||||
const $wrapper = useRef<HTMLDivElement>(null);
|
||||
const [currentName, setCurrentName] = useState('');
|
||||
@ -467,7 +477,7 @@ type ChecklistTitleEditorProps = {
|
||||
};
|
||||
|
||||
const ChecklistTitleEditor = React.forwardRef(
|
||||
({ name, onChangeName, onCancel }: ChecklistTitleEditorProps, $name: any) => {
|
||||
({name, onChangeName, onCancel}: ChecklistTitleEditorProps, $name: any) => {
|
||||
const [currentName, setCurrentName] = useState(name);
|
||||
return (
|
||||
<>
|
||||
@ -515,7 +525,7 @@ type ChecklistProps = {
|
||||
onChangeItemName: (itemID: string, currentName: string) => void;
|
||||
wrapperProps: any;
|
||||
handleProps: any;
|
||||
onDeleteItem: (itemID: string) => void;
|
||||
onDeleteItem: (checklistID: string, itemID: string) => void;
|
||||
onAddItem: (itemName: string) => void;
|
||||
items: Array<TaskChecklistItem>;
|
||||
};
|
||||
|
||||
@ -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,7 +84,7 @@ 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>
|
||||
) : (
|
||||
@ -144,7 +144,7 @@ type TaskDetailsProps = {
|
||||
onTaskDescriptionChange: (task: Task, newDescription: string) => void;
|
||||
onDeleteTask: (task: Task) => void;
|
||||
onAddItem: (checklistID: string, name: string, position: number) => void;
|
||||
onDeleteItem: (itemID: string) => void;
|
||||
onDeleteItem: (checklistID: string, itemID: string) => void;
|
||||
onChangeItemName: (itemID: string, itemName: string) => void;
|
||||
onToggleTaskComplete: (task: Task) => void;
|
||||
onToggleChecklistItem: (itemID: string, complete: boolean) => void;
|
||||
@ -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) {
|
||||
@ -430,6 +430,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
<ChecklistItem
|
||||
key={item.id}
|
||||
itemID={item.id}
|
||||
checklistID={item.taskChecklistID}
|
||||
ref={itemDrop.innerRef}
|
||||
wrapperProps={itemDrop.draggableProps}
|
||||
handleProps={itemDrop.dragHandleProps}
|
||||
@ -437,7 +438,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||
complete={item.complete}
|
||||
onDeleteItem={onDeleteItem}
|
||||
onChangeName={onChangeItemName}
|
||||
onToggleItem={() => {}}
|
||||
onToggleItem={(itemID, complete) => onToggleChecklistItem(item.id, complete)}
|
||||
/>
|
||||
)}
|
||||
</Draggable>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user