@dcrackel/hematournamentui 1.0.713 → 1.0.715

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

@@ -1,178 +1,244 @@
-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();
+  });
+});
+
+describe('Bracket assignment toolbar', () => {
+  it.each(['request:redistribute-scheduled-bouts', 'request:refresh-assignments'])(
+    'forwards %s without changing bouts or planned coverage',
+    async event => {
+      const bouts = [createBout(), createBout({ BoutId: 43, Status: 'Active', RefereeId: 99 })];
+      const stations = [{ RingId: 1, Director: { PersonId: 99, DisplayName: 'Dave Smith' } }];
+      const assignments = [{ DEBoutId: 1, RingId: 1 }];
+      const wrapper = mountBracket(bouts, {
+        availableDirectors: [stations[0].Director],
+        rings: [{ RingId: 1 }],
+        plannedDirectingStations: stations,
+        plannedBoutAssignments: assignments
+      });
+
+      wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit(event);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted()).toEqual({ [event]: [[]] });
+      expect(wrapper.vm.boutsData).toEqual(bouts);
+      expect(wrapper.props('plannedDirectingStations')).toEqual(stations);
+      expect(wrapper.props('plannedBoutAssignments')).toEqual(assignments);
+      wrapper.unmount();
+    }
+  );
+});

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

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="flex min-h-full flex-col xl:min-h-[calc(100dvh-2rem)]">
     <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
     <ToggleHeader
       :currentSelection="viewName"
@@ -17,7 +17,7 @@
       :statusText="connectedToServer ? 'Connected' : 'Disconnected'"
     />
 
-    <div class="flex flex-col gap-4 xl:flex-row">
+    <div class="flex flex-1 flex-col gap-4 xl:flex-row">
       <div class="min-w-0 flex-1">
         <Tableau
           :bouts="sortedBouts"
@@ -40,7 +40,12 @@
         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:redistribute-scheduled-bouts="$emit('request:redistribute-scheduled-bouts')"
+        @request:refresh-assignments="$emit('request:refresh-assignments')"
+        @request:add-planned-director="handleAddPlannedDirector"
+        @request:remove-planned-director="$emit('request:remove-planned-director', $event)"
       />
     </div>
 
@@ -64,6 +69,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"
@@ -96,6 +110,8 @@ import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.v
 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';
@@ -121,6 +137,10 @@ export default {
     'penalty:remove',
     'penalty:update',
     'request:add-planned-director',
+    'request:remove-planned-director',
+    'request:redistribute-scheduled-bouts',
+    'request:refresh-assignments',
+    'update:planned-directing-stations',
     'request:bout-active',
     'request:bout-director',
     'submit:bout',
@@ -133,12 +153,15 @@ 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,
@@ -189,6 +212,7 @@ export default {
     return {
       emptyDesertIcon,
       showDirectorModal: false,
+      showPlannedDirectorsModal: false,
       showEditBoutModal: false,
       selectedBout: {},
       tabs,
@@ -198,6 +222,9 @@ export default {
     };
   },
   computed: {
+    canManagePlannedDirectors() {
+      return !this.isMobile && Array.isArray(this.availableDirectors) && Array.isArray(this.rings);
+    },
     isMobile() {
       return this.windowWidth < 768;
     },
@@ -236,6 +263,9 @@ export default {
     }
   },
   watch: {
+    isMobile(value) {
+      if (value) this.showPlannedDirectorsModal = false;
+    },
     bouts: {
       handler(newBouts) {
         this.boutsData = this.cloneBouts(newBouts);
@@ -253,6 +283,21 @@ 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));

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

@@ -40,3 +40,11 @@ export const plannedDirectingStations = [
 ];
 
 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 }));