@dcrackel/hematournamentui 1.0.710 → 1.0.712

package/dist/hematournamentui-tailwind.css

@@ -530,6 +530,9 @@
   .ml-5 {
     margin-left: calc(var(--spacing) * 5);
   }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
   .ml-9 {
     margin-left: calc(var(--spacing) * 9);
   }
@@ -1049,6 +1052,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .self-end {
     align-self: flex-end;
   }
@@ -2396,6 +2402,11 @@
       flex-wrap: nowrap;
     }
   }
+  .md\:items-stretch {
+    @media (width >= 48rem) {
+      align-items: stretch;
+    }
+  }
   .md\:justify-start {
     @media (width >= 48rem) {
       justify-content: flex-start;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.710",
+  "version": "1.0.712",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/stories/Molecules/Indicators/RegistrationStatus/RegistrationStatus.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="statusLabel" class="inline-flex items-center gap-2 whitespace-nowrap">
+    <span class="sr-only">Registration status:</span>
+    <BaseIcon icon-name="fa-info-circle" size="xs" color="quaternary" aria-hidden="true" />
+    <BaseText :text="statusLabel" size="xs" color="quaternary" />
+  </div>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+import { getRegistrationStatusLabel } from '../../../Util/registrationStatus.js';
+
+export default {
+  name: 'RegistrationStatus',
+  components: { BaseIcon, BaseText },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    statusLabel() {
+      return getRegistrationStatusLabel(this.status);
+    }
+  }
+};
+</script>

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' } }
+      ]
+    }
+  }
 };

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')}`;

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

@@ -57,7 +57,7 @@
     </div>
 
     <div class="hidden md:block mr-4">
-      <div v-if="!portraitURL" class="w-14 h-14 r ounded-xl bg-dropdownSelect flex items-center justify-center">
+      <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" />

package/src/stories/Organisms/Headers/AttendanceSummary/AttendanceSummary.vue

@@ -7,11 +7,10 @@
       <BaseText :text="event.RuleSummary" size="" color="quinary" weight="normal" class="text-xs md:text-md" />
       <span class="hidden md:h-8"></span>
     </section>
-    <section class="hidden md:flex flex-col">
-      <div class="flex justify-center items-center">
-        <BaseText text="Fencer Counts" size="sm" color="quinary" />
-      </div>
-      <div class="flex flex-row flex-nowrap">
+    <section class="flex flex-col items-start md:items-stretch">
+      <BaseText :text="fencerCountHeading" size="sm" color="quinary" class="hidden md:block text-center" />
+      <BaseText :text="registrationStatusLabel" size="xs" color="quaternary" class="md:hidden" />
+      <div class="hidden md:flex flex-row flex-nowrap">
         <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
         <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
         <EventStatusBox
@@ -35,6 +34,7 @@
 import EventStatusBox from '../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue';
 import CounterBox from '../../../Molecules/Boxes/CounterBox/CounterBox.vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
+import { getRegistrationStatusLabel } from '../../../Util/registrationStatus.js';
 
 export default {
   name: 'AttendanceSummary',
@@ -69,6 +69,13 @@ export default {
     }
   },
   computed: {
+    registrationStatusLabel() {
+      return getRegistrationStatusLabel(this.event.RegistrationStatus ?? this.event.Status);
+    },
+    fencerCountHeading() {
+      if (!this.registrationStatusLabel) return 'Fencing Count';
+      return `Fencing Count - ${this.registrationStatusLabel}`;
+    },
     showRosterCounts() {
       return this.activeCount !== '' || this.waitlistCount !== '';
     },

package/src/stories/Organisms/Wizards/EditEventWizard/BasicEventInfo/BasicEventInfo.stories.js

@@ -46,3 +46,7 @@ export const InvalidPrice = {
     }
   }
 };
+
+export const WaitlistDisabled = {
+  args: { ...Default.args, eventConfig: { ...eventConfig, CutOffNumber: 32, WaitlistEnabled: false } }
+};