158 select projects in user

frontend/src/admin/projects-dropdown.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, FunctionComponent, useState } from "react";
+
+import { MultiSelect } from "primereact/multiselect";
+import { Project, projectsFromJson } from "zero-zummon";
+
+type ProjectDropdownProps = {
+    selectedProjects: Project[];
+    onChange: (selectedProjects: Project[]) => void;
+    disabled?: boolean;
+};
+
+export const ProjectsDropdown: FunctionComponent<ProjectDropdownProps> = ({
+    selectedProjects,
+    onChange,
+    disabled,
+}) => {
+    const [projects, setProjects] = useState<Project[]>([]);
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch(`${import.meta.env.VITE_ZTOR_URL}/all-projects`, {
+                    credentials: "include",
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed: ${response.statusText}`)
+                }
+
+                setProjects(projectsFromJson(await response.text()))
+            } catch (error) {
+                console.error("Error fetching projects:", error);
+            }
+        };
+
+        fetchProjects();
+    }, []);
+
+    return (
+        <div>
+            <label htmlFor="projects">Update Projects: </label>
+            <MultiSelect
+                id="projects"
+                options={projects.map((project) => ({
+                    label: project.name,
+                    value: project,
+                }))}
+                value={selectedProjects}
+                onChange={(e) => onChange(e.value)}
+                disabled={disabled}
+            />
+        </div>
+    );
+};

frontend/src/admin/use-users.ts

@@ -29,8 +29,8 @@ export const useUsers = (): UseUserReturn => {
             if (!response.ok) {
                 throw new Error(`Could not load users: ${response.status} ${response.statusText}`)
             }
-
-            setUsers(usersFromJson(await response.text()))
+            const userData = await response.json()
+            setUsers(userData)
         } catch (error) {
             alert((error as Error).message)
         } finally {

frontend/src/admin/user-form.tsx

@@ -1,24 +1,30 @@
-import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
+import React, { FormEvent, FunctionComponent, useEffect, useState, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { PrimeReactProvider } from "primereact/api";
 import { InputText } from "primereact/inputtext";
 import { Button } from "primereact/button";
 import { User, Project, projectsFromJson } from "zero-zummon";
 import { redirectToLogin } from "./use-users";
+import { ProjectsDropdown } from "./projects-dropdown";
 import { UserProjectsList } from "./user-projects-list";
+import { Toast } from "primereact/toast";
 
 export const UserForm: FunctionComponent = () => {
     const {userId} = useParams<{ userId: string }>();
     const [user, setUser] = useState<User | null>(null);
     const [originalData, setOriginalData] = useState<User | null>(null);
+    const [selectedProjects, setSelectedProjects] = useState<Project[]>([]);
     const [userProjects, setUserProjects] = useState<Project[]>([]);
+    const msgs = useRef<Toast>(null);
 
     const [loading, setLoading] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
 
     const handleCancel = () => {
-        if (originalData) {
-            setUser(originalData); // Revert to original data
+        if (originalData) { // Revert to original data
+            setUser(originalData);
+            setSelectedProjects(userProjects)
+
         }
         setIsEditing(false);
     };
@@ -34,6 +40,11 @@ export const UserForm: FunctionComponent = () => {
         } as User));
     };
 
+    const transformProjects = (projects: any[]): Project[] => {
+        const jsonString = JSON.stringify(projects);
+        return projectsFromJson(jsonString);
+    };
+
     useEffect(() => {
         if (userId) {
             const fetchUser = async () => {
@@ -51,7 +62,8 @@ export const UserForm: FunctionComponent = () => {
                         setUser(userData);
                         setOriginalData(userData);
                         setUserProjects(userData.projects)
-
+                        const formattedProjects = transformProjects(userData.projects)
+                        setSelectedProjects(formattedProjects)
                     } else {
                         alert(`Error fetching user: ${response.statusText}`);
                     }
@@ -61,7 +73,6 @@ export const UserForm: FunctionComponent = () => {
                     setLoading(false);
                 }
             };
-
             fetchUser();
         } else {
             setIsEditing(true);
@@ -72,6 +83,13 @@ export const UserForm: FunctionComponent = () => {
         event.preventDefault();
         setLoading(true);
         try {
+            const sendUser = JSON.stringify({
+                ...user,
+                projects: selectedProjects.map((project) => ({
+                    id: project.id.toString(),
+                    name: project.name,
+                })),
+            })
             const method = userId ? "PUT" : "POST";
             const url = `${import.meta.env.VITE_ZTOR_URL}/users`
             const response = await fetch(url, {
@@ -80,14 +98,21 @@ export const UserForm: FunctionComponent = () => {
                     "Content-Type": "application/json",
                 },
                 credentials: "include",
-                body: JSON.stringify(user),
+                body: sendUser,
             });
+
             if (response.status === 401) {
-                redirectToLogin();
                 return;
             }
-            if (!response.ok) {
-                alert(`Error: ${response.statusText}`);
+            if (response.ok) {
+                msgs.current?.show([
+                    { sticky: true, severity: "success", summary: "Success", detail: "User saved successfully.", closable: true },
+                ]);
+                setUserProjects(selectedProjects);
+            } else {
+                msgs.current?.show([
+                    {sticky: true, severity: 'error', summary: 'Error', detail: `Error: ${response.statusText}`, closable: false},
+                ]);
             }
         } finally {
             setIsEditing(false);
@@ -97,6 +122,7 @@ export const UserForm: FunctionComponent = () => {
 
     return (
         <PrimeReactProvider>
+            <Toast ref={msgs} />
             <div style={{ padding: "20px", maxWidth: "500px", margin: "0 auto" }}>
                 <h3>{userId ? "Edit User" : "Add User"}</h3>
                 <form
@@ -133,6 +159,13 @@ export const UserForm: FunctionComponent = () => {
                         </label>
                     </div>
 
+                    <ProjectsDropdown
+                        selectedProjects={selectedProjects}
+                        onChange={setSelectedProjects}
+                        disabled={!isEditing}
+                    />
+
+
                     <div style={{ display: "flex", justifyContent: "space-between", marginTop: "10px" }}>
                         {isEditing ? (
                             <>

frontend/src/admin/users.tsx

@@ -3,7 +3,7 @@ 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 {User, Project} from "zero-zummon"
 
 import "primereact/resources/themes/lara-light-cyan/theme.css"
 import 'primeicons/primeicons.css'
@@ -53,6 +53,17 @@ export const Users: FunctionComponent = () => {
                         </div>
                     )}
                 />
+                <Column
+                    field="projects"
+                    header="Projects"
+                    body={(user: User) => (
+                        <ul>
+                            {Array.from(user.projects).map((project: Project) => (
+                                <li key={project.id}>{project.name}</li>
+                            ))}
+                        </ul>
+                    )}
+                />
                 <Column body={(user: User) => (
                     <div css={{
                         display: 'flex',

zorm/src/main/kotlin/com/zenmo/orm/user/UserRepository.kt

@@ -9,6 +9,7 @@ import com.zenmo.zummon.companysurvey.Project
 import org.jetbrains.exposed.sql.*
 import org.jetbrains.exposed.sql.SqlExpressionBuilder.eq
 import org.jetbrains.exposed.sql.transactions.transaction
+import org.jetbrains.exposed.sql.SqlExpressionBuilder.inList
 import java.util.UUID
 import kotlin.uuid.ExperimentalUuidApi
 import kotlin.uuid.toJavaUuid
@@ -69,17 +70,45 @@ class UserRepository(
     }
 
     @OptIn(ExperimentalUuidApi::class)
-    fun save(
-        user: User,
-    ) {
+    fun save(user: User) {
         transaction(db) {
-            UserTable.upsertReturning() {
+            UserTable.upsertReturning {
                 it[id] = user.id.toJavaUuid()
-                it[UserTable.note] = user.note
-                it[UserTable.isAdmin] = user.isAdmin
+                it[note] = user.note
+                it[isAdmin] = user.isAdmin
             }.map {
                 hydrateUser(it)
             }.first()
+
+           // db project ids
+            val currentProjectIds = UserProjectTable
+            .selectAll()
+            .where { UserProjectTable.userId eq user.id.toJavaUuid() }
+            .map { it[UserProjectTable.projectId] }
+            .toSet()
+
+            // coming project ids
+            val newProjectIds = user.projects.map { it.id }.toSet()
+
+            // add and remove projects
+            val projectsToAdd = newProjectIds - currentProjectIds
+            val projectsToRemove = currentProjectIds - newProjectIds
+
+            // insert new
+            if (projectsToAdd.isNotEmpty()) {
+                UserProjectTable.batchInsert(projectsToAdd) { projectId ->
+                    this[UserProjectTable.projectId] = projectId
+                    this[UserProjectTable.userId] = user.id.toJavaUuid()
+                }
+            }
+
+            // remove old
+            if (projectsToRemove.isNotEmpty()) {
+                UserProjectTable.deleteWhere {
+                    (UserProjectTable.userId eq user.id.toJavaUuid()) and
+                    (UserProjectTable.projectId inList projectsToRemove)
+                }
+            }
         }
     }
 

ztor/src/main/kotlin/com/zenmo/ztor/plugins/Databases.kt

@@ -49,7 +49,7 @@ fun Application.configureDatabases(): Database {
 
         get("/users") {
             asAdmin {
-                val users = userRepository.getUsers()
+                val users = userRepository.getUsersAndProjects()
                 call.respond(HttpStatusCode.OK, users)
             }
         }
@@ -116,6 +116,12 @@ fun Application.configureDatabases(): Database {
             }
         }
 
+        get("/all-projects") {
+            asAdmin {
+                call.respond(HttpStatusCode.OK, projectRepository.getProjects())
+            }
+        }
+
         get("/projects") {
             val userId = call.getUserId()
             if (userId == null) {

zummon/src/commonMain/kotlin/companysurvey/Project.kt

@@ -15,7 +15,7 @@ constructor(
     val id: Uuid = uuid4(),
     val name: String = "",
     // Project ID aka Energy Hub ID of Energieke Regio.
-    val energiekeRegioId: Int?,
+    val energiekeRegioId: Int? = null,
     val buurtCodes: List<String> = emptyList(),
 )