@dcrackel/hematournamentui 1.0.712 → 1.0.714

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

@@ -0,0 +1,242 @@
+import { DOMWrapper, mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
+import Bracket from './Bracket.vue';
+
+const createBout = (overrides = {}) => ({
+  BoutId: 42,
+  DEBoutId: 7,
+  RoundLabel: 'Semifinal',
+  Status: 'Scheduled',
+  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two' },
+  ...overrides
+});
+
+const bracketProps = bout => ({
+  bouts: [bout],
+  eventRules: [],
+  hostingClubColors: {},
+  connectedToServer: true,
+  showBoutDirectorAssignment: true
+});
+
+describe('Bracket assignment request contract', () => {
+  it.each(['Tableau', 'List View'])('renders %s without the removed assignment icon', async view => {
+    const wrapper = mount(Bracket, {
+      props: bracketProps(createBout()),
+      global: { stubs: { DirectorModal: true, EditBoutModal: true } }
+    });
+    try {
+      wrapper.vm.handleViewChange(view);
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-testid="assign-bout-director"]').exists()).toBe(false);
+      expect(wrapper.find('.fa-user-plus').exists()).toBe(false);
+    } finally {
+      wrapper.unmount();
+    }
+  });
+
+  it('keeps forwarded requests detached and leaves bout state unchanged', () => {
+    const bout = createBout();
+    const wrapper = shallowMount(Bracket, { props: bracketProps(bout) });
+    try {
+      wrapper.findComponent(Tableau).vm.$emit('request:bout-director', bout);
+      expect(wrapper.emitted('request:bout-director')).toEqual([[bout]]);
+      expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+      expect(wrapper.emitted('update:bout')).toBeUndefined();
+      wrapper.emitted('request:bout-director')[0][0].Person1.DisplayName = 'Changed';
+      expect(bout.Person1.DisplayName).toBe('Fencer One');
+      expect(bout.Status).toBe('Scheduled');
+    } finally {
+      wrapper.unmount();
+    }
+  });
+
+  it.each(['Active', 'Completed'])('rejects forwarded requests after parent status becomes %s', async status => {
+    const bout = createBout();
+    const wrapper = shallowMount(Bracket, { props: bracketProps(bout) });
+    try {
+      await wrapper.setProps({ bouts: [{ ...bout, Status: status }] });
+      wrapper.findComponent(Tableau).vm.$emit('request:bout-director', bout);
+      expect(wrapper.emitted('request:bout-director')).toBeUndefined();
+    } finally {
+      wrapper.unmount();
+    }
+  });
+});
+
+const mountedBrackets = [];
+const mountHoverBracket = async (view, bout, overrides = {}) => {
+  const wrapper = mount(Bracket, {
+    attachTo: document.body,
+    props: { ...bracketProps(bout), ...overrides },
+    global: { stubs: { DirectorModal: true, EditBoutModal: true } }
+  });
+  mountedBrackets.push(wrapper);
+  wrapper.vm.handleViewChange(view);
+  await nextTick();
+  return wrapper;
+};
+const revealBoutActions = async wrapper => {
+  await wrapper.get('[data-testid="bout-actions-trigger"]').trigger('mouseenter');
+  vi.advanceTimersByTime(200);
+  await nextTick();
+  await nextTick();
+  return new DOMWrapper(document.querySelector('[data-testid="bout-actions-menu"]'));
+};
+
+describe.each(['Tableau', 'List View'])('%s hover bout actions', view => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    mountedBrackets.splice(0).forEach(wrapper => wrapper.unmount());
+    vi.useRealTimers();
+  });
+
+  it('shows the assigned director above Assign Director and reconciles reassignment while open', async () => {
+    const bout = createBout({ RefName: 'Unassigned' });
+    const station = {
+      RingId: 7,
+      RingName: 'Ring 7',
+      Color: 'red',
+      Director: { PersonId: 99, DisplayName: 'Dave Smith' }
+    };
+    const wrapper = await mountHoverBracket(view, bout, {
+      plannedDirectingStations: [station],
+      plannedBoutAssignments: [{ DEBoutId: bout.DEBoutId, RingId: 7 }]
+    });
+    const panel = await revealBoutActions(wrapper);
+    const action = panel.get('[data-action="assign-director"]');
+    const description = panel.get('[data-testid="action-description"]');
+    expect(description.text()).toBe('Dave Smith');
+    expect(description.element.style.color).toBe('red');
+    expect(description.element.closest('button')).toBeNull();
+    expect(action.text()).toBe('Assign Director');
+    await description.trigger('click');
+    expect(wrapper.emitted('request:bout-director')).toBeUndefined();
+    expect(panel.isVisible()).toBe(true);
+    await wrapper.setProps({
+      plannedDirectingStations: [
+        { ...station, Color: 'green', Director: { PersonId: 100, DisplayName: 'Alex Morgan' } }
+      ]
+    });
+    expect(panel.get('[data-testid="action-description"]').text()).toBe('Alex Morgan');
+    expect(panel.get('[data-testid="action-description"]').element.style.color).toBe('green');
+    await panel.get('[data-action="assign-director"]').trigger('click');
+    expect(wrapper.emitted('request:bout-director')).toEqual([[bout]]);
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(bout.RefName).toBe('Unassigned');
+  });
+
+  it('omits the name for an unassigned bout', async () => {
+    const wrapper = await mountHoverBracket(view, createBout({ RefName: ' Unassigned ' }));
+    const panel = await revealBoutActions(wrapper);
+    expect(panel.find('[data-testid="action-description"]').exists()).toBe(false);
+    expect(panel.get('[data-action="assign-director"]').text()).toBe('Assign Director');
+  });
+
+  it('shows the saved director for an active bout instead of an earlier planned director', async () => {
+    const bout = createBout({ Status: 'Active', RefereeId: 99, RefName: 'Dave Smith' });
+    const wrapper = await mountHoverBracket(view, bout, {
+      plannedDirectingStations: [{ RingId: 7, Color: 'red', Director: { PersonId: 100, DisplayName: 'Alex Morgan' } }],
+      plannedBoutAssignments: [{ DEBoutId: bout.DEBoutId, RingId: 7 }]
+    });
+    const panel = await revealBoutActions(wrapper);
+    expect(panel.get('[data-testid="action-description"]').text()).toBe('Dave Smith');
+    expect(panel.text()).toContain('Resume bout');
+    expect(panel.text()).not.toContain('Alex Morgan');
+    expect(panel.get('[data-testid="action-description"]').element.style.color).toBe('');
+    expect(panel.find('[data-action="assign-director"]').exists()).toBe(false);
+  });
+
+  it.each(['Final', 'Grand Final', 'Table of 2'])(
+    'keeps %s claimable without offering director assignment',
+    async RoundLabel => {
+      const bout = createBout({ RoundLabel });
+      const wrapper = await mountHoverBracket(view, bout);
+      const panel = await revealBoutActions(wrapper);
+      expect(panel.find('[data-action="assign-director"]').exists()).toBe(false);
+      expect(panel.get('[data-action="open"]').text()).toBe('Open bout');
+      wrapper.findComponent(Tableau).vm.$emit('request:bout-director', bout);
+      expect(wrapper.emitted('request:bout-director')).toBeUndefined();
+      await panel.get('[data-action="open"]').trigger('click');
+      expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+      expect(wrapper.vm.showDirectorModal).toBe(false);
+    }
+  );
+
+  it('requests assignment without opening the bout or mutating scores or status', async () => {
+    const bout = createBout();
+    const wrapper = await mountHoverBracket(view, bout);
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    const panel = await revealBoutActions(wrapper);
+    expect(panel.text()).toContain('Open bout');
+    await panel.get('[data-action="assign-director"]').trigger('click');
+    expect(wrapper.emitted('request:bout-director')).toEqual([[bout]]);
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(wrapper.vm.showDirectorModal).toBe(false);
+    expect(bout.Status).toBe('Scheduled');
+    expect(bout.RefereeId).toBeUndefined();
+  });
+
+  it('opens the scheduled bout through the normal directing contract', async () => {
+    const bout = createBout();
+    const wrapper = await mountHoverBracket(view, bout);
+    const panel = await revealBoutActions(wrapper);
+    await panel.get('[data-action="open"]').trigger('click');
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.emitted('request:bout-director')).toBeUndefined();
+    expect(wrapper.vm.showDirectorModal).toBe(false);
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
+    expect(wrapper.vm.showDirectorModal).toBe(true);
+  });
+
+  it('allows future pairing assignment while withholding Open bout', async () => {
+    const bout = createBout({ Person1: { PersonId: 0, DisplayName: 'BYE' }, Person2: null });
+    const wrapper = await mountHoverBracket(view, bout);
+    const panel = await revealBoutActions(wrapper);
+    expect(panel.find('[data-action="open"]').exists()).toBe(false);
+    await panel.get('[data-action="assign-director"]').trigger('click');
+    expect(wrapper.emitted('request:bout-director')).toEqual([[bout]]);
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+  });
+
+  it('keeps assignment unavailable unless enabled by the parent', async () => {
+    const wrapper = await mountHoverBracket(view, createBout(), { showBoutDirectorAssignment: false });
+    const panel = await revealBoutActions(wrapper);
+    expect(panel.find('[data-action="assign-director"]').exists()).toBe(false);
+    expect(panel.get('[data-action="open"]').text()).toBe('Open bout');
+  });
+
+  it('changes the menu to Resume bout when the parent starts a bout', async () => {
+    const bout = createBout();
+    const wrapper = await mountHoverBracket(view, bout);
+    await revealBoutActions(wrapper);
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
+    const panel = new DOMWrapper(document.querySelector('[data-testid="bout-actions-menu"]'));
+    expect(panel.get('[data-action="open"]').text()).toBe('Resume bout');
+    expect(panel.find('[data-action="assign-director"]').exists()).toBe(false);
+    await panel.get('[data-action="open"]').trigger('click');
+    expect(wrapper.emitted('update:directing-bout')[0][0].Status).toBe('Active');
+  });
+});
+
+describe('Completed tableau bout hover actions', () => {
+  it('offers Edit bout and opens the existing edit modal', async () => {
+    vi.useFakeTimers();
+    try {
+      const wrapper = await mountHoverBracket('Tableau', createBout({ Status: 'Completed' }));
+      const panel = await revealBoutActions(wrapper);
+      expect(panel.get('[data-action="open"]').text()).toBe('Edit bout');
+      expect(panel.find('[data-action="assign-director"]').exists()).toBe(false);
+      await panel.get('[data-action="open"]').trigger('click');
+      expect(wrapper.vm.showEditBoutModal).toBe(true);
+      expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+    } finally {
+      mountedBrackets.splice(0).forEach(wrapper => wrapper.unmount());
+      vi.useRealTimers();
+    }
+  });
+});

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

@@ -0,0 +1,131 @@
+import { shallowMount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } 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 ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import Bracket from './Bracket.vue';
+
+const bout = {
+  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 stations = [{ RingId: 7, RingName: 'Ring 7', Director: { PersonId: 99, DisplayName: 'Director' } }];
+const wrappers = [];
+const mountBracket = (width = 390) => {
+  vi.stubGlobal('innerWidth', width);
+  const wrapper = shallowMount(Bracket, {
+    props: {
+      bouts: [bout],
+      eventRules: [],
+      hostingClubColors: {},
+      connectedToServer: true,
+      role: 'Admin',
+      showBoutDirectorAssignment: true,
+      showPlannedDirectorAssignments: true,
+      plannedDirectingStations: stations,
+      plannedBoutAssignments: [{ DEBoutId: 1, RingId: 7 }],
+      viewerPersonId: 99
+    }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+};
+const resize = async (wrapper, width) => {
+  window.innerWidth = width;
+  window.dispatchEvent(new Event('resize'));
+  await wrapper.vm.$nextTick();
+};
+
+afterEach(() => {
+  wrappers.splice(0).forEach(wrapper => wrapper.unmount());
+  vi.unstubAllGlobals();
+});
+
+describe('Bracket phone directing view', () => {
+  it.each([320, 390, 767])('shows a bout list without organising controls at %ipx', width => {
+    const wrapper = mountBracket(width);
+    expect(wrapper.findComponent(Tableau).props()).toMatchObject({
+      listView: true,
+      showBoutDirectorAssignment: false,
+      plannedDirectingStations: stations,
+      viewerPersonId: 99
+    });
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
+    expect(
+      wrapper
+        .findComponent(EditEventsTopMenu)
+        .props('tabs')
+        .map(tab => tab.id)
+    ).toEqual(['Pools', 'Pool Results', 'Bracket', 'Final', 'Penalties']);
+    wrapper.findComponent(Tableau).vm.$emit('request:bout-director', bout);
+    expect(wrapper.emitted('request:bout-director')).toBeUndefined();
+  });
+
+  it('preserves the desktop view choice and full navigation across phone resizing', async () => {
+    const wrapper = mountBracket(1280);
+    expect(wrapper.findComponent(Tableau).props('listView')).toBe(false);
+    wrapper.findComponent(ToggleHeader).vm.$emit('update:selection', 'List View');
+    await wrapper.vm.$nextTick();
+    expect(
+      wrapper
+        .findComponent(EditEventsTopMenu)
+        .props('tabs')
+        .map(tab => tab.id)
+    ).toContain('Staff');
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(true);
+    await resize(wrapper, 390);
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
+    await resize(wrapper, 768);
+    expect(wrapper.findComponent(Tableau).props('listView')).toBe(true);
+    expect(wrapper.findComponent(ToggleHeader).props('currentSelection')).toBe('List View');
+    expect(wrapper.findComponent(Tableau).props('showBoutDirectorAssignment')).toBe(true);
+    wrapper.findComponent(ToggleHeader).vm.$emit('update:selection', 'Tableau');
+    await wrapper.vm.$nextTick();
+    await resize(wrapper, 390);
+    expect(wrapper.findComponent(Tableau).props('listView')).toBe(true);
+    await resize(wrapper, 1280);
+    expect(wrapper.findComponent(Tableau).props('listView')).toBe(false);
+    expect(wrapper.findComponent(ToggleHeader).props('currentSelection')).toBe('Tableau');
+  });
+
+  it('keeps scheduled start, active resume, and modal close parent-owned on phones', async () => {
+    const wrapper = mountBracket();
+    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);
+    const activeBout = { ...bout, Status: 'Active' };
+    await wrapper.setProps({ bouts: [activeBout] });
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+    wrapper.findComponent(DirectorModal).vm.$emit('update:closeModal');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('close:directing-bout')).toEqual([[activeBout]]);
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(wrapper.vm.boutsData[0]).toEqual(activeBout);
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', activeBout);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+  });
+
+  it('retains completed editing and rejects incomplete bouts on phones', async () => {
+    const wrapper = mountBracket();
+    const completedBout = { ...bout, Status: 'Completed' };
+    await wrapper.setProps({ bouts: [completedBout] });
+    wrapper.findComponent(Tableau).vm.$emit('action:editBout', completedBout);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findComponent(EditBoutModal).props('show')).toBe(true);
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+    await wrapper.setProps({ bouts: [{ ...bout, Person2: null }] });
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', { ...bout, Person2: null });
+    expect(wrapper.emitted('update:directing-bout')).toBeUndefined();
+  });
+});

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

@@ -1,39 +1,50 @@
-import portraitUrl from '../../../../assets/portrait1.png';
-
-const createBoutAssignments = (ringId, boutIds) => boutIds.map(DEBoutId => ({ DEBoutId, RingId: ringId }));
-
-export const plannedDirectingStations = [
-  {
-    RingId: 1,
-    RingName: 'Ring 1',
-    Color: '#2563eb',
-    Director: { PersonId: 1001, DisplayName: 'Alex Morgan', PortraitUrl: portraitUrl }
-  },
-  {
-    RingId: 2,
-    RingName: 'Ring 2',
-    Color: '#dc2626',
-    Director: { PersonId: 1002, DisplayName: 'Jordan Lee', PortraitUrl: portraitUrl }
-  },
-  {
-    RingId: 3,
-    RingName: 'Ring 3',
-    Color: '#059669',
-    Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: portraitUrl }
-  },
-  {
-    RingId: 4,
-    RingName: 'Ring 4',
-    Color: '#d97706',
-    Director: { PersonId: 1004, DisplayName: 'Taylor Quinn', PortraitUrl: portraitUrl }
-  }
-];
-
-export const plannedBoutAssignments = [
-  ...createBoutAssignments(1, [65, 66, 67, 68, 69, 70, 71, 72, 97, 98, 99, 100, 113, 114, 121, 125]),
-  ...createBoutAssignments(2, [73, 74, 75, 76, 77, 78, 79, 80, 101, 102, 103, 104, 115, 116, 122]),
-  ...createBoutAssignments(3, [81, 82, 83, 84, 85, 86, 87, 88, 105, 106, 107, 108, 117, 118, 123, 126]),
-  ...createBoutAssignments(4, [89, 90, 91, 92, 93, 94, 95, 96, 109, 110, 111, 112, 119, 120, 124, 127])
-];
-
-export const plannedSuggestionViewerId = plannedDirectingStations[0].Director.PersonId;
+import portraitUrl from '../../../../assets/portrait1.png';
+
+export const plannedDirectingStations = [
+  {
+    RingId: 1,
+    RingName: 'Ring 1',
+    Color: '#2563eb',
+    Director: { PersonId: 1001, DisplayName: 'Alex Morgan', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 2,
+    RingName: 'Ring 2',
+    Color: '#dc2626',
+    Director: { PersonId: 1002, DisplayName: 'Jordan Lee', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 3,
+    RingName: 'Ring 3',
+    Color: '#059669',
+    Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 4,
+    RingName: 'Ring 4',
+    Color: '#d97706',
+    Director: { PersonId: 1004, DisplayName: 'Taylor Quinn', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 5,
+    RingName: 'Ring 5',
+    Color: '#9333ea',
+    Director: { PersonId: 1005, DisplayName: 'Casey Brooks', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 6,
+    RingName: 'Ring 6',
+    Color: '#0891b2',
+    Director: { PersonId: 1006, DisplayName: 'Drew Parker', PortraitUrl: portraitUrl }
+  }
+];
+
+export const plannedSuggestionViewerId = plannedDirectingStations[0].Director.PersonId;
+
+export const availableDirectors = plannedDirectingStations.map((station, index) => ({
+  ...station.Director,
+  Color: station.Color,
+  DefaultRingId: index < 2 ? station.RingId : null
+}));
+
+export const availableRings = plannedDirectingStations.map(({ RingId, RingName }) => ({ RingId, RingName }));

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

@@ -0,0 +1,201 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick, reactive } from 'vue';
+import { afterEach, describe, expect, it } from 'vitest';
+import Bracket from './Bracket.vue';
+import meta, * as stories from './Bracket.stories.js';
+
+const wrappers = [];
+const mountStory = story => {
+  const args = reactive({ ...meta.args, ...story.args });
+  const wrapper = shallowMount(meta.render(args));
+  wrappers.push(wrapper);
+  return { wrapper, args, bracket: () => wrapper.findComponent(Bracket) };
+};
+const getRing = (bracket, bout) =>
+  bracket.props('plannedBoutAssignments').find(item => String(item.DEBoutId) === String(bout.DEBoutId))?.RingId;
+
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+describe('Bracket story assignment simulation', () => {
+  it('enables assignment and its panel in every bracket story', () => {
+    for (const story of Object.values(stories).filter(value => value !== meta)) {
+      const args = { ...meta.args, ...story.args };
+      expect(args.showBoutDirectorAssignment).toBe(true);
+      expect(args.showPlannedDirectorAssignments).toBe(true);
+      expect(args.plannedDirectingStations.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('starts with two actual stations and recalculates scheduled coverage when directors are added', async () => {
+    const { bracket } = mountStory(stories.PlannedDirectorSuggestions);
+    expect(bracket().props('plannedDirectingStations')).toHaveLength(2);
+    const bouts = bracket().props('bouts');
+    const active = { ...bouts.find(bout => bout.Person1.PersonId > 0 && bout.Person2.PersonId > 0), Status: 'Active' };
+    const originalRing = getRing(bracket(), active);
+    bracket().vm.$emit('update:bout', active);
+    await nextTick();
+    for (const count of [3, 4, 5, 6]) {
+      bracket().vm.$emit('request:add-planned-director');
+      await nextTick();
+      const stationIds = bracket()
+        .props('plannedDirectingStations')
+        .map(station => station.RingId);
+      expect(stationIds).toHaveLength(count);
+      expect(
+        bracket()
+          .props('plannedBoutAssignments')
+          .every(item => stationIds.includes(item.RingId))
+      ).toBe(true);
+      expect(getRing(bracket(), active)).toBe(originalRing);
+      expect(
+        bracket()
+          .props('bouts')
+          .find(bout => bout.BoutId === active.BoutId).Status
+      ).toBe('Active');
+    }
+    expect(bracket().props('showAddPlannedDirectorCard')).toBe(false);
+  });
+
+  it('recalculates from station controls and assigns semifinals and keeps finals shared for every director count', async () => {
+    for (const story of [
+      stories.PlannedDirectorSuggestions,
+      stories.ThreeDirectors,
+      stories.FourDirectors,
+      stories.FiveDirectors,
+      stories.SixDirectors
+    ]) {
+      const { bracket, args } = mountStory(story);
+      const bouts = bracket().props('bouts');
+      const shared = bouts.filter(bout => bout.RoundLabel === 'Final');
+      const semifinals = bouts.filter(bout => bout.RoundLabel === 'Semifinal');
+      expect(semifinals.every(bout => getRing(bracket(), bout) !== undefined)).toBe(true);
+      expect(shared.every(bout => getRing(bracket(), bout) === undefined)).toBe(true);
+      args.plannedDirectingStations = stories.SixDirectors.args.plannedDirectingStations;
+      await nextTick();
+      expect(bracket().props('plannedDirectingStations')).toHaveLength(6);
+      expect(semifinals.every(bout => getRing(bracket(), bout) !== undefined)).toBe(true);
+      expect(shared.every(bout => getRing(bracket(), bout) === undefined)).toBe(true);
+    }
+  });
+
+  it.each(['Active', 'Completed'])(
+    'redistributes scheduled work after removal while preserving a %s bout',
+    async Status => {
+      const { bracket } = mountStory(stories.PlannedDirectorSuggestions);
+      const station = bracket().props('plannedDirectingStations')[0];
+      const bout = bracket()
+        .props('bouts')
+        .find(item => item.Person1.PersonId > 0 && item.Person2.PersonId > 0);
+      const savedBout = {
+        ...bout,
+        Status,
+        RefereeId: station.Director.PersonId,
+        RefName: station.Director.DisplayName,
+        Score1: 4,
+        Score2: 3
+      };
+      bracket().vm.$emit('update:bout', savedBout);
+      await nextTick();
+      bracket().vm.$emit('request:remove-planned-director', station);
+      await nextTick();
+      expect(
+        bracket()
+          .props('plannedDirectingStations')
+          .map(item => item.RingId)
+      ).toEqual([2]);
+      expect(
+        bracket()
+          .props('bouts')
+          .find(item => item.BoutId === bout.BoutId)
+      ).toEqual(savedBout);
+      const scheduledIds = new Set(
+        bracket()
+          .props('bouts')
+          .filter(item => item.Status === 'Scheduled')
+          .map(item => item.DEBoutId)
+      );
+      expect(
+        bracket()
+          .props('plannedBoutAssignments')
+          .filter(item => scheduledIds.has(item.DEBoutId))
+          .every(item => item.RingId === 2)
+      ).toBe(true);
+      expect(getRing(bracket(), savedBout)).toBe(1);
+    }
+  );
+
+  it('supports removing every director and adding a removed director again without changing story args', async () => {
+    const { bracket, args } = mountStory(stories.PlannedDirectorSuggestions);
+    for (const station of args.plannedDirectingStations) {
+      bracket().vm.$emit('request:remove-planned-director', station);
+      await nextTick();
+    }
+    expect(bracket().props('plannedDirectingStations')).toEqual([]);
+    expect(bracket().props('plannedBoutAssignments')).toEqual([]);
+    expect(bracket().props('showAddPlannedDirectorCard')).toBe(true);
+    bracket().vm.$emit('request:add-planned-director');
+    await nextTick();
+    expect(
+      bracket()
+        .props('plannedDirectingStations')
+        .map(station => station.RingId)
+    ).toEqual([1]);
+    expect(
+      bracket()
+        .props('plannedBoutAssignments')
+        .every(item => item.RingId === 1)
+    ).toBe(true);
+    expect(args.plannedDirectingStations).toHaveLength(2);
+  });
+
+  it('keeps the signed-in director identity when resuming a bout after removing their planned station', async () => {
+    const { bracket } = mountStory(stories.PlannedDirectorSuggestions);
+    const station = bracket().props('plannedDirectingStations')[0];
+    const bout = bracket()
+      .props('bouts')
+      .find(item => item.Person1.PersonId > 0 && item.Person2.PersonId > 0);
+    bracket().vm.$emit('update:directing-bout', bout);
+    await nextTick();
+    const active = bracket()
+      .props('bouts')
+      .find(item => item.BoutId === bout.BoutId);
+    bracket().vm.$emit('request:remove-planned-director', station);
+    await nextTick();
+    bracket().vm.$emit('update:directing-bout', { ...active, Score1: 3 });
+    await nextTick();
+    expect(
+      bracket()
+        .props('bouts')
+        .find(item => item.BoutId === bout.BoutId)
+    ).toMatchObject({
+      RefereeId: station.Director.PersonId,
+      RefName: station.Director.DisplayName,
+      Status: 'Active',
+      Score1: 3
+    });
+  });
+
+  it('applies staff-fed roster saves and ring moves only to DE plans', async () => {
+    const { bracket, args } = mountStory(stories.PlannedDirectorSuggestions);
+    const beforeBouts = JSON.parse(JSON.stringify(bracket().props('bouts')));
+    const original = bracket().props('plannedDirectingStations')[0];
+    const updated = { ...original, RingId: 3, RingName: 'Ring 3' };
+    bracket().vm.$emit('update:planned-directing-stations', [
+      updated,
+      ...bracket().props('plannedDirectingStations').slice(1)
+    ]);
+    await nextTick();
+    expect(bracket().props('plannedDirectingStations')[0]).toEqual(updated);
+    expect(
+      bracket()
+        .props('plannedBoutAssignments')
+        .every(item => [2, 3].includes(item.RingId))
+    ).toBe(true);
+    expect(args.plannedDirectingStations[0].RingId).toBe(1);
+    expect(args.availableDirectors[0].DefaultRingId).toBe(1);
+    bracket().vm.$emit('update:planned-directing-stations', [updated]);
+    await nextTick();
+    expect(bracket().props('plannedDirectingStations')).toEqual([updated]);
+    expect(bracket().props('bouts')).toEqual(beforeBouts);
+  });
+});