@dcrackel/hematournamentui 1.0.699 → 1.0.702

package/src/stories/Organisms/Cards/PenaltyCard/PenaltyCard.vue

@@ -160,17 +160,26 @@ export default {
       const portrait = images.find(image => image.URL);
       return portrait ? portrait.URL : '';
     },
-    displayName() {
-      return this.fencer1 ? this.bout.Person1.DisplayName : this.bout.Person2.DisplayName
-    },
-    clubName() {
-      return this.fencer1 ? this.bout.Person1.Club.Name : this.bout.Person2.Club.Name
-    },
-    pastCards() {
-      return this.fencer1 ? this.bout.Person1.Penalties : this.bout.Person2.Penalties
-    },
-    toggled() {
-      return this.yellowCardToggle || this.redCardToggle || this.noteToggle || this.blackCardToggle || this.medicalToggle;
+    displayName() {
+      return this.selectedPerson?.DisplayName || '';
+    },
+    clubName() {
+      return this.selectedPerson?.Club?.Name || '';
+    },
+    pastCards() {
+      return this.selectedPersonPenalties;
+    },
+    selectedPerson() {
+      return this.fencer1 ? this.bout.Person1 : this.bout.Person2;
+    },
+    selectedPersonId() {
+      return this.fencer1 ? this.bout.Person1Id : this.bout.Person2Id;
+    },
+    selectedPersonPenalties() {
+      return Array.isArray(this.selectedPerson?.Penalties) ? this.selectedPerson.Penalties : [];
+    },
+    toggled() {
+      return this.yellowCardToggle || this.redCardToggle || this.noteToggle || this.blackCardToggle || this.medicalToggle;
     },
   },
   methods: {
@@ -193,16 +202,13 @@ export default {
     clearPenalty() {
       this.toggleAllOff();
       this.currentNote = '';
-    },
-    countCards() {
-      if (this.fencer1) {
-        this.yellowCardCount = this.bout.Person1?.Penalties?.filter((t3) => t3.PenaltyType === "Yellow" && t3.BoutId === this.bout.BoutId).length || 0;
-        this.redCardCount = this.bout.Person1?.Penalties?.filter((t3) => t3.PenaltyType === "Red" && t3.BoutId === this.bout.BoutId).length || 0;
-      }
-      if (!this.fencer1) {
-        this.yellowCardCount = this.bout.Person2?.Penalties?.filter((t3) => t3.PenaltyType === "Yellow" && t3.BoutId === this.bout.BoutId).length || 0;
-        this.redCardCount = this.bout.Person2?.Penalties?.filter((t3) => t3.PenaltyType === "Red" && t3.BoutId === this.bout.BoutId).length || 0;
-      }
+    },
+    countCards() {
+      const boutPenalties = this.selectedPersonPenalties.filter(penalty => penalty.BoutId === this.bout.BoutId);
+      this.yellowCardCount = boutPenalties.filter(penalty => penalty.PenaltyType === "Yellow").length;
+      this.redCardCount = boutPenalties.filter(penalty => penalty.PenaltyType === "Red").length;
+      this.blackCardCount = boutPenalties.filter(penalty => penalty.PenaltyType === "Black").length;
+      this.medicalCount = boutPenalties.filter(penalty => penalty.PenaltyType === "Medical").length;
     },
     toggleAllOff() {
       if (this.yellowCardToggle) this.yellowCardCount--;
@@ -251,31 +257,21 @@ export default {
       this.noteToggle = !this.noteToggle;
       this.currentNote = "";
     },
-    addNewPenalty() {
-      const newPenalty = {
-        BoutId: this.bout.BoutId,
-        FencerId: this.fencer1 ? this.bout.Person1Id : this.bout.Person2Id,
-        PenaltyId: Date.now(),
-        PenaltyType: this.getToggled(),
-        Notes: this.currentNote
-      };
-
-      if (this.fencer1) {
-        if (!Array.isArray(this.bout.Person1.Penalties)) {
-          this.bout.Person1.Penalties = [];
-          this.bout.Person1.EventPersons[0].LastNote = this.currentNote;
-        }
-        this.bout.Person1.Penalties.push(newPenalty);
-      } else {
-        if (!Array.isArray(this.bout.Person2.Penalties)) {
-          this.bout.Person2.Penalties = [];
-          this.bout.Person2.EventPersons[0].LastNote = this.currentNote;
-        }
-        this.bout.Person2.Penalties.push(newPenalty);
-      }
-
-      this.countCards();
-      this.$emit("penalty:add", newPenalty);
+    addNewPenalty() {
+      const newPenalty = {
+        BoutId: this.bout.BoutId,
+        PersonId: this.selectedPersonId,
+        PenaltyId: Date.now(),
+        PenaltyType: this.getToggled(),
+        Notes: this.currentNote
+      };
+
+      this.ensureSelectedPersonPenaltyState();
+      this.selectedPerson.Penalties.push(newPenalty);
+      this.updateSelectedPersonLastNote(this.currentNote);
+
+      this.countCards();
+      this.$emit("penalty:add", newPenalty);
       this.currentNote = "";
     },
     updatePenalty() {
@@ -283,11 +279,13 @@ export default {
       const existingPenaltyIndex = penalties.findIndex(p => p.PenaltyId === this.selectPenaltyId);
 
       if (existingPenaltyIndex !== -1) {
-        penalties[existingPenaltyIndex].PenaltyType = this.getToggled();
-        penalties[existingPenaltyIndex].Notes = this.currentNote;
-
-        this.$emit('penalty:update', penalties[existingPenaltyIndex]);
-      }
+        penalties[existingPenaltyIndex].PenaltyType = this.getToggled();
+        penalties[existingPenaltyIndex].Notes = this.currentNote;
+        penalties[existingPenaltyIndex].PersonId = this.selectedPersonId;
+        this.updateSelectedPersonLastNote(this.currentNote);
+
+        this.$emit('penalty:update', penalties[existingPenaltyIndex]);
+      }
 
       this.countCards();
       this.selectPenaltyId = null;
@@ -339,6 +337,19 @@ export default {
     getFlagColor(flag) {
       return flagColors[flag] || 'gray';
     },
+    ensureSelectedPersonPenaltyState() {
+      if (!Array.isArray(this.selectedPerson.Penalties)) {
+        this.selectedPerson.Penalties = [];
+      }
+
+      if (!Array.isArray(this.selectedPerson.EventPersons)) {
+        this.selectedPerson.EventPersons = [{ LastNote: '' }];
+      }
+    },
+    updateSelectedPersonLastNote(note) {
+      this.ensureSelectedPersonPenaltyState();
+      this.selectedPerson.EventPersons[0].LastNote = note;
+    },
   },
-};
-</script>
+};
+</script>

package/src/stories/Organisms/Cards/PenaltyFencerCard/PenaltyFencerCard.stories.js

@@ -8,13 +8,12 @@ export default {
     args: {
         personPenalties: getPenaltiesByEvent.Penalties[0],
         eventName: "Lynx Cup 2026"
-    },
-    argTypes: {
-        person: { control: 'object' },
-        penalties: { control: 'array' },
-        eventName: { control: 'text' }
-    }
-};
+    },
+    argTypes: {
+        personPenalties: { control: 'object' },
+        eventName: { control: 'text' }
+    }
+};
 
 export const Default = {
     args: {

package/src/stories/Organisms/Cards/PenaltyFencerCard/PenaltyFencerCard.vue

@@ -27,7 +27,7 @@
         <BaseIcon icon-name="fa-square" size="lg" color="black"/>
       </div>
       <div v-if="medicalCount > 0" class="flex items-center ml-2">
-        <BaseIcon icon-name="fa-plus-circle" size="lg" color="blue"/>
+        <BaseIcon icon-name="fa-truck-medical" size="lg" color="orange"/>
       </div>
     </div>
 
@@ -38,8 +38,8 @@
   </div>
 
   <transition name="fade-in-down">
-  <div v-if="localShowDetails" class="border-t border-dropdownSelect md:p-3">
-    <div v-for="penalty in personPenalties.Penalties" :key="penalty.BoutId" class="flex flex-col p-2 border-b my-2">
+    <div v-if="localShowDetails" class="border-t border-dropdownSelect md:p-3">
+    <div v-for="penalty in penalties" :key="penaltyKey(penalty)" class="flex flex-col p-2 border-b border-dropdownSelect my-2">
       <div class="flex flex-row justify-between">
         <div class="flex flex-row">
           <BaseIcon :icon-name="penaltyIcons[penalty.PenaltyType]" size="md" :color="penaltyColors[penalty.PenaltyType]"/>
@@ -77,7 +77,7 @@ import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 export default {
   name: 'PenaltyFencerCard',
   components: {BaseButton, BaseIcon, BaseText },
-  emits: ['handleConfirmRemoval','penalty:removal'],
+  emits: ['penalty:removal'],
   props: {
     personPenalties: {
       type: Object,
@@ -115,17 +115,20 @@ export default {
       const portrait = images.find(image => image.Type === 'Portrait');
       return portrait ? portrait.URL : '';
     },
+    penalties() {
+      return Array.isArray(this.personPenalties?.Penalties) ? this.personPenalties.Penalties : [];
+    },
     yellowCardCount() {
-      return this.personPenalties.Penalties.filter(p => p.PenaltyType === 'Yellow').length;
+      return this.penalties.filter(p => p.PenaltyType === 'Yellow').length;
     },
     redCardCount() {
-      return this.personPenalties.Penalties.filter(p => p.PenaltyType === 'Red').length;
+      return this.penalties.filter(p => p.PenaltyType === 'Red').length;
     },
     blackCardCount() {
-      return this.personPenalties.Penalties.filter(p => p.PenaltyType === 'Black').length;
+      return this.penalties.filter(p => p.PenaltyType === 'Black').length;
     },
     medicalCount() {
-      return this.personPenalties.Penalties.filter(p => p.PenaltyType === 'Medical').length;
+      return this.penalties.filter(p => p.PenaltyType === 'Medical').length;
     },
   },
   methods: {
@@ -136,8 +139,13 @@ export default {
       this.localShowDetails = !this.localShowDetails;
     },
     handleConfirmRemoval(penalty){
-      penalty.PersonId = this.personPenalties.PersonId
-      this.$emit('penalty:removal', penalty)
+      this.$emit('penalty:removal', {
+        ...penalty,
+        PersonId: this.personPenalties.PersonId
+      });
+    },
+    penaltyKey(penalty) {
+      return penalty.PenaltyId || `${penalty.BoutId}-${penalty.PenaltyType}-${penalty.Notes || ''}`;
     }
   }
 };

package/src/stories/Organisms/Cards/StaffCard/StaffCard.vue

@@ -73,10 +73,10 @@ export default {
     }
   },
   methods: {
-    handleAssignment(selected) {
-      const staff = { ...this.staff, Status: selected };
-      this.$emit('update:assignment', staff);
-    },
+    handleAssignment(selected) {
+      const staff = { ...this.staff, Role: selected };
+      this.$emit('update:assignment', staff);
+    },
     handlerRemoveFencer() {
       this.$emit('remove:staff', this.staff);
     }

package/src/stories/Organisms/Cards/WaitlistFencerCard/WaitlistFencerCard.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-if="person"
+       class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright">
+    <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
+      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold"/>
+    </div>
+    <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
+      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold"/>
+    </div>
+
+    <div class="hidden md:block mr-4">
+      <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+      </div>
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl">
+    </div>
+
+    <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
+      <button class="flex justify-start overflow-hidden text-left" type="button" @click="handleForwardToProfile">
+        <BaseText :text="displayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-xl truncate"/>
+      </button>
+      <span class="w-full flex justify-start">
+        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block"/>
+        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden"/>
+      </span>
+
+      <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
+        <div class="flex">
+          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
+          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+        </div>
+        <div class="flex">
+          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
+          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
+      <div class="flex">
+        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
+        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5"/>
+      </div>
+      <div class="flex">
+        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
+        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold"/>
+      </div>
+    </div>
+
+    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
+      <div class="flex justify-center w-20">
+        <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
+          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold"/>
+        </div>
+      </div>
+      <div class="w-44 flex justify-end">
+        <BaseButton label="Move to Active" size="xs" type="primary" icon-name="fa-arrow-up-from-bracket"
+                    class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
+                    @buttonClick="handleMoveToActive"/>
+      </div>
+    </div>
+
+    <div
+        class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6">
+      <BaseIcon icon-name="fa-circle-xmark" size="" color="quinary" hover="alarm"
+                @click="handleRemoveFencer" class="text-md md:text-2xl"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: 'WaitlistFencerCard',
+  components: {BaseButton, BaseIcon, BaseText},
+  emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
+  props: {
+    person: {
+      type: Object,
+      required: true
+    },
+    queuePosition: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    queueLabel() {
+      return `#${this.queuePosition}`;
+    },
+    displayName() {
+      return this.person?.Person?.DisplayName || 'Unknown fencer';
+    },
+    clubName() {
+      return this.person?.Person?.Club?.Name || 'No club listed';
+    },
+    clubShortName() {
+      return this.person?.Person?.Club?.ShortName || this.clubName;
+    },
+    portraitURL() {
+      const images = this.person?.Person?.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+    HEMARating() {
+      const rating = this.person?.Person?.HEMARatings?.[0]?.Rating;
+      return rating || 0;
+    },
+    M2Rating() {
+      const rating = this.person?.Person?.M2Ratings?.[0]?.Rating;
+      return rating || 'U';
+    }
+  },
+  methods: {
+    handleMoveToActive() {
+      this.$emit('move:active', {...this.person});
+    },
+    handleRemoveFencer() {
+      this.$emit('remove:fencer', {...this.person});
+    },
+    handleForwardToProfile() {
+      this.$emit('forward:toProfile', this.person.PersonId);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <VueDatePicker
-        v-model="selectedDate"
-        :format="dateFormat"
-        :min-date="minDate"
-        :mode="pickerMode"
-        placeholder="Select Date or Time"
-        :class="{'dp__input_invalid': invalid}"
-        v-bind="datePickerAttrs"
-    />
+    <VueDatePicker
+        v-model="selectedDate"
+        :formats="datePickerFormats"
+        :min-date="minDate"
+        :enable-time-picker="usesTimePicker"
+        :time-picker="pickerMode === 'time'"
+        placeholder="Select Date or Time"
+        :class="{'dp__input_invalid': invalid}"
+    />
   </div>
 </template>
 
@@ -50,43 +50,62 @@ export default {
           ? new Date('2018-01-01')
           : this.getThreeMonthsAgo();
     },
-    datePickerAttrs() {
-      return this.pickerMode === 'time' ? { 'time-picker': true } : {};
-    },
-    dateFormat() {
-      if (this.pickerMode === 'time') return 'HH:mm';
-      if (this.pickerMode === 'datetime') return 'MM/dd/yyyy HH:mm';
-      return 'MM/dd/yyyy';
-    }
-  },
+    usesTimePicker() {
+      return this.pickerMode !== 'date';
+    },
+    datePickerFormats() {
+      const formatsByMode = {
+        date: { input: 'MM/dd/yyyy' },
+        datetime: { input: 'MM/dd/yyyy HH:mm' },
+        time: { input: 'HH:mm' },
+      };
+
+      return formatsByMode[this.pickerMode];
+    },
+  },
   watch: {
-    selectedDate(newDate) {
-      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
-        const hours = String(newDate.hours).padStart(2, '0');
-        const minutes = String(newDate.minutes).padStart(2, '0');
-        this.$emit("update:selectedDate", `${hours}:${minutes}`);
-      } else {
-        this.$emit("update:selectedDate", newDate);
-      }
-    }
-  },
-  methods: {
-    getThreeMonthsAgo() {
-      return new Date(new Date().setMonth(new Date().getMonth() - 3));
-    },
-    parseDate(date) {
-      if (typeof date === 'string') {
-        if (this.pickerMode === 'time') {
-          const [hours, minutes] = date.split(':').map(Number);
-          return { hours, minutes };
-        }
-        const [year, month, day] = date.split('-').map(Number);
-        return new Date(year, month - 1, day);
-      }
-      return date;
-    }
-  }
-}
+    selectedDate(newDate) {
+      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
+        const hours = String(newDate.hours).padStart(2, '0');
+        const minutes = String(newDate.minutes).padStart(2, '0');
+        this.$emit("update:selectedDate", `${hours}:${minutes}`);
+        return;
+      }
+
+      if (this.pickerMode === 'date') {
+        this.$emit("update:selectedDate", this.formatDateOnly(newDate));
+        return;
+      }
+
+      this.$emit("update:selectedDate", newDate);
+    }
+  },
+  methods: {
+    getThreeMonthsAgo() {
+      return new Date(new Date().setMonth(new Date().getMonth() - 3));
+    },
+    parseDate(date) {
+      if (typeof date === 'string') {
+        if (this.pickerMode === 'time') {
+          const [hours, minutes] = date.split(':').map(Number);
+          return { hours, minutes };
+        }
+        const [year, month, day] = date.slice(0, 10).split('-').map(Number);
+        return new Date(year, month - 1, day);
+      }
+      return date;
+    },
+    formatDateOnly(date) {
+      if (!date) return '';
+      if (typeof date === 'string') return date.slice(0, 10);
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+  }
+}
 </script>
 
 <style scoped>

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

@@ -13,9 +13,9 @@
         </div>
       </section>
       <section v-if="localDisplays.length > 0" class="flex flex-col">
-        <div v-if="scoreboards.length > 0">
-          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect mb-4"/>
+        <div v-if="scoreboards.length > 0">
+          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
+          <div class="border-b border-dropdownSelect mb-4"/>
           <div v-for="scoreboard in scoreboards" :key="scoreboard.DisplayId + '-' + scoreboard.Type"
                class="flex flex-col py-2">
             <KioskCard :displayObject="scoreboard"
@@ -28,9 +28,10 @@
                        @update:ringChange="handeRingChange"
                        @remove:kiosk="handleRemove"
                        @update:assignToMe="handleAssignToMe"
-                       @update:selectedType="handleChangeType"
-                       @update:editKiosk="handleEditKiosk"
-            />
+                       @update:selectedType="handleChangeType"
+                       @update:editKiosk="handleEditKiosk"
+                       @test:scoreboard="handleScoreboardTest"
+            />
           </div>
         </div>
 
@@ -103,7 +104,7 @@ export default {
     BaseText,
     emptyDesertIcon
   },
-  emits: ['remove:kiosk', 'update:selectedStaff', 'update:selectedEvent', 'update:ringChange','update:selectedType', 'submit:kiosk', 'update:assignToMe'],
+  emits: ['remove:kiosk', 'test:scoreboard', 'update:selectedStaff', 'update:selectedEvent', 'update:ringChange','update:selectedType', 'submit:kiosk', 'update:assignToMe'],
   props: {
     displays: {
       type: Array,
@@ -158,8 +159,11 @@ export default {
       });
     }
   },
-  methods: {
-    transformAssignedTo(display) {
+  methods: {
+    handleScoreboardTest(display) {
+      this.$emit('test:scoreboard', display);
+    },
+    transformAssignedTo(display) {
       if (display.Person) {
         if (display.Person.DisplayName === 'BYE') {
           return {text: 'Unassigned', link: 'Unassigned'};

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

@@ -64,7 +64,7 @@ export default {
     BaseText,
     PoolFencerCard
   },
-  emits: ['remove:fencer', 'select:pool', 'add:fencerToPool'],
+  emits: ['add:fencerToPool', 'remove:fencer', 'select:pool', 'update:setDirector', 'update:swapFencers'],
   props: {
     poolId: {
       type: [String, Number],

package/src/stories/Organisms/Containers/PoolResults/PoolResultsTable.vue

@@ -11,7 +11,7 @@
         </div>
       </section>
 
-      <div v-if="shouldShowResults" v-for="(person, index) in results" :key="person.personId" class="flex flex-col py-1">
+      <div v-if="shouldShowResults" v-for="(person, index) in results" :key="person.PersonId || person.personId || index" class="flex flex-col py-1">
         <FencerPoolResultsCard
             :isLast="index === results.length - 1"
             :person="person"
@@ -39,18 +39,16 @@
 </template>
 
 <script>
-import FencerPoolResultsCard from "../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import FencerFinalResultCard from "../../Cards/FencerFinalResultCard/FencerFinalResultCard.vue";
+import FencerPoolResultsCard from "../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 
 export default {
   name: "PoolResultsTable",
   emits: ['update:handleDecreaseCount', 'update:handleIncreaseCount', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
   components: {
-    FencerFinalResultCard,
-    BaseText,
+    BaseText,
     BaseIcon,
     FencerPoolResultsCard,
     emptyDesertIcon
@@ -84,16 +82,30 @@ export default {
   },
   data() {
     return {
-      results: this.poolResults,
-      cutoffIndex: this.initialCutoffIndex,
+      results: this.clonePoolResults(this.poolResults),
+      cutoffIndex: this.initialCutoffIndex,
       emptyDesertIcon
     }
   },
-  watch: {
-    initialCutoffIndex(newValue) {
-      this.cutoffIndex = newValue - 1;
-      this.updatePromotions();
-    }
+  watch: {
+    poolResults: {
+      deep: true,
+      immediate: true,
+      handler(newResults) {
+        this.results = this.clonePoolResults(newResults);
+        this.updatePromotions();
+      }
+    },
+    initialCutoffIndex(newValue) {
+      this.cutoffIndex = newValue - 1;
+      this.updatePromotions();
+    },
+    numPromoted() {
+      this.updatePromotions();
+    },
+    promotedBy() {
+      this.updatePromotions();
+    },
   },
   computed: {
     shouldShowResults() {
@@ -156,11 +168,14 @@ export default {
     moveFencerDESeedUp(person) {
       this.$emit('update:moveFencerDESeedUp', person);
     },
-    moveFencerDESeedDown(person) {
-      this.$emit('update:moveFencerDESeedDown', person);
-    }
-  }
-}
+    moveFencerDESeedDown(person) {
+      this.$emit('update:moveFencerDESeedDown', person);
+    },
+    clonePoolResults(poolResults) {
+      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
+    }
+  }
+}
 </script>