From 5280f2d432f96abc7e30104b0404fbb94d79380e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 7 Oct 2021 05:25:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20`ProjectListBox`=20and=20`?=
 =?UTF-8?q?ProjectResourcePanel`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          |  3 +-
 .../src/components/project/ProjectListBox.tsx | 24 +++++++++++
 .../project/ProjectResourcePanel.tsx          | 41 +++++++++++++++++++
 .../src/components/project/ProjectRouter.tsx  |  2 +-
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/project/ProjectListBox.tsx
 create mode 100644 frontend/src/components/project/ProjectResourcePanel.tsx

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) => <>
                                         <ProjectRouter
                                             groupPk={props.selection.value.slug}
-                                            unselectedRoute={DebugBox}
+                                            unselectedRoute={(props) => <ProjectListBox viewSet={props.viewSet}/>}
                                             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<SophonResearchProject>
+}
+
+
+export function ProjectListBox({viewSet}: ProjectListBoxProps): JSX.Element {
+    // TODO: Add some flavour text
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Research projects
+            </Heading>
+            {viewSet.resources?.map(res => <ProjectResourcePanel resource={res} key={res.value.slug}/>)}
+        </Box>
+    )
+}
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<SophonResearchProject>,
+}
+
+
+export function ProjectResourcePanel({resource}: ProjectResourcePanelProps): JSX.Element {
+    const icon: IconDefinition = {
+        "PUBLIC": faGlobe,
+        "INTERNAL": faUniversity,
+        "PRIVATE": faLock,
+    }[resource.value.visibility]
+
+    return (
+        <ResourcePanel>
+            <ResourcePanel.Icon>
+                <FontAwesomeIcon icon={icon}/>
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
+                <Link href={`p/${resource.value.slug}/`}>
+                    {resource.value.name}
+                </Link>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
+
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
+
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
+    )
+}
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
         <ViewSetRouter
             {...props}
             viewSet={useManagedViewSet<SophonResearchProject>(`/api/projects/by-group/${groupPk}`, "slug")}
-            pathSegment={"researchGroup"}
+            pathSegment={"researchProject"}
             pkKey={"slug"}
         />
     )