forked from jsnbuchanan/crowd-funder-for-time-pwa
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.
This commit is contained in:
@@ -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,6 +417,10 @@ export default class MembersList extends Vue {
|
||||
} else {
|
||||
// non-organizers only get visible members from server, plus themselves
|
||||
|
||||
// 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 = {
|
||||
@@ -415,25 +433,39 @@ export default class MembersList extends Vue {
|
||||
did: this.activeDid,
|
||||
isRegistered: false,
|
||||
};
|
||||
const otherMembersPlusUser = [currentUser, ...this.decryptedMembers];
|
||||
members = otherMembersPlusUser;
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user