Compare commits
17 Commits
view-headi
...
meeting-me
| Author | SHA1 | Date | |
|---|---|---|---|
|
b6f9533f07 | ||
|
|
e9ea89edae | ||
| 1ce7c0486a | |||
|
|
4f3a1b390d | ||
|
|
4de4fbecaf | ||
|
|
e3598992e7 | ||
|
|
ea19195850 | ||
|
|
ca545fd4b8 | ||
|
|
07b538cadc | ||
|
|
b84546686a | ||
|
|
461ee84d2a | ||
|
acf7d611e8 | ||
| b0d13b3cd4 | |||
|
|
5256681089 | ||
|
|
225b34d480 | ||
| d9f9460be7 | |||
|
|
f4144c7469 |
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
|
||||||
|
|
||||||
<!-- CORS headers removed to allow images from any domain -->
|
<!-- CORS headers removed to allow images from any domain -->
|
||||||
|
|
||||||
@@ -13,4 +13,4 @@
|
|||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -7,6 +7,24 @@
|
|||||||
html {
|
html {
|
||||||
font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
|
font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fix iOS viewport height changes when keyboard appears/disappears */
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh; /* Dynamic viewport height for better mobile support */
|
||||||
|
overflow: hidden; /* Disable all scrolling on html and body */
|
||||||
|
position: fixed; /* Force fixed positioning to prevent viewport changes */
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
|
|||||||
@@ -78,8 +78,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<p class="font-medium">
|
<p class="font-medium overflow-hidden">
|
||||||
<a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
|
<a
|
||||||
|
class="block cursor-pointer overflow-hidden text-ellipsis"
|
||||||
|
@click="emitLoadClaim(record.jwtId)"
|
||||||
|
>
|
||||||
<vue-markdown
|
<vue-markdown
|
||||||
:source="truncatedDescription"
|
:source="truncatedDescription"
|
||||||
class="markdown-content"
|
class="markdown-content"
|
||||||
|
|||||||
@@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
<span class="text-xs truncate">{{ contact.did }}</span>
|
<span class="text-xs truncate">{{ contact.did }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm">
|
<div class="text-sm truncate">
|
||||||
{{ contact.notes }}
|
{{ contact.notes }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<!-- Members List -->
|
<!-- Members List -->
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="text-center text-red-600 py-4">
|
<div class="text-center text-red-600 my-4">
|
||||||
{{ decryptionErrorMessage() }}
|
{{ decryptionErrorMessage() }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -23,131 +23,160 @@
|
|||||||
to set it.
|
to set it.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<ul class="list-disc text-sm ps-4 space-y-2 mb-4">
|
||||||
<span
|
<li
|
||||||
v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
|
v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
|
||||||
class="inline-flex items-center flex-wrap"
|
|
||||||
>
|
>
|
||||||
<span class="inline-flex items-center">
|
Click
|
||||||
• Click
|
<font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
|
||||||
<span
|
/
|
||||||
class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
|
<font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
|
||||||
>
|
to add/remove them to/from the meeting.
|
||||||
<font-awesome icon="plus" class="text-sm" />
|
</li>
|
||||||
</span>
|
<li v-if="membersToShow().length > 0">
|
||||||
/
|
Click
|
||||||
<span
|
<font-awesome icon="circle-user" class="text-green-600 text-sm" />
|
||||||
class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
|
|
||||||
>
|
|
||||||
<font-awesome icon="minus" class="text-sm" />
|
|
||||||
</span>
|
|
||||||
to add/remove them to/from the meeting.
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span
|
|
||||||
v-if="membersToShow().length > 0"
|
|
||||||
class="inline-flex items-center"
|
|
||||||
>
|
|
||||||
• Click
|
|
||||||
<span
|
|
||||||
class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
|
|
||||||
>
|
|
||||||
<font-awesome icon="circle-user" class="text-xl" />
|
|
||||||
</span>
|
|
||||||
to add them to your contacts.
|
to add them to your contacts.
|
||||||
</span>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<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="btn-action-refresh"
|
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"
|
title="Refresh members list now"
|
||||||
@click="fetchMembers"
|
@click="manualRefresh"
|
||||||
>
|
>
|
||||||
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
|
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
|
||||||
|
Refresh
|
||||||
|
<span class="text-xs">({{ countdownTimer }}s)</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="getPendingMembersCount() > 0"
|
||||||
|
class="text-sm bg-gradient-to-b from-blue-100 to-blue-200 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.2)] text-blue-800 px-3 py-1.5 rounded-md"
|
||||||
|
@click="showAdmitAllPendingDialog"
|
||||||
|
>
|
||||||
|
<font-awesome icon="circle-plus" class="text-blue-500" />
|
||||||
|
Admit Pending
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<ul
|
||||||
v-for="member in membersToShow()"
|
v-if="membersToShow().length > 0"
|
||||||
:key="member.member.memberId"
|
class="border-t border-slate-300 my-2"
|
||||||
class="mt-2 p-4 bg-gray-50 rounded-lg"
|
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between">
|
<li
|
||||||
<div class="flex items-center">
|
v-for="member in membersToShow()"
|
||||||
<h3 class="text-lg font-medium">
|
:key="member.member.memberId"
|
||||||
{{ member.name || unnamedMember }}
|
:class="[
|
||||||
</h3>
|
'border-b px-2 sm:px-3 py-1.5',
|
||||||
<div
|
{
|
||||||
v-if="!getContactFor(member.did) && member.did !== activeDid"
|
'bg-blue-50 border-t border-blue-300 -mt-[1px]':
|
||||||
class="flex justify-end"
|
!member.member.admitted,
|
||||||
>
|
},
|
||||||
<button
|
{ 'border-slate-300': member.member.admitted },
|
||||||
class="btn-add-contact"
|
]"
|
||||||
title="Add as contact"
|
>
|
||||||
@click="addAsContact(member)"
|
<div class="flex items-center gap-2 justify-between">
|
||||||
|
<div class="flex items-center gap-1 overflow-hidden">
|
||||||
|
<h3
|
||||||
|
:class="[
|
||||||
|
'font-semibold truncate',
|
||||||
|
{ 'text-slate-500': !member.member.admitted },
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
<font-awesome icon="circle-user" class="text-xl" />
|
<font-awesome
|
||||||
</button>
|
v-if="member.member.memberId === members[0]?.memberId"
|
||||||
|
icon="crown"
|
||||||
|
class="fa-fw text-amber-400"
|
||||||
|
/>
|
||||||
|
<font-awesome
|
||||||
|
v-if="!member.member.admitted"
|
||||||
|
icon="hourglass-half"
|
||||||
|
class="fa-fw text-slate-400"
|
||||||
|
/>
|
||||||
|
{{ member.name || unnamedMember }}
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
v-if="!getContactFor(member.did) && member.did !== activeDid"
|
||||||
|
class="flex items-center gap-1.5 ms-1"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn-add-contact"
|
||||||
|
title="Add as contact"
|
||||||
|
@click="addAsContact(member)"
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<button
|
|
||||||
v-if="member.did !== activeDid"
|
|
||||||
class="btn-info-contact"
|
|
||||||
title="Contact info"
|
|
||||||
@click="
|
|
||||||
informAboutAddingContact(
|
|
||||||
getContactFor(member.did) !== undefined,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<font-awesome icon="circle-info" class="text-base" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
showOrganizerTools && isOrganizer && member.did !== activeDid
|
showOrganizerTools && isOrganizer && member.did !== activeDid
|
||||||
"
|
"
|
||||||
class="flex items-center"
|
class="flex items-center gap-1.5"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn-admission"
|
:class="
|
||||||
|
member.member.admitted
|
||||||
|
? 'btn-admission-remove'
|
||||||
|
: 'btn-admission-add'
|
||||||
|
"
|
||||||
:title="
|
:title="
|
||||||
member.member.admitted ? 'Remove member' : 'Admit member'
|
member.member.admitted ? 'Remove member' : 'Admit member'
|
||||||
"
|
"
|
||||||
@click="checkWhetherContactBeforeAdmitting(member)"
|
@click="checkWhetherContactBeforeAdmitting(member)"
|
||||||
>
|
>
|
||||||
<font-awesome
|
<font-awesome
|
||||||
:icon="member.member.admitted ? 'minus' : 'plus'"
|
:icon="
|
||||||
class="text-sm"
|
member.member.admitted ? 'circle-minus' : 'circle-plus'
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="btn-info-admission"
|
class="btn-info-admission"
|
||||||
title="Admission info"
|
title="Admission Info"
|
||||||
@click="informAboutAdmission()"
|
@click="informAboutAdmission()"
|
||||||
>
|
>
|
||||||
<font-awesome icon="circle-info" class="text-base" />
|
<font-awesome icon="circle-info" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<p class="text-xs text-gray-600 truncate">
|
||||||
<p class="text-sm text-gray-600 truncate">
|
{{ member.did }}
|
||||||
{{ member.did }}
|
</p>
|
||||||
</p>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
|
|
||||||
|
<div v-if="membersToShow().length > 0" class="flex justify-between">
|
||||||
|
<!--
|
||||||
|
always have at least one refresh button even without members in case the organizer
|
||||||
|
changes the password
|
||||||
|
-->
|
||||||
<button
|
<button
|
||||||
class="btn-action-refresh"
|
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"
|
title="Refresh members list now"
|
||||||
@click="fetchMembers"
|
@click="manualRefresh"
|
||||||
>
|
>
|
||||||
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
|
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
|
||||||
|
Refresh
|
||||||
|
<span class="text-xs">({{ countdownTimer }}s)</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -156,6 +185,15 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Set Visibility Dialog Component -->
|
||||||
|
<SetBulkVisibilityDialog
|
||||||
|
:visible="showSetVisibilityDialog"
|
||||||
|
:members-data="visibilityDialogMembers"
|
||||||
|
:active-did="activeDid"
|
||||||
|
:api-server="apiServer"
|
||||||
|
@close="closeSetVisibilityDialog"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -176,8 +214,10 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
|||||||
import {
|
import {
|
||||||
NOTIFY_ADD_CONTACT_FIRST,
|
NOTIFY_ADD_CONTACT_FIRST,
|
||||||
NOTIFY_CONTINUE_WITHOUT_ADDING,
|
NOTIFY_CONTINUE_WITHOUT_ADDING,
|
||||||
|
NOTIFY_ADMIT_ALL_PENDING,
|
||||||
} from "@/constants/notifications";
|
} from "@/constants/notifications";
|
||||||
import { SOMEONE_UNNAMED } from "@/constants/entities";
|
import { SOMEONE_UNNAMED } from "@/constants/entities";
|
||||||
|
import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
|
||||||
|
|
||||||
interface Member {
|
interface Member {
|
||||||
admitted: boolean;
|
admitted: boolean;
|
||||||
@@ -193,6 +233,9 @@ interface DecryptedMember {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
components: {
|
||||||
|
SetBulkVisibilityDialog,
|
||||||
|
},
|
||||||
mixins: [PlatformServiceMixin],
|
mixins: [PlatformServiceMixin],
|
||||||
})
|
})
|
||||||
export default class MembersList extends Vue {
|
export default class MembersList extends Vue {
|
||||||
@@ -219,8 +262,25 @@ export default class MembersList extends Vue {
|
|||||||
missingMyself = false;
|
missingMyself = false;
|
||||||
activeDid = "";
|
activeDid = "";
|
||||||
apiServer = "";
|
apiServer = "";
|
||||||
|
|
||||||
|
// Set Visibility Dialog state
|
||||||
|
showSetVisibilityDialog = false;
|
||||||
|
visibilityDialogMembers: Array<{
|
||||||
|
did: string;
|
||||||
|
name: string;
|
||||||
|
isContact: boolean;
|
||||||
|
member: { memberId: string };
|
||||||
|
}> = [];
|
||||||
contacts: Array<Contact> = [];
|
contacts: Array<Contact> = [];
|
||||||
|
|
||||||
|
// Auto-refresh functionality
|
||||||
|
countdownTimer = 10;
|
||||||
|
autoRefreshInterval: NodeJS.Timeout | null = null;
|
||||||
|
lastRefreshTime = 0;
|
||||||
|
|
||||||
|
// Track previous visibility members to detect changes
|
||||||
|
previousVisibilityMembers: string[] = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the unnamed member constant
|
* Get the unnamed member constant
|
||||||
*/
|
*/
|
||||||
@@ -242,6 +302,21 @@ export default class MembersList extends Vue {
|
|||||||
this.firstName = settings.firstName || "";
|
this.firstName = settings.firstName || "";
|
||||||
await this.fetchMembers();
|
await this.fetchMembers();
|
||||||
await this.loadContacts();
|
await this.loadContacts();
|
||||||
|
|
||||||
|
// Start auto-refresh
|
||||||
|
this.startAutoRefresh();
|
||||||
|
|
||||||
|
// Check if we should show the visibility dialog on initial load
|
||||||
|
this.checkAndShowVisibilityDialog();
|
||||||
|
}
|
||||||
|
|
||||||
|
async refreshData() {
|
||||||
|
// Force refresh both contacts and members
|
||||||
|
await this.loadContacts();
|
||||||
|
await this.fetchMembers();
|
||||||
|
|
||||||
|
// Check if we should show the visibility dialog after refresh
|
||||||
|
this.checkAndShowVisibilityDialog();
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchMembers() {
|
async fetchMembers() {
|
||||||
@@ -329,22 +404,49 @@ export default class MembersList extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
membersToShow(): DecryptedMember[] {
|
membersToShow(): DecryptedMember[] {
|
||||||
|
let members: DecryptedMember[] = [];
|
||||||
|
|
||||||
if (this.isOrganizer) {
|
if (this.isOrganizer) {
|
||||||
if (this.showOrganizerTools) {
|
if (this.showOrganizerTools) {
|
||||||
return this.decryptedMembers;
|
members = this.decryptedMembers;
|
||||||
} else {
|
} else {
|
||||||
return this.decryptedMembers.filter(
|
members = this.decryptedMembers.filter(
|
||||||
(member: DecryptedMember) => member.member.admitted,
|
(member: DecryptedMember) => member.member.admitted,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// non-organizers only get visible members from server
|
||||||
|
members = this.decryptedMembers;
|
||||||
}
|
}
|
||||||
// non-organizers only get visible members from server
|
|
||||||
return this.decryptedMembers;
|
// Sort members according to priority:
|
||||||
|
// 1. Organizer at the top
|
||||||
|
// 2. Non-admitted members next
|
||||||
|
// 3. 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;
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// If admission status is the same, maintain original order
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
informAboutAdmission() {
|
informAboutAdmission() {
|
||||||
this.notify.info(
|
this.notify.info(
|
||||||
"This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
|
"This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
|
||||||
TIMEOUTS.VERY_LONG,
|
TIMEOUTS.VERY_LONG,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -371,6 +473,80 @@ export default class MembersList extends Vue {
|
|||||||
return this.contacts.find((contact) => contact.did === did);
|
return this.contacts.find((contact) => contact.did === did);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getMembersForVisibility() {
|
||||||
|
return this.decryptedMembers
|
||||||
|
.filter((member) => {
|
||||||
|
// Exclude the current user
|
||||||
|
if (member.did === this.activeDid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const contact = this.getContactFor(member.did);
|
||||||
|
|
||||||
|
// Include members who:
|
||||||
|
// 1. Haven't been added as contacts yet, OR
|
||||||
|
// 2. Are contacts but don't have visibility set (seesMe property)
|
||||||
|
return !contact || !contact.seesMe;
|
||||||
|
})
|
||||||
|
.map((member) => ({
|
||||||
|
did: member.did,
|
||||||
|
name: member.name,
|
||||||
|
isContact: !!this.getContactFor(member.did),
|
||||||
|
member: {
|
||||||
|
memberId: member.member.memberId.toString(),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if we should show the visibility dialog
|
||||||
|
* Returns true if there are members for visibility and either:
|
||||||
|
* - This is the first time (no previous members tracked), OR
|
||||||
|
* - New members have been added since last check (not removed)
|
||||||
|
*/
|
||||||
|
shouldShowVisibilityDialog(): boolean {
|
||||||
|
const currentMembers = this.getMembersForVisibility();
|
||||||
|
|
||||||
|
if (currentMembers.length === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no previous members tracked, show dialog
|
||||||
|
if (this.previousVisibilityMembers.length === 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if new members have been added (not just any change)
|
||||||
|
const currentMemberIds = currentMembers.map((m) => m.did);
|
||||||
|
const previousMemberIds = this.previousVisibilityMembers;
|
||||||
|
|
||||||
|
// Find new members (members in current but not in previous)
|
||||||
|
const newMembers = currentMemberIds.filter(
|
||||||
|
(id) => !previousMemberIds.includes(id),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only show dialog if there are new members added
|
||||||
|
return newMembers.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the tracking of previous visibility members
|
||||||
|
*/
|
||||||
|
updatePreviousVisibilityMembers() {
|
||||||
|
const currentMembers = this.getMembersForVisibility();
|
||||||
|
this.previousVisibilityMembers = currentMembers.map((m) => m.did);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the visibility dialog if conditions are met
|
||||||
|
*/
|
||||||
|
checkAndShowVisibilityDialog() {
|
||||||
|
if (this.shouldShowVisibilityDialog()) {
|
||||||
|
this.showSetBulkVisibilityDialog();
|
||||||
|
}
|
||||||
|
this.updatePreviousVisibilityMembers();
|
||||||
|
}
|
||||||
|
|
||||||
checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
|
checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
|
||||||
const contact = this.getContactFor(decrMember.did);
|
const contact = this.getContactFor(decrMember.did);
|
||||||
if (!decrMember.member.admitted && !contact) {
|
if (!decrMember.member.admitted && !contact) {
|
||||||
@@ -508,6 +684,187 @@ export default class MembersList extends Vue {
|
|||||||
this.notify.error(message, TIMEOUTS.LONG);
|
this.notify.error(message, TIMEOUTS.LONG);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showSetBulkVisibilityDialog() {
|
||||||
|
// Filter members to show only those who need visibility set
|
||||||
|
const membersForVisibility = this.getMembersForVisibility();
|
||||||
|
|
||||||
|
// Pause auto-refresh when dialog opens
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
|
||||||
|
// Open the dialog directly
|
||||||
|
this.visibilityDialogMembers = membersForVisibility;
|
||||||
|
this.showSetVisibilityDialog = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
startAutoRefresh() {
|
||||||
|
this.lastRefreshTime = Date.now();
|
||||||
|
this.countdownTimer = 10;
|
||||||
|
|
||||||
|
this.autoRefreshInterval = setInterval(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
|
||||||
|
|
||||||
|
if (timeSinceLastRefresh >= 10) {
|
||||||
|
// Time to refresh
|
||||||
|
this.refreshData();
|
||||||
|
this.lastRefreshTime = now;
|
||||||
|
this.countdownTimer = 10;
|
||||||
|
} else {
|
||||||
|
// Update countdown
|
||||||
|
this.countdownTimer = Math.max(
|
||||||
|
0,
|
||||||
|
Math.round(10 - timeSinceLastRefresh),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, 1000); // Update every second
|
||||||
|
}
|
||||||
|
|
||||||
|
stopAutoRefresh() {
|
||||||
|
if (this.autoRefreshInterval) {
|
||||||
|
clearInterval(this.autoRefreshInterval);
|
||||||
|
this.autoRefreshInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
manualRefresh() {
|
||||||
|
// Clear existing auto-refresh interval
|
||||||
|
if (this.autoRefreshInterval) {
|
||||||
|
clearInterval(this.autoRefreshInterval);
|
||||||
|
this.autoRefreshInterval = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger immediate refresh and restart timer
|
||||||
|
this.refreshData();
|
||||||
|
this.startAutoRefresh();
|
||||||
|
|
||||||
|
// Always show dialog on manual refresh if there are members for visibility
|
||||||
|
if (this.getMembersForVisibility().length > 0) {
|
||||||
|
this.showSetBulkVisibilityDialog();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set Visibility Dialog methods
|
||||||
|
closeSetVisibilityDialog() {
|
||||||
|
this.showSetVisibilityDialog = false;
|
||||||
|
this.visibilityDialogMembers = [];
|
||||||
|
// Refresh data when dialog is closed
|
||||||
|
this.refreshData();
|
||||||
|
// Resume auto-refresh when dialog is closed
|
||||||
|
this.startAutoRefresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get count of pending (non-admitted) members
|
||||||
|
*/
|
||||||
|
getPendingMembersCount(): number {
|
||||||
|
return this.decryptedMembers.filter(
|
||||||
|
(member) => !member.member.admitted && member.did !== this.activeDid,
|
||||||
|
).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get list of pending members
|
||||||
|
*/
|
||||||
|
getPendingMembers(): DecryptedMember[] {
|
||||||
|
return this.decryptedMembers.filter(
|
||||||
|
(member) => !member.member.admitted && member.did !== this.activeDid,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the admit all pending members dialog
|
||||||
|
*/
|
||||||
|
showAdmitAllPendingDialog() {
|
||||||
|
const pendingCount = this.getPendingMembersCount();
|
||||||
|
|
||||||
|
if (pendingCount === 0) {
|
||||||
|
this.notify.info(
|
||||||
|
"There are no pending members to admit.",
|
||||||
|
TIMEOUTS.STANDARD,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pause auto-refresh when dialog opens
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
|
||||||
|
const dialogText = NOTIFY_ADMIT_ALL_PENDING.text.replace(
|
||||||
|
"{count}",
|
||||||
|
pendingCount.toString(),
|
||||||
|
);
|
||||||
|
|
||||||
|
this.$notify(
|
||||||
|
{
|
||||||
|
group: "modal",
|
||||||
|
type: "confirm",
|
||||||
|
title: NOTIFY_ADMIT_ALL_PENDING.title,
|
||||||
|
text: dialogText,
|
||||||
|
yesText: NOTIFY_ADMIT_ALL_PENDING.yesText,
|
||||||
|
noText: NOTIFY_ADMIT_ALL_PENDING.noText,
|
||||||
|
onYes: async () => {
|
||||||
|
await this.admitAllPendingMembers(true); // true = add to contacts
|
||||||
|
// Resume auto-refresh after action
|
||||||
|
this.startAutoRefresh();
|
||||||
|
},
|
||||||
|
onNo: async () => {
|
||||||
|
await this.admitAllPendingMembers(false); // false = don't add to contacts
|
||||||
|
// Resume auto-refresh after action
|
||||||
|
this.startAutoRefresh();
|
||||||
|
},
|
||||||
|
onCancel: async () => {
|
||||||
|
// Do nothing - user cancelled
|
||||||
|
// Resume auto-refresh after cancellation
|
||||||
|
this.startAutoRefresh();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
TIMEOUTS.MODAL,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Admit all pending members with optional contact addition
|
||||||
|
*/
|
||||||
|
async admitAllPendingMembers(addToContacts: boolean) {
|
||||||
|
const pendingMembers = this.getPendingMembers();
|
||||||
|
|
||||||
|
if (pendingMembers.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Process each pending member
|
||||||
|
for (const member of pendingMembers) {
|
||||||
|
// Add to contacts if requested and not already a contact
|
||||||
|
if (addToContacts && !this.getContactFor(member.did)) {
|
||||||
|
await this.addAsContact(member);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Admit the member
|
||||||
|
await this.toggleAdmission(member);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
const contactMessage = addToContacts ? " and added to your contacts" : "";
|
||||||
|
this.notify.success(
|
||||||
|
`All ${pendingMembers.length} pending members have been admitted${contactMessage}.`,
|
||||||
|
TIMEOUTS.STANDARD,
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
this.$logAndConsole(
|
||||||
|
"Error admitting all pending members: " + errorStringForLog(error),
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
this.notify.error(
|
||||||
|
"Failed to admit some members. Please try again.",
|
||||||
|
TIMEOUTS.LONG,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -522,29 +879,26 @@ export default class MembersList extends Vue {
|
|||||||
|
|
||||||
.btn-add-contact {
|
.btn-add-contact {
|
||||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||||
@apply ml-2 w-8 h-8 flex items-center justify-center rounded-full
|
@apply text-lg text-green-600 hover:text-green-800
|
||||||
bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800
|
|
||||||
transition-colors;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info-contact {
|
|
||||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
|
||||||
@apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full
|
|
||||||
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
|
|
||||||
transition-colors;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-admission {
|
|
||||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
|
||||||
@apply mr-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;
|
transition-colors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-info-contact,
|
||||||
.btn-info-admission {
|
.btn-info-admission {
|
||||||
/* stylelint-disable-next-line at-rule-no-unknown */
|
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||||
@apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full
|
@apply text-slate-400 hover:text-slate-600
|
||||||
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
|
transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-admission-add {
|
||||||
|
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||||
|
@apply text-lg text-blue-500 hover:text-blue-700
|
||||||
|
transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-admission-remove {
|
||||||
|
/* stylelint-disable-next-line at-rule-no-unknown */
|
||||||
|
@apply text-lg text-rose-500 hover:text-rose-700
|
||||||
transition-colors;
|
transition-colors;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
333
src/components/SetBulkVisibilityDialog.vue
Normal file
333
src/components/SetBulkVisibilityDialog.vue
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="visible" class="dialog-overlay">
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="text-slate-900 text-center">
|
||||||
|
<h3 class="text-lg font-semibold leading-[1.25] mb-2">
|
||||||
|
Set Visibility to Meeting Members
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm mb-4">
|
||||||
|
Would you like to <b>make your activities visible</b> to the following
|
||||||
|
members? (This will also add them as contacts if they aren't already.)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Custom table area - you can customize this -->
|
||||||
|
<div v-if="shouldInitializeSelection" class="mb-4">
|
||||||
|
<table
|
||||||
|
class="w-full border-collapse border border-slate-300 text-sm text-start"
|
||||||
|
>
|
||||||
|
<thead v-if="membersData && membersData.length > 0">
|
||||||
|
<tr class="bg-slate-100 font-medium">
|
||||||
|
<th class="border border-slate-300 px-3 py-2">
|
||||||
|
<label class="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="isAllSelected"
|
||||||
|
:indeterminate="isIndeterminate"
|
||||||
|
@change="toggleSelectAll"
|
||||||
|
/>
|
||||||
|
Select All
|
||||||
|
</label>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- Dynamic data from MembersList -->
|
||||||
|
<tr v-if="!membersData || membersData.length === 0">
|
||||||
|
<td
|
||||||
|
class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
|
||||||
|
>
|
||||||
|
No members need visibility settings
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
v-for="member in membersData || []"
|
||||||
|
:key="member.member.memberId"
|
||||||
|
>
|
||||||
|
<td class="border border-slate-300 px-3 py-2">
|
||||||
|
<div class="flex items-center justify-between gap-2">
|
||||||
|
<label class="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="isMemberSelected(member.did)"
|
||||||
|
@change="toggleMemberSelection(member.did)"
|
||||||
|
/>
|
||||||
|
{{ member.name || SOMEONE_UNNAMED }}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Friend indicator - only show if they are already a contact -->
|
||||||
|
<font-awesome
|
||||||
|
v-if="member.isContact"
|
||||||
|
icon="user-circle"
|
||||||
|
class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
|
||||||
|
@click="showContactInfo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<button
|
||||||
|
v-if="membersData && membersData.length > 0"
|
||||||
|
:disabled="!hasSelectedMembers"
|
||||||
|
:class="[
|
||||||
|
'block w-full text-center text-md font-bold uppercase px-2 py-2 rounded-md',
|
||||||
|
hasSelectedMembers
|
||||||
|
? 'bg-blue-600 text-white cursor-pointer'
|
||||||
|
: 'bg-slate-400 text-slate-200 cursor-not-allowed',
|
||||||
|
]"
|
||||||
|
@click="setVisibilityForSelectedMembers"
|
||||||
|
>
|
||||||
|
Set Visibility
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
membersData && membersData.length > 0 ? "Maybe Later" : "Cancel"
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Vue, Component, Prop } from "vue-facing-decorator";
|
||||||
|
|
||||||
|
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||||
|
import { SOMEONE_UNNAMED } from "@/constants/entities";
|
||||||
|
import { setVisibilityUtil } from "@/libs/endorserServer";
|
||||||
|
import { createNotifyHelpers } from "@/utils/notify";
|
||||||
|
|
||||||
|
interface MemberData {
|
||||||
|
did: string;
|
||||||
|
name: string;
|
||||||
|
isContact: boolean;
|
||||||
|
member: {
|
||||||
|
memberId: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
mixins: [PlatformServiceMixin],
|
||||||
|
})
|
||||||
|
export default class SetBulkVisibilityDialog extends Vue {
|
||||||
|
@Prop({ default: false }) visible!: boolean;
|
||||||
|
@Prop({ default: () => [] }) membersData!: MemberData[];
|
||||||
|
@Prop({ default: "" }) activeDid!: string;
|
||||||
|
@Prop({ default: "" }) apiServer!: string;
|
||||||
|
|
||||||
|
// Vue notification system
|
||||||
|
$notify!: (
|
||||||
|
notification: { group: string; type: string; title: string; text: string },
|
||||||
|
timeout?: number,
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
// Notification system
|
||||||
|
notify!: ReturnType<typeof createNotifyHelpers>;
|
||||||
|
|
||||||
|
// Component state
|
||||||
|
selectedMembers: string[] = [];
|
||||||
|
selectionInitialized = false;
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
// In Vue templates, imported constants need to be explicitly made available to the template
|
||||||
|
readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
|
||||||
|
|
||||||
|
get hasSelectedMembers() {
|
||||||
|
return this.selectedMembers.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
get isAllSelected() {
|
||||||
|
if (!this.membersData || this.membersData.length === 0) return false;
|
||||||
|
return this.membersData.every((member) =>
|
||||||
|
this.selectedMembers.includes(member.did),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get isIndeterminate() {
|
||||||
|
if (!this.membersData || this.membersData.length === 0) return false;
|
||||||
|
const selectedCount = this.membersData.filter((member) =>
|
||||||
|
this.selectedMembers.includes(member.did),
|
||||||
|
).length;
|
||||||
|
return selectedCount > 0 && selectedCount < this.membersData.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
get shouldInitializeSelection() {
|
||||||
|
// This method will initialize selection when the dialog opens
|
||||||
|
if (!this.selectionInitialized) {
|
||||||
|
this.initializeSelection();
|
||||||
|
this.selectionInitialized = true;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.notify = createNotifyHelpers(this.$notify);
|
||||||
|
}
|
||||||
|
|
||||||
|
initializeSelection() {
|
||||||
|
// Reset selection when dialog opens
|
||||||
|
this.selectedMembers = [];
|
||||||
|
// Select all by default
|
||||||
|
this.selectedMembers = this.membersData.map((member) => member.did);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetSelection() {
|
||||||
|
this.selectedMembers = [];
|
||||||
|
this.selectionInitialized = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSelectAll() {
|
||||||
|
if (!this.membersData || this.membersData.length === 0) return;
|
||||||
|
|
||||||
|
if (this.isAllSelected) {
|
||||||
|
// Deselect all
|
||||||
|
this.selectedMembers = [];
|
||||||
|
} else {
|
||||||
|
// Select all
|
||||||
|
this.selectedMembers = this.membersData.map((member) => member.did);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleMemberSelection(memberDid: string) {
|
||||||
|
const index = this.selectedMembers.indexOf(memberDid);
|
||||||
|
if (index > -1) {
|
||||||
|
this.selectedMembers.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
this.selectedMembers.push(memberDid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isMemberSelected(memberDid: string) {
|
||||||
|
return this.selectedMembers.includes(memberDid);
|
||||||
|
}
|
||||||
|
|
||||||
|
async setVisibilityForSelectedMembers() {
|
||||||
|
try {
|
||||||
|
const selectedMembers = this.membersData.filter((member) =>
|
||||||
|
this.selectedMembers.includes(member.did),
|
||||||
|
);
|
||||||
|
|
||||||
|
let successCount = 0;
|
||||||
|
|
||||||
|
for (const member of selectedMembers) {
|
||||||
|
try {
|
||||||
|
// If they're not a contact yet, add them as a contact first
|
||||||
|
if (!member.isContact) {
|
||||||
|
await this.addAsContact(member);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set their seesMe to true
|
||||||
|
await this.updateContactVisibility(member.did, true);
|
||||||
|
|
||||||
|
successCount++;
|
||||||
|
} catch (error) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error(`Error processing member ${member.did}:`, error);
|
||||||
|
// Continue with other members even if one fails
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show success notification
|
||||||
|
this.$notify(
|
||||||
|
{
|
||||||
|
group: "alert",
|
||||||
|
type: "success",
|
||||||
|
title: "Visibility Set Successfully",
|
||||||
|
text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`,
|
||||||
|
},
|
||||||
|
5000,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Emit success event
|
||||||
|
this.$emit("success", successCount);
|
||||||
|
this.close();
|
||||||
|
} catch (error) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error("Error setting visibility:", error);
|
||||||
|
this.$notify(
|
||||||
|
{
|
||||||
|
group: "alert",
|
||||||
|
type: "danger",
|
||||||
|
title: "Error",
|
||||||
|
text: "Failed to set visibility for some members. Please try again.",
|
||||||
|
},
|
||||||
|
5000,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async addAsContact(member: { did: string; name: string }) {
|
||||||
|
try {
|
||||||
|
const newContact = {
|
||||||
|
did: member.did,
|
||||||
|
name: member.name,
|
||||||
|
};
|
||||||
|
|
||||||
|
await this.$insertContact(newContact);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error("Error adding contact:", err);
|
||||||
|
if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
|
||||||
|
// Contact already exists, continue
|
||||||
|
} else {
|
||||||
|
throw err; // Re-throw if it's not a duplicate error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateContactVisibility(did: string, seesMe: boolean) {
|
||||||
|
try {
|
||||||
|
// Get the contact object
|
||||||
|
const contact = await this.$getContact(did);
|
||||||
|
if (!contact) {
|
||||||
|
throw new Error(`Contact not found for DID: ${did}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use the proper API to set visibility on the server
|
||||||
|
const result = await setVisibilityUtil(
|
||||||
|
this.activeDid,
|
||||||
|
this.apiServer,
|
||||||
|
this.axios,
|
||||||
|
contact,
|
||||||
|
seesMe,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
throw new Error(result.error || "Failed to set visibility");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error("Error updating contact visibility:", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showContactInfo() {
|
||||||
|
this.$notify(
|
||||||
|
{
|
||||||
|
group: "alert",
|
||||||
|
type: "info",
|
||||||
|
title: "Contact Info",
|
||||||
|
text: "This user is already your contact, but your activities are not visible to them yet.",
|
||||||
|
},
|
||||||
|
5000,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.resetSelection();
|
||||||
|
this.$emit("close");
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -59,7 +59,7 @@ export const PASSKEYS_ENABLED =
|
|||||||
export interface NotificationIface {
|
export interface NotificationIface {
|
||||||
group: string; // "alert" | "modal"
|
group: string; // "alert" | "modal"
|
||||||
type: string; // "toast" | "info" | "success" | "warning" | "danger"
|
type: string; // "toast" | "info" | "success" | "warning" | "danger"
|
||||||
title: string;
|
title?: string;
|
||||||
text?: string;
|
text?: string;
|
||||||
callback?: (success: boolean) => Promise<void>; // if this triggered an action
|
callback?: (success: boolean) => Promise<void>; // if this triggered an action
|
||||||
noText?: string;
|
noText?: string;
|
||||||
@@ -68,4 +68,11 @@ export interface NotificationIface {
|
|||||||
onYes?: () => Promise<void>;
|
onYes?: () => Promise<void>;
|
||||||
promptToStopAsking?: boolean;
|
promptToStopAsking?: boolean;
|
||||||
yesText?: string;
|
yesText?: string;
|
||||||
|
membersData?: Array<{
|
||||||
|
member: { admitted: boolean; content: string; memberId: number };
|
||||||
|
name: string;
|
||||||
|
did: string;
|
||||||
|
isContact: boolean;
|
||||||
|
contact?: { did: string; name?: string; seesMe?: boolean };
|
||||||
|
}>; // For passing member data to visibility dialog
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -471,6 +471,14 @@ export const NOTIFY_CONTINUE_WITHOUT_ADDING = {
|
|||||||
noText: "No, Cancel",
|
noText: "No, Cancel",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Used in: MembersList.vue (complex modal for admitting all pending members)
|
||||||
|
export const NOTIFY_ADMIT_ALL_PENDING = {
|
||||||
|
title: "Admit All Pending Members",
|
||||||
|
text: "You are about to admit {count} pending member/s. Would you also like to add them to your Contacts list?",
|
||||||
|
yesText: "Admit and Add to Contacts",
|
||||||
|
noText: "Admit Only",
|
||||||
|
};
|
||||||
|
|
||||||
// HelpNotificationsView.vue specific constants
|
// HelpNotificationsView.vue specific constants
|
||||||
// Used in: HelpNotificationsView.vue (sendTestWebPushMessage method - not subscribed error)
|
// Used in: HelpNotificationsView.vue (sendTestWebPushMessage method - not subscribed error)
|
||||||
export const NOTIFY_PUSH_NOT_SUBSCRIBED = {
|
export const NOTIFY_PUSH_NOT_SUBSCRIBED = {
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ import {
|
|||||||
faCircle,
|
faCircle,
|
||||||
faCircleCheck,
|
faCircleCheck,
|
||||||
faCircleInfo,
|
faCircleInfo,
|
||||||
|
faCircleMinus,
|
||||||
faCirclePlus,
|
faCirclePlus,
|
||||||
faCircleQuestion,
|
faCircleQuestion,
|
||||||
faCircleRight,
|
faCircleRight,
|
||||||
@@ -37,6 +38,7 @@ import {
|
|||||||
faCoins,
|
faCoins,
|
||||||
faComment,
|
faComment,
|
||||||
faCopy,
|
faCopy,
|
||||||
|
faCrown,
|
||||||
faDollar,
|
faDollar,
|
||||||
faDownload,
|
faDownload,
|
||||||
faEllipsis,
|
faEllipsis,
|
||||||
@@ -58,6 +60,7 @@ import {
|
|||||||
faHand,
|
faHand,
|
||||||
faHandHoldingDollar,
|
faHandHoldingDollar,
|
||||||
faHandHoldingHeart,
|
faHandHoldingHeart,
|
||||||
|
faHourglassHalf,
|
||||||
faHouseChimney,
|
faHouseChimney,
|
||||||
faImage,
|
faImage,
|
||||||
faImagePortrait,
|
faImagePortrait,
|
||||||
@@ -123,6 +126,7 @@ library.add(
|
|||||||
faCircle,
|
faCircle,
|
||||||
faCircleCheck,
|
faCircleCheck,
|
||||||
faCircleInfo,
|
faCircleInfo,
|
||||||
|
faCircleMinus,
|
||||||
faCirclePlus,
|
faCirclePlus,
|
||||||
faCircleQuestion,
|
faCircleQuestion,
|
||||||
faCircleRight,
|
faCircleRight,
|
||||||
@@ -131,6 +135,7 @@ library.add(
|
|||||||
faCoins,
|
faCoins,
|
||||||
faComment,
|
faComment,
|
||||||
faCopy,
|
faCopy,
|
||||||
|
faCrown,
|
||||||
faDollar,
|
faDollar,
|
||||||
faDownload,
|
faDownload,
|
||||||
faEllipsis,
|
faEllipsis,
|
||||||
@@ -152,6 +157,7 @@ library.add(
|
|||||||
faHand,
|
faHand,
|
||||||
faHandHoldingDollar,
|
faHandHoldingDollar,
|
||||||
faHandHoldingHeart,
|
faHandHoldingHeart,
|
||||||
|
faHourglassHalf,
|
||||||
faHouseChimney,
|
faHouseChimney,
|
||||||
faImage,
|
faImage,
|
||||||
faImagePortrait,
|
faImagePortrait,
|
||||||
|
|||||||
@@ -88,19 +88,22 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm">
|
<div class="text-sm overflow-hidden">
|
||||||
<div data-testId="description">
|
<div
|
||||||
|
data-testId="description"
|
||||||
|
class="overflow-hidden text-ellipsis"
|
||||||
|
>
|
||||||
<font-awesome icon="message" class="fa-fw text-slate-400" />
|
<font-awesome icon="message" class="fa-fw text-slate-400" />
|
||||||
<vue-markdown
|
<vue-markdown
|
||||||
:source="claimDescription"
|
:source="claimDescription"
|
||||||
class="markdown-content"
|
class="markdown-content"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="overflow-hidden text-ellipsis">
|
||||||
<font-awesome icon="user" class="fa-fw text-slate-400" />
|
<font-awesome icon="user" class="fa-fw text-slate-400" />
|
||||||
{{ didInfo(veriClaim.issuer) }}
|
{{ didInfo(veriClaim.issuer) }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="overflow-hidden text-ellipsis">
|
||||||
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
||||||
Recorded
|
Recorded
|
||||||
{{ formattedIssueDate }}
|
{{ formattedIssueDate }}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
|
class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-xl font-semibold">
|
<h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
|
||||||
{{ contactFromDid?.name || "(no name)" }}
|
{{ contactFromDid?.name || "(no name)" }}
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
|
:to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
|
||||||
|
|||||||
@@ -282,8 +282,8 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grow">
|
<div class="grow overflow-hidden">
|
||||||
<h2 class="text-base font-semibold">
|
<h2 class="text-base font-semibold truncate">
|
||||||
{{ project.name || unnamedProject }}
|
{{ project.name || unnamedProject }}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="text-sm">
|
<div class="text-sm">
|
||||||
|
|||||||
@@ -60,7 +60,9 @@
|
|||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2
|
||||||
|
2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1
|
||||||
|
1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
Go Home
|
Go Home
|
||||||
|
|||||||
@@ -77,6 +77,7 @@ import {
|
|||||||
} from "../libs/endorserServer";
|
} from "../libs/endorserServer";
|
||||||
import { generateSaveAndActivateIdentity } from "../libs/util";
|
import { generateSaveAndActivateIdentity } from "../libs/util";
|
||||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||||
|
import { NotificationIface } from "../constants/app";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
@@ -97,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
|
|||||||
projectLink = "";
|
projectLink = "";
|
||||||
$route!: RouteLocationNormalizedLoaded;
|
$route!: RouteLocationNormalizedLoaded;
|
||||||
$router!: Router;
|
$router!: Router;
|
||||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||||
|
|
||||||
userNameDialog!: InstanceType<typeof UserNameDialog>;
|
userNameDialog!: InstanceType<typeof UserNameDialog>;
|
||||||
|
|
||||||
|
|||||||
@@ -230,26 +230,28 @@
|
|||||||
class="mt-8 p-4 border rounded-lg bg-white shadow"
|
class="mt-8 p-4 border rounded-lg bg-white shadow"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h2 class="text-2xl">Meeting Members</h2>
|
<h2 class="font-bold">Meeting Members</h2>
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
• Page for Members
|
|
||||||
<span
|
|
||||||
class="ml-4 cursor-pointer text-blue-600"
|
|
||||||
title="Click to copy link for members"
|
|
||||||
@click="copyMembersLinkToClipboard"
|
|
||||||
>
|
|
||||||
<font-awesome icon="link" />
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
v-if="!!currentMeeting.password"
|
|
||||||
:href="onboardMeetingMembersLink()"
|
|
||||||
class="ml-4 text-blue-600"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<font-awesome icon="external-link" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
|
||||||
|
<li>
|
||||||
|
Page for Members:
|
||||||
|
<span
|
||||||
|
class="ml-4 cursor-pointer text-blue-600"
|
||||||
|
title="Click to copy link for members"
|
||||||
|
@click="copyMembersLinkToClipboard"
|
||||||
|
>
|
||||||
|
<font-awesome icon="link" />
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
v-if="!!currentMeeting.password"
|
||||||
|
:href="onboardMeetingMembersLink()"
|
||||||
|
class="ml-4 text-blue-600"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<font-awesome icon="external-link" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<MembersList
|
<MembersList
|
||||||
:password="currentMeeting.password || ''"
|
:password="currentMeeting.password || ''"
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
<font-awesome icon="question" class="block text-center w-[1em]" />
|
<font-awesome icon="question" class="block text-center w-[1em]" />
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-center text-lg font-normal">
|
<h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
|
||||||
{{ name }}
|
{{ name }}
|
||||||
<button
|
<button
|
||||||
v-if="activeDid === issuer || activeDid === agentDid"
|
v-if="activeDid === issuer || activeDid === agentDid"
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-sm text-slate-500">
|
<div class="text-sm text-slate-500">
|
||||||
<div v-if="!expanded">
|
<div v-if="!expanded" class="overflow-hidden text-ellipsis">
|
||||||
<vue-markdown
|
<vue-markdown
|
||||||
:source="truncatedDesc"
|
:source="truncatedDesc"
|
||||||
class="mb-4 markdown-content"
|
class="mb-4 markdown-content"
|
||||||
@@ -169,7 +169,7 @@
|
|||||||
>... Read More</a
|
>... Read More</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else class="overflow-hidden text-ellipsis">
|
||||||
<vue-markdown :source="description" class="mb-4 markdown-content" />
|
<vue-markdown :source="description" class="mb-4 markdown-content" />
|
||||||
<a
|
<a
|
||||||
v-if="description.length >= truncateLength"
|
v-if="description.length >= truncateLength"
|
||||||
@@ -308,7 +308,10 @@
|
|||||||
/>{{ offer.amount }}
|
/>{{ offer.amount }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="offer.objectDescription" class="text-slate-500">
|
<div
|
||||||
|
v-if="offer.objectDescription"
|
||||||
|
class="text-slate-500 overflow-hidden text-ellipsis"
|
||||||
|
>
|
||||||
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
||||||
{{ offer.objectDescription }}
|
{{ offer.objectDescription }}
|
||||||
</div>
|
</div>
|
||||||
@@ -450,7 +453,10 @@
|
|||||||
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
||||||
{{ give.issuedAt?.substring(0, 10) }}
|
{{ give.issuedAt?.substring(0, 10) }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="give.description" class="text-slate-500">
|
<div
|
||||||
|
v-if="give.description"
|
||||||
|
class="text-slate-500 overflow-hidden text-ellipsis"
|
||||||
|
>
|
||||||
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
||||||
{{ give.description }}
|
{{ give.description }}
|
||||||
</div>
|
</div>
|
||||||
@@ -557,7 +563,10 @@
|
|||||||
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
<font-awesome icon="calendar" class="fa-fw text-slate-400" />
|
||||||
{{ give.issuedAt?.substring(0, 10) }}
|
{{ give.issuedAt?.substring(0, 10) }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="give.description" class="text-slate-500">
|
<div
|
||||||
|
v-if="give.description"
|
||||||
|
class="text-slate-500 overflow-hidden text-ellipsis"
|
||||||
|
>
|
||||||
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
<font-awesome icon="comment" class="fa-fw text-slate-400" />
|
||||||
{{ give.description }}
|
{{ give.description }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -118,8 +118,8 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="overflow-hidden">
|
||||||
<div>
|
<div class="text-sm truncate">
|
||||||
To
|
To
|
||||||
{{
|
{{
|
||||||
offer.fulfillsPlanHandleId
|
offer.fulfillsPlanHandleId
|
||||||
@@ -132,7 +132,7 @@
|
|||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="truncate">
|
||||||
{{ offer.objectDescription }}
|
{{ offer.objectDescription }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -254,7 +254,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grow overflow-hidden">
|
<div class="grow overflow-hidden">
|
||||||
<h2 class="text-base font-semibold">
|
<h2 class="text-base font-semibold truncate">
|
||||||
{{ project.name || unnamedProject }}
|
{{ project.name || unnamedProject }}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="text-sm truncate">
|
<div class="text-sm truncate">
|
||||||
|
|||||||
Reference in New Issue
Block a user