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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
margin: 10px 0 0 0;
|
margin: 10px 0 0 0;
|
||||||
|
|
|
@ -35,12 +35,15 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash.icon {
|
.trash.icon, .done.icon {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.trash.icon {
|
||||||
g {
|
g {
|
||||||
fill: #d9534f;
|
fill: #d9534f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,25 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useIssues } from "/hooks/useIssues";
|
import { useIssues } from "/hooks/useIssues";
|
||||||
import { useDestroyIssue } from "/hooks/useDestroyIssue";
|
import { useDestroyIssue } from "/hooks/useDestroyIssue";
|
||||||
import { TrashIcon } from "/components/Icons";
|
import { TrashIcon, DoneIcon } from "/components/Icons";
|
||||||
import { DateTime } from "luxon";
|
import { DateTime } from "luxon";
|
||||||
import { Issue } from "/types/schema";
|
import { Issue } from "/types/schema";
|
||||||
|
import { useUpsertIssue } from "hooks/useUpsertIssue";
|
||||||
|
|
||||||
export function Issues() {
|
export function Issues() {
|
||||||
const { issues, setIssues } = useIssues();
|
const { issues, setIssues } = useIssues();
|
||||||
|
const upsertIssue = useUpsertIssue();
|
||||||
const destroyIssue = useDestroyIssue();
|
const destroyIssue = useDestroyIssue();
|
||||||
const onDestroy = (issue: Issue) => {
|
const onDestroy = (issue: Issue) => {
|
||||||
destroyIssue({id: issue.id})
|
destroyIssue({id: issue.id})
|
||||||
.then(() => issues.filter((i) => i.id !== issue.id))
|
.then(() => issues.filter((i) => i.id !== issue.id))
|
||||||
.then((issues) => setIssues(issues));
|
.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 (
|
return (
|
||||||
<div className="table">
|
<div className="table">
|
||||||
<div className="table div">Issues</div>
|
<div className="table div">Issues</div>
|
||||||
|
@ -28,7 +34,10 @@ export function Issues() {
|
||||||
<a href={`/issues/edit#id=${issue.id}`}>
|
<a href={`/issues/edit#id=${issue.id}`}>
|
||||||
<span className="item title">{issue.title}</span>
|
<span className="item title">{issue.title}</span>
|
||||||
</a>
|
</a>
|
||||||
<span><TrashIcon onClick={() => onDestroy(issue)} /></span>
|
<div className="actions">
|
||||||
|
<DoneIcon onClick={() => onDone(issue)} />
|
||||||
|
<TrashIcon onClick={() => onDestroy(issue)}/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bottom">
|
<div className="bottom">
|
||||||
<span>
|
<span>
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
type Params = {
|
type Params = {
|
||||||
id?: number;
|
id?: number;
|
||||||
title: string;
|
state?: "open" | "closed";
|
||||||
content: string;
|
title?: string;
|
||||||
connectionId: number;
|
content?: string;
|
||||||
|
connectionId?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function useUpsertIssue() {
|
export function useUpsertIssue() {
|
||||||
|
|
Loading…
Reference in a new issue