ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

project selection functionality

Browse Source 
only issues from the selected project are shown
This commit is contained in:
Oliver Bryan
2025-12-14 20:54:17 +00:00
parent 292ffa0c05
commit 6f8b534f4c
1 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/frontend/src/Index.tsx
View File

@@ -1,9 +1,11 @@
import type { IssueRecord, ProjectRecord } from "@issue/shared"; import type { IssueRecord, ProjectRecord } from "@issue/shared";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { IssueDetailPane } from "@/components/issue-detail-pane";
import { IssuesTable } from "@/components/issues-table"; import { IssuesTable } from "@/components/issues-table";
import { IssueDetailPane } from "./components/issue-detail-pane"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
function Index() { function Index() {
const [selectedProject, setSelectedProject] = useState<ProjectRecord | null>(null);
const [projects, setProjects] = useState<ProjectRecord[]>([]); const [projects, setProjects] = useState<ProjectRecord[]>([]);
const projectsRef = useRef(false); const projectsRef = useRef(false);
@@ -15,7 +17,6 @@ function Index() {
.then((res) => res.json()) .then((res) => res.json())
.then((data: ProjectRecord[]) => { .then((data: ProjectRecord[]) => {
setProjects(data); setProjects(data);
console.log("fetched projects:", data);
}) })
.catch((err) => { .catch((err) => {
console.error("error fetching projects:", err); console.error("error fetching projects:", err);
@@ -24,42 +25,66 @@ function Index() {
const [selectedIssue, setSelectedIssue] = useState<IssueRecord | null>(null); const [selectedIssue, setSelectedIssue] = useState<IssueRecord | null>(null);
const [issues, setIssues] = useState<IssueRecord[]>([]); const [issues, setIssues] = useState<IssueRecord[]>([]);
const issuesRef = useRef(false);
const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000"; const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
useEffect(() => { useEffect(() => {
if (issuesRef.current) return; if (!selectedProject) return;
issuesRef.current = true;
fetch(`${serverURL}/issues/all`) fetch(`${serverURL}/issues/${selectedProject.blob}`)
.then((res) => res.json()) .then((res) => res.json())
.then((data: IssueRecord[]) => { .then((data: IssueRecord[]) => {
setIssues(data); setIssues(data);
console.log("fetched issues:", data);
}) })
.catch((err) => { .catch((err) => {
console.error("error fetching issues:", err); console.error("error fetching issues:", err);
}); });
}, []); }, [selectedProject]);
return ( return (
<main className="w-full h-full p-2"> <main className="w-full h-full p-2">
{/* header area */} {/* header area */}
<div className="flex gap-2"> <div className="flex gap-2">
<span className="border-1 px-2 py-1">project selection</span> <Select
<span className="border-1 px-2 py-1">filters</span> onValueChange={(value) => {
if (value === "NONE") {
setSelectedProject(null);
setSelectedIssue(null);
setIssues([]);
}
const project = projects.find((p) => p.id === Number(value));
if (!project) {
// TODO: toast here
console.error(`NO PROJECT FOUND FOR ID: ${value}`);
return;
}
setSelectedProject(project);
setSelectedIssue(null);
}}
>
<SelectTrigger className="h-8 lg:flex">
<SelectValue
placeholder={selectedProject ? `P: ${selectedProject.name}` : "Select Project"}
/>
</SelectTrigger>
<SelectContent side="bottom" position="popper">
{projects.map((project) => (
<SelectItem key={project.id} value={`${project.id}`}>
{project.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
{/* main body */} {/* main body */}
<div className="w-full h-full flex items-start justify-between pt-2 gap-2"> <div className="w-full h-full flex items-start justify-between pt-2 gap-2">
{/* issues list (table) */} {/* issues list (table) */}
<div id={"issues-table"} className="border w-full flex-shrink"> <IssuesTable
<IssuesTable issues={issues}
issues={issues} columns={{ description: false }}
columns={{ description: false }} issueSelectAction={setSelectedIssue}
issueSelectAction={setSelectedIssue} className="border w-full flex-shrink"
/> />
</div>
{/* issue detail pane */} {/* issue detail pane */}
{selectedIssue && ( {selectedIssue && (
<div className="border w-2xl"> <div className="border w-2xl">