@dcrackel/hematournamentui 1.0.712 → 1.0.714

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,
@@ -9,7 +10,8 @@ import {
   replaceStoryBout
 } from './BracketStoryHarness.js';
 import {
-  plannedBoutAssignments,
+  availableDirectors,
+  availableRings,
   plannedDirectingStations,
   plannedSuggestionViewerId
 } from './BracketPlannedSuggestions.js';
@@ -30,11 +32,55 @@ const renderInteractiveBracket = args => ({
   setup() {
     const storyBouts = ref(cloneStoryBouts(args.bouts));
     const storyStations = ref(cloneStations(args.plannedDirectingStations));
+    const storyAssignments = ref([]);
+    const canAddDirector = computed(() =>
+      (args.availableDirectors || availableDirectors).some(
+        director =>
+          !storyStations.value.some(station => String(station.Director?.PersonId) === String(director.PersonId))
+      )
+    );
+    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 +89,7 @@ const renderInteractiveBracket = args => ({
       () => args.plannedDirectingStations,
       stations => {
         storyStations.value = cloneStations(stations);
+        redistributeAssignments();
       },
       { deep: true }
     );
@@ -52,13 +99,18 @@ 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)));
       const nextStation = plannedDirectingStations.find(station => !assignedRingIds.has(String(station.RingId)));
       if (!nextStation) return;
       storyStations.value = [...storyStations.value, ...cloneStations([nextStation])];
+      redistributeAssignments();
     };
 
     const handleDirectingBout = bout => {
@@ -75,13 +127,43 @@ const renderInteractiveBracket = args => ({
       args,
       storyBouts,
       storyStations,
+      storyAssignments,
+      canAddDirector,
+      assignmentBout,
+      directorPicker,
+      assignmentDialog,
+      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
     };
   },
   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,13 +171,19 @@ 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"
+      @request:remove-planned-director="handleRemovePlannedDirector"
+      @update:planned-directing-stations="handlePlannedDirectorsUpdate"
       @update:directing-bout="handleDirectingBout"
       @request:bout-active="handleDirectingBout"
       @update:bout="persistStoryBout"
       @submit:bout="persistStoryBout"
     />
+    </div>
   `
 });
 
@@ -105,18 +193,30 @@ export default {
   tags: ['Bracket'],
   render: renderInteractiveBracket,
   args: {
+    availableDirectors,
+    rings: availableRings,
     bouts: getDEWithBouts.pools[0].Bouts,
     eventRules: getDEWithBouts.eventRules,
     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: {
+    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.'
+    },
     bouts: {
       control: 'object'
     },
@@ -220,10 +320,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 +374,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.'
+      }
+    }
+  }
+};

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

@@ -157,10 +157,62 @@ describe('Bracket bout interaction', () => {
     expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
   });
 
-  it('does not render planned directing controls when optional behavior is disabled', () => {
-    const wrapper = mountBracket();
+  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();
+  });
+});

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"
         />
@@ -32,13 +40,16 @@
         class="order-first flex-none xl:order-last"
         :stations="plannedDirectingStations"
         :showAddCard="showAddPlannedDirectorCard"
-        @request:add-planned-director="$emit('request:add-planned-director')"
+        :canManageDirectors="canManagePlannedDirectors"
+        @request:manage-planned-directors="handleManagePlannedDirectors"
+        @request:add-planned-director="handleAddPlannedDirector"
+        @request:remove-planned-director="$emit('request:remove-planned-director', $event)"
       />
     </div>
 
     <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 +58,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"
@@ -55,6 +67,15 @@
       </div>
     </div>
 
+    <BracketDirectorsModal
+      v-if="canManagePlannedDirectors"
+      v-model:show="showPlannedDirectorsModal"
+      :availableDirectors="availableDirectors"
+      :rings="rings"
+      :stations="plannedDirectingStations"
+      @submit:stations="handlePlannedDirectorsSubmit"
+    />
+
     <DirectorModal
       :bout="selectedBout"
       :eventRules="eventRules"
@@ -84,13 +105,17 @@
 <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 BracketDirectorsModal from '../../../Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.vue';
+import { cloneDirectorData } from '../../../Util/bracketDirectors.js';
 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 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;
@@ -110,7 +135,10 @@ export default {
     'penalty:remove',
     'penalty:update',
     'request:add-planned-director',
+    'request:remove-planned-director',
+    'update:planned-directing-stations',
     'request:bout-active',
+    'request:bout-director',
     'submit:bout',
     'tab:menu-click',
     'update:bout',
@@ -121,11 +149,16 @@ export default {
     EditBoutModal,
     DirectorModal,
     BracketDirectorAssignmentPanel,
+    BracketDirectorsModal,
     BaseText,
     ToggleHeader,
+    ServerConnected,
     EditEventsTopMenu
   },
   props: {
+    availableDirectors: { type: Array, default: undefined },
+    rings: { type: Array, default: undefined },
+    showBoutDirectorAssignment: { type: Boolean, default: true },
     bouts: {
       type: Array,
       required: true
@@ -164,7 +197,7 @@ export default {
     },
     showPlannedDirectorAssignments: {
       type: Boolean,
-      default: false
+      default: true
     },
     showAddPlannedDirectorCard: {
       type: Boolean,
@@ -175,17 +208,30 @@ export default {
     return {
       emptyDesertIcon,
       showDirectorModal: false,
+      showPlannedDirectorsModal: false,
       showEditBoutModal: false,
       selectedBout: {},
       tabs,
       viewName: 'Tableau',
       boutsData: this.cloneBouts(this.bouts),
-      isListView: false
+      windowWidth: typeof window === 'undefined' ? 1024 : window.innerWidth
     };
   },
   computed: {
+    canManagePlannedDirectors() {
+      return !this.isMobile && Array.isArray(this.availableDirectors) && Array.isArray(this.rings);
+    },
+    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"
@@ -213,6 +259,9 @@ export default {
     }
   },
   watch: {
+    isMobile(value) {
+      if (value) this.showPlannedDirectorsModal = false;
+    },
     bouts: {
       handler(newBouts) {
         this.boutsData = this.cloneBouts(newBouts);
@@ -230,6 +279,27 @@ export default {
     window.removeEventListener('resize', this.updateViewBasedOnScreenSize);
   },
   methods: {
+    handleAddPlannedDirector() {
+      if (this.canManagePlannedDirectors) {
+        this.handleManagePlannedDirectors();
+        return;
+      }
+      this.$emit('request:add-planned-director');
+    },
+    handleManagePlannedDirectors() {
+      if (!this.canManagePlannedDirectors) return;
+      this.showPlannedDirectorsModal = true;
+    },
+    handlePlannedDirectorsSubmit(stations) {
+      this.$emit('update:planned-directing-stations', cloneDirectorData(stations));
+      this.showPlannedDirectorsModal = false;
+    },
+    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 +312,6 @@ export default {
     },
     handleViewChange(value) {
       this.viewName = value;
-      this.isListView = value === 'List View';
     },
     handleUpdateBout(bout) {
       if (!bout?.BoutId) return;
@@ -279,7 +348,7 @@ export default {
       this.selectedBout = updatedBout;
     },
     updateViewBasedOnScreenSize() {
-      this.isListView = window.innerWidth <= 768;
+      this.windowWidth = window.innerWidth;
     },
     handleUpdatePenalty(penalty) {
       this.$emit('penalty:update', penalty);