@dcrackel/hematournamentui 1.0.60 → 1.0.62

package/src/stories/Molecules/Boxes/EventStatusBox/EventStatusBox.stories.js

@@ -0,0 +1,40 @@
+import EventStatusBox from './EventStatusBox.vue';
+
+export default {
+    title: 'Molecules/Boxes/EventStatusBox',
+    component: EventStatusBox,
+    tags: ['autodocs'],
+    args: {
+        statusCount: 10,
+        statusLabel: 'PRESENT',
+        boxColor: 'bg-eventBoxBlue',
+    },
+    argTypes: {}
+};
+
+
+
+export const Default = {
+    args: {
+        statusCount: 10,
+        statusLabel: 'PRESENT',
+        boxColor: 'bg-eventBoxBlue',
+    }
+};
+
+export const Absent = {
+    args: {
+        statusCount: 5,
+        statusLabel: 'ABSENT',
+        boxColor: 'bg-eventBoxGreen',
+    }
+};
+
+
+export const Removed = {
+    args: {
+        statusCount: 3,
+        statusLabel: 'REMOVED',
+        boxColor: 'bg-eventBoxRed',
+    }
+};

package/src/stories/Molecules/Boxes/EventStatusBox/EventStatusBox.vue

@@ -0,0 +1,35 @@
+<template>
+  <section :class="['w-20 h-14 rounded-xl m-1', boxColor]">
+    <div class="flex flex-col justify-between h-14 py-2 pl-1">
+      <p class="flex flex-row justify-center w-full pb-1">
+        <BaseText :text="statusCount" size="sm" color="quinary" weight="bold" />
+      </p>
+      <p class="flex flex-row justify-center w-full">
+        <BaseText :text="statusLabel" size="xs" color="quinary" />
+      </p>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'EventStatusBox',
+  components: {BaseText},
+  props: {
+    statusCount: {
+      type: Number,
+      required: true,
+    },
+    statusLabel: {
+      type: String,
+      required: true,
+    },
+    boxColor: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.stories.js

@@ -6,8 +6,8 @@ export default {
     tags: ['autodocs'],
     args: {
         buttons: [
-            { id: 'btn1', label: 'Option 1' },
-            { id: 'btn2', label: 'Option 2' }
+            { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+            { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
         ]
     },
     argTypes: {
@@ -24,19 +24,19 @@ export default {
 export const Primary = {
     args: {
         buttons: [
-            { id: 'btn1', label: 'Absent' },
-            { id: 'btn2', label: 'Present' }
-        ]
+            { id: 'btn1', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+            { id: 'btn2', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreen' }
+        ],
+        selected: 'btn1'  // Set default selected button
     }
 };
 
 export const ThreeButtons = {
     args: {
         buttons: [
-            { id: 'btn1', label: 'Option 1' },
-            { id: 'btn2', label: 'Option 2' },
-            { id: 'btn3', label: 'Option 3' }
+            { id: 'btn1', label: 'Option 1', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+            { id: 'btn2', label: 'Option 2', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' },
+            { id: 'btn3', label: 'Option 3', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-tertiary' }
         ]
     }
 };
-

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="flex">
     <section v-for="(button, index) in buttons" :key="button.id" class="flex flex-row text-sm" @click="selectButton(button.id)">
-      <div class="py-3 px-4 transition-colors duration-200 border border-1"
+      <div class="py-3 px-4 transition-colors duration-200 border border-1 border-dropdownSelect shadow-md"
            :class="{
        'rounded-l-xl': parseInt(index) === 0,
        'rounded-r-xl': parseInt(index) === Object.keys(this.buttons).length - 1,
-       'bg-tertiary text-primaryHighlight': selected === button.id,
-       'bg-natural text-quaternary': selected !== button.id
+       [button.selectedBgColor]: selected === button.id,
+       [button.defaultBgColor]: selected !== button.id,
+       'text-primaryHighlight': selected === button.id,
+       'text-quaternary': selected !== button.id
      }">
         {{ button.label }}
       </div>
@@ -34,7 +36,6 @@ export default {
   setup(props, { emit }) {
     const selected = ref(props.selected);
 
-    // Watch for external changes to the `selected` prop
     watch(() => props.selected, (newValue) => {
       selected.value = newValue;
     });

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

@@ -17,24 +17,9 @@
           <BaseButton label="Manage" size="sm" type="primary" @click="onManage" class="w-2/3" />
          </div>
          <div class="flex flex-row">
-            <section class="w-20 h-16 bg-eventBoxBlue rounded-xl m-1">
-              <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Present" size="lg" color="quinary" weight="bold" /></p>
-                <p class="flex flex-row justify-center w-full"><BaseText text="PRESENT" size="xs" color="quinary" /></p>
-              </div>
-            </section>
-            <section class="w-20 h-16 bg-eventBoxGreen rounded-xl m-1">
-              <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Absent" size="lg" color="quinary" weight="bold" /></p>
-                <p class="flex flex-row justify-center w-full"><BaseText text="ABSENT" size="xs" color="quinary" /></p>
-              </div>
-            </section>
-            <section class="w-20 h-16 bg-eventBoxRed rounded-xl m-1">
-              <div class="flex flex-col justify-between h-14 py-2 pl-1">
-                <p class="flex flex-row justify-center w-full pb-1"><BaseText :text="event.Removed" size="lg" color="quinary" weight="bold" /></p>
-                <p class="flex flex-row justify-center w-full"><BaseText text="REMOVED" size="xs" color="quinary" /></p>
-              </div>
-            </section>
+           <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.Removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
           </div>
       </div>
     </div>
@@ -45,10 +30,11 @@
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
 
 export default {
   name: 'EventCard',
-  components: {BaseButton, BaseText},
+  components: {EventStatusBox, BaseButton, BaseText},
   props: {
     event: {
       type: Object,

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

@@ -0,0 +1,171 @@
+import FencerCard from './FencerCard.vue';
+
+export default {
+    title: 'Organisms/Cards/FencerCard',
+    component: FencerCard,
+    tags: ['autodocs'],
+    args: {
+        person: {
+            "Id": 73,
+            "EventId": 1,
+            "PersonId": 1,
+            "Seed": 1,
+            "Status": "Absent",
+            "Person": {
+                "PersonId": 1,
+                "FirstName": "Dave",
+                "LastName": "Jones",
+                "Images": [
+                    {
+                        "ImageId": 7,
+                        "URL": "https://randomuser.me/api/portraits/men/22.jpg",
+                        "AltText": null,
+                        "Type": "Portrait",
+                        "EntityId": 1,
+                        "EntityType": "Person"
+                    }
+                ],
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Test Club",
+                    "Description": "This is a test",
+                    "AddressId": 1,
+                    "SocialMediaId": null
+                },
+                "HEMARatings": [
+                    {
+                        "Id": 1,
+                        "PersonId": 1,
+                        "Rank": 1700,
+                        "Rating": 1200.2,
+                        "WeaponId": 1,
+                        "Updated": "2024-05-30T17:39:47.000Z"
+                    }
+                ],
+                "M2Ratings": [
+                    {
+                        "id": 1,
+                        "PersonId": 1,
+                        "EventId": 1,
+                        "WeaponId": 1,
+                        "Rating": "E24",
+                        "DateEarned": "2024-05-30"
+                    }
+                ]
+            }
+        }
+    },
+    argTypes: {
+        person: {
+            control: 'object'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        person: {
+            "Id": 73,
+            "EventId": 1,
+            "PersonId": 1,
+            "Seed": 1,
+            "Status": "Absent",
+            "Person": {
+                "PersonId": 1,
+                "FirstName": "Dave",
+                "LastName": "Jones",
+                "Images": [
+                    {
+                        "ImageId": 7,
+                        "URL": "https://randomuser.me/api/portraits/men/22.jpg",
+                        "AltText": null,
+                        "Type": "Portrait",
+                        "EntityId": 1,
+                        "EntityType": "Person"
+                    }
+                ],
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Test Club",
+                    "Description": "This is a test",
+                    "AddressId": 1,
+                    "SocialMediaId": null
+                },
+                "HEMARatings": [
+                    {
+                        "Id": 1,
+                        "PersonId": 1,
+                        "Rank": 1700,
+                        "Rating": 1200.2,
+                        "WeaponId": 1,
+                        "Updated": "2024-05-30T17:39:47.000Z"
+                    }
+                ],
+                "M2Ratings": [
+                    {
+                        "id": 1,
+                        "PersonId": 1,
+                        "EventId": 1,
+                        "WeaponId": 1,
+                        "Rating": "E24",
+                        "DateEarned": "2024-05-30"
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const CheckedIn = {
+    args: {
+        person: {
+            Seed: 2,
+            Status: 'Present',
+            M2Rating: "B21",
+            HemaRating: 1600,
+            Person: {
+                PersonId: 2,
+                FirstName: 'Jane',
+                LastName: 'Smith',
+                ClubName: 'Fencing Club',
+                Images: [
+                    {
+                        ImageId: 2,
+                        URL: 'https://randomuser.me/api/portraits/women/9.jpg',
+                        AltText: null,
+                        Type: 'Portrait',
+                        EntityId: 2,
+                        EntityType: 'Person'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const Absent = {
+    args: {
+        person: {
+            Seed: 3,
+            Status: 'Absent',
+            M2Rating: "C23",
+            HemaRating: 1400,
+            Person: {
+                PersonId: 3,
+                FirstName: 'Alice',
+                LastName: 'Johnson',
+                ClubName: 'Martial Arts Club',
+                Images: [
+                    {
+                        ImageId: 3,
+                        URL: 'https://randomuser.me/api/portraits/women/19.jpg',
+                        AltText: null,
+                        Type: 'Portrait',
+                        EntityId: 3,
+                        EntityType: 'Person'
+                    }
+                ]
+            }
+        }
+    }
+};

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white hover:border-bright">
+    <div class="mr-4 border-r h-20 w-8 items-center text-center">
+      <BaseText :text="person.Seed" size="lg" color="quaternary" weight="bold" class="pt-6" />
+    </div>
+    <div class="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="white" 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-4/12 justify-star">
+      <span class="w-full flex justify-start">
+        <BaseText :text="fullName" size="xl" color="primary" weight="bold"/>
+      </span>
+      <span class="w-full flex justify-start">
+        <BaseText :text="person.Person.Club.Name" size="sm" color="primary" weight="normal"/>
+      </span>
+    </div>
+    <div class="grid grid-cols-2 gap-x-4 mr-10">
+      <BaseText text="M2Rating" size="sm" color="primary" weight="normal" />
+      <BaseText :text="M2Rating" size="sm" color="primary" weight="bold"/>
+      <BaseText text="HemaRating" size="sm" color="primary" weight="normal" />
+      <BaseText :text="HEMARating" size="sm" color="primary" weight="bold"/>
+    </div>
+    <div class="mr-4 ml-auto">
+      <ButtonBar
+          :buttons="buttons"
+          :selected="computedSelected"
+          @update:selected="handleAttendance"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
+
+export default {
+  name: 'FencerCard',
+  components: { ButtonBar, BaseText },
+  props: {
+    person: {
+      type: Object,
+      required: true,
+      default: () => ({
+        "Id": 73,
+        "EventId": 1,
+        "PersonId": 1,
+        "Seed": 1,
+        "Status": "Absent",
+        "Person": {
+          "PersonId": 1,
+          "FirstName": "Dave",
+          "LastName": "Jones",
+          "Images": [
+            {
+              "ImageId": 7,
+              "URL": "https://randomuser.me/api/portraits/men/22.jpg",
+              "AltText": null,
+              "Type": "Portrait",
+              "EntityId": 1,
+              "EntityType": "Person"
+            }
+          ],
+          "HEMARatings": [
+            {
+              "Id": 1,
+              "PersonId": 1,
+              "Rank": 1700,
+              "Rating": 1200.2,
+              "WeaponId": 1,
+              "Updated": "2024-05-30T17:39:47.000Z"
+            }
+          ],
+          "M2Ratings": [
+            {
+              "id": 1,
+              "PersonId": 1,
+              "EventId": 1,
+              "WeaponId": 1,
+              "Rating": "E",
+              "DateEarned": "2024-05-30"
+            }
+          ]
+        }
+      })
+    },
+  },
+  computed: {
+    fullName() {
+      return `${this.person.Person.FirstName} ${this.person.Person.LastName}`;
+    },
+    portraitURL() {
+      const images = this.person.Person.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+    buttons() {
+      return [
+        { id: 'Absent', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+        { id: 'Present', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreen' }
+      ];
+    },
+    HEMARating() {
+      if (!this.person.Person.HEMARatings || this.person.Person.HEMARatings.length === 0) {
+        return 0;
+      }
+      return this.person.Person.HEMARatings[0].Rating
+    },
+    M2Rating() {
+      if (!this.person.Person.M2Ratings || this.person.Person.M2Ratings.length === 0) {
+        return "U"
+      }
+      return this.person.Person.M2Ratings[0].Rating
+    },
+    computedSelected() {
+      return this.person.Status === 'Absent' ? 'Absent' : 'Present';
+    }
+  },
+  methods: {
+    handleAttendance(selected) {
+      const person = { ...this.person, Status: selected };
+      this.$emit('update:status', person);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -6,11 +6,13 @@
         <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
         <i class="fa-solid fa-chevron-down text-xs" />
       </div>
-      <div v-if="isDropDownOpen" class="flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral">
-        <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border border-dropdownSelect last:border-0">
-          <BaseText :text="item.text" color="primary" size="xs" weight="normal" />
-        </a>
-      </div>
+      <transition name="fade-in-down">
+        <div v-if="isDropDownOpen" class="flex flex-col w-40 shadow-lg -mt-1 z-10 rounded-b-xl absolute bg-neutral border border-dropdownSelect">
+          <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
+            <BaseText :text="item.text" color="primary" size="sm" weight="normal" class="py-0.5" />
+          </a>
+        </div>
+      </transition>
     </span>
   </div>
 </template>
@@ -20,7 +22,7 @@ import BaseText from "../../../Atoms/Text/BaseText.vue";
 
 export default {
   name: 'DropDownMenu',
-  components: {BaseText},
+  components: { BaseText },
   props: {
     label: {
       type: String,
@@ -49,3 +51,13 @@ export default {
   }
 }
 </script>
+
+<style>
+.fade-in-down-enter-active, .fade-in-down-leave-active {
+  transition: all 0.3s ease-out;
+}
+.fade-in-down-enter, .fade-in-down-leave-to /* .fade-in-down-leave-active in <2.1.8 */ {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/src/stories/Organisms/Containers/PoolSummary/PoolSummary.stories.js

@@ -0,0 +1,28 @@
+import PoolSummary from './PoolSummary.vue';
+
+export default {
+    title: 'Organisms/Containers/PoolSummary',
+    component: PoolSummary,
+    tags: ['autodocs'],
+    args: {},
+    argTypes: {}
+};
+
+export const Default = {
+    args: {
+        event: {
+            EventId: 1,
+            TournamentId: 8,
+            EventName: "Longsword Event For Everyone",
+            Date: "2024-05-03",
+            StartTime: "12:00:16",
+            NumberOfRings: 3,
+            WeaponId: 1,
+            Status: "Active",
+            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
+            Present: "0",
+            Absent: "20",
+            Removed: "1",
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="bg-poolSetup py-1 px-4 rounded-xl flex justify-between items-center">
+    <section class="flex flex-col pt-2">
+      <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" />
+      <BaseText :text="event.RuleSummary" size="md" color="quinary" weight="normal" />
+      <span class="h-8"></span>
+    </section>
+    <section class="flex space-x-4">
+      <CounterBox :recommended="7" :count="event.PoolSize" label="Pool Size" />
+      <CounterBox :recommended="event.NumberOfPools" :count="event.NumberOfPools" label="Num Pools" />
+      <CounterBox :recommended="0" :count="event.numberOfFlights" label="Flights" />
+    </section>
+    <section class="flex flex-col">
+      <div class="flex justify-center items-center">
+        <BaseText text="Fencer Counts" size="sm" color="quinary" weight="" />
+      </div>
+      <div class="flex">
+        <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
+        <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
+        <EventStatusBox :status-count="event.Removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
+      </div>
+    </section>
+
+  </div>
+</template>
+
+<script>
+import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
+import CounterBox from "../../../Molecules/Boxes/CounterBox/CounterBox.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'PoolSummary',
+  components: {BaseText, CounterBox, EventStatusBox },
+  props: {
+    event: {
+      type: Object,
+      required: true,
+      validator(event) {
+        const requiredFields = [
+          'EventName',
+          'RuleSummary',
+          'PoolSize',
+          'NumberOfPools',
+          'NumberOfFlights',
+          'Absent',
+          'Present',
+          'Removed',
+        ];
+        return requiredFields.every(field => field in event);
+      },
+    },
+  },
+};
+</script>

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.stories.js

@@ -0,0 +1,29 @@
+import EditEvents from './EventAttendance.vue';
+import personsMock from '../../../../mocks/personsMock.js';
+import eventMock from '../../../../mocks/eventMock.js';
+
+export default {
+    title: 'Templates/EventManagement/EventAttendance/EventAttendance',
+    component: EditEvents,
+    tags: ['autodocs'],
+    args: {
+        persons: personsMock,
+    },
+    argTypes: {}
+};
+
+export const Default = {
+    args: {
+        eventId: 8,
+        persons: personsMock,
+        event: eventMock[0]
+    }
+};
+
+
+export const NoEvents = {
+    args: {
+        eventId: 8,
+        persons: []
+    }
+};