@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,166 +1,178 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-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 BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
-import Bracket from './Bracket.vue';
-
-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' },
-  ...overrides
-});
-
-const mountBracket = (bouts = [createBout()], optionalProps = {}) =>
-  shallowMount(Bracket, {
-    props: {
-      bouts,
-      eventRules: [],
-      hostingClubColors: {},
-      connectedToServer: true,
-      ...optionalProps
-    }
-  });
-
-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();
-
-    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
-
-    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
-
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
-    expect(wrapper.findComponent(DirectorModal).props('bout').Status).toBe('Active');
-  });
-
-  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();
-
-    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();
-
-    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();
-
-    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.emitted('close:directing-bout')).toEqual([[bout]]);
-    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();
-
-    expect(wrapper.findComponent({ name: 'AssignDirectorModal' }).exists()).toBe(false);
-  });
-
-  it('renders optional planned suggestions without changing the directing contract', async () => {
-    const bout = createBout();
-    const plannedDirectingStations = [
-      {
-        RingId: 1,
-        RingName: 'Ring 1',
-        Color: '#2563eb',
-        Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
-      }
-    ];
-    const plannedBoutAssignments = [{ DEBoutId: bout.DEBoutId, RingId: 1 }];
-    const wrapper = mountBracket([bout], {
-      plannedDirectingStations,
-      plannedBoutAssignments,
-      viewerPersonId: 1001
-    });
-
-    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).props('stations')).toEqual(plannedDirectingStations);
-    expect(wrapper.findComponent(Tableau).props()).toMatchObject({
-      plannedDirectingStations,
-      plannedBoutAssignments,
-      viewerPersonId: 1001
-    });
-
-    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
-    expect(wrapper.emitted('assign:director')).toBeUndefined();
-  });
-
-  it('emits add-planned-director intent from the assignment panel', async () => {
-    const wrapper = mountBracket([], { showPlannedDirectorAssignments: true });
-
-    wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit('request:add-planned-director');
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
-  });
-
-  it('does not render planned directing controls when optional behavior is disabled', () => {
-    const wrapper = mountBracket();
-
-    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
-    expect(wrapper.findComponent(Tableau).props('plannedDirectingStations')).toEqual([]);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+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 BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
+import Bracket from './Bracket.vue';
+
+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' },
+  ...overrides
+});
+
+const mountBracket = (bouts = [createBout()], optionalProps = {}) =>
+  shallowMount(Bracket, {
+    props: {
+      bouts,
+      eventRules: [],
+      hostingClubColors: {},
+      connectedToServer: true,
+      ...optionalProps
+    }
+  });
+
+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();
+
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
+
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+    expect(wrapper.findComponent(DirectorModal).props('bout').Status).toBe('Active');
+  });
+
+  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();
+
+    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();
+
+    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();
+
+    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.emitted('close:directing-bout')).toEqual([[bout]]);
+    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();
+
+    expect(wrapper.findComponent({ name: 'AssignDirectorModal' }).exists()).toBe(false);
+  });
+
+  it('renders optional planned suggestions without changing the directing contract', async () => {
+    const bout = createBout();
+    const plannedDirectingStations = [
+      {
+        RingId: 1,
+        RingName: 'Ring 1',
+        Color: '#2563eb',
+        Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
+      }
+    ];
+    const plannedBoutAssignments = [{ DEBoutId: bout.DEBoutId, RingId: 1 }];
+    const wrapper = mountBracket([bout], {
+      plannedDirectingStations,
+      plannedBoutAssignments,
+      viewerPersonId: 1001
+    });
+
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).props('stations')).toEqual(plannedDirectingStations);
+    expect(wrapper.findComponent(Tableau).props()).toMatchObject({
+      plannedDirectingStations,
+      plannedBoutAssignments,
+      viewerPersonId: 1001
+    });
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.emitted('assign:director')).toBeUndefined();
+  });
+
+  it('emits add-planned-director intent from the assignment panel', async () => {
+    const wrapper = mountBracket([], { showPlannedDirectorAssignments: true });
+
+    wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit('request:add-planned-director');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
+  });
+
+  it('does not render planned directing controls when explicitly disabled', () => {
+    const wrapper = mountBracket(undefined, {
+      showPlannedDirectorAssignments: false,
+      showBoutDirectorAssignment: false
+    });
+
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
+    expect(wrapper.findComponent(Tableau).props('plannedDirectingStations')).toEqual([]);
+  });
+});
+
+describe('Bracket assignment defaults', () => {
+  it('shows assignment actions and the director panel without opt-in props', () => {
+    const wrapper = mountBracket();
+    expect(wrapper.findComponent(Tableau).props('showBoutDirectorAssignment')).toBe(true);
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(true);
+    wrapper.unmount();
+  });
+});

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

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isListView)" @tabMenuClick="handleTabMenuClick" />
+    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
     <ToggleHeader
       :currentSelection="viewName"
       :key="viewName"
@@ -11,6 +11,12 @@
       @update:selection="handleViewChange"
     />
 
+    <ServerConnected
+      class="mb-2 md:hidden"
+      :connectedToServer="connectedToServer"
+      :statusText="connectedToServer ? 'Connected' : 'Disconnected'"
+    />
+
     <div class="flex flex-col gap-4 xl:flex-row">
       <div class="min-w-0 flex-1">
         <Tableau
@@ -22,6 +28,8 @@
           :plannedDirectingStations="plannedDirectingStations"
           :plannedBoutAssignments="plannedBoutAssignments"
           :viewerPersonId="viewerPersonId"
+          :showBoutDirectorAssignment="canShowBoutDirectorAssignment"
+          @request:bout-director="handleBoutDirectorRequest"
           @action:editBout="editBout"
           @action:directingBout="directBout"
         />
@@ -38,7 +46,7 @@
 
     <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" />
+        <img alt="Small desert scene with wind blowing." class="hidden md:block 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"
@@ -47,6 +55,7 @@
           weight="normal"
         />
         <BaseText
+          class="hidden md:block"
           text="The Generate bracket button will appear on the bottom of the pools screen"
           size="sm"
           color="quinary"
@@ -84,6 +93,7 @@
 <script>
 import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
 import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
+import ServerConnected from '../../../Molecules/Indicators/ServerConnected/ServerConnected.vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
 import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
 import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
@@ -91,6 +101,7 @@ import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
 import BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import { tabs } from '../../../Util/tabs.js';
+import { canAssignBoutDirector } from '../../../Util/boutDirectorAssignment.js';
 
 const isByeFencer = person => {
   if (!person?.PersonId || Number(person.PersonId) === 0) return true;
@@ -111,6 +122,7 @@ export default {
     'penalty:update',
     'request:add-planned-director',
     'request:bout-active',
+    'request:bout-director',
     'submit:bout',
     'tab:menu-click',
     'update:bout',
@@ -123,9 +135,11 @@ export default {
     BracketDirectorAssignmentPanel,
     BaseText,
     ToggleHeader,
+    ServerConnected,
     EditEventsTopMenu
   },
   props: {
+    showBoutDirectorAssignment: { type: Boolean, default: true },
     bouts: {
       type: Array,
       required: true
@@ -164,7 +178,7 @@ export default {
     },
     showPlannedDirectorAssignments: {
       type: Boolean,
-      default: false
+      default: true
     },
     showAddPlannedDirectorCard: {
       type: Boolean,
@@ -180,12 +194,21 @@ export default {
       tabs,
       viewName: 'Tableau',
       boutsData: this.cloneBouts(this.bouts),
-      isListView: false
+      windowWidth: typeof window === 'undefined' ? 1024 : window.innerWidth
     };
   },
   computed: {
+    isMobile() {
+      return this.windowWidth < 768;
+    },
+    isListView() {
+      return this.isMobile || this.viewName === 'List View';
+    },
+    canShowBoutDirectorAssignment() {
+      return !this.isMobile && this.showBoutDirectorAssignment;
+    },
     showPlannedAssignmentPanel() {
-      return this.showPlannedDirectorAssignments || this.plannedDirectingStations.length > 0;
+      return !this.isMobile && (this.showPlannedDirectorAssignments || this.plannedDirectingStations.length > 0);
     },
     isCountingBackwardsMaxScore() {
       // 1) see if PoolScoreDirection exists and is explicitly "false"
@@ -230,6 +253,12 @@ export default {
     window.removeEventListener('resize', this.updateViewBasedOnScreenSize);
   },
   methods: {
+    handleBoutDirectorRequest(bout) {
+      if (!this.canShowBoutDirectorAssignment) return;
+      const currentBout = this.boutsData.find(item => String(item.BoutId) === String(bout?.BoutId));
+      if (!canAssignBoutDirector(currentBout)) return;
+      this.$emit('request:bout-director', JSON.parse(JSON.stringify(currentBout)));
+    },
     handleCloseModal() {
       const closedDirectingBout = this.showDirectorModal && this.selectedBout?.BoutId ? { ...this.selectedBout } : null;
       this.showDirectorModal = false;
@@ -242,7 +271,6 @@ export default {
     },
     handleViewChange(value) {
       this.viewName = value;
-      this.isListView = value === 'List View';
     },
     handleUpdateBout(bout) {
       if (!bout?.BoutId) return;
@@ -279,7 +307,7 @@ export default {
       this.selectedBout = updatedBout;
     },
     updateViewBasedOnScreenSize() {
-      this.isListView = window.innerWidth <= 768;
+      this.windowWidth = window.innerWidth;
     },
     handleUpdatePenalty(penalty) {
       this.$emit('penalty:update', penalty);