frontend: add the ability to close / solve an issue.

This commit is contained in:
0x1eef 2023-12-22 17:26:54 -03:00
parent 98117a4948
commit e8b5963495
4 changed files with 24 additions and 7 deletions

View file

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

View file

@ -35,12 +35,15 @@ body {
}
}
.trash.icon {
.trash.icon, .done.icon {
height: 20px;
width: 20px;
cursor: pointer;
}
.trash.icon {
g {
fill: #d9534f;
}
}
}

View file

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

View file

@ -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() {