@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,140 +1,160 @@
 <template>
-  <div class="flex items-center p-2 md:px-4 md:py-4 bg-eventBoxBlue md:bg-white border border-dropdownSelect rounded-lg md:shadow-md w-full mb-6 hover:border-bright" @click="onManage">
+  <div
+    class="flex items-center p-2 md:px-4 md:py-4 bg-eventBoxBlue md:bg-white border border-dropdownSelect rounded-lg md:shadow-md w-full mb-6 hover:border-bright"
+    @click="onManage"
+  >
     <div class="w-full flex flex-col md:flex-row justify-between">
       <section class="flex flex-row px-1 justify-start w-full">
         <div class="flex flex-col w-full">
           <div class="hidden md:flex mb-1">
             <div class="flex">
-              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2"/>
-              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left"/>
+              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
+              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
             </div>
             <div class="flex pl-4">
-              <BaseIcon icon-name="fa-clock" size="xs" color="quaternary" class="mx-2"/>
-              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left"/>
+              <BaseIcon icon-name="fa-clock" size="xs" color="quaternary" class="mx-2" />
+              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left" />
             </div>
             <div class="flex pl-4">
-              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mx-2"/>
-              <BaseText :text="getMaxFencers" size="xs" color="quinary" class="text-right"/>
+              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mx-2" />
+              <BaseText :text="getMaxFencers" size="xs" color="quinary" class="text-right" />
             </div>
           </div>
 
-          <BaseText :text="event.EventName" size="" color="quaternary" weight="bold" class="text-left text-md md:text-xl"/>
-          <BaseText :text="eventSummary" size="xs" color="quaternary" class="text-left"/>
+          <BaseText
+            :text="event.EventName"
+            size=""
+            color="quaternary"
+            weight="bold"
+            class="text-left text-md md:text-xl"
+          />
+          <BaseText :text="eventSummary" size="xs" color="quaternary" class="text-left" />
 
           <div class="flex flex-col md:hidden pt-2">
             <div class="flex">
-              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2"/>
-              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left"/>
-              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left ml-1"/>
-              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mr-2 ml-4"/>
-              <BaseText :text="getCombinedNumberOfFencers" size="xs" color="quinary" class="text-right"/>
+              <BaseIcon icon-name="fa-calendar" size="xs" color="quaternary" class="mr-2" />
+              <BaseText :text="event.Date" size="xs" color="quinary" class="text-left" />
+              <BaseText :text="formatStartTime(event.StartTime)" size="xs" color="quinary" class="text-left ml-1" />
+              <BaseIcon icon-name="fa-users" size="xs" color="quaternary" class="mr-2 ml-4" />
+              <BaseText :text="getCombinedNumberOfFencers" size="xs" color="quinary" class="text-right" />
             </div>
 
             <div class="flex flex-row mt-3 w-full">
               <div class="flex flex-col w-1/2 bg-white rounded mr-1.5 pb-2 border">
-                <BaseText text="Pools" size="xs" color="quinary" class="text-center py-1"/>
+                <BaseText text="Pools" size="xs" color="quinary" class="text-center py-1" />
                 <div class="flex w-full">
                   <div class="flex w-full justify-center">
-                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-right" />
                   </div>
                   <div class="flex w-full">
-                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
                   </div>
                 </div>
               </div>
               <div class="flex flex-col w-1/2 bg-white rounded ml-1.5 pb-2 border">
-                <BaseText text="Direct Elim." size="xs" color="quinary" class="text-center py-1"/>
+                <BaseText text="Direct Elim." size="xs" color="quinary" class="text-center py-1" />
                 <div class="flex w-full">
                   <div class="flex w-full justify-center">
-                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-sword" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-right" />
                   </div>
                   <div class="flex w-full">
-                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2"/>
-                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right"/>
+                    <BaseIcon icon-name="fa-clock-desk" size="xs" color="quaternary" class="mr-2" />
+                    <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-right" />
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
           <div class="hidden md:grid grid-cols-2 w-60 gap-1 mt-3">
             <div class="flex flex-col rounded-md bg-eventBoxBlue mt-0.5 p-0.5">
               <div>
-                <BaseText text="Pools" size="xs" color="quinary" class=""/>
+                <BaseText text="Pools" size="xs" color="quinary" class="" />
               </div>
               <div class="flex justify-around w-full px-2 mt-1">
                 <div class="flex">
-                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2"/>
-                  <BaseText :text="getPoolBoutTimeOrPasses" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2" />
+                  <BaseText :text="getPoolBoutTimeOrPasses" size="xs" color="quinary" class="text-left" />
                 </div>
                 <div class="flex">
-                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2"/>
-                  <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2" />
+                  <BaseText :text="getMaxPoolPoints" size="xs" color="quinary" class="text-left" />
                 </div>
               </div>
             </div>
 
             <div class="flex flex-col rounded-md bg-eventBoxBlue mt-0.5">
               <div>
-                <BaseText text="Bracket" size="xs" color="quinary" class=""/>
+                <BaseText text="Bracket" size="xs" color="quinary" class="" />
               </div>
               <div class="flex justify-around w-full p-1">
                 <div class="flex">
-                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2 mt-[1px]"/>
-                  <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-clock-desk" size="xs" color="quinary" class="mr-2 mt-[1px]" />
+                  <BaseText :text="getDEBoutTimeOrPasses" size="xs" color="quinary" class="text-left" />
                 </div>
                 <div class="flex">
-                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2 mt-[1px]"/>
-                  <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-left"/>
+                  <BaseIcon icon-name="fa-sword" size="xs" color="quinary" class="mr-2 mt-[1px]" />
+                  <BaseText :text="getMaxDEPoints" size="xs" color="quinary" class="text-left" />
                 </div>
               </div>
             </div>
           </div>
-
         </div>
       </section>
 
       <!-- right side -->
       <div class="flex flex-col">
         <div class="flex flex-row pb-2 mt-4 md:mt-2">
-          <BaseButton label="Manage" size="" type="primary" @buttonClick="onManage" :class="[event.Status !== 'completed' ? 'w-1/2' : 'w-full', 'text-xs md:text-md']"/>
-          <BaseButton v-if="event.Status !== 'completed'" label="Delete" size="" type="primary" @buttonClick="onDelete" class="w-1/2 text-xs md:text-md"/>
+          <BaseButton
+            label="Manage"
+            size=""
+            type="primary"
+            @buttonClick="onManage"
+            :class="[event.Status !== 'completed' ? 'w-1/2' : 'w-full', 'text-xs md:text-md']"
+          />
+          <BaseButton
+            v-if="event.Status !== 'completed'"
+            label="Delete"
+            size=""
+            type="primary"
+            @buttonClick="onDelete"
+            class="w-1/2 text-xs md:text-md"
+          />
         </div>
         <div class="hidden md:flex flex-row">
-          <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue"/>
-          <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen"/>
+          <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue" />
+          <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen" />
         </div>
       </div>
     </div>
   </div>
   <section>
     <BaseModal
-        headerText="Remove This Event?"
-        bodyText="Pressing Delete will permanently remove this event. This action cannot be undone."
-        buttonText="Delete This Event"
-        iconColor="alarm"
-        iconBackgroundColor="alarmHighlight"
-        iconName="fa-circle-xmark"
-        :show="showModal"
-        @update:show="close"
-        @submitModal="handleSubmit"
+      headerText="Remove This Event?"
+      bodyText="Pressing Delete will permanently remove this event. This action cannot be undone."
+      buttonText="Delete This Event"
+      iconColor="alarm"
+      iconBackgroundColor="alarmHighlight"
+      iconName="fa-circle-xmark"
+      :show="showModal"
+      @update:show="close"
+      @submitModal="handleSubmit"
     />
   </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import EventStatusBox from '../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
 
 export default {
   name: 'EventCard',
-  components: {BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText},
+  components: { BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText },
   emits: ['manage', 'edit', 'delete'],
   props: {
     event: {
@@ -145,7 +165,7 @@ export default {
   data() {
     return {
       showModal: false
-    }
+    };
   },
   computed: {
     eventSummary() {
@@ -157,7 +177,8 @@ export default {
 
       const poolSummary = poolRule ? 'Pools' : '';
       const deSummary = deType?.RuleValue === 'single' ? 'Single Elim' : 'Double Elim';
-      const thirdPlaceSummary = deThirdFenceOff && deThirdFenceOff.RuleValue === 'true' ? '3rd Place Fence off' : 'Tie for 3rd Place';
+      const thirdPlaceSummary =
+        deThirdFenceOff && deThirdFenceOff.RuleValue === 'true' ? '3rd Place Fence off' : 'Tie for 3rd Place';
 
       return [poolSummary, deSummary, thirdPlaceSummary].filter(Boolean).join(' -> ');
     },
@@ -165,7 +186,7 @@ export default {
       const maxRule = this.event.EventRules.find(rule => rule.Rules.RuleName === 'CutOffNumber');
       return maxRule.RuleValue === 0 ? 'Unlimited' : maxRule.RuleValue;
     },
-    getCombinedNumberOfFencers(){
+    getCombinedNumberOfFencers() {
       const combined = this.event.Present + this.event.Absent;
       return combined + ' / ' + this.getMaxFencers;
     },
@@ -196,19 +217,19 @@ export default {
       if (DETimeRule) return this.formatTime(DETimeRule.RuleValue);
       if (passesRule) return passesRule.RuleValue;
       return '';
-    },
+    }
   },
   methods: {
     onDelete(event) {
       event.stopPropagation();
-      this.showModal = true
+      this.showModal = true;
     },
     onManage(event) {
       event.stopPropagation();
       this.$emit('manage', this.event);
     },
     close() {
-      this.showModal = false
+      this.showModal = false;
     },
     handleSubmit() {
       this.$emit('delete', this.event);
@@ -225,7 +246,6 @@ export default {
 
       return `${adjustedHours}:${minutes.toString().padStart(2, '0')}${period}`;
     }
-
   }
-}
+};
 </script>

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

@@ -1,123 +1,123 @@
 import FencerCard from './FencerCard.vue';
 
 export default {
-    title: 'Organisms/Cards/FencerCard',
-    component: FencerCard,
-    tags: ['autodocs'],
-    args: {
-        person: {}
-    },
-    argTypes: {
-        person: {
-            control: 'object'
-        }
+  title: 'Organisms/Cards/FencerCard',
+  component: FencerCard,
+  tags: ['autodocs'],
+  args: {
+    person: {}
+  },
+  argTypes: {
+    person: {
+      control: 'object'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        person: {
-            "Id": 97,
-            "EventId": 5,
-            "PoolId": 137,
-            "PersonId": 1,
-            "Seed": 4,
-            "PoolPosition": 4,
-            "DEPosition": 1,
-            "Status": "Present",
-            "Person": {
-                "PersonId": 1,
-                "DisplayName": "Dwain Crackel",
-                "FirstName": "Dwain",
-                "LastName": "Crackel",
-                "Images": [
-                    {
-                        "ImageId": 7,
-                        "URL": "https://randomuser.me/api/portraits/men/22.jpg",
-                        "AltText": null,
-                        "Type": "Portrait",
-                        "EntityId": 1,
-                        "EntityType": "Person"
-                    }
-                ],
-                "Club": {
-                    "ClubId": 10,
-                    "Name": "Columbus United Fencing Club",
-                    "ShortName": "CUFC",
-                    "Description": null,
-                    "AddressId": 1,
-                    "Color1": "rose",
-                    "Color2": "navy"
-                },
-            },
-        },
-        isEdit: false
-    }
+  args: {
+    person: {
+      Id: 97,
+      EventId: 5,
+      PoolId: 137,
+      PersonId: 1,
+      Seed: 4,
+      PoolPosition: 4,
+      DEPosition: 1,
+      Status: 'Present',
+      Person: {
+        PersonId: 1,
+        DisplayName: 'Dwain Crackel',
+        FirstName: 'Dwain',
+        LastName: 'Crackel',
+        Images: [
+          {
+            ImageId: 7,
+            URL: 'https://randomuser.me/api/portraits/men/22.jpg',
+            AltText: null,
+            Type: 'Portrait',
+            EntityId: 1,
+            EntityType: 'Person'
+          }
+        ],
+        Club: {
+          ClubId: 10,
+          Name: 'Columbus United Fencing Club',
+          ShortName: 'CUFC',
+          Description: null,
+          AddressId: 1,
+          Color1: 'rose',
+          Color2: 'navy'
+        }
+      }
+    },
+    isEdit: false
+  }
 };
 
 export const CheckedIn = {
-    args: {
-        person: {
-            Seed: 12,
-            PoolPosition: 12,
-            Status: 'Present',
-            M2Rating: "B21",
-            HemaRating: 1600,
-            Person: {
-                PersonId: 2,
-                FirstName: 'Jane',
-                LastName: 'Smith',
-                Images: [
-                    {
-                        ImageId: 2,
-                        URL: 'https://randomuser.me/api/portraits/women/9.jpg',
-                        AltText: null,
-                        Type: 'Portrait',
-                        EntityId: 2,
-                        EntityType: 'Person'
-                    }
-                ],
-                "Club": {
-                    "ClubId": 1,
-                    "Name": "Test Club",
-                    "Description": "This is a test",
-                    "AddressId": 1,
-                    "SocialMediaId": null
-                },
-            }
+  args: {
+    person: {
+      Seed: 12,
+      PoolPosition: 12,
+      Status: 'Present',
+      M2Rating: 'B21',
+      HemaRating: 1600,
+      Person: {
+        PersonId: 2,
+        FirstName: 'Jane',
+        LastName: 'Smith',
+        Images: [
+          {
+            ImageId: 2,
+            URL: 'https://randomuser.me/api/portraits/women/9.jpg',
+            AltText: null,
+            Type: 'Portrait',
+            EntityId: 2,
+            EntityType: 'Person'
+          }
+        ],
+        Club: {
+          ClubId: 1,
+          Name: 'Test Club',
+          Description: 'This is a test',
+          AddressId: 1,
+          SocialMediaId: null
         }
+      }
     }
+  }
 };
 
 export const Absent = {
-    args: {
-        person: {
-            Seed: 3,
-            Status: 'Absent',
-            M2Rating: "C23",
-            HemaRating: 1400,
-            Person: {
-                PersonId: 3,
-                FirstName: 'Alice',
-                LastName: 'Johnson',
-                Images: [
-                    {
-                        ImageId: 3,
-                        URL: 'https://randomuser.me/api/portraits/women/19.jpg',
-                        AltText: null,
-                        Type: 'Portrait',
-                        EntityId: 3,
-                        EntityType: 'Person'
-                    }
-                ],
-                "Club": {
-                    "ClubId": 1,
-                    "Name": "Test Club",
-                    "Description": "This is a test",
-                    "AddressId": 1,
-                    "SocialMediaId": null
-                },
-            }
+  args: {
+    person: {
+      Seed: 3,
+      Status: 'Absent',
+      M2Rating: 'C23',
+      HemaRating: 1400,
+      Person: {
+        PersonId: 3,
+        FirstName: 'Alice',
+        LastName: 'Johnson',
+        Images: [
+          {
+            ImageId: 3,
+            URL: 'https://randomuser.me/api/portraits/women/19.jpg',
+            AltText: null,
+            Type: 'Portrait',
+            EntityId: 3,
+            EntityType: 'Person'
+          }
+        ],
+        Club: {
+          ClubId: 1,
+          Name: 'Test Club',
+          Description: 'This is a test',
+          AddressId: 1,
+          SocialMediaId: null
         }
+      }
     }
+  }
 };