@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,61 +1,61 @@
 import EditBout from './EditBout.vue';
 import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
-import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
 
 export default {
-    title: 'Organisms/Cards/EditBout',
-    component: EditBout,
-    tags: ['autodocs'],
-    args: {
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules
+  title: 'Organisms/Cards/EditBout',
+  component: EditBout,
+  tags: ['autodocs'],
+  args: {
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     },
-    argTypes: {
-        bout: {
-            control: 'object'
-        },
-        hostingClubColors: {
-            control: 'object'
-        },
-        eventRules: {
-            control: 'object'
-        }
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules
+  },
+  argTypes: {
+    bout: {
+      control: 'object'
+    },
+    hostingClubColors: {
+      control: 'object'
+    },
+    eventRules: {
+      control: 'object'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        bout: getPoolsWithBouts[0],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules
-    }
+  args: {
+    bout: getPoolsWithBouts[0],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules
+  }
 };
 
 export const Scheduled = {
-    args: {
-        bout: getPoolsWithBouts[4],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules
-    }
-}
+  args: {
+    bout: getPoolsWithBouts[4],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules
+  }
+};
 
 export const Completed = {
-    args: {
-        bout: getPoolsWithBouts[2],
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules
-    }
-}
+  args: {
+    bout: getPoolsWithBouts[2],
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules
+  }
+};

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
 };