@dcrackel/hematournamentui 1.0.707 → 1.0.708

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

@@ -1,128 +1,80 @@
-<!-- TableauFencerCard.vue -->
-<template>
-  <section
-    class="bg-poolSetup flex rounded-md border"
-    @mouseover="handleHighLight(true)"
-    @mouseout="handleHighLight(false)"
-    :class="[width, highLighted, opacity]"
-  >
-    <!-- Left position -->
-    <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="[`bg-${color}`]">
-      <BaseText :text="position" size="xs" color="neutral" />
-    </div>
-
-    <div class="flex w-full items-center">
-      <!-- Portrait and Name/Club -->
-      <div class="flex w-full">
-        <div v-if="large" class="">
-          <div v-if="!portraitURL" class="w-9 h-9 rounded-r-md 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-9 h-9 rounded-r-md" />
-        </div>
-        <div class="flex flex-col justify-center ml-2">
-          <BaseText
-            :text="name"
-            :size="large ? 'sm' : 'xs'"
-            :weight="large ? 'bold' : 'normal'"
-            color="quaternary"
-            class="truncate text-nowrap overflow-hidden"
-          />
-          <BaseText
-            v-if="club.length > 1 && large"
-            color="quinary"
-            :text="club.substring(0, 28)"
-            size="xs"
-            class="truncate text-nowrap overflow-hidden"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Right position (Score) -->
-    <div class="text-center px-1 w-5 flex items-center justify-center rounded-r-md" :class="scoreColor">
-      <BaseText :text="fencerScore" size="xs" color="neutral" />
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-
-export default {
-  name: 'TableauFencerCard',
-  emits: ['action:highLight'],
-  components: { BaseText },
-  props: {
-    fencer: {
-      type: Object,
-      required: true
-    },
-    score: {
-      type: String,
-      required: true
-    },
-    position: {
-      type: [String, Number],
-      required: true
-    },
-    color: {
-      type: String,
-      required: true
-    },
-    scoreColor: {
-      type: String,
-      required: true
-    },
-    large: {
-      type: Boolean,
-      default: true
-    },
-    highLight: {
-      type: Boolean,
-      default: false
-    },
-    faded: {
-      type: Boolean,
-      default: false
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    portraitURL() {
-      const images = this.fencer.Images || [];
-      const portrait = images.find(image => image.URL);
-      return portrait ? portrait.URL : '';
-    },
-    fencerScore() {
-      const rawScore = this.score;
-      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - rawScore : rawScore;
-    },
-    name() {
-      //if (this.fencer.DisplayName === "BYE") return "";
-      return this.fencer.DisplayName;
-    },
-    club() {
-      if (this.fencer.DisplayName === 'BYE' || this.fencer.DisplayName === '') return '';
-      return this.fencer.Club.Name;
-    },
-    width() {
-      return this.large ? ' w-72' : ' w-40';
-    },
-    highLighted() {
-      return this.highLight ? 'border-bright' : 'border-poolSetup';
-    },
-    opacity() {
-      return this.faded ? 'opacity-60 shadow-md' : 'shadow-xl';
-    }
-  },
-  methods: {
-    handleHighLight(value) {
-      this.$emit('action:highLight', value);
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex h-7 w-40 overflow-hidden border border-poolSetup bg-poolSetup" :class="cornerClass">
+    <div class="flex w-5 shrink-0 items-center justify-center px-1" :class="positionColorClass">
+      <BaseText :text="position" size="xs" color="neutral" />
+    </div>
+
+    <div class="flex min-w-0 flex-1 items-center px-2">
+      <BaseText :text="name" size="xs" color="quaternary" class="truncate whitespace-nowrap" />
+    </div>
+
+    <div class="flex w-7 shrink-0 items-center justify-center border-l border-poolSetup" :class="scoreColor">
+      <BaseText v-if="showScore" :text="displayedScore" size="xs" color="neutral" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const cornerClasses = {
+  none: '',
+  top: 'rounded-t',
+  bottom: 'rounded-b'
+};
+
+export default {
+  name: 'TableauFencerCard',
+  components: { BaseText },
+  props: {
+    fencer: {
+      type: Object,
+      required: true
+    },
+    score: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    scoreColor: {
+      type: String,
+      required: true
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    },
+    corners: {
+      type: String,
+      default: 'none',
+      validator: value => Object.hasOwn(cornerClasses, value)
+    }
+  },
+  computed: {
+    cornerClass() {
+      return cornerClasses[this.corners];
+    },
+    displayedScore() {
+      const score = Number(this.score || 0);
+      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
+    },
+    name() {
+      return String(this.fencer?.DisplayName || '');
+    },
+    positionColorClass() {
+      return this.color ? `bg-${this.color}` : 'bg-dropdownSelect';
+    }
+  }
+};
+</script>

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

@@ -18,9 +18,18 @@
     </div>
 
     <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
-      <button class="flex justify-start overflow-hidden text-left" type="button" @click="handleForwardToProfile">
-        <BaseText :text="displayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-xl truncate" />
-      </button>
+      <div class="flex items-center justify-start gap-2 min-w-0">
+        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
+          <BaseText
+            :text="displayName"
+            size="md"
+            color="quaternary"
+            weight="bold"
+            class="text-sm md:text-xl truncate"
+          />
+        </button>
+        <MissingHemaRatingsId :person="person.Person" />
+      </div>
       <span class="w-full flex justify-start">
         <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block" />
         <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden" />
@@ -86,10 +95,11 @@
 import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
 import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
 
 export default {
   name: 'WaitlistFencerCard',
-  components: { BaseButton, BaseIcon, BaseText },
+  components: { BaseButton, BaseIcon, BaseText, MissingHemaRatingsId },
   emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
   props: {
     person: {

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

@@ -11,12 +11,12 @@ export default {
   },
   argTypes: {
     bouts: {
-      control: 'array',
+      control: 'object',
       description: 'Array of bracket objects to display'
     },
     bracketSize: {
       control: 'string',
-      description: 'sets spacing for bracket connector lines'
+      description: 'Name of the opening bracket round'
     },
     hostingClubColors: {
       control: 'object'

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

@@ -1,5 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
+import getDEWithBouts42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
+import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
+import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
 import BoutCard from '../../Cards/BoutCard/BoutCard.vue';
 import TableauColumn from '../TableauColumn/TableauColumn.vue';
 import Tableau from './Tableau.vue';
@@ -19,7 +22,6 @@ const mountListView = () =>
       bouts: [bout],
       bracketSize: 'Final',
       hostingClubColors: {},
-      largeCards: true,
       listView: true
     }
   });
@@ -44,7 +46,6 @@ describe('Tableau list view', () => {
         bouts: [activeBout],
         bracketSize: 'Final',
         hostingClubColors: {},
-        largeCards: true,
         listView: true
       }
     });
@@ -54,6 +55,35 @@ describe('Tableau list view', () => {
 
     expect(wrapper.emitted('action:directingBout')).toEqual([[activeBout]]);
   });
+
+  it('bubbles the viewer suggestions to the top without removing other scheduled bouts', () => {
+    const viewerBout = { ...bout, BoutId: 43, DEBoutId: 2 };
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [bout, viewerBout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        listView: true,
+        plannedDirectingStations: [
+          {
+            RingId: 7,
+            RingName: 'Ring 7',
+            Color: '#2563eb',
+            Director: { PersonId: 99, DisplayName: 'Viewer Director' }
+          }
+        ],
+        plannedBoutAssignments: [{ DEBoutId: viewerBout.DEBoutId, RingId: 7 }],
+        viewerPersonId: '99'
+      }
+    });
+
+    expect(wrapper.vm.listSections[0]).toMatchObject({
+      key: 'suggested-for-viewer',
+      label: 'Suggested for You',
+      bouts: [viewerBout]
+    });
+    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([viewerBout, bout]);
+  });
 });
 
 describe('Tableau bracket view', () => {
@@ -63,7 +93,6 @@ describe('Tableau bracket view', () => {
         bouts: [bout],
         bracketSize: 'Final',
         hostingClubColors: {},
-        largeCards: true,
         listView: false
       }
     });
@@ -73,4 +102,103 @@ describe('Tableau bracket view', () => {
 
     expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
   });
+
+  it('spaces each rendered round by its actual column depth', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [bout],
+        bracketSize: 'Table of 8',
+        hostingClubColors: {},
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.getRoundLayout(0)).toEqual({ gapPx: 16, padTopPx: 0 });
+    expect(wrapper.vm.getRoundLayout(1)).toEqual({ gapPx: 89, padTopPx: 36.5 });
+    expect(wrapper.vm.getRoundLayout(2)).toEqual({ gapPx: 235, padTopPx: 109.5 });
+  });
+
+  it('orders the current 42-fencer fixture through Table of 8 without a legacy quarterfinal', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEWithBouts42Fencers.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEWithBouts42Fencers.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName]) => roundName)).toEqual([
+      'Table of 64',
+      'Table of 32',
+      'Table of 16',
+      'Table of 8',
+      'Semifinal',
+      'Final'
+    ]);
+  });
+
+  it('renders a current Table of 64 fixture with the expected bout count per round', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEBoutsTableOf64.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const openingRound = wrapper.vm.winnerRoundEntries[0][1];
+    const openingFencers = openingRound.flatMap(roundBout => [roundBout.Person1, roundBout.Person2]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+
+    expect(assignedFencerIds.size).toBe(61);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(3);
+  });
+
+  it('renders a complete Table of 128 fixture for large-bracket layout coverage', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEBoutsTableOf128.pools[0].Bouts,
+        bracketSize: 'Table of 128',
+        hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 128', 64],
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const allBouts = getDEBoutsTableOf128.pools[0].Bouts;
+    const openingFencers = wrapper.vm.winnerRoundEntries[0][1].flatMap(roundBout => [
+      roundBout.Person1,
+      roundBout.Person2
+    ]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+    const boutIds = new Set(allBouts.map(roundBout => roundBout.DEBoutId));
+    const missingNextBouts = allBouts.filter(
+      roundBout => roundBout.DENextBoutId && !boutIds.has(roundBout.DENextBoutId)
+    );
+
+    expect(allBouts).toHaveLength(127);
+    expect(assignedFencerIds.size).toBe(67);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(61);
+    expect(missingNextBouts).toEqual([]);
+  });
 });