@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,156 +1,218 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <AttendanceSummary
-        :event="event"
-        :absent="absent"
-        :present="present"
-        :activeCount="activeRosterCount"
-        :waitlistCount="waitlistCount"
-        :capacity="eventCapacity"/>
+    <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <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">
           <section class="grid grid-cols-2 w-full mb-3 py-2">
             <div class="col-start-1 col-end-2 flex justify-start">
               <FindOrAddPerson
-                  :persons="personsAll"
-                  :fencingClubs="fencingClubs"
-                  :addBorder="false"
-                  :addNewText="'Add New'"
-                  @new-person-submitted="handleNewPerson"
-                  @person-selected="handleAddExistingPerson" />
+                :persons="personsAll"
+                :fencingClubs="fencingClubs"
+                :addBorder="false"
+                :addNewText="'Add New'"
+                @new-person-submitted="handleNewPerson"
+                @person-selected="handleAddExistingPerson"
+              />
             </div>
             <div class="col-start-2 col-end-3 flex justify-end">
               <DropDownMenu
-                  :label="label"
-                  :items="items"
-                  :selectedItem="localSelectedItem"
-                  @update:selectedItem="handleSelectedItem"/>
+                :label="label"
+                :items="items"
+                :selectedItem="localSelectedItem"
+                @update:selectedItem="handleSelectedItem"
+              />
             </div>
           </section>
 
-          <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"
-            />
-            </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">
+          <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"
+              />
+            </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"/>
+              <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>
-            <img alt="Small desert scene with wind blowing." class="w-60 mt-8 mx-auto" :src="emptyDesertIcon"/>
-            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 fencers have been added!'"
-                      :weight="'normal'" data-testid="text-num-events"/>
-            <BaseText :color="'primaryHighlight'" :size="'md'" :text="'Click Add New button to get started.'"
-                      :weight="'normal'" data-testid="text-num-events"/>
+            <img alt="Small desert scene with wind blowing." class="w-60 mt-8 mx-auto" :src="emptyDesertIcon" />
+            <BaseText
+              :color="'primaryHighlight'"
+              :size="'lg'"
+              :text="'0 fencers have been added!'"
+              :weight="'normal'"
+              data-testid="text-num-events"
+            />
+            <BaseText
+              :color="'primaryHighlight'"
+              :size="'md'"
+              :text="'Click Add New button to get started.'"
+              :weight="'normal'"
+              data-testid="text-num-events"
+            />
           </div>
         </div>
       </section>
     </div>
     <BaseModal
-        :show="showWeaverModal"
-        @update:show="(v) => { if (!v) closeWeaverModal(); }"
-        headerText="Confirm Waiver Signature"
-        :bodyText="weaverModalBody"
-        buttonText="Waiver Signed!"
-        iconColor="dropdownSelect"
-        iconBackgroundColor="toggleBackground"
-        iconClass="ml-3"
-        iconName="fa-file-signature"
-        @submitModal="confirmWeaverSigned"
+      :show="showWeaverModal"
+      @update:show="
+        v => {
+          if (!v) closeWeaverModal();
+        }
+      "
+      headerText="Confirm Waiver Signature"
+      :bodyText="weaverModalBody"
+      buttonText="Waiver Signed!"
+      iconColor="dropdownSelect"
+      iconBackgroundColor="toggleBackground"
+      iconClass="ml-3"
+      iconName="fa-file-signature"
+      @submitModal="confirmWeaverSigned"
     />
   </section>
 </template>
 
 <script>
-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";
-import AttendanceSummary from "../../../Organisms/Headers/AttendanceSummary/AttendanceSummary.vue";
-import FencerCardSkeleton from "../../../Organisms/Skeletons/FencerCard/FencerCardSkeleton.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
-import { tabs } from '../../../Util/tabs.js';
-
-const personSorters = {
-  Seed: (a, b) => (a.Seed || 0) - (b.Seed || 0),
-  FullName: (a, b) => a.Person.DisplayName.localeCompare(b.Person.DisplayName),
-  HEMARating: (a, b) => {
-    const ratingA = a.Person.HEMARatings?.[0]?.Rating || 0;
-    const ratingB = b.Person.HEMARatings?.[0]?.Rating || 0;
-    return ratingB - ratingA;
-  },
-  M2Rating: (a, b) => {
-    const m2RatingA = a.Person.M2Ratings?.[0]?.Rating || 'U00';
-    const m2RatingB = b.Person.M2Ratings?.[0]?.Rating || 'U00';
-    return m2RatingA.localeCompare(m2RatingB);
-  }
-};
-
-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', 'move:waitlist-to-active', 'remove:fencer', 'remove:waitlist-fencer', 'tab:menu-click', 'update:moveDown', 'update:moveUp', 'update:person', 'weaver:sign'],
-  components: {
-    WaitlistFencerCard,
-    FencerCardSkeleton,
+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';
+import AttendanceSummary from '../../../Organisms/Headers/AttendanceSummary/AttendanceSummary.vue';
+import FencerCardSkeleton from '../../../Organisms/Skeletons/FencerCard/FencerCardSkeleton.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
+import { tabs } from '../../../Util/tabs.js';
+
+const personSorters = {
+  Seed: (a, b) => (a.Seed || 0) - (b.Seed || 0),
+  FullName: (a, b) => a.Person.DisplayName.localeCompare(b.Person.DisplayName),
+  HEMARating: (a, b) => {
+    const ratingA = a.Person.HEMARatings?.[0]?.Rating || 0;
+    const ratingB = b.Person.HEMARatings?.[0]?.Rating || 0;
+    return ratingB - ratingA;
+  },
+  M2Rating: (a, b) => {
+    const m2RatingA = a.Person.M2Ratings?.[0]?.Rating || 'U00';
+    const m2RatingB = b.Person.M2Ratings?.[0]?.Rating || 'U00';
+    return m2RatingA.localeCompare(m2RatingB);
+  }
+};
+
+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 waitlistOrderFields = ['WaitlistPosition', 'WaitlistOrder', 'CreatedAt', 'Seed', 'PoolPosition'];
+
+const getFirstDefinedFieldValue = (record, fieldNames, fallback) => {
+  const source = record || {};
+  const fieldName = fieldNames.find(name => source[name] !== null && source[name] !== undefined);
+  if (!fieldName) return fallback;
+  return source[fieldName];
+};
+
+const normalizeOrderValue = value => {
+  const numericValue = Number(value);
+  return Number.isNaN(numericValue) ? value : numericValue;
+};
+
+const getWaitlistOrderValue = person => {
+  const order = getFirstDefinedFieldValue(person, waitlistOrderFields, 0);
+  return normalizeOrderValue(order);
+};
+
+export default {
+  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,
-    BaseText,
-    BaseModal
+    FencerCard,
+    BaseText,
+    BaseModal
   },
   props: {
     personsAll: Array,
@@ -183,14 +245,14 @@ export default {
       windowWidth: window.innerWidth,
       label: 'Sort by',
       items: [
-        {text: 'Seed', link: 'Seed'},
-        {text: 'Name', link: 'FullName'},
-        {text: 'M2Rating', link: 'M2Rating'},
-        {text: 'HEMARating', link: 'HEMARating'}
+        { text: 'Seed', link: 'Seed' },
+        { text: 'Name', link: 'FullName' },
+        { text: 'M2Rating', link: 'M2Rating' },
+        { text: 'HEMARating', link: 'HEMARating' }
       ],
-      localSelectedItem: {text: 'Seed', link: 'Seed'},
+      localSelectedItem: { text: 'Seed', link: 'Seed' },
       showWeaverModal: false,
-      pendingWeaverPerson: null,
+      pendingWeaverPerson: null
     };
   },
   mounted() {
@@ -201,90 +263,91 @@ export default {
   },
   computed: {
     weaverModalBody() {
-      const p = this.pendingWeaverPerson?.Person;
-      const name = p?.DisplayName ?? 'This fencer';
-      return `Has ${name} completed signing the waiver?`;
+      const p = this.pendingWeaverPerson?.Person;
+      const name = p?.DisplayName ?? 'This fencer';
+      return `Has ${name} completed signing the waiver?`;
     },
     isMobile() {
       return this.windowWidth <= 748;
     },
-    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) => {
+    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);
+          console.warn('Undefined person object detected:', a, b);
           return 0;
         }
 
-        const sortPersons = personSorters[this.localSelectedItem.link];
-        if (sortPersons) return sortPersons(a, b);
-
-        console.warn("Unknown sorting key:", this.localSelectedItem.link);
-        return 0;
-      });
-      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;
-    },
+        const sortPersons = personSorters[this.localSelectedItem.link];
+        if (sortPersons) return sortPersons(a, b);
+
+        console.warn('Unknown sorting key:', this.localSelectedItem.link);
+        return 0;
+      });
+      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) {
@@ -301,32 +364,32 @@ export default {
     },
     handleSelectedItem(selectedItem) {
       this.localSelectedItem = selectedItem;
-    },
-    handleStatus(person) {
-      this.$emit('update:person', person);
-    },
+    },
+    handleStatus(person) {
+      this.$emit('update:person', person);
+    },
     handleNewPerson(value) {
       this.$emit('add:person', value);
-    },
-    handleAddExistingPerson(value) {
-      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.$emit('remove:fencer', value);
-    },
-    handleMoveWaitlistToActive(person) {
-      this.$emit('move:waitlist-to-active', person);
-    },
-    handleRemoveWaitlistFencer(person) {
-      this.$emit('remove:waitlist-fencer', person);
-    },
-    handleMoveUp(person){
+    },
+    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);
     },
-    handleMoveDown(person){
+    handleMoveDown(person) {
       this.$emit('update:moveDown', person);
     },
     handleForwardToProfile(personId) {
@@ -336,5 +399,5 @@ export default {
       this.windowWidth = window.innerWidth;
     }
   }
-}
+};
 </script>