@dcrackel/hematournamentui 1.0.699 → 1.0.702

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

@@ -1,9 +1,35 @@
 import EditEvents from './EventAttendance.vue';
-import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
-import personsAllMock from '../../../../mocks/personGetAllMock.js';
-import clubsMock from '../../../../mocks/clubGetAllMock.js';
-
-export default {
+import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
+import personsAllMock from '../../../../mocks/personGetAllMock.js';
+import clubsMock from '../../../../mocks/clubGetAllMock.js';
+
+const makeEventWithCapacity = (event, capacity) => ({
+    ...event,
+    EventRules: [
+        ...(event.EventRules || []),
+        {
+            Rules: {RuleName: 'CutOffNumber'},
+            RuleValue: capacity
+        }
+    ]
+});
+
+const makeWaitlistPerson = (person, waitlistPosition) => ({
+    ...person,
+    Id: `${person.Id}-waitlist`,
+    Status: 'Waitlist',
+    WaitlistPosition: waitlistPosition,
+    Person: {
+        ...person.Person,
+        PersonId: `${person.Person.PersonId}-waitlist`,
+        DisplayName: `${person.Person.DisplayName} WL`
+    }
+});
+
+const waitlistedPersons = eventPersonGetEventById.persons.slice(0, 3).map((person, index) => makeWaitlistPerson(person, index + 1));
+const activeRoster = eventPersonGetEventById.persons.slice(3);
+
+export default {
     title: 'Templates/EventManagement/EventAttendance',
     component: EditEvents,
     tags: ['autodocs'],
@@ -67,12 +93,21 @@ export const NoPeople = {
     }
 };
 
-export const peopleAndLoading = {
-    args: {
-        personsInTournament: eventPersonGetEventById.persons,
-        personsAll: personsAllMock,
-        fencingClubs: clubsMock,
-        event: eventPersonGetEventById.event,
-        loading: true
-    }
-};
+export const peopleAndLoading = {
+    args: {
+        personsInTournament: eventPersonGetEventById.persons,
+        personsAll: personsAllMock,
+        fencingClubs: clubsMock,
+        event: eventPersonGetEventById.event,
+        loading: true
+    }
+};
+
+export const WithWaitlist = {
+    args: {
+        personsInTournament: [...activeRoster, ...waitlistedPersons],
+        personsAll: personsAllMock,
+        fencingClubs: clubsMock,
+        event: makeEventWithCapacity(eventPersonGetEventById.event, activeRoster.length)
+    }
+};

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

@@ -1,7 +1,13 @@
 <template>
   <section>
     <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <AttendanceSummary :event="event"  :absent="absent" :present="present"/>
+    <AttendanceSummary
+        :event="event"
+        :absent="absent"
+        :present="present"
+        :activeCount="activeRosterCount"
+        :waitlistCount="waitlistCount"
+        :capacity="eventCapacity"/>
     <div class="w-full flex flex-row justify-center mt-1 md:mt-3">
       <section class="w-full">
         <div class="w-full flex flex-col justify-center items-center" style="text-align: center">
@@ -24,22 +30,44 @@
             </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'"
-                        @forward:toProfile="handleForwardToProfile"
-                        @update:status="handleStatus"
+          <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-if="activeRosterCount > 0" class="mb-2 flex items-center justify-between">
+              <BaseText text="Active Roster" size="md" color="quaternary" weight="bold"/>
+              <BaseText :text="activeRosterSummary" size="sm" color="quinary"/>
+            </div>
+            <div v-for="(person, index) in sortedActivePersons" :key="person.PersonId || person.Person?.PersonId || index">
+            <FencerCard :person="person" class="mb-4"
+                        :isLast="index === sortedActivePersons.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>
-          <div v-if="!loading && personsInTournament.length === 0" class="mb-10">
+                        @request:weaver-sign="openWeaverModal"
+            />
+            </div>
+            <section v-if="waitlistCount > 0" class="mt-6 w-full">
+              <div class="mb-2 flex items-center justify-between">
+                <BaseText text="Waitlist" size="md" color="quaternary" weight="bold"/>
+                <BaseText :text="waitlistSummary" size="sm" color="quinary"/>
+              </div>
+              <div v-for="(person, index) in sortedWaitlistedPersons" :key="person.PersonId || person.Person?.PersonId || index" class="mb-3">
+                <WaitlistFencerCard
+                    :person="person"
+                    :queuePosition="index + 1"
+                    @forward:toProfile="handleForwardToProfile"
+                    @move:active="handleMoveWaitlistToActive"
+                    @remove:fencer="handleRemoveWaitlistFencer"/>
+              </div>
+            </section>
+          </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"/>
             </div>
@@ -68,11 +96,10 @@
 </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 FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
+import WaitlistFencerCard from "../../../Organisms/Cards/WaitlistFencerCard/WaitlistFencerCard.vue";
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
 import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
 import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
@@ -96,19 +123,34 @@ const personSorters = {
   }
 };
 
+const waitlistStatuses = new Set(['waitlist', 'waitlisted', 'waitinglist']);
+
+const normalizeStatus = (status) => String(status || '').toLocaleLowerCase().replace(/[\s_-]/g, '');
+
+const isWaitlistedPerson = (person) => waitlistStatuses.has(normalizeStatus(person?.Status));
+
+const getEventRuleValue = (event, ruleName) => {
+  const rule = event?.EventRules?.find(eventRule => eventRule?.Rules?.RuleName === ruleName);
+  return rule?.RuleValue;
+};
+
+const getWaitlistOrderValue = (person) => {
+  const order = person?.WaitlistPosition ?? person?.WaitlistOrder ?? person?.CreatedAt ?? person?.Seed ?? person?.PoolPosition ?? 0;
+  return Number.isNaN(Number(order)) ? order : Number(order);
+};
+
 export default {
-  emits: ['add:existing-person', 'add:person', 'forward:toProfile', 'remove:fencer', 'tab:menu-click', 'update:moveDown', 'update:moveUp', 'update:person', 'weaver:sign'],
-  components: {
-    FencerCardSkeleton,
+  emits: ['add:existing-person', 'add:person', 'forward:toProfile', 'move:waitlist-to-active', 'remove:fencer', 'remove:waitlist-fencer', 'tab:menu-click', 'update:moveDown', 'update:moveUp', 'update:person', 'weaver:sign'],
+  components: {
+    WaitlistFencerCard,
+    FencerCardSkeleton,
     AttendanceSummary,
     FindOrAddPerson,
     DropDownMenu,
     EditEventsTopMenu,
-    FencerCard,
-    EventCard,
-    BaseText,
-    BaseButton,
-    BaseModal
+    FencerCard,
+    BaseText,
+    BaseModal
   },
   props: {
     personsAll: Array,
@@ -159,22 +201,35 @@ 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;
     },
-    sortedPersons() {
-      if (!Array.isArray(this.personsInTournament) || this.personsInTournament.length === 0) {
-        console.warn("personsInTournament is empty or not an array");
-        return [];
-      }
-
-      let sortedArray = [...this.personsInTournament]; // Clone array to prevent modifying props
-
-      sortedArray.sort((a, b) => {
+    activePersons() {
+      if (!Array.isArray(this.personsInTournament) || this.personsInTournament.length === 0) {
+        return [];
+      }
+
+      return this.personsInTournament.filter(person => !isWaitlistedPerson(person));
+    },
+    waitlistedPersons() {
+      if (!Array.isArray(this.personsInTournament) || this.personsInTournament.length === 0) {
+        return [];
+      }
+
+      return this.personsInTournament.filter(isWaitlistedPerson);
+    },
+    sortedActivePersons() {
+      if (this.activePersons.length === 0) {
+        return [];
+      }
+
+      let sortedArray = [...this.activePersons]; // Clone array to prevent modifying props
+
+      sortedArray.sort((a, b) => {
         if (!a || !b || !a.Person || !b.Person) {
           console.warn("Undefined person object detected:", a, b);
           return 0;
@@ -186,14 +241,50 @@ export default {
         console.warn("Unknown sorting key:", this.localSelectedItem.link);
         return 0;
       });
-      return sortedArray;
-    },
-    absent() {
-      return this.personsInTournament.filter(person => person.Status === 'Absent').length;
-    },
-    present() {
-      return this.personsInTournament.filter(person => person.Status === 'Present').length;
-    },
+      return sortedArray;
+    },
+    sortedWaitlistedPersons() {
+      return [...this.waitlistedPersons].sort((a, b) => {
+        const orderA = getWaitlistOrderValue(a);
+        const orderB = getWaitlistOrderValue(b);
+
+        if (typeof orderA === 'number' && typeof orderB === 'number') {
+          return orderA - orderB;
+        }
+
+        return String(orderA).localeCompare(String(orderB));
+      });
+    },
+    activeRosterCount() {
+      return this.activePersons.length;
+    },
+    waitlistCount() {
+      return this.waitlistedPersons.length;
+    },
+    eventCapacity() {
+      const capacity = this.event?.CutOffNumber ?? this.event?.MaxFencers ?? getEventRuleValue(this.event, 'CutOffNumber');
+      if (capacity === 0 || capacity === '0') {
+        return 'Unlimited';
+      }
+
+      return capacity || '';
+    },
+    activeRosterSummary() {
+      if (!this.eventCapacity) {
+        return `${this.activeRosterCount} active`;
+      }
+
+      return `${this.activeRosterCount} / ${this.eventCapacity}`;
+    },
+    waitlistSummary() {
+      return `${this.waitlistCount} waiting`;
+    },
+    absent() {
+      return this.activePersons.filter(person => person.Status === 'Absent').length;
+    },
+    present() {
+      return this.activePersons.filter(person => person.Status === 'Present').length;
+    },
   },
   methods: {
     openWeaverModal(person) {
@@ -210,25 +301,28 @@ 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);
+    },
+    handleMoveWaitlistToActive(person) {
+      this.$emit('move:waitlist-to-active', person);
+    },
+    handleRemoveWaitlistFencer(person) {
+      this.$emit('remove:waitlist-fencer', person);
+    },
     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

@@ -5,24 +5,22 @@
         :displays="localDisplays"
         :eventDropDown="eventDropDown"
         :staffDropDown="staffDropDown"
-        :userRole="role"
-        @remove:kiosk="handleRemove"
-        @update:ringChange="handleRingChange"
+        :userRole="role"
+        @remove:kiosk="handleRemove"
+        @test:scoreboard="handleScoreboardTest"
+        @update:ringChange="handleRingChange"
         @update:selectedStaff="handleAssignmentStaff"
         @update:selectedEvent="handleAssignmentEvent"
         @update:selectedType="handleSelectedType"
         @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';
 
@@ -33,7 +31,7 @@ export default {
     EditEventsTopMenu
 
   },
-  emits: ['remove:kiosk', 'update:selectedStaff', 'update:selectedEvent', 'update:selectedType', 'update:ringChange', 'submit:kiosk', 'update:assignToMe','tab:menu-click'],
+  emits: ['remove:kiosk', 'test:scoreboard', 'update:selectedStaff', 'update:selectedEvent', 'update:selectedType', 'update:ringChange', 'submit:kiosk', 'update:assignToMe','tab:menu-click'],
   props: {
     displays: {
       type: Array,
@@ -52,19 +50,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
     }
   },
@@ -79,8 +76,11 @@ export default {
       return this.windowWidth <= 748;
     },
   },
-  methods: {
-    handleTabMenuClick(value) {
+  methods: {
+    handleScoreboardTest(display) {
+      this.$emit('test:scoreboard', display);
+    },
+    handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
     handleRingChange(item){

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: [],
+    },
+};