Feat: remove team member

src/application/i18n/messages/en.json

@@ -67,6 +67,12 @@
       "roles": {
         "Read": "Reader",
         "Write": "Writer"
+      },
+      "removeMemberConfirmationTitle": "Remove member",
+      "removeMemberConfirmationBody": "Are you sure you want to remove '{username}' from the team?",
+      "contextMenu": {
+        "title": "More actions",
+        "remove": "Remove"
       }
     }
   },

src/application/services/useNoteSettings.ts

@@ -66,6 +66,14 @@ interface UseNoteSettingsComposableState {
    * @param newParentURL - New parent note URL
    */
   setParent: (id: NoteId, newParentURL: string) => Promise<void>;
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   * @returns true if user was removed
+   */
+  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<boolean>;
 }
 
 /**
@@ -188,6 +196,16 @@ export default function (): UseNoteSettingsComposableState {
     }
   };
 
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   * @returns true if user was removed
+   */
+  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<boolean> => {
+    return await noteSettingsService.removeMemberByUserId(id, userId);
+  };
+
   return {
     updateCover,
     setParent,
@@ -198,5 +216,6 @@ export default function (): UseNoteSettingsComposableState {
     revokeHash,
     changeRole,
     deleteNoteById,
+    removeMemberByUserId,
   };
 }

src/domain/noteSettings.repository.interface.ts

@@ -43,4 +43,12 @@ export default interface NoteSettingsRepositoryInterface {
    * @param id - Note id
    */
   deleteNote(id: NoteId): Promise<void>;
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   * @returns true if user was removed
+   */
+  removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean>;
 }

src/domain/noteSettings.service.ts

@@ -118,4 +118,14 @@ export default class NoteSettingsService {
   public async deleteNote(id: NoteId): Promise<void> {
     return await this.noteSettingsRepository.deleteNote(id);
   }
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   * @returns true if user was removed
+   */
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
+    return await this.noteSettingsRepository.removeMemberByUserId(id, userId);
+  }
 }

src/infrastructure/noteSettings.repository.ts

@@ -69,4 +69,17 @@ export default class NoteSettingsRepository implements NoteSettingsRepositoryInt
   public async deleteNote(id: NoteId): Promise<void> {
     await this.transport.delete<boolean>(`/note/` + id);
   }
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   * @returns true if user was removed
+   */
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
+    const data = { userId };
+    const response = await this.transport.delete<number>(`/note-settings/${id}/team`, data);
+
+    return response === userId;
+  }
 }

src/presentation/components/team/MoreActions.vue

@@ -0,0 +1,104 @@
+<template>
+  <button
+    ref="triggerButton"
+    :title="t('noteSettings.team.contextMenu.title')"
+    class="more-actions-button"
+    @click="handleButtonClick"
+  >
+    <Icon
+      name="EtcVertical"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon, ContextMenu, usePopover, useConfirm, type ContextMenuItem } from '@codexteam/ui/vue';
+import { type TeamMember } from '@/domain/entities/Team';
+import { useI18n } from 'vue-i18n';
+import { NoteId } from '@/domain/entities/Note';
+import useNoteSettings from '@/application/services/useNoteSettings';
+
+const { removeMemberByUserId } = useNoteSettings();
+
+const props = defineProps<{
+  /**
+   * Team member data
+   */
+  teamMember: TeamMember;
+  /**
+   * Id of the current note
+   */
+  noteId: NoteId;
+}>();
+
+const { t } = useI18n();
+const { showPopover, hide } = usePopover();
+const { confirm } = useConfirm();
+
+const triggerButton = ref<HTMLButtonElement>();
+
+const menuItems: ContextMenuItem[] = [
+  {
+    title: t('noteSettings.team.contextMenu.remove'),
+    onActivate: async () => {
+      hide();
+      await handleRemove(props.teamMember);
+    },
+  },
+];
+
+const emit = defineEmits<{
+  teamMemberRemoved: [userId: TeamMember['user']['id']];
+}>();
+
+const handleButtonClick = (): void => {
+  if (triggerButton.value) {
+    showPopover({
+      targetEl: triggerButton.value,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: menuItems,
+        },
+      },
+      align: {
+        vertically: 'below',
+        horizontally: 'right',
+      },
+      width: 'auto',
+    });
+  }
+};
+
+/**
+ * Remove team member by user id
+ *
+ * @param member - team member to remove
+ */
+const handleRemove = async (member: TeamMember): Promise<void> => {
+  const shouldRemove = await confirm(
+    t('noteSettings.team.removeMemberConfirmationTitle'),
+    t('noteSettings.team.removeMemberConfirmationBody', { username: member.user.name })
+  );
+
+  if (shouldRemove) {
+    const isDeleted = await removeMemberByUserId(props.noteId, member.user.id);
+
+    if (isDeleted) {
+      emit('teamMemberRemoved', member.user.id);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.more-actions-button {
+  color: var(--ct-text-color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+}
+</style>

src/presentation/components/team/Team.vue

@@ -15,6 +15,11 @@
           :note-id="noteId"
           :team-member="member"
         />
+        <MoreActions
+          :note-id="noteId"
+          :team-member="member"
+          @team-member-removed="handleMemberRemoved"
+        />
       </template>
 
       <template #left>
@@ -34,12 +39,13 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Team, MemberRole } from '@/domain/entities/Team';
+import { Team, MemberRole, TeamMember } from '@/domain/entities/Team';
 import { Note, NoteId } from '@/domain/entities/Note';
 import { Section, Row, Avatar } from '@codexteam/ui/vue';
 import RoleSelect from './RoleSelect.vue';
 import { useI18n } from 'vue-i18n';
 import useNote from '@/application/services/useNote.ts';
+import MoreActions from './MoreActions.vue';
 
 const props = defineProps<{
   /**
@@ -52,6 +58,10 @@ const props = defineProps<{
   noteId: NoteId;
 }>();
 
+const emit = defineEmits<{
+  teamMemberRemoved: [id: TeamMember['user']['id']];
+}>();
+
 const { t } = useI18n();
 const { note } = useNote({ id: props.noteId });
 
@@ -79,6 +89,11 @@ const sortedTeam = computed(() => {
     return roleOrder[a.role] - roleOrder[b.role];
   });
 });
+
+// Listen for teamMemberRemoved event from child component and bubble them up
+const handleMemberRemoved = (userId: TeamMember['user']['id']): void => {
+  emit('teamMemberRemoved', userId);
+};
 </script>
 
 <style scoped>

src/presentation/pages/NoteSettings.vue

@@ -73,6 +73,7 @@
             <Team
               :note-id="id"
               :team="noteSettings.team"
+              @team-member-removed="handleTeamMemberRemoved"
             />
             <InviteLink
               :id="props.id"
@@ -111,6 +112,7 @@ import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
 import useNavbar from '@/application/services/useNavbar';
 import { useRoute } from 'vue-router';
+import { TeamMember } from '@/domain/entities/Team';
 
 const { t } = useI18n();
 
@@ -221,6 +223,19 @@ onMounted(async () => {
   parentURL.value = getParentURL(parentNote.value?.id);
 });
 
+/**
+ * Handle team member removal by refreshing the note settings and removing the member from the team
+ *
+ * @param userId - user id of the member to remove
+ */
+async function handleTeamMemberRemoved(userId: TeamMember['user']['id']) {
+  if (noteSettings.value !== null) {
+    noteSettings.value = {
+      ...noteSettings.value,
+      team: noteSettings.value.team.filter(member => member.user.id !== userId),
+    };
+  }
+}
 </script>
 
 <style setup lang="postcss" scoped>