@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Templates/EventManagement/Bracket/Bracket.test.js

@@ -1,71 +1,116 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
-import AssignDirectorModal from '../../../Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
 import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
 import Bracket from './Bracket.vue';
 
-const bout = {
+const createBout = (overrides = {}) => ({
   BoutId: 42,
   DEBoutId: 1,
   RoundLabel: 'Final',
   Status: 'Scheduled',
+  Score1: 4,
+  Score2: 3,
   Person1: { PersonId: 1, DisplayName: 'Fencer One' },
   Person2: { PersonId: 2, DisplayName: 'Fencer Two' },
-};
-
-const director = {
-  PersonId: 7,
-  DisplayName: 'Director One',
-  PortraitUrl: '/director-one.png',
-  Ring: {
-    PoolId: 12,
-    RingName: 'Ring One',
-  },
-};
-
-const mountBracket = () => shallowMount(Bracket, {
-  props: {
-    bouts: [bout],
-    eventRules: [],
-    hostingClubColors: {},
-    connectedToServer: true,
-    directors: [director],
-    currentUserId: director.PersonId,
-  },
+  ...overrides
 });
 
-describe('Bracket director assignment', () => {
-  it('opens the assignment modal for the selected bout', async () => {
-    const wrapper = mountBracket();
+const mountBracket = (bouts = [createBout()]) =>
+  shallowMount(Bracket, {
+    props: {
+      bouts,
+      eventRules: [],
+      hostingClubColors: {},
+      connectedToServer: true
+    }
+  });
 
-    wrapper.findComponent(Tableau).vm.$emit('action:assignBout', bout);
+describe('Bracket bout interaction', () => {
+  it('emits directing intent for a scheduled bout and waits for Active props', async () => {
+    const bout = createBout();
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
     await wrapper.vm.$nextTick();
 
-    const modal = wrapper.findComponent(AssignDirectorModal);
-    expect(modal.props('show')).toBe(true);
-    expect(modal.props('bout')).toEqual(bout);
-    expect(modal.props('directors')).toEqual([director]);
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
 
-    wrapper.unmount();
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+    expect(wrapper.findComponent(DirectorModal).props('bout').Status).toBe('Active');
   });
 
-  it('emits cloned assignment intent without using the live-score event', async () => {
-    const wrapper = mountBracket();
-    const tableau = wrapper.findComponent(Tableau);
+  it('resumes an active bout through the directing path', async () => {
+    const bout = createBout({ Status: 'Active' });
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
 
-    tableau.vm.$emit('action:assignBout', bout);
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+  });
+
+  it('opens completed bouts for editing instead of directing', async () => {
+    const bout = createBout({ Status: 'Completed' });
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(Tableau).vm.$emit('action:editBout', bout);
     await wrapper.vm.$nextTick();
 
-    wrapper.findComponent(AssignDirectorModal).vm.$emit('assign', { bout, director });
+    expect(wrapper.findComponent(EditBoutModal).props('show')).toBe(true);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+  });
+
+  it('does not direct a BYE bout', async () => {
+    const bout = createBout({
+      Person2: { PersonId: 0, DisplayName: 'BYE' }
+    });
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
     await wrapper.vm.$nextTick();
 
-    const payload = wrapper.emitted('assign:director')[0][0];
-    expect(payload).toEqual({ bout, director });
-    expect(payload.bout).not.toBe(bout);
-    expect(payload.director).not.toBe(director);
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+  });
+
+  it('closes the scoring modal without changing status or scores', async () => {
+    const bout = createBout({ Status: 'Active', Score1: 6, Score2: 5 });
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent(DirectorModal).vm.$emit('update:closeModal', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.boutsData[0]).toMatchObject({ Status: 'Active', Score1: 6, Score2: 5 });
     expect(wrapper.emitted('update:bout')).toBeUndefined();
-    expect(wrapper.findComponent(AssignDirectorModal).props('show')).toBe(false);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+  });
+
+  it('emits submitted bout data without assigning completion fields', async () => {
+    const bout = createBout({ Status: 'Active' });
+    const submittedBout = { ...bout, Score1: 7 };
+    const wrapper = mountBracket([bout]);
+
+    wrapper.findComponent(DirectorModal).vm.$emit('submit:bout', submittedBout);
+    await wrapper.vm.$nextTick();
+
+    const emittedBout = wrapper.emitted('submit:bout')[0][0];
+    expect(emittedBout).toEqual(submittedBout);
+    expect(emittedBout.Status).toBe('Active');
+    expect(emittedBout.Ended).toBeUndefined();
+  });
+
+  it('does not render a director-selection modal', () => {
+    const wrapper = mountBracket();
 
-    wrapper.unmount();
+    expect(wrapper.findComponent({ name: 'AssignDirectorModal' }).exists()).toBe(false);
   });
 });

package/src/stories/Templates/EventManagement/Bracket/Bracket.vue

@@ -1,90 +1,112 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isListView)" @tabMenuClick="handleTabMenuClick"/>
-    <ToggleHeader :currentSelection="viewName"
-                  :key="viewName"
-                  firstButtonLabel="List View"
-                  secondButtonLabel="Tableau"
-                  :showConnected="true"
-                  :showToggle="true"
-                  :largeCards="largeCards"
-                  :connectedToServer="connectedToServer"
-                  @update:selection="handleViewChange"
-                  @update:cardSize="handleCardSizeToggle"/>
+    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isListView)" @tabMenuClick="handleTabMenuClick" />
+    <ToggleHeader
+      :currentSelection="viewName"
+      :key="viewName"
+      firstButtonLabel="List View"
+      secondButtonLabel="Tableau"
+      :showConnected="true"
+      :showToggle="true"
+      :largeCards="largeCards"
+      :connectedToServer="connectedToServer"
+      @update:selection="handleViewChange"
+      @update:cardSize="handleCardSizeToggle"
+    />
 
     <Tableau
-        :bouts="sortedBouts"
-        :hostingClubColors="hostingClubColors"
-        :bracketSize="bracketSize"
-        :largeCards="largeCards"
-        :listView="isListView"
-        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-        :role="role"
-        :currentUserId="currentUserId"
-        @action:editBout="editBout"
-        @action:directingBout="directBout"
-        @action:assignBout="openAssignDirector"
+      :bouts="sortedBouts"
+      :hostingClubColors="hostingClubColors"
+      :bracketSize="bracketSize"
+      :largeCards="largeCards"
+      :listView="isListView"
+      :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+      @action:editBout="editBout"
+      @action:directingBout="directBout"
     />
 
     <div v-if="bouts.length < 1" class="w-full flex justify-center items-center">
       <div class="text-center mb-10">
         <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon" />
         <BaseText text="Nothing to Show Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
-        <BaseText text="Check Back when this event has progress to Direct Elimination" size="sm" color="quinary" weight="normal" />
-        <BaseText text="The Generate bracket button will appear on the bottom of the pools screen" size="sm" color="quinary" weight="normal" />
+        <BaseText
+          text="Check Back when this event has progress to Direct Elimination"
+          size="sm"
+          color="quinary"
+          weight="normal"
+        />
+        <BaseText
+          text="The Generate bracket button will appear on the bottom of the pools screen"
+          size="sm"
+          color="quinary"
+          weight="normal"
+        />
       </div>
     </div>
 
-    <DirectorModal :bout="selectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showDirectorModal"
-                   ringName="RingName"
-                   @penalty:add="handleAddPenalty"
-                   @penalty:update="handleUpdatePenalty"
-                   @penalty:remove="handleRemovePenalty"
-                   @update:closeModal="handleCloseModal"
-                   @update:bout="handleUpdateBout"
-                   @submit:bout="handleSubmitBout"/>
-
-    <EditBoutModal :bout="selectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showEditBoutModal"
-                   :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                   @update:closeModal="handleCloseModal"
-                   @submit:bout="handleSubmitBout"/>
-
-    <AssignDirectorModal
-        :show="showAssignDirectorModal"
-        :bout="assigningBout || {}"
-        :directors="directors"
-        @update:closeModal="closeAssignDirectorModal"
-        @assign="handleAssignDirector"
+    <DirectorModal
+      :bout="selectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showDirectorModal"
+      @penalty:add="handleAddPenalty"
+      @penalty:update="handleUpdatePenalty"
+      @penalty:remove="handleRemovePenalty"
+      @update:closeModal="handleCloseModal"
+      @update:bout="handleUpdateBout"
+      @submit:bout="handleSubmitBout"
     />
 
+    <EditBoutModal
+      :bout="selectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showEditBoutModal"
+      :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+      @update:closeModal="handleCloseModal"
+      @request:bout-active="handleBoutActiveRequest"
+      @submit:bout="handleSubmitBout"
+    />
   </section>
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
-import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
-import Tableau from "../../../Organisms/Containers/Tableau/Tableau.vue";
-import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
+import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import { tabs } from '../../../Util/tabs.js';
-import AssignDirectorModal from "../../../Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue";
 
-export default {
-  emits: ['assign:director', 'penalty:add', 'penalty:remove', 'penalty:update', 'submit:bout', 'tab:menu-click', 'update:bout', 'update:directing-bout'],
-  components: {
-    AssignDirectorModal,
-    Tableau,
-    EditBoutModal,
-    DirectorModal,
-    BaseText,
+const isByeFencer = person => {
+  if (!person?.PersonId || Number(person.PersonId) === 0) return true;
+  return String(person.DisplayName || '').toUpperCase() === 'BYE';
+};
+
+const invalidDirectingBoutPredicates = [
+  bout => !bout?.BoutId,
+  bout => isByeFencer(bout?.Person1),
+  bout => isByeFencer(bout?.Person2)
+];
+
+export default {
+  emits: [
+    'penalty:add',
+    'penalty:remove',
+    'penalty:update',
+    'request:bout-active',
+    'submit:bout',
+    'tab:menu-click',
+    'update:bout',
+    'update:directing-bout'
+  ],
+  components: {
+    Tableau,
+    EditBoutModal,
+    DirectorModal,
+    BaseText,
     ToggleHeader,
     EditEventsTopMenu
   },
@@ -92,10 +114,10 @@ export default {
     bouts: {
       type: Array,
       required: true
-    },
-    eventRules: {
-      type: Array,
-      required: true
+    },
+    eventRules: {
+      type: Array,
+      required: true
     },
     hostingClubColors: {
       type: Object,
@@ -112,16 +134,7 @@ export default {
     role: {
       type: String,
       default: 'Admin'
-    },
-    directors: {
-      type: Array,
-      default: () => []
-    },
-    currentUserId: {
-      type: [Number, String],
-      default: null
-    },
-
+    }
   },
   data() {
     return {
@@ -130,18 +143,13 @@ export default {
       showEditBoutModal: false,
       selectedBout: {},
       tabs,
-      viewName: "Tableau",
+      viewName: 'Tableau',
       largeCards: true,
-      boutsData: this.cloneBouts(this.bouts),
-      isListView: false,
-      showAssignDirectorModal: false,
-      assigningBout: null,
+      boutsData: this.cloneBouts(this.bouts),
+      isListView: false
     };
   },
   computed: {
-    isAdmin() {
-      return String(this.role || '').toLowerCase() === 'admin';
-    },
     isCountingBackwardsMaxScore() {
       // 1) see if PoolScoreDirection exists and is explicitly "false"
       const dirRule = this.eventRules.find(r => r.Rules?.RuleName === 'PoolScoreDirection');
@@ -159,28 +167,20 @@ export default {
       return Number.isFinite(n) && n > 0 ? n : null;
     },
     bracketSize() {
-      return this.boutsData && this.boutsData.length > 0 && this.boutsData[0].RoundLabel ? this.boutsData[0].RoundLabel : "";
+      return this.boutsData && this.boutsData.length > 0 && this.boutsData[0].RoundLabel
+        ? this.boutsData[0].RoundLabel
+        : '';
     },
-    activeBouts() {
-      return this.boutsData.filter(bout => String(bout.Status || '').toLowerCase() === 'active');
-    },
-    sortedBouts() {
-      return this.boutsData.slice().sort((a, b) => {
-        if (a.DEBoutId < b.DEBoutId) {
-          return -1;
-        }
-        if (a.DEBoutId > b.DEBoutId) {
-          return 1;
-        }
-        return 0;
-      });
+    sortedBouts() {
+      return this.boutsData.slice().sort((a, b) => Number(a.DEBoutId ?? 0) - Number(b.DEBoutId ?? 0));
     }
   },
   watch: {
-    bouts: {
-      handler(newBouts) {
-        this.boutsData = this.cloneBouts(newBouts);
-      },
+    bouts: {
+      handler(newBouts) {
+        this.boutsData = this.cloneBouts(newBouts);
+        this.reconcileSelectedBout();
+      },
       deep: true,
       immediate: true
     }
@@ -193,94 +193,54 @@ export default {
     window.removeEventListener('resize', this.updateViewBasedOnScreenSize);
   },
   methods: {
-    handleAssignDirector({ bout, director }) {
-      if (!bout?.BoutId || !director?.PersonId) return;
-
-      this.$emit('assign:director', {
-        bout: { ...bout },
-        director: { ...director }
-      });
-
-      this.closeAssignDirectorModal();
-    },
-    openAssignDirector(bout) {
-      this.assigningBout = bout;
-      this.showAssignDirectorModal = true;
-    },
-    closeAssignDirectorModal() {
-      this.showAssignDirectorModal = false;
-      this.assigningBout = null;
-    },
-    handleCloseModal(bout) {
-      this.showDirectorModal = false;
-      this.showEditBoutModal = false;
-
-      if (!bout?.BoutId) return;
-      if (bout.Status !== 'Completed') {
-        const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-        if (!updatedBout) return;
-
-        updatedBout.Status = 'Scheduled';
-        updatedBout.Score1 = 0;
-        updatedBout.Score2 = 0;
-        this.$emit('update:bout', updatedBout);
-      }
+    handleCloseModal() {
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+      this.selectedBout = {};
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
     handleViewChange(value) {
       this.viewName = value;
+      this.isListView = value === 'List View';
+    },
+    handleUpdateBout(bout) {
+      if (!bout?.BoutId) return;
+      this.$emit('update:bout', { ...bout });
+    },
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('submit:bout', { ...bout });
+      this.selectedBout = {};
+    },
+    handleBoutActiveRequest(bout) {
+      this.showEditBoutModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('request:bout-active', { ...bout });
+      this.selectedBout = {};
+    },
+    directBout(bout) {
+      if (!this.canDirectBout(bout)) return;
 
-      if (value === 'List View') {
-        this.isListView = true;
-        return
-      }
-      this.isListView = false;
-    },
-    handleUpdateBout(bout) {
-      if (!bout?.BoutId) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Active';
-      this.$emit('update:bout', updatedBout);
-    },
-    handleSubmitBout(bout) {
-      this.showEditBoutModal = false;
-      this.showDirectorModal = false;
-      if (!bout?.BoutId) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Completed';
-      updatedBout.Ended = new Date().toISOString();
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
 
-      this.$emit('submit:bout', updatedBout);
-    },
-    directBout(bout) {
-      if (!this.canDirectBout(bout)) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      updatedBout.Status = 'Active';
-      this.showDirectorModal = true;
-      this.selectedBout = updatedBout;
-      this.$emit('update:directing-bout', updatedBout)
-    },
-    editBout(bout) {
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      this.showEditBoutModal = true;
-      this.selectedBout = updatedBout;
+      this.selectedBout = { ...updatedBout };
+      this.showDirectorModal = String(updatedBout.Status || '').toLowerCase() === 'active';
+      this.$emit('update:directing-bout', { ...updatedBout });
     },
-    handleCardSizeToggle(value){
-      this.largeCards = value
+    editBout(bout) {
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+
+      this.showEditBoutModal = true;
+      this.selectedBout = updatedBout;
+    },
+    handleCardSizeToggle(value) {
+      this.largeCards = value;
     },
     updateViewBasedOnScreenSize() {
       this.isListView = window.innerWidth <= 768;
@@ -289,21 +249,28 @@ export default {
       this.$emit('penalty:update', penalty);
     },
     handleAddPenalty(penalty) {
-
       this.$emit('penalty:add', penalty);
     },
-    handleRemovePenalty(penalty) {
-      this.$emit('penalty:remove', penalty);
-    },
-    canDirectBout(bout) {
-      if (!bout?.BoutId) return false;
-      if (bout.Person1?.PersonId === 0) return false;
-      if (bout.Person2?.PersonId === 0) return false;
-      return true;
-    },
-    cloneBouts(bouts) {
-      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
-    }
+    handleRemovePenalty(penalty) {
+      this.$emit('penalty:remove', penalty);
+    },
+    canDirectBout(bout) {
+      return !invalidDirectingBoutPredicates.some(predicate => predicate(bout));
+    },
+    reconcileSelectedBout() {
+      const selectedBoutId = this.selectedBout?.BoutId;
+      if (!selectedBoutId) return;
+
+      const updatedBout = this.boutsData.find(bout => bout.BoutId === selectedBoutId);
+      if (!updatedBout) return;
+
+      this.selectedBout = { ...updatedBout };
+      if (String(updatedBout.Status || '').toLowerCase() !== 'active') return;
+      this.showDirectorModal = true;
+    },
+    cloneBouts(bouts) {
+      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
+    }
   }
-}
-</script>
+};
+</script>