@dcrackel/hematournamentui 1.0.699 → 1.0.701

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

@@ -51,11 +51,12 @@
                     @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"
-                    @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>
@@ -73,14 +74,15 @@
       <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"
-                @action:startBout="directBout"
-            />
+            <BoutCard
+                :bout="bout"
+                :hostingClubColors="hostingClubColors"
+                :editMode="editMode"
+                :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+                :reorderMode="false"
+                :timerStatus="bout.TimerStatus || 'stopped'"
+                @action:startBout="directBout"
+            />
           </div>
 
         </div>
@@ -181,15 +183,15 @@
       </div>
     </section>
 
-    <DirectorModal :bout="currentSelectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showDirectorModal"
-                   @penalty:add="handleUpdatePenalty"
-                   @penalty:update="handleAddPenalty"
-                   @penalty:remove="handleRemovePenalty"
-                   @update:closeModal="handleCloseModal"
-                   @update:bout="handleUpdateBout"
+    <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"
@@ -205,13 +207,11 @@
 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 ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
-import PenaltyModal from "../../../Molecules/Modals/PenaltyModal/PenaltyModal.vue";
-import PoolGrid from "../../../Organisms/Containers/PoolGrid/PoolGrid.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";
@@ -225,17 +225,15 @@ export default {
     FencerFinalResultCard,
     BaseButton,
     BaseIcon,
-    PenaltyModal,
-    PoolGrid,
-    ServerConnected,
-    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:showPoolGrids"],
+  emits: ["update:bout", "tab:menu-click", "submit:bout", "update:directing-bout", "penalty:update", "penalty:add", "penalty:remove", "scoreboard:showFencerList", "scoreboard:showPoolGrid"],
   props: {
     bouts: {
       type: Array,
@@ -264,7 +262,7 @@ export default {
   },
   data() {
     return {
-      localBouts: this.bouts,
+      localBouts: this.cloneBouts(this.bouts),
       showDirectorModal: false,
       showEditBoutModal: false,
       selectedBout: {},
@@ -277,17 +275,17 @@ export default {
     };
   },
   watch: {
-    bouts: {
-      handler(newBouts) {
-        this.localBouts = newBouts;
-      },
+    bouts: {
+      handler(newBouts) {
+        this.localBouts = this.cloneBouts(newBouts);
+      },
       immediate: true,
       deep: true
     }
   },
   mounted() {
     window.addEventListener('resize', this.handleResize);
-    this.localBouts.sort((a, b) => a.OrderIndex - b.OrderIndex);
+    this.localBouts = this.sortBoutsByOrder(this.localBouts);
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
@@ -412,18 +410,19 @@ export default {
     },
   },
   methods: {
-    handleCloseModal(bout) {
-      this.showDirectorModal = false;
-      this.showEditBoutModal = false;
-
-      if (bout.Status !== 'Completed') {
-        const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-        if (updatedBout) {
-          updatedBout.Status = 'Scheduled';
-        }
-        this.$emit('update:bout', updatedBout);
-      }
-    },
+    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);
+      }
+    },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
@@ -446,11 +445,12 @@ export default {
       this.handleSubmitBout(bout, resetToActive)
     },
     handleSubmitBout(bout, resetToActive = false) {
-      this.showEditBoutModal = false;
-      this.showDirectorModal = false;
-      const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId);
-
-      Object.assign(updatedBout, bout);
+      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();
 
@@ -497,10 +497,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);
@@ -580,7 +580,7 @@ export default {
     },
 
     // --- Tap-to-swap (mobile) from <ReorderableShell> ---
-    onReorderTap(payload) {
+    onReorderTap(payload) {
       const tappedId = this._idOf(payload);
       if (!tappedId) return;
 
@@ -593,9 +593,16 @@ export default {
         this.selectedReorderId = null;
         return;
       }
-      this._swapOrderBetweenIds(this.selectedReorderId, tappedId);
-      this.selectedReorderId = null;
-    },
-  }
-}
-</script>
+      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>

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

@@ -19,10 +19,24 @@ export default {
             table: {
                 type: {summary: 'Object'},
                 defaultValue: {summary: '{}'}
-            }
-        }
-    }
-};
+        }
+        },
+        poolAssignments: {
+            control: {type: 'array'},
+            description: 'Pool assignment data'
+        },
+        staff: {
+            control: {type: 'array'},
+            description: 'Assignable event staff'
+        },
+        loading: {
+            control: {type: 'boolean'}
+        },
+        role: {
+            control: {type: 'text'}
+        }
+    }
+};
 
 export const Default = {
     args: {
@@ -32,30 +46,27 @@ export const Default = {
     }
 };
 
-let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'live' };
-export const liveMode = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
-};
-
-modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' };
-export const singleFlightPlanningMode = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
-};
-
-modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' };
-export const NoPoolsYetInPlanning = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: [],
-        staff: [],
+export const liveMode = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'live' },
+        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+        staff: eventPersonGetInitialStaff,
+    }
+};
+
+export const singleFlightPlanningMode = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
+        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+        staff: eventPersonGetInitialStaff,
+    }
+};
+
+export const NoPoolsYetInPlanning = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
+        poolAssignments: [],
+        staff: [],
     }
 };
 
@@ -93,27 +104,26 @@ export const preparationMode = {
     }
 };
 
-modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'results' };
-export const singleFlightResultsMode = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
+export const singleFlightResultsMode = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'results' },
+        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+        staff: eventPersonGetInitialStaff,
     }
 };
 
-export const singleFlightDEMode = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
+export const singleFlightDEMode = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'de' },
+        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+        staff: eventPersonGetInitialStaff,
     }
 };
 
-export const singleFlightCompletedMode = {
-    args: {
-        event:modifiedEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
+export const singleFlightCompletedMode = {
+    args: {
+        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'completed' },
+        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+        staff: eventPersonGetInitialStaff,
     }
-};
+};

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

@@ -8,9 +8,9 @@
                  @update:manualEdit="handleManualEdit"
                  class="hidden md:flex"
     />
-    <EditEventsTopMenu v-if="this.event.Flights > 1" :currentTab="selectedFlight" :tabs="flights" @tabMenuClick="handleFlightChange" class="mt-3"/>
-    <div class="w-full flex flex-row flex-wrap justify-center" :class="this.event.Flights > 1 ? 'mt-0' : 'mt-4'">
-      <div v-for="pool in filteredPools" :key="pool.Name">
+    <EditEventsTopMenu v-if="event.Flights > 1" :currentTab="selectedFlight" :tabs="flights" @tabMenuClick="handleFlightChange" class="mt-3"/>
+    <div class="w-full flex flex-row flex-wrap justify-center" :class="event.Flights > 1 ? 'mt-0' : 'mt-4'">
+      <div v-for="pool in filteredPools" :key="pool.PoolId">
         <Pool v-if="pool"
             :poolId="pool.PoolId"
             :poolName="pool.Name"
@@ -67,7 +67,11 @@ export default {
     Pool
   },
   props: {
-    event: Object,
+    event: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
     poolAssignments: {
       type: Array,
       default: () => []
@@ -126,10 +130,9 @@ export default {
     filteredPools() {
       if (this.loading) {
         return Array.from({ length: 2 }).map((_, index) => ({
-          PoolId: `skeleton-${index}`,
-          Name: 'Loading...',
-  emits: ['fencer:poolChanged', 'goLive:pool', 'remove:fencer', 'reset:pool', 'select:pool', 'start:pool', 'tab:menu-click', 'update:director', 'update:numberOfRings', 'update:poolSize', 'update:swapFencers'],
-          RingName: 'Loading...',
+          PoolId: `skeleton-${index}`,
+          Name: 'Loading...',
+          RingName: 'Loading...',
           poolStrengthInd: 0,
           BoutsLeft: 0,
           Staff: [],
@@ -191,51 +194,40 @@ export default {
     },
     handleResize() {
       this.windowWidth = window.innerWidth;
-    },
-    handleAddFencerToPool(payload) {
-      let sourcePoolIndex = -1;
-      let fencerIndex = -1;
-      let fencerToMove = null;
-      let sourcePoolId = null;
-
-      for (let i = 0; i < this.poolAssignments.length; i++) {
-        const pool = this.poolAssignments[i];
-        const index = pool.participants.findIndex(participant => {
-          return (
-              participant.Person.DisplayName === payload.name &&
-              participant.Person.Club.Name === payload.club
-          );
-        });
-        if (index !== -1) {
-          sourcePoolIndex = i;
-          fencerIndex = index;
-          fencerToMove = pool.participants[index];
-          sourcePoolId = pool.PoolId;
-          break;
-        }
-      }
-      if (!fencerToMove) {
-        console.error("Fencer not found in any pool:", payload);
-        return;
-      }
-
-      this.poolAssignments[sourcePoolIndex].participants.splice(fencerIndex, 1);
-      const targetPool = this.poolAssignments.find(pool => pool.PoolId === payload.addToPool);
-      if (!targetPool) {
-        console.error("Target pool not found:", payload.addToPool);
-        return;
-      }
-
-      fencerToMove.PoolId = payload.addToPool;
-      fencerToMove.PoolPosition = targetPool.participants.length + 1;
-      targetPool.participants.push(fencerToMove);
-
-      this.$emit('fencer:poolChanged', {
-        fencer: fencerToMove,
-        fromPoolId: sourcePoolId,
-        toPoolId: payload.addToPool
-      });
-    }
-  }
-}
+    },
+    handleAddFencerToPool(payload) {
+      const sourcePool = this.poolAssignments.find(pool => {
+        return pool.participants?.some(participant => this.isMatchingFencer(participant, payload));
+      });
+
+      const fencerToMove = sourcePool?.participants.find(participant => this.isMatchingFencer(participant, payload));
+      if (!fencerToMove) {
+        console.error("Fencer not found in any pool:", payload);
+        return;
+      }
+
+      const targetPool = this.poolAssignments.find(pool => pool.PoolId === payload.addToPool);
+      if (!targetPool) {
+        console.error("Target pool not found:", payload.addToPool);
+        return;
+      }
+
+      this.$emit('fencer:poolChanged', {
+        fencer: {
+          ...fencerToMove,
+          PoolId: payload.addToPool,
+          PoolPosition: targetPool.participants.length + 1
+        },
+        fromPoolId: sourcePool.PoolId,
+        toPoolId: payload.addToPool
+      });
+    },
+    isMatchingFencer(participant, payload) {
+      return (
+          participant.Person.DisplayName === payload.name &&
+          participant.Person.Club.Name === payload.club
+      );
+    }
+  }
+}
 </script>

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

@@ -1,57 +1,58 @@
-import EditEvents from './PoolResults.vue';
-import getPoolResults from '../../../../mocks/getPoolResults.js';
-
-export default {
-    title: 'Templates/EventManagement/PoolResults',
-    component: EditEvents,
-    tags: ['autodocs'],
-    args: {
-        event: getPoolResults,
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    },
-    argTypes: {
-        event: {type: 'object'},
-        poolResults: {
-            control: {type: 'object'}
-        },
-        role: {type: 'string'}
-    }
-};
-
-let modifiedEvent = {...getPoolResults, Status: "results"}
-export const Default = {
-    args: {
-        event: modifiedEvent.event,
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-modifiedEvent = {...getPoolResults, Status: "de"}
-export const EventIsInDE = {
-    args: {
-        event: modifiedEvent.event,
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-
-modifiedEvent = {...getPoolResults, Status: "planning"}
-export const EventIsInPlanning = {
-    args: {
-        event: modifiedEvent,
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-modifiedEvent = {...getPoolResults, Status: "planning"}
-export const noResults = {
-    args: {
-        event: modifiedEvent,
-        poolResults: [],
-        role: 'admin'
+import EditEvents from './PoolResults.vue';
+import getPoolResults from '../../../../mocks/getPoolResults.js';
+
+const makeEventWithStatus = (status) => ({
+    ...getPoolResults.event,
+    Status: status
+});
+
+export default {
+    title: 'Templates/EventManagement/PoolResults',
+    component: EditEvents,
+    tags: ['autodocs'],
+    args: {
+        event: getPoolResults.event,
+        poolResults: getPoolResults.report,
+        role: 'admin'
+    },
+    argTypes: {
+        event: { control: {type: 'object'} },
+        poolResults: {
+            control: {type: 'array'}
+        },
+        role: { control: {type: 'text'} }
+    }
+};
+
+export const Default = {
+    args: {
+        event: makeEventWithStatus("results"),
+        poolResults: getPoolResults.report,
+        role: 'admin'
+    }
+};
+
+export const EventIsInDE = {
+    args: {
+        event: makeEventWithStatus("de"),
+        poolResults: getPoolResults.report,
+        role: 'admin'
+    }
+};
+
+
+export const EventIsInPlanning = {
+    args: {
+        event: makeEventWithStatus("planning"),
+        poolResults: getPoolResults.report,
+        role: 'admin'
+    }
+};
+
+export const noResults = {
+    args: {
+        event: makeEventWithStatus("planning"),
+        poolResults: [],
+        role: 'admin'
     }
 };