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

implemented organisations on frontend

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-23 17:24:07 +00:00
parent ea84e754e5
commit a191b9e844
1 changed files with 106 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
import type { IssueResponse, OrganisationResponse, ProjectResponse, UserRecord } from "@issue/shared";
import { useEffect, useRef, useState } from "react";
import { IssueDetailPane } from "@/components/issue-detail-pane";
import { IssuesTable } from "@/components/issues-table";
@@ -12,29 +12,59 @@ function Index() {
const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
const [projectSelectOpen, setProjectSelectOpen] = useState(false);
const organisationsRef = useRef(false);
const [organisations, setOrganisations] = useState<OrganisationResponse[]>([]);
const [organisationSelectOpen, setOrganisationSelectOpen] = useState(false);
const [selectedOrganisation, setSelectedOrganisation] = useState<OrganisationResponse | null>(null);
const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
const [projects, setProjects] = useState<ProjectResponse[]>([]);
const projectsRef = useRef(false);
const [projectSelectOpen, setProjectSelectOpen] = useState(false);
const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
const [issues, setIssues] = useState<IssueResponse[]>([]);
const [selectedIssue, setSelectedIssue] = useState<IssueResponse | null>(null);
useEffect(() => {
if (projectsRef.current) return;
projectsRef.current = true;
if (organisationsRef.current) return;
organisationsRef.current = true;
fetch(`${serverURL}/projects/by-creator?creatorId=${user.id}`, { headers: getAuthHeaders() })
fetch(`${serverURL}/organisation/by-user?userId=${user.id}`, { headers: getAuthHeaders() })
.then((res) => res.json())
.then((data: Array<OrganisationResponse>) => {
setOrganisations(data);
})
.catch((err) => {
console.error("error fetching organisations:", err);
});
}, [user.id]);
// fetch projects when organisation is selected
useEffect(() => {
setProjects([]);
setSelectedProject(null);
setSelectedIssue(null);
setIssues([]);
if (!selectedOrganisation) {
return;
}
fetch(
`${serverURL}/projects/by-organisation?organisationId=${selectedOrganisation.Organisation.id}`,
{
headers: getAuthHeaders(),
},
)
.then((res) => res.json())
.then((data: ProjectResponse[]) => {
setProjects(data);
})
.catch((err) => {
console.error("error fetching projects:", err);
setProjects([]);
});
}, [user.id]);
const [selectedIssue, setSelectedIssue] = useState<IssueResponse | null>(null);
const [issuesData, setIssues] = useState<IssueResponse[]>([]);
}, [selectedOrganisation]);
// fetch issues when project is selected
useEffect(() => {
if (!selectedProject) return;
@@ -53,12 +83,57 @@ function Index() {
{/* header area */}
<div className="flex gap-12 items-center justify-between">
<div className="flex gap-2 items-center">
{/* organisation selection */}
<Select
value={`${selectedOrganisation?.Organisation.id}`}
onValueChange={(value) => {
if (value === "NONE") {
setSelectedOrganisation(null);
return;
}
const organisation = organisations.find(
(o) => o.Organisation.id === Number(value),
);
if (!organisation) {
console.error(`NO ORGANISATION FOUND FOR ID: ${value}`);
return;
}
setSelectedOrganisation(organisation);
}}
onOpenChange={setOrganisationSelectOpen}
>
<SelectTrigger className="h-8 lg:flex" isOpen={organisationSelectOpen}>
<SelectValue
placeholder={
selectedOrganisation
? `O: ${selectedOrganisation.Organisation.name}`
: "Select Organisation"
}
/>
</SelectTrigger>
<SelectContent side="bottom" position="popper">
{organisations.map((organisation) => (
<SelectItem
key={organisation.Organisation.id}
value={`${organisation.Organisation.id}`}
>
{organisation.Organisation.name}
</SelectItem>
))}
{organisations.length === 0 && <>No organisations</>}
</SelectContent>
</Select>
{/* project selection - only shown when organisation is selected */}
{selectedOrganisation && (
<Select
value={`${selectedProject?.Project.id}`}
onValueChange={(value) => {
if (value === "NONE") {
setSelectedProject(null);
setSelectedIssue(null);
setIssues([]);
return;
}
const project = projects.find((p) => p.Project.id === Number(value));
if (!project) {
@@ -73,7 +148,9 @@ function Index() {
<SelectTrigger className="h-8 lg:flex" isOpen={projectSelectOpen}>
<SelectValue
placeholder={
selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
selectedProject
? `P: ${selectedProject.Project.name}`
: "Select Project"
}
/>
</SelectTrigger>
@@ -83,13 +160,9 @@ function Index() {
{project.Project.name}
</SelectItem>
))}
{projects.length === 0 && <>No projects</>}
{projects.length === 0 && <>No projects in this organisation</>}
</SelectContent>
</Select>
{selectedProject && (
<div className="flex items-center gap-2">
Creator: <SmallUserDisplay user={selectedProject?.User} />
</div>
)}
</div>
@@ -102,12 +175,12 @@ function Index() {
</div>
{/* main body */}
<div className="w-full h-full flex items-start justify-between pt-1 gap-2">
{selectedProject && issuesData.length > 0 && (
{selectedProject && issues.length > 0 && (
<>
{/* issues list (table) */}
<IssuesTable
project={selectedProject}
issuesData={issuesData}
issuesData={issues}
columns={{ description: false }}
issueSelectAction={setSelectedIssue}
className="border w-full flex-shrink"