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) => { onChangeChecklistName={(checklistID, newName) => {
updateTaskChecklistName({ variables: { taskChecklistID: checklistID, name: newName } }); updateTaskChecklistName({ variables: { taskChecklistID: checklistID, name: newName } });
}} }}
onDeleteItem={itemID => { onDeleteItem={(checklistID, itemID) => {
deleteTaskChecklistItem({variables: {taskChecklistItemID: itemID}}); deleteTaskChecklistItem({
variables: { taskChecklistItemID: itemID },
optimisticResponse: {
__typename: 'Mutation',
deleteTaskChecklistItem: {
__typename: 'DeleteTaskChecklistItemPayload',
ok: true,
taskChecklistItem: {
__typename: 'TaskChecklistItem',
id: itemID,
taskChecklistID: checklistID,
}
}
}
});
}} }}
onToggleChecklistItem={(itemID, complete) => { onToggleChecklistItem={(itemID, complete) => {
setTaskChecklistItemComplete({ setTaskChecklistItemComplete({

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

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

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

@ -129,6 +129,7 @@ const ChecklistItemTextControls = styled.div`
padding: 6px 0; padding: 6px 0;
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
align-items: center;
`; `;
const ChecklistItemText = styled.span<{complete: boolean}>` const ChecklistItemText = styled.span<{complete: boolean}>`
@ -155,6 +156,11 @@ const ControlButton = styled.div`
padding: 4px 6px; padding: 4px 6px;
border-radius: 6px; border-radius: 6px;
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8); background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
display: flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
&:hover { &:hover {
background-color: rgba(${props => props.theme.colors.primary}, 1); 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-property: transform, opacity, height, padding, margin;
transition-duration: 0.14s; transition-duration: 0.14s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
& ${ControlButton}:last-child {
margin-right: 4px;
}
&:hover { &:hover {
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4); background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
@ -274,18 +283,19 @@ const ChecklistNewItem = styled.div`
type ChecklistItemProps = { type ChecklistItemProps = {
itemID: string; itemID: string;
checklistID: string;
complete: boolean; complete: boolean;
name: string; name: string;
onChangeName: (itemID: string, currentName: string) => void; onChangeName: (itemID: string, currentName: string) => void;
wrapperProps: any; wrapperProps: any;
handleProps: any; handleProps: any;
onToggleItem: (itemID: string, complete: boolean) => void; onToggleItem: (itemID: string, complete: boolean) => void;
onDeleteItem: (itemID: string) => void; onDeleteItem: (checklistIDID: string, itemID: string) => void;
}; };
export const ChecklistItem = React.forwardRef( 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, $item,
) => { ) => {
const $editor = useRef<HTMLTextAreaElement>(null); const $editor = useRef<HTMLTextAreaElement>(null);
@ -352,7 +362,7 @@ export const ChecklistItem = React.forwardRef(
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
setEditting(false); setEditting(false);
onDeleteItem(itemID); onDeleteItem(checklistID, itemID);
}} }}
> >
<Trash width={16} height={16} /> <Trash width={16} height={16} />
@ -378,7 +388,7 @@ export const ChecklistItem = React.forwardRef(
<ControlButton <ControlButton
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
onDeleteItem(itemID); onDeleteItem(checklistID, itemID);
}} }}
> >
<TrashButton width={14} height={14} /> <TrashButton width={14} height={14} />
@ -515,7 +525,7 @@ type ChecklistProps = {
onChangeItemName: (itemID: string, currentName: string) => void; onChangeItemName: (itemID: string, currentName: string) => void;
wrapperProps: any; wrapperProps: any;
handleProps: any; handleProps: any;
onDeleteItem: (itemID: string) => void; onDeleteItem: (checklistID: string, itemID: string) => void;
onAddItem: (itemName: string) => void; onAddItem: (itemName: string) => void;
items: Array<TaskChecklistItem>; 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; onTaskDescriptionChange: (task: Task, newDescription: string) => void;
onDeleteTask: (task: Task) => void; onDeleteTask: (task: Task) => void;
onAddItem: (checklistID: string, name: string, position: number) => 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; onChangeItemName: (itemID: string, itemName: string) => void;
onToggleTaskComplete: (task: Task) => void; onToggleTaskComplete: (task: Task) => void;
onToggleChecklistItem: (itemID: string, complete: boolean) => void; onToggleChecklistItem: (itemID: string, complete: boolean) => void;
@ -430,6 +430,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
<ChecklistItem <ChecklistItem
key={item.id} key={item.id}
itemID={item.id} itemID={item.id}
checklistID={item.taskChecklistID}
ref={itemDrop.innerRef} ref={itemDrop.innerRef}
wrapperProps={itemDrop.draggableProps} wrapperProps={itemDrop.draggableProps}
handleProps={itemDrop.dragHandleProps} handleProps={itemDrop.dragHandleProps}
@ -437,7 +438,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
complete={item.complete} complete={item.complete}
onDeleteItem={onDeleteItem} onDeleteItem={onDeleteItem}
onChangeName={onChangeItemName} onChangeName={onChangeItemName}
onToggleItem={() => {}} onToggleItem={(itemID, complete) => onToggleChecklistItem(item.id, complete)}
/> />
)} )}
</Draggable> </Draggable>