forked from jsnbuchanan/crowd-funder-for-time-pwa
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
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user