@dcrackel/hematournamentui 1.0.715 → 1.0.716

package/src/stories/Organisms/Cards/WaitlistFencerCard/WaitlistFencerCard.vue

@@ -1,153 +1,180 @@
-<template>
-  <div
-    v-if="person"
-    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright"
-  >
-    <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
-      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold" />
-    </div>
-    <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
-      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold" />
-    </div>
-
-    <div class="hidden md:block mr-4">
-      <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold" />
-      </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl" />
-    </div>
-
-    <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
-      <div class="flex items-center justify-start gap-2 min-w-0">
-        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
-          <BaseText
-            :text="displayName"
-            size="md"
-            color="quaternary"
-            weight="bold"
-            class="text-sm md:text-xl truncate"
-          />
-        </button>
-        <MissingHemaRatingsId :person="person.Person" />
-      </div>
-      <span class="w-full flex justify-start">
-        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block" />
-        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden" />
-      </span>
-
-      <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
-        <div class="flex">
-          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1" />
-          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1" />
-        </div>
-        <div class="flex">
-          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1" />
-          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1" />
-        </div>
-      </div>
-    </div>
-
-    <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
-      <div class="flex">
-        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
-        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5" />
-      </div>
-      <div class="flex">
-        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
-        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold" />
-      </div>
-    </div>
-
-    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
-      <div class="flex justify-center w-20">
-        <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
-          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold" />
-        </div>
-      </div>
-      <div class="w-44 flex justify-end">
-        <BaseButton
-          label="Move to Active"
-          size="xs"
-          type="primary"
-          icon-name="fa-arrow-up-from-bracket"
-          class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
-          @buttonClick="handleMoveToActive"
-        />
-      </div>
-    </div>
-
-    <div
-      class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6"
-    >
-      <BaseIcon
-        icon-name="fa-circle-xmark"
-        size=""
-        color="quinary"
-        hover="alarm"
-        @click="handleRemoveFencer"
-        class="text-md md:text-2xl"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
-
-export default {
-  name: 'WaitlistFencerCard',
-  components: { BaseButton, BaseIcon, BaseText, MissingHemaRatingsId },
-  emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
-  props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    queuePosition: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    queueLabel() {
-      return `#${this.queuePosition}`;
-    },
-    displayName() {
-      return this.person?.Person?.DisplayName || 'Unknown fencer';
-    },
-    clubName() {
-      return this.person?.Person?.Club?.Name || 'No club listed';
-    },
-    clubShortName() {
-      return this.person?.Person?.Club?.ShortName || this.clubName;
-    },
-    portraitURL() {
-      const images = this.person?.Person?.Images || [];
-      const portrait = images.find(image => image.Type === 'Portrait');
-      return portrait ? portrait.URL : '';
-    },
-    HEMARating() {
-      const rating = this.person?.Person?.HEMARatings?.[0]?.Rating;
-      return rating || 0;
-    },
-    M2Rating() {
-      const rating = this.person?.Person?.M2Ratings?.[0]?.Rating;
-      return rating || 'U';
-    }
-  },
-  methods: {
-    handleMoveToActive() {
-      this.$emit('move:active', { ...this.person });
-    },
-    handleRemoveFencer() {
-      this.$emit('remove:fencer', { ...this.person });
-    },
-    handleForwardToProfile() {
-      this.$emit('forward:toProfile', this.person.PersonId);
-    }
-  }
-};
-</script>
+<template>
+  <div
+    v-if="person"
+    class="flex flex-wrap items-center gap-3 rounded-lg border border-dropdownSelect bg-poolBox py-3 pl-3 shadow-lg hover:border-bright md:flex-nowrap"
+  >
+    <div class="w-8 shrink-0 border-r border-dropdownSelect pr-3 text-center">
+      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold" />
+    </div>
+    <div class="hidden shrink-0 lg:block">
+      <div v-if="!portraitURL" class="flex h-14 w-14 items-center justify-center rounded-xl bg-dropdownSelect"></div>
+      <img v-else :src="portraitURL" alt="Portrait" class="h-14 w-14 rounded-xl" />
+    </div>
+
+    <div class="min-w-0 flex-1 basis-40 text-left">
+      <div class="flex min-w-0 items-center gap-2">
+        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
+          <BaseText
+            :text="displayName"
+            size="md"
+            color="quaternary"
+            weight="bold"
+            class="break-words text-sm md:text-xl"
+          />
+        </button>
+        <MissingHemaRatingsId :person="person.Person" />
+      </div>
+      <BaseText :text="clubName" size="sm" color="quinary" class="hidden md:block" />
+      <BaseText :text="clubShortName" size="xs" color="quinary" class="md:hidden" />
+      <div class="mt-2 flex flex-wrap items-center gap-2 text-xs" aria-live="polite">
+        <span class="rounded px-2 py-1 font-semibold" :class="checkInClass">{{ checkInStatus }}</span>
+        <span
+          v-if="isNextCheckedIn && checkedIn"
+          class="rounded bg-eventBoxBlueTwo px-2 py-1 font-semibold text-primary"
+          >Next checked in</span
+        >
+        <span class="text-primaryHighlight">{{ waiverStatus }}</span>
+      </div>
+    </div>
+
+    <div class="hidden shrink-0 text-left xl:block">
+      <BaseText :text="`M2: ${M2Rating}`" size="xs" color="quinary" />
+      <BaseText :text="`HR: ${HEMARating}`" size="xs" color="quinary" />
+    </div>
+
+    <div class="flex w-full flex-wrap items-center justify-end gap-y-2 md:ml-auto md:w-auto md:shrink-0">
+      <div class="mr-2 flex items-center gap-2">
+        <span
+          class="hidden rounded border border-dropdownSelect px-2 py-1 text-xs font-bold text-quinary lg:inline-flex"
+          >Unpaid</span
+        >
+        <BaseButton
+          label="Move to Active"
+          size="xs"
+          type="primary"
+          icon-name="fa-arrow-up-from-bracket"
+          class="m-0! min-h-10"
+          @buttonClick="handleMoveToActive"
+        />
+      </div>
+      <div class="mr-2 flex w-44 shrink-0 justify-end md:mr-4">
+        <BaseButton
+          v-if="needsWaiver"
+          label="Sign Waiver"
+          size="xs"
+          type="primary"
+          class="m-0! h-10 w-40 p-0!"
+          @buttonClick="requestWeaverSign"
+        />
+        <ButtonBar
+          v-else
+          :buttons="attendanceButtons"
+          :selected="selectedAttendance"
+          class="mr-1 min-h-10"
+          @update:selected="handleAttendance"
+        />
+      </div>
+      <button
+        type="button"
+        :aria-label="`Remove ${displayName} from waitlist`"
+        class="flex min-h-10 w-9 shrink-0 items-center justify-center border-l border-dropdownSelect text-quinary hover:bg-eventBoxRed focus-visible:outline-2 focus-visible:outline-bright md:ml-4 md:w-10"
+        @click="handleRemoveFencer"
+      >
+        <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quinary" hover="alarm" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
+import { isWaitlistCheckedIn, needsAttendanceWaiver } from '../../../Util/waitlistAttendance.js';
+
+export default {
+  name: 'WaitlistFencerCard',
+  components: { BaseButton, ButtonBar, BaseIcon, BaseText, MissingHemaRatingsId },
+  emits: ['forward:toProfile', 'move:active', 'remove:fencer', 'update:check-in', 'request:weaver-sign'],
+  props: {
+    person: { type: Object, required: true },
+    queuePosition: { type: Number, required: true },
+    isNextCheckedIn: { type: Boolean, default: false }
+  },
+  computed: {
+    queueLabel() {
+      return `#${this.queuePosition}`;
+    },
+    displayName() {
+      return this.person?.Person?.DisplayName || 'Unknown fencer';
+    },
+    clubName() {
+      return this.person?.Person?.Club?.Name || 'No club listed';
+    },
+    clubShortName() {
+      return this.person?.Person?.Club?.ShortName || this.clubName;
+    },
+    portraitURL() {
+      const images = this.person?.Person?.Images || [];
+      return images.find(image => image.Type === 'Portrait')?.URL || '';
+    },
+    HEMARating() {
+      return this.person?.Person?.HEMARatings?.[0]?.Rating || 0;
+    },
+    M2Rating() {
+      return this.person?.Person?.M2Ratings?.[0]?.Rating || 'U';
+    },
+    checkedIn() {
+      return isWaitlistCheckedIn(this.person);
+    },
+    needsWaiver() {
+      return needsAttendanceWaiver(this.person);
+    },
+    checkInStatus() {
+      return this.checkedIn ? 'Checked in' : 'Not checked in';
+    },
+    attendanceButtons() {
+      return [
+        { id: 'Absent', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlueTwo' },
+        { id: 'Present', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreenTwo' }
+      ];
+    },
+    selectedAttendance() {
+      return this.checkedIn ? 'Present' : 'Absent';
+    },
+    checkInClass() {
+      return this.checkedIn ? 'bg-acceptedHighlight text-accepted' : 'bg-dropdownSelect text-primaryHighlight';
+    },
+    waiverStatus() {
+      if (this.needsWaiver) return 'Waiver needed';
+      return this.person?.Person?.Weaver?.Required ? 'Waiver signed' : 'No waiver required';
+    }
+  },
+  methods: {
+    clonePerson() {
+      return JSON.parse(JSON.stringify(this.person));
+    },
+    requestWeaverSign() {
+      this.$emit('request:weaver-sign', this.clonePerson());
+    },
+    handleAttendance(selected) {
+      if (selected === 'Present' && this.needsWaiver) {
+        this.requestWeaverSign();
+        return;
+      }
+      this.$emit('update:check-in', { ...this.clonePerson(), CheckedIn: selected === 'Present' });
+    },
+    handleMoveToActive() {
+      this.$emit('move:active', this.clonePerson());
+    },
+    handleRemoveFencer() {
+      this.$emit('remove:fencer', this.clonePerson());
+    },
+    handleForwardToProfile() {
+      this.$emit('forward:toProfile', this.person.PersonId ?? this.person.Person?.PersonId);
+    }
+  }
+};
+</script>

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.stories.js

@@ -43,7 +43,7 @@ export default {
   },
   argTypes: {
     personsInTournament: {
-      control: { type: 'array' },
+      control: { type: 'object' },
       description: 'List of persons in the tournament',
       table: {
         type: { summary: 'Array' },
@@ -51,7 +51,7 @@ export default {
       }
     },
     personsAll: {
-      control: { type: 'array' },
+      control: { type: 'object' },
       description: 'List of all persons',
       table: {
         type: { summary: 'Array' },
@@ -59,7 +59,7 @@ export default {
       }
     },
     fencingClubs: {
-      control: { type: 'array' },
+      control: { type: 'object' },
       description: 'List of clubs',
       table: {
         type: { summary: 'Array' },
@@ -117,6 +117,38 @@ export const WithWaitlist = {
   }
 };
 
+export const WaitlistCheckIn = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Waitlisted fencers sign the waiver, then use Absent/Present to check in without joining the active roster. Move to Active remains available to fill a no-show spot. The parent handles update:waitlist-check-in ({ ...person, CheckedIn }), weaver:sign, and move:waitlist-to-active, then supplies updated personsInTournament. Status stays Waitlist until the parent promotes the fencer.'
+      }
+    }
+  },
+  args: {
+    ...WithWaitlist.args,
+    personsInTournament: [
+      {
+        ...activeRoster[0],
+        Status: 'Absent',
+        Person: {
+          ...activeRoster[0].Person,
+          Weaver: { Required: true, Scope: 'Tournament', Signed: true }
+        }
+      },
+      ...waitlistedPersons.map((person, index) => ({
+        ...person,
+        CheckedIn: index === 2,
+        Person: {
+          ...person.Person,
+          Weaver: { Required: true, Scope: 'Tournament', Signed: index !== 0 }
+        }
+      }))
+    ]
+  }
+};
+
 export const RegistrationOpen = {
   args: {
     personsInTournament: eventPersonGetEventById.persons,

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.test.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import EventAttendance from './EventAttendance.vue';
+import WaitlistFencerCard from '../../../Organisms/Cards/WaitlistFencerCard/WaitlistFencerCard.vue';
+import ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+
+const createPerson = (id, status) => ({
+  PersonId: id,
+  Status: status,
+  CheckedIn: false,
+  WaitlistPosition: id,
+  Person: {
+    DisplayName: `Fencer ${id}`,
+    Weaver: { Required: true, Scope: 'Tournament', Signed: true }
+  }
+});
+
+const mountAttendance = personsInTournament =>
+  mount(EventAttendance, {
+    props: { event: { Status: 'preparation' }, personsInTournament },
+    shallow: true,
+    global: { stubs: { WaitlistFencerCard: false, ButtonBar: false, BaseButton: false, BaseText: false } }
+  });
+
+describe('Waitlist attendance intent', () => {
+  it('keeps check-in separate from promotion into a no-show spot', async () => {
+    const absent = createPerson(1, 'Absent');
+    const waiting = createPerson(2, 'Waitlist');
+    const wrapper = mountAttendance([absent, waiting]);
+    const card = wrapper.getComponent(WaitlistFencerCard);
+
+    await card.getComponent(ButtonBar).findAll('section')[1].trigger('click');
+    const checkedIn = wrapper.emitted('update:waitlist-check-in')[0][0];
+    expect(checkedIn).toEqual({ ...waiting, CheckedIn: true });
+    expect(wrapper.emitted('update:person')).toBeUndefined();
+    expect(wrapper.emitted('move:waitlist-to-active')).toBeUndefined();
+
+    await wrapper.setProps({ personsInTournament: [absent, checkedIn] });
+    expect(wrapper.text()).toContain('1 waiting · 1 checked in');
+    expect(wrapper.getComponent(WaitlistFencerCard).text()).toContain('Next checked in');
+    const promote = card.findAll('button').find(button => button.text() === 'Move to Active');
+    await promote.trigger('click');
+    expect(wrapper.emitted('move:waitlist-to-active')[0][0]).toEqual(checkedIn);
+    expect(waiting.Status).toBe('Waitlist');
+
+    await wrapper.setProps({ personsInTournament: [absent, { ...checkedIn, Status: 'Present' }] });
+    expect(wrapper.findComponent(WaitlistFencerCard).exists()).toBe(false);
+    expect(wrapper.findAllComponents({ name: 'FencerCard' })).toHaveLength(2);
+    wrapper.unmount();
+  });
+
+  it('confirms a waitlisted waiver through the existing modal without changing roster status', async () => {
+    const waiting = createPerson(2, 'Waitlist');
+    waiting.Person.Weaver.Signed = false;
+    const wrapper = mountAttendance([waiting]);
+    const sign = wrapper
+      .getComponent(WaitlistFencerCard)
+      .findAll('button')
+      .find(button => button.text() === 'Sign Waiver');
+
+    await sign.trigger('click');
+    const modal = wrapper.getComponent({ name: 'BaseModal' });
+    expect(modal.props('show')).toBe(true);
+    modal.vm.$emit('submitModal');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('weaver:sign')[0][0]).toEqual(waiting);
+    expect(wrapper.emitted('weaver:sign')[0][0].Person).not.toBe(waiting.Person);
+    expect(waiting.Person.Weaver.Signed).toBe(false);
+    expect(wrapper.emitted('update:waitlist-check-in')).toBeUndefined();
+    expect(modal.props('show')).toBe(false);
+    wrapper.unmount();
+  });
+});