@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,82 +1,124 @@
 <template>
-  <div v-if="personPenalties"
-       class="flex items-center border-b border-dropdownSelect bg-white hover:border-bright px-4 py-4"
-       @click="toggleDetails">
-
+  <div
+    v-if="personPenalties"
+    class="flex items-center border-b border-dropdownSelect bg-white hover:border-bright px-4 py-4"
+    @click="toggleDetails"
+  >
     <div class="hidden md:block mr-4">
       <div v-if="!portraitURL" class="w-9 h-9 rounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-xl">
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-xl" />
     </div>
 
     <div class="flex flex-col w-1/2 md:w-4/12 justify-start">
-      <BaseText :text="personPenalties.DisplayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-lg"/>
+      <BaseText
+        :text="personPenalties.DisplayName"
+        size="md"
+        color="quaternary"
+        weight="bold"
+        class="text-sm md:text-lg"
+      />
     </div>
 
     <div class="flex flex-row ml-auto space-x-4">
       <div v-if="yellowCardCount > 0" class="flex items-center">
-        <BaseIcon icon-name="fa-square" size="lg" color="gold"/>
-        <BaseText :text="yellowCardCount" size="md" color="quinary" weight="bold" class="ml-2"/>
+        <BaseIcon icon-name="fa-square" size="lg" color="gold" />
+        <BaseText :text="yellowCardCount" size="md" color="quinary" weight="bold" class="ml-2" />
       </div>
       <div v-if="redCardCount > 0" class="flex items-center">
-        <BaseIcon icon-name="fa-square" size="lg" color="red"/>
-        <BaseText :text="redCardCount" size="md" color="quinary" weight="bold" class="ml-2"/>
+        <BaseIcon icon-name="fa-square" size="lg" color="red" />
+        <BaseText :text="redCardCount" size="md" color="quinary" weight="bold" class="ml-2" />
       </div>
       <div v-if="blackCardCount > 0" class="flex items-center ml-2">
-        <BaseIcon icon-name="fa-square" size="lg" color="black"/>
+        <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-truck-medical" size="lg" color="orange"/>
+        <BaseIcon icon-name="fa-truck-medical" size="lg" color="orange" />
       </div>
     </div>
 
     <button class="ml-4">
-      <BaseIcon :icon-name="'fa-chevron-down'" size="lg" color="quaternary"
-                :class="{'rotate-0': !localShowDetails, '-rotate-180': localShowDetails, 'transition-transform duration-300': true}" />
+      <BaseIcon
+        :icon-name="'fa-chevron-down'"
+        size="lg"
+        color="quaternary"
+        :class="{
+          'rotate-0': !localShowDetails,
+          '-rotate-180': localShowDetails,
+          'transition-transform duration-300': true
+        }"
+      />
     </button>
   </div>
 
   <transition name="fade-in-down">
     <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]"/>
-          <BaseText :text="penalty.PenaltyType" size="md" color="quaternary" weight="bold" class="-mt-0.5 ml-2 text-sm md:text-md"/>
-        </div>
-        <div class="flex flex-row">
-          <BaseText :text="eventName" size="sm" color="quaternary" weight="normal" class="ml-1 hidden md:block"/>
-          <BaseText text="/" size="sm" color="quaternary" weight="bold" class="ml-1 hidden md:block"/>
-          <BaseText :text="penalty.PoolName" size="sm" color="quaternary" weight="normal" class="ml-1"/>
+      <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]"
+            />
+            <BaseText
+              :text="penalty.PenaltyType"
+              size="md"
+              color="quaternary"
+              weight="bold"
+              class="-mt-0.5 ml-2 text-sm md:text-md"
+            />
+          </div>
+          <div class="flex flex-row">
+            <BaseText :text="eventName" size="sm" color="quaternary" weight="normal" class="ml-1 hidden md:block" />
+            <BaseText text="/" size="sm" color="quaternary" weight="bold" class="ml-1 hidden md:block" />
+            <BaseText :text="penalty.PoolName" size="sm" color="quaternary" weight="normal" class="ml-1" />
+          </div>
         </div>
-      </div>
-      <div class="flex flex-col md:flex-row justify-between my-1">
-        <div class="flex flex-row">
-          <BaseText text="Notes:" size="sm" color="quinary" weight="bold" class=""/>
-          <BaseText v-if="penalty.Notes" :text="penalty.Notes" size="sm" color="quinary" weight="normal" class="ml-2"/>
+        <div class="flex flex-col md:flex-row justify-between my-1">
+          <div class="flex flex-row">
+            <BaseText text="Notes:" size="sm" color="quinary" weight="bold" class="" />
+            <BaseText
+              v-if="penalty.Notes"
+              :text="penalty.Notes"
+              size="sm"
+              color="quinary"
+              weight="normal"
+              class="ml-2"
+            />
+          </div>
+          <div class="flex flex-row">
+            <BaseText text="Issued By:" size="sm" color="quaternary" weight="bold" class="" />
+            <BaseText :text="penalty.IssuedBy" size="sm" color="quaternary" weight="normal" class="ml-1" />
+          </div>
         </div>
-        <div class="flex flex-row">
-          <BaseText text="Issued By:" size="sm" color="quaternary" weight="bold" class=""/>
-          <BaseText :text="penalty.IssuedBy" size="sm" color="quaternary" weight="normal" class="ml-1"/>
+        <div v-if="shouldShowConfirmButton(penalty)" class="md:-mt-5 mx-auto">
+          <BaseButton
+            label="Confirm Removal of Fencer"
+            size="sm"
+            type="primary"
+            @buttonClick="handleConfirmRemoval(penalty)"
+            class="my-2"
+          />
         </div>
       </div>
-      <div v-if="shouldShowConfirmButton(penalty)" class="md:-mt-5 mx-auto">
-        <BaseButton label="Confirm Removal of Fencer" size="sm" type="primary" @buttonClick="handleConfirmRemoval(penalty)" class="my-2"/>
-      </div>
     </div>
-  </div>
   </transition>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'PenaltyFencerCard',
-  components: {BaseButton, BaseIcon, BaseText },
+  components: { BaseButton, BaseIcon, BaseText },
   emits: ['penalty:removal'],
   props: {
     personPenalties: {
@@ -87,7 +129,7 @@ export default {
       type: String,
       required: true
     },
-    showDetails:  {
+    showDetails: {
       type: Boolean,
       default: true
     }
@@ -129,16 +171,16 @@ export default {
     },
     medicalCount() {
       return this.penalties.filter(p => p.PenaltyType === 'Medical').length;
-    },
+    }
   },
   methods: {
     shouldShowConfirmButton(penalty) {
-      return (penalty.PenaltyType === "Black" || penalty.PenaltyType === "Medical") && !penalty.Confirmed;
+      return (penalty.PenaltyType === 'Black' || penalty.PenaltyType === 'Medical') && !penalty.Confirmed;
     },
     toggleDetails() {
       this.localShowDetails = !this.localShowDetails;
     },
-    handleConfirmRemoval(penalty){
+    handleConfirmRemoval(penalty) {
       this.$emit('penalty:removal', {
         ...penalty,
         PersonId: this.personPenalties.PersonId
@@ -159,7 +201,7 @@ export default {
 /* Fade Up (When Leaving) */
 .fade-in-down-leave-active {
   animation: fadeOutUp 0.3s ease-in;
-  max-height: 100px;  /* Ensures smooth shrinking */
+  max-height: 100px; /* Ensures smooth shrinking */
   overflow: hidden;
 }
 

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

@@ -3,200 +3,200 @@ import PoolBouts from '../../../../mocks/getPoolsWithBouts';
 import HostingClubColors from '../../../../mocks/getPoolsWithBoutsClubColors.js';
 
 export default {
-    title: 'Organisms/Cards/PoolBoutMatchCard',
-    component: PoolBoutMatchCard,
-    tags: ['autodocs'],
-    args: {
-        bout: {
-            BoutId: 1823,
-            PoolId: 137,
-            EventId: 5,
-            Person1Id: 10,
-            Person2Id: 1,
-            Status: 'Scheduled',
-            Score1: 0,
-            Score2: 0,
-            Started: null,
-            TimeLeft: 0,
-            RoundLabel: null,
-            DEBoutId: null,
-            DENextBoutId: null,
-            RefereeId: null,
-            createdAt: '2024-06-15T06:45:39.000Z',
-            updatedAt: '2024-06-15T06:45:39.000Z',
-            Person1: {
-                PersonId: 10,
-                DisplayName: 'Melissa Jones',
-                ClubId: 4,
-                Images: [],
-                Club: {
-                    Name: 'Guardians of the Guard',
-                },
-            },
-            Person2: {
-                PersonId: 1,
-                DisplayName: 'Dave Smith',
-                ClubId: 4,
-                Images: [
-                    {
-                        ImageId: 7,
-                        URL: 'https://randomuser.me/api/portraits/men/22.jpg',
-                    },
-                ],
-                Club: {
-                    Name: 'Guardians of the Guard',
-                },
-            },
-        },
-        hostingClubColors: HostingClubColors,
+  title: 'Organisms/Cards/PoolBoutMatchCard',
+  component: PoolBoutMatchCard,
+  tags: ['autodocs'],
+  args: {
+    bout: {
+      BoutId: 1823,
+      PoolId: 137,
+      EventId: 5,
+      Person1Id: 10,
+      Person2Id: 1,
+      Status: 'Scheduled',
+      Score1: 0,
+      Score2: 0,
+      Started: null,
+      TimeLeft: 0,
+      RoundLabel: null,
+      DEBoutId: null,
+      DENextBoutId: null,
+      RefereeId: null,
+      createdAt: '2024-06-15T06:45:39.000Z',
+      updatedAt: '2024-06-15T06:45:39.000Z',
+      Person1: {
+        PersonId: 10,
+        DisplayName: 'Melissa Jones',
+        ClubId: 4,
+        Images: [],
+        Club: {
+          Name: 'Guardians of the Guard'
+        }
+      },
+      Person2: {
+        PersonId: 1,
+        DisplayName: 'Dave Smith',
+        ClubId: 4,
+        Images: [
+          {
+            ImageId: 7,
+            URL: 'https://randomuser.me/api/portraits/men/22.jpg'
+          }
+        ],
+        Club: {
+          Name: 'Guardians of the Guard'
+        }
+      }
     },
-    argTypes: {
-        bout: {
-            control: 'object',
-        },
-        hostingClubColors: {
-            control: 'object',
-        },
+    hostingClubColors: HostingClubColors
+  },
+  argTypes: {
+    bout: {
+      control: 'object'
     },
+    hostingClubColors: {
+      control: 'object'
+    }
+  }
 };
 
 export const Default = {
-    args: {
-        bout: {
-            BoutId: 1823,
-            PoolId: 137,
-            EventId: 5,
-            Person1Id: 10,
-            Person2Id: 1,
-            Status: 'Scheduled',
-            Score1: 0,
-            Score2: 0,
-            Started: null,
-            TimeLeft: 0,
-            RoundLabel: null,
-            DEBoutId: null,
-            DENextBoutId: null,
-            RefereeId: null,
-            createdAt: '2024-06-15T06:45:39.000Z',
-            updatedAt: '2024-06-15T06:45:39.000Z',
-            Person1: {
-                PersonId: 10,
-                DisplayName: 'Melissa Jones',
-                ClubId: 4,
-                Images: [],
-                Club: {
-                    Name: 'Guardians of the Guard',
-                },
-            },
-            Person2: {
-                PersonId: 1,
-                DisplayName: 'Dave Smith',
-                ClubId: 4,
-                Images: [
-                    {
-                        ImageId: 7,
-                        URL: 'https://randomuser.me/api/portraits/men/22.jpg',
-                    },
-                ],
-                Club: {
-                    Name: 'Fechtastic Fighters',
-                },
-            },
-        },
-        hostingClubColors: HostingClubColors,
+  args: {
+    bout: {
+      BoutId: 1823,
+      PoolId: 137,
+      EventId: 5,
+      Person1Id: 10,
+      Person2Id: 1,
+      Status: 'Scheduled',
+      Score1: 0,
+      Score2: 0,
+      Started: null,
+      TimeLeft: 0,
+      RoundLabel: null,
+      DEBoutId: null,
+      DENextBoutId: null,
+      RefereeId: null,
+      createdAt: '2024-06-15T06:45:39.000Z',
+      updatedAt: '2024-06-15T06:45:39.000Z',
+      Person1: {
+        PersonId: 10,
+        DisplayName: 'Melissa Jones',
+        ClubId: 4,
+        Images: [],
+        Club: {
+          Name: 'Guardians of the Guard'
+        }
+      },
+      Person2: {
+        PersonId: 1,
+        DisplayName: 'Dave Smith',
+        ClubId: 4,
+        Images: [
+          {
+            ImageId: 7,
+            URL: 'https://randomuser.me/api/portraits/men/22.jpg'
+          }
+        ],
+        Club: {
+          Name: 'Fechtastic Fighters'
+        }
+      }
     },
+    hostingClubColors: HostingClubColors
+  }
 };
 
 export const ScheduledBout = {
-    args: {
-        bout: {
-            BoutId: 1824,
-            PoolId: 138,
-            EventId: 6,
-            Person1Id: 11,
-            Person2Id: 2,
-            Status: 'Scheduled',
-            Score1: 0,
-            Score2: 0,
-            Started: null,
-            TimeLeft: 0,
-            RoundLabel: null,
-            DEBoutId: null,
-            DENextBoutId: null,
-            RefereeId: null,
-            createdAt: '2024-06-15T06:45:39.000Z',
-            updatedAt: '2024-06-15T06:45:39.000Z',
-            Person1: {
-                PersonId: 11,
-                DisplayName: 'John Doe',
-                ClubId: 5,
-                Images: [],
-                Club: {
-                    Name: 'Warriors of the West',
-                },
-            },
-            Person2: {
-                PersonId: 2,
-                DisplayName: 'Jane Doe',
-                ClubId: 5,
-                Images: [
-                    {
-                        ImageId: 8,
-                        URL: 'https://randomuser.me/api/portraits/women/22.jpg',
-                    },
-                ],
-                Club: {
-                    Name: 'Warriors of the West',
-                },
-            },
-        },
-        hostingClubColors: { Color1: 'green', Color2: 'purple'},
+  args: {
+    bout: {
+      BoutId: 1824,
+      PoolId: 138,
+      EventId: 6,
+      Person1Id: 11,
+      Person2Id: 2,
+      Status: 'Scheduled',
+      Score1: 0,
+      Score2: 0,
+      Started: null,
+      TimeLeft: 0,
+      RoundLabel: null,
+      DEBoutId: null,
+      DENextBoutId: null,
+      RefereeId: null,
+      createdAt: '2024-06-15T06:45:39.000Z',
+      updatedAt: '2024-06-15T06:45:39.000Z',
+      Person1: {
+        PersonId: 11,
+        DisplayName: 'John Doe',
+        ClubId: 5,
+        Images: [],
+        Club: {
+          Name: 'Warriors of the West'
+        }
+      },
+      Person2: {
+        PersonId: 2,
+        DisplayName: 'Jane Doe',
+        ClubId: 5,
+        Images: [
+          {
+            ImageId: 8,
+            URL: 'https://randomuser.me/api/portraits/women/22.jpg'
+          }
+        ],
+        Club: {
+          Name: 'Warriors of the West'
+        }
+      }
     },
+    hostingClubColors: { Color1: 'green', Color2: 'purple' }
+  }
 };
 
 export const CompletedBout = {
-    args: {
-        bout: {
-            BoutId: 1825,
-            PoolId: 139,
-            EventId: 7,
-            Person1Id: 12,
-            Person2Id: 3,
-            Status: 'Completed',
-            Score1: 7,
-            Score2: 4,
-            Started: '2024-06-15T07:00:00.000Z',
-            TimeLeft: 0,
-            RoundLabel: 'Final',
-            DEBoutId: 101,
-            DENextBoutId: 102,
-            RefereeId: 5,
-            createdAt: '2024-06-15T06:45:39.000Z',
-            updatedAt: '2024-06-15T07:30:39.000Z',
-            Person1: {
-                PersonId: 12,
-                DisplayName: 'Alice Wonderland',
-                ClubId: 6,
-                Images: [],
-                Club: {
-                    Name: 'Knights of the Round',
-                },
-            },
-            Person2: {
-                PersonId: 3,
-                DisplayName: 'Bob Builder',
-                ClubId: 6,
-                Images: [
-                    {
-                        ImageId: 9,
-                        URL: 'https://randomuser.me/api/portraits/men/23.jpg',
-                    },
-                ],
-                Club: {
-                    Name: 'Fechtastic Fighters',
-                },
-            },
-        },
-        hostingClubColors: { Color1: 'blue', Color2: 'red'},
+  args: {
+    bout: {
+      BoutId: 1825,
+      PoolId: 139,
+      EventId: 7,
+      Person1Id: 12,
+      Person2Id: 3,
+      Status: 'Completed',
+      Score1: 7,
+      Score2: 4,
+      Started: '2024-06-15T07:00:00.000Z',
+      TimeLeft: 0,
+      RoundLabel: 'Final',
+      DEBoutId: 101,
+      DENextBoutId: 102,
+      RefereeId: 5,
+      createdAt: '2024-06-15T06:45:39.000Z',
+      updatedAt: '2024-06-15T07:30:39.000Z',
+      Person1: {
+        PersonId: 12,
+        DisplayName: 'Alice Wonderland',
+        ClubId: 6,
+        Images: [],
+        Club: {
+          Name: 'Knights of the Round'
+        }
+      },
+      Person2: {
+        PersonId: 3,
+        DisplayName: 'Bob Builder',
+        ClubId: 6,
+        Images: [
+          {
+            ImageId: 9,
+            URL: 'https://randomuser.me/api/portraits/men/23.jpg'
+          }
+        ],
+        Club: {
+          Name: 'Fechtastic Fighters'
+        }
+      }
     },
+    hostingClubColors: { Color1: 'blue', Color2: 'red' }
+  }
 };

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

@@ -1,9 +1,15 @@
 <template>
-    <section class="relative flex items-center justify-between bg-white shadow-md rounded-lg p-4 mb-4 border border-dropdownSelect">
+  <section
+    class="relative flex items-center justify-between bg-white shadow-md rounded-lg p-4 mb-4 border border-dropdownSelect"
+  >
     <div :class="`absolute left-0 top-0 bottom-0 w-2 rounded-l-lg bg-${hostingClubColors.Color1}`"></div>
 
     <div class="flex items-center space-x-4 w-1/3">
-      <img :src="bout.Person1.Images[0]?.URL || missingPortrait" alt="Person 1" class="w-16 h-16 rounded-full object-cover">
+      <img
+        :src="bout.Person1.Images[0]?.URL || missingPortrait"
+        alt="Person 1"
+        class="w-16 h-16 rounded-full object-cover"
+      />
       <div class="">
         <BaseText :text="bout.Person1.DisplayName" size="lg" weight="bold" />
         <BaseText :text="bout.Person1.Club.Name" size="sm" color="quaternary" />
@@ -15,8 +21,8 @@
     </div>
     <div v-if="bout.Status === 'Completed'" class="flex justify-center w-1/3">
       <div class="flex flex-col justify-center items-center">
-      <BaseText :text="`${bout.Score1}-${bout.Score2}`" size="2xl" weight="bold" color="primary" />
-      <BaseButton label="Edit Bout" color="primary" size="sm" class="mt-2" />
+        <BaseText :text="`${bout.Score1}-${bout.Score2}`" size="2xl" weight="bold" color="primary" />
+        <BaseButton label="Edit Bout" color="primary" size="sm" class="mt-2" />
       </div>
     </div>
 
@@ -25,7 +31,11 @@
         <BaseText :text="bout.Person2.DisplayName" size="lg" weight="bold" class="flex justify-end" />
         <BaseText :text="bout.Person2.Club.Name" size="sm" color="quaternary" class="flex justify-end" />
       </div>
-      <img :src="bout.Person2.Images[0]?.URL || missingPortrait" alt="Person 2" class="w-16 h-16 rounded-full object-cover">
+      <img
+        :src="bout.Person2.Images[0]?.URL || missingPortrait"
+        alt="Person 2"
+        class="w-16 h-16 rounded-full object-cover"
+      />
     </div>
     <div :class="`absolute right-0 top-0 bottom-0 w-2 rounded-r-lg bg-${hostingClubColors.Color2}`"></div>
   </section>
@@ -33,27 +43,26 @@
 
 <script>
 import missingPortrait from '../../../../assets/portrait1.png';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'PoolBoutMatchCard',
-  components: {BaseButton, BaseText},
+  components: { BaseButton, BaseText },
   props: {
     bout: {
       type: Object,
-      required: true,
+      required: true
     },
     hostingClubColors: {
       type: Array,
-      default: () => [],
+      default: () => []
     }
   },
   data() {
     return {
-      missingPortrait,
+      missingPortrait
     };
   }
 };
 </script>
-