trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

fix: linting

Browse Source
This commit is contained in:
Trent Larson
2025-10-26 14:09:56 -06:00
parent 9e1c267bc0
commit 5c0ce2d1fb
1 changed files with 185 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
src/components/MembersList.vue
View File

@@ -1,198 +1,202 @@
<template> <template>
<div> <div>
<div class="space-y-4"> <div class="space-y-4">
<!-- Loading State --> <!-- Loading State -->
<div <div
v-if="isLoading" v-if="isLoading"
class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto" class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
> >
<font-awesome icon="spinner" class="fa-spin-pulse" /> <font-awesome icon="spinner" class="fa-spin-pulse" />
</div>
<!-- Members List -->
<div v-else>
<div class="text-center text-red-600 my-4">
{{ decryptionErrorMessage() }}
</div> </div>
<div v-if="missingMyself" class="py-4 text-red-600"> <!-- Members List -->
You are not currently admitted by the organizer.
</div>
<div v-if="!firstName" class="py-4 text-red-600">
Your name is not set, so others may not recognize you. Reload this page
to set it.
</div>
<ul class="list-disc text-sm ps-4 space-y-2 mb-4"> <div v-else>
<li <div class="text-center text-red-600 my-4">
v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer" {{ decryptionErrorMessage() }}
> </div>
Click
<font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
/
<font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
to add/remove them to/from the meeting.
</li>
<li v-if="membersToShow().length > 0">
Click
<font-awesome icon="circle-user" class="text-green-600 text-sm" />
to add them to your contacts.
</li>
</ul>
<div class="flex justify-between"> <div v-if="missingMyself" class="py-4 text-red-600">
<!-- You are not currently admitted by the organizer.
</div>
<div v-if="!firstName" class="py-4 text-red-600">
Your name is not set, so others may not recognize you. Reload this
page to set it.
</div>
<ul class="list-disc text-sm ps-4 space-y-2 mb-4">
<li
v-if="
membersToShow().length > 0 && showOrganizerTools && isOrganizer
"
>
Click
<font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
/
<font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
to add/remove them to/from the meeting.
</li>
<li v-if="membersToShow().length > 0">
Click
<font-awesome icon="circle-user" class="text-green-600 text-sm" />
to add them to your contacts.
</li>
</ul>
<div class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer always have at least one refresh button even without members in case the organizer
changes the password changes the password
--> -->
<button <button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md" class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now" title="Refresh members list now"
@click="refreshData(false)" @click="refreshData(false)"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
</div>
<ul
v-if="membersToShow().length > 0"
class="border-t border-slate-300 my-2"
> >
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" /> <li
Refresh v-for="member in membersToShow()"
<span class="text-xs">({{ countdownTimer }}s)</span> :key="member.member.memberId"
</button> :class="[
</div> 'border-b px-2 sm:px-3 py-1.5',
<ul {
v-if="membersToShow().length > 0" 'bg-blue-50 border-t border-blue-300 -mt-[1px]':
class="border-t border-slate-300 my-2" !member.member.admitted && isOrganizer,
> },
<li { 'border-slate-300': member.member.admitted },
v-for="member in membersToShow()" ]"
:key="member.member.memberId" >
:class="[ <div class="flex items-center gap-2 justify-between">
'border-b px-2 sm:px-3 py-1.5', <div class="flex items-center gap-1 overflow-hidden">
{ <h3
'bg-blue-50 border-t border-blue-300 -mt-[1px]': :class="[
!member.member.admitted && isOrganizer, 'font-semibold truncate',
}, {
{ 'border-slate-300': member.member.admitted }, 'text-slate-500': !member.member.admitted && isOrganizer,
]" },
> ]"
<div class="flex items-center gap-2 justify-between"> >
<div class="flex items-center gap-1 overflow-hidden"> <font-awesome
<h3 v-if="member.member.memberId === members[0]?.memberId"
:class="[ icon="crown"
'font-semibold truncate', class="fa-fw text-amber-400"
{ 'text-slate-500': !member.member.admitted && isOrganizer }, />
]" <font-awesome
> v-if="!member.member.admitted && isOrganizer"
<font-awesome icon="hourglass-half"
v-if="member.member.memberId === members[0]?.memberId" class="fa-fw text-slate-400"
icon="crown" />
class="fa-fw text-amber-400" {{ member.name || unnamedMember }}
/> </h3>
<font-awesome <div
v-if="!member.member.admitted && isOrganizer" v-if="!getContactFor(member.did) && member.did !== activeDid"
icon="hourglass-half" class="flex items-center gap-1.5 ms-1"
class="fa-fw text-slate-400" >
/> <button
{{ member.name || unnamedMember }} class="btn-add-contact"
</h3> title="Add as contact"
<div @click="addAsContact(member)"
v-if="!getContactFor(member.did) && member.did !== activeDid" >
class="flex items-center gap-1.5 ms-1" <font-awesome icon="circle-user" />
</button>
<button
class="btn-info-contact"
title="Contact Info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
>
<font-awesome icon="circle-info" />
</button>
</div>
</div>
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
"
class="flex items-center gap-1.5"
> >
<button <button
class="btn-add-contact" :class="
title="Add as contact" member.member.admitted
@click="addAsContact(member)" ? 'btn-admission-remove'
: 'btn-admission-add'
"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
> >
<font-awesome icon="circle-user" /> <font-awesome
:icon="
member.member.admitted ? 'circle-minus' : 'circle-plus'
"
/>
</button> </button>
<button <button
class="btn-info-contact" class="btn-info-admission"
title="Contact Info" title="Admission Info"
@click=" @click="informAboutAdmission()"
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
> >
<font-awesome icon="circle-info" /> <font-awesome icon="circle-info" />
</button> </button>
</div> </span>
</div> </div>
<span <p class="text-xs text-gray-600 truncate">
v-if=" {{ member.did }}
showOrganizerTools && isOrganizer && member.did !== activeDid </p>
" </li>
class="flex items-center gap-1.5" </ul>
>
<button
:class="
member.member.admitted
? 'btn-admission-remove'
: 'btn-admission-add'
"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="
member.member.admitted ? 'circle-minus' : 'circle-plus'
"
/>
</button>
<button <div v-if="membersToShow().length > 0" class="flex justify-between">
class="btn-info-admission" <!--
title="Admission Info"
@click="informAboutAdmission()"
>
<font-awesome icon="circle-info" />
</button>
</span>
</div>
<p class="text-xs text-gray-600 truncate">
{{ member.did }}
</p>
</li>
</ul>
<div v-if="membersToShow().length > 0" class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer always have at least one refresh button even without members in case the organizer
changes the password changes the password
--> -->
<button <button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md" class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now" title="Refresh members list now"
@click="refreshData(false)" @click="refreshData(false)"
> >
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" /> <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh Refresh
<span class="text-xs">({{ countdownTimer }}s)</span> <span class="text-xs">({{ countdownTimer }}s)</span>
</button> </button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
No members have joined this meeting yet
</p>
</div> </div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
No members have joined this meeting yet
</p>
</div> </div>
</div>
<!-- This Admit component is for the organizer to admit pending members to the meeting --> <!-- This Admit component is for the organizer to admit pending members to the meeting -->
<AdmitPendingMembersDialog <AdmitPendingMembersDialog
ref="admitPendingMembersDialog" ref="admitPendingMembersDialog"
:active-did="activeDid" :active-did="activeDid"
:api-server="apiServer" :api-server="apiServer"
@close="closeMemberSelectionDialogCallback" @close="closeMemberSelectionDialogCallback"
/> />
<!-- This Bulk Visibility component is for non-organizer members to add other members to their contacts and set their visibility --> <!-- This Bulk Visibility component is for non-organizer members to add other members to their contacts and set their visibility -->
<SetBulkVisibilityDialog <SetBulkVisibilityDialog
ref="setBulkVisibilityDialog" ref="setBulkVisibilityDialog"
:active-did="activeDid" :active-did="activeDid"
:api-server="apiServer" :api-server="apiServer"
@close="closeMemberSelectionDialogCallback" @close="closeMemberSelectionDialogCallback"
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -404,7 +408,7 @@ export default class MembersList extends Vue {
did: this.activeDid, did: this.activeDid,
isRegistered: false, isRegistered: false,
}; };
const otherMembersPlusUser = [ currentUser, ...this.decryptedMembers ]; const otherMembersPlusUser = [currentUser, ...this.decryptedMembers];
members = otherMembersPlusUser; members = otherMembersPlusUser;
} }
@@ -460,16 +464,17 @@ export default class MembersList extends Vue {
getPendingMembersToAdmit(): MemberData[] { getPendingMembersToAdmit(): MemberData[] {
return this.decryptedMembers return this.decryptedMembers
.filter((member) => .filter(
member.did !== this.activeDid && !member.member.admitted (member) => member.did !== this.activeDid && !member.member.admitted,
) )
.map(this.convertDecryptedMemberToMemberData); .map(this.convertDecryptedMemberToMemberData);
} }
getNonContactMembers(): MemberData[] { getNonContactMembers(): MemberData[] {
return this.decryptedMembers return this.decryptedMembers
.filter((member) => .filter(
member.did !== this.activeDid && !this.getContactFor(member.did) (member) =>
member.did !== this.activeDid && !this.getContactFor(member.did),
) )
.map(this.convertDecryptedMemberToMemberData); .map(this.convertDecryptedMemberToMemberData);
} }
@@ -515,13 +520,13 @@ export default class MembersList extends Vue {
} }
this.stopAutoRefresh(); this.stopAutoRefresh();
if (this.isOrganizer) { if (this.isOrganizer) {
( (this.$refs.admitPendingMembersDialog as AdmitPendingMembersDialog).open(
this.$refs.admitPendingMembersDialog as AdmitPendingMembersDialog pendingMembers,
).open(pendingMembers); );
} else { } else {
( (this.$refs.setBulkVisibilityDialog as SetBulkVisibilityDialog).open(
this.$refs.setBulkVisibilityDialog as SetBulkVisibilityDialog pendingMembers,
).open(pendingMembers); );
} }
} }