feat(MemberGalleryDialog): filter visible members based on participant status
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 44s
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:
@@ -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;
|
||||
|
||||
@@ -671,6 +671,7 @@
|
||||
:date="date"
|
||||
:is-participant="isParticipant"
|
||||
:should-show-member="shouldShowGalleryMember"
|
||||
:participant-status-map="participantStatusMap"
|
||||
@member-click="handleGalleryMemberClick"
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user