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',
|
'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,6 +417,10 @@ 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
|
||||||
|
|
||||||
|
// 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
|
// 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
|
// which is especially useful so they can see their own DID
|
||||||
const currentUser: DecryptedMember = {
|
const currentUser: DecryptedMember = {
|
||||||
@@ -415,25 +433,39 @@ export default class MembersList extends Vue {
|
|||||||
did: this.activeDid,
|
did: this.activeDid,
|
||||||
isRegistered: false,
|
isRegistered: false,
|
||||||
};
|
};
|
||||||
const otherMembersPlusUser = [currentUser, ...this.decryptedMembers];
|
members = [currentUser, ...this.decryptedMembers];
|
||||||
members = otherMembersPlusUser;
|
} 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;
|
||||||
|
|||||||
Reference in New Issue
Block a user