trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

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

Browse Source
This commit is contained in:
Trent Larson
2026-03-05 20:10:58 -07:00
parent b4b7d71330
commit 099eac594f
4 changed files with 82 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/MeetingExclusionGroups.vue
View File

@@ -34,10 +34,14 @@
/>
</div>
<button
v-if="!disabled"
class="text-slate-400 hover:text-red-600 transition-colors ml-2 shrink-0"
:class="[
'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="hover:opacity-70"
@click="removeMemberFromGroup(group.id, did)"
:class="
disabled ? 'opacity-40 cursor-not-allowed' : 'hover:opacity-70'
"
@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="addingToGroupId === group.id" class="mt-2">
<div
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>
<div v-if="!disabled && addingToGroupId === group.id" class="mt-2">
<div
class="flex flex-wrap gap-1.5 p-2 bg-white bg-opacity-60 rounded border border-gray-200"
>
<button
class="text-xs text-slate-500 mt-1"
@click="addingToGroupId = ''"
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)"
>
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-blue-600 hover:text-blue-800 transition-colors"
@click="addingToGroupId = group.id"
class="text-xs text-slate-500 mt-1"
@click="addingToGroupId = ''"
>
<font-awesome icon="plus" class="text-xs" />
Add member
Done
</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="text-sm text-blue-600 hover:text-blue-800 transition-colors"
@click="addGroup"
:class="[
'text-sm transition-colors',
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];
}

2
src/components/MeetingMembersList.vue
View File

@@ -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

10
src/views/OnboardMeetingSetupView.vue
View File

@@ -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"