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

bugfix: fix user checklist item toggle completion

Browse Source
This commit is contained in:
Jordan Knott 2020-07-13 16:21:37 -05:00
parent d8daa60729
commit 1e9813601e
4 changed files with 551 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/Projects/Project/Details/index.tsx
View File

@ -360,8 +360,22 @@ const Details: React.FC<DetailsProps> = ({
onChangeChecklistName={(checklistID, 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({

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

@ -138,6 +138,7 @@ export const Default = () => {
key={item.id}
wrapperProps={{}}
handleProps={{}}
checklistID='id'
itemID={item.id}
name={item.name}
complete={item.complete}

20
frontend/src/shared/components/Checklist/index.tsx
View File

@ -129,6 +129,7 @@ const ChecklistItemTextControls = styled.div`
padding: 6px 0;
width: 100%;
display: inline-flex;
align-items: center;
`;
const ChecklistItemText = styled.span<{complete: boolean}>`
@ -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);
}
@ -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} />
@ -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>;
};

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

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