diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c5453ed..29c6128 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -11,6 +11,7 @@ import {GroupRouter} from "./components/group/GroupRouter" import {InstanceRouter} from "./components/instance/InstanceRouter" import {InstanceStepPage} from "./components/instance/InstanceStepPage" import {DebugBox} from "./components/placeholder/DebugBox" +import {ProjectListBox} from "./components/project/ProjectListBox" import {ProjectRouter} from "./components/project/ProjectRouter" import {ThemedBluelib} from "./components/theme/ThemedBluelib" import {ThemedTitle} from "./components/theme/ThemedTitle" @@ -38,7 +39,7 @@ function App({}: RouteComponentProps) { selectedRoute={(props) => <> } selectedRoute={DebugBox} /> } diff --git a/frontend/src/components/project/ProjectListBox.tsx b/frontend/src/components/project/ProjectListBox.tsx new file mode 100644 index 0000000..8b32cf3 --- /dev/null +++ b/frontend/src/components/project/ProjectListBox.tsx @@ -0,0 +1,24 @@ +import {Box, Heading} from "@steffo/bluelib-react" +import * as React from "react" +import {ManagedViewSet} from "../../hooks/useManagedViewSet" +import {SophonResearchProject} from "../../types/SophonTypes" +import {ProjectResourcePanel} from "./ProjectResourcePanel" + + +export interface ProjectListBoxProps { + viewSet: ManagedViewSet +} + + +export function ProjectListBox({viewSet}: ProjectListBoxProps): JSX.Element { + // TODO: Add some flavour text + + return ( + + + Research projects + + {viewSet.resources?.map(res => )} + + ) +} diff --git a/frontend/src/components/project/ProjectResourcePanel.tsx b/frontend/src/components/project/ProjectResourcePanel.tsx new file mode 100644 index 0000000..b77a6ff --- /dev/null +++ b/frontend/src/components/project/ProjectResourcePanel.tsx @@ -0,0 +1,41 @@ +import {IconDefinition} from "@fortawesome/fontawesome-svg-core" +import {faGlobe, faLock, faUniversity} from "@fortawesome/free-solid-svg-icons" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import * as React from "react" +import {ManagedResource} from "../../hooks/useManagedViewSet" +import {SophonResearchProject} from "../../types/SophonTypes" +import {Link} from "../elements/Link" +import {ResourcePanel} from "../elements/ResourcePanel" + + +export interface ProjectResourcePanelProps { + resource: ManagedResource, +} + + +export function ProjectResourcePanel({resource}: ProjectResourcePanelProps): JSX.Element { + const icon: IconDefinition = { + "PUBLIC": faGlobe, + "INTERNAL": faUniversity, + "PRIVATE": faLock, + }[resource.value.visibility] + + return ( + + + + + + + {resource.value.name} + + + + + + + + + + ) +} diff --git a/frontend/src/components/project/ProjectRouter.tsx b/frontend/src/components/project/ProjectRouter.tsx index 52ec0a0..b5f45ba 100644 --- a/frontend/src/components/project/ProjectRouter.tsx +++ b/frontend/src/components/project/ProjectRouter.tsx @@ -17,7 +17,7 @@ export function ProjectRouter({groupPk, ...props}: ProjectRouterProps): JSX.Elem (`/api/projects/by-group/${groupPk}`, "slug")} - pathSegment={"researchGroup"} + pathSegment={"researchProject"} pkKey={"slug"} /> )