@dcrackel/hematournamentui 1.0.699 → 1.0.701

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center border rounded-lg shadow-md bg-poolBox hover:border-bright p-2 md:p-3">
+  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-poolBox hover:border-bright p-2 md:p-3">
 
     <div class="flex ml-2 md:mr-6">
       <BaseIcon :icon-name="getIcon" size="" class="text-sm md:text-2xl" :color="getIconColorByConnected"/>
@@ -109,26 +109,26 @@
 <script>
 import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
-import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-
-const connectedIconByType = {
-  ScoreBoard: 'fa-wifi',
-  FlightBoard: 'fa-signal-stream'
-};
-
-const disconnectedIconByType = {
-  ScoreBoard: 'fa-wifi-slash',
-  FlightBoard: 'fa-signal-stream-slash'
-};
-
-const connectedColorByType = {
-  ScoreBoard: 'acceptedBorder',
-  FlightBoard: 'toggleBackground'
-};
-
-export default {
+import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
+import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+const connectedIconByType = {
+  ScoreBoard: 'fa-wifi',
+  FlightBoard: 'fa-signal-stream'
+};
+
+const disconnectedIconByType = {
+  ScoreBoard: 'fa-wifi-slash',
+  FlightBoard: 'fa-signal-stream-slash'
+};
+
+const connectedColorByType = {
+  ScoreBoard: 'acceptedBorder',
+  FlightBoard: 'toggleBackground'
+};
+
+export default {
   name: 'KioskCardPC',
   components: { BaseIcon, BaseText, DropDownMenu, ButtonBar, BaseButton },
   emits: ['update:kiosk', 'update:ringChange', 'update:staffChange', 'update:eventChange', 'update:selectedType', 'update:assignToMe', 'update:editKiosk', 'remove:kiosk'],
@@ -177,16 +177,16 @@ export default {
       localSelectedEvent: { text: this.displayObject.Event?.EventName || 'Select Event', link: this.displayObject.Event?.EventId || '' }
     };
   },
-  computed: {
-    getIcon() {
-      const iconMap = this.editableKiosk.Connected ? connectedIconByType : disconnectedIconByType;
-      return iconMap[this.editableKiosk.Type] || (this.editableKiosk.Connected ? 'fa-wifi-exclamation' : 'fa-wifi-slash');
-    },
-    getIconColorByConnected() {
-      if (!this.editableKiosk.Connected) return 'quaternary';
-
-      return connectedColorByType[this.editableKiosk.Type] || 'lossRed';
-    },
+  computed: {
+    getIcon() {
+      const iconMap = this.editableKiosk.Connected ? connectedIconByType : disconnectedIconByType;
+      return iconMap[this.editableKiosk.Type] || (this.editableKiosk.Connected ? 'fa-wifi-exclamation' : 'fa-wifi-slash');
+    },
+    getIconColorByConnected() {
+      if (!this.editableKiosk.Connected) return 'quaternary';
+
+      return connectedColorByType[this.editableKiosk.Type] || 'lossRed';
+    },
     typeButtons() {
       return [
         {

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

@@ -8,12 +8,12 @@ export default {
     args: {
         fencer1: false,
         bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
-    },
-    argTypes: {
-        fencer: { control: 'boolean' },
-        bout: { control: 'object' },
-    },
-};
+    },
+    argTypes: {
+        fencer1: { control: 'boolean' },
+        bout: { control: 'object' },
+    },
+};
 
 
 export const Default = {

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/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/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>
 
 

package/src/stories/Templates/Assignment/Assignment.stories.js

@@ -1,17 +1,19 @@
-import Assignments from './Assignment.vue';
-import assignmentMock from "../../../mocks/assignments.js";
-
-export default {
-    title: 'Templates/Assignments/Assignments',
-    component: Assignments,
-    tags: ['autodocs'],
-    args: {
-        assignments: assignmentMock
-    },
-    argTypes: {
-        assignments: { control: { type: Object } },
-    }
-};
+import Assignment from './Assignment.vue';
+import assignmentMock from "../../../mocks/assignments.js";
+
+export default {
+    title: 'Templates/Assignments/Assignments',
+    component: Assignment,
+    tags: ['autodocs'],
+    args: {
+        assignments: assignmentMock
+    },
+    argTypes: {
+        assignments: { control: { type: 'array' } },
+        forwardToEvent: { action: 'forwardToEvent' },
+        refreshAssignments: { action: 'refreshAssignments' },
+    }
+};
 
 
 export const Default = {
@@ -24,4 +26,4 @@ export const NoResults = {
     args: {
         assignments: []
     }
-};
+};