frontend: add the ability to close / solve an issue.
This commit is contained in:
parent
98117a4948
commit
e8b5963495
4 changed files with 24 additions and 7 deletions
|
@ -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;
|
||||
|
|
|
@ -35,12 +35,15 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.trash.icon {
|
||||
.trash.icon, .done.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trash.icon {
|
||||
g {
|
||||
fill: #d9534f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<div className="table">
|
||||
<div className="table div">Issues</div>
|
||||
|
@ -28,7 +34,10 @@ export function Issues() {
|
|||
<a href={`/issues/edit#id=${issue.id}`}>
|
||||
<span className="item title">{issue.title}</span>
|
||||
</a>
|
||||
<span><TrashIcon onClick={() => onDestroy(issue)} /></span>
|
||||
<div className="actions">
|
||||
<DoneIcon onClick={() => onDone(issue)} />
|
||||
<TrashIcon onClick={() => onDestroy(issue)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom">
|
||||
<span>
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
type Params = {
|
||||
id?: number;
|
||||
title: string;
|
||||
content: string;
|
||||
connectionId: number;
|
||||
state?: "open" | "closed";
|
||||
title?: string;
|
||||
content?: string;
|
||||
connectionId?: number;
|
||||
};
|
||||
|
||||
export function useUpsertIssue() {
|
||||
|
|
Loading…
Reference in a new issue