feat: add onRemove and onAssignRole props to DNamespaceMember components for enhanced member management

Author: nicosammito

src/components/d-member/DNamespaceMemberCard.tsx

@@ -2,17 +2,18 @@ import {NamespaceMember} from "@code0-tech/sagittarius-graphql-types";
 import {Card} from "../card/Card";
 import React from "react";
 import {DNamespaceMemberContent} from "./DNamespaceMemberContent";
+import {DNamespaceMemberView} from "./DNamespaceMember.view";
 
 export interface DNamespaceMemberCardProps {
     memberId: NamespaceMember["id"]
+    onRemove?: (member: DNamespaceMemberView) => void
+    onAssignRole?: (member: DNamespaceMemberView) => void
 }
 
 export const DNamespaceMemberCard: React.FC<DNamespaceMemberCardProps> = (props) => {
-    const {
-        memberId
-    } = props
+    const {memberId, onRemove, onAssignRole} = props
 
     return <Card>
-        <DNamespaceMemberContent memberId={memberId}/>
+        <DNamespaceMemberContent onRemove={onRemove} onAssignRole={onAssignRole} memberId={memberId}/>
     </Card>
 }

src/components/d-member/DNamespaceMemberContent.tsx

@@ -13,14 +13,18 @@ import {Button} from "../button/Button";
 import {Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipTrigger} from "../tooltip/Tooltip";
 import {DNamespaceRolePermissions} from "../d-role/DNamespaceRolePermissions";
 import {Menu, MenuContent, MenuItem, MenuLabel, MenuPortal, MenuTrigger} from "../menu/Menu";
+import {DNamespaceMemberView} from "./DNamespaceMember.view";
 
 export interface DNamespaceMemberContentProps {
     memberId: NamespaceMember['id']
+    onRemove?: (member: DNamespaceMemberView) => void
+    onAssignRole?: (member: DNamespaceMemberView) => void
 }
 
 export const DNamespaceMemberContent: React.FC<DNamespaceMemberContentProps> = (props) => {
 
-    const {memberId} = props
+    const {memberId, onAssignRole = () => undefined, onRemove = () => undefined} = props
+
     const memberService = useService(DNamespaceMemberReactiveService)
     const memberStore = useStore(DNamespaceMemberReactiveService)
     const userService = useService(DUserReactiveService)
@@ -92,13 +96,13 @@ export const DNamespaceMemberContent: React.FC<DNamespaceMemberContentProps> = (
                         <MenuContent align={"end"} side={"bottom"} sideOffset={8}>
                             <MenuLabel>Actions</MenuLabel>
                             {member?.userAbilities?.deleteMember && (
-                                <MenuItem>
+                                <MenuItem onSelect={() => onRemove(member)}>
                                     <IconUserOff size={16}/>
                                     <Text>Remove member</Text>
                                 </MenuItem>
                             )}
                             {member?.userAbilities?.assignMemberRoles && (
-                                <MenuItem>
+                                <MenuItem onSelect={() => onAssignRole(member)}>
                                     <IconUserCog size={16}/>
                                     <Text>Assign role</Text>
                                 </MenuItem>

src/components/d-member/DNamespaceMemberList.tsx

@@ -12,11 +12,13 @@ import {DNamespaceMemberContent} from "./DNamespaceMemberContent";
 export interface DNamespaceMemberListProps extends Omit<Card, "children" | "onSelect"> {
     namespaceId: Namespace["id"]
     filter?: (runtime: DNamespaceMemberView, index: number) => boolean
+    onRemove?: (member: DNamespaceMemberView) => void
+    onAssignRole?: (member: DNamespaceMemberView) => void
 }
 
 export const DNamespaceMemberList: React.FC<DNamespaceMemberListProps> = (props) => {
 
-    const {namespaceId, filter = () => true, ...rest} = props
+    const {namespaceId, filter = () => true, onRemove, onAssignRole, ...rest} = props
 
     const memberService = useService(DNamespaceMemberReactiveService)
     const memberStore = useStore(DNamespaceMemberReactiveService)
@@ -26,7 +28,7 @@ export const DNamespaceMemberList: React.FC<DNamespaceMemberListProps> = (props)
     return <Card {...rest}>
         {members.filter(filter).map((member) => member && member.id && (
             <CardSection border key={member.id}>
-                <DNamespaceMemberContent memberId={member?.id}/>
+                <DNamespaceMemberContent onRemove={onRemove} onAssignRole={onAssignRole} memberId={member?.id}/>
             </CardSection>
         ))}
     </Card>