@dcrackel/hematournamentui 1.0.715 → 1.0.716

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

@@ -1,403 +1,417 @@
-<template>
-  <section>
-    <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"
-              />
-            </div>
-            <div class="col-start-2 col-end-3 flex justify-end">
-              <DropDownMenu
-                :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">
-            <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>
-            <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"
-    />
-  </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 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
-  },
-  props: {
-    personsAll: Array,
-    event: {
-      type: Object,
-      required: true,
-      default: () => ({})
-    },
-    fencingClubs: {
-      type: Array,
-      default: () => []
-    },
-    personsInTournament: {
-      type: Array,
-      default: () => []
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    role: {
-      type: String,
-      default: 'Admin'
-    }
-  },
-  data() {
-    return {
-      emptyDesertIcon,
-      tabs,
-      windowWidth: window.innerWidth,
-      label: 'Sort by',
-      items: [
-        { text: 'Seed', link: 'Seed' },
-        { text: 'Name', link: 'FullName' },
-        { text: 'M2Rating', link: 'M2Rating' },
-        { text: 'HEMARating', link: 'HEMARating' }
-      ],
-      localSelectedItem: { text: 'Seed', link: 'Seed' },
-      showWeaverModal: false,
-      pendingWeaverPerson: null
-    };
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-  computed: {
-    weaverModalBody() {
-      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) => {
-        if (!a || !b || !a.Person || !b.Person) {
-          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;
-    }
-  },
-  methods: {
-    openWeaverModal(person) {
-      this.pendingWeaverPerson = person;
-      this.showWeaverModal = true;
-    },
-    closeWeaverModal() {
-      this.showWeaverModal = false;
-      this.pendingWeaverPerson = null;
-    },
-    confirmWeaverSigned() {
-      this.$emit('weaver:sign', this.pendingWeaverPerson);
-      this.closeWeaverModal();
-    },
-    handleSelectedItem(selectedItem) {
-      this.localSelectedItem = selectedItem;
-    },
-    handleStatus(person) {
-      this.$emit('update:person', person);
-    },
-    handleNewPerson(value) {
-      this.$emit('add: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) {
-      this.$emit('update:moveUp', person);
-    },
-    handleMoveDown(person) {
-      this.$emit('update:moveDown', person);
-    },
-    handleForwardToProfile(personId) {
-      this.$emit('forward:toProfile', personId);
-    },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-};
-</script>
+<template>
+  <section>
+    <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"
+              />
+            </div>
+            <div class="col-start-2 col-end-3 flex justify-end">
+              <DropDownMenu
+                :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"
+                  :isNextCheckedIn="person === nextCheckedInPerson"
+                  @update:check-in="handleWaitlistCheckIn"
+                  @request:weaver-sign="openWeaverModal"
+                  @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>
+            <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"
+    />
+  </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';
+import { isWaitlistCheckedIn } from '../../../Util/waitlistAttendance.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',
+    'update:waitlist-check-in',
+    'weaver:sign'
+  ],
+  components: {
+    WaitlistFencerCard,
+    FencerCardSkeleton,
+    AttendanceSummary,
+    FindOrAddPerson,
+    DropDownMenu,
+    EditEventsTopMenu,
+    FencerCard,
+    BaseText,
+    BaseModal
+  },
+  props: {
+    personsAll: Array,
+    event: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    fencingClubs: {
+      type: Array,
+      default: () => []
+    },
+    personsInTournament: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    role: {
+      type: String,
+      default: 'Admin'
+    }
+  },
+  data() {
+    return {
+      emptyDesertIcon,
+      tabs,
+      windowWidth: window.innerWidth,
+      label: 'Sort by',
+      items: [
+        { text: 'Seed', link: 'Seed' },
+        { text: 'Name', link: 'FullName' },
+        { text: 'M2Rating', link: 'M2Rating' },
+        { text: 'HEMARating', link: 'HEMARating' }
+      ],
+      localSelectedItem: { text: 'Seed', link: 'Seed' },
+      showWeaverModal: false,
+      pendingWeaverPerson: null
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  computed: {
+    weaverModalBody() {
+      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) => {
+        if (!a || !b || !a.Person || !b.Person) {
+          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;
+    },
+    waitlistCheckedInCount() {
+      return this.waitlistedPersons.filter(isWaitlistCheckedIn).length;
+    },
+    nextCheckedInPerson() {
+      return this.sortedWaitlistedPersons.find(isWaitlistCheckedIn) || null;
+    },
+    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 · ${this.waitlistCheckedInCount} checked in`;
+    },
+    absent() {
+      return this.activePersons.filter(person => person.Status === 'Absent').length;
+    },
+    present() {
+      return this.activePersons.filter(person => person.Status === 'Present').length;
+    }
+  },
+  methods: {
+    openWeaverModal(person) {
+      this.pendingWeaverPerson = person;
+      this.showWeaverModal = true;
+    },
+    closeWeaverModal() {
+      this.showWeaverModal = false;
+      this.pendingWeaverPerson = null;
+    },
+    confirmWeaverSigned() {
+      this.$emit('weaver:sign', this.pendingWeaverPerson);
+      this.closeWeaverModal();
+    },
+    handleSelectedItem(selectedItem) {
+      this.localSelectedItem = selectedItem;
+    },
+    handleStatus(person) {
+      this.$emit('update:person', person);
+    },
+    handleNewPerson(value) {
+      this.$emit('add: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);
+    },
+    handleWaitlistCheckIn(person) {
+      this.$emit('update:waitlist-check-in', person);
+    },
+    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) {
+      this.$emit('update:moveDown', person);
+    },
+    handleForwardToProfile(personId) {
+      this.$emit('forward:toProfile', personId);
+    },
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    }
+  }
+};
+</script>