@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/Containers/PoolResults/PoolResultsTable.vue

@@ -5,28 +5,41 @@
         <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon" />
         <div class="w-full flex justify-center">
           <div class="w-96">
-        <BaseText text="No Results Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
-        <BaseText text="Pool results will be displayed here once all bouts have completed and the 'Generate Pool Results' button has been clicked on the Pools Tab." size="sm" color="quinary" class="text-center" />
+            <BaseText text="No Results Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
+            <BaseText
+              text="Pool results will be displayed here once all bouts have completed and the 'Generate Pool Results' button has been clicked on the Pools Tab."
+              size="sm"
+              color="quinary"
+              class="text-center"
+            />
           </div>
         </div>
       </section>
 
-      <div v-if="shouldShowResults" v-for="(person, index) in results" :key="person.PersonId || person.personId || index" class="flex flex-col py-1">
+      <div
+        v-if="shouldShowResults"
+        v-for="(person, index) in results"
+        :key="person.PersonId || person.personId || index"
+        class="flex flex-col py-1"
+      >
         <FencerPoolResultsCard
-            :isLast="index === results.length - 1"
-            :person="person"
-            :status="event.Status"
-            :promotedBy="promotedBy"
-            :handShots="hasHandShotCount"
-            :doubles="hasDoubleCount"
-            :role="role"
-            @remove:person="handleWithdraw"
-            @update:moveUp="moveFencerDESeedUp"
-            @update:moveDown="moveFencerDESeedDown"
+          :isLast="index === results.length - 1"
+          :person="person"
+          :status="event.Status"
+          :promotedBy="promotedBy"
+          :handShots="hasHandShotCount"
+          :doubles="hasDoubleCount"
+          :role="role"
+          @remove:person="handleWithdraw"
+          @update:moveUp="moveFencerDESeedUp"
+          @update:moveDown="moveFencerDESeedDown"
         />
 
         <!-- Draggable Line -->
-        <div v-if="shouldShowBar(index)" class="relative flex justify-center p-0.5 mt-4 mb-2 border border-dropdownSelect rounded-lg">
+        <div
+          v-if="shouldShowBar(index)"
+          class="relative flex justify-center p-0.5 mt-4 mb-2 border border-dropdownSelect rounded-lg"
+        >
           <div class="flex flex-row w-1/2 justify-around">
             <BaseIcon icon-name="fa-circle-arrow-up" size="2xl" color="quinary" hover="bright" @click="moveUp" />
             <BaseText text="Promotion to Direct Elimination Cut Off" size="md" color="quinary" class="pt-1" />
@@ -39,16 +52,49 @@
 </template>
 
 <script>
-import FencerPoolResultsCard from "../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import FencerPoolResultsCard from '../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+
+const groupPeopleByPool = people => {
+  const pools = new Map();
+  people.forEach(person => {
+    const poolPeople = pools.get(person.PoolId) || [];
+    pools.set(person.PoolId, [...poolPeople, person]);
+  });
+  return pools;
+};
+
+const getTopPromotionByPerson = (people, numPromoted) => {
+  const promotionByPerson = new Map();
+  groupPeopleByPool(people).forEach(poolPeople => {
+    [...poolPeople]
+      .sort((personA, personB) => personA.Position - personB.Position)
+      .forEach((person, index) => promotionByPerson.set(person, index < numPromoted));
+  });
+  return promotionByPerson;
+};
+
+const applyTopPromotions = (people, numPromoted) => {
+  const promotionByPerson = getTopPromotionByPerson(people, numPromoted);
+  return people.map(person => ({ ...person, Promoted: promotionByPerson.get(person) }));
+};
+
+const applyCutoffPromotions = (people, cutoffIndex) =>
+  people.map((person, index) => ({ ...person, Promoted: index < cutoffIndex + 1 }));
 
 export default {
-  name: "PoolResultsTable",
-  emits: ['update:handleDecreaseCount', 'update:handleIncreaseCount', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
+  name: 'PoolResultsTable',
+  emits: [
+    'update:handleDecreaseCount',
+    'update:handleIncreaseCount',
+    'update:moveFencerDESeedDown',
+    'update:moveFencerDESeedUp',
+    'update:withdraw'
+  ],
   components: {
-    BaseText,
+    BaseText,
     BaseIcon,
     FencerPoolResultsCard,
     emptyDesertIcon
@@ -82,38 +128,38 @@ export default {
   },
   data() {
     return {
-      results: this.clonePoolResults(this.poolResults),
-      cutoffIndex: this.initialCutoffIndex,
+      results: this.clonePoolResults(this.poolResults),
+      cutoffIndex: this.initialCutoffIndex,
       emptyDesertIcon
-    }
+    };
   },
-  watch: {
-    poolResults: {
-      deep: true,
-      immediate: true,
-      handler(newResults) {
-        this.results = this.clonePoolResults(newResults);
-        this.updatePromotions();
-      }
-    },
-    initialCutoffIndex(newValue) {
-      this.cutoffIndex = newValue - 1;
-      this.updatePromotions();
-    },
-    numPromoted() {
-      this.updatePromotions();
-    },
-    promotedBy() {
-      this.updatePromotions();
-    },
+  watch: {
+    poolResults: {
+      deep: true,
+      immediate: true,
+      handler(newResults) {
+        this.results = this.clonePoolResults(newResults);
+        this.updatePromotions();
+      }
+    },
+    initialCutoffIndex(newValue) {
+      this.cutoffIndex = newValue - 1;
+      this.updatePromotions();
+    },
+    numPromoted() {
+      this.updatePromotions();
+    },
+    promotedBy() {
+      this.updatePromotions();
+    }
   },
   computed: {
     shouldShowResults() {
-      return this.event.Status && ["live", "results", "de", "completed"].includes(this.event.Status.toLowerCase());
+      return this.event.Status && ['live', 'results', 'de', 'completed'].includes(this.event.Status.toLowerCase());
     },
     hasHandShotCount() {
       const hasCountHandShot = this.event.EventRules.find(rule => rule.Rules.RuleName === 'CountHandshots');
-      return hasCountHandShot ? hasCountHandShot.RuleValue === 'true': false;
+      return hasCountHandShot ? hasCountHandShot.RuleValue === 'true' : false;
     },
     hasDoubleCount() {
       const hasCountDoubles = this.event.EventRules.find(rule => rule.Rules.RuleName === 'CountDoubles');
@@ -140,44 +186,32 @@ export default {
     },
     updatePromotions() {
       if (this.promotedBy === 'Top') {
-        const pools = this.results.reduce((acc, person) => {
-          if (!acc[person.PoolId]) acc[person.PoolId] = [];
-          acc[person.PoolId].push(person);
-          return acc;
-        }, {});
-
-        Object.values(pools).forEach(poolFencers => {
-          poolFencers.sort((a, b) => a.Position - b.Position);
-          poolFencers.forEach((person, index) => {
-            person.Promoted = index < this.numPromoted;
-          });
-        });
+        this.results = applyTopPromotions(this.results, this.numPromoted);
         return;
       }
 
-      this.results.forEach((person, index) => {
-        person.Promoted = index < this.cutoffIndex+1;
-      });
+      this.results = applyCutoffPromotions(this.results, this.cutoffIndex);
     },
     handleWithdraw(person) {
       this.$emit('update:withdraw', person);
     },
     shouldShowBar(index) {
-      return index === this.cutoffIndex && this.cutoffIndex > 0 && this.cutoffIndex < this.results.length - 1 && this.event.Status === 'results';
+      return (
+        index === this.cutoffIndex &&
+        this.cutoffIndex > 0 &&
+        this.cutoffIndex < this.results.length - 1 &&
+        this.event.Status === 'results'
+      );
     },
     moveFencerDESeedUp(person) {
       this.$emit('update:moveFencerDESeedUp', person);
     },
-    moveFencerDESeedDown(person) {
-      this.$emit('update:moveFencerDESeedDown', person);
-    },
-    clonePoolResults(poolResults) {
-      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
-    }
-  }
-}
+    moveFencerDESeedDown(person) {
+      this.$emit('update:moveFencerDESeedDown', person);
+    },
+    clonePoolResults(poolResults) {
+      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
+    }
+  }
+};
 </script>
-
-
-
-

package/src/stories/Organisms/Containers/Tableau/Tableau.stories.js

@@ -2,33 +2,32 @@ import Tableau from './Tableau.vue';
 import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 
 export default {
-    title: 'Organisms/Containers/Tableau',
-    component: Tableau,
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts,
-        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        hostingClubColors: getDEWithBouts.hostingClubColors
+  title: 'Organisms/Containers/Tableau',
+  component: Tableau,
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts,
+    bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+    hostingClubColors: getDEWithBouts.hostingClubColors
+  },
+  argTypes: {
+    bouts: {
+      control: 'array',
+      description: 'Array of bracket objects to display'
     },
-    argTypes: {
-        bouts: {
-            control: 'array',
-            description: 'Array of bracket objects to display',
-        },
-        bracketSize: {
-            control: 'string',
-            description: 'sets spacing for bracket connector lines',
-        },
-        hostingClubColors: {
-            control: 'object'
-        }
+    bracketSize: {
+      control: 'string',
+      description: 'sets spacing for bracket connector lines'
+    },
+    hostingClubColors: {
+      control: 'object'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts,
-        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-    }
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts,
+    bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+    hostingClubColors: getDEWithBouts.hostingClubColors
+  }
 };
-

package/src/stories/Organisms/Containers/Tableau/Tableau.test.js

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import BoutCard from '../../Cards/BoutCard/BoutCard.vue';
+import TableauColumn from '../TableauColumn/TableauColumn.vue';
 import Tableau from './Tableau.vue';
 
 const bout = {
@@ -9,18 +10,19 @@ const bout = {
   RoundLabel: 'Final',
   Status: 'Scheduled',
   Person1: { PersonId: 1, DisplayName: 'Fencer One' },
-  Person2: { PersonId: 2, DisplayName: 'Fencer Two' },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two' }
 };
 
-const mountListView = () => shallowMount(Tableau, {
-  props: {
-    bouts: [bout],
-    bracketSize: 'Final',
-    hostingClubColors: {},
-    largeCards: true,
-    listView: true,
-  },
-});
+const mountListView = () =>
+  shallowMount(Tableau, {
+    props: {
+      bouts: [bout],
+      bracketSize: 'Final',
+      hostingClubColors: {},
+      largeCards: true,
+      listView: true
+    }
+  });
 
 describe('Tableau list view', () => {
   it('enables bout interaction and emits the full bout when starting', async () => {
@@ -34,4 +36,41 @@ describe('Tableau list view', () => {
 
     expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
   });
+
+  it('routes active bout resume through the directing event', async () => {
+    const activeBout = { ...bout, Status: 'Active' };
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [activeBout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        largeCards: true,
+        listView: true
+      }
+    });
+
+    wrapper.findComponent(BoutCard).vm.$emit('action:resumeBout', { BoutId: activeBout.BoutId });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[activeBout]]);
+  });
+});
+
+describe('Tableau bracket view', () => {
+  it('routes a scheduled tableau bout through the same directing event', async () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [bout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        largeCards: true,
+        listView: false
+      }
+    });
+
+    wrapper.findComponent(TableauColumn).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+  });
 });