Add RoleDetailsModal

Author: NicoBiernat

src/contexts/api/auth/AuthContext.tsx

@@ -89,6 +89,9 @@ export interface AuthContextValue {
   /** Deletes a role */
   deleteRole(id: number): Promise<Result<void>>;
 
+  /** Get all users of a role */
+  getUsersOfRole(id: number): Promise<Result<User[]>>;
+
   /** Adds a user to a role */
   addUserToRole(userid: number, roleid: number): Promise<Result<void>>;
 
@@ -136,6 +139,8 @@ export const AuthContext = createContext<AuthContextValue>({
   createRole: async () => errorResult('No auth context for creating role'),
   updateRole: async () => errorResult('No auth context for updating role'),
   deleteRole: async () => errorResult('No auth context for deleting role'),
+  getUsersOfRole: async () =>
+    errorResult('No auth context for fetching users of role'),
   addUserToRole: async () =>
     errorResult('No auth context for adding user to role'),
   removeUserFromRole: async () =>
@@ -414,6 +419,17 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
         }
       },
 
+      async getUsersOfRole(id: number) {
+        try {
+          const apiUsersResponse = await apiRef.current.roles.usersDetail(id);
+          return okResult(apiUsersResponse.data.map(convert.userFromApi));
+        } catch (error) {
+          return errorResult(
+            `Fetching users of role with id ${id} failed: ${await formatError(error)}`
+          );
+        }
+      },
+
       async addUserToRole(userid: number, roleid: number) {
         try {
           await apiRef.current.roles.usersUpdate(roleid, userid);

src/modals/RoleDetailsModal.tsx

@@ -0,0 +1,94 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+import {
+  newUninitializedRole,
+  Role,
+  User,
+} from '@luna/contexts/api/auth/types';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@heroui/react';
+import { useContext, useEffect, useState } from 'react';
+
+export interface RoleShowModalProps {
+  id: number;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function RoleDetailsModal({ id, isOpen, setOpen }: RoleShowModalProps) {
+  const [role, setRole] = useState<Role>(newUninitializedRole());
+  const [users, setUsers] = useState<User[]>([]);
+  const auth = useContext(AuthContext);
+
+  // initialize modal state
+  useEffect(() => {
+    if (!isOpen) return;
+    const fetchRole = async () => {
+      const roleResult = await auth.getRoleById(id);
+      if (roleResult.ok) {
+        setRole(roleResult.value);
+      } else {
+        console.log('Failed to fetch role:', roleResult.error);
+        setRole(newUninitializedRole());
+      }
+      const usersResult = await auth.getUsersOfRole(id);
+      if (usersResult.ok) {
+        setUsers(usersResult.value);
+      } else {
+        console.log('Failed to fetch users of role:', usersResult.error);
+        setRole(newUninitializedRole());
+      }
+    };
+    fetchRole();
+  }, [auth, id, isOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Role</ModalHeader>
+            <ModalBody>
+              <Input label="ID" value={id.toString()} isDisabled />
+              <Input label="Name" value={role.name} />
+              Users:
+              <Table>
+                <TableHeader>
+                  <TableColumn key="id" allowsSorting>
+                    ID
+                  </TableColumn>
+                  <TableColumn key="id" allowsSorting>
+                    Username
+                  </TableColumn>
+                </TableHeader>
+                <TableBody items={users}>
+                  {user => (
+                    <TableRow key={user.username}>
+                      <TableCell>{user.id}</TableCell>
+                      <TableCell>{user.username}</TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </ModalBody>
+            <ModalFooter>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

src/screens/home/admin/RolesView.tsx

@@ -26,6 +26,7 @@ import { useContext, useState } from 'react';
 import { RoleAddModal } from '@luna/modals/RoleAddModal';
 import { RoleDeleteModal } from '@luna/modals/RoleDeleteModal';
 import { RoleEditModal } from '@luna/modals/RoleEditModal';
+import { RoleDetailsModal } from '@luna/modals/RoleDetailsModal';
 
 export function RolesView() {
   const auth = useContext(AuthContext);
@@ -79,6 +80,11 @@ export function RolesView() {
       }
     >
       <RoleAddModal isOpen={showRoleAddModal} setOpen={setShowRoleAddModal} />
+      <RoleDetailsModal
+        id={roleId}
+        isOpen={showRoleDetailsModal}
+        setOpen={setShowRoleDetailsModal}
+      />
       <RoleEditModal
         id={roleId}
         isOpen={showRoleEditModal}
@@ -120,6 +126,13 @@ export function RolesView() {
               <TableCell>{role.updatedAt.toLocaleString()}</TableCell>
               <TableCell>
                 <div className="relative flex items-center gap-2">
+                  <IconEye
+                    className="text-lg cursor-pointer active:opacity-50"
+                    onClick={() => {
+                      setRoleId(role.id);
+                      setShowRoleDetailsModal(true);
+                    }}
+                  />
                   <Tooltip content="Edit role">
                     <IconPencil
                       className="text-lg cursor-pointer active:opacity-50"