@dcrackel/hematournamentui 1.0.98 → 1.0.99

package/src/stories/Organisms/Containers/PoolGrid/PoolGrid.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="pool-grid">
+    <table class="table-auto border-separate border-spacing-1">
+      <thead>
+      <tr>
+        <th class="bg-eventBoxBlue rounded-lg px-4 py-2"><BaseText text="Name" size="sm" weight="bold" color="quinary"/></th>
+        <th class="w-1"></th>
+        <th class="bg-gridBoxHeader rounded-lg px-4 py-2"></th>
+        <th v-for="(participant, index) in participants" :key="participant.PersonId"
+            class="bg-gridBoxHeader rounded-lg text-center align-middle">
+          <BaseText :text="index+1" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="w-1"></th>
+        <th class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText text="W%" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText text="W" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText text="L" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText text="HS" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText text="HR" size="sm" weight="bold" color="quinary"/>
+        </th>
+        <th class="bg-eventBoxBlue rounded-lg able-cell text-center align-middle h-10 w-10">
+          <BaseText text="IND" size="sm" weight="bold" color="quinary"/>
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(participant, index) in participants" :key="participant.PersonId">
+        <td class="bg-eventBoxBlue rounded-lg text-right align-middle pr-4">
+          <BaseText :text="participant.DisplayName" size="sm" color="quinary"/>
+        </td>
+        <th class="w-1"></th>
+        <td class="bg-gridBoxHeader rounded-lg text-center align-middle h-10 w-10">
+          <BaseText :text="index + 1" size="sm" weight="bold" color="quinary"/>
+        </td>
+
+        <td v-for="opponent in participants" :key="opponent.PersonId"
+            :class="{'bg-gridBoxHeader rounded-lg ': participant.PersonId === opponent.PersonId, 'bg-eventBoxBlue rounded-lg': participant.PersonId !== opponent.PersonId}"
+            class="rounded-lg h-10 w-10">
+          <div v-if="participant.PersonId !== opponent.PersonId"
+               :class="getBoutClass(participant.PersonId, opponent.PersonId)"
+               class="rounded-lg text-center pt-2.5 h-10 w-10">
+            <BaseText :text="getScore(participant.PersonId, opponent.PersonId)" size="sm" color="neutral"/>
+          </div>
+        </td>
+
+        <td class="w-1"></td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).WP" size="sm" color="quinary"/>
+        </td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).W" size="sm" color="quinary"/>
+        </td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).L" size="sm" color="quinary"/>
+        </td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).HS" size="sm" color="quinary"/>
+        </td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).HR" size="sm" color="quinary"/>
+        </td>
+        <td class="bg-eventBoxBlue rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText :text="getStats(participant).IND" size="sm" color="quinary"/>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'PoolGrid',
+  components: {BaseText},
+  props: {
+    bouts: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    participants() {
+      const participantMap = {};
+      this.bouts.forEach((bout) => {
+        participantMap[bout.Person1Id] = bout.Person1;
+        participantMap[bout.Person2Id] = bout.Person2;
+      });
+      return Object.values(participantMap);
+    },
+  },
+  methods: {
+    getScore(rowPersonId, colPersonId) {
+      const bout = this.bouts.find(
+          (bout) =>
+              (bout.Person1Id === rowPersonId && bout.Person2Id === colPersonId) ||
+              (bout.Person1Id === colPersonId && bout.Person2Id === rowPersonId)
+      );
+
+      if (bout) {
+        if (bout.Status === 'Scheduled') return '';
+
+        const score1 = bout.Score1;
+        const score2 = bout.Score2;
+
+        if (bout.Status === 'Completed') {
+          if (score1 > score2) {
+            return bout.Person1Id === rowPersonId
+                ? `W${score1}`
+                : `L${score2}`;
+          }
+
+          if (score2 > score1) {
+            return bout.Person1Id === rowPersonId
+                ? `L${score1}`
+                : `W${score2}`;
+          }
+
+          return `T${score1}`;
+        }
+
+        return bout.Person1Id === rowPersonId ? score1 : score2;
+      }
+
+      return '';
+    },
+    getBoutClass(person1Id, person2Id) {
+      const bout = this.bouts.find((bout) => (bout.Person1Id === person1Id && bout.Person2Id === person2Id) || (bout.Person1Id === person2Id && bout.Person2Id === person1Id));
+
+      if (bout) {
+        if (bout.Status === 'Completed') {
+          if (bout.Score1 > bout.Score2) {
+            return person1Id === bout.Person1Id ? 'bg-green' : 'bg-red';
+          }
+          if (bout.Score2 > bout.Score1) {
+            return person2Id === bout.Person2Id ? 'bg-red' : 'bg-green';
+          }
+        }
+
+        if (bout.Status === 'Active') {
+          return 'bg-blue';
+        }
+      }
+      return '';
+    },
+    getStats(participant) {
+      const completedBouts = this.bouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId || bout.Person2Id === participant.PersonId) &&
+          bout.Status === 'Completed');
+
+      const wins = completedBouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId && bout.Score1 > bout.Score2) ||
+          (bout.Person2Id === participant.PersonId && bout.Score2 > bout.Score1)).length;
+
+      const losses = completedBouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId && bout.Score1 < bout.Score2) ||
+          (bout.Person2Id === participant.PersonId && bout.Score2 < bout.Score1)).length;
+
+      const totalHitsScored = completedBouts.reduce((sum, bout) => sum + (bout.Person1Id === participant.PersonId ? bout.Score1 : bout.Score2), 0);
+      const totalHitsReceived = completedBouts.reduce((sum, bout) => sum + (bout.Person1Id === participant.PersonId ? bout.Score2 : bout.Score1), 0);
+
+      const indicator = totalHitsScored - totalHitsReceived;
+      const winPercent = completedBouts.length > 0 ? ((wins / completedBouts.length) * 100).toFixed(0) : '0.00';
+
+      return {
+        WP: `${winPercent}%`,
+        HS: totalHitsScored,
+        HR: totalHitsReceived,
+        IND: indicator,
+        W: wins,
+        L: losses,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pool-grid {
+  margin: 20px;
+}
+
+.table-auto {
+  width: 100%;
+}
+
+.stats-panel {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+</style>

package/src/stories/Organisms/Headers/PoolSummary/PoolSummary.stories.js

@@ -23,6 +23,47 @@ export const Default = {
             Present: "0",
             Absent: "20",
             Removed: "1",
-        }
+        },
+        mode: 'planning'
     }
 }
+
+export const preparingMode = {
+    args: {
+        event: {
+            EventId: 1,
+            TournamentId: 8,
+            EventName: "Longsword Event For Everyone",
+            Date: "2024-05-03",
+            StartTime: "12:00:16",
+            NumberOfRings: 3,
+            WeaponId: 1,
+            Status: "Active",
+            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
+            Present: "0",
+            Absent: "20",
+            Removed: "1",
+        },
+        mode: 'preparation'
+    }
+}
+
+export const liveMode = {
+    args: {
+        event: {
+            EventId: 1,
+            TournamentId: 8,
+            EventName: "Longsword Event For Everyone",
+            Date: "2024-05-03",
+            StartTime: "12:00:16",
+            NumberOfRings: 3,
+            WeaponId: 1,
+            Status: "Active",
+            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
+            Present: "0",
+            Absent: "20",
+            Removed: "1",
+        },
+        mode: 'live'
+    }
+}

package/src/stories/Organisms/Headers/PoolSummary/PoolSummary.vue

@@ -25,20 +25,31 @@
         <BaseText text="Only present fencers will show. Make any/all final changes. Click 'Go Live' to start pools." size="xs" color="primaryHighlight" />
       </span>
     </section>
-    <section v-if="mode === 'live'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
+    <section v-if="mode === 'live'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-2/3 shadow">
       <div class="mt-1 w-10 mr-3">
         <BaseIcon icon-name="fa-play" size="3xl" color="quaternary" class="" />
       </div>
-      <span class="w-full">
+      <div class="w-2/3">
         <BaseText text="Pools are now live!" size="lg" color="quaternary" weight="bold" class="" />
         <BaseText text="Pools can now be run" size="xs" color="primaryHighlight" />
-      </span>
+      </div>
+      <div class="w-1/3 flex flex-col">
+        <div class="flex justify-between items-center w-full">
+          <BaseText text="Bouts Left:" size="sm" color="quaternary" class="text-right mr-2 w-2/3" />
+          <BaseText text="20/20" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
+        </div>
+        <div class="flex justify-between items-center w-full mt-0.5">
+          <BaseText text="Est. End Time:" size="sm" color="quaternary" class="text-right mr-2 w-2/3" />
+          <BaseText text="12:45" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
+        </div>
+      </div>
     </section>
 
-    <section class="flex flex-row w-1/3 justify-end">
+    <section v-if="mode === 'planning' || mode === 'preparation'" class="flex flex-row w-1/3 justify-end">
       <CounterBox :recommended="7" :count="poolSize" label="Pool Size" :textColor="'quaternary'" @update:count="handlePoolSizeChange" />
       <CounterBox :recommended="2" :count="numberOfRings" label="Num Rings" :textColor="'quaternary'" @update:count="handleNumOfRingsChange" />
     </section>
+
   </div>
 </template>
 

package/src/stories/Organisms/Headers/ToggleHeader/ToggleHeader.stories.js

@@ -0,0 +1,52 @@
+import ToggleHeader from './ToggleHeader.vue';
+
+export default {
+    title: 'Organisms/Headers/ToggleHeader',
+    component: ToggleHeader,
+    tags: ['autodocs'],
+    args: {
+        firstButtonLabel: 'Staff List',
+        secondButtonLabel: 'Staff Assignments',
+        currentSelection: 'Staff List'
+    },
+    argTypes: {
+        firstButtonLabel: {
+            control: 'text',
+            description: 'Label for the first button'
+        },
+        secondButtonLabel: {
+            control: 'text',
+            description: 'Label for the second button'
+        },
+        currentSelection: {
+            control: 'radio',
+            options: ['Staff List', 'Staff Assignments', 'Pool Grid', 'List View'],
+            description: 'Currently selected view'
+        },
+        'update:selection': { action: 'update:selection' }
+    }
+};
+
+export const Default = {
+    args: {
+        firstButtonLabel: 'Staff List',
+        secondButtonLabel: 'Staff Assignments',
+        currentSelection: 'Staff List'
+    }
+};
+
+export const StaffAssignmentsSelected = {
+    args: {
+        firstButtonLabel: 'Staff List',
+        secondButtonLabel: 'Staff Assignments',
+        currentSelection: 'Staff Assignments'
+    }
+};
+
+export const CustomLabels = {
+    args: {
+        firstButtonLabel: 'Pool Grid',
+        secondButtonLabel: 'List View',
+        currentSelection: 'Pool Grid'
+    }
+};

package/src/stories/Organisms/Headers/{StaffSummary/StaffSummary.vue → ToggleHeader/ToggleHeader.vue}

@@ -2,37 +2,46 @@
   <div class="bg-bannerBackground px-4 py-4 rounded-xl flex justify-center border border-dropdownSelect">
     <section class="flex flex-row w-3/4 justify-center bg-poolBox rounded-lg p-0.5 border border-dropdownSelect">
       <BaseButton
-          label="Staff List"
-          :selected="view === 'Staff List'"
+          :label="firstButtonLabel"
+          :selected="view === firstButtonLabel"
           size="md"
           type="whiteSecondary"
           class="mx-2 w-1/2"
-          @click="handleSelection('Staff List')"
+          @click="handleSelection(firstButtonLabel)"
       />
       <BaseButton
-          label="Staff Assignments"
-          :selected="view === 'Staff Assignments'"
+          :label="secondButtonLabel"
+          :selected="view === secondButtonLabel"
           size="md"
           type="liteGraySecondary"
           class="mx-2 w-1/2"
-          @click="handleSelection('Staff Assignments')"
+          @click="handleSelection(secondButtonLabel)"
       />
     </section>
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 
 export default {
-  name: 'StaffSummary',
-  components: { BaseText, BaseButton },
+  name: 'ToggleHeader',
+  components: { BaseButton },
   props: {
+    firstButtonLabel: {
+      type: String,
+      required: true
+    },
+    secondButtonLabel: {
+      type: String,
+      required: true
+    },
     currentSelection: {
       type: String,
       required: true,
-      validator: value => ['Staff List', 'Staff Assignments'].includes(value)
+      // validator(value) {
+      //   return [this.firstButtonLabel, this.secondButtonLabel].includes(value);
+      // }
     }
   },
   data() {
@@ -52,4 +61,4 @@ export default {
     }
   }
 };
-</script>
+</script>

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

@@ -62,11 +62,9 @@ export default {
   },
   methods: {
     handleAddEvent() {
-     console.log("handleAddEvent")
      this.$emit('addEvent', this.tournamentId);
     },
     handleEdit(eventId) {
-      console.log("handleEdit")
       this.$emit('editEvent', eventId);
     },
     handleManageEvent(eventId) {
@@ -74,7 +72,6 @@ export default {
       this.$emit('manageEvent', eventId);
     },
     handleTabMenuClick(value) {
-      console.log(`----- handleTabMenuClick: ${value}`);
       this.$emit('tab:menu-click', value);
     }
   }

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

@@ -0,0 +1,32 @@
+import PoolLive from './PoolLive.vue';
+import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+
+export default {
+    title: 'Templates/EventManagement/PoolLive',
+    component: PoolLive,
+    tags: ['PoolLive'],
+    args: {
+        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts,
+        eventRules: getPoolsWithBoutsByPoolId.eventRules,
+        hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors
+    },
+    argTypes: {
+        bouts: {
+            control: Object
+        },
+        eventRules: {
+            control: Object
+        },
+        hostingClubColors: {
+            control: Object
+        }
+    },
+};
+
+export const Default = {
+    args: {
+        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts,
+        eventRules: getPoolsWithBoutsByPoolId.eventRules,
+        hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors
+    }
+};

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

@@ -0,0 +1,206 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
+    <ToggleHeader :currentSelection="viewName" @update:selection="handleViewChange" firstButtonLabel="List View"
+                  secondButtonLabel="Pool Grid"/>
+
+    <!-- active bout -->
+    <section class="flex flex-row">
+      <div class="w-5 h-5 rounded-full border-2 mt-5 mr-2">
+        <div class="w-3 h-3 rounded-full mt-0.5 ml-0.5" :class="hasActiveBout ? 'bg-green' : 'bg-red'"></div>
+      </div>
+      <BaseText text="Active bout" size="md" color="primaryHighlight" class="mt-5" weight="bold"/>
+    </section>
+    <div class="border-b border-dropdownSelect mb-8"></div>
+
+    <section class="w-full flex flex-col items-center">
+      <div v-if="!hasActiveBout" class="w-3/4 my-4">
+        <BoutCard :hostingClubColors="hostingClubColors" :bout="{}" :isWaiting="true"/>
+      </div>
+      <div v-for="bout in activeBouts" :key="bout.BoutId" class="w-3/4 my-4">
+        <BoutCard :hostingClubColors="hostingClubColors" :bout="bout"/>
+      </div>
+    </section>
+
+    <!-- Upcoming -->
+    <section class="flex flex-row justify-between">
+      <BaseText text="Upcoming" size="md" color="primaryHighlight" class="mt-5" weight="bold"/>
+      <div class="flex mr-1">
+        <BaseText text="Remaining bouts:" size="md" color="primaryHighlight" class="mt-5 ml-5"/>
+        <BaseText :text="remainingBoutsCount" size="md" color="primaryHighlight" weight="bold" class="mt-5 ml-2"/>
+      </div>
+    </section>
+    <div class="border-b border-dropdownSelect mb-5"></div>
+    <section class="w-full flex flex-col items-center">
+      <div v-for="bout in markedUpcomingBouts" :key="bout.BoutId" class="w-3/4 my-4">
+        <BoutCard :hostingClubColors="hostingClubColors" :bout="bout" @action:startBout="directBout"/>
+      </div>
+    </section>
+
+    <!-- Completed -->
+    <section class="flex flex-row">
+      <BaseText text="Completed" size="md" color="primaryHighlight" class="mt-5" weight="bold"/>
+    </section>
+    <div class="border-b border-dropdownSelect mb-5"></div>
+    <section class="w-full flex flex-col items-center">
+      <div v-for="bout in completedBouts" :key="bout.BoutId" class="w-3/4 my-4">
+        <BoutCard :hostingClubColors="hostingClubColors" :bout="bout" @action:editBout="editBout" />
+      </div>
+    </section>
+
+    <DirectorModal ringName="RingName" :hostingClubColors="hostingClubColors" :eventRules="eventRules"
+                   :bout="selectedBout" :show="showDirectorModal"
+                   @update:closeModal="handleCloseModal"
+                   @update:bout="handleUpdateBout"
+                   @submit:bout="handleSubmitBout"/>
+
+    <EditBoutModal :hostingClubColors="hostingClubColors" :eventRules="eventRules" :bout="selectedBout" :show="showEditBoutModal"
+                   @update:closeModal="handleCloseModal"
+                   @submit:bout="handleSubmitBout"/>
+
+  </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 BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
+import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
+import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
+
+export default {
+  components: {
+    EditBoutModal,
+    DirectorModal,
+    BoutCard,
+    BaseText,
+    ToggleHeader,
+    EditEventsTopMenu
+  },
+  props: {
+    bouts: {
+      type: Array,
+      required: true
+    },
+    eventRules: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    upcomingBouts() {
+      return this.bouts.filter(bout => bout.Status === 'Scheduled');
+    },
+    completedBouts() {
+      return this.bouts.filter(bout => bout.Status === 'Completed');
+    },
+    activeBouts() {
+      return this.bouts.filter(bout => bout.Status === 'Active');
+    },
+    hasActiveBout() {
+      return this.activeBouts.length > 0;
+    },
+    remainingBoutsCount() {
+      return this.upcomingBouts.length;
+    },
+    markedUpcomingBouts() {
+      const statuses = ['On Deck', 'In The Hole', 'Preparing'];
+      return this.upcomingBouts.map((bout, index) => {
+        if (index < statuses.length) {
+          return {
+            ...bout,
+            customStatus: statuses[index]
+          };
+        }
+        return bout;
+      });
+    }
+  },
+  data() {
+    return {
+      showDirectorModal: false,
+      showEditBoutModal: false,
+      selectedBout: {},
+      tabs: [
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
+        {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
+        {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
+        {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
+        {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
+      ],
+      viewName: "List View"
+    };
+  },
+  methods: {
+    handleCloseModal(bout) {
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+
+      if (bout.Status !== 'Completed') {
+        const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+        if (updatedBout) {
+          updatedBout.Status = 'Scheduled';
+          updatedBout.Score1 = 0;
+          updatedBout.Score2 = 0;
+        }
+      }
+    },
+    handleTabMenuClick() {
+      console.log('handleTabMenuClick')
+      this.$emit('tab:menu-click', value);
+    },
+    handleViewChange() {
+      console.log('handleViewChange')
+    },
+    handleUpdateBout(bout) {
+      if (!this.activeBouts || this.activeBouts.length === 0) {
+        return;
+      }
+
+      const updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId);
+
+      if (!updatedBout) {
+        console.log('Bout not found in active bouts:', bout.BoutId);
+        return;
+      }
+
+      Object.assign(updatedBout, bout);
+      updatedBout.Status = 'Active';
+    },
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+
+      if (updatedBout) {
+        Object.assign(updatedBout, bout);
+        updatedBout.Status = 'Completed';
+        updatedBout.Ended = new Date().toISOString();
+      }
+
+      this.$emit('submit:bout', updatedBout);
+    },
+    directBout(bout) {
+      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+      if (updatedBout) {
+        updatedBout.Status = 'Active';
+        this.showDirectorModal = true;
+        this.selectedBout = bout;
+      }
+    },
+    editBout(bout) {
+      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+      if (updatedBout) {
+        this.showEditBoutModal = true;
+        this.selectedBout = bout;
+      }
+    }
+  }
+}
+</script>

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

@@ -32,7 +32,7 @@ export const Default = {
         event:eventPersonGetPoolAssignmentEvent,
         poolAssignments: eventPersonGetInitialPoolAssignments,
         staff: eventPersonGetInitialStaff,
-        mode: 'planning'
+        mode: 'live'
     }
 };