feat(MemberGalleryDialog): filter visible members based on participant status
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 44s

- Updated MemberGalleryDialog to introduce a computed property, `visibleGalleryMembers`, which filters gallery members based on their participant status and a custom visibility function.
- Modified the template to use `visibleGalleryMembers` instead of `galleryMembers`, ensuring only relevant members are displayed.
- Passed `participantStatusMap` as a prop to enhance member visibility logic, improving the user experience in the member gallery.
This commit is contained in:
Torsten Schulz (local)
2026-05-05 15:05:40 +02:00
parent d84438f52c
commit 92aebaadb1
2 changed files with 18 additions and 2 deletions

View File

@@ -17,9 +17,9 @@
</select>
</div>
<div v-if="galleryLoading" class="gallery-loading">{{ $t('memberGallery.loading') }}</div>
<div v-else-if="galleryMembers.length > 0" class="gallery-members-grid" :style="{ gridTemplateColumns: 'repeat(auto-fill, ' + gallerySize + 'px)' }">
<div v-else-if="visibleGalleryMembers.length > 0" class="gallery-members-grid" :style="{ gridTemplateColumns: 'repeat(auto-fill, ' + gallerySize + 'px)' }">
<div
v-for="member in galleryMembers"
v-for="member in visibleGalleryMembers"
:key="member.memberId"
class="gallery-member-item"
:class="{ 'is-participant': date && date !== 'new' && isParticipant(member.memberId) }"
@@ -74,6 +74,10 @@ export default {
shouldShowMember: {
type: Function,
default: () => true
},
participantStatusMap: {
type: Object,
default: () => ({})
}
},
emits: ['update:modelValue', 'member-click'],
@@ -97,6 +101,17 @@ export default {
}
}
},
computed: {
visibleGalleryMembers() {
return (this.galleryMembers || []).filter((member) => {
const status = this.participantStatusMap?.[member.memberId] || '';
if (status === 'excused') {
return false;
}
return this.shouldShowMember(member);
});
}
},
methods: {
updateGallerySizeBasedOnCount() {
const count = this.galleryMembers.length;

View File

@@ -671,6 +671,7 @@
:date="date"
:is-participant="isParticipant"
:should-show-member="shouldShowGalleryMember"
:participant-status-map="participantStatusMap"
@member-click="handleGalleryMemberClick"
/>