@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -0,0 +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');
+  });
+});

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

@@ -1,6 +1,6 @@
 <template>
   <div class="-m-6 mb-4 ml-4">
-    <ToggleSwitch :checked="makeActive" label="Make Active" @change="changeActive" />
+    <ToggleSwitch :checked="makeActive" label="Make Active" @update:checked="handleMakeActiveChange" />
   </div>
   <div class="flex items-center justify-between rounded-lg m-4">
     <!-- Fencer 1 -->
@@ -8,17 +8,31 @@
       <div class="flex space-x-4 items-center">
         <div>
           <div :class="`w-4 h-4 rounded-full bg-${computedColor(true)} absolute top-10 left-11`"></div>
-          <img :src="fencer1.portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          <img :src="fencer1.portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
         </div>
         <div>
-          <BaseText :text="fencer1.name" size="md" color="primary" weight="bold"/>
-          <BaseText :text="fencer1.team" size="sm" color="quaternary"/>
+          <BaseText :text="fencer1.name" size="md" color="primary" weight="bold" />
+          <BaseText :text="fencer1.team" size="sm" color="quaternary" />
         </div>
       </div>
       <div class="flex w-1/4 justify-between">
-        <BaseIcon icon-name="fa-square-minus" size="4xl" :color="computedColor(true)" hover="quaternary" :disabled="fencer1Score <= 0" @click="minus(true)" />
-        <BaseText :text="fencer1Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`"/>
-        <BaseIcon icon-name="fa-square-plus" size="4xl" :color="computedColor(true)" hover="quaternary" :disabled="fencer1Score >= maxPoints" @click="plus(true)" />
+        <BaseIcon
+          icon-name="fa-square-minus"
+          size="4xl"
+          :color="computedColor(true)"
+          hover="quaternary"
+          :disabled="fencer1Score <= 0"
+          @click="minus(true)"
+        />
+        <BaseText :text="fencer1Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`" />
+        <BaseIcon
+          icon-name="fa-square-plus"
+          size="4xl"
+          :color="computedColor(true)"
+          hover="quaternary"
+          :disabled="fencer1Score >= maxPoints"
+          @click="plus(true)"
+        />
       </div>
     </div>
 
@@ -26,18 +40,32 @@
     <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-1/2 ml-4">
       <div class="flex space-x-4 justify-between w-full">
         <div class="flex w-1/4 justify-between">
-          <BaseIcon icon-name="fa-square-minus" size="4xl" :color="computedColor(false)" hover="quaternary" :disabled="fencer2Score <= 0" @click="minus(false)" />
-          <BaseText :text="fencer2Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`"/>
-          <BaseIcon icon-name="fa-square-plus" size="4xl" :color="computedColor(false)" hover="quaternary" :disabled="fencer2Score >= maxPoints" @click="plus(false)" />
+          <BaseIcon
+            icon-name="fa-square-minus"
+            size="4xl"
+            :color="computedColor(false)"
+            hover="quaternary"
+            :disabled="fencer2Score <= 0"
+            @click="minus(false)"
+          />
+          <BaseText :text="fencer2Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`" />
+          <BaseIcon
+            icon-name="fa-square-plus"
+            size="4xl"
+            :color="computedColor(false)"
+            hover="quaternary"
+            :disabled="fencer2Score >= maxPoints"
+            @click="plus(false)"
+          />
         </div>
         <div class="flex space-x-4 items-center">
           <div>
-            <BaseText :text="fencer2.name" size="md" color="primary" weight="bold" class="text-right"/>
-            <BaseText :text="fencer2.team" size="sm" color="quaternary" class="text-right"/>
+            <BaseText :text="fencer2.name" size="md" color="primary" weight="bold" class="text-right" />
+            <BaseText :text="fencer2.team" size="sm" color="quaternary" class="text-right" />
           </div>
           <div>
             <div :class="`w-4 h-4 rounded-full bg-${computedColor(false)} absolute top-10 right-12`"></div>
-            <img :src="fencer2.portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="fencer2.portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
           </div>
         </div>
       </div>
@@ -46,17 +74,27 @@
 
   <div class="w-full flex justify-center mt-5">
     <div class="w-1/2">
-      <BaseButton  label="Submit" type="grayAndBlue" :selected="true" @buttonClick="submitBout"/>
+      <BaseButton label="Submit" type="grayAndBlue" :selected="true" @buttonClick="submitBout" />
     </div>
   </div>
 </template>
 
 <script>
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import missingPortrait from "../../../../assets/portrait1.png";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import ToggleSwitch from "../../../Molecules/Inputs/Toggle/Toggle.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import missingPortrait from '../../../../assets/portrait1.png';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import ToggleSwitch from '../../../Molecules/Inputs/Toggle/Toggle.vue';
+
+const scoreFieldByFencer = {
+  true: 'Score1',
+  false: 'Score2'
+};
+
+const submitEventByActiveSelection = {
+  true: 'request:bout-active',
+  false: 'submit:bout'
+};
 
 export default {
   components: {
@@ -72,19 +110,19 @@ export default {
     },
     hostingClubColors: {
       type: Object,
-      required: true,
+      required: true
     },
     eventRules: {
-      type: Object,
-      required: true,
+      type: Array,
+      required: true
     },
     isCountingBackwardsMaxScore: {
       type: Number,
       default: 0
     }
   },
-  emits: ['submit:bout', 'update:bout'],
-  data(){
+  emits: ['request:bout-active', 'submit:bout'],
+  data() {
     return {
       missingPortrait,
       localBout: { ...this.bout },
@@ -95,7 +133,7 @@ export default {
     fencer1() {
       const person1 = this.localBout.Person1 || {};
       return {
-        portrait: (person1.Images && person1.Images.length) ? person1.Images[0].URL : this.missingPortrait,
+        portrait: person1.Images && person1.Images.length ? person1.Images[0].URL : this.missingPortrait,
         name: person1.DisplayName || 'Unknown',
         team: (person1.Club && person1.Club.Name) || 'Unknown',
         score: this.localBout.Score1
@@ -104,7 +142,7 @@ export default {
     fencer2() {
       const person2 = this.localBout.Person2 || {};
       return {
-        portrait: (person2.Images && person2.Images.length) ? person2.Images[0].URL : this.missingPortrait,
+        portrait: person2.Images && person2.Images.length ? person2.Images[0].URL : this.missingPortrait,
         name: person2.DisplayName || 'Unknown',
         team: (person2.Club && person2.Club.Name) || 'Unknown',
         score: this.localBout.Score2
@@ -124,48 +162,38 @@ export default {
     },
     maxPoints() {
       if (this.localBout.DEBoutId) {
-        const rule = this.eventRules.find(rule => rule.Rules.RuleName === "DEMaxPoints");
+        const rule = this.eventRules.find(rule => rule.Rules.RuleName === 'DEMaxPoints');
         return rule ? rule.RuleValue : 7;
       }
-      const rule = this.eventRules.find(rule => rule.Rules.RuleName === "PoolMaxPoints");
+      const rule = this.eventRules.find(rule => rule.Rules.RuleName === 'PoolMaxPoints');
       return rule ? rule.RuleValue : 7;
     }
   },
   methods: {
     minus(isFencer1) {
-      if (isFencer1) {
-        if (this.localBout.Score1 > 0) {
-          this.localBout.Score1--;
-        }
-      } else {
-        if (this.localBout.Score2 > 0) {
-          this.localBout.Score2--;
-        }
-      }
+      this.adjustScore(isFencer1, -1);
     },
     plus(isFencer1) {
-      if (isFencer1) {
-        if (this.localBout.Score1 < this.maxPoints) {
-          this.localBout.Score1++;
-        }
-      } else {
-        if (this.localBout.Score2 < this.maxPoints) {
-          this.localBout.Score2++;
-        }
-      }
+      this.adjustScore(isFencer1, 1);
     },
-    changeActive() {
-      this.makeActive = !this.makeActive;
+    adjustScore(isFencer1, amount) {
+      const scoreField = scoreFieldByFencer[String(isFencer1)];
+      const currentScore = Number(this.localBout[scoreField] || 0);
+      const nextScore = Math.min(Number(this.maxPoints), Math.max(0, currentScore + amount));
+      this.localBout = { ...this.localBout, [scoreField]: nextScore };
+    },
+    handleMakeActiveChange(makeActive) {
+      this.makeActive = makeActive;
     },
     computedColor(fencer1) {
-      return fencer1 ? (this.hostingClubColors.Color1?.toLowerCase() || 'red') : (this.hostingClubColors.Color2?.toLowerCase() || 'blue');
+      return fencer1
+        ? this.hostingClubColors.Color1?.toLowerCase() || 'red'
+        : this.hostingClubColors.Color2?.toLowerCase() || 'blue';
     },
     submitBout() {
-      if (this.makeActive) {
-        this.localBout.Status = 'Active';
-      }
-      this.$emit('submit:bout', this.localBout);
+      const eventName = submitEventByActiveSelection[String(this.makeActive)];
+      this.$emit(eventName, { ...this.localBout });
     }
   }
-}
+};
 </script>

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

@@ -1,17 +1,16 @@
 import EventCard from './EventCard.vue';
-import singleEventMock from "../../../../mocks/singleEventMock.js";
+import singleEventMock from '../../../../mocks/singleEventMock.js';
 
 export default {
-    title: 'Organisms/Cards/EventCard',
-    component: EventCard,
-    tags: ['autodocs'],
-    args: {
-        event: singleEventMock
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Cards/EventCard',
+  component: EventCard,
+  tags: ['autodocs'],
+  args: {
+    event: singleEventMock
+  },
+  argTypes: {}
 };
 
 export const Default = {
-    event: singleEventMock
+  event: singleEventMock
 };

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

@@ -1,140 +1,160 @@
 <template>
-  <div class="flex items-center p-2 md:px-4 md:py-4 bg-eventBoxBlue md:bg-white border border-dropdownSelect rounded-lg md:shadow-md w-full mb-6 hover:border-bright" @click="onManage">
+  <div
+    class="flex items-center p-2 md:px-4 md:py-4 bg-eventBoxBlue md:bg-white border border-dropdownSelect rounded-lg md:shadow-md w-full mb-6 hover:border-bright"
+    @click="onManage"
+  >
     <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="flex">
-              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2"/>
-              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left"/>
+              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
+              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
             </div>
             <div class="flex pl-4">
-              <BaseIcon icon-name="fa-clock" size="xs" color="quaternary" class="mx-2"/>
-              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left"/>
+              <BaseIcon icon-name="fa-clock" size="xs" color="quaternary" class="mx-2" />
+              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left" />
             </div>
             <div class="flex pl-4">
-              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mx-2"/>
-              <BaseText :text="getMaxFencers" size="xs" color="quinary" class="text-right"/>
+              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mx-2" />
+              <BaseText :text="getMaxFencers" size="xs" color="quinary" class="text-right" />
             </div>
           </div>
 
-          <BaseText :text="event.EventName" size="" color="quaternary" weight="bold" class="text-left text-md md:text-xl"/>
-          <BaseText :text="eventSummary" size="xs" color="quaternary" class="text-left"/>
+          <BaseText
+            :text="event.EventName"
+            size=""
+            color="quaternary"
+            weight="bold"
+            class="text-left text-md md:text-xl"
+          />
+          <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"/>
+              <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>
 
             <div class="flex flex-row mt-3 w-full">
               <div class="flex flex-col w-1/2 bg-white rounded mr-1.5 pb-2 border">
-                <BaseText text="Pools" size="xs" color="quinary" class="text-center py-1"/>
+                <BaseText text="Pools" size="xs" color="quinary" class="text-center py-1" />
                 <div class="flex w-full">
                   <div class="flex w-full justify-center">
-                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-right" />
                   </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"/>
+                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
                   </div>
                 </div>
               </div>
               <div class="flex flex-col w-1/2 bg-white rounded ml-1.5 pb-2 border">
-                <BaseText text="Direct Elim." size="xs" color="quinary" class="text-center py-1"/>
+                <BaseText text="Direct Elim." size="xs" color="quinary" class="text-center py-1" />
                 <div class="flex w-full">
                   <div class="flex w-full justify-center">
-                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-right" />
                   </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"/>
+                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
           <div class="hidden md:grid grid-cols-2 w-60 gap-1 mt-3">
             <div class="flex flex-col rounded-md bg-eventBoxBlue mt-0.5 p-0.5">
               <div>
-                <BaseText text="Pools" size="xs" color="quinary" class=""/>
+                <BaseText text="Pools" size="xs" color="quinary" class="" />
               </div>
               <div class="flex justify-around w-full px-2 mt-1">
                 <div class="flex">
-                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2"/>
-                  <BaseText :text="getPoolBoutTimeOrPasses" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2" />
+                  <BaseText :text="getPoolBoutTimeOrPasses" size="xs" color="quinary" class="text-left" />
                 </div>
                 <div class="flex">
-                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2"/>
-                  <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2" />
+                  <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-left" />
                 </div>
               </div>
             </div>
 
             <div class="flex flex-col rounded-md bg-eventBoxBlue mt-0.5">
               <div>
-                <BaseText text="Bracket" size="xs" color="quinary" class=""/>
+                <BaseText text="Bracket" size="xs" color="quinary" class="" />
               </div>
               <div class="flex justify-around w-full p-1">
                 <div class="flex">
-                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2 mt-[1px]"/>
-                  <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2 mt-[1px]" />
+                  <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-left" />
                 </div>
                 <div class="flex">
-                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2 mt-[1px]"/>
-                  <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2 mt-[1px]" />
+                  <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-left" />
                 </div>
               </div>
             </div>
           </div>
-
         </div>
       </section>
 
       <!-- right side -->
       <div class="flex flex-col">
         <div class="flex flex-row pb-2 mt-4 md:mt-2">
-          <BaseButton label="Manage" size="" type="primary" @buttonClick="onManage" :class="[event.Status !== 'completed' ? 'w-1/2' : 'w-full', 'text-xs md:text-md']"/>
-          <BaseButton v-if="event.Status !== 'completed'" label="Delete" size="" type="primary" @buttonClick="onDelete" class="w-1/2 text-xs md:text-md"/>
+          <BaseButton
+            label="Manage"
+            size=""
+            type="primary"
+            @buttonClick="onManage"
+            :class="[event.Status !== 'completed' ? 'w-1/2' : 'w-full', 'text-xs md:text-md']"
+          />
+          <BaseButton
+            v-if="event.Status !== 'completed'"
+            label="Delete"
+            size=""
+            type="primary"
+            @buttonClick="onDelete"
+            class="w-1/2 text-xs md:text-md"
+          />
         </div>
         <div class="hidden md:flex flex-row">
-          <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue"/>
-          <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen"/>
+          <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue" />
+          <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen" />
         </div>
       </div>
     </div>
   </div>
   <section>
     <BaseModal
-        headerText="Remove This Event?"
-        bodyText="Pressing Delete will permanently remove this event. This action cannot be undone."
-        buttonText="Delete This Event"
-        iconColor="alarm"
-        iconBackgroundColor="alarmHighlight"
-        iconName="fa-circle-xmark"
-        :show="showModal"
-        @update:show="close"
-        @submitModal="handleSubmit"
+      headerText="Remove This Event?"
+      bodyText="Pressing Delete will permanently remove this event. This action cannot be undone."
+      buttonText="Delete This Event"
+      iconColor="alarm"
+      iconBackgroundColor="alarmHighlight"
+      iconName="fa-circle-xmark"
+      :show="showModal"
+      @update:show="close"
+      @submitModal="handleSubmit"
     />
   </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-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 BaseText from '../../../Atoms/Text/BaseText.vue';
+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';
 
 export default {
   name: 'EventCard',
-  components: {BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText},
+  components: { BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText },
   emits: ['manage', 'edit', 'delete'],
   props: {
     event: {
@@ -145,7 +165,7 @@ export default {
   data() {
     return {
       showModal: false
-    }
+    };
   },
   computed: {
     eventSummary() {
@@ -157,7 +177,8 @@ export default {
 
       const poolSummary = poolRule ? 'Pools' : '';
       const deSummary = deType?.RuleValue === 'single' ? 'Single Elim' : 'Double Elim';
-      const thirdPlaceSummary = deThirdFenceOff && deThirdFenceOff.RuleValue === 'true' ? '3rd Place Fence off' : 'Tie for 3rd Place';
+      const thirdPlaceSummary =
+        deThirdFenceOff && deThirdFenceOff.RuleValue === 'true' ? '3rd Place Fence off' : 'Tie for 3rd Place';
 
       return [poolSummary, deSummary, thirdPlaceSummary].filter(Boolean).join(' -> ');
     },
@@ -165,7 +186,7 @@ export default {
       const maxRule = this.event.EventRules.find(rule => rule.Rules.RuleName === 'CutOffNumber');
       return maxRule.RuleValue === 0 ? 'Unlimited' : maxRule.RuleValue;
     },
-    getCombinedNumberOfFencers(){
+    getCombinedNumberOfFencers() {
       const combined = this.event.Present + this.event.Absent;
       return combined + ' / ' + this.getMaxFencers;
     },
@@ -196,19 +217,19 @@ export default {
       if (DETimeRule) return this.formatTime(DETimeRule.RuleValue);
       if (passesRule) return passesRule.RuleValue;
       return '';
-    },
+    }
   },
   methods: {
     onDelete(event) {
       event.stopPropagation();
-      this.showModal = true
+      this.showModal = true;
     },
     onManage(event) {
       event.stopPropagation();
       this.$emit('manage', this.event);
     },
     close() {
-      this.showModal = false
+      this.showModal = false;
     },
     handleSubmit() {
       this.$emit('delete', this.event);
@@ -225,7 +246,6 @@ export default {
 
       return `${adjustedHours}:${minutes.toString().padStart(2, '0')}${period}`;
     }
-
   }
-}
+};
 </script>