@dcrackel/hematournamentui 1.0.712 → 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');
+  });
+});