@dcrackel/hematournamentui 1.0.698 → 1.0.701

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

@@ -24,21 +24,25 @@
             </div>
           </section>
 
-          <section v-if="loading" v-for="index in 6" class="w-full">
-              <FencerCardSkeleton class="mb-4"/>
-          </section>
-          <section v-if="!loading" v-for="(person, index) in sortedPersons" class="w-full">
-            <FencerCard :person="person" class="mb-4"
-                        :isLast="index === sortedPersons.length - 1"
-                        :isEdit="event.Status === 'planning' || event.Status === 'preparation'"
+          <section v-if="loading" class="w-full">
+            <div v-for="index in 6" :key="index">
+              <FencerCardSkeleton class="mb-4"/>
+            </div>
+          </section>
+          <section v-if="!loading" class="w-full">
+            <div v-for="(person, index) in sortedPersons" :key="person.PersonId || person.Person?.PersonId || index">
+            <FencerCard :person="person" class="mb-4"
+                        :isLast="index === sortedPersons.length - 1"
+                        :isEdit="event.Status === 'planning' || event.Status === 'preparation'"
                         @forward:toProfile="handleForwardToProfile"
                         @update:status="handleStatus"
                         @remove:fencer="handleRemoveFencer"
                         @update:moveUp="handleMoveUp"
                         @update:moveDown="handleMoveDown"
-                        @request:weaver-sign="openWeaverModal"
-            />
-          </section>
+                        @request:weaver-sign="openWeaverModal"
+            />
+            </div>
+          </section>
           <div v-if="!loading && personsInTournament.length === 0" class="mb-10">
             <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox">
               <BaseText text="Remember to assign staff to your event!" size="lg" color="quaternary" weight="bold" class="w-full text-center py-2 px-8"/>
@@ -68,10 +72,8 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import EventCard from "../../../Organisms/Cards/EventCard/EventCard.vue";
-import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
 import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
@@ -104,11 +106,9 @@ export default {
     FindOrAddPerson,
     DropDownMenu,
     EditEventsTopMenu,
-    FencerCard,
-    EventCard,
-    BaseText,
-    BaseButton,
-    BaseModal
+    FencerCard,
+    BaseText,
+    BaseModal
   },
   props: {
     personsAll: Array,
@@ -159,9 +159,9 @@ export default {
   },
   computed: {
     weaverModalBody() {
-      const p = this.pendingWeaverPerson?.Person;
-      const name = p?.DisplayName ?? 'This fencer';
-      return `Has ${name} has completed signing the weaver?`;
+      const p = this.pendingWeaverPerson?.Person;
+      const name = p?.DisplayName ?? 'This fencer';
+      return `Has ${name} completed signing the waiver?`;
     },
     isMobile() {
       return this.windowWidth <= 748;
@@ -210,25 +210,22 @@ export default {
     },
     handleSelectedItem(selectedItem) {
       this.localSelectedItem = selectedItem;
-    },
-    handleStatus(person) {
-      person.Status = person.Status === 'Absent' ? 'Present' : 'Absent';
-      this.$emit('update:person', person);
-    },
+    },
+    handleStatus(person) {
+      this.$emit('update:person', person);
+    },
     handleNewPerson(value) {
       this.$emit('add:person', value);
-    },
-    handleAddExistingPerson(value) {
-      this.event.Absent++;
-      this.$emit('add:existing-person', value);
-    },
+    },
+    handleAddExistingPerson(value) {
+      this.$emit('add:existing-person', value);
+    },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
-    },
-    handleRemoveFencer(value) {
-      this.event.Absent--;
-      this.$emit('remove:fencer', value);
-    },
+    },
+    handleRemoveFencer(value) {
+      this.$emit('remove:fencer', value);
+    },
     handleMoveUp(person){
       this.$emit('update:moveUp', person);
     },

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

@@ -14,10 +14,10 @@ export default {
     argTypes: {
         event: {
             control: {type: 'object'}
-        },
-        finalResults: {
-            control: {type: 'object'}
-        },
+        },
+        finalResults: {
+            control: {type: 'array'}
+        },
         role: {
             control: {type: 'text'}
         }
@@ -32,9 +32,10 @@ export const Default = {
     }
 };
 
-export const NoResultsYet = {
-    args: {
-        finalResults: [],
-        role: 'director'
-    }
-}
+export const NoResultsYet = {
+    args: {
+        event: eventMock[0],
+        finalResults: [],
+        role: 'director'
+    }
+}

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

@@ -24,19 +24,19 @@ import BaseText from "../../../Atoms/Text/BaseText.vue";
 import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
 import { tabs } from '../../../Util/tabs.js';
 
-export default {
-  name: 'EventFinalResult',
+export default {
+  name: 'EventFinalResults',
   emits: ['export:HemaRatings', 'tab:menu-click'],
   components: {BaseText, EventFinalResultsHeader, FinalResultsTable, EditEventsTopMenu},
   props: {
     event: {
       type: Object,
       required: true
-    },
-    finalResults: {
-      type: Object,
-      required: true
-    },
+    },
+    finalResults: {
+      type: Array,
+      required: true
+    },
     role: {
       type: String,
       default: 'Admin'
@@ -72,4 +72,4 @@ export default {
     }
   }
 };
-</script>
+</script>

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

@@ -8,20 +8,17 @@ export default {
     component: KioskDisplay,
     tags: ['autodocs'],
     args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        userClub: {text: 'Cats Club', link: '2'},
-        role: 'Admin'
-    },
-    argTypes: {
-        displays: { control: 'object' },
-        staffDropDown: { control: 'object' },
-        eventDropDown: { control: 'object' },
-        userClub: { control: 'object' },
-        clubs: { control: 'array '},
-        role: { control: 'text' }
-    },
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId,
+        role: 'Admin'
+    },
+    argTypes: {
+        displays: { control: 'array' },
+        staffDropDown: { control: 'array' },
+        eventDropDown: { control: 'array' },
+        role: { control: 'text' }
+    },
 };
 
 
@@ -43,7 +40,7 @@ export const isAdmin = {
     }
 };
 
-export const isDirctor = {
+export const isDirector = {
     args: {
         displays: getCLubDisplayByClubId,
         staffDropDown: getAllStaffByTournamentId,
@@ -59,4 +56,4 @@ export const isClub = {
         eventDropDown: getEventByTournamentId,
         role: 'Club'
     }
-};
+};

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

@@ -14,15 +14,12 @@
         @update:assignToMe="handleAssignToMe"
         @submit:kiosk="handleSubmit"
     />
-    <div class="w-full flex justify-end mt-4"></div>
-
-  </section>
-</template>
-
-<script>
-import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import KioskContainer from "../../../Organisms/Containers/KioskContainer/KioskContainer.vue"
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import KioskContainer from "../../../Organisms/Containers/KioskContainer/KioskContainer.vue"
 
 import { tabs } from '../../../Util/tabs.js';
 
@@ -52,19 +49,18 @@ export default {
       default: 'Director'
     }
   },
-  data() {
-    return {
-      emptyDesertIcon,
-      tabs,
-      localDisplays: [...this.displays],
-      windowWidth: window.innerWidth,
+  data() {
+    return {
+      tabs,
+      localDisplays: [...this.displays],
+      windowWidth: window.innerWidth,
     }
   },
   watch: {
-    displays: {
-      handler(newDisplays) {
-        this.localDisplays = newDisplays
-      },
+    displays: {
+      handler(newDisplays) {
+        this.localDisplays = [...newDisplays]
+      },
       deep: true
     }
   },

package/src/stories/Templates/EventManagement/Penalties/PenaltyReport.stories.js

@@ -1,22 +1,22 @@
-import PenaltiesSummary from './PenaltyReport.vue';
-import getPenaltiesByEvent from '../../../../mocks/getPenaltiesByEvent.js';
-
-export default {
-    title: 'Templates/EventManagement/PenaltiesSummary',
-    component: PenaltiesSummary,
-    args: {
-        event: getPenaltiesByEvent.Event,
-        penalties: getPenaltiesByEvent.Penalties,
-    },
-    argTypes: {
-        event: {
-            control: Object,
-        },
-        penalties: {
-            control: Array,
-        },
-    },
-};
+import PenaltyReport from './PenaltyReport.vue';
+import getPenaltiesByEvent from '../../../../mocks/getPenaltiesByEvent.js';
+
+export default {
+    title: 'Templates/EventManagement/PenaltyReport',
+    component: PenaltyReport,
+    args: {
+        event: getPenaltiesByEvent.Event,
+        penalties: getPenaltiesByEvent.Penalties,
+    },
+    argTypes: {
+        event: {
+            control: { type: 'object' },
+        },
+        penalties: {
+            control: { type: 'array' },
+        },
+    },
+};
 
 export const Default = {
     args: {
@@ -26,8 +26,9 @@ export const Default = {
 };
 
 
-export const NoPenalties = {
-    args: {
-        penalties: [],
-    },
-};
+export const NoPenalties = {
+    args: {
+        event: getPenaltiesByEvent.Event,
+        penalties: [],
+    },
+};

package/src/stories/Templates/EventManagement/Penalties/PenaltyReport.vue

@@ -5,8 +5,8 @@
     <div class="md:p-4"></div>
 
     <div v-if="penalties.length > 0" class="mb-10">
-      <div v-for="(penaltiesSummary, index) in penalties" :key="index">
-        <PenaltyFencerCard eventName="This is a event" :personPenalties="penaltiesSummary" @penalty:removal="penaltyRemoval" />
+      <div v-for="penaltiesSummary in penalties" :key="penaltiesSummary.PersonId">
+        <PenaltyFencerCard :eventName="event.EventName" :personPenalties="penaltiesSummary" @penalty:removal="penaltyRemoval" />
       </div>
     </div>
     <div v-if="!Array.isArray(penalties) || penalties.length === 0" class="mb-10">
@@ -47,48 +47,42 @@ export default {
   },
   data() {
     return {
-      emptyDesertIcon,
-      windowWidth: window.innerWidth,
-      detailsVisible: {},
-      tabs,
+      emptyDesertIcon,
+      windowWidth: window.innerWidth,
+      tabs,
     };
   },
   computed: {
     isMobile() {
       return this.windowWidth <= 748;
     },
-    totalYellowCards() {
-      if (!Array.isArray(this.penalties)) return 0;
-      return this.penalties.reduce((acc, person) => {
-        return acc + (Array.isArray(person?.Penalties) ? person.Penalties.filter(penalty => penalty?.PenaltyType === "Yellow").length : 0);
-      }, 0);
-    },
-    totalRedCards() {
-      if (!Array.isArray(this.penalties)) return 0;
-      return this.penalties.reduce((acc, person) => {
-        return acc + (Array.isArray(person?.Penalties) ? person.Penalties.filter(penalty => penalty?.PenaltyType === "Red").length : 0);
-      }, 0);
-    },
-    totalBlackCards() {
-      if (!Array.isArray(this.penalties)) return 0;
-      return this.penalties.reduce((acc, person) => {
-        return acc + (Array.isArray(person?.Penalties) ? person.Penalties.filter(penalty => penalty?.PenaltyType === "Black").length : 0);
-      }, 0);
-    },
-    totalMedicalCalls() {
-      if (!Array.isArray(this.penalties)) return 0;
-      return this.penalties.reduce((acc, person) => {
-        return acc + (Array.isArray(person?.Penalties) ? person.Penalties.filter(penalty => penalty?.PenaltyType === "Medical").length : 0);
-      }, 0);
+    totalYellowCards() {
+      return this.countPenaltiesByType("Yellow");
+    },
+    totalRedCards() {
+      return this.countPenaltiesByType("Red");
+    },
+    totalBlackCards() {
+      return this.countPenaltiesByType("Black");
+    },
+    totalMedicalCalls() {
+      return this.countPenaltiesByType("Medical");
     }
   },
   methods: {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    penaltyRemoval(penalty) {
-      this.$emit('penalty:removal', penalty)
-    }
-  }
-};
+    penaltyRemoval(penalty) {
+      this.$emit('penalty:removal', penalty)
+    },
+    countPenaltiesByType(type) {
+      if (!Array.isArray(this.penalties)) return 0;
+      return this.penalties.reduce((acc, person) => {
+        if (!Array.isArray(person?.Penalties)) return acc;
+        return acc + person.Penalties.filter(penalty => penalty?.PenaltyType === type).length;
+      }, 0);
+    }
+  }
+};
 </script>

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

@@ -17,14 +17,39 @@ const makeUpcomingScheduled = (bouts) =>
 const makeAllCompleted = (bouts) =>
     bouts.map((b) => ({ ...b, Status: 'Completed' }));
 
-const makeAssignedToUser = (bouts, userId, userName) =>
-    bouts.map((b, i) =>
-        i === 0
-            ? { ...b, RefereeId: userId, RefName: userName, Status: 'Scheduled', OrderIndex: 0 }
-            : { ...b }
-    );
-
-export default {
+const makeAssignedToUser = (bouts, userId, userName) =>
+    bouts.map((b, i) =>
+        i === 0
+            ? { ...b, RefereeId: userId, RefName: userName, Status: 'Scheduled', OrderIndex: 0 }
+            : { ...b }
+    );
+
+const makeActiveBoutRunByDifferentDirector = (bouts) =>
+    bouts.map((b, i) => {
+        if (i === 0) {
+            return {
+                ...b,
+                Status: 'Active',
+                TimerStatus: 'running',
+                TimeLeft: 137,
+                Score1: 2,
+                Score2: 4,
+                RefereeId: 1,
+                RefName: 'Dwain Crackel',
+                Started: '2025-09-08T19:30:00.000Z',
+                OrderIndex: 0,
+            };
+        }
+
+        return {
+            ...b,
+            Status: b.Status === 'Completed' ? 'Completed' : 'Scheduled',
+            TimerStatus: b.TimerStatus || 'stopped',
+            OrderIndex: b.OrderIndex ?? i,
+        };
+    });
+
+export default {
     title: 'Templates/EventManagement/PoolLive',
     component: PoolLive,
     tags: ['PoolLive'],
@@ -70,19 +95,29 @@ export const NonAdminDirector = {
     },
 };
 
-export const AssignedBoutBanner = {
-    args: {
-        role: 'director',
-        editMode: true,
-        bouts: makeAssignedToUser(baseBouts, 79, 'Tom Testerlou'),
+export const AssignedBoutBanner = {
+    args: {
+        role: 'director',
+        editMode: true,
+        bouts: makeAssignedToUser(baseBouts, 79, 'Tom Testerlou'),
         currentUserId: 79,
         directors: getDirectors,
-    },
-};
-
-export const AllBoutsComplete = {
-    args: {
-        bouts: makeAllCompleted(baseBouts),
+    },
+};
+
+export const ActiveBoutRunningDifferentDirector = {
+    args: {
+        role: 'director',
+        editMode: true,
+        bouts: makeActiveBoutRunByDifferentDirector(baseBouts),
+        currentUserId: 79,
+        directors: getDirectors,
+    },
+};
+
+export const AllBoutsComplete = {
+    args: {
+        bouts: makeAllCompleted(baseBouts),
         connectedToServer: false,
         editMode: false,
         role: 'admin',