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
|
Refresh
|
||||||
<span class="text-xs">({{ countdownTimer }}s)</span>
|
<span class="text-xs">({{ countdownTimer }}s)</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
<ul
|
<ul
|
||||||
v-if="membersToShow().length > 0"
|
v-if="membersToShow().length > 0"
|
||||||
@@ -163,16 +153,6 @@
|
|||||||
Refresh
|
Refresh
|
||||||
<span class="text-xs">({{ countdownTimer }}s)</span>
|
<span class="text-xs">({{ countdownTimer }}s)</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<p v-if="members.length === 0" class="text-gray-500 py-4">
|
<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;
|
autoRefreshInterval: NodeJS.Timeout | null = null;
|
||||||
lastRefreshTime = 0;
|
lastRefreshTime = 0;
|
||||||
|
|
||||||
|
// Track previous visibility members to detect changes
|
||||||
|
previousVisibilityMembers: string[] = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the unnamed member constant
|
* Get the unnamed member constant
|
||||||
*/
|
*/
|
||||||
@@ -296,12 +279,18 @@ export default class MembersList extends Vue {
|
|||||||
|
|
||||||
// Start auto-refresh
|
// Start auto-refresh
|
||||||
this.startAutoRefresh();
|
this.startAutoRefresh();
|
||||||
|
|
||||||
|
// Check if we should show the visibility dialog on initial load
|
||||||
|
this.checkAndShowVisibilityDialog();
|
||||||
}
|
}
|
||||||
|
|
||||||
async refreshData() {
|
async refreshData() {
|
||||||
// Force refresh both contacts and members
|
// Force refresh both contacts and members
|
||||||
await this.loadContacts();
|
await this.loadContacts();
|
||||||
await this.fetchMembers();
|
await this.fetchMembers();
|
||||||
|
|
||||||
|
// Check if we should show the visibility dialog after refresh
|
||||||
|
this.checkAndShowVisibilityDialog();
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchMembers() {
|
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) {
|
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) {
|
||||||
@@ -616,7 +654,7 @@ export default class MembersList extends Vue {
|
|||||||
|
|
||||||
if (timeSinceLastRefresh >= 10) {
|
if (timeSinceLastRefresh >= 10) {
|
||||||
// Time to refresh
|
// Time to refresh
|
||||||
this.fetchMembers();
|
this.refreshData();
|
||||||
this.lastRefreshTime = now;
|
this.lastRefreshTime = now;
|
||||||
this.countdownTimer = 10;
|
this.countdownTimer = 10;
|
||||||
} else {
|
} else {
|
||||||
@@ -644,8 +682,13 @@ export default class MembersList extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Trigger immediate refresh and restart timer
|
// Trigger immediate refresh and restart timer
|
||||||
this.fetchMembers();
|
this.refreshData();
|
||||||
this.startAutoRefresh();
|
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
|
// Set Visibility Dialog methods
|
||||||
|
|||||||
Reference in New Issue
Block a user