@dcrackel/hematournamentui 1.0.712 → 1.0.713

package/src/stories/Organisms/Wizards/EditEventWizard/WeaponSelection.test.js

@@ -0,0 +1,138 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BasicEventInfo from './BasicEventInfo/BasicEventInfo.vue';
+import EditEventWizard from './EditEventWizard.vue';
+import DropDownMenu from '../../ComplexInputs/DropDown/DropDownMenu.vue';
+
+const wrappers = [];
+const weapons = [
+  { text: 'Sword & Buckler', link: 8 },
+  { text: 'MG Longsword', link: 17 },
+  { text: 'Longsword', link: 1 }
+];
+
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+function mountBasic(eventConfig, options = weapons) {
+  const wrapper = mount(BasicEventInfo, {
+    props: {
+      eventConfig,
+      weapons: options,
+      validation: { EventName: { invalid: false } },
+      steps: [],
+      currentStep: 0
+    },
+    global: { stubs: { DatePicker: true, StepIndicator: true } }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+function selectedText(wrapper) {
+  return wrapper.findComponent(DropDownMenu).find('input').element.value;
+}
+
+describe('event weapon selection', () => {
+  it.each([1, '1', 8, '8', 17, '17'])('shows the actual saved weapon for ID %s without emitting a change', WeaponId => {
+    const wrapper = mountBasic({ WeaponId });
+    expect(selectedText(wrapper)).toBe(weapons.find(option => String(option.link) === String(WeaponId)).text);
+    expect(wrapper.emitted('update')).toBeUndefined();
+  });
+
+  it('accepts raw weapon records as well as dropdown options', () => {
+    const wrapper = mountBasic(
+      { WeaponId: '8' },
+      weapons.map(option => ({ Id: option.link, Name: option.text }))
+    );
+    expect(selectedText(wrapper)).toBe('Sword & Buckler');
+    expect(wrapper.findComponent(DropDownMenu).props('items')).toEqual(
+      weapons.map(option => ({ ...option, Id: option.link, Name: option.text }))
+    );
+  });
+
+  it.each([undefined, 99])('does not pretend an unavailable weapon %s is Longsword', WeaponId => {
+    const wrapper = mountBasic({ WeaponId });
+    expect(selectedText(wrapper)).toBe('Select a weapon');
+    expect(wrapper.emitted('update')).toBeUndefined();
+  });
+
+  it('reconciles a parent weapon change and restores that selection after closing the menu', async () => {
+    const wrapper = mountBasic({ WeaponId: 8 });
+    await wrapper.setProps({ eventConfig: { WeaponId: 1 } });
+    expect(selectedText(wrapper)).toBe('Longsword');
+    const dropdown = wrapper.findComponent(DropDownMenu);
+    dropdown.vm.clearInput();
+    dropdown.vm.restorePreviousValue();
+    await wrapper.vm.$nextTick();
+    expect(selectedText(wrapper)).toBe('Longsword');
+    expect(wrapper.emitted('update')).toBeUndefined();
+  });
+
+  it('shows the saved selection when the weapon options arrive later', async () => {
+    const wrapper = mountBasic({ WeaponId: 8 }, []);
+    await wrapper.setProps({ weapons });
+    expect(selectedText(wrapper)).toBe('Sword & Buckler');
+    expect(wrapper.emitted('update')).toBeUndefined();
+  });
+
+  it('emits the chosen option ID only after an explicit selection', async () => {
+    const wrapper = mountBasic({ WeaponId: 8 });
+    const dropdown = wrapper.findComponent(DropDownMenu);
+    dropdown.vm.handleDropDown();
+    await wrapper.vm.$nextTick();
+    await dropdown
+      .findAll('a')
+      .find(option => option.text() === 'Longsword')
+      .trigger('click');
+    expect(wrapper.emitted('update')).toEqual([[{ WeaponId: 1 }]]);
+  });
+
+  it('preserves the saved weapon when another field is edited and saves a deliberate weapon change', async () => {
+    const event = { EventId: 12, EventName: 'Example Event', EventPrice: 25, WeaponId: '8', rules: [] };
+    const wrapper = mount(EditEventWizard, {
+      props: { event, weapons, editMode: true },
+      global: { stubs: { DatePicker: true, StepIndicator: true } }
+    });
+    wrappers.push(wrapper);
+    await wrapper.vm.$nextTick();
+    expect(selectedText(wrapper)).toBe('Sword & Buckler');
+    wrapper.vm.handleValueChange({ EventName: 'Renamed Event' });
+    wrapper.vm.handleUpdate();
+    expect(wrapper.emitted('save:step')[0][0].event.WeaponId).toBe('8');
+
+    wrapper.findComponent(DropDownMenu).vm.handleClick(weapons.find(option => option.link === 17));
+    await wrapper.vm.$nextTick();
+    wrapper.vm.handleUpdate();
+    expect(wrapper.emitted('save:step')[1][0].event.WeaponId).toBe(17);
+    expect(event.WeaponId).toBe('8');
+  });
+});
+
+it.each([false, true])(
+  'actual dropdown choices retain catalog IDs through submit with edit mode %s',
+  async editMode => {
+    const event = { EventId: 230, EventName: 'MG Longsword', EventPrice: 45, WeaponId: 17, rules: [] };
+    const wrapper = mount(EditEventWizard, {
+      props: { event, weapons, editMode },
+      global: { stubs: { DatePicker: true, StepIndicator: true } }
+    });
+    wrappers.push(wrapper);
+    await wrapper.vm.$nextTick();
+    expect(selectedText(wrapper)).toBe('MG Longsword');
+    for (const option of weapons) {
+      const dropdown = wrapper.findComponent(DropDownMenu);
+      dropdown.vm.handleDropDown();
+      await wrapper.vm.$nextTick();
+      await dropdown
+        .findAll('a')
+        .find(item => item.text() === option.text)
+        .trigger('click');
+      expect(selectedText(wrapper)).toBe(option.text);
+      wrapper.vm.handleSubmit();
+      const eventName = editMode ? 'save:step' : 'update:submit';
+      const submitted = wrapper.emitted(eventName).at(-1)[0];
+      expect((editMode ? submitted.event : submitted).WeaponId).toBe(option.link);
+    }
+    expect(event.WeaponId).toBe(17);
+  }
+);

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

@@ -1,5 +1,6 @@
-import { ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import Bracket from './Bracket.vue';
+import { distributeStoryAssignments } from './BracketStoryAssignments.js';
 import {
   activateStoryBout,
   canStoryDirectorDirectBout,
@@ -8,11 +9,7 @@ import {
   getStoryDirectorId,
   replaceStoryBout
 } from './BracketStoryHarness.js';
-import {
-  plannedBoutAssignments,
-  plannedDirectingStations,
-  plannedSuggestionViewerId
-} from './BracketPlannedSuggestions.js';
+import { 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';
@@ -30,11 +27,54 @@ const renderInteractiveBracket = args => ({
   setup() {
     const storyBouts = ref(cloneStoryBouts(args.bouts));
     const storyStations = ref(cloneStations(args.plannedDirectingStations));
+    const storyAssignments = ref([]);
+    const canAddDirector = computed(() =>
+      plannedDirectingStations.some(
+        station => !storyStations.value.some(item => String(item.RingId) === String(station.RingId))
+      )
+    );
+    const redistributeAssignments = () => {
+      storyAssignments.value = distributeStoryAssignments({
+        bouts: storyBouts.value,
+        stations: storyStations.value,
+        previousAssignments: storyAssignments.value
+      });
+    };
+    const applyProvidedAssignments = assignments => {
+      redistributeAssignments();
+      const providedIds = new Set(assignments.map(assignment => String(assignment.DEBoutId)));
+      storyAssignments.value = [
+        ...storyAssignments.value.filter(assignment => !providedIds.has(String(assignment.DEBoutId))),
+        ...assignments.map(assignment => ({ ...assignment }))
+      ];
+    };
+    const assignmentBout = ref(null);
+    const directorPicker = ref(null);
+    const assignmentDialog = ref(null);
+
+    watch(() => args.plannedBoutAssignments, applyProvidedAssignments, { deep: true, immediate: true });
+
+    const requestBoutDirector = async bout => {
+      assignmentBout.value = bout;
+      await nextTick();
+      assignmentDialog.value?.showModal();
+      directorPicker.value?.focus();
+    };
+
+    const assignPlannedDirector = ringId => {
+      const bout = assignmentBout.value;
+      const station = storyStations.value.find(item => String(item.RingId) === String(ringId));
+      if (!bout || !station) return;
+      const remaining = storyAssignments.value.filter(item => String(item.DEBoutId) !== String(bout.DEBoutId));
+      storyAssignments.value = [...remaining, { DEBoutId: bout.DEBoutId, RingId: station.RingId }];
+      assignmentBout.value = null;
+    };
 
     watch(
       () => args.bouts,
       bouts => {
         storyBouts.value = cloneStoryBouts(bouts);
+        redistributeAssignments();
       },
       { deep: true }
     );
@@ -43,6 +83,7 @@ const renderInteractiveBracket = args => ({
       () => args.plannedDirectingStations,
       stations => {
         storyStations.value = cloneStations(stations);
+        redistributeAssignments();
       },
       { deep: true }
     );
@@ -59,6 +100,7 @@ const renderInteractiveBracket = args => ({
       const nextStation = plannedDirectingStations.find(station => !assignedRingIds.has(String(station.RingId)));
       if (!nextStation) return;
       storyStations.value = [...storyStations.value, ...cloneStations([nextStation])];
+      redistributeAssignments();
     };
 
     const handleDirectingBout = bout => {
@@ -75,6 +117,13 @@ const renderInteractiveBracket = args => ({
       args,
       storyBouts,
       storyStations,
+      storyAssignments,
+      canAddDirector,
+      assignmentBout,
+      directorPicker,
+      assignmentDialog,
+      requestBoutDirector,
+      assignPlannedDirector,
       handleAddPlannedDirector,
       handleCloseDirectingBout,
       handleDirectingBout,
@@ -82,6 +131,19 @@ const renderInteractiveBracket = args => ({
     };
   },
   template: `
+    <div>
+      <dialog v-if="assignmentBout" ref="assignmentDialog" aria-label="Assign director" class="fixed inset-0 m-auto rounded border border-dropdownSelect bg-white p-4 shadow-lg backdrop:bg-black/20" @cancel="assignmentBout = null">
+        <label class="text-sm text-primaryHighlight">
+          Assign director to bout {{ assignmentBout.DEBoutId }}
+          <select ref="directorPicker" class="ml-2 rounded border border-dropdownSelect p-2" @change="assignPlannedDirector($event.target.value)">
+            <option value="">Choose director</option>
+            <option v-for="station in storyStations" :key="station.RingId" :value="station.RingId">
+              {{ station.Director?.DisplayName || 'Director TBD' }} / {{ station.RingName }}
+            </option>
+          </select>
+        </label>
+        <button type="button" class="ml-4 text-sm underline" @click="assignmentBout = null">Cancel</button>
+      </dialog>
     <Bracket
       v-bind="args"
       :connectedToServer="args.connectedToServer"
@@ -89,6 +151,9 @@ const renderInteractiveBracket = args => ({
       :hostingClubColors="args.hostingClubColors"
       :bouts="storyBouts"
       :plannedDirectingStations="storyStations"
+      :plannedBoutAssignments="storyAssignments"
+      :showAddPlannedDirectorCard="args.showAddPlannedDirectorCard && canAddDirector"
+      @request:bout-director="requestBoutDirector"
       @close:directing-bout="handleCloseDirectingBout"
       @request:add-planned-director="handleAddPlannedDirector"
       @update:directing-bout="handleDirectingBout"
@@ -96,6 +161,7 @@ const renderInteractiveBracket = args => ({
       @update:bout="persistStoryBout"
       @submit:bout="persistStoryBout"
     />
+    </div>
   `
 });
 
@@ -110,13 +176,18 @@ export default {
     hostingClubColors: getDEWithBouts.hostingClubColors,
     connectedToServer: true,
     role: 'admin',
-    plannedDirectingStations: [],
+    plannedDirectingStations: plannedDirectingStations.slice(0, 2),
     plannedBoutAssignments: [],
-    viewerPersonId: null,
-    showPlannedDirectorAssignments: false,
-    showAddPlannedDirectorCard: true
+    viewerPersonId: plannedSuggestionViewerId,
+    showPlannedDirectorAssignments: true,
+    showAddPlannedDirectorCard: true,
+    showBoutDirectorAssignment: true
   },
   argTypes: {
+    showBoutDirectorAssignment: {
+      control: 'boolean',
+      description: 'Include Assign director in the pairing hover menu. The parent supplies staff selection and saving.'
+    },
     bouts: {
       control: 'object'
     },
@@ -220,10 +291,38 @@ export const PlannedDirectorSuggestions = {
     status: 'de',
     role: 'Admin',
     plannedDirectingStations: plannedDirectingStations.slice(0, 2),
-    plannedBoutAssignments,
     viewerPersonId: plannedSuggestionViewerId,
     showPlannedDirectorAssignments: true,
-    showAddPlannedDirectorCard: true
+    showAddPlannedDirectorCard: true,
+    showBoutDirectorAssignment: true
+  }
+};
+
+export const ThreeDirectors = {
+  args: { ...PlannedDirectorSuggestions.args, plannedDirectingStations: plannedDirectingStations.slice(0, 3) }
+};
+
+export const FourDirectors = {
+  args: { ...PlannedDirectorSuggestions.args, plannedDirectingStations: plannedDirectingStations.slice(0, 4) }
+};
+
+export const FiveDirectors = {
+  args: { ...PlannedDirectorSuggestions.args, plannedDirectingStations: plannedDirectingStations.slice(0, 5) }
+};
+
+export const SixDirectors = {
+  args: { ...PlannedDirectorSuggestions.args, plannedDirectingStations }
+};
+
+export const HoverBoutActions = {
+  args: { ...PlannedDirectorSuggestions.args },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Hover over a pairing for Open bout and Assign director. Clicking the pairing still opens it directly. The picker in this story simulates the consuming app; the story simulates balanced section coverage through the semifinals, while production assignment and persistence remain app-owned.'
+      }
+    }
   }
 };
 
@@ -246,3 +345,15 @@ export const noBoutsYet = {
     status: 'live'
   }
 };
+
+export const PhoneDirector = {
+  args: { ...PlannedDirectorSuggestions.args, role: 'Director' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use a viewport narrower than 768px to see the phone directing view: a bout list, ring suggestions, connection status, and collapsed completed bouts. Organising controls stay on desktop, even when assignment options are enabled. Returning to desktop restores the selected List View or Tableau.'
+      }
+    }
+  }
+};