hooked up add and remove member

ui/src/components/roles/roleView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getRoleDetails, getRoleMembers } from '@/api/roles'
+import { addMemberToRole, getRoleDetails, getRoleMembers, removeMemberFromRole } from '@/api/roles'
 import type { MemberLight } from '@shared/types/member'
 import type { Role } from '@shared/types/roles'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -11,6 +11,8 @@ import MemberCard from '../members/MemberCard.vue'
 import InputGroup from '../ui/input-group/InputGroup.vue'
 import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'
 
+import AddMember from './addMember.vue'
+
 const route = useRoute()
 
 const roleData = ref<Role | null>(null)
@@ -18,9 +20,7 @@ const roleMembers = ref<MemberLight[]>([])
 const loading = ref(true)
 
 async function loadRole() {
-    loading.value = true
     const id = Number(route.params.id)
-    console.log(id);
     roleData.value = await getRoleDetails(id)
     roleMembers.value = await getRoleMembers(id)
 
@@ -37,21 +37,30 @@ const roleMembersFiltered = computed(() => {
     )
 })
 
-// const availableMembers = computed(() => {
-//     if (!activeRole.value) return [];
-//     return allMembers.value.filter(
-//         member => !activeRole.value!.members.some(
-//             roleMember => roleMember.member_id === member.member_id
-//         )
-//     );
-// })
+const props = defineProps<{
+    allMembers: MemberLight[]
+}>()
 
 
+const availableMembers = computed(() =>
+    props.allMembers.filter(
+        m => !roleMembers.value.some(rm => rm.id === m.id)
+    )
+)
+
+async function handleRemoveMember(memberId: number) {
+    await removeMemberFromRole(memberId, Number(route.params.id));
+    await loadRole();
+}
+
+const addMemberRef = ref<InstanceType<typeof AddMember> | null>(null)
+
 onMounted(loadRole)
 watch(() => route.params.id, loadRole)
 </script>
 
 <template>
+    <AddMember ref="addMemberRef" :all-members="availableMembers" :role="roleData" @submit="loadRole"></AddMember>
     <div class="h-full px-6 py-2">
         <!-- Loading -->
         <div v-if="loading" class="text-muted-foreground">
@@ -102,7 +111,7 @@ watch(() => route.params.id, loadRole)
                             <input v-model="searchQuery" type="text" placeholder="Search members…"
                                 class="flex-1 bg-transparent outline-none text-sm" />
                         </InputGroup>
-                        <Button     variant="secondary">
+                        <Button variant="secondary" @click="addMemberRef.openDialog()">
                             <Plus class="mr-2 h-4 w-4" />
                             Add Member
                         </Button>
@@ -120,7 +129,8 @@ watch(() => route.params.id, loadRole)
                             class="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted/50">
                             <MemberCard :member-id="member.id" />
 
-                            <Button variant="ghost" size="icon" class="text-muted-foreground">
+                            <Button variant="ghost" size="icon" class="text-muted-foreground"
+                                @click="handleRemoveMember(member.id)">
                                 <X class="h-4 w-4" />
                             </Button>
                         </li>