@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,103 +1,103 @@
-<template>
-  <button
-    v-if="isAddCard"
-    type="button"
-    data-testid="add-bracket-director"
-    class="flex min-h-20 w-full items-center justify-center gap-3 rounded-lg border-2 border-dashed border-dropdownSelect bg-white px-4 py-3 text-left transition hover:border-bright hover:shadow-md focus-visible:border-bright focus-visible:outline-none"
-    @click="$emit('action:add')"
-  >
-    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-bannerBackground" aria-hidden="true">
-      <BaseIcon iconName="fa-plus" color="primaryHighlight" size="sm" />
-    </span>
-    <BaseText :text="addLabel" color="primaryHighlight" size="sm" weight="bold" />
-  </button>
-
-  <article
-    v-else-if="station"
-    data-testid="bracket-director-assignment"
-    class="flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-md border border-poolSetup bg-white px-3 py-2 shadow-sm hover:border-bright"
-    :aria-label="assignmentLabel"
-  >
-    <div class="relative h-12 w-12 flex-none">
-      <img
-        v-if="portraitUrl"
-        :src="portraitUrl"
-        :alt="`${directorName} portrait`"
-        class="h-12 w-12 rounded-xl object-cover"
-      />
-      <div
-        v-else
-        data-testid="director-initials"
-        class="flex h-12 w-12 items-center justify-center rounded-xl bg-dropdownSelect"
-        aria-hidden="true"
-      >
-        <BaseText :text="directorInitials" color="primaryHighlight" size="sm" weight="bold" />
-      </div>
-      <span
-        data-testid="director-color-dot"
-        class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full ring-2 ring-white"
-        :style="{ backgroundColor: station.Color }"
-        aria-hidden="true"
-      ></span>
-    </div>
-
-    <div class="min-w-0 flex-1">
-      <BaseText :text="ringLabel" color="quaternary" size="xs" />
-      <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
-    </div>
-  </article>
-</template>
-
-<script>
-import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-
-const getInitials = displayName =>
-  String(displayName || '')
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map(name => name[0].toUpperCase())
-    .join('');
-
-export default {
-  name: 'BracketDirectorAssignmentCard',
-  components: { BaseIcon, BaseText },
-  emits: ['action:add'],
-  props: {
-    station: {
-      type: Object,
-      default: null
-    },
-    variant: {
-      type: String,
-      default: 'assigned',
-      validator: value => ['assigned', 'add'].includes(value)
-    },
-    addLabel: {
-      type: String,
-      default: 'Click here to add director'
-    }
-  },
-  computed: {
-    assignmentLabel() {
-      return `${this.ringLabel}, Director ${this.directorName}`;
-    },
-    directorInitials() {
-      return getInitials(this.directorName) || '?';
-    },
-    directorName() {
-      return this.station?.Director?.DisplayName || 'Director TBD';
-    },
-    isAddCard() {
-      return this.variant === 'add';
-    },
-    portraitUrl() {
-      return this.station?.Director?.PortraitUrl || '';
-    },
-    ringLabel() {
-      return this.station?.RingName || `Ring ${this.station?.RingId ?? ''}`.trim();
-    }
-  }
-};
-</script>
+<template>
+  <button
+    v-if="isAddCard"
+    type="button"
+    data-testid="add-bracket-director"
+    class="flex min-h-20 w-full items-center justify-center gap-3 rounded-lg border-2 border-dashed border-dropdownSelect bg-white px-4 py-3 text-left transition hover:border-bright hover:shadow-md focus-visible:border-bright focus-visible:outline-none"
+    @click="$emit('action:add')"
+  >
+    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-bannerBackground" aria-hidden="true">
+      <BaseIcon iconName="fa-plus" color="primaryHighlight" size="sm" />
+    </span>
+    <BaseText :text="addLabel" color="primaryHighlight" size="sm" weight="bold" />
+  </button>
+
+  <article
+    v-else-if="station"
+    data-testid="bracket-director-assignment"
+    class="flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-md border border-poolSetup bg-white px-3 py-2 shadow-sm hover:border-bright"
+    :aria-label="assignmentLabel"
+  >
+    <div class="relative h-12 w-12 flex-none">
+      <img
+        v-if="portraitUrl"
+        :src="portraitUrl"
+        :alt="`${directorName} portrait`"
+        class="h-12 w-12 rounded-xl object-cover"
+      />
+      <div
+        v-else
+        data-testid="director-initials"
+        class="flex h-12 w-12 items-center justify-center rounded-xl bg-dropdownSelect"
+        aria-hidden="true"
+      >
+        <BaseText :text="directorInitials" color="primaryHighlight" size="sm" weight="bold" />
+      </div>
+      <span
+        data-testid="director-color-dot"
+        class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full ring-2 ring-white"
+        :style="{ backgroundColor: station.Color }"
+        aria-hidden="true"
+      ></span>
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <BaseText :text="ringLabel" color="quaternary" size="xs" />
+      <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
+    </div>
+  </article>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const getInitials = displayName =>
+  String(displayName || '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(name => name[0].toUpperCase())
+    .join('');
+
+export default {
+  name: 'BracketDirectorAssignmentCard',
+  components: { BaseIcon, BaseText },
+  emits: ['action:add'],
+  props: {
+    station: {
+      type: Object,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'assigned',
+      validator: value => ['assigned', 'add'].includes(value)
+    },
+    addLabel: {
+      type: String,
+      default: 'Click here to add director'
+    }
+  },
+  computed: {
+    assignmentLabel() {
+      return `${this.ringLabel}, Director ${this.directorName}`;
+    },
+    directorInitials() {
+      return getInitials(this.directorName) || '?';
+    },
+    directorName() {
+      return this.station?.Director?.DisplayName || 'Director TBD';
+    },
+    isAddCard() {
+      return this.variant === 'add';
+    },
+    portraitUrl() {
+      return this.station?.Director?.PortraitUrl || '';
+    },
+    ringLabel() {
+      return this.station?.RingName || `Ring ${this.station?.RingId ?? ''}`.trim();
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/Director/DirectorCard.test.js

@@ -0,0 +1,82 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import DirectorCard from './DirectorCard.vue';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import ScoreBox from '../../../Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue';
+import eventRules from '../../../../mocks/eventRules.js';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+const createProps = rules => ({
+  bout: structuredClone(getPoolsWithBouts[0]),
+  eventRules: rules,
+  hostingClubColors: { Color1: 'red', Color2: 'blue' }
+});
+
+const poolRules = [
+  { RuleName: 'PoolTime', RuleValue: '120' },
+  { RuleName: 'PoolMaxPoints', RuleValue: '5' },
+  { RuleName: 'PoolNumOfPasses', RuleValue: '4' },
+  { RuleName: 'PoolScoreDirection', RuleValue: 'false' },
+  { RuleName: 'CountHandshots', RuleValue: 'true' },
+  { RuleName: 'PenaltiesReset', RuleValue: 'true' }
+];
+
+describe('DirectorCard event rules', () => {
+  it.each([
+    ['flat', poolRules],
+    ['nested', poolRules.map(({ RuleName, RuleValue }) => ({ Rules: { RuleName }, RuleValue }))],
+    ['mixed with invalid entries', [null, undefined, {}, { Rules: null }, ...poolRules]]
+  ])('applies %s rules without crashing', (name, rules) => {
+    const props = createProps(rules);
+    const originalBout = structuredClone(props.bout);
+    const wrapper = shallowMount(DirectorCard, { props });
+    expect(wrapper.vm.timeLeft).toBe(120);
+    expect(wrapper.vm.maxPoints).toBe(5);
+    expect(wrapper.vm.maxPasses).toBe(4);
+    expect(wrapper.vm.showPassesBox).toBe(true);
+    expect(wrapper.vm.showTimerBox).toBe(true);
+    expect(wrapper.vm.showHandShotCounterBox).toBe(true);
+    expect(wrapper.vm.penaltiesReset).toBe(true);
+    expect(wrapper.findComponent(ScoreBox).props('isCountingUp')).toBe(false);
+    expect(wrapper.emitted('update:bout')[0][0]).toMatchObject({
+      Status: 'Scheduled',
+      TimeLeft: 120,
+      IsCountingUp: false,
+      MaxPoints: 5
+    });
+    expect(props.bout).toEqual(originalBout);
+    wrapper.unmount();
+  });
+
+  it.each([undefined, null, [], [null, undefined, {}, { Rules: {} }]])(
+    'uses defaults for missing or invalid rules: %j',
+    rules => {
+      const wrapper = shallowMount(DirectorCard, { props: createProps(rules) });
+      expect(wrapper.vm.timeLeft).toBe(180);
+      expect(wrapper.vm.maxPoints).toBe(7);
+      expect(wrapper.vm.maxPasses).toBe(7);
+      expect(wrapper.vm.isCountingUp).toBe(true);
+      expect(wrapper.vm.showTimerBox).toBe(false);
+      expect(wrapper.vm.showPassesBox).toBe(false);
+      expect(wrapper.vm.showHandShotCounterBox).toBe(false);
+      expect(wrapper.vm.penaltiesReset).toBe(false);
+      wrapper.unmount();
+    }
+  );
+
+  it('opens the real modal with Storybook rules and preserves scores on close', async () => {
+    const props = createProps(eventRules);
+    const wrapper = mount(DirectorModal, { props: { ...props, show: false } });
+    await wrapper.setProps({ show: true });
+    expect(wrapper.findComponent(DirectorCard).exists()).toBe(true);
+    wrapper.findComponent(ScoreBox).vm.$emit('update:Score', 3);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(DirectorCard).vm.localBout.Score1).toBe(3);
+    expect(wrapper.emitted('update:bout').at(-1)[0]).toMatchObject({ Score1: 3, Status: 'Scheduled' });
+    await wrapper.get('[data-testid="director-modal-backdrop"]').trigger('click');
+    expect(wrapper.emitted('update:closeModal')).toEqual([[props.bout]]);
+    expect(wrapper.findComponent(DirectorCard).vm.localBout.Score1).toBe(3);
+    expect(props.bout.Score1).toBe(0);
+    wrapper.unmount();
+  });
+});

package/src/stories/Organisms/Cards/Director/DirectorCard.vue

@@ -36,6 +36,14 @@
       @update:HandShotValue="updateHandShot2"
     />
 
+    <BaseText
+      v-if="bout?.RefName"
+      :text="bout.RefName"
+      size="sm"
+      color="quaternary"
+      class="mt-3 text-center wrap-break-word"
+    />
+
     <div class="w-11/12 mt-5 mx-6">
       <BaseButton label="Submit" type="grayAndBlue" :selected="showSubmit" @buttonClick="submitBout" />
     </div>
@@ -59,6 +67,7 @@ import PassesBox from '../../../Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vu
 import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 import PenaltyConfirmationBox from '../../../Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox/PenaltyConfirmationBox.vue';
 import PenaltyModal from '../../../Molecules/Modals/PenaltyModal/PenaltyModal.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 const scoreReachedByDirection = {
   true: (bout, maxPoints) => bout.Score1 === maxPoints || bout.Score2 === maxPoints,
@@ -102,7 +111,7 @@ const cloneBout = bout => ({
 
 export default {
   name: 'DirectorCard',
-  components: { PenaltyModal, PenaltyConfirmationBox, ScoreBox, TimerBox, PassesBox, BaseButton },
+  components: { PenaltyModal, PenaltyConfirmationBox, ScoreBox, TimerBox, PassesBox, BaseButton, BaseText },
   emits: ['penalty:remove', 'penalty:add', 'penalty:update', 'submit:bout', 'update:bout'],
   props: {
     eventRules: Array,
@@ -116,7 +125,6 @@ export default {
       showPenaltyConfirmationBox: false,
       fencer1ForModal: true,
       localBout: cloneBout(this.bout),
-      isCountingUp: true,
       lastNote1: '',
       lastNote2: '',
       timeLeft: 180,
@@ -126,7 +134,6 @@ export default {
   },
   mounted() {
     this.initTime();
-    this.determineCountingDirection();
     this.emitBout();
   },
   beforeUnmount() {
@@ -136,77 +143,51 @@ export default {
     RingName() {
       return this.localBout.Pool?.RingName || 'Ring';
     },
+    isCountingUp() {
+      const rule = this.findEventRule('PoolScoreDirection');
+      return rule ? rule.RuleValue === 'true' : true;
+    },
     showPassesBox() {
       return (
-        Array.isArray(this.eventRules) &&
         !this.showPenaltyConfirmationBox &&
-        (this.eventRules.some(n2 => n2.Rules.RuleName === 'PoolNumOfPasses') ||
-          this.eventRules.some(n2 => n2.Rules.RuleName === 'DENumOfPasses'))
+        Boolean(this.findEventRule('PoolNumOfPasses') || this.findEventRule('DENumOfPasses'))
       );
     },
     showTimerBox() {
       return (
-        Array.isArray(this.eventRules) &&
-        !this.showPenaltyConfirmationBox &&
-        (this.eventRules.some(n2 => n2.Rules.RuleName === 'PoolTime') ||
-          this.eventRules.some(n2 => n2.Rules.RuleName === 'DETime'))
+        !this.showPenaltyConfirmationBox && Boolean(this.findEventRule('PoolTime') || this.findEventRule('DETime'))
       );
     },
     showHandShotCounterBox() {
-      return (
-        Array.isArray(this.eventRules) &&
-        this.eventRules.some(n2 => n2.Rules.RuleName === 'CountHandshots' && n2.RuleValue === 'true')
-      );
+      return this.findEventRule('CountHandshots')?.RuleValue === 'true';
     },
     penaltiesReset() {
-      return (
-        Array.isArray(this.eventRules) &&
-        this.eventRules.some(n2 => n2.Rules.RuleName === 'PenaltiesReset' && n2.RuleValue === 'true')
-      );
+      return this.findEventRule('PenaltiesReset')?.RuleValue === 'true';
     },
     maxPoints() {
-      if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DEMaxPoints') : null;
-        return e ? parseInt(e.RuleValue) : 7;
-      }
-
-      const n2 = Array.isArray(this.eventRules)
-        ? this.eventRules.find(e => e.Rules.RuleName === 'PoolMaxPoints')
-        : null;
-      return n2 ? parseInt(n2.RuleValue) : 7;
+      const ruleName = this.localBout.DEBoutId ? 'DEMaxPoints' : 'PoolMaxPoints';
+      const rule = this.findEventRule(ruleName);
+      return rule ? parseInt(rule.RuleValue) : 7;
     },
     maxPasses() {
-      if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DEMaxPasses') : null;
-        return e ? parseInt(e.RuleValue) : 7;
-      }
-
-      const n2 = Array.isArray(this.eventRules)
-        ? this.eventRules.find(e => e.Rules.RuleName === 'PoolNumOfPasses')
-        : null;
-      return n2 ? parseInt(n2.RuleValue) : 7;
+      const ruleName = this.localBout.DEBoutId ? 'DEMaxPasses' : 'PoolNumOfPasses';
+      const rule = this.findEventRule(ruleName);
+      return rule ? parseInt(rule.RuleValue) : 7;
     }
   },
   methods: {
+    findEventRule(ruleName) {
+      if (!Array.isArray(this.eventRules)) return undefined;
+      return this.eventRules.find(rule => (rule?.Rules?.RuleName ?? rule?.RuleName) === ruleName);
+    },
     initTime() {
       const saved = Number(this.bout?.TimeLeft);
-      // use saved if > 0, otherwise default from rules
-      this.timeLeft = Number.isFinite(saved) && saved > 0 ? saved : this.startTime(); // your DE/Pool rule lookup
+      this.timeLeft = Number.isFinite(saved) && saved > 0 ? saved : this.startTime();
     },
     startTime() {
-      if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DETime') : null;
-        return e ? parseInt(e.RuleValue) : 180;
-      }
-
-      const n2 = Array.isArray(this.eventRules) ? this.eventRules.find(e => e.Rules.RuleName === 'PoolTime') : null;
-      return n2 ? parseInt(n2.RuleValue) : 180;
-    },
-    determineCountingDirection() {
-      if (Array.isArray(this.eventRules)) {
-        const rule = this.eventRules.find(rule => rule.Rules.RuleName === 'PoolScoreDirection');
-        this.isCountingUp = rule ? rule.RuleValue === 'true' : true;
-      }
+      const ruleName = this.localBout.DEBoutId ? 'DETime' : 'PoolTime';
+      const rule = this.findEventRule(ruleName);
+      return rule ? parseInt(rule.RuleValue) : 180;
     },
     toggleTimer() {
       if (this.timerRunning) {

package/src/stories/Organisms/Cards/EditBout/EditBout.test.js

@@ -1,51 +1,51 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import ToggleSwitch from '../../../Molecules/Inputs/Toggle/Toggle.vue';
-import EditBout from './EditBout.vue';
-
-const createBout = () => ({
-  BoutId: 42,
-  DEBoutId: null,
-  Status: 'Completed',
-  Score1: 4,
-  Score2: 3,
-  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
-  Person2: { PersonId: 2, DisplayName: 'Fencer Two' }
-});
-
-const mountEditBout = bout =>
-  shallowMount(EditBout, {
-    props: {
-      bout,
-      hostingClubColors: {},
-      eventRules: [{ Rules: { RuleName: 'PoolMaxPoints' }, RuleValue: '7' }]
-    }
-  });
-
-describe('EditBout intent', () => {
-  it('submits edited values without changing lifecycle fields', () => {
-    const bout = createBout();
-    const wrapper = mountEditBout(bout);
-
-    wrapper.vm.plus(true);
-    wrapper.vm.submitBout();
-
-    const submittedBout = wrapper.emitted('submit:bout')[0][0];
-    expect(submittedBout).toMatchObject({ Status: 'Completed', Score1: 5, Score2: 3 });
-    expect(submittedBout.Ended).toBeUndefined();
-    expect(bout.Score1).toBe(4);
-  });
-
-  it('emits make-active intent without setting Status', async () => {
-    const bout = createBout();
-    const wrapper = mountEditBout(bout);
-
-    wrapper.findComponent(ToggleSwitch).vm.$emit('update:checked', true);
-    await wrapper.vm.$nextTick();
-    wrapper.vm.submitBout();
-
-    expect(wrapper.emitted('submit:bout')).toBeUndefined();
-    expect(wrapper.emitted('request:bout-active')).toEqual([[bout]]);
-    expect(bout.Status).toBe('Completed');
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import ToggleSwitch from '../../../Molecules/Inputs/Toggle/Toggle.vue';
+import EditBout from './EditBout.vue';
+
+const createBout = () => ({
+  BoutId: 42,
+  DEBoutId: null,
+  Status: 'Completed',
+  Score1: 4,
+  Score2: 3,
+  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two' }
+});
+
+const mountEditBout = bout =>
+  shallowMount(EditBout, {
+    props: {
+      bout,
+      hostingClubColors: {},
+      eventRules: [{ Rules: { RuleName: 'PoolMaxPoints' }, RuleValue: '7' }]
+    }
+  });
+
+describe('EditBout intent', () => {
+  it('submits edited values without changing lifecycle fields', () => {
+    const bout = createBout();
+    const wrapper = mountEditBout(bout);
+
+    wrapper.vm.plus(true);
+    wrapper.vm.submitBout();
+
+    const submittedBout = wrapper.emitted('submit:bout')[0][0];
+    expect(submittedBout).toMatchObject({ Status: 'Completed', Score1: 5, Score2: 3 });
+    expect(submittedBout.Ended).toBeUndefined();
+    expect(bout.Score1).toBe(4);
+  });
+
+  it('emits make-active intent without setting Status', async () => {
+    const bout = createBout();
+    const wrapper = mountEditBout(bout);
+
+    wrapper.findComponent(ToggleSwitch).vm.$emit('update:checked', true);
+    await wrapper.vm.$nextTick();
+    wrapper.vm.submitBout();
+
+    expect(wrapper.emitted('submit:bout')).toBeUndefined();
+    expect(wrapper.emitted('request:bout-active')).toEqual([[bout]]);
+    expect(bout.Status).toBe('Completed');
+  });
+});

package/src/stories/Organisms/Cards/EventCard/EventCard.stories.js

@@ -5,6 +5,14 @@ export default {
   title: 'Organisms/Cards/EventCard',
   component: EventCard,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'RegistrationStatus accepts open, waitlist, full, or closed from the consuming app. The icon tray displays a status icon and the current state using existing theme colors. These values are also supported in Status when RegistrationStatus is absent. Missing or unknown values hide the status indicator. Lifecycle Status values such as live and completed continue to control existing behavior.'
+      }
+    }
+  },
   args: {
     event: singleEventMock
   },
@@ -12,5 +20,37 @@ export default {
 };
 
 export const Default = {
-  event: singleEventMock
+  args: { event: singleEventMock }
+};
+
+export const Open = {
+  args: { event: { ...singleEventMock, Status: 'registration', RegistrationStatus: 'open' } }
+};
+
+export const Waitlist = {
+  args: { event: { ...singleEventMock, Status: 'registration', RegistrationStatus: 'waitlist' } }
+};
+
+export const Full = {
+  args: { event: { ...singleEventMock, Status: 'registration', RegistrationStatus: 'full' } }
+};
+
+export const Closed = {
+  args: { event: { ...singleEventMock, RegistrationStatus: 'closed' } }
+};
+
+export const MissingSettings = {
+  args: { event: { ...singleEventMock, EventRules: [] } }
+};
+
+export const InvalidSavedLimit = {
+  args: {
+    event: {
+      ...singleEventMock,
+      EventRules: [
+        ...singleEventMock.EventRules.filter(rule => rule.RuleId !== 14),
+        { RuleId: 14, RuleValue: 'function link() { [native code] }', Rules: { RuleName: 'CutOffNumber' } }
+      ]
+    }
+  }
 };