refresh member views when there are changes in matches

src/components/MeetingMemberMatch.vue

@@ -142,6 +142,7 @@ export default class GroupOnboardMatchDisplay extends Vue {
     }
   }
 
+  // Note that this is called externally by MeetingMembersList when user triggers a refresh
   async fetchMatches(): Promise<void> {
     const usePropPairs =
       this.matchPairs != null &&

src/components/MeetingMembersList.vue

@@ -47,7 +47,14 @@
           </li>
         </ul>
 
-        <div class="flex justify-between">
+        <MeetingMemberMatch
+          ref="memberMatch"
+          :match-pairs="matchPairs"
+          :meeting-password="password || ''"
+          class="mt-4"
+        />
+
+        <div class="flex justify-between mt-4">
           <!-- 
           always have at least one refresh button even without members in case the organizer 
           changes the password 
@@ -246,10 +253,11 @@ import {
 } from "@/libs/endorserServer";
 import { decryptMessage } from "@/libs/crypto";
 import { Contact } from "@/db/tables/contacts";
-import { MemberData } from "@/interfaces";
+import { MemberData, MatchPair } from "@/interfaces";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import BulkMembersDialog from "./BulkMembersDialog.vue";
+import MeetingMemberMatch from "./MeetingMemberMatch.vue";
 
 const AUTO_REFRESH_INTERVAL = 15;
 
@@ -270,6 +278,7 @@ interface DecryptedMember {
 @Component({
   components: {
     BulkMembersDialog,
+    MeetingMemberMatch,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -280,6 +289,7 @@ export default class MeetingMembersList extends Vue {
 
   @Prop({ required: true }) password!: string;
   @Prop({ default: false }) showOrganizerTools!: boolean;
+  @Prop({ default: null }) matchPairs!: MatchPair[] | null;
 
   // Emit methods using @Emit decorator
   @Emit("error")
@@ -547,8 +557,17 @@ export default class MeetingMembersList extends Vue {
    * (admit pending members for organizers, add to contacts for non-organizers)
    */
   async refreshData(bypassPromptIfAllWereIgnored = true) {
-    // Force refresh both contacts and members
+    // Force refresh of many things
+
+    // Matches may have been generated or erased
+    (
+      this.$refs.memberMatch as InstanceType<typeof MeetingMemberMatch>
+    )?.fetchMatches();
+
+    // Someone may have been added to their contacts
     this.contacts = await this.$getAllContacts();
+
+    // The members list may have changed
     await this.fetchMembers();
 
     const pendingMembers = this.isOrganizer

src/interfaces/user.ts

@@ -7,6 +7,25 @@ export interface UserInfo {
   nextPublicEncKeyHash?: string;
 }
 
+export interface MatchPair {
+  pairNumber: number;
+  similarity: number;
+  participants: MatchPairParticipant[];
+}
+
+/** Pair from GET/POST /api/partner/groupOnboardMatch */
+export interface MatchPairParticipant {
+  issuerDid: string;
+  content: string;
+  // there's a similar structure in MeetingMembersList.vue with extra Member info
+  decryptedContentObject: {
+    name: string;
+    did: string;
+    isRegistered: boolean;
+  };
+  description: string;
+}
+
 export interface MemberData {
   did: string;
   name: string;

src/views/OnboardMeetingMembersView.vue

@@ -41,13 +41,7 @@
     </div>
 
     <div v-else>
-      <MeetingMemberMatch
-        :match-pairs="matchPairs"
-        :meeting-password="password || ''"
-        class="mt-4"
-      />
-
-      <!-- Members List -->
+      <!-- Any Match + Members List -->
       <MeetingMembersList :password="password" @error="handleError" />
     </div>
 

src/views/OnboardMeetingSetupView.vue

@@ -63,7 +63,7 @@
 
         <div v-if="currentMeeting.password" class="mt-4">
           <p class="text-gray-600">
-            Share the password with the members. You can also send them the
+            Share the meeting name & password with the members, or send them the
             "Page for Members" link below.
           </p>
         </div>
@@ -278,13 +278,6 @@
       @close="handleDialogClose"
     />
 
-    <div v-if="!!matchPairs">
-      <MeetingMemberMatch
-        :meeting-password="currentMeeting.password || ''"
-        class="mt-4"
-      />
-    </div>
-
     <!-- Members Section -->
     <div
       v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
@@ -316,6 +309,7 @@
 
       <MeetingMembersList
         ref="membersList"
+        :match-pairs="matchPairs"
         :password="currentMeeting.password || ''"
         :show-organizer-tools="true"
         class="mt-4"
@@ -352,7 +346,7 @@
               icon="spinner"
               class="fa-spin fa-fw"
             />
-            Erase & Start Over
+            Erase to Start Over
           </button>
         </div>
         <div v-if="isLoadingMatches" class="text-sm text-gray-500 py-2">
@@ -458,7 +452,7 @@ import {
 } from "@/constants/notifications";
 import { PlanData } from "../interfaces/records";
 import { Contact } from "../db/tables/contacts";
-import { AxiosErrorResponse } from "@/interfaces";
+import { AxiosErrorResponse, MatchPair } from "@/interfaces";
 interface ServerMeeting {
   groupId: number; // from the server
   name: string; // to & from the server
@@ -476,25 +470,6 @@ interface MeetingSetupInputs {
   projectLink: string;
 }
 
-/** Pair from GET/POST /api/partner/groupOnboardMatch */
-interface MatchPairParticipant {
-  issuerDid: string;
-  content: string;
-  // there's a similar structure in MeetingMembersList.vue with extra Member info
-  decryptedContentObject: {
-    name: string;
-    did: string;
-    isRegistered: boolean;
-  };
-  description: string;
-}
-
-interface MatchPair {
-  pairNumber: number;
-  similarity: number;
-  participants: MatchPairParticipant[];
-}
-
 @Component({
   components: {
     QuickNav,