Add RoleEditModal

Author: NicoBiernat

src/modals/RoleEditModal.tsx

@@ -0,0 +1,83 @@
+import { AuthContext } from '@luna/contexts/api/auth/AuthContext';
+
+import { newUninitializedRole, Role } from '@luna/contexts/api/auth/types';
+import { CreateOrUpdateRolePayload } from '@luna/contexts/api/auth/types/CreateOrUpdateRolePayload';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+export interface RoleEditModalProps {
+  id: number;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function RoleEditModal({ id, isOpen, setOpen }: RoleEditModalProps) {
+  const [role, setRole] = useState<Role>(newUninitializedRole());
+
+  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 {
+        setRole(newUninitializedRole());
+      }
+    };
+    fetchRole();
+  }, [id, isOpen, auth]);
+
+  const editRole = useCallback(async () => {
+    const payload: CreateOrUpdateRolePayload = {
+      name: role.name,
+    };
+    const result = await auth.updateRole(id, payload);
+    if (result.ok) {
+      console.log('Updated role', id, ':', payload);
+    } else {
+      console.log('Update role failed:', result.error);
+    }
+    // TODO: feedback from the request (success, error)
+    setOpen(false);
+  }, [role, auth, id, setOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={setOpen}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader>Edit Role</ModalHeader>
+            <ModalBody>
+              <Input label="ID" value={id.toString()} isDisabled />
+              <Input
+                label="Name"
+                value={role.name}
+                onValueChange={name => {
+                  if (!role) return;
+                  setRole({ ...role, name });
+                }}
+              />
+            </ModalBody>
+            <ModalFooter>
+              <Button color="warning" onPress={editRole}>
+                Save
+              </Button>
+              <Button onPress={onClose}>Cancel</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

src/screens/home/admin/RolesView.tsx

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