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',
{
'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 },
]"
@ -84,7 +85,9 @@
:class="[
'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"
/>
<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"
class="fa-fw text-slate-400"
/>
@ -348,7 +359,10 @@ export default class MembersList extends Vue {
const content = JSON.parse(decryptedContent);
this.decryptedMembers.push({
member: member,
member: {
...member,
admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
},
name: content.name,
did: content.did,
isRegistered: !!content.isRegistered,
@ -403,37 +417,55 @@ export default class MembersList extends Vue {
} else {
// 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
// which is especially useful so they can see their own DID
const currentUser: DecryptedMember = {
member: {
admitted: false,
content: "{}",
memberId: -1,
},
name: this.firstName,
did: this.activeDid,
isRegistered: false,
};
const otherMembersPlusUser = [currentUser, ...this.decryptedMembers];
members = otherMembersPlusUser;
// Check if current user is already in the decrypted members list
if (
!this.decryptedMembers.find((member) => member.did === this.activeDid)
) {
// this is a stub for this user just in case they are waiting to get in
// which is especially useful so they can see their own DID
const currentUser: DecryptedMember = {
member: {
admitted: false,
content: "{}",
memberId: -1,
},
name: this.firstName,
did: this.activeDid,
isRegistered: false,
};
members = [currentUser, ...this.decryptedMembers];
} else {
members = this.decryptedMembers;
}
}
// Sort members according to priority:
// 1. Organizer at the top
// 2. Non-admitted members next
// 3. Everyone else after
// 2. Current user next
// 3. Non-admitted members next
// 4. Everyone else after
return members.sort((a, b) => {
// Check if either member is the organizer (first member in original list)
const aIsOrganizer = a.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
if (aIsOrganizer && !bIsOrganizer) return -1;
if (!aIsOrganizer && bIsOrganizer) return 1;
// If both are organizers or neither are organizers, sort by admission status
if (aIsOrganizer && bIsOrganizer) return 0; // Both organizers, maintain original order
// If both are 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
if (!a.member.admitted && b.member.admitted) return -1;

Loading…
Cancel
Save