@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,141 +1,248 @@
+import { ref, watch } from 'vue';
 import Bracket from './Bracket.vue';
-import getDirectors from '../../../../mocks/getDirectors.js';
+import {
+  activateStoryBout,
+  canStoryDirectorDirectBout,
+  clearStoryBoutChrome,
+  cloneStoryBouts,
+  getStoryDirectorId,
+  replaceStoryBout
+} from './BracketStoryHarness.js';
+import {
+  plannedBoutAssignments,
+  plannedDirectingStations,
+  plannedSuggestionViewerId
+} from './BracketPlannedSuggestions.js';
 //import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 import getDEWithBouts6Fencers from '../../../../mocks/getDeBouts-6fencers.js';
 import getDEWithBouts12Fencers from '../../../../mocks/getDeBouts-12fencers.js';
 import getDEWithBouts22Fencers from '../../../../mocks/getDeBouts-22fencers.js';
-import getDEWithBout42Fencers from '../../../../mocks/getDeBouts-42fencers.js';
-import getDEWithBouts67Fencers from '../../../../mocks/getDeBouts-67fencers.js';
-import getDEWithBouts128Fencers from '../../../../mocks/getDeBouts-128fencers.js';
+import getDEWithBout42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
+import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
+import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
 import getDEWithBouts from '../../../../mocks/getDEBouts-DoubleElim.js';
 
+const cloneStations = stations =>
+  (stations || []).map(station => ({ ...station, Director: station.Director ? { ...station.Director } : null }));
+
+const renderInteractiveBracket = args => ({
+  components: { Bracket },
+  setup() {
+    const storyBouts = ref(cloneStoryBouts(args.bouts));
+    const storyStations = ref(cloneStations(args.plannedDirectingStations));
+
+    watch(
+      () => args.bouts,
+      bouts => {
+        storyBouts.value = cloneStoryBouts(bouts);
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => args.plannedDirectingStations,
+      stations => {
+        storyStations.value = cloneStations(stations);
+      },
+      { deep: true }
+    );
+
+    const persistStoryBout = bout => {
+      storyBouts.value = replaceStoryBout(storyBouts.value, bout);
+    };
+
+    const getViewerStation = () =>
+      storyStations.value.find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
+
+    const handleAddPlannedDirector = () => {
+      const assignedRingIds = new Set(storyStations.value.map(station => String(station.RingId)));
+      const nextStation = plannedDirectingStations.find(station => !assignedRingIds.has(String(station.RingId)));
+      if (!nextStation) return;
+      storyStations.value = [...storyStations.value, ...cloneStations([nextStation])];
+    };
+
+    const handleDirectingBout = bout => {
+      const viewerStation = getViewerStation();
+      if (!canStoryDirectorDirectBout(bout, getStoryDirectorId(viewerStation))) return;
+      persistStoryBout(activateStoryBout(bout, viewerStation));
+    };
+
+    const handleCloseDirectingBout = bout => {
+      persistStoryBout(clearStoryBoutChrome(bout));
+    };
+
+    return {
+      args,
+      storyBouts,
+      storyStations,
+      handleAddPlannedDirector,
+      handleCloseDirectingBout,
+      handleDirectingBout,
+      persistStoryBout
+    };
+  },
+  template: `
+    <Bracket
+      v-bind="args"
+      :connectedToServer="args.connectedToServer"
+      :eventRules="args.eventRules"
+      :hostingClubColors="args.hostingClubColors"
+      :bouts="storyBouts"
+      :plannedDirectingStations="storyStations"
+      @close:directing-bout="handleCloseDirectingBout"
+      @request:add-planned-director="handleAddPlannedDirector"
+      @update:directing-bout="handleDirectingBout"
+      @request:bout-active="handleDirectingBout"
+      @update:bout="persistStoryBout"
+      @submit:bout="persistStoryBout"
+    />
+  `
+});
+
 export default {
-    title: 'Templates/EventManagement/Bracket',
-    component: Bracket,
-    tags: ['Bracket'],
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts,
-        eventRules: getDEWithBouts.eventRules,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        connectedToServer: true,
-        role: 'admin',
-        directors: getDirectors,
-        currentUserId: 79, // optional but useful if you're showing "Assigned Bouts"
+  title: 'Templates/EventManagement/Bracket',
+  component: Bracket,
+  tags: ['Bracket'],
+  render: renderInteractiveBracket,
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts,
+    eventRules: getDEWithBouts.eventRules,
+    hostingClubColors: getDEWithBouts.hostingClubColors,
+    connectedToServer: true,
+    role: 'admin',
+    plannedDirectingStations: [],
+    plannedBoutAssignments: [],
+    viewerPersonId: null,
+    showPlannedDirectorAssignments: false,
+    showAddPlannedDirectorCard: true
+  },
+  argTypes: {
+    bouts: {
+      control: 'object'
+    },
+    eventRules: {
+      control: 'object'
+    },
+    hostingClubColors: {
+      control: 'object'
+    },
+    connectedToServer: {
+      control: 'boolean'
+    },
+    role: {
+      control: 'text'
     },
-    argTypes: {
-        bouts: {
-            control: Object
-        },
-        eventRules: {
-            control: Object
-        },
-        hostingClubColors: {
-            control: Object
-        },
-        connectedToServer: {
-            control: Boolean
-        },
-        role: {
-            control: String
-        },
-        directors: { control: 'object' },
-        currentUserId: { control: 'number' },
+    plannedDirectingStations: {
+      control: 'object'
     },
+    plannedBoutAssignments: {
+      control: 'object'
+    },
+    viewerPersonId: {
+      control: 'text'
+    },
+    showPlannedDirectorAssignments: {
+      control: 'boolean'
+    },
+    showAddPlannedDirectorCard: {
+      control: 'boolean'
+    }
+  }
 };
 
 export const Default = {
-    args: {
-        bouts: getDEWithBouts12Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts12Fencers.eventRules,
-        hostingClubColors: getDEWithBouts12Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        role: 'Admin',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+  args: {
+    bouts: getDEWithBouts12Fencers.pools[0].Bouts,
+    eventRules: getDEWithBouts12Fencers.eventRules,
+    hostingClubColors: getDEWithBouts12Fencers.hostingClubColors,
+    connectedToServer: true,
+    status: 'de',
+    role: 'Admin'
+  }
 };
 
 export const TableOfEight = {
-    args: {
-        bouts: getDEWithBouts6Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts6Fencers.eventRules,
-        hostingClubColors: getDEWithBouts6Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+  args: {
+    bouts: getDEWithBouts6Fencers.pools[0].Bouts,
+    eventRules: getDEWithBouts6Fencers.eventRules,
+    hostingClubColors: getDEWithBouts6Fencers.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
 export const TableWithTwentyTwo = {
-    args: {
-        bouts: getDEWithBouts22Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts22Fencers.eventRules,
-        hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+  args: {
+    bouts: getDEWithBouts22Fencers.pools[0].Bouts,
+    eventRules: getDEWithBouts22Fencers.eventRules,
+    hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
 export const tableOfThirtyTwo = {
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts,
-        eventRules: getDEWithBouts.eventRules,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts,
+    eventRules: getDEWithBouts.eventRules,
+    hostingClubColors: getDEWithBouts.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
-export const tableOfFourtyTwo = {
-    args: {
-        bouts: getDEWithBout42Fencers.pools[0].Bouts,
-        eventRules: getDEWithBout42Fencers.eventRules,
-        hostingClubColors: getDEWithBout42Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+export const TableOfFortyTwo = {
+  args: {
+    bouts: getDEWithBout42Fencers.pools[0].Bouts,
+    eventRules: getDEWithBout42Fencers.eventRules,
+    hostingClubColors: getDEWithBout42Fencers.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
-export const tableOfSixtyFour = {
-    args: {
-        bouts: getDEWithBouts67Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts67Fencers.eventRules,
-        hostingClubColors: getDEWithBouts67Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+export const TableOfSixtyFour = {
+  args: {
+    bouts: getDEBoutsTableOf64.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf64.eventRules,
+    hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
-export const tableOfOneHundredTwentyEight = {
-    args: {
-        bouts: getDEWithBouts128Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts128Fencers.eventRules,
-        hostingClubColors: getDEWithBouts128Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'de',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+export const PlannedDirectorSuggestions = {
+  args: {
+    bouts: getDEBoutsTableOf64.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf64.eventRules,
+    hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+    connectedToServer: true,
+    status: 'de',
+    role: 'Admin',
+    plannedDirectingStations: plannedDirectingStations.slice(0, 2),
+    plannedBoutAssignments,
+    viewerPersonId: plannedSuggestionViewerId,
+    showPlannedDirectorAssignments: true,
+    showAddPlannedDirectorCard: true
+  }
+};
+
+export const TableOfOneHundredTwentyEight = {
+  args: {
+    bouts: getDEBoutsTableOf128.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf128.eventRules,
+    hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
+    connectedToServer: true,
+    status: 'de'
+  }
 };
 
 export const noBoutsYet = {
-    args: {
-        bouts: [],
-        eventRules: getDEWithBouts22Fencers.eventRules,
-        hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
-        connectedToServer: true,
-        status: 'live',
-        directors: getDirectors,
-        currentUserId: 79,
-    }
+  args: {
+    bouts: [],
+    eventRules: getDEWithBouts22Fencers.eventRules,
+    hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
+    connectedToServer: true,
+    status: 'live'
+  }
 };

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

@@ -1,71 +1,166 @@
 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 BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.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()], 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:assignBout', 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);
 
-    wrapper.unmount();
+    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('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]);
 
-    tableau.vm.$emit('action:assignBout', bout);
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
     await wrapper.vm.$nextTick();
 
-    wrapper.findComponent(AssignDirectorModal).vm.$emit('assign', { bout, director });
+    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();
 
-    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.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.findComponent(AssignDirectorModal).props('show')).toBe(false);
+    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();
 
-    wrapper.unmount();
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
+    expect(wrapper.findComponent(Tableau).props('plannedDirectingStations')).toEqual([]);
   });
 });