WIP: add change role to the user's invitations

ui/components/invitations/forms/edit-form.tsx

@@ -15,13 +15,13 @@ export const EditForm = ({
   invitationId,
   invitationEmail,
   roles = [],
-  defaultRole = "",
+  currentRole = "",
   setIsOpen,
 }: {
   invitationId: string;
   invitationEmail?: string;
   roles: Array<{ id: string; name: string }>;
-  defaultRole?: string;
+  currentRole?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
   const formSchema = editInviteFormSchema;
@@ -31,7 +31,7 @@ export const EditForm = ({
     defaultValues: {
       invitationId,
       invitationEmail: invitationEmail || "",
-      role: defaultRole,
+      role: roles.find((role) => role.name === currentRole)?.id || "",
     },
   });
 
@@ -40,6 +40,7 @@ export const EditForm = ({
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    console.log(values, " from edit form");
     const formData = new FormData();
 
     Object.entries(values).forEach(
@@ -49,11 +50,10 @@ export const EditForm = ({
     const data = await updateInvite(formData);
 
     if (data?.error) {
-      const errorMessage = `${data.error}`;
       toast({
         variant: "destructive",
         title: "Oops! Something went wrong",
-        description: errorMessage,
+        description: `${data.error}`,
       });
     } else {
       toast({
@@ -70,9 +70,12 @@ export const EditForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <div className="text-md">
+        <div className="text-small">
           Current email: <span className="font-bold">{invitationEmail}</span>
         </div>
+        <div className="text-small">
+          Current role: <span className="font-bold">{currentRole}</span>
+        </div>
         <div>
           <CustomInput
             control={form.control}
@@ -96,7 +99,7 @@ export const EditForm = ({
                 label="Role"
                 placeholder="Select a role"
                 variant="bordered"
-                selectedKeys={[field.value]}
+                selectedKeys={[field.value || ""]}
                 onSelectionChange={(selected) =>
                   field.onChange(selected?.currentKey || "")
                 }
@@ -107,6 +110,7 @@ export const EditForm = ({
               </Select>
             )}
           />
+
           {form.formState.errors.role && (
             <p className="mt-2 text-sm text-red-600">
               {form.formState.errors.role.message}

ui/components/invitations/table/column-invitations.tsx

@@ -74,7 +74,8 @@ export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
     header: () => <div className="text-right">Actions</div>,
     id: "actions",
     cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
+      const roles = row.original.roles;
+      return <DataTableRowActions row={row} roles={roles} />;
     },
   },
 ];

ui/components/invitations/table/data-table-row-actions.tsx

@@ -24,28 +24,34 @@ import { DeleteForm, EditForm } from "../forms";
 
 interface DataTableRowActionsProps<InvitationProps> {
   row: Row<InvitationProps>;
+  roles?: { id: string; name: string }[];
 }
 const iconClasses =
   "text-2xl text-default-500 pointer-events-none flex-shrink-0";
 
 export function DataTableRowActions<InvitationProps>({
   row,
+  roles,
 }: DataTableRowActionsProps<InvitationProps>) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const invitationId = (row.original as { id: string }).id;
   const invitationEmail = (row.original as any).attributes?.email;
+  const invitationRole = (row.original as any).relationships?.role?.attributes
+    ?.name;
+
   return (
     <>
       <CustomAlertModal
         isOpen={isEditOpen}
         onOpenChange={setIsEditOpen}
         title="Edit Invitation"
-        description={"Edit the invitation details"}
       >
         <EditForm
           invitationId={invitationId}
           invitationEmail={invitationEmail}
+          currentRole={invitationRole}
+          roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
       </CustomAlertModal>