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

utilised resizable panel group for IssuesTable + IssueDetailPane

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-28 01:37:44 +00:00
parent aa2f8fff63
commit 82f39d3c4f
1 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { getAuthHeaders } from "@/lib/utils"; import { getAuthHeaders } from "@/lib/utils";
import { ResizablePanel, ResizablePanelGroup, ResizableSeparator } from "./components/ui/resizable";
function Index() { function Index() {
const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000"; const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
@@ -211,26 +212,39 @@ function Index() {
{/* main body */} {/* main body */}
<div className="w-full h-full flex items-start justify-between pt-1 gap-1"> <div className="w-full h-full flex items-start justify-between pt-1 gap-1">
{selectedProject && issues.length > 0 && ( {selectedProject && issues.length > 0 && (
<> <ResizablePanelGroup>
{/* issues list (table) */} <ResizablePanel id={"left"} minSize={400}>
<IssuesTable {/* issues list (table) */}
project={selectedProject} <IssuesTable
issuesData={issues} project={selectedProject}
columns={{ description: false }} issuesData={issues}
issueSelectAction={setSelectedIssue} columns={{ description: false }}
className="border w-full flex-shrink" issueSelectAction={setSelectedIssue}
/> className="border w-full flex-shrink"
/>
</ResizablePanel>
{/* issue detail pane */} {/* issue detail pane */}
{selectedIssue && ( {selectedIssue && (
<div className="border w-2xl"> <>
<IssueDetailPane <ResizableSeparator />
project={selectedProject} <ResizablePanel
issueData={selectedIssue} id={"right"}
close={() => setSelectedIssue(null)} defaultSize={"30%"}
/> minSize={360}
</div> maxSize={"60%"}
>
<div className="border">
<IssueDetailPane
project={selectedProject}
issueData={selectedIssue}
close={() => setSelectedIssue(null)}
/>
</div>
</ResizablePanel>
</>
)} )}
</> </ResizablePanelGroup>
)} )}
</div> </div>