@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -0,0 +1,106 @@
+import { afterEach, expect, it } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import EventCard from './EventCard.vue';
+
+const wrappers = [];
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+const nativeFunction = 'function link() { [native code] }';
+
+function rule(RuleName, RuleValue) {
+  return { Rules: { RuleName }, RuleValue };
+}
+
+function mountCard(overrides = {}) {
+  const wrapper = shallowMount(EventCard, {
+    props: {
+      event: {
+        EventName: 'Example Event',
+        Date: '2026-10-17',
+        StartTime: '12:00',
+        Present: '8',
+        Absent: '0',
+        EventRules: [],
+        ...overrides
+      }
+    },
+    global: { stubs: { BaseText: { props: ['text'], template: '<span>{{ text }}</span>' } } }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+it.each([
+  [32, '32'],
+  ['32', '32'],
+  [0, 'Unlimited'],
+  ['0', 'Unlimited'],
+  [null, 'Unlimited'],
+  ['', 'Unlimited'],
+  [nativeFunction, 'Not set']
+])('renders the fencer limit %j as %s', (value, expected) => {
+  const wrapper = mountCard({ EventRules: [rule('CutOffNumber', value)] });
+  expect(wrapper.vm.getMaxFencers).toBe(expected);
+  expect(wrapper.text()).not.toContain('[native code]');
+});
+
+it('handles missing rules without crashing or inventing an elimination format', () => {
+  const wrapper = mountCard({ EventRules: undefined });
+  expect(wrapper.vm.getMaxFencers).toBe('Unlimited');
+  expect(wrapper.vm.eventSummary).toBe('Event settings not available');
+  expect(wrapper.vm.getCombinedNumberOfFencers).toBe('8 / Unlimited');
+});
+
+it('keeps the phase, time, point and fencer summaries for nested and flat API rules', () => {
+  const EventRules = [
+    rule('PoolTime', '90'),
+    rule('DETime', '180'),
+    rule('PoolMaxPoints', '7'),
+    rule('DEMaxPoints', '12'),
+    rule('DEType', 'single'),
+    rule('DE3rdFenceOff', true),
+    rule('CutOffNumber', '32')
+  ];
+  for (const event of [
+    { EventRules },
+    {
+      EventRules: undefined,
+      rules: EventRules.map(item => ({ RuleName: item.Rules.RuleName, RuleValue: item.RuleValue }))
+    }
+  ]) {
+    const wrapper = mountCard(event);
+    expect(wrapper.vm.eventSummary).toBe('Pools -> Single Elim -> 3rd Place Fence off');
+    expect(wrapper.vm.getMaxPoolPoints).toBe('7');
+    expect(wrapper.vm.getMaxDEPoints).toBe('12');
+    expect(wrapper.vm.getCombinedNumberOfFencers).toBe('8 / 32');
+    expect(wrapper.text().match(/1:30/g)).toHaveLength(2);
+    expect(wrapper.text().match(/3:00/g)).toHaveLength(2);
+  }
+});
+
+it('renders pass-based pools and double elimination correctly', () => {
+  const wrapper = mountCard({
+    EventRules: [
+      rule('PoolNumOfPasses', '5'),
+      rule('DENumOfPasses', '7'),
+      rule('DEType', 'double'),
+      rule('DE3rdFenceOff', 'false')
+    ]
+  });
+  expect(wrapper.vm.eventSummary).toBe('Pools -> Double Elim -> Tie for 3rd Place');
+  expect(wrapper.vm.getPoolBoutTimeOrPasses).toBe('5');
+  expect(wrapper.vm.getDEBoutTimeOrPasses).toBe('7');
+});
+
+it('marks corrupted stored values as unset instead of displaying function text or guessing a format', () => {
+  const wrapper = mountCard({
+    EventRules: ['CutOffNumber', 'PoolTime', 'PoolMaxPoints', 'DETime', 'DEMaxPoints', 'DEType'].map(name =>
+      rule(name, nativeFunction)
+    )
+  });
+  expect(wrapper.text()).not.toContain('[native code]');
+  expect(wrapper.text()).not.toContain('NaN');
+  expect(wrapper.vm.eventSummary).toContain('DE format not set');
+  expect(wrapper.vm.getMaxFencers).toBe('Not set');
+  expect(wrapper.vm.getPoolBoutTimeOrPasses).toBe('Not set');
+  expect(wrapper.vm.getMaxDEPoints).toBe('Not set');
+});

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

@@ -6,7 +6,7 @@
     <div class="w-full flex flex-col md:flex-row justify-between">
       <section class="flex flex-row px-1 justify-start w-full">
         <div class="flex flex-col w-full">
-          <div class="hidden md:flex mb-1">
+          <div class="hidden md:flex flex-wrap items-center gap-y-1 mb-1">
             <div class="flex">
               <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
               <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
@@ -19,6 +19,7 @@
               <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mx-2" />
               <BaseText :text="getMaxFencers" size="xs" color="quinary" class="text-right" />
             </div>
+            <RegistrationStatus :status="event.RegistrationStatus ?? event.Status" class="ml-6" />
           </div>
 
           <BaseText
@@ -31,12 +32,17 @@
           <BaseText :text="eventSummary" size="xs" color="quaternary" class="text-left" />
 
           <div class="flex flex-col md:hidden pt-2">
-            <div class="flex">
-              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
-              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
-              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left ml-1" />
-              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mr-2 ml-4" />
-              <BaseText :text="getCombinedNumberOfFencers" size="xs" color="quinary" class="text-right" />
+            <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+              <div class="flex items-center whitespace-nowrap">
+                <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
+                <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
+                <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left ml-1" />
+              </div>
+              <div class="flex items-center whitespace-nowrap">
+                <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mr-2" />
+                <BaseText :text="getCombinedNumberOfFencers" size="xs" color="quinary" class="text-right" />
+              </div>
+              <RegistrationStatus :status="event.RegistrationStatus ?? event.Status" />
             </div>
 
             <div class="flex flex-row mt-3 w-full">
@@ -49,7 +55,7 @@
                   </div>
                   <div class="flex w-full">
                     <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2" />
-                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
+                    <BaseText :text="getPoolBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
                   </div>
                 </div>
               </div>
@@ -151,10 +157,11 @@ import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 import EventStatusBox from '../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue';
 import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
+import RegistrationStatus from '../../../Molecules/Indicators/RegistrationStatus/RegistrationStatus.vue';
 
 export default {
   name: 'EventCard',
-  components: { BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText },
+  components: { RegistrationStatus, BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText },
   emits: ['manage', 'edit', 'delete'],
   props: {
     event: {
@@ -168,54 +175,72 @@ export default {
     };
   },
   computed: {
+    eventRules() {
+      const rules = this.event.EventRules ?? this.event.rules;
+      return Array.isArray(rules) ? rules.filter(rule => rule && typeof rule === 'object') : [];
+    },
     eventSummary() {
-      const rules = this.event.EventRules;
+      const rules = this.eventRules;
+      if (rules.length === 0) return 'Event settings not available';
 
-      const poolRule = rules.find(rule => rule.Rules.RuleName === 'PoolTime');
-      const deType = rules.find(rule => rule.Rules.RuleName === 'DEType');
-      const deThirdFenceOff = rules.find(rule => rule.Rules.RuleName === 'DE3rdFenceOff');
+      const poolRule = rules.find(rule =>
+        ['PoolTime', 'PoolNumOfPasses', 'PoolMaxPoints', 'PoolSeeding'].includes(rule.Rules?.RuleName ?? rule.RuleName)
+      );
+      const deType = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'DEType');
+      const deThirdFenceOff = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'DE3rdFenceOff');
 
       const poolSummary = poolRule ? 'Pools' : '';
-      const deSummary = deType?.RuleValue === 'single' ? 'Single Elim' : 'Double Elim';
+      const deSummary =
+        new Map([
+          ['single', 'Single Elim'],
+          ['double', 'Double Elim']
+        ]).get(deType?.RuleValue) ?? 'DE format not set';
       const thirdPlaceSummary =
-        deThirdFenceOff && deThirdFenceOff.RuleValue === 'true' ? '3rd Place Fence off' : 'Tie for 3rd Place';
+        new Map([
+          ['true', '3rd Place Fence off'],
+          ['false', 'Tie for 3rd Place']
+        ]).get(String(deThirdFenceOff?.RuleValue)) ?? '';
 
       return [poolSummary, deSummary, thirdPlaceSummary].filter(Boolean).join(' -> ');
     },
     getMaxFencers() {
-      const maxRule = this.event.EventRules.find(rule => rule.Rules.RuleName === 'CutOffNumber');
-      return maxRule.RuleValue === 0 ? 'Unlimited' : maxRule.RuleValue;
+      const maxRule = this.eventRules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'CutOffNumber');
+      const value = maxRule?.RuleValue;
+      if (value == null || value === '') return 'Unlimited';
+      const limit = Number(value);
+      if (!Number.isSafeInteger(limit) || limit < 0) return 'Not set';
+      return limit === 0 ? 'Unlimited' : String(limit);
     },
     getCombinedNumberOfFencers() {
-      const combined = this.event.Present + this.event.Absent;
+      const combined = Number(this.event.Present ?? 0) + Number(this.event.Absent ?? 0);
       return combined + ' / ' + this.getMaxFencers;
     },
     getMaxPoolPoints() {
-      const maxRule = this.event.EventRules.find(rule => rule.Rules.RuleName === 'PoolMaxPoints');
-      return maxRule ? maxRule.RuleValue : '';
+      const maxRule = this.eventRules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'PoolMaxPoints');
+      return maxRule ? this.formatRuleNumber(maxRule.RuleValue) : '';
     },
     getMaxDEPoints() {
-      const maxRule = this.event.EventRules.find(rule => rule.Rules.RuleName === 'DEMaxPoints');
-      return maxRule ? maxRule.RuleValue : '';
+      const maxRule = this.eventRules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'DEMaxPoints');
+      return maxRule ? this.formatRuleNumber(maxRule.RuleValue) : '';
     },
     getPoolBoutTimeOrPasses() {
-      const rules = this.event.EventRules;
+      const rules = this.eventRules;
 
-      const poolTimeRule = rules.find(rule => rule.Rules.RuleName === 'PoolTime');
-      const passesRule = rules.find(rule => rule.Rules.RuleName === 'PoolNumOfPasses');
+      const poolTimeRule = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'PoolTime');
+      const passesRule = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'PoolNumOfPasses');
 
       if (poolTimeRule) return this.formatTime(poolTimeRule.RuleValue);
-      if (passesRule) return passesRule.RuleValue;
+      if (passesRule) return this.formatRuleNumber(passesRule.RuleValue);
       return '';
     },
     getDEBoutTimeOrPasses() {
-      const rules = this.event.EventRules;
+      const rules = this.eventRules;
 
-      const DETimeRule = rules.find(rule => rule.Rules.RuleName === 'DETime');
-      const passesRule = rules.find(rule => rule.Rules.RuleName === 'DENumOfPasses');
+      const DETimeRule = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'DETime');
+      const passesRule = rules.find(rule => (rule.Rules?.RuleName ?? rule.RuleName) === 'DENumOfPasses');
 
       if (DETimeRule) return this.formatTime(DETimeRule.RuleValue);
-      if (passesRule) return passesRule.RuleValue;
+      if (passesRule) return this.formatRuleNumber(passesRule.RuleValue);
       return '';
     }
   },
@@ -234,7 +259,14 @@ export default {
     handleSubmit() {
       this.$emit('delete', this.event);
     },
+    formatRuleNumber(value) {
+      if (value == null || value === '') return '';
+      const number = Number(value);
+      return Number.isFinite(number) && number >= 0 ? String(number) : 'Not set';
+    },
     formatTime(seconds) {
+      if (seconds == null || seconds === '' || !Number.isFinite(Number(seconds)) || Number(seconds) < 0)
+        return 'Not set';
       const minutes = Math.floor(seconds / 60);
       const remainingSeconds = seconds % 60;
       return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;