feat: add team selection filter to MembersCompanies component

Author: Francisca105

frontend/src/components/companies/MembersCompanies.vue

@@ -4,11 +4,28 @@
     <CreateCompanyDialogTrigger />
   </div>
 
-  <ParticipationFilters
-    v-model:selected="selectedStatus"
-    v-model:selected-package="selectedPackage"
-    :packages="packages"
-  />
+  <div class="flex flex-wrap gap-3 mb-4 items-center">
+    <ParticipationFilters
+      v-model:selected="selectedStatus"
+      v-model:selected-package="selectedPackage"
+      :packages="packages"
+    />
+    <Select v-model="selectedTeamId">
+      <SelectTrigger class="w-52">
+        <SelectValue placeholder="All teams" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All teams</SelectItem>
+        <SelectItem
+          v-for="team in coordinationTeams"
+          :key="team.id"
+          :value="team.id"
+        >
+          {{ team.name }}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
 
   <div
     v-if="!membersSorted.length && companiesLoading"
@@ -23,8 +40,9 @@
 
   <DynamicScroller
     v-else
+    :key="selectedTeamId"
     :items="membersSorted"
-    class="h-100"
+    page-mode
     :min-item-size="1"
   >
     <template #default="{ item }">
@@ -70,6 +88,7 @@
 <script setup lang="ts">
 import type { Company, CompanyParticipation } from "@/dto/companies";
 import type { Member } from "@/dto/members";
+import type { CoordinationTeam } from "@/dto/coordinationTeams";
 import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
 import { DynamicScroller } from "vue-virtual-scroller";
 import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
@@ -82,17 +101,34 @@ import { useParticipationFilter } from "@/composables/useParticipationFilter";
 import type { ObjectID, ParticipationStatus } from "@/dto";
 import ParticipationFilters from "@/components/ParticipationFilters.vue";
 import { useEventPackagesQuery } from "@/mutations/packages";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const props = defineProps<{
   companies: Company[];
   companiesLoading?: boolean;
   members: Member[];
   eventId: number;
+  coordinationTeams?: CoordinationTeam[];
 }>();
 
 // TODO shift me to top
 const membersSorted = computed(() => {
-  return [...props.members]?.sort((a, b) => a.name.localeCompare(b.name));
+  const sorted = [...props.members]?.sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  if (!selectedTeamId.value || selectedTeamId.value === "all") return sorted;
+  const team = props.coordinationTeams?.find(
+    (t) => t.id === selectedTeamId.value,
+  );
+  if (!team) return sorted;
+  const teamMemberSet = new Set(team.coordinatedMembers);
+  return sorted.filter((m) => teamMemberSet.has(m.id));
 });
 
 const membersMap = computed(() => {
@@ -105,6 +141,11 @@ const membersMap = computed(() => {
   );
 });
 
+// Set of member IDs visible after team filtering
+const visibleMemberIds = computed(
+  () => new Set(membersSorted.value.map((m) => m.id)),
+);
+
 interface CompanyWithParticipation extends Company {
   participation: CompanyParticipation;
 }
@@ -118,6 +159,7 @@ const participations = computed(() =>
     if (currParticipation && currParticipation.member in membersMap.value!) {
       const member = membersMap.value?.[currParticipation.member];
       if (!member) return acc; // Skip if member not found
+      if (!visibleMemberIds.value.has(member.id)) return acc; // skip filtered-out members
 
       if (!acc.has(member.id)) acc.set(member.id, []);
 
@@ -138,6 +180,7 @@ const participations = computed(() =>
 
 const selectedStatus = ref<ParticipationStatus | null>(null);
 const selectedPackage = ref<ObjectID | null>(null);
+const selectedTeamId = ref<string>("all");
 
 // Fetch packages for filter, pre-filtered by current event
 const { data: packages } = useEventPackagesQuery();

frontend/src/views/Dashboard/Companies/CompaniesView.vue

@@ -4,6 +4,7 @@
     :companies-loading="isCompaniesLoading"
     :members="membersList?.data || []"
     :event-id="eventStore.selectedEvent?.id || 0"
+    :coordination-teams="coordinationTeamsList?.data || []"
   />
 </template>
 
@@ -16,6 +17,7 @@ import { useEventStore } from "@/stores/event";
 import { getAllMembers } from "@/api/members";
 import type { AllMembersFilter } from "@/dto/members";
 import MembersCompanies from "@/components/companies/MembersCompanies.vue";
+import { getAllCoordinationTeams } from "@/api/coordinationTeams";
 
 const eventStore = useEventStore();
 const companiesFilters = computed<AllCompaniesFilter>(() => ({
@@ -35,4 +37,9 @@ const { data: membersList } = useQuery({
   key: () => ["members", JSON.stringify(membersFilters.value)],
   query: () => getAllMembers(membersFilters.value),
 });
+
+const { data: coordinationTeamsList } = useQuery({
+  key: ["coordinationTeams"],
+  query: () => getAllCoordinationTeams(),
+});
 </script>