@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Templates/TournamentManagement/TournamentPageTwo/TournamentPageTwo.stories.js

@@ -1,77 +1,77 @@
-import TournamentPageTwo from "./TournamentPageTwo.vue";
-import mockTournaments from "../../../../mocks/tournamentMock.js";
-
-const hostedTournament = {
-    ...mockTournaments[0],
-    HostedOnM2: true,
-    ResultsEnabled: false,
-    Visibility: 'Open',
-    WaiverScope: 'None',
-    RegistrationLink: 'https://example.com/register',
-    RulesLink: 'https://example.com/rules',
-};
-
-const nonHostedTournament = {
-    ...hostedTournament,
-    HostedOnM2: false,
-    ResultsEnabled: false,
-};
-
-export default {
-    title: 'Templates/TournamentManagement/TournamentPageTwo',
-    component: TournamentPageTwo,
-    tags: ["autodocs"],
-    args: {
-        tournament: hostedTournament,
-        isNewTournament: true,
-    },
-    argTypes: {
-        tournament: {
-            control: { type: "object" },
-        },
-        isNewTournament: {
-            control: { type: "boolean" },
-        },
-    },
-};
-
-export const Default = {
-    args: {
-        tournament: hostedTournament,
-    },
-};
-
-export const EmptyTournament = {
-    args: {
-        tournament: {
-            HostedOnM2: false,
-            ResultsEnabled: false,
-            Visibility: 'Open',
-            WaiverScope: 'None',
-            RegistrationLink: '',
-            RulesLink: '',
-        },
-    },
-};
-
-export const NotHosted = {
-    args: {
-        tournament: nonHostedTournament,
-    },
-};
-
-export const ResultsUploadEnabled = {
-    args: {
-        tournament: {
-            ...nonHostedTournament,
-            ResultsEnabled: true,
-        },
-    },
-};
-
-export const EditMode = {
-    args: {
-        tournament: hostedTournament,
-        isNewTournament: false,
-    },
-};
+import TournamentPageTwo from './TournamentPageTwo.vue';
+import mockTournaments from '../../../../mocks/tournamentMock.js';
+
+const hostedTournament = {
+  ...mockTournaments[0],
+  HostedOnM2: true,
+  ResultsEnabled: false,
+  Visibility: 'Open',
+  WaiverScope: 'None',
+  RegistrationLink: 'https://example.com/register',
+  RulesLink: 'https://example.com/rules'
+};
+
+const nonHostedTournament = {
+  ...hostedTournament,
+  HostedOnM2: false,
+  ResultsEnabled: false
+};
+
+export default {
+  title: 'Templates/TournamentManagement/TournamentPageTwo',
+  component: TournamentPageTwo,
+  tags: ['autodocs'],
+  args: {
+    tournament: hostedTournament,
+    isNewTournament: true
+  },
+  argTypes: {
+    tournament: {
+      control: { type: 'object' }
+    },
+    isNewTournament: {
+      control: { type: 'boolean' }
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    tournament: hostedTournament
+  }
+};
+
+export const EmptyTournament = {
+  args: {
+    tournament: {
+      HostedOnM2: false,
+      ResultsEnabled: false,
+      Visibility: 'Open',
+      WaiverScope: 'None',
+      RegistrationLink: '',
+      RulesLink: ''
+    }
+  }
+};
+
+export const NotHosted = {
+  args: {
+    tournament: nonHostedTournament
+  }
+};
+
+export const ResultsUploadEnabled = {
+  args: {
+    tournament: {
+      ...nonHostedTournament,
+      ResultsEnabled: true
+    }
+  }
+};
+
+export const EditMode = {
+  args: {
+    tournament: hostedTournament,
+    isNewTournament: false
+  }
+};

package/src/stories/Templates/TournamentManagement/TournamentPageTwo/TournamentPageTwo.vue

@@ -1,165 +1,171 @@
 <template>
   <div class="min-h-80">
     <div v-if="isNewTournament" class="w-full flex flex-row justify-center mt-4">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'Step 2 out of 2'" :weight="'normal'" data-testid="text-step"/>
+      <BaseText
+        :color="'quaternary'"
+        :size="'sm'"
+        :text="'Step 2 out of 2'"
+        :weight="'normal'"
+        data-testid="text-step"
+      />
     </div>
 
     <div class="w-full flex flex-row">
       <section class="w-full">
         <div class="w-full flex flex-col my-4">
           <BaseText
-              :color="'primaryHighlight'"
-              :size="'xl'"
-              :text="'Do you want MeyerSquared to host your tournament?'"
-              :weight="'normal'"
-              data-testid="text-meyer-squared-to-host"
-              class="border-b border-dropdownSelect mb-2"
+            :color="'primaryHighlight'"
+            :size="'xl'"
+            :text="'Do you want MeyerSquared to host your tournament?'"
+            :weight="'normal'"
+            data-testid="text-meyer-squared-to-host"
+            class="border-b border-dropdownSelect mb-2"
           />
           <BaseText
-              :color="'quaternary'"
-              :size="'sm'"
-              :text="hostingDescription"
-              :weight="'normal'"
-              data-testid="text-select-description"
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="hostingDescription"
+            :weight="'normal'"
+            data-testid="text-select-description"
           />
         </div>
 
         <section class="flex w-full justify-center">
           <div class="flex flex-row justify-center w-3/4">
             <BaseButton
-                class="w-1/2 mr-1"
-                color="neutral"
-                label="Yes"
-                size="sm"
-                type="square"
-                :selected="isHosted"
-                @buttonClick="handleHostedChoice(true)"
+              class="w-1/2 mr-1"
+              color="neutral"
+              label="Yes"
+              size="sm"
+              type="square"
+              :selected="isHosted"
+              @buttonClick="handleHostedChoice(true)"
             />
             <BaseButton
-                class="w-1/2 ml-1"
-                color="neutral"
-                label="No"
-                size="sm"
-                type="square"
-                :selected="!isHosted"
-                @buttonClick="handleHostedChoice(false)"
+              class="w-1/2 ml-1"
+              color="neutral"
+              label="No"
+              size="sm"
+              type="square"
+              :selected="!isHosted"
+              @buttonClick="handleHostedChoice(false)"
             />
           </div>
         </section>
 
-        <div v-if="!isHosted" class="flex flex-col pb-4 mt-10">
+        <div v-if="!isHosted" class="flex flex-col pb-4 mt-10">
           <BaseText
-              :color="'primaryHighlight'"
-              :size="'xl'"
-              :text="'Publish final results on MeyerSquared?'"
-              :weight="'normal'"
-              class="mb-2 border-b border-dropdownSelect"
-              data-testid="text-results-publish"
+            :color="'primaryHighlight'"
+            :size="'xl'"
+            :text="'Publish final results on MeyerSquared?'"
+            :weight="'normal'"
+            class="mb-2 border-b border-dropdownSelect"
+            data-testid="text-results-publish"
           />
           <BaseText
-              :color="'quaternary'"
-              :size="'sm'"
-              :text="resultsDescription"
-              :weight="'normal'"
-              data-testid="text-results-description"
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="resultsDescription"
+            :weight="'normal'"
+            data-testid="text-results-description"
           />
 
           <section class="flex w-full justify-center mt-6">
             <div class="flex flex-row justify-center w-3/4">
               <BaseButton
-                  class="w-1/2 mr-1"
-                  color="neutral"
-                  label="Not now"
-                  size="sm"
-                  type="square"
-                  :selected="!resultsEnabled"
-                  @buttonClick="emitUpdate('ResultsEnabled', false)"
+                class="w-1/2 mr-1"
+                color="neutral"
+                label="Not now"
+                size="sm"
+                type="square"
+                :selected="!resultsEnabled"
+                @buttonClick="emitUpdate('ResultsEnabled', false)"
               />
               <BaseButton
-                  class="w-1/2 ml-1"
-                  color="neutral"
-                  label="Yes, I'll upload results"
-                  size="sm"
-                  type="square"
-                  :selected="resultsEnabled"
-                  @buttonClick="emitUpdate('ResultsEnabled', true)"
+                class="w-1/2 ml-1"
+                color="neutral"
+                label="Yes, I'll upload results"
+                size="sm"
+                type="square"
+                :selected="resultsEnabled"
+                @buttonClick="emitUpdate('ResultsEnabled', true)"
               />
             </div>
           </section>
 
-          <div v-if="resultsEnabled" class="w-full flex flex-col items-center mt-6">
+          <div v-if="resultsEnabled" class="w-full flex flex-col items-center mt-6">
             <BaseText
-                :color="'quaternary'"
-                :size="'sm'"
-                :text="'You can upload results any time from the tournament edit page (Results Import tab).'"
-                :weight="'normal'"
-                class="text-center mb-3"
-                data-testid="text-results-anytime"
+              :color="'quaternary'"
+              :size="'sm'"
+              :text="'You can upload results any time from the tournament edit page (Results Import tab).'"
+              :weight="'normal'"
+              class="text-center mb-3"
+              data-testid="text-results-anytime"
             />
 
-            <BaseButton
-                class="w-3/4"
-                color="neutral"
-                label="Go to Results Import"
-                size="sm"
-                type="primary"
-                @buttonClick="$emit('go:results-import')"
+            <BaseButton
+              class="w-3/4"
+              color="neutral"
+              label="Go to Results Import"
+              size="sm"
+              type="primary"
+              @buttonClick="$emit('go:results-import')"
             />
           </div>
         </div>
 
-        <div v-if="isHosted" class="flex flex-col pb-4 mt-10">
+        <div v-if="isHosted" class="flex flex-col pb-4 mt-10">
           <BaseText
-              :color="'primaryHighlight'"
-              :invalid="validation.visibility"
-              :size="'xl'"
-              :text="'Tournament Visibility'"
-              :weight="'normal'"
-              class="mb-2 border-b border-dropdownSelect"
-              data-testid="text-visibility"
+            :color="'primaryHighlight'"
+            :invalid="validation.visibility"
+            :size="'xl'"
+            :text="'Tournament Visibility'"
+            :weight="'normal'"
+            class="mb-2 border-b border-dropdownSelect"
+            data-testid="text-visibility"
           />
           <BaseText
-              :color="'quaternary'"
-              :size="'sm'"
-              :text="`Select the visibility of your tournament.`"
-              :weight="'normal'"
-              data-testid="text-select-description"
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="`Select the visibility of your tournament.`"
+            :weight="'normal'"
+            data-testid="text-select-description"
           />
           <div class="flex flex-row justify-center mt-6">
             <BaseRadioGroup
-                :invalid="validation.visibility"
-                :items="visibilityItems"
-                :value="visibility"
-                @update:value="value => emitUpdate('Visibility', value)"
-                class="w-3/4"
+              :invalid="validation.visibility"
+              :items="visibilityItems"
+              :value="visibility"
+              @update:value="value => emitUpdate('Visibility', value)"
+              class="w-3/4"
             />
           </div>
         </div>
 
-        <div v-if="isHosted" class="flex flex-col pb-4 mt-10">
+        <div v-if="isHosted" class="flex flex-col pb-4 mt-10">
           <BaseText
-              :color="'primaryHighlight'"
-              :invalid="validation.waiverScope"
-              :size="'xl'"
-              :text="'Waiver Required?'"
-              :weight="'normal'"
-              class="mb-2 border-b border-dropdownSelect"
-              data-testid="text-waiver-required"
+            :color="'primaryHighlight'"
+            :invalid="validation.waiverScope"
+            :size="'xl'"
+            :text="'Waiver Required?'"
+            :weight="'normal'"
+            class="mb-2 border-b border-dropdownSelect"
+            data-testid="text-waiver-required"
           />
           <BaseText
-              :color="'quaternary'"
-              :size="'sm'"
-              :text="`Select what kind of waiver (if any) fencers must sign.`"
-              :weight="'normal'"
-              data-testid="text-waiver-description"
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="`Select what kind of waiver (if any) fencers must sign.`"
+            :weight="'normal'"
+            data-testid="text-waiver-description"
           />
           <div class="flex flex-row justify-center mt-6">
             <BaseRadioGroup
-                :invalid="validation.waiverScope"
-                :items="waiverItems"
-                :value="waiverScope"
-                @update:value="value => emitUpdate('WaiverScope', value)"
-                class="w-3/4"
+              :invalid="validation.waiverScope"
+              :items="waiverItems"
+              :value="waiverScope"
+              @update:value="value => emitUpdate('WaiverScope', value)"
+              class="w-3/4"
             />
           </div>
         </div>
@@ -167,40 +173,54 @@
         <section class="mt-10">
           <div class="w-full flex flex-col mb-6">
             <BaseText
-                :color="'primaryHighlight'"
-                :size="'2xl'"
-                :text="'Helpful Links'"
-                :weight="'normal'"
-                data-testid="text-helpful-links"
-                class="mb-2 border-b dropdownSelect"
+              :color="'primaryHighlight'"
+              :size="'2xl'"
+              :text="'Helpful Links'"
+              :weight="'normal'"
+              data-testid="text-helpful-links"
+              class="mb-2 border-b dropdownSelect"
             />
             <BaseText
-                :color="'quaternary'"
-                :size="'sm'"
-                :text="`Links visiting fencers are commonly looking for.`"
-                :weight="'normal'"
-                data-testid="text-select-description"
+              :color="'quaternary'"
+              :size="'sm'"
+              :text="`Links visiting fencers are commonly looking for.`"
+              :weight="'normal'"
+              data-testid="text-select-description"
             />
           </div>
 
-          <BaseText :color="'quaternary'" :size="'sm'" :text="'Registration (Payment) Link'" :weight="'normal'" class="mb-1" data-testid="text-registration-link"/>
+          <BaseText
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="'Registration (Payment) Link'"
+            :weight="'normal'"
+            class="mb-1"
+            data-testid="text-registration-link"
+          />
           <BaseInput
-              :value="registrationLink"
-              :addBorder="true"
-              class="pb-2 w-full mb-4"
-              iconName="fa-dash"
-              placeholder="https://link1.com/your-registration-page"
-              @update:value="emitUpdate('RegistrationLink', $event)"
+            :value="registrationLink"
+            :addBorder="true"
+            class="pb-2 w-full mb-4"
+            iconName="fa-dash"
+            placeholder="https://link1.com/your-registration-page"
+            @update:value="emitUpdate('RegistrationLink', $event)"
           />
 
-          <BaseText :color="'quaternary'" :size="'sm'" :text="'Tournament Rules and Documents'" :weight="'normal'" class="mb-1" data-testid="text-rules-link"/>
+          <BaseText
+            :color="'quaternary'"
+            :size="'sm'"
+            :text="'Tournament Rules and Documents'"
+            :weight="'normal'"
+            class="mb-1"
+            data-testid="text-rules-link"
+          />
           <BaseInput
-              :value="rulesLink"
-              :addBorder="true"
-              class="pb-2 w-full"
-              iconName="fa-dash"
-              placeholder="https://link1.com/document-link"
-              @update:value="emitUpdate('RulesLink', $event)"
+            :value="rulesLink"
+            :addBorder="true"
+            class="pb-2 w-full"
+            iconName="fa-dash"
+            placeholder="https://link1.com/document-link"
+            @update:value="emitUpdate('RulesLink', $event)"
           />
         </section>
       </section>
@@ -209,10 +229,10 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import BaseRadioGroup from "../../../Atoms/RadioGroup/BaseRadioGroup.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import BaseRadioGroup from '../../../Atoms/RadioGroup/BaseRadioGroup.vue';
 
 export default {
   name: 'TournamentPageTwo',
@@ -226,65 +246,68 @@ export default {
     return {
       validation: {
         visibility: false,
-        waiverScope: false,
+        waiverScope: false
       },
       visibilityItems: [
-        { label: 'Open', value: 'Open', description: 'Viewable to everyone' },
-        { label: 'Club', value: 'Club', description: 'Viewable only to members of your club' },
-        { label: 'Private', value: 'Private', description: 'Only viewable by you' },
-      ],
-      waiverItems: [
-        { label: 'No', value: 'None', description: 'No waiver required' },
-        { label: 'Club Waiver', value: 'Club', description: 'Sign once, good forever' },
-        { label: 'Tournament Waiver', value: 'Tournament', description: 'Only for this tournament' },
-      ],
+        { label: 'Open', value: 'Open', description: 'Viewable to everyone' },
+        { label: 'Club', value: 'Club', description: 'Viewable only to members of your club' },
+        { label: 'Private', value: 'Private', description: 'Only viewable by you' }
+      ],
+      waiverItems: [
+        { label: 'No', value: 'None', description: 'No waiver required' },
+        { label: 'Club Waiver', value: 'Club', description: 'Sign once, good forever' },
+        { label: 'Tournament Waiver', value: 'Tournament', description: 'Only for this tournament' }
+      ]
     };
-  },
-  computed: {
-    isHosted() {
-      return !!this.tournament?.HostedOnM2;
-    },
-    resultsEnabled() {
-      return !!this.tournament?.ResultsEnabled;
-    },
-    visibility() {
-      return this.tournament?.Visibility || 'Open';
-    },
-    waiverScope() {
-      return this.tournament?.WaiverScope || 'None';
-    },
-    registrationLink() {
-      return this.tournament?.RegistrationLink || '';
-    },
-    rulesLink() {
-      return this.tournament?.RulesLink || '';
-    },
-    hostingDescription() {
-      return `If you select 'No', your tournament will be featured on our main calendar and you can link out to your registration page.\n\n`
-          + `You can also publish final results on MeyerSquared later (any time) to support ratings and historical records.\n\n`
-          + `By selecting 'Yes', you'll gain access to the full MeyerSquared platform to run pools, brackets, and live scoring.`;
+  },
+  computed: {
+    isHosted() {
+      return !!this.tournament?.HostedOnM2;
+    },
+    resultsEnabled() {
+      return !!this.tournament?.ResultsEnabled;
+    },
+    visibility() {
+      return this.tournament?.Visibility || 'Open';
+    },
+    waiverScope() {
+      return this.tournament?.WaiverScope || 'None';
+    },
+    registrationLink() {
+      return this.tournament?.RegistrationLink || '';
+    },
+    rulesLink() {
+      return this.tournament?.RulesLink || '';
+    },
+    hostingDescription() {
+      return (
+        `If you select 'No', your tournament will be featured on our main calendar and you can link out to your registration page.\n\n` +
+        `You can also publish final results on MeyerSquared later (any time) to support ratings and historical records.\n\n` +
+        `By selecting 'Yes', you'll gain access to the full MeyerSquared platform to run pools, brackets, and live scoring.`
+      );
     },
     resultsDescription() {
-      return `Choose 'Yes' if you want MeyerSquared to display final placements for your events.\n\n`
-          + `You can upload results now, or come back after the tournament and upload them later.`;
+      return (
+        `Choose 'Yes' if you want MeyerSquared to display final placements for your events.\n\n` +
+        `You can upload results now, or come back after the tournament and upload them later.`
+      );
     }
   },
-  methods: {
-    emitUpdate(field, value) {
-      this.$emit('update:tournament', { [field]: value });
-    },
-    emitTournamentUpdate(updatedTournamentFields) {
-      this.$emit('update:tournament', updatedTournamentFields);
-    },
-    handleHostedChoice(isHosted) {
-      if (isHosted) {
-        this.emitTournamentUpdate({ HostedOnM2: true, ResultsEnabled: false });
-        return;
-      }
-
-      this.emitUpdate('HostedOnM2', false);
-    }
-  }
-};
-</script>
+  methods: {
+    emitUpdate(field, value) {
+      this.$emit('update:tournament', { [field]: value });
+    },
+    emitTournamentUpdate(updatedTournamentFields) {
+      this.$emit('update:tournament', updatedTournamentFields);
+    },
+    handleHostedChoice(isHosted) {
+      if (isHosted) {
+        this.emitTournamentUpdate({ HostedOnM2: true, ResultsEnabled: false });
+        return;
+      }
 
+      this.emitUpdate('HostedOnM2', false);
+    }
+  }
+};
+</script>