@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,34 +1,40 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <ToggleHeader :currentSelection="viewName" firstButtonLabel="List View" secondButtonLabel="Pool Grid"
-                  :showConnected="true"
-                  @update:selection="handleViewChange" :connectedToServer="connectedToServer" class="hidden md:block"/>
+    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <ToggleHeader
+      :currentSelection="viewName"
+      firstButtonLabel="List View"
+      secondButtonLabel="Pool Grid"
+      :showConnected="true"
+      @update:selection="handleViewChange"
+      :connectedToServer="connectedToServer"
+      class="hidden md:block"
+    />
 
     <section v-if="viewName === 'Pool Grid'" class="hidden md:block">
-      <PoolGrid :bouts="localBouts" :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"/>
+      <PoolGrid :bouts="localBouts" :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore" />
     </section>
 
     <!-- Buttons visible until the first bout starts -->
     <div v-if="remainingBoutsCount > 0 && remainingBoutsCount === localBouts.length" class="w-full my-4">
       <div class="flex justify-center gap-3">
         <BaseButton
-            v-if="!reorderMode"
-            :label="reorderMode ? 'Return to Bout View' : 'Fencer List'"
-            type="primary"
-            :size="isMobile ? 'xs' : 'sm'"
-            class="h-10 inline-flex shrink-0 px-5 h-10"
-            :class="fencerList ? 'w-full md:w-3/4' : 'w-44 md:w-96'"
-            @buttonClick="showFencerList"
+          v-if="!reorderMode"
+          :label="reorderMode ? 'Return to Bout View' : 'Fencer List'"
+          type="primary"
+          :size="isMobile ? 'xs' : 'sm'"
+          class="h-10 inline-flex shrink-0 px-5 h-10"
+          :class="fencerList ? 'w-full md:w-3/4' : 'w-44 md:w-96'"
+          @buttonClick="showFencerList"
         />
         <BaseButton
-            v-if="!fencerList"
-            :label="reorderMode ? 'Return to Bout View' : 'Re-order Bouts'"
-            type="primary"
-            :size="isMobile ? 'xs' : 'sm'"
-            class="h-10 inline-flex shrink-0 px-5"
-            :class="reorderMode ? 'w-full md:w-3/4' : 'w-44 md:w-96'"
-            @buttonClick="reorderBouts"
+          v-if="!fencerList"
+          :label="reorderMode ? 'Return to Bout View' : 'Re-order Bouts'"
+          type="primary"
+          :size="isMobile ? 'xs' : 'sm'"
+          class="h-10 inline-flex shrink-0 px-5"
+          :class="reorderMode ? 'w-full md:w-3/4' : 'w-44 md:w-96'"
+          @buttonClick="reorderBouts"
         />
       </div>
       <div class="md:border-b border-dropdownSelect mt-3"></div>
@@ -38,53 +44,58 @@
     <section v-if="remainingBoutsCount > 0 && !reorderMode">
       <div class="w-full flex flex-col items-center">
         <div v-if="fencerList" v-for="fencer in simpleFencerList" class="w-full md:w-3/4 my-1">
-          <FencerFinalResultCard :result="fencer"/>
+          <FencerFinalResultCard :result="fencer" />
         </div>
         <div v-if="!hasActiveBout && !fencerList" class="w-full md:w-3/4 my-4">
-          <BoutCard :bout="{}"
-                    :hostingClubColors="hostingClubColors"
-                    :editMode="editMode"
-                    :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                    :isWaiting="true"
-                    :reorderMode="false"
-                    @action:startBout="directBout"
-                    @action:resumeBout="directBout"
+          <BoutCard
+            :bout="{}"
+            :hostingClubColors="hostingClubColors"
+            :editMode="editMode"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            :isWaiting="true"
+            :reorderMode="false"
+            @action:startBout="directBout"
+            @action:resumeBout="directBout"
+          />
+        </div>
+        <div v-for="bout in activeBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4">
+          <BoutCard
+            :bout="bout"
+            :hostingClubColors="hostingClubColors"
+            :editMode="editMode"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            :reorderMode="false"
+            :timerStatus="bout.TimerStatus || 'stopped'"
+            @action:startBout="directBout"
+            @action:resumeBout="directBout"
           />
         </div>
-        <div v-for="bout in activeBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4">
-          <BoutCard :bout="bout" :hostingClubColors="hostingClubColors" :editMode="editMode"
-                    :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore" :reorderMode="false"
-                    :timerStatus="bout.TimerStatus || 'stopped'"
-                    @action:startBout="directBout" @action:resumeBout="directBout"/>
-        </div>
-
       </div>
     </section>
 
     <!-- Upcoming -->
     <section v-if="remainingBoutsCount > 0 && !fencerList && !reorderMode">
       <div class="flex flex-row justify-between">
-        <BaseText class="mt-5" color="primaryHighlight" size="md" text="Upcoming" weight="bold"/>
+        <BaseText class="mt-5" color="primaryHighlight" size="md" text="Upcoming" weight="bold" />
         <div class="flex mr-1">
-          <BaseText class="mt-5 ml-5" color="primaryHighlight" size="md" text="Remaining bouts:"/>
-          <BaseText :text="remainingBoutsCount" class="mt-5 ml-2" color="primaryHighlight" size="md" weight="bold"/>
+          <BaseText class="mt-5 ml-5" color="primaryHighlight" size="md" text="Remaining bouts:" />
+          <BaseText :text="remainingBoutsCount" class="mt-5 ml-2" color="primaryHighlight" size="md" weight="bold" />
         </div>
       </div>
       <div class="border-b border-dropdownSelect mb-5"></div>
       <div class="w-full flex flex-col items-center">
         <div v-for="bout in markedUpcomingBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4 flex items-stretch">
           <div class="flex-1">
-            <BoutCard
-                :bout="bout"
-                :hostingClubColors="hostingClubColors"
-                :editMode="editMode"
-                :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                :reorderMode="false"
-                :timerStatus="bout.TimerStatus || 'stopped'"
-                @action:startBout="directBout"
-            />
+            <BoutCard
+              :bout="bout"
+              :hostingClubColors="hostingClubColors"
+              :editMode="editMode"
+              :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+              :reorderMode="false"
+              :timerStatus="bout.TimerStatus || 'stopped'"
+              @action:startBout="directBout"
+            />
           </div>
-
         </div>
       </div>
     </section>
@@ -92,148 +103,189 @@
     <!-- Completed -->
     <section v-if="hasCompletedBout > 0 && !fencerList">
       <div class="w-full flex flex-col items-center">
-        <BaseButton v-if="remainingBoutsCount === 0" label="Show Pool Results on Scoreboard" type="bright"
-                    class="w-full md:w-1/3 my-1 h-10" @buttonClick="showResultsGrid"/>
+        <BaseButton
+          v-if="remainingBoutsCount === 0"
+          label="Show Pool Results on Scoreboard"
+          type="bright"
+          class="w-full md:w-1/3 my-1 h-10"
+          @buttonClick="showResultsGrid"
+        />
       </div>
       <div class="flex flex-row">
-        <BaseText v-if="remainingBoutsCount === 0" class="mt-8" color="primaryHighlight" size="md"
-                  text="All Bouts Are Complete" weight="bold"/>
-        <BaseText v-if="remainingBoutsCount > 0" class="mt-5" color="primaryHighlight" size="md" text="Completed"
-                  weight="bold"/>
+        <BaseText
+          v-if="remainingBoutsCount === 0"
+          class="mt-8"
+          color="primaryHighlight"
+          size="md"
+          text="All Bouts Are Complete"
+          weight="bold"
+        />
+        <BaseText
+          v-if="remainingBoutsCount > 0"
+          class="mt-5"
+          color="primaryHighlight"
+          size="md"
+          text="Completed"
+          weight="bold"
+        />
       </div>
       <div class="border-b border-dropdownSelect mb-5"></div>
       <div class="w-full flex flex-col items-center">
         <div v-for="bout in completedBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4">
-          <BoutCard :bout="bout"
-                    :hostingClubColors="hostingClubColors"
-                    :editMode="editMode"
-                    :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                    @action:editBout="editBout"
-                    @action:startBout="directBout"
-                    :reorderMode="false"/>
+          <BoutCard
+            :bout="bout"
+            :hostingClubColors="hostingClubColors"
+            :editMode="editMode"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @action:editBout="editBout"
+            @action:startBout="directBout"
+            :reorderMode="false"
+          />
         </div>
       </div>
     </section>
 
-
     <!-- Reorder mode -->
     <section v-if="reorderMode">
       <div class="w-full flex flex-col items-center">
-
         <div class="w-full md:w-3/4 my-2">
           <div class="text-xs text-slate-500 mb-2">
-            <BaseText text="Expected order (by seeds)" size="xs" color="primary" weight="" class=""/>
+            <BaseText text="Expected order (by seeds)" size="xs" color="primary" weight="" class="" />
           </div>
           <ol class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
             <li
-                v-for="row in expectedOrderLegend"
-                :key="row.index"
-                class="px-2 py-1 rounded border flex"
-                title="Expected: {{ row.pair[0] }} vs {{ row.pair[1] }}"
+              v-for="row in expectedOrderLegend"
+              :key="row.index"
+              class="px-2 py-1 rounded border flex"
+              title="Expected: {{ row.pair[0] }} vs {{ row.pair[1] }}"
             >
-              <BaseText :text="`#${row.index+1}`" size="xs" color="quaternary" weight="" class="mr-4 w-4"/>
-              <BaseText :text="`${row.pair[0]} vs ${row.pair[1]}`" size="xs" color="quaternary" class="w-9"/>
-              <BaseIcon v-if="row.bout && row.index === row.boutIndex" icon-name="fa-square-check" size="xs"
-                        color="green" hover="green" class="ml-2"/>
-              <BaseIcon v-else-if="row.bout" icon-name="fa-square-xmark" size="xs" color="orange" hover="orange"
-                        class="ml-2"/>
-              <BaseIcon v-else icon-name="fa-square-minus" size="xs" color="red" hover="red" class="ml-2"/>
+              <BaseText :text="`#${row.index + 1}`" size="xs" color="quaternary" weight="" class="mr-4 w-4" />
+              <BaseText :text="`${row.pair[0]} vs ${row.pair[1]}`" size="xs" color="quaternary" class="w-9" />
+              <BaseIcon
+                v-if="row.bout && row.index === row.boutIndex"
+                icon-name="fa-square-check"
+                size="xs"
+                color="green"
+                hover="green"
+                class="ml-2"
+              />
+              <BaseIcon
+                v-else-if="row.bout"
+                icon-name="fa-square-xmark"
+                size="xs"
+                color="orange"
+                hover="orange"
+                class="ml-2"
+              />
+              <BaseIcon v-else icon-name="fa-square-minus" size="xs" color="red" hover="red" class="ml-2" />
             </li>
           </ol>
         </div>
 
         <div class="w-full md:w-3/4 my-2 flex gap-2">
-          <BaseButton
-              label="Auto-sort (by seeds)"
-              type="primary"
-              class="h-10 w-full"
-              @buttonClick="autoSortBouts"
-          />
-
+          <BaseButton label="Auto-sort (by seeds)" type="primary" class="h-10 w-full" @buttonClick="autoSortBouts" />
         </div>
 
         <div class="w-full md:w-3/4 my-4">
-          <BaseText text="Re-order Bouts" size="md" color="primaryHighlight" weight="bold"/>
-          <BaseText text="Select a card, then on a second to swap them." size="xs" color="quinary"/>
+          <BaseText text="Re-order Bouts" size="md" color="primaryHighlight" weight="bold" />
+          <BaseText text="Select a card, then on a second to swap them." size="xs" color="quinary" />
         </div>
 
         <!-- The draggable list -->
         <div role="list" class="w-full md:w-3/4 space-y-3">
           <ReorderableShell
-              v-for="bout in markedUpcomingBouts"
-              :key="bout.BoutId || bout.boutId"
-              :enabled="true"
-              :dragId="bout.BoutId || bout.boutId"
-              :payload="bout"
-              aria-label="Reorder bout"
-              @reorder:drop="onReorderDrop"
-              @reorder:tap="onReorderTap"
+            v-for="bout in markedUpcomingBouts"
+            :key="bout.BoutId || bout.boutId"
+            :enabled="true"
+            :dragId="bout.BoutId || bout.boutId"
+            :payload="bout"
+            aria-label="Reorder bout"
+            @reorder:drop="onReorderDrop"
+            @reorder:tap="onReorderTap"
           >
             <BoutCard
-                :bout="bout"
-                :hostingClubColors="hostingClubColors"
-                :editMode="false"
-                :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                :reorderMode="true"
-                :selected="selectedReorderId === (bout.BoutId || bout.boutId)"
+              :bout="bout"
+              :hostingClubColors="hostingClubColors"
+              :editMode="false"
+              :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+              :reorderMode="true"
+              :selected="selectedReorderId === (bout.BoutId || bout.boutId)"
             />
           </ReorderableShell>
-
         </div>
       </div>
     </section>
 
-    <DirectorModal :bout="currentSelectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showDirectorModal"
-                   @penalty:add="handleAddPenalty"
-                   @penalty:update="handleUpdatePenalty"
-                   @penalty:remove="handleRemovePenalty"
-                   @update:closeModal="handleCloseModal"
-                   @update:bout="handleUpdateBout"
-                   @submit:bout="handleSubmitBout"/>
-
-    <EditBoutModal :bout="currentSelectedBout" :eventRules="eventRules" :hostingClubColors="hostingClubColors"
-                   :show="showEditBoutModal"
-                   @update:closeModal="handleCloseModal"
-                   @submit:bout="handleEditBout"
-                   :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"/>
-
+    <DirectorModal
+      :bout="currentSelectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showDirectorModal"
+      @penalty:add="handleAddPenalty"
+      @penalty:update="handleUpdatePenalty"
+      @penalty:remove="handleRemovePenalty"
+      @update:closeModal="handleCloseModal"
+      @update:bout="handleUpdateBout"
+      @submit:bout="handleSubmitBout"
+    />
+
+    <EditBoutModal
+      :bout="currentSelectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showEditBoutModal"
+      @update:closeModal="handleCloseModal"
+      @submit:bout="handleSubmitBout"
+      @request:bout-active="handleBoutActiveRequest"
+      :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+    />
   </section>
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
-import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
-import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
-import PoolGrid from "../../../Organisms/Containers/PoolGrid/PoolGrid.vue";
-import {tabs} from '../../../Util/tabs.js';
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import FencerFinalResultCard from "../../../Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue";
-import ReorderableShell from "../../../Molecules/Reorder/ReorderableShell.vue";
-import {getPoolOrder} from '../../../Util/seeding.js';
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
+import PoolGrid from '../../../Organisms/Containers/PoolGrid/PoolGrid.vue';
+import { tabs } from '../../../Util/tabs.js';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import FencerFinalResultCard from '../../../Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue';
+import ReorderableShell from '../../../Molecules/Reorder/ReorderableShell.vue';
+import { getPoolOrder } from '../../../Util/seeding.js';
+
+const normalizeBoutStatus = bout => String(bout?.Status || '').toLowerCase();
 
 export default {
-  name: "PoolLive",
+  name: 'PoolLive',
   components: {
     ReorderableShell,
     FencerFinalResultCard,
     BaseButton,
     BaseIcon,
-    PoolGrid,
-    EditBoutModal,
+    PoolGrid,
+    EditBoutModal,
     DirectorModal,
     BoutCard,
     BaseText,
     ToggleHeader,
     EditEventsTopMenu
   },
-  emits: ["update:bout", "tab:menu-click", "submit:bout", "update:directing-bout", "penalty:update", "penalty:add", "penalty:remove", "scoreboard:showFencerList", "scoreboard:showPoolGrid"],
+  emits: [
+    'penalty:add',
+    'penalty:remove',
+    'penalty:update',
+    'request:bout-active',
+    'scoreboard:showFencerList',
+    'scoreboard:showPoolGrid',
+    'submit:bout',
+    'tab:menu-click',
+    'update:bout',
+    'update:directing-bout'
+  ],
   props: {
     bouts: {
       type: Array,
@@ -262,11 +314,11 @@ export default {
   },
   data() {
     return {
-      localBouts: this.cloneBouts(this.bouts),
+      localBouts: this.cloneBouts(this.bouts),
       showDirectorModal: false,
       showEditBoutModal: false,
       selectedBout: {},
-      viewName: "Pool Grid",
+      viewName: 'Pool Grid',
       fencerList: false,
       reorderMode: false,
       tabs,
@@ -275,17 +327,18 @@ export default {
     };
   },
   watch: {
-    bouts: {
-      handler(newBouts) {
-        this.localBouts = this.cloneBouts(newBouts);
-      },
+    bouts: {
+      handler(newBouts) {
+        this.localBouts = this.cloneBouts(newBouts);
+        this.reconcileSelectedBout();
+      },
       immediate: true,
       deep: true
     }
   },
   mounted() {
     window.addEventListener('resize', this.handleResize);
-    this.localBouts = this.sortBoutsByOrder(this.localBouts);
+    this.localBouts = this.sortBoutsByOrder(this.localBouts);
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
@@ -302,9 +355,9 @@ export default {
     },
     upcomingBouts() {
       return this.localBouts
-          .filter(b => (b.Status || '').toLowerCase() === 'scheduled')
-          .slice()
-          .sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
+        .filter(b => (b.Status || '').toLowerCase() === 'scheduled')
+        .slice()
+        .sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
     },
     completedBouts() {
       return this.localBouts.filter(bout => bout.Status === 'Completed');
@@ -314,9 +367,9 @@ export default {
     },
     activeBouts() {
       return this.localBouts
-          .filter(b => String(b?.Status || '').toLowerCase() === 'active')
-          .slice()
-          .sort((a, b) => Number(a?.OrderIndex ?? 0) - Number(b?.OrderIndex ?? 0));
+        .filter(b => String(b?.Status || '').toLowerCase() === 'active')
+        .slice()
+        .sort((a, b) => Number(a?.OrderIndex ?? 0) - Number(b?.OrderIndex ?? 0));
     },
 
     hasActiveBout() {
@@ -367,17 +420,12 @@ export default {
       });
     },
     upcomingBoutsSorted() {
-      return this.upcomingBouts
-          .slice()
-          .sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
+      return this.upcomingBouts.slice().sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
     },
     seedingSize() {
       const maxPos = Math.max(
-          0,
-          ...this.localBouts.flatMap((bout) => [
-            Number(bout.Person1Pos || 0),
-            Number(bout.Person2Pos || 0),
-          ])
+        0,
+        ...this.localBouts.flatMap(bout => [Number(bout.Person1Pos || 0), Number(bout.Person2Pos || 0)])
       );
       return maxPos || this.simpleFencerList.length || 0;
     },
@@ -386,7 +434,7 @@ export default {
       if (!expected.length) return [];
 
       // Build a normalized list of the “actual” upcoming pairs, in display order
-      const actualPairs = this.upcomingBoutsSorted.map((bout) => {
+      const actualPairs = this.upcomingBoutsSorted.map(bout => {
         const a = Number(bout.Person1Pos);
         const b = Number(bout.Person2Pos);
         return [Math.min(a, b), Math.max(a, b)];
@@ -395,34 +443,24 @@ export default {
       return expected.map((pair, index) => {
         const [x, y] = pair;
         const normalized = [Math.min(x, y), Math.max(x, y)];
-        const boutIndex = actualPairs.findIndex(
-            (p) => p[0] === normalized[0] && p[1] === normalized[1]
-        );
+        const boutIndex = actualPairs.findIndex(p => p[0] === normalized[0] && p[1] === normalized[1]);
         const bout = boutIndex >= 0 ? this.upcomingBoutsSorted[boutIndex] : null;
 
         return {
-          index,              // 0-based index in expected order
-          pair,               // [seedA, seedB]
-          boutIndex,          // where it exists in the current list (or -1)
-          bout,               // the actual bout object (or null)
+          index, // 0-based index in expected order
+          pair, // [seedA, seedB]
+          boutIndex, // where it exists in the current list (or -1)
+          bout // the actual bout object (or null)
         };
       });
-    },
+    }
   },
   methods: {
-    handleCloseModal(bout) {
-      this.showDirectorModal = false;
-      this.showEditBoutModal = false;
-
-      if (!bout?.BoutId) return;
-      if (bout.Status !== 'Completed') {
-        const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-        if (!updatedBout) return;
-
-        updatedBout.Status = 'Scheduled';
-        this.$emit('update:bout', updatedBout);
-      }
-    },
+    handleCloseModal() {
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+      this.selectedBout = {};
+    },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
@@ -431,50 +469,36 @@ export default {
     },
     handleUpdateBout(bout) {
       if (!bout?.BoutId) return;
-
-      const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Active'; // keep it active while directing
-
-      this.$emit('update:bout', updatedBout);
+      this.$emit('update:bout', { ...bout });
     },
-    handleEditBout(bout) {
-      const resetToActive = bout.Status === 'Active'
-      this.handleSubmitBout(bout, resetToActive)
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('submit:bout', { ...bout });
+      this.selectedBout = {};
     },
-    handleSubmitBout(bout, resetToActive = false) {
-      this.showEditBoutModal = false;
-      this.showDirectorModal = false;
-      const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      Object.assign(updatedBout, bout);
-      if (!resetToActive) updatedBout.Status = 'Completed';
-      updatedBout.Ended = new Date().toISOString();
-
-      this.$emit('submit:bout', updatedBout);
+    handleBoutActiveRequest(bout) {
+      this.showEditBoutModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('request:bout-active', { ...bout });
+      this.selectedBout = {};
     },
     directBout(bout) {
-      const activeBouts = this.localBouts.filter(b => String(b?.Status || '').toLowerCase() === 'active');
-      activeBouts.forEach(b => b.Status = 'scheduled');
-
+      if (!bout?.BoutId) return;
       const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
 
-      if (updatedBout) {
-        updatedBout.Status = 'Active';
-        this.showDirectorModal = true;
-        this.selectedBout = updatedBout;
-      }
-      this.$emit('update:directing-bout', updatedBout)
+      this.selectedBout = { ...updatedBout };
+      this.showDirectorModal = normalizeBoutStatus(updatedBout) === 'active';
+      this.$emit('update:directing-bout', { ...updatedBout });
     },
     editBout(bout) {
       const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-      if (updatedBout) {
-        this.showEditBoutModal = true;
-        this.selectedBout = updatedBout;
-      }
+      if (!updatedBout) return;
+
+      this.showEditBoutModal = true;
+      this.selectedBout = { ...updatedBout };
     },
     handleResize() {
       this.windowWidth = window.innerWidth;
@@ -497,10 +521,10 @@ export default {
     },
     reorderBouts() {
       this.reorderMode = !this.reorderMode;
-    },
-    autoSortBouts() {
-      const normalizeStatus = s => String(s || '').toLowerCase();
-      const idOf = bout => bout.BoutId ?? bout.boutId;
+    },
+    autoSortBouts() {
+      const normalizeStatus = s => String(s || '').toLowerCase();
+      const idOf = bout => bout.BoutId ?? bout.boutId;
       const matchPair = (bout, [a, b]) => {
         const p1 = Number(bout.Person1Pos);
         const p2 = Number(bout.Person2Pos);
@@ -510,17 +534,13 @@ export default {
       const poolSize = this.seedingSize;
       const expectedOrder = getPoolOrder(poolSize) || [];
 
-      const scheduled = this.localBouts
-          .filter(b => normalizeStatus(b.Status) === 'scheduled')
-          .slice();
+      const scheduled = this.localBouts.filter(b => normalizeStatus(b.Status) === 'scheduled').slice();
 
       const usedIds = new Set();
       const inExpectedOrder = [];
 
       for (const pair of expectedOrder) {
-        const match = scheduled.find(
-            bout => !usedIds.has(idOf(bout)) && matchPair(bout, pair)
-        );
+        const match = scheduled.find(bout => !usedIds.has(idOf(bout)) && matchPair(bout, pair));
         if (match) {
           inExpectedOrder.push(match);
           usedIds.add(idOf(match));
@@ -543,44 +563,49 @@ export default {
     _normalizeStatus(s) {
       return String(s || '').toLowerCase();
     },
-    _getBoutById(id) {
-      return this.localBouts.find(b => String(this._idOf(b)) === String(id));
+    _getBoutById(id, bouts = this.localBouts) {
+      return bouts.find(bout => String(this._idOf(bout)) === String(id));
     },
-    _ensureSequentialOrderIndexForScheduled() {
-      const scheduled = this.localBouts
+    _withSequentialScheduledOrder(bouts) {
+      const scheduledOrderById = new Map(
+        bouts
           .filter(b => this._normalizeStatus(b.Status) === 'scheduled')
           .slice()
-          .sort((a, b) => Number(a.OrderIndex ?? Infinity) - Number(b.OrderIndex ?? Infinity));
-      scheduled.forEach((b, i) => {
-        b.OrderIndex = i;
+          .sort((a, b) => Number(a.OrderIndex ?? Infinity) - Number(b.OrderIndex ?? Infinity))
+          .map((bout, index) => [String(this._idOf(bout)), index])
+      );
+
+      return bouts.map(bout => {
+        const orderIndex = scheduledOrderById.get(String(this._idOf(bout)));
+        return orderIndex === undefined ? bout : { ...bout, OrderIndex: orderIndex };
       });
     },
     _swapOrderBetweenIds(idA, idB) {
       if (!idA || !idB || String(idA) === String(idB)) return;
-      const a = this._getBoutById(idA);
-      const b = this._getBoutById(idB);
+      const normalizedBouts = this._withSequentialScheduledOrder(this.localBouts);
+      const a = this._getBoutById(idA, normalizedBouts);
+      const b = this._getBoutById(idB, normalizedBouts);
       if (!a || !b) return;
-      if (this._normalizeStatus(a.Status) !== 'scheduled' ||
-          this._normalizeStatus(b.Status) !== 'scheduled') return;
-
-      // make sure indices are sane before swapping
-      this._ensureSequentialOrderIndexForScheduled();
+      if (this._normalizeStatus(a.Status) !== 'scheduled' || this._normalizeStatus(b.Status) !== 'scheduled') return;
 
-      const tmp = Number(a.OrderIndex ?? 0);
-      a.OrderIndex = Number(b.OrderIndex ?? 0);
-      b.OrderIndex = tmp;
+      const swappedOrderById = new Map([
+        [String(idA), Number(b.OrderIndex ?? 0)],
+        [String(idB), Number(a.OrderIndex ?? 0)]
+      ]);
 
-      // nudge reactivity
-      this.localBouts = [...this.localBouts];
+      this.localBouts = normalizedBouts.map(bout => {
+        const orderIndex = swappedOrderById.get(String(this._idOf(bout)));
+        return orderIndex === undefined ? bout : { ...bout, OrderIndex: orderIndex };
+      });
     },
 
     // --- DnD drop from <ReorderableShell> ---
-    onReorderDrop({fromDragId, toDragId}) {
+    onReorderDrop({ fromDragId, toDragId }) {
       this._swapOrderBetweenIds(fromDragId, toDragId);
     },
 
     // --- Tap-to-swap (mobile) from <ReorderableShell> ---
-    onReorderTap(payload) {
+    onReorderTap(payload) {
       const tappedId = this._idOf(payload);
       if (!tappedId) return;
 
@@ -593,16 +618,26 @@ export default {
         this.selectedReorderId = null;
         return;
       }
-      this._swapOrderBetweenIds(this.selectedReorderId, tappedId);
-      this.selectedReorderId = null;
-    },
-    cloneBouts(bouts) {
-      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
-    },
-    sortBoutsByOrder(bouts) {
-      return this.cloneBouts(bouts)
-          .sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
-    },
-  }
-}
-</script>
+      this._swapOrderBetweenIds(this.selectedReorderId, tappedId);
+      this.selectedReorderId = null;
+    },
+    reconcileSelectedBout() {
+      const selectedBoutId = this.selectedBout?.BoutId;
+      if (!selectedBoutId) return;
+
+      const updatedBout = this.localBouts.find(bout => bout.BoutId === selectedBoutId);
+      if (!updatedBout) return;
+
+      this.selectedBout = { ...updatedBout };
+      if (normalizeBoutStatus(updatedBout) !== 'active') return;
+      this.showDirectorModal = true;
+    },
+    cloneBouts(bouts) {
+      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
+    },
+    sortBoutsByOrder(bouts) {
+      return this.cloneBouts(bouts).sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
+    }
+  }
+};
+</script>