73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import {TrashIcon} from "@heroicons/react/outline";
|
|
import {useCallback, useEffect, useState} from "react";
|
|
import {useParams} from "react-router-dom";
|
|
import {useApi} from "../api";
|
|
import Button from "../components/Button";
|
|
import {Metric} from "../core/Metric";
|
|
import {Project} from "../core/Project";
|
|
import {MetricForm} from "../forms/createMetricForm";
|
|
import {useModal} from "../services/ModalService";
|
|
import {formatTimestamp} from "../utils/formatTimestamp";
|
|
|
|
export function MetricHistoryPage() {
|
|
|
|
const api = useApi();
|
|
const modalService = useModal();
|
|
const {projectId, metricId} = useParams();
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [metric, setMetric] = useState<Metric | null>(null);
|
|
|
|
const fetchProject = useCallback(async () => {
|
|
const project = await api.fetchProject(projectId as string);
|
|
setProject(project);
|
|
const metric = await api.fetchProjectMetric(projectId as string, metricId as string);
|
|
setMetric(metric);
|
|
}, [projectId, metricId, api])
|
|
|
|
useEffect(() => {fetchProject()}, [fetchProject])
|
|
|
|
const onSomethingChanged = () => {
|
|
fetchProject();
|
|
}
|
|
|
|
if (!project || !metric) {
|
|
return <div>Loading project...</div>
|
|
}
|
|
|
|
const metricForm = (close: () => void) =>
|
|
<MetricForm
|
|
close={close}
|
|
onCreate={async (data) => {
|
|
close()
|
|
await api.createSeries(project.id, data)
|
|
onSomethingChanged()
|
|
}}
|
|
/>
|
|
|
|
const deleteRecord = async (recordId: string) => {
|
|
await api.deleteMetricHistory(metric.projectId, metric.id, recordId);
|
|
fetchProject();
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 f-c gap-4 overflow-scroll">
|
|
<div className="f-r justify-between items-center border-b border-neutral-600">
|
|
<h2 className="text-left text-3xl font-bold pb-4">Metrics</h2>
|
|
<Button text="Create new metric" onClick={() => modalService.addModal(metricForm)}/>
|
|
</div>
|
|
<div className="f-c gap-2 overflow-scroll pr-2">
|
|
{metric?.history?.map(record =>
|
|
<div className="card f-r gap-4 p-2">
|
|
<div>Value: {record.value}</div>
|
|
<div>Date: {formatTimestamp(record.date)}</div>
|
|
<TrashIcon
|
|
className="ml-auto w-4 h-4 text-red-300 hover:bg-neutral-500 cursor-pointer duration-75 mr-2"
|
|
|
|
onClick={() => modalService.confirmation("Delete this history record ?", () => deleteRecord(record.id))}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|