@dcrackel/hematournamentui 1.0.713 → 1.0.714

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.stories.js

@@ -23,7 +23,16 @@ export default {
   }
 };
 
-export const Assigned = {};
+export const Assigned = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The remove control emits action:remove with a detached station payload. The parent updates planned coverage.'
+      }
+    }
+  }
+};
 
 export const AddDirector = {
   args: {

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.test.js

@@ -42,4 +42,35 @@ describe('BracketDirectorAssignmentCard', () => {
     expect(wrapper.emitted('action:add')).toEqual([[]]);
     expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
   });
+
+  it('emits a detached station when removing a director and waits for updated props', async () => {
+    const selectedStation = structuredClone(station);
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station: selectedStation } });
+    const removeButton = wrapper.get('[data-testid="remove-bracket-director"]');
+    expect(removeButton.attributes('aria-label')).toBe('Remove Sam Rivera from Ring 3');
+    await removeButton.trigger('click');
+    const payload = wrapper.emitted('action:remove')[0][0];
+    expect(payload).toEqual(selectedStation);
+    expect(payload).not.toBe(selectedStation);
+    payload.Director.DisplayName = 'Changed';
+    expect(selectedStation.Director.DisplayName).toBe('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').exists()).toBe(true);
+    await wrapper.setProps({ station: null });
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').exists()).toBe(false);
+  });
+
+  it('has no remove control on the add card or an empty card', () => {
+    const addCard = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+    const emptyCard = shallowMount(BracketDirectorAssignmentCard);
+    expect(addCard.find('[data-testid="remove-bracket-director"]').exists()).toBe(false);
+    expect(emptyCard.find('[data-testid="remove-bracket-director"]').exists()).toBe(false);
+  });
+
+  it('displays the ring as text and reflects parent updates', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+    expect(wrapper.find('select').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+    await wrapper.setProps({ station: { ...station, RingId: 1, RingName: 'Ring 1' } });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 1');
+  });
 });

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

@@ -45,6 +45,16 @@
       <BaseText :text="ringLabel" color="quaternary" size="xs" />
       <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
     </div>
+    <button
+      type="button"
+      data-testid="remove-bracket-director"
+      :aria-label="removeLabel"
+      :title="removeLabel"
+      class="flex h-8 w-8 flex-none items-center justify-center rounded text-quaternary transition hover:bg-dropdownSelect hover:text-alarm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+      @click.stop="removeDirector"
+    >
+      <BaseIcon iconName="fa-xmark" color="none" size="sm" />
+    </button>
   </article>
 </template>
 
@@ -63,7 +73,7 @@ const getInitials = displayName =>
 export default {
   name: 'BracketDirectorAssignmentCard',
   components: { BaseIcon, BaseText },
-  emits: ['action:add'],
+  emits: ['action:add', 'action:remove'],
   props: {
     station: {
       type: Object,
@@ -79,7 +89,16 @@ export default {
       default: 'Click here to add director'
     }
   },
+  methods: {
+    removeDirector() {
+      if (!this.station) return;
+      this.$emit('action:remove', JSON.parse(JSON.stringify(this.station)));
+    }
+  },
   computed: {
+    removeLabel() {
+      return 'Remove ' + this.directorName + ' from ' + this.ringLabel;
+    },
     assignmentLabel() {
       return `${this.ringLabel}, Director ${this.directorName}`;
     },

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

@@ -26,4 +26,26 @@ describe('BracketDirectorAssignmentPanel', () => {
 
     expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
   });
+
+  it('forwards remove intent and reconciles the parent station list', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:remove', stations[0]);
+    expect(wrapper.emitted('request:remove-planned-director')).toEqual([[stations[0]]]);
+    expect(wrapper.props('stations')).toHaveLength(2);
+    await wrapper.setProps({ stations: stations.slice(1) });
+    expect(
+      wrapper
+        .findAllComponents(BracketDirectorAssignmentCard)
+        .filter(card => card.props('variant') !== 'add')
+        .map(card => card.props('station'))
+    ).toEqual([stations[1]]);
+  });
+
+  it('opens director management', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, {
+      props: { stations, canManageDirectors: true }
+    });
+    await wrapper.get('[data-testid="manage-bracket-directors"]').trigger('click');
+    expect(wrapper.emitted('request:manage-planned-directors')).toEqual([[]]);
+  });
 });

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue

@@ -3,18 +3,34 @@
     data-testid="bracket-director-assignment-panel"
     class="w-full rounded-xl border border-dropdownSelect bg-bannerBackground p-4 shadow-lg xl:sticky xl:top-4 xl:w-72"
   >
-    <div class="mb-4">
-      <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
-      <BaseText
-        class="mt-1"
-        color="quaternary"
-        size="xs"
-        text="Plan ring coverage. Scheduled bouts may still be moved between rings."
-      />
+    <div class="mb-4 flex items-start justify-between gap-3">
+      <div>
+        <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
+        <BaseText
+          class="mt-1"
+          color="quaternary"
+          size="xs"
+          text="Plan ring coverage. Scheduled bouts may still be moved between rings."
+        />
+      </div>
+      <button
+        v-if="canManageDirectors"
+        type="button"
+        data-testid="manage-bracket-directors"
+        class="rounded border border-dropdownSelect bg-white px-2 py-1 text-xs text-primaryHighlight hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+        @click="$emit('request:manage-planned-directors')"
+      >
+        Manage
+      </button>
     </div>
 
     <div class="space-y-3">
-      <BracketDirectorAssignmentCard v-for="station in stations" :key="station.RingId" :station="station" />
+      <BracketDirectorAssignmentCard
+        v-for="station in stations"
+        :key="station.RingId"
+        :station="station"
+        @action:remove="$emit('request:remove-planned-director', $event)"
+      />
       <BracketDirectorAssignmentCard
         v-if="showAddCard"
         variant="add"
@@ -31,8 +47,9 @@ import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignm
 export default {
   name: 'BracketDirectorAssignmentPanel',
   components: { BaseText, BracketDirectorAssignmentCard },
-  emits: ['request:add-planned-director'],
+  emits: ['request:add-planned-director', 'request:remove-planned-director', 'request:manage-planned-directors'],
   props: {
+    canManageDirectors: { type: Boolean, default: false },
     stations: {
       type: Array,
       default: () => []

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

@@ -9,7 +9,12 @@ import {
   getStoryDirectorId,
   replaceStoryBout
 } from './BracketStoryHarness.js';
-import { plannedDirectingStations, plannedSuggestionViewerId } from './BracketPlannedSuggestions.js';
+import {
+  availableDirectors,
+  availableRings,
+  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';
@@ -29,8 +34,9 @@ const renderInteractiveBracket = args => ({
     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))
+      (args.availableDirectors || availableDirectors).some(
+        director =>
+          !storyStations.value.some(station => String(station.Director?.PersonId) === String(director.PersonId))
       )
     );
     const redistributeAssignments = () => {
@@ -93,7 +99,11 @@ const renderInteractiveBracket = args => ({
     };
 
     const getViewerStation = () =>
-      storyStations.value.find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
+      [
+        ...storyStations.value,
+        ...plannedDirectingStations,
+        ...(args.availableDirectors || []).map(Director => ({ Director }))
+      ].find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
 
     const handleAddPlannedDirector = () => {
       const assignedRingIds = new Set(storyStations.value.map(station => String(station.RingId)));
@@ -125,6 +135,16 @@ const renderInteractiveBracket = args => ({
       requestBoutDirector,
       assignPlannedDirector,
       handleAddPlannedDirector,
+      handleRemovePlannedDirector(station) {
+        const remainingStations = storyStations.value.filter(item => String(item.RingId) !== String(station?.RingId));
+        if (remainingStations.length === storyStations.value.length) return;
+        storyStations.value = remainingStations;
+        redistributeAssignments();
+      },
+      handlePlannedDirectorsUpdate(stations) {
+        storyStations.value = cloneStations(stations);
+        redistributeAssignments();
+      },
       handleCloseDirectingBout,
       handleDirectingBout,
       persistStoryBout
@@ -156,6 +176,8 @@ const renderInteractiveBracket = args => ({
       @request:bout-director="requestBoutDirector"
       @close:directing-bout="handleCloseDirectingBout"
       @request:add-planned-director="handleAddPlannedDirector"
+      @request:remove-planned-director="handleRemovePlannedDirector"
+      @update:planned-directing-stations="handlePlannedDirectorsUpdate"
       @update:directing-bout="handleDirectingBout"
       @request:bout-active="handleDirectingBout"
       @update:bout="persistStoryBout"
@@ -171,6 +193,8 @@ export default {
   tags: ['Bracket'],
   render: renderInteractiveBracket,
   args: {
+    availableDirectors,
+    rings: availableRings,
     bouts: getDEWithBouts.pools[0].Bouts,
     eventRules: getDEWithBouts.eventRules,
     hostingClubColors: getDEWithBouts.hostingClubColors,
@@ -184,6 +208,11 @@ export default {
     showBoutDirectorAssignment: true
   },
   argTypes: {
+    availableDirectors: {
+      control: 'object',
+      description: 'Eligible staff, including DE-only directors, supplied by the parent.'
+    },
+    rings: { control: 'object', description: 'Available rings supplied by the parent.' },
     showBoutDirectorAssignment: {
       control: 'boolean',
       description: 'Include Assign director in the pairing hover menu. The parent supplies staff selection and saving.'

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

@@ -1,178 +1,218 @@
-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();
-  });
-});
+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();
+  });
+
+  it('forwards removal of a right-column director without changing authoritative bout fields', async () => {
+    const station = { RingId: 1, RingName: 'Ring 1', Director: { PersonId: 99, DisplayName: 'Dave Smith' } };
+    const bout = createBout({ Status: 'Active', RefereeId: 99, RefName: 'Dave Smith' });
+    const wrapper = mountBracket([bout], { plannedDirectingStations: [station] });
+    wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit('request:remove-planned-director', station);
+    expect(wrapper.emitted('request:remove-planned-director')).toEqual([[station]]);
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(wrapper.vm.boutsData).toEqual([bout]);
+    expect(wrapper.props('plannedDirectingStations')).toEqual([station]);
+    await wrapper.setProps({ plannedDirectingStations: [] });
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).props('stations')).toEqual([]);
+    wrapper.unmount();
+  });
+
+  it('opens the staff-fed modal and forwards detached roster save intent without changing bout or station props', async () => {
+    const selected = {
+      RingId: 1,
+      RingName: 'Ring 1',
+      Director: { PersonId: 99, DisplayName: 'Dave Smith' },
+      Color: '#2563eb'
+    };
+    const wrapper = mountBracket(undefined, {
+      availableDirectors: [selected.Director],
+      rings: [{ RingId: 1, RingName: 'Ring 1' }],
+      plannedDirectingStations: [selected]
+    });
+    wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit('request:add-planned-director');
+    await wrapper.vm.$nextTick();
+    const modal = wrapper.findComponent({ name: 'BracketDirectorsModal' });
+    expect(modal.props('show')).toBe(true);
+    expect(wrapper.emitted('request:add-planned-director')).toBeUndefined();
+    modal.vm.$emit('submit:stations', []);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:planned-directing-stations')).toEqual([[[]]]);
+    expect(wrapper.props('plannedDirectingStations')).toEqual([selected]);
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(modal.props('show')).toBe(false);
+    wrapper.unmount();
+  });
+});