diff --git a/twenty-frontend/src/css/_items.scss b/twenty-frontend/src/css/_items.scss index d14a5dc..081f230 100644 --- a/twenty-frontend/src/css/_items.scss +++ b/twenty-frontend/src/css/_items.scss @@ -15,6 +15,10 @@ ul.items { display: flex; justify-content: space-between; width: 100%; + .actions { + display: flex; + grid-gap: 5px; + } } .bottom { margin: 10px 0 0 0; diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss index 34d93f5..d1d3ef4 100644 --- a/twenty-frontend/src/css/main.scss +++ b/twenty-frontend/src/css/main.scss @@ -35,12 +35,15 @@ body { } } - .trash.icon { + .trash.icon, .done.icon { height: 20px; width: 20px; cursor: pointer; + } + .trash.icon { g { fill: #d9534f; } } + } diff --git a/twenty-frontend/src/js/components/Issues.tsx b/twenty-frontend/src/js/components/Issues.tsx index d2a912a..4f44b45 100644 --- a/twenty-frontend/src/js/components/Issues.tsx +++ b/twenty-frontend/src/js/components/Issues.tsx @@ -1,19 +1,25 @@ import React from "react"; import { useIssues } from "/hooks/useIssues"; import { useDestroyIssue } from "/hooks/useDestroyIssue"; -import { TrashIcon } from "/components/Icons"; +import { TrashIcon, DoneIcon } from "/components/Icons"; import { DateTime } from "luxon"; import { Issue } from "/types/schema"; +import { useUpsertIssue } from "hooks/useUpsertIssue"; export function Issues() { const { issues, setIssues } = useIssues(); + const upsertIssue = useUpsertIssue(); const destroyIssue = useDestroyIssue(); const onDestroy = (issue: Issue) => { destroyIssue({id: issue.id}) .then(() => issues.filter((i) => i.id !== issue.id)) .then((issues) => setIssues(issues)); } - + const onDone = (issue: Issue) => { + upsertIssue({input: {id: issue.id, state: "closed"}}) + .then(() => issues.filter((i) => i.id !== issue.id)) + .then((issues) => setIssues(issues)); + } return (