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

add an icon for each attendee to add them to their contact list

Browse Source
This commit is contained in:
Trent Larson
2025-02-03 19:55:41 -07:00
parent 763398ff1b
commit 074c12da63
2 changed files with 142 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/components/MembersList.vue
View File

@@ -7,27 +7,79 @@
<!-- Members List -->
<div v-else class="space-y-4">
<div v-if="missingMyself" class="py-4">
You are not yet admitted. The organizer will admit you.
</div>
<div v-if="members.length > 0" class="flex justify-end">
<button
@click="fetchMembers"
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
title="Refresh members list"
>
<fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
</button>
</div>
<div
v-for="member in decryptedMembers"
:key="member.member.memberId"
class="p-4 bg-gray-50 rounded-lg"
>
<div class="flex items-center">
<h3 class="text-lg font-medium">{{ member.name }}</h3>
<button
v-if="isOrganizer && member.did !== activeDid"
@click="toggleAdmission(member.member)"
class="ml-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
:title="member.member.admitted ? 'Remove member' : 'Admit member'"
<div class="flex items-center justify-between">
<div class="flex">
<h3 class="text-lg font-medium">{{ member.name }}</h3>
<span
v-if="showOrganizerTools && isOrganizer && member.did !== activeDid"
class="flex items-center"
>
<button
@click="toggleAdmission(member.member)"
class="ml-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
:title="member.member.admitted ? 'Remove member' : 'Admit member'"
>
<fa :icon="member.member.admitted ? 'minus' : 'plus'" class="text-sm" />
</button>
<button
@click="informAboutAdmission()"
class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-800 transition-colors"
title="Admission info"
>
<fa icon="circle-info" class="text-base" />
</button>
</span>
</div>
<div
v-if="!isContactAlready(member.did) && member.did !== activeDid"
class="flex justify-end"
>
<fa :icon="member.member.admitted ? 'minus' : 'plus'" class="text-sm" />
</button>
<button
@click="addAsContact(member)"
class="ml-1 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
title="Add as contact"
>
<fa icon="circle-user" class="text-xl" />
</button>
<button
@click="informAboutAddingContact()"
class="ml-2 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-800 transition-colors"
title="Contact info"
>
<fa icon="circle-info" class="text-base" />
</button>
</div>
</div>
<p class="text-sm text-gray-600">{{ member.did }}</p>
</div>
<div v-if="members.length > 0" class="flex justify-end mt-4">
<button
@click="fetchMembers"
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
title="Refresh members list"
>
<fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
</button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
No members have joined this meeting yet
@@ -41,6 +93,7 @@
"Your password failed. Please go back and try again."
}}
</p>
</div>
</div>
</template>
@@ -48,13 +101,14 @@
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
import { logConsoleAndDb, retrieveSettingsForActiveAccount, db } from "@/db/index";
import {
errorStringForLog,
getHeaders,
serverMessageForUser,
} from "@/libs/endorserServer";
import { decryptMessage } from "@/libs/crypto";
import { Contact } from "@/db/tables/contacts";
interface Member {
admitted: boolean;
@@ -70,9 +124,15 @@ interface DecryptedMember {
@Component
export default class MembersList extends Vue {
$notify!: (
notification: { group: string; type: string; title: string; text: string },
timeout?: number,
) => void;
@Prop({ required: true }) password!: string;
@Prop({ default: "Your password failed. Please go back and try again." })
decryptFailureMessage!: string;
@Prop({ default: false }) showOrganizerTools!: boolean;
decryptedMembers: DecryptedMember[] = [];
missingPassword = false;
@@ -82,6 +142,7 @@ export default class MembersList extends Vue {
members: Member[] = [];
activeDid = "";
apiServer = "";
contacts: Array<Contact> = [];
async toggleAdmission(member: Member) {
try {
@@ -104,6 +165,7 @@ export default class MembersList extends Vue {
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
await this.fetchMembers();
await this.loadContacts();
}
async fetchMembers() {
@@ -170,5 +232,74 @@ export default class MembersList extends Vue {
this.missingMyself = true;
}
}
informAboutAdmission() {
this.$notify(
{
group: "alert",
type: "info",
title: "Admission info",
text: "This is to admit people to the meeting. A '+' symbol means they are not yet admitted and you can admit them. A '-' means you can remove them.",
},
10000,
);
}
informAboutAddingContact() {
this.$notify(
{
group: "alert",
type: "info",
title: "Contact info",
text: "This is to add people to your contacts. If you want to remove them, you must do that from the contacts screen.",
},
10000,
);
}
async loadContacts() {
this.contacts = await db.contacts.toArray();
}
isContactAlready(did: string): boolean {
return this.contacts.some(contact => contact.did === did);
}
async addAsContact(member: DecryptedMember) {
try {
const newContact = {
did: member.did,
name: member.name,
};
await db.contacts.add(newContact);
await this.loadContacts(); // Refresh contacts list
this.$notify(
{
group: "alert",
type: "success",
title: "Contact Added",
text: "They were added to your contacts.",
},
3000,
);
} catch (err) {
logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true);
let message = "An error prevented adding this contact.";
if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
message = "This person is already in your contact list.";
}
this.$notify(
{
group: "alert",
type: "danger",
title: "Contact Not Added",
text: message,
},
5000,
);
}
}
}
</script>

1
src/views/OnboardMeetingSetupView.vue
View File

@@ -209,6 +209,7 @@
<MembersList
:password="currentMeeting.password || ''"
decrypt-failure-message="Unable to decrypt some member information. Please check your password or have them reset theirs."
:show-organizer-tools="true"
@error="handleMembersError"
class="mt-8"
/>