List Projects and users

frontend/src/admin/projects.tsx

@@ -0,0 +1,59 @@
+import React, {FunctionComponent} from "react";
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import {useProjects} from "./use-projects";
+import {PrimeReactProvider} from "primereact/api";
+import {Project} from "zero-zummon"
+
+import "primereact/resources/themes/lara-light-cyan/theme.css"
+import 'primeicons/primeicons.css'
+import {DeleteButton} from "./delete-button";
+import {EditButton} from "./edit-button";
+import {Button} from "primereact/button";
+import {useNavigate} from "react-router-dom"
+
+export const Projects: FunctionComponent = () => {
+    const {loadingProjects, projects, changeProject, removeProject} = useProjects()
+    const navigate = useNavigate();
+
+    return (
+        <PrimeReactProvider>
+            <div css={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1em 1em',
+                boxShadow: '1px solid #ddd'
+            }}>
+                <h3>Projects List</h3>
+                <Button
+                    label="Nieuw"
+                    icon="pi pi-pencil"
+                    onClick={(event) => navigate(`/simulation`)}
+                />
+            </div>
+            <DataTable
+                value={projects}
+                loading={loadingProjects}
+                sortField="created"
+                sortOrder={-1}
+                filterDisplay="row"
+            >
+                <Column field="name" header="Name" sortable filter/>
+                <Column field="energiekeRegioId" header="Energie Regio Id" sortable filter/>
+
+                <Column body={(project: Project) => (
+                    <div css={{
+                        display: 'flex',
+                        '> *': {
+                            margin: `${1 / 6}rem`
+                        },
+                    }}>
+                        <DeleteButton surveyId={project.id} onDelete={removeProject}/>
+                        <EditButton surveyId={project.id}/>
+                    </div>
+                )}/>
+            </DataTable>
+        </PrimeReactProvider>
+    )
+}

frontend/src/admin/use-projects.ts

@@ -0,0 +1,52 @@
+import {useState} from "react";
+import {useOnce} from "../hooks/use-once";
+import {Project, projectsFromJson} from "zero-zummon"
+
+type UseProjectReturn = {
+    loadingProjects: boolean,
+    projects: Project[],
+    changeProject: (newProject: Project) => void,
+    removeProject: (projectId: string) => void,
+}
+
+export const useProjects = (): UseProjectReturn => {
+    const [loadingProjects, setLoading] = useState(true)
+    const [projects, setProjects] = useState<Project[]>([])
+
+    const changeProject = (newProject: Project) => {
+        setProjects(projects.map(project => project.id.toString() === newProject.id.toString() ? newProject : project))
+    }
+
+    useOnce(async () => {
+        try {
+            const response = await fetch(import.meta.env.VITE_ZTOR_URL + '/projects', {
+                credentials: 'include',
+            })
+            if (response.status === 401) {
+                redirectToLogin()
+                return
+            }
+
+            setProjects(projectsFromJson(await response.text()))
+        } catch (error) {
+            alert((error as Error).message)
+        } finally {
+            setLoading(false)
+        }
+    })
+
+    const removeProject = (projectId: any) => {
+        setProjects(projects.filter(project => project.id.toString() !== projectId.toString()))
+    }
+
+    return {
+        loadingProjects,
+        projects,
+        changeProject,
+        removeProject,
+    }
+}
+
+export const redirectToLogin = () => {
+    window.location.href = import.meta.env.VITE_ZTOR_URL + '/login?redirectUrl=' + encodeURIComponent(window.location.href)
+}

frontend/src/admin/use-users.ts

@@ -0,0 +1,52 @@
+import {useState} from "react";
+import {useOnce} from "../hooks/use-once";
+import {User, usersFromJson} from "zero-zummon"
+
+type UseUserReturn = {
+    loadingUsers: boolean,
+    users: User[],
+    changeUser: (newUser: User) => void,
+    removeUser: (userId: string) => void,
+}
+
+export const useUsers = (): UseUserReturn => {
+    const [loadingUsers, setLoading] = useState(true)
+    const [users, setUsers] = useState<User[]>([])
+
+    const changeUser = (newUser: User) => {
+        setUsers(users.map(user => user.id.toString() === newUser.id.toString() ? newUser : user))
+    }
+
+    useOnce(async () => {
+        try {
+            const response = await fetch(import.meta.env.VITE_ZTOR_URL + '/users', {
+                credentials: 'include',
+            })
+            if (response.status === 401) {
+                redirectToLogin()
+                return
+            }
+
+            setUsers(usersFromJson(await response.text()))
+        } catch (error) {
+            alert((error as Error).message)
+        } finally {
+            setLoading(false)
+        }
+    })
+
+    const removeUser = (userId: any) => {
+        setUsers(users.filter(user => user.id.toString() !== userId.toString()))
+    }
+
+    return {
+        loadingUsers,
+        users,
+        changeUser,
+        removeUser,
+    }
+}
+
+export const redirectToLogin = () => {
+    window.location.href = import.meta.env.VITE_ZTOR_URL + '/login?redirectUrl=' + encodeURIComponent(window.location.href)
+}

frontend/src/admin/users.tsx

@@ -0,0 +1,57 @@
+import React, {FunctionComponent} from "react";
+import {DataTable} from 'primereact/datatable';
+import {Column} from 'primereact/column';
+import {useUsers} from "./use-users";
+import {PrimeReactProvider} from "primereact/api";
+import {User} from "zero-zummon"
+
+import "primereact/resources/themes/lara-light-cyan/theme.css"
+import 'primeicons/primeicons.css'
+import {DeleteButton} from "./delete-button";
+import {EditButton} from "./edit-button";
+import {useNavigate} from "react-router-dom"
+import {Button} from "primereact/button";
+
+export const Users: FunctionComponent = () => {
+    const {loadingUsers, users, changeUser, removeUser} = useUsers()
+    const navigate = useNavigate();
+
+    return (
+        <PrimeReactProvider>
+            <div css={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1em 1em',
+                boxShadow: '1px solid #ddd'
+            }}>
+                <h3>Users List</h3>
+                <Button
+                    label="Nieuw"
+                    icon="pi pi-pencil"
+                    onClick={(event) => navigate(`/simulation`)}
+                />
+            </div>
+            <DataTable
+                value={users}
+                loading={loadingUsers}
+                sortField="created"
+                sortOrder={-1}
+                filterDisplay="row"
+            >
+                <Column field="note" header="Note" sortable filter/>
+                <Column body={(user: User) => (
+                    <div css={{
+                        display: 'flex',
+                        '> *': {
+                            margin: `${1 / 6}rem`
+                        },
+                    }}>
+                        <DeleteButton surveyId={user.id} onDelete={removeUser}/>
+                        <EditButton surveyId={user.id}/>
+                    </div>
+                )}/>
+            </DataTable>
+        </PrimeReactProvider>
+    )
+}

frontend/src/components/company-survey-v2/survey-by-id.tsx

@@ -1,11 +1,6 @@
 import {useLoaderData} from "react-router-dom";
-import {useState} from "react";
-import {useOnce} from "../../hooks/use-once";
 import {Survey as SurveyComponent} from "./survey";
-import {getProjectConfiguration, ProjectConfiguration} from "./project"
-import {redirectToLogin} from "../../admin/use-surveys"
-import {usePromise} from "../../hooks/use-promise"
-import {assertDefined} from "../../services/util"
+import {ProjectConfiguration} from "./project"
 import {ztorFetch} from "../../services/ztor-fetch"
 
 export type SurveyByIdRouteData = {

frontend/src/components/zero-header.tsx

@@ -60,6 +60,7 @@ export const ZeroHeader: FunctionComponent<PropsWithChildren & {}> = () => {
             </div>
             <Sidebar visible={visible} position="left" onHide={() => setVisible(false)} css={sidebarStyle}>
                 <Button label="Home" icon="pi pi-fw pi-user" onClick={(event) => loadContent(`/`)} css={buttonStyle}/>
+                <Button label="Projects" icon="pi pi-fw pi-briefcase" onClick={() => loadContent('/projects')} css={buttonStyle}/>
                 <Button label="Surveys" icon="pi pi-fw pi-file" onClick={() => loadContent('/surveys')} css={buttonStyle}/>
                 <Button label="Simulation" icon="pi pi-fw pi-file" onClick={() => loadContent('/simulation')} css={buttonStyle}/>
             </Sidebar>

frontend/src/router.tsx

@@ -13,13 +13,17 @@ import {NewSurveyByProjectName} from "./components/company-survey-v2/new-survey-
 import {assertDefined} from "./services/util"
 import Simulation from "./simulation";
 import {App} from "./App";
+import {Users} from "./admin/users";
+import {Projects} from "./admin/projects";
 
 export const router = createBrowserRouter([
     {
         path: "/",
         element: <App />,
         children: [
             {path: "", element: <Intro />},
+            {path: "/users", element: <Users />},
+            {path: "/projects", element: <Projects />},
             {path: "/surveys", element: <Surveys />},
             {path: "/simulation", element: <Simulation />},
         ],