trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 21 Releases 5 Wiki Activity
Browse Source

fix: linting

pull/211/head
Trent Larson 1 week ago
parent
9e1c267bc0
commit
5c0ce2d1fb
1 changed files with 188 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 371
      src/components/MembersList.vue

371
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 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> </div>
<ul class="list-disc text-sm ps-4 space-y-2 mb-4"> <!-- Members List -->
<li
v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer" <div v-else>
> <div class="text-center text-red-600 my-4">
Click {{ decryptionErrorMessage() }}
<font-awesome icon="circle-plus" class="text-blue-500 text-sm" /> </div>
/
<font-awesome icon="circle-minus" class="text-rose-500 text-sm" /> <div v-if="missingMyself" class="py-4 text-red-600">
to add/remove them to/from the meeting. You are not currently admitted by the organizer.
</li> </div>
<li v-if="membersToShow().length > 0"> <div v-if="!firstName" class="py-4 text-red-600">
Click Your name is not set, so others may not recognize you. Reload this
<font-awesome icon="circle-user" class="text-green-600 text-sm" /> page to set it.
to add them to your contacts. </div>
</li>
</ul> <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
<li
<div class="flex justify-between"> 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 <div v-if="membersToShow().length > 0" class="flex justify-between">
: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
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); );
} }
} }

Write Preview
Loading…
Cancel
Save