@dcrackel/meyersquaredui 1.0.68 → 1.0.70

package/src/mocks/getTournamentById.js

@@ -0,0 +1,64 @@
+const mockGetTournamentId =
+    {
+        "TournamentId": 37,
+        "Name": "Pumpkin Slice",
+        "StartDate": "2024-10-27",
+        "EndDate": "2024-10-28",
+        "RegistrationCutOff": "2024-10-27",
+        "Description": "<p>We are gathering at the Coombs Fairgrounds &amp; Event Centre on October 27th, 2023 for an Open Steel Messer tournament. This will be the second iteration, official, but spiritually, the third, as it was inspired by the Spooky Scary Messer tournament held by THCC in Vancouver.</p>",
+        "HostedOnM2": true,
+        "TotalParticipants": 0,
+        "Events": [],
+        "Club": {
+            "Name": "Comox Valley Combat Guild",
+            "ClubId": 356,
+            "Images": [
+                {
+                    "ImageId": 46,
+                    "URL": "https://meyersquared.com/uploads/CVCG+Logo+2024.png",
+                    "AltText": "This is alt text"
+                }
+            ]
+        },
+        "Address": {
+            "Name": "Coombs Fairgrounds & Event Center",
+            "City": "Coombs",
+            "State": "BC",
+            "Address1": "1014 Ford Rd",
+            "Zip": 12345,
+            "Coordinates": "49.303763,-124.419878"
+        },
+        "Images": [
+            {
+                "ImageId": 45,
+                "URL": "https://meyersquared.com/uploads/t-23ee43e9.png",
+                "AltText": "Pumpkin Slice image"
+            }
+        ],
+        "PrimaryContact": {
+            "PersonId": 0,
+            "DisplayName": "Not Assigned",
+            "Images": []
+        },
+        "SocialMedia": [
+            {
+                "Link": "https://www.facebook.com/events/654044546924140/",
+                "Type": "Facebook",
+                "Label": "Registration Link"
+            },
+            {
+                "Link": "https://www.facebook.com/events/654044546924140/",
+                "Type": "Registration",
+                "Label": "Registration Link"
+            },
+            {
+                "Link": "https://www.facebook.com/events/654044546924140/",
+                "Type": "Rules",
+                "Label": "Rules Link"
+            }
+        ],
+        "TotalEvents": 0,
+        "Status": "completed"
+    };
+
+export default mockGetTournamentId;

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

@@ -5,7 +5,7 @@
     </div>
 
     <div class="flex justify-end items-center w-full md:h-10 rounded-md p-2">
-      <BaseText color="primary" size="md" weight="normal" class="mr-2">Share</BaseText>
+      <BaseText v-if="shareLinks && shareLinks.length > 0" color="primary" size="md" weight="normal" class="mr-2 mt-0.5">Share</BaseText>
       <a
           v-for="link in shareLinks"
           :key="link.name"
@@ -13,7 +13,7 @@
           target="_blank"
           class="mx-2 hover:text-accent transition duration-200"
       >
-        <Icon type="fa-brands" color="primary" :icon="link.icon" size="md" />
+        <Icon type="fa-brands" color="primary" :icon="link.icon" size="md" class="hover:text-accent" />
       </a>
     </div>
 
@@ -45,14 +45,17 @@ export default {
       type: String,
       default: '<p>This is a sample tournament description. It can be long and may contain HTML.</p>',
     },
-  },
-  data() {
-    return {
-      shareLinks: [
+    shareLinks: {
+      type: Array,
+      default: () => [
         { name: 'Facebook', url: 'https://facebook.com', icon: 'fa-facebook' },
         { name: 'Instagram', url: 'https://twitter.com', icon: 'fa-instagram' },
         { name: 'Discord', url: 'https://linkedin.com', icon: 'fa-discord' },
       ],
+    },
+  },
+  data() {
+    return {
     };
   },
 };

package/src/stories/Organisms/Column/HostColumn.vue

@@ -28,6 +28,7 @@
 
       <div class="flex justify-center">
       <BaseButton
+          v-if="rulesLink"
           backgroundColor="secondary"
           color="primary"
           border="primary"
@@ -85,6 +86,10 @@ export default {
       type: Number,
       default: 0,
     },
+    rulesLink: {
+      type: String,
+      default: '',
+    },
     apiKey: {
       type: String,
       default: '',

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

@@ -1,31 +1,35 @@
 <template>
-  <section :class="topClasses">
-    <div :class="headerClasses">
-      <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ title }}</BaseText>
+  <section class="w-full flex justify-center mx-auto">
+    <section>
+    <div :class="topClasses" class="flex flex-col">
+      <div :class="headerClasses">
+        <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ title }}</BaseText>
+      </div>
+      <div :class="gridClasses">
+        <component
+            v-for="(item, index) in items"
+            :is="cardComponent"
+            :key="index"
+            :data="item"
+            :index="index"
+            :isLoading="isLoading"
+            @grid-card-click="handleTournamentCardClick"
+        />
+      </div>
     </div>
-    <div :class="gridClasses">
-      <component
-          v-for="(item, index) in items"
-          :is="cardComponent"
-          :key="index"
-          :data="item"
-          :index="index"
-          :isLoading="isLoading"
-          @grid-card-click="handleTournamentCardClick"
+    <div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
+      <BaseButton
+          backgroundColor="secondary"
+          border="primary"
+          size="xs"
+          color="primary"
+          hoverColor="secondary"
+          :label="moreButtonLabel"
+          @click="onClick"
       />
     </div>
+    </section>
   </section>
-  <div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
-    <BaseButton
-        backgroundColor="secondary"
-        border="primary"
-        size="xs"
-        color="primary"
-        hoverColor="secondary"
-        :label="moreButtonLabel"
-        @click="onClick"
-    />
-  </div>
 </template>
 
 <script>

package/src/stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue

@@ -34,7 +34,7 @@
       </section>
 
       <!-- Mobile Overlay -->
-      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 mt-10">
+      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 mt-12">
         <div class="w-full">
           <BaseText color="secondary" tag="h1" size="lg" weight="bold" class="mb-2">{{ formattedDate }}</BaseText>
           <BaseText color="secondary" tag="h1" size="xl" weight="bold" class="mb-2">{{ title }}</BaseText>

package/src/stories/Templates/TournamentDetailPage/TournamentDetail.stories.js

@@ -1,6 +1,5 @@
 import HomePage from './TournamentDetailPage.vue';
-import mockTournamentDetails from "../../../mocks/getTouranmentDetailsMock.js";
-
+import mockGetTournamentId from "../../../mocks/getTournamentById.js";
 export default {
     title: 'Templates/TournamentDetailsPage',
     component: HomePage,
@@ -15,9 +14,9 @@ export default {
 
 export const Default = {
     args: {
-        title: mockTournamentDetails.Name,
+        title: mockGetTournamentId.Name,
         imageSrc: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
-        tournament: mockTournamentDetails,
+        tournament: mockGetTournamentId,
         apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
     },
 };
@@ -26,7 +25,7 @@ export const AllLoading = {
     args: {
         title: 'Discover, Compete, Connect',
         imageSrc: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
-        tournament: mockTournamentDetails,
+        tournament: mockGetTournamentId,
         apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q',
     },
 };

package/src/stories/Templates/TournamentDetailPage/TournamentDetailPage.vue

@@ -3,7 +3,7 @@
     <Header/>
     <TournamentDetailsBanner :title="title"
                              :imageSrc="imageSrc"
-                             :club-logo="tournament.Club.Images[0].URL"
+                             :club-logo="ClubLogo"
                              :hosting-club-name="tournament.Club.Name"
                              :tournament-start-date="tournament.StartDate"
     />
@@ -14,10 +14,12 @@
           <TournamentDetails
               :imageSrc="tournament.Images[0].URL"
               :description="tournament.Description"
+              :shareLinks="ShareLinks"
           />
         </div>
         <div class="w-full max-w-4xl mx-auto md:p-4">
           <GridLayout
+              v-if="tournament.Events.length > 0"
               :cardComponent="EventListCard"
               :items="tournament.Events"
               :maxColumns="1"
@@ -26,17 +28,18 @@
               :title="'Events'"
           />
         </div>
-        <div class="w-full flex justify-center md:mb-20">
-          <BaseButton label="Register" backgroundColor="secondary" border="primary" class="w-40 mx-auto mt-10"/>
+        <div v-if="RegistrationLink" class="w-full flex justify-center md:mb-20">
+          <BaseButton label="Register" backgroundColor="secondary" border="primary" class="w-40 mx-auto mt-10" @click="handleRegistrationClick"/>
         </div>
       </section>
       <section class="mt-8 md:mt-16">
         <HostColumn
-            :organizerName="tournament.PrimaryContact.DisplayName"
-            :organizerPortrait="tournament.PrimaryContact.Images[0].URL"
+            :organizerName="ContactName"
+            :organizerPortrait="ContactImage"
             :address="tournament.Address"
             :fencersGoing="tournament.TotalParticipants"
             :bookmarksCount="tournament.TotalBookmarks"
+            :rulesLink="RulesLink"
             :apiKey="apiKey"
             @rulesClick="onRulesClick"
         />
@@ -57,6 +60,7 @@ import EventListCard from "../../Organisms/Cards/EventListCard/EventListCard.vue
 import BaseText from "../../Atoms/BaseText/BaseText.vue";
 import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
 import HostColumn from "../../Organisms/Column/HostColumn.vue";
+import protrait1 from "../../../assets/images/portrait1.png";
 
 export default {
   name: 'TournamentDetailPage',
@@ -106,14 +110,56 @@ export default {
     },
     limitedTournaments() {
       return this.tournaments;
+    },
+    ClubLogo() {
+      return this.tournament?.Club?.Images?.[0]?.URL || this.defaultPortrait;
+    },
+    ContactName() {
+      return this.tournament.PrimaryContact.DisplayName === 'BYE' ? 'Contact Not Assigned' : this.tournament.PrimaryContact.DisplayName;
+    },
+    ContactImage() {
+      return this.tournament?.PrimaryContact?.Images?.[0]?.URL || this.defaultPortrait;
+    },
+    RulesLink() {
+      const rulesLink = this.tournament.SocialMedia.find(social => social.Type === 'Rules');
+      return rulesLink ? rulesLink.Link : '';
+    },
+    RegistrationLink() {
+      const registrationLink = this.tournament.SocialMedia.find(social => social.Type === 'Registration');
+      return registrationLink ? registrationLink.Link : '';
+    },
+    ShareLinks() {
+      const iconMap = {
+        Facebook: 'fa-facebook',
+        Instagram: 'fa-instagram',
+        Twitter: 'fa-twitter',
+        Discord: 'fa-discord',
+        YouTube: 'fa-youtube',
+        TikTok: 'fa-tiktok'
+      };
+
+      return this.tournament.SocialMedia
+          .filter(social => social.Type !== 'Rules' && social.Type !== 'Registration') // Exclude Rules and Registration
+          .map(social => {
+            return {
+              name: social.Type,
+              url: social.Link,
+              icon: iconMap[social.Type] || 'fa-link'
+            };
+          });
     }
   },
   data() {
-    return {}
+    return {
+      defaultPortrait: protrait1
+    }
   },
   methods: {
     onRulesClick() {
-      this.$emit('rules-click');
+      this.$emit('rules-click', this.RulesLink);
+    },
+    handleRegistrationClick() {
+      this.$emit('registration-click', this.RegistrationLink);
     }
   }
 }