Skip to content

Commit 1f0d233

Browse files
Francisca105Francisca105
committed
feat: update components to filter and display only members with participations
1 parent 40afaa7 commit 1f0d233

2 files changed

Lines changed: 100 additions & 88 deletions

File tree

‎frontend/src/components/companies/MembersCompanies.vue‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -34,63 +34,61 @@
3434
<Skeleton v-for="i in 21" :key="i" class="h-[260px] w-full rounded-lg" />
3535
</div>
3636

37-
<div v-else-if="!companies.length && !companiesLoading" class="text-center">
37+
<div
38+
v-else-if="!membersWithParticipations.length && !companiesLoading"
39+
class="text-center"
40+
>
3841
<p>No companies found</p>
3942
</div>
4043

41-
<DynamicScroller
42-
v-else
43-
:key="selectedTeamId"
44-
:items="membersSorted"
45-
page-mode
46-
:min-item-size="1"
47-
>
48-
<template #default="{ item }">
49-
<div class="w-full border-b border-muted-foreground/10 pb-4 mb-4">
50-
<div class="flex items-center justify-between w-full py-2">
51-
<RouterLink
52-
:to="{ name: 'member', params: { memberId: item.id } }"
53-
class="flex items-center gap-3 no-underline"
54-
>
55-
<MemberWithAvatar :member="item" with-separator />
56-
</RouterLink>
57-
<button
58-
type="button"
59-
class="p-2 rounded-md hover:bg-slate-100"
60-
:aria-expanded="isExpanded(item.id)"
61-
@click="toggleExpanded(item.id)"
62-
>
63-
<ChevronDown
64-
:class="[
65-
'transition-transform',
66-
isExpanded(item.id) ? 'rotate-180' : '',
67-
]"
68-
class="w-5 h-5 text-muted-foreground"
69-
/>
70-
</button>
71-
</div>
72-
73-
<div
74-
v-if="isExpanded(item.id)"
75-
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4 mt-3"
44+
<div v-else>
45+
<div
46+
v-for="item in membersWithParticipations"
47+
:key="item.id"
48+
class="w-full border-b border-muted-foreground/10 pb-4 mb-4"
49+
>
50+
<div class="flex items-center justify-between w-full py-2">
51+
<RouterLink
52+
:to="{ name: 'member', params: { memberId: item.id } }"
53+
class="flex items-center gap-3 no-underline"
7654
>
77-
<CompanyWorkflowCard
78-
v-for="company in participationsFiltered?.get(item.id) || []"
79-
:key="company.id"
80-
:company="company"
55+
<MemberWithAvatar :member="item" with-separator />
56+
</RouterLink>
57+
<button
58+
type="button"
59+
class="p-2 rounded-md hover:bg-slate-100"
60+
:aria-expanded="isExpanded(item.id)"
61+
@click="toggleExpanded(item.id)"
62+
>
63+
<ChevronDown
64+
:class="[
65+
'transition-transform',
66+
isExpanded(item.id) ? 'rotate-180' : '',
67+
]"
68+
class="w-5 h-5 text-muted-foreground"
8169
/>
82-
</div>
70+
</button>
71+
</div>
72+
73+
<div
74+
v-if="isExpanded(item.id)"
75+
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4 mt-3"
76+
>
77+
<CompanyWorkflowCard
78+
v-for="company in participationsFiltered?.get(item.id) || []"
79+
:key="company.id"
80+
:company="company"
81+
/>
8382
</div>
84-
</template>
85-
</DynamicScroller>
83+
</div>
84+
</div>
8685
</template>
8786

8887
<script setup lang="ts">
8988
import type { Company, CompanyParticipation } from "@/dto/companies";
9089
import type { Member } from "@/dto/members";
9190
import type { CoordinationTeam } from "@/dto/coordinationTeams";
9291
import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
93-
import { DynamicScroller } from "vue-virtual-scroller";
9492
import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
9593
import { Skeleton } from "@/components/ui/skeleton";
9694
import CompanyWorkflowCard from "../cards/CompanyWorkflowCard.vue";
@@ -191,6 +189,14 @@ const participationsFiltered = useParticipationFilter<CompanyWithParticipation>(
191189
selectedPackage,
192190
);
193191
192+
// Only show members that have participations after filtering
193+
const membersWithParticipations = computed(() => {
194+
if (!participationsFiltered.value) return [];
195+
return membersSorted.value.filter((member) =>
196+
participationsFiltered.value.has(member.id),
197+
);
198+
});
199+
194200
// Track expanded/collapsed state per member. Default to expanded (true)
195201
const expanded = ref<Record<string, boolean>>({});
196202

‎frontend/src/components/speakers/MembersSpeakers.vue‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -30,62 +30,60 @@
3030
<Skeleton v-for="i in 21" :key="i" class="h-[260px] w-full rounded-lg" />
3131
</div>
3232

33-
<div v-else-if="!speakers.length && !speakersLoading" class="text-center">
33+
<div
34+
v-else-if="!membersWithParticipations.length && !speakersLoading"
35+
class="text-center"
36+
>
3437
<p>No speakers found</p>
3538
</div>
3639

37-
<DynamicScroller
38-
v-else
39-
:key="selectedTeamId"
40-
:items="membersSorted"
41-
page-mode
42-
:min-item-size="1"
43-
>
44-
<template #default="{ item }">
45-
<div class="w-full border-b border-muted-foreground/10 pb-4 mb-4">
46-
<div class="flex items-center justify-between w-full py-2">
47-
<RouterLink
48-
:to="{ name: 'member', params: { memberId: item.id } }"
49-
class="flex items-center gap-3 no-underline"
50-
>
51-
<MemberWithAvatar :member="item" with-separator />
52-
</RouterLink>
53-
<button
54-
type="button"
55-
class="p-2 rounded-md hover:bg-slate-100"
56-
:aria-expanded="isExpanded(item.id)"
57-
@click="toggleExpanded(item.id)"
58-
>
59-
<ChevronDown
60-
:class="[
61-
'transition-transform',
62-
isExpanded(item.id) ? 'rotate-180' : '',
63-
]"
64-
class="w-5 h-5 text-muted-foreground"
65-
/>
66-
</button>
67-
</div>
68-
69-
<div
70-
v-if="isExpanded(item.id)"
71-
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4 mt-3"
40+
<div v-else>
41+
<div
42+
v-for="item in membersWithParticipations"
43+
:key="item.id"
44+
class="w-full border-b border-muted-foreground/10 pb-4 mb-4"
45+
>
46+
<div class="flex items-center justify-between w-full py-2">
47+
<RouterLink
48+
:to="{ name: 'member', params: { memberId: item.id } }"
49+
class="flex items-center gap-3 no-underline"
7250
>
73-
<SpeakerWorkflowCard
74-
v-for="speaker in participationsFiltered?.get(item.id) || []"
75-
:key="speaker.id"
76-
:speaker="speaker"
51+
<MemberWithAvatar :member="item" with-separator />
52+
</RouterLink>
53+
<button
54+
type="button"
55+
class="p-2 rounded-md hover:bg-slate-100"
56+
:aria-expanded="isExpanded(item.id)"
57+
@click="toggleExpanded(item.id)"
58+
>
59+
<ChevronDown
60+
:class="[
61+
'transition-transform',
62+
isExpanded(item.id) ? 'rotate-180' : '',
63+
]"
64+
class="w-5 h-5 text-muted-foreground"
7765
/>
78-
</div>
66+
</button>
67+
</div>
68+
69+
<div
70+
v-if="isExpanded(item.id)"
71+
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4 mt-3"
72+
>
73+
<SpeakerWorkflowCard
74+
v-for="speaker in participationsFiltered?.get(item.id) || []"
75+
:key="speaker.id"
76+
:speaker="speaker"
77+
/>
7978
</div>
80-
</template>
81-
</DynamicScroller>
79+
</div>
80+
</div>
8281
</template>
8382

8483
<script setup lang="ts">
8584
import type { Member } from "@/dto/members";
8685
import type { CoordinationTeam } from "@/dto/coordinationTeams";
8786
import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
88-
import { DynamicScroller } from "vue-virtual-scroller";
8987
import type { Speaker, SpeakerWithParticipation } from "@/dto/speakers";
9088
import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
9189
import { Skeleton } from "@/components/ui/skeleton";
@@ -177,6 +175,14 @@ const participationsFiltered = useParticipationFilter<SpeakerWithParticipation>(
177175
selectedStatus,
178176
);
179177
178+
// Only show members that have participations after filtering
179+
const membersWithParticipations = computed(() => {
180+
if (!participationsFiltered.value) return [];
181+
return membersSorted.value.filter((member) =>
182+
participationsFiltered.value.has(member.id),
183+
);
184+
});
185+
180186
const expanded = ref<Record<string, boolean>>({});
181187
182188
function isExpanded(memberId: string) {

0 commit comments

Comments
 (0)