@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -2,36 +2,68 @@
   <div class="w-full bg-poolSetup p-2">
     <!-- Header Section -->
     <div class="flex items-center mb-6">
-      <div v-if="!portraitURL" class="w-12 h-12 rounded-full bg-dropdownSelect flex items-center justify-center"/>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md">
+      <div v-if="!portraitURL" class="w-12 h-12 rounded-full bg-dropdownSelect flex items-center justify-center" />
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md" />
       <div>
         <div class="pl-3">
-          <BaseText :text="displayName" size="lg" color="primary" weight="bold"/>
-          <BaseText :text="clubName" size="sm" color="quinary"/>
+          <BaseText :text="displayName" size="lg" color="primary" weight="bold" />
+          <BaseText :text="clubName" size="sm" color="quinary" />
         </div>
       </div>
     </div>
 
     <!-- Flags Section -->
     <div class="flex justify-around mb-6">
-      <div class="h-12 w-12 bg-neutral border rounded-full z-0 shadow" :class="yellowCardToggle ? 'border border-gold' : 'border'">
-        <BaseIcon iconName="fa-cards-blank" size="3xl" color="gold" class="pt-1 ml-1 z-1" @click="toggleCard('gold')"/>
-        <span class="h-5 w-5 rounded-full flex justify-center ml-9 -mt-3 z-10 border" :class="yellowCardToggle ? 'bg-gold' : 'bg-gray-200'" >
-          <BaseText :text="yellowCardCount" size="xs" color="primary"/></span>
+      <div
+        class="h-12 w-12 bg-neutral border rounded-full z-0 shadow"
+        :class="yellowCardToggle ? 'border border-gold' : 'border'"
+      >
+        <BaseIcon iconName="fa-cards-blank" size="3xl" color="gold" class="pt-1 ml-1 z-1" @click="toggleCard('gold')" />
+        <span
+          class="h-5 w-5 rounded-full flex justify-center ml-9 -mt-3 z-10 border"
+          :class="yellowCardToggle ? 'bg-gold' : 'bg-gray-200'"
+        >
+          <BaseText :text="yellowCardCount" size="xs" color="primary"
+        /></span>
       </div>
       <div class="h-12 w-12 bg-neutral rounded-full z-0 shadow" :class="redCardToggle ? 'border border-red' : 'border'">
-        <BaseIcon iconName="fa-cards-blank" size="3xl" color="red" class="pt-1 ml-1 z-1" @click="toggleCard('red')"/>
-        <span class="h-5 w-5 rounded-full flex justify-center ml-9 -mt-3 z-10 border" :class="redCardToggle ? 'bg-red' : 'bg-gray-200'">
-          <BaseText :text="redCardCount" size="xs" :color="redCardToggle ? 'neutral' : 'primary'"/></span>
+        <BaseIcon iconName="fa-cards-blank" size="3xl" color="red" class="pt-1 ml-1 z-1" @click="toggleCard('red')" />
+        <span
+          class="h-5 w-5 rounded-full flex justify-center ml-9 -mt-3 z-10 border"
+          :class="redCardToggle ? 'bg-red' : 'bg-gray-200'"
+        >
+          <BaseText :text="redCardCount" size="xs" :color="redCardToggle ? 'neutral' : 'primary'"
+        /></span>
       </div>
-      <div class="h-12 w-12 bg-neutral border rounded-full z-0 shadow" :class="blackCardToggle ? 'border border-black' : 'border'">
-        <BaseIcon iconName="fa-cards-blank" size="3xl" color="black" class="pt-1 ml-1 z-1" @click="toggleCard('black')"/>
+      <div
+        class="h-12 w-12 bg-neutral border rounded-full z-0 shadow"
+        :class="blackCardToggle ? 'border border-black' : 'border'"
+      >
+        <BaseIcon
+          iconName="fa-cards-blank"
+          size="3xl"
+          color="black"
+          class="pt-1 ml-1 z-1"
+          @click="toggleCard('black')"
+        />
       </div>
-      <div class="h-12 w-12 bg-neutral border rounded-full z-0 shadow" :class="noteToggle ? 'border border-blue' : 'border'">
-        <BaseIcon iconName="fa-pen-to-square" size="3xl" color="blue" class="pt-1 ml-2 z-1" @click="toggleNote"/>
+      <div
+        class="h-12 w-12 bg-neutral border rounded-full z-0 shadow"
+        :class="noteToggle ? 'border border-blue' : 'border'"
+      >
+        <BaseIcon iconName="fa-pen-to-square" size="3xl" color="blue" class="pt-1 ml-2 z-1" @click="toggleNote" />
       </div>
-      <div class="h-12 w-12 bg-neutral border rounded-full z-0 shadow" :class="medicalToggle ? 'border border-orange' : 'border'">
-        <BaseIcon iconName="fa-truck-medical" size="3xl" color="orange" class="pt-1 ml-2 z-1" @click="toggleCard('medical')"/>
+      <div
+        class="h-12 w-12 bg-neutral border rounded-full z-0 shadow"
+        :class="medicalToggle ? 'border border-orange' : 'border'"
+      >
+        <BaseIcon
+          iconName="fa-truck-medical"
+          size="3xl"
+          color="orange"
+          class="pt-1 ml-2 z-1"
+          @click="toggleCard('medical')"
+        />
       </div>
     </div>
 
@@ -39,13 +71,11 @@
     <div class="mb-3">
       <div class="flex flex-wrap gap-2">
         <button
-            v-for="phrase in quickPhrases"
-            :key="phrase"
-            type="button"
-            class="rounded-full border px-3 py-1 text-sm shadow-sm bg-white
-             hover:bg-gray-50 active:scale-[0.98] transition
-             disabled:opacity-40 disabled:cursor-not-allowed"
-            @click="applyQuickPhrase(phrase)"
+          v-for="phrase in quickPhrases"
+          :key="phrase"
+          type="button"
+          class="rounded-full border px-3 py-1 text-sm shadow-sm bg-white hover:bg-gray-50 active:scale-[0.98] transition disabled:opacity-40 disabled:cursor-not-allowed"
+          @click="applyQuickPhrase(phrase)"
         >
           {{ phrase }}
         </button>
@@ -54,68 +84,86 @@
 
     <!-- Notes Section -->
     <div class="mb-4">
-      <textarea v-model="currentNote" class="w-full h-20 border rounded-md p-2" placeholder="Add a note..."/>
+      <textarea v-model="currentNote" class="w-full h-20 border rounded-md p-2" placeholder="Add a note..." />
       <div class="w-full flex justify-between">
         <BaseButton type="primary" label="Clear" size="sm" @buttonClick="clearPenalty()" />
         <BaseButton v-if="toggled" type="primary" label="Save Penalty" size="sm" @buttonClick="handlePenalty()" />
-        <BaseText v-if="!toggled"  text="Save Penalty" color="quinary" size="sm" class="bg-poolSetup border p-2 rounded-lg ml-1 resize-none focus:ring-primary focus:border-primary" />
+        <BaseText
+          v-if="!toggled"
+          text="Save Penalty"
+          color="quinary"
+          size="sm"
+          class="bg-poolSetup border p-2 rounded-lg ml-1 resize-none focus:ring-primary focus:border-primary"
+        />
       </div>
     </div>
 
     <!-- Past cards Section -->
     <div>
-      <BaseText v-if="pastCards && pastCards.length" text="Past Cards in this Event" type="h3" size="lg" color="primary" weight="bold" class="mb-2 "/>
-      <div v-for="card in pastCards" :key="card.PenaltyId" class="flex items-center justify-between bg-neutral mb-2 border shadow-md p-2 rounded-lg">
-        <BaseIcon :iconName="getFlagIcon(card.PenaltyType)" :color="getFlagColor(card.PenaltyType)"/>
-        <div class="flex-grow ml-4 text-sm"  @click="selectPastCard(card)">
-          <BaseText :text="card.Notes" type="p" size="sm" color="primary" class=""/>
+      <BaseText
+        v-if="pastCards && pastCards.length"
+        text="Past Cards in this Event"
+        type="h3"
+        size="lg"
+        color="primary"
+        weight="bold"
+        class="mb-2"
+      />
+      <div
+        v-for="card in pastCards"
+        :key="card.PenaltyId"
+        class="flex items-center justify-between bg-neutral mb-2 border shadow-md p-2 rounded-lg"
+      >
+        <BaseIcon :iconName="getFlagIcon(card.PenaltyType)" :color="getFlagColor(card.PenaltyType)" />
+        <div class="flex-grow ml-4 text-sm" @click="selectPastCard(card)">
+          <BaseText :text="card.Notes" type="p" size="sm" color="primary" class="" />
         </div>
-        <BaseIcon iconName="fa-times" color="red" @click="removeNote(card.PenaltyId)"/>
+        <BaseIcon iconName="fa-times" color="red" @click="removeNote(card.PenaltyId)" />
       </div>
     </div>
   </div>
   <ConfirmModal
-      :show="showConfirmModal"
-      iconName="fa-circle-exclamation"
-      iconColor="alarmText"
-      iconBackgroundColor="alarmHighlight"
-      iconBorderColor="lossRed"
-      headerText="Fencer will be Removed!"
-      bodyText="This action requires a second staff member's approval.  Do you wish to continue?"
-      confirmText="Confirm"
-      cancelText="Cancel"
-      @confirm-modal="confirmAction"
-      @cancel-modal="cancelAction"
-      @update:show="showConfirmModal = $event"
+    :show="showConfirmModal"
+    iconName="fa-circle-exclamation"
+    iconColor="alarmText"
+    iconBackgroundColor="alarmHighlight"
+    iconBorderColor="lossRed"
+    headerText="Fencer will be Removed!"
+    bodyText="This action requires a second staff member's approval.  Do you wish to continue?"
+    confirmText="Confirm"
+    cancelText="Cancel"
+    @confirm-modal="confirmAction"
+    @cancel-modal="cancelAction"
+    @update:show="showConfirmModal = $event"
   />
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ConfirmModal from "../../../Molecules/Modals/ConfirmModal/ConfirmModal.vue";
-
-const flagIcons = {
-  Yellow: 'fa-cards-blank',
-  Red: 'fa-cards-blank',
-  Black: 'fa-cards-blank',
-  Note: 'fa-user-md',
-  Medical: 'fa-truck-medical'
-};
-
-const flagColors = {
-  Yellow: 'gold',
-  Red: 'red',
-  Black: 'black',
-  Note: 'blue',
-  Medical: 'orange'
-};
-
-export default {
-  name: "PenaltyCard",
-  components: {ConfirmModal, BaseIcon, BaseButton, BaseText},
-  emits: ["penalty:remove", "penalty:add", "penalty:update", "toggleFlag"],
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import ConfirmModal from '../../../Molecules/Modals/ConfirmModal/ConfirmModal.vue';
+
+const flagIcons = {
+  Yellow: 'fa-cards-blank',
+  Red: 'fa-cards-blank',
+  Black: 'fa-cards-blank',
+  Note: 'fa-user-md',
+  Medical: 'fa-truck-medical'
+};
+
+const flagColors = {
+  Yellow: 'gold',
+  Red: 'red',
+  Black: 'black',
+  Note: 'blue',
+  Medical: 'orange'
+};
+
+export default {
+  name: 'PenaltyCard',
+  components: { ConfirmModal, BaseIcon, BaseButton, BaseText },
+  emits: ['penalty:remove', 'penalty:add', 'penalty:update', 'toggleFlag'],
   props: {
     fencer1: {
       type: Boolean,
@@ -125,11 +173,11 @@ export default {
     bout: {
       type: Object,
       required: true
-    },
+    }
   },
   data() {
     return {
-      currentNote: "",
+      currentNote: '',
       selectPenaltyId: 0,
       pastNotes: [],
       yellowCardToggle: false,
@@ -142,13 +190,7 @@ export default {
       medicalCount: 0,
       medicalToggle: false,
       showConfirmModal: false,
-      quickPhrases: [
-        'Back of Head',
-        'Excessive force',
-        'Gear issue',
-        'Ignoring director',
-        'Unsafe fencing',
-      ],
+      quickPhrases: ['Back of Head', 'Excessive force', 'Gear issue', 'Ignoring director', 'Unsafe fencing']
     };
   },
   mounted() {
@@ -156,36 +198,38 @@ export default {
   },
   computed: {
     portraitURL() {
-      const images = this.fencer1 ? this.bout?.Person1?.Images ?? [] : this.bout?.Person2?.Images ?? [];
+      const images = this.fencer1 ? (this.bout?.Person1?.Images ?? []) : (this.bout?.Person2?.Images ?? []);
       const portrait = images.find(image => image.URL);
       return portrait ? portrait.URL : '';
     },
-    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;
+    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: {
     applyQuickPhrase(phrase) {
       this.currentNote = this.currentNote + phrase;
-   },
+    },
     selectPastCard(card) {
       this.selectPenaltyId = card.PenaltyId;
       this.currentNote = card.Notes;
@@ -202,13 +246,13 @@ export default {
     clearPenalty() {
       this.toggleAllOff();
       this.currentNote = '';
-    },
-    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;
+    },
+    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--;
@@ -231,15 +275,15 @@ export default {
       this.toggleAllOff();
 
       const cardMappings = {
-        gold: {toggle: 'yellowCardToggle', count: 'yellowCardCount'},
-        red: {toggle: 'redCardToggle', count: 'redCardCount'},
-        black: {toggle: 'blackCardToggle', count: 'blackCardCount'},
-        medical: {toggle: 'medicalToggle', count: 'medicalCount'},
-        note: {toggle: 'noteToggle'}
+        gold: { toggle: 'yellowCardToggle', count: 'yellowCardCount' },
+        red: { toggle: 'redCardToggle', count: 'redCardCount' },
+        black: { toggle: 'blackCardToggle', count: 'blackCardCount' },
+        medical: { toggle: 'medicalToggle', count: 'medicalCount' },
+        note: { toggle: 'noteToggle' }
       };
 
       if (cardMappings[card]) {
-        const {toggle, count} = cardMappings[card];
+        const { toggle, count } = cardMappings[card];
 
         if (toggle) {
           this[toggle] = !this[toggle];
@@ -250,42 +294,42 @@ export default {
         }
       }
 
-      this.$emit("toggleFlag", card);
+      this.$emit('toggleFlag', card);
     },
     toggleNote() {
       this.toggleAllOff();
       this.noteToggle = !this.noteToggle;
-      this.currentNote = "";
+      this.currentNote = '';
     },
-    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 = "";
+    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() {
       const penalties = this.fencer1 ? this.bout.Person1.Penalties : this.bout.Person2.Penalties;
       const existingPenaltyIndex = penalties.findIndex(p => p.PenaltyId === this.selectPenaltyId);
 
       if (existingPenaltyIndex !== -1) {
-        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]);
-      }
+        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;
@@ -324,32 +368,32 @@ export default {
         this.countCards();
       }
     },
-    confirmAction(){
+    confirmAction() {
       this.addNewPenalty();
     },
     cancelAction() {
       this.blackCardToggle = false;
-      this.currentNote = "";
-    },
-    getFlagIcon(flag) {
-      return flagIcons[flag] || 'fa-circle';
-    },
-    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>
+      this.currentNote = '';
+    },
+    getFlagIcon(flag) {
+      return flagIcons[flag] || 'fa-circle';
+    },
+    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>

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

@@ -2,22 +2,22 @@ import PenaltyFencerCard from './PenaltyFencerCard.vue';
 import getPenaltiesByEvent from '../../../../mocks/getPenaltiesByEvent.js';
 
 export default {
-    title: 'Organisms/Cards/PenaltyFencerCard',
-    component: PenaltyFencerCard,
-    tags: ['autodocs'],
-    args: {
-        personPenalties: getPenaltiesByEvent.Penalties[0],
-        eventName: "Lynx Cup 2026"
-    },
-    argTypes: {
-        personPenalties: { control: 'object' },
-        eventName: { control: 'text' }
-    }
-};
+  title: 'Organisms/Cards/PenaltyFencerCard',
+  component: PenaltyFencerCard,
+  tags: ['autodocs'],
+  args: {
+    personPenalties: getPenaltiesByEvent.Penalties[0],
+    eventName: 'Lynx Cup 2026'
+  },
+  argTypes: {
+    personPenalties: { control: 'object' },
+    eventName: { control: 'text' }
+  }
+};
 
 export const Default = {
-    args: {
-        personPenalties: getPenaltiesByEvent.Penalties[2],
-        eventName: "Lynx Cup 2026"
-    }
-}
+  args: {
+    personPenalties: getPenaltiesByEvent.Penalties[2],
+    eventName: 'Lynx Cup 2026'
+  }
+};