make tweaks to meeting exclusions & do-not-pair for consistency & helpful info

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 ## [1.3.7]
+### Added
+- Attendee exclusion and do-not-pair groups for meeting matching.
 ### Fixed
 - Contact deep-links clicked or pasted act consistenly
 

src/components/MeetingExclusionGroups.vue

@@ -34,10 +34,14 @@
             />
           </div>
           <button
-            v-if="!disabled"
+            :class="[
-            class="text-slate-400 hover:text-red-600 transition-colors ml-2 shrink-0"
+              'transition-colors ml-2 shrink-0',
+              disabled
+                ? 'text-slate-300 cursor-not-allowed'
+                : 'text-slate-400 hover:text-red-600',
+            ]"
             title="Delete group"
-            @click="removeGroup(group.id)"
+            @click="disabled ? notifyLocked() : removeGroup(group.id)"
           >
             <font-awesome icon="trash-can" class="text-sm" />
           </button>
@@ -54,9 +58,12 @@
           >
             {{ getMemberName(did) }}
             <button
-              v-if="!disabled"
+              :class="
-              class="hover:opacity-70"
+                disabled ? 'opacity-40 cursor-not-allowed' : 'hover:opacity-70'
-              @click="removeMemberFromGroup(group.id, did)"
+              "
+              @click="
+                disabled ? notifyLocked() : removeMemberFromGroup(group.id, did)
+              "
             >
               <font-awesome icon="xmark" class="text-xs" />
             </button>
@@ -69,50 +76,57 @@
           </span>
         </div>
 
-        <template v-if="!disabled">
+        <div v-if="!disabled && addingToGroupId === group.id" class="mt-2">
-          <div v-if="addingToGroupId === group.id" class="mt-2">
+          <div
-            <div
+            class="flex flex-wrap gap-1.5 p-2 bg-white bg-opacity-60 rounded border border-gray-200"
-              class="flex flex-wrap gap-1.5 p-2 bg-white bg-opacity-60 rounded border border-gray-200"
+          >
-            >
-              <button
-                v-for="member in availableMembersForGroup(group)"
-                :key="member.did"
-                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-white border border-gray-300 hover:bg-gray-100 transition-colors"
-                @click="addMemberToGroup(group.id, member.did)"
-              >
-                <font-awesome icon="plus" class="text-xs text-green-600" />
-                {{ member.name }}
-              </button>
-              <span
-                v-if="availableMembersForGroup(group).length === 0"
-                class="text-xs text-slate-400 italic"
-              >
-                All members already assigned
-              </span>
-            </div>
             <button
-              class="text-xs text-slate-500 mt-1"
+              v-for="member in availableMembersForGroup(group)"
-              @click="addingToGroupId = ''"
+              :key="member.did"
+              class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-white border border-gray-300 hover:bg-gray-100 transition-colors"
+              @click="addMemberToGroup(group.id, member.did)"
             >
-              Done
+              <font-awesome icon="plus" class="text-xs text-green-600" />
+              {{ member.name }}
             </button>
+            <span
+              v-if="availableMembersForGroup(group).length === 0"
+              class="text-xs text-slate-400 italic"
+            >
+              All members already assigned
+            </span>
           </div>
           <button
-            v-else
+            class="text-xs text-slate-500 mt-1"
-            class="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+            @click="addingToGroupId = ''"
-            @click="addingToGroupId = group.id"
           >
-            <font-awesome icon="plus" class="text-xs" />
+            Done
-            Add member
           </button>
-        </template>
+        </div>
+        <button
+          v-else
+          :class="[
+            'text-xs transition-colors',
+            disabled
+              ? 'text-slate-400 cursor-not-allowed'
+              : 'text-blue-600 hover:text-blue-800',
+          ]"
+          @click="disabled ? notifyLocked() : (addingToGroupId = group.id)"
+        >
+          <font-awesome icon="plus" class="text-xs" />
+          Add member
+        </button>
       </div>
     </div>
 
     <button
-      v-if="!disabled"
+      :class="[
-      class="text-sm text-blue-600 hover:text-blue-800 transition-colors"
+        'text-sm transition-colors',
-      @click="addGroup"
+        disabled
+          ? 'text-slate-400 cursor-not-allowed'
+          : 'text-blue-600 hover:text-blue-800',
+      ]"
+      @click="disabled ? notifyLocked() : addGroup()"
     >
       <font-awesome icon="plus" class="text-sm" />
       New Group
@@ -123,6 +137,8 @@
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
 import { DoNotPairGroup } from "@/interfaces";
+import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { NotificationIface } from "@/constants/app";
 
 interface MemberInfo {
   did: string;
@@ -170,12 +186,26 @@ const GROUP_COLORS = [
 
 @Component
 export default class MeetingExclusionGroups extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
   @Prop({ required: true }) groups!: DoNotPairGroup[];
   @Prop({ required: true }) availableMembers!: MemberInfo[];
   @Prop({ default: false }) disabled!: boolean;
 
   addingToGroupId = "";
 
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  notifyLocked(): void {
+    this.notify.warning(
+      "Erase the current matches before changing exclusion groups.",
+      TIMEOUTS.LONG,
+    );
+  }
+
   colorSet(colorIndex: number): (typeof GROUP_COLORS)[0] {
     return GROUP_COLORS[colorIndex % GROUP_COLORS.length];
   }

src/components/MeetingMembersList.vue

@@ -42,7 +42,7 @@
             "
           >
             Click
-            <font-awesome icon="ban" class="text-amber-500 text-sm" />
+            <font-awesome icon="ban" class="text-slate-500 text-sm" />
             to exclude someone from matching.
           </li>
           <li

src/views/OnboardMeetingSetupView.vue

@@ -525,6 +525,16 @@
           {{ previousMatchedPairs.length }} previous pair(s) will be avoided.
         </div>
 
+        <div
+          v-if="includedMembers.length % 2 !== 0"
+          class="mb-4 p-2 rounded border border-amber-300 bg-amber-50 text-xs text-amber-800"
+        >
+          <font-awesome icon="triangle-exclamation" class="mr-1" />
+          Odd number of participants ({{ includedMembers.length }}). Matching
+          requires an even number — exclude one more person or add another
+          member.
+        </div>
+
         <div class="flex justify-between space-x-4 pt-2">
           <button
             class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"