Browse Source

feat: auto-show visibility dialog for meeting members

- Show dialog on initial load if members need visibility settings
- Show dialog during auto-refresh only when new members are added (not removed)
- Show dialog on manual refresh if any members need visibility settings
- Remove manual "Set Visibility" buttons from UI as dialog now appears automatically
- Add logic to track previous visibility members and detect changes
- Improve UX by proactively prompting users to set visibility for new meeting members

The dialog now appears automatically in these scenarios:
- Component initialization with members needing visibility
- Auto-refresh when new members join the meeting
- Manual refresh when members need visibility settings
pull/208/head
Jose Olarte III 2 days ago
parent
commit
4f3a1b390d
  1. 87
      src/components/MembersList.vue

87
src/components/MembersList.vue

@ -66,16 +66,6 @@
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
<button
v-if="getMembersForVisibility().length > 0"
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="Set visibility for meeting members"
@click="showSetBulkVisibilityDialog"
>
<font-awesome icon="eye" />
Set Visibility
</button>
</div>
<ul
v-if="membersToShow().length > 0"
@ -163,16 +153,6 @@
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
<button
v-if="getMembersForVisibility().length > 0"
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="Set visibility for meeting members"
@click="showSetBulkVisibilityDialog"
>
<font-awesome icon="eye" />
Set Visibility
</button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
@ -272,6 +252,9 @@ export default class MembersList extends Vue {
autoRefreshInterval: NodeJS.Timeout | null = null;
lastRefreshTime = 0;
// Track previous visibility members to detect changes
previousVisibilityMembers: string[] = [];
/**
* Get the unnamed member constant
*/
@ -296,12 +279,18 @@ export default class MembersList extends Vue {
// 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() {
@ -456,6 +445,55 @@ export default class MembersList extends Vue {
}));
}
/**
* 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) {
const contact = this.getContactFor(decrMember.did);
if (!decrMember.member.admitted && !contact) {
@ -616,7 +654,7 @@ export default class MembersList extends Vue {
if (timeSinceLastRefresh >= 10) {
// Time to refresh
this.fetchMembers();
this.refreshData();
this.lastRefreshTime = now;
this.countdownTimer = 10;
} else {
@ -644,8 +682,13 @@ export default class MembersList extends Vue {
}
// Trigger immediate refresh and restart timer
this.fetchMembers();
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

Loading…
Cancel
Save