Browse Source

fix: resolve admission status styling issues for non-organizers in MembersList

- Fix undefined admitted property for non-organizers by defaulting to true
- Update conditional styling logic to show blue background for non-admitted current user
- Add hand icon indicator for current user in members list
- Improve sorting to prioritize current user after organizer
- Refactor currentUserInList variable inline for cleaner code
- Update text color and hourglass icon conditions to include current user

The server was returning undefined for the admitted property when non-organizers
viewed the members list, causing incorrect styling. Non-organizers now properly
see their admission status and get appropriate visual indicators.
pull/210/head
Jose Olarte III 6 days ago
parent
commit
bfc2f07326
  1. 76
      src/components/MembersList.vue

76
src/components/MembersList.vue

@ -73,7 +73,8 @@
'border-b px-2 sm:px-3 py-1.5', 'border-b px-2 sm:px-3 py-1.5',
{ {
'bg-blue-50 border-t border-blue-300 -mt-[1px]': 'bg-blue-50 border-t border-blue-300 -mt-[1px]':
!member.member.admitted && isOrganizer, !member.member.admitted &&
(isOrganizer || member.did === activeDid),
}, },
{ 'border-slate-300': member.member.admitted }, { 'border-slate-300': member.member.admitted },
]" ]"
@ -84,7 +85,9 @@
:class="[ :class="[
'font-semibold truncate', 'font-semibold truncate',
{ {
'text-slate-500': !member.member.admitted && isOrganizer, 'text-slate-500':
!member.member.admitted &&
(isOrganizer || member.did === activeDid),
}, },
]" ]"
> >
@ -94,7 +97,15 @@
class="fa-fw text-amber-400" class="fa-fw text-amber-400"
/> />
<font-awesome <font-awesome
v-if="!member.member.admitted && isOrganizer" v-if="member.did === activeDid"
icon="hand"
class="fa-fw text-blue-500"
/>
<font-awesome
v-if="
!member.member.admitted &&
(isOrganizer || member.did === activeDid)
"
icon="hourglass-half" icon="hourglass-half"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
/> />
@ -348,7 +359,10 @@ export default class MembersList extends Vue {
const content = JSON.parse(decryptedContent); const content = JSON.parse(decryptedContent);
this.decryptedMembers.push({ this.decryptedMembers.push({
member: member, member: {
...member,
admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
},
name: content.name, name: content.name,
did: content.did, did: content.did,
isRegistered: !!content.isRegistered, isRegistered: !!content.isRegistered,
@ -403,37 +417,55 @@ export default class MembersList extends Vue {
} else { } else {
// non-organizers only get visible members from server, plus themselves // non-organizers only get visible members from server, plus themselves
// this is a stub for this user just in case they are waiting to get in // Check if current user is already in the decrypted members list
// which is especially useful so they can see their own DID if (
const currentUser: DecryptedMember = { !this.decryptedMembers.find((member) => member.did === this.activeDid)
member: { ) {
admitted: false, // this is a stub for this user just in case they are waiting to get in
content: "{}", // which is especially useful so they can see their own DID
memberId: -1, const currentUser: DecryptedMember = {
}, member: {
name: this.firstName, admitted: false,
did: this.activeDid, content: "{}",
isRegistered: false, memberId: -1,
}; },
const otherMembersPlusUser = [currentUser, ...this.decryptedMembers]; name: this.firstName,
members = otherMembersPlusUser; did: this.activeDid,
isRegistered: false,
};
members = [currentUser, ...this.decryptedMembers];
} else {
members = this.decryptedMembers;
}
} }
// Sort members according to priority: // Sort members according to priority:
// 1. Organizer at the top // 1. Organizer at the top
// 2. Non-admitted members next // 2. Current user next
// 3. Everyone else after // 3. Non-admitted members next
// 4. Everyone else after
return members.sort((a, b) => { return members.sort((a, b) => {
// Check if either member is the organizer (first member in original list) // Check if either member is the organizer (first member in original list)
const aIsOrganizer = a.member.memberId === this.members[0]?.memberId; const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
const bIsOrganizer = b.member.memberId === this.members[0]?.memberId; const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
// Check if either member is the current user
const aIsCurrentUser = a.did === this.activeDid;
const bIsCurrentUser = b.did === this.activeDid;
// Organizer always comes first // Organizer always comes first
if (aIsOrganizer && !bIsOrganizer) return -1; if (aIsOrganizer && !bIsOrganizer) return -1;
if (!aIsOrganizer && bIsOrganizer) return 1; if (!aIsOrganizer && bIsOrganizer) return 1;
// If both are organizers or neither are organizers, sort by admission status // If both are organizers, maintain original order
if (aIsOrganizer && bIsOrganizer) return 0; // Both organizers, maintain original order if (aIsOrganizer && bIsOrganizer) return 0;
// Current user comes second (after organizer)
if (aIsCurrentUser && !bIsCurrentUser && !bIsOrganizer) return -1;
if (!aIsCurrentUser && bIsCurrentUser && !aIsOrganizer) return 1;
// If both are current users, maintain original order
if (aIsCurrentUser && bIsCurrentUser) return 0;
// Non-admitted members come before admitted members // Non-admitted members come before admitted members
if (!a.member.admitted && b.member.admitted) return -1; if (!a.member.admitted && b.member.admitted) return -1;

Loading…
Cancel
Save