@dcrackel/meyersquaredui 1.0.104 → 1.0.106

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.104",
+  "version": "1.0.106",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/index.js

@@ -16,6 +16,7 @@ export { default as ScrollNav } from './stories/Organisms/Headers/ScrollNav/Scro
 export { default as TournamentDetailsBanner } from './stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue'
 export { default as TournamentBanner } from './stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue'
 export { default as ContactUsForm } from './stories/Organisms/Forms/ContactUsForm/ContactUsForm.vue'
+export { default as GridTabs } from './stories/Organisms/GridTabs/GridTabs.vue'
 
 
 export { default as ArticleCard } from './stories/Organisms/Cards/ArticleCard/ArticleCard.vue'

package/src/mocks/getPoolsWithPeople.js

@@ -0,0 +1,248 @@
+const getPoolsWithPeople =
+    {
+        "message": "Pools retrieved",
+        "pools": [
+            {
+                "PoolId": 180,
+                "Name": "Pool 1",
+                "RingName": "Ring 1",
+                "Flight": 1,
+                "PoolType": "pool",
+                "EventId": 26,
+                "Status": "planning",
+                "Updated": "2024-10-16T13:38:51.000Z",
+                "EventPersons": [
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 4,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 79,
+                            "DisplayName": "Tom Testerlou",
+                            "ClubId": 10,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Columbus United Fencing Club"
+                            },
+                            "HEMARatings": [],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 5,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 101,
+                            "DisplayName": "Team Bestest",
+                            "ClubId": 10,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Columbus United Fencing Club"
+                            },
+                            "HEMARatings": [],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 1,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 49,
+                            "DisplayName": "Jack Seyler",
+                            "ClubId": 43,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Ars Gladii"
+                            },
+                            "HEMARatings": [
+                                {
+                                    "Rating": 1282.1
+                                }
+                            ],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 8,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 18,
+                            "DisplayName": "Sean Hanson",
+                            "ClubId": 3,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Sword & Blade of Callie"
+                            },
+                            "HEMARatings": [],
+                            "M2Ratings": []
+                        }
+                    }
+                ]
+            },
+            {
+                "PoolId": 181,
+                "Name": "Pool 2",
+                "RingName": "Ring 2",
+                "Flight": 1,
+                "PoolType": "pool",
+                "EventId": 26,
+                "Status": "planning",
+                "Updated": "2024-10-16T13:38:51.000Z",
+                "EventPersons": [
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 6,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 9,
+                            "DisplayName": "Sean McCoy",
+                            "ClubId": 7,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Hilt & Heart"
+                            },
+                            "HEMARatings": [],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 3,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 89,
+                            "DisplayName": "Jesse May",
+                            "ClubId": 18,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Hilt and Helm Pittsburgh Fencing Club"
+                            },
+                            "HEMARatings": [
+                                {
+                                    "Rating": 1001.1
+                                }
+                            ],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 7,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 111,
+                            "DisplayName": "Aaron Senteney",
+                            "ClubId": 38,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Steelhead Western Martial Arts"
+                            },
+                            "HEMARatings": [],
+                            "M2Ratings": []
+                        }
+                    },
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 2,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 37,
+                            "DisplayName": "Brian Thiessen",
+                            "ClubId": 38,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Steelhead Western Martial Arts"
+                            },
+                            "HEMARatings": [
+                                {
+                                    "Rating": 1114.2
+                                }
+                            ],
+                            "M2Ratings": []
+                        }
+                    }
+                ]
+            }
+        ],
+        "eventRules": [
+            {
+                "RuleId": 1,
+                "RuleName": "PoolTime",
+                "RuleValue": "120",
+                "Context": "pool"
+            },
+            {
+                "RuleId": 2,
+                "RuleName": "PoolMaxPoints",
+                "RuleValue": "7",
+                "Context": "pool"
+            },
+            {
+                "RuleId": 3,
+                "RuleName": "DETime",
+                "RuleValue": "120",
+                "Context": "de"
+            },
+            {
+                "RuleId": 4,
+                "RuleName": "DEMaxPoints",
+                "RuleValue": "7",
+                "Context": "de"
+            },
+            {
+                "RuleId": 5,
+                "RuleName": "DE3rdFenceOff",
+                "RuleValue": "false",
+                "Context": "de"
+            },
+            {
+                "RuleId": 9,
+                "RuleName": "DEPromotionOrder",
+                "RuleValue": "Win Percent,Win Count,Indicator,Points Scored",
+                "Context": "de"
+            },
+            {
+                "RuleId": 10,
+                "RuleName": "DENumOfPromotion",
+                "RuleValue": "100%",
+                "Context": "de"
+            },
+            {
+                "RuleId": 11,
+                "RuleName": "PoolSeeding",
+                "RuleValue": "HR - Hema Rating",
+                "Context": "pool"
+            },
+            {
+                "RuleId": 14,
+                "RuleName": "CutOffNumber",
+                "RuleValue": "64",
+                "Context": "event"
+            }
+        ],
+        "hostingClubColors": {
+            "Color1": "navy",
+            "Color2": "rose"
+        }
+    };
+
+export default getPoolsWithPeople;

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -8,8 +8,8 @@
         @mouseout="handleMouseOut"
         @click="handlePhaseClick(index)"
         :class="{
-          'cursor-pointer': index <= currentPhase,
-          'cursor-not-allowed': index > currentPhase,
+          'cursor-pointer': index < currentPhase,
+          'cursor-default': index >= currentPhase,
         }"
     >
       <!-- Clickable Icon and Label -->
@@ -86,7 +86,7 @@ export default {
   },
   data() {
     return {
-      hoveredPhase: null, // Variable to store which phase is hovered over
+      hoveredPhase: null,
     };
   },
   methods: {
@@ -100,7 +100,6 @@ export default {
       this.hoveredPhase = null;
     },
     handlePhaseClick(index) {
-      // Emit the clicked phase to the parent only if the phase is active or previous
       if (index <= this.currentPhase) {
         this.$emit('phase-clicked', index);
       }

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

@@ -2,7 +2,7 @@
   <section v-if="!isLoading" class="flex items-center p-4 hover:cursor-pointer border-b" @click="handleCardClicked">
     <img :src="portrait" alt="Fencer Portrait" class="w-[50px] h-[50px] md:w-[70px] md:h-[70px] rounded-full object-cover z-1 flex-shrink-0 mr-4" />
     <div class="rounded-full bg-accent h-5 w-5 absolute flex justify-center ml-9 mt-9 md:ml-12 md:mt-12">
-        <BaseText tag="p" size="sm" weight="bold" class="text-white">{{ index + 1 }}</BaseText>
+        <BaseText tag="p" size="sm" weight="bold" class="text-white">{{ Position }}</BaseText>
     </div>
     <div class="flex flex-col justify-center flex-grow">
       <section class="hidden md:flex flex-col">
@@ -100,6 +100,9 @@ export default {
     },
     HEMARating() {
       return this.data.HEMARatings[0] ? this.data.HEMARatings[0].Rating : '0';
+    },
+    Position() {
+      return this.data.PoolPosition ? this.data.PoolPosition : this.index + 1;
     }
   },
   methods: {

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <section :class="topBoxClass">
-    <section>
+    <section class="w-full">
     <div :class="topClasses" class="flex flex-col">
-      <div :class="headerClasses">
+      <div v-if="title" :class="headerClasses">
         <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ title }}</BaseText>
       </div>
       <div :class="gridClasses">
@@ -45,8 +45,7 @@ export default {
   },
   props: {
     title: {
-      type: String,
-      default: 'Section Title',
+      type: String
     },
     moreButtonLabel: {
       type: String,
@@ -90,8 +89,9 @@ export default {
         return "w-screen overflow-x-auto";
       }
 
-      // For larger screens, limit the width to 1200px
-      return "max-w-[1200px] w-full flex justify-center mx-auto mt-8";
+      let retClasses = "max-w-[1200px] w-full flex justify-center mx-auto"
+      this.title ? retClasses = `${retClasses} mt-8` : retClasses = `${retClasses}`;
+      return retClasses;
     },
     headerClasses() {
       let retClasses = "w-full flex py-4 md:pb-10 ml-2 md:ml-0 mb-4";

package/src/stories/Organisms/GridTabs/GridTabs.stories.js

@@ -0,0 +1,24 @@
+import TabGrid from './GridTabs.vue';
+import mockGetPoolsWithPeople from '../../../mocks/getPoolsWithPeople.js';
+
+export default {
+    title: 'Organisms/GridTabs/GridTabs',
+    component: TabGrid,
+    argTypes: {
+        pools: { control: 'array' }
+    }
+};
+
+// Template for the story
+const Template = (args) => ({
+    components: { TabGrid },
+    setup() {
+        return { args };
+    },
+    template: '<TabGrid v-bind="args" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    pools: mockGetPoolsWithPeople.pools
+};

package/src/stories/Organisms/GridTabs/GridTabs.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="w-full rounded-lg">
+    <!-- Grid Title -->
+    <div class="max-w-[1200px] w-full flex pt-6 ml-4 mb-6">
+      <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ `Fencers in ${pools[selectedTab].Name}` }}</BaseText>
+    </div>
+
+    <!-- Tabs for Pools -->
+    <div class="max-w-[1200px] w-full flex mx-auto pt-4 pb-4 pl-4 bg-white rounded-tr-lg rounded-tl-lg">
+      <span v-for="(pool, index) in pools" :key="pool.PoolId">
+        <BaseText
+            color="primary"
+            size="md"
+            tag="p"
+            weight=""
+            title=""
+            class="mr-10 border-b-2 hover:border-accent pb-2 duration-300 ease-in-out"
+            :class="selectedTab === index ? 'border-accent' : 'border-white'"
+            @click="selectTab(index)"
+        >
+          {{ pool.Name }}
+        </BaseText>
+      </span>
+    </div>
+
+    <!-- Grid Layout -->
+    <GridLayout
+        :cardComponent="FencerListCard"
+        :items="mappedPersons"
+        :maxColumns="1"
+        :isLoading="false"
+        :whiteStyle="true"
+        class="-mt-1"
+    />
+  </div>
+</template>
+
+<script>
+import GridLayout from "../GridLayout/GridLayout.vue";
+import FencerListCard from "../Cards/FencerListCard/FencerListCard.vue";
+import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'GridTabs',
+  components: {
+    BaseText,
+    BaseButton,
+    GridLayout,
+    FencerListCard
+  },
+  props: {
+    pools: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    FencerListCard() {
+      return FencerListCard
+    },
+    mappedPersons() {
+      return this.pools.length > 0 ? this.mapEventPersonsToPersons(this.pools[this.selectedTab].EventPersons) : [];
+    }
+  },
+  data() {
+    return {
+      selectedTab: 0
+    };
+  },
+  methods: {
+    selectTab(index) {
+      this.selectedTab = index;
+    },
+    mapEventPersonsToPersons(eventPersons) {
+      const mappedPersons = eventPersons.map(eventPerson => ({
+        ...eventPerson.Person,
+        PoolPosition: eventPerson.PoolPosition,
+        Status: eventPerson.Status,
+        DEPosition: eventPerson.DEPosition
+      }));
+
+      return mappedPersons.sort((a, b) => a.PoolPosition - b.PoolPosition);
+    }
+  }
+};
+</script>