@dcrackel/hematournamentui 1.0.699 → 1.0.702

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

@@ -3,9 +3,9 @@
     <div v-if="isNewTournament" class="w-full flex flex-row justify-center">
       <BaseText :color="'quaternary'" :size="'sm'" :text="'Step 1 out of 2'" :weight="'normal'" data-testid="text-step"/>
     </div>
-    <div class="w-full flex flex-row justify-center my-4">
-      <BaseText v-if="isNewTournament" :color="'primaryHighlight'" :size="'2xl'" :text="'Add New Tournament'" :weight="'normal'" data-testid="text-add-tournament"/>
-      <BaseText v-if="!isNewTournament" :color="'primaryHighlight'" :size="'2xl'" :text="'Basic Tournament Infomation'" :weight="'normal'" data-testid="text-add-tournament"/>
+    <div class="w-full flex flex-row justify-center my-4">
+      <BaseText v-if="isNewTournament" :color="'primaryHighlight'" :size="'2xl'" :text="'Add New Tournament'" :weight="'normal'" data-testid="text-add-tournament"/>
+      <BaseText v-if="!isNewTournament" :color="'primaryHighlight'" :size="'2xl'" :text="'Basic Tournament Information'" :weight="'normal'" data-testid="text-add-tournament"/>
     </div>
     <div class="w-full flex flex-row justify-center my-4">
 
@@ -16,111 +16,111 @@
                     @update:url="handleNewImageUrl"/>
     </div>
 
-    <TitledInput
-        :inputValue="tournamentName"
-        :invalid="validation?.Name?.invalid ?? false"
-        :title="validation?.Name?.invalid ? `Tournament Name - ${validation?.Name?.message}` : 'Tournament Name'"
-        placeholder="Enter Tournament Name"
-        @update:value="emitUpdate('Name', $event)"
-        class="mb-4"
+    <TitledInput
+        :inputValue="tournamentName"
+        :invalid="isFieldInvalid('Name')"
+        :title="getValidationLabel('Name', 'Tournament Name')"
+        placeholder="Enter Tournament Name"
+        @update:value="emitUpdate('Name', $event)"
+        class="mb-4"
     />
 
     <div class="flex flex-col mb-4">
-      <BaseText
-          :color="'primaryHighlight'"
-          :invalid="validation?.Address?.invalid"
-          :text="validation?.Address?.invalid ? `Location - ${validation?.Address?.message}` : 'Location'"
-          :size="'sm'"
-          :weight="'normal'"
-          class="mb-1"
+      <BaseText
+          :color="'primaryHighlight'"
+          :invalid="isFieldInvalid('Address')"
+          :text="getValidationLabel('Address', 'Location')"
+          :size="'sm'"
+          :weight="'normal'"
+          class="mb-1"
           data-testid="text-address"
       />
       <FindLocation
-          :placeholder="addressName"
-          :addBorder="true"
-          :locations="locations"
-          :invalid="validation.Address.invalid"
-          addNewText="Add New"
-          @update:location="handleAddressUpdate"
-          @submit:location="handleAddressUpdate"
+          :placeholder="addressName"
+          :addBorder="true"
+          :locations="locations"
+          :invalid="isFieldInvalid('Address')"
+          addNewText="Add New"
+          @update:location="handleAddressUpdate"
+          @submit:location="handleAddressUpdate"
           @submit:addNewAddress="handleAddNewAddress"
       />
     </div>
 
     <div class="flex flex-row mb-4">
       <div class="w-3/4 mr-1">
-        <BaseText
-            :color="'primaryHighlight'"
-            :invalid="validation.StartDate.invalid"
-            :size="'sm'"
-            :text="validation.StartDate.invalid ? `Start Date - ${validation.StartDate.message}` : 'Start Date'"
-            :weight="'normal'"
-            class="mb-1"
-            data-testid="text-start-date"
-        />
-        <DatePicker
-            :invalid="validation.StartDate.invalid"
-            :setDate="startDate"
-            :userLevel="userLevel"
-            @update:selectedDate="emitUpdate('StartDate', $event)"
+        <BaseText
+            :color="'primaryHighlight'"
+            :invalid="isFieldInvalid('StartDate')"
+            :size="'sm'"
+            :text="getValidationLabel('StartDate', 'Start Date')"
+            :weight="'normal'"
+            class="mb-1"
+            data-testid="text-start-date"
+        />
+        <DatePicker
+            :invalid="isFieldInvalid('StartDate')"
+            :setDate="startDate"
+            :userLevel="userLevel"
+            @update:selectedDate="emitUpdate('StartDate', $event)"
         />
       </div>
       <div>
-        <TitledInput
-            :inputValue="totalDays"
-            :invalid="validation.TotalDays.invalid"
-            :placeholder="'Number of Days'"
-            :inputType="'number'"
-            :title="validation.TotalDays.invalid ? `Number of Days - ${validation.TotalDays.message}` : 'Number of Days'"
-            @update:value="emitUpdate('TotalDays', $event)"
-        />
+        <TitledInput
+            :inputValue="totalDays"
+            :invalid="isFieldInvalid('TotalDays')"
+            :placeholder="'Number of Days'"
+            :inputType="'number'"
+            :title="getValidationLabel('TotalDays', 'Number of Days')"
+            @update:value="emitUpdate('TotalDays', $event)"
+        />
       </div>
     </div>
 
     <div class="w-full mr-1 mb-4">
-      <BaseText
-          :color="'primaryHighlight'"
-          :invalid="validation.RegistrationCutOff.invalid"
-          :size="'sm'"
-          :text="validation.RegistrationCutOff.invalid ? `Registration Cut Off - ${validation.RegistrationCutOff.message}` : 'Registration Cut Off'"
-          :weight="'normal'"
-          class="mb-1"
-          data-testid="text-start-date"
-      />
-      <DatePicker
-          :invalid="validation.RegistrationCutOff.invalid"
-          :setDate="registrationCutOff"
-          :userLevel="userLevel"
-          @update:selectedDate="emitUpdate('RegistrationCutOff', $event)"
+      <BaseText
+          :color="'primaryHighlight'"
+          :invalid="isFieldInvalid('RegistrationCutOff')"
+          :size="'sm'"
+          :text="getValidationLabel('RegistrationCutOff', 'Registration Cut Off')"
+          :weight="'normal'"
+          class="mb-1"
+          data-testid="text-start-date"
+      />
+      <DatePicker
+          :invalid="isFieldInvalid('RegistrationCutOff')"
+          :setDate="registrationCutOff"
+          :userLevel="userLevel"
+          @update:selectedDate="emitUpdate('RegistrationCutOff', $event)"
       />
     </div>
 
     <div class="flex flex-col mb-4">
-      <BaseText
-          :color="'primaryHighlight'"
-          :invalid="validation.Description.invalid"
-          :size="'sm'"
-          :text="validation.Description.invalid ? `Description - ${validation.Description.message}` : 'Description'"
-          :weight="'normal'"
-          class="mb-1"
-          data-testid="text-description"
-      />
-      <TextBoxEditor
-          :invalid="validation.Description.invalid"
-          :initialContent="tournament.Description"
-          @update:editorContent="emitUpdate('Description', $event)"
-      />
+      <BaseText
+          :color="'primaryHighlight'"
+          :invalid="isFieldInvalid('Description')"
+          :size="'sm'"
+          :text="getValidationLabel('Description', 'Description')"
+          :weight="'normal'"
+          class="mb-1"
+          data-testid="text-description"
+      />
+      <TextBoxEditor
+          :invalid="isFieldInvalid('Description')"
+          :initialContent="description"
+          @update:editorContent="emitUpdate('Description', $event)"
+      />
     </div>
 
     <div class="flex flex-col pb-4 mr-4">
       <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
                 :weight="'normal'" class="mb-1" data-testid="text-primary-contact"/>
       <FindPerson :addBorder="true"
-                  :persons="persons"
-                  :defaultValue="getDefaultPerson"
-                  addNewText="Add New Person"
-                  @new-person-submitted="handlePersonUpdate('PrimaryContactId', $event)"
-                  @person-selected="handlePersonUpdate('PrimaryContactId', $event)"/>
+                  :persons="persons"
+                  :defaultValue="getDefaultPerson"
+                  addNewText="Add New Person"
+                  @add-new-person="handleAddNewPerson"
+                  @person-selected="handlePrimaryContactUpdate"/>
     </div>
 
   </section>
@@ -135,9 +135,9 @@ import TextBoxEditor from "../../../Organisms/ComplexInputs/TextBoxEditor/TextBo
 import ImageCropper from "../../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
 import FindPerson from "../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
 
-export default {
-  name: 'TournamentPageOne',
-  emits: ['update:tournament', 'update:image', 'update:address', 'add:newAddress'],
+export default {
+  name: 'TournamentPageOne',
+  emits: ['update:tournament', 'update:image', 'update:address', 'add:newAddress', 'add:newPerson'],
   props: {
     tournament: {
       type: Object,
@@ -204,31 +204,48 @@ export default {
     totalDays() {
       return this.tournament?.TotalDays || 1;
     },
-    registrationCutOff() {
-      return this.tournament?.RegistrationCutOff || new Date();
-    },
-    getDefaultPerson: function () {
-      const person = this.persons.find(p => p.PersonId === this.tournament.PrimaryContactId);
-      return person ? person.DisplayName : '';
-    }
-  },
-  methods: {
-    handleNewImageUrl(url) {
-      this.tournament.ImageLink = url;
-      this.$emit('update:image', { 'ImageLink': url });
-    },
+    registrationCutOff() {
+      return this.tournament?.RegistrationCutOff || new Date();
+    },
+    description() {
+      return this.tournament?.Description || '';
+    },
+    getDefaultPerson: function () {
+      const person = this.persons.find(p => p.PersonId === this.tournament?.PrimaryContactId);
+      return person ? person.DisplayName : '';
+    }
+  },
+  methods: {
+    handleNewImageUrl(url) {
+      this.$emit('update:image', { 'ImageLink': url });
+    },
     handleAddNewAddress(newAddress) {
       this.$emit('add:newAddress', newAddress);
     },
-    handleAddressUpdate(updatedAddress) {
-      this.$emit('update:address', updatedAddress);
-    },
-    handlePersonUpdate(person, value) {
-      this.$emit('update:tournament', { 'PrimaryContactId': value.PersonId });
-    },
-    emitUpdate(field, value) {
-      this.$emit('update:tournament', { [field]: value });
-    }
-  }
-};
+    handleAddressUpdate(updatedAddress) {
+      this.$emit('update:address', updatedAddress);
+    },
+    handleAddNewPerson(personName) {
+      this.$emit('add:newPerson', personName);
+    },
+    handlePrimaryContactUpdate(person) {
+      if (!person) return;
+      this.$emit('update:tournament', { 'PrimaryContactId': person.PersonId });
+    },
+    emitUpdate(field, value) {
+      this.$emit('update:tournament', { [field]: value });
+    },
+    getFieldValidation(field) {
+      return this.validation?.[field] || { invalid: false, message: '' };
+    },
+    isFieldInvalid(field) {
+      return this.getFieldValidation(field).invalid;
+    },
+    getValidationLabel(field, label) {
+      const fieldValidation = this.getFieldValidation(field);
+      if (!fieldValidation.invalid) return label;
+      return `${label} - ${fieldValidation.message}`;
+    }
+  }
+};
 </script>

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

@@ -1,32 +1,77 @@
-import TournamentPageTwo from "./TouranmentPageTwo.vue";
-import mockTournaments from "../../../../mocks/tournamentMock.js";
-
-export default {
-    title: 'Templates/TournamentManagement/TournamentPageTwo',
-    component: TournamentPageTwo,
+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: mockTournaments[0],
-    },
-    argTypes: {
-        tournament: {
-            control: { type: "object" },
-        },
-    },
-};
-
-export const Default = {
-    args: {
-        tournament: mockTournaments[0],
-    },
-};
-
-export const EmptyTournament = {
-    args: {
-        tournament: {
-            hostedOnM2: false,
-            registrationLink: "",
-            rulesLink: "",
-        },
-    },
-};
+    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/{TouranmentPageTwo.vue → TournamentPageTwo.vue}

@@ -12,7 +12,7 @@
               :size="'xl'"
               :text="'Do you want MeyerSquared to host your tournament?'"
               :weight="'normal'"
-              data-testid="text-ferrotas-to-host"
+              data-testid="text-meyer-squared-to-host"
               class="border-b border-dropdownSelect mb-2"
           />
           <BaseText
@@ -32,7 +32,7 @@
                 label="Yes"
                 size="sm"
                 type="square"
-                :selected="!!tournament.HostedOnM2"
+                :selected="isHosted"
                 @buttonClick="handleHostedChoice(true)"
             />
             <BaseButton
@@ -41,14 +41,13 @@
                 label="No"
                 size="sm"
                 type="square"
-                :selected="!tournament.HostedOnM2"
+                :selected="!isHosted"
                 @buttonClick="handleHostedChoice(false)"
             />
           </div>
         </section>
 
-        <!-- Results Import (only when NOT hosted) -->
-        <div v-if="!tournament.HostedOnM2" 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'"
@@ -73,22 +72,22 @@
                   label="Not now"
                   size="sm"
                   type="square"
-                  :selected="!tournament.ResultsEnabled"
+                  :selected="!resultsEnabled"
                   @buttonClick="emitUpdate('ResultsEnabled', false)"
               />
               <BaseButton
                   class="w-1/2 ml-1"
                   color="neutral"
-                  label="Yes, I’ll upload results"
+                  label="Yes, I'll upload results"
                   size="sm"
                   type="square"
-                  :selected="!!tournament.ResultsEnabled"
+                  :selected="resultsEnabled"
                   @buttonClick="emitUpdate('ResultsEnabled', true)"
               />
             </div>
           </section>
 
-          <div v-if="tournament.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'"
@@ -98,9 +97,7 @@
                 data-testid="text-results-anytime"
             />
 
-            <!-- This does not navigate by itself; it just emits an intent.
-                 Parent can switch to a "Results Import" tab/screen. -->
-            <BaseButton
+            <BaseButton
                 class="w-3/4"
                 color="neutral"
                 label="Go to Results Import"
@@ -111,8 +108,7 @@
           </div>
         </div>
 
-        <!-- Visibility (only when hosted) -->
-        <div v-if="tournament.HostedOnM2" 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"
@@ -133,15 +129,14 @@
             <BaseRadioGroup
                 :invalid="validation.visibility"
                 :items="visibilityItems"
-                :value="tournament.Visibility"
+                :value="visibility"
                 @update:value="value => emitUpdate('Visibility', value)"
                 class="w-3/4"
             />
           </div>
         </div>
 
-        <!-- Waiver Required (only when hosted) -->
-        <div v-if="tournament.HostedOnM2" 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"
@@ -162,7 +157,7 @@
             <BaseRadioGroup
                 :invalid="validation.waiverScope"
                 :items="waiverItems"
-                :value="tournament.WaiverScope"
+                :value="waiverScope"
                 @update:value="value => emitUpdate('WaiverScope', value)"
                 class="w-3/4"
             />
@@ -190,7 +185,7 @@
 
           <BaseText :color="'quaternary'" :size="'sm'" :text="'Registration (Payment) Link'" :weight="'normal'" class="mb-1" data-testid="text-registration-link"/>
           <BaseInput
-              :value="tournament.RegistrationLink"
+              :value="registrationLink"
               :addBorder="true"
               class="pb-2 w-full mb-4"
               iconName="fa-dash"
@@ -200,7 +195,7 @@
 
           <BaseText :color="'quaternary'" :size="'sm'" :text="'Tournament Rules and Documents'" :weight="'normal'" class="mb-1" data-testid="text-rules-link"/>
           <BaseInput
-              :value="tournament.RulesLink"
+              :value="rulesLink"
               :addBorder="true"
               class="pb-2 w-full"
               iconName="fa-dash"
@@ -234,19 +229,37 @@ export default {
         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: {
-    hostingDescription() {
+  },
+  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.`;
@@ -256,16 +269,22 @@ export default {
           + `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 });
-    },
-    handleHostedChoice(isHosted) {
-      this.emitUpdate('HostedOnM2', isHosted);
+  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>
 
-      // If they switch to Hosted, results import doesn't apply. Clear it to avoid confusion.
-      if (isHosted) this.emitUpdate('ResultsEnabled', false);
-    }
-  }
-};
-</script>

package/src/stories/Templates/PersonManagement/Admin/FencerAdmin.stories.js

@@ -1,48 +0,0 @@
-import FencerAdmin from './FencerAdmin.vue';
-import personsMock from "../../../../mocks/personsMock.js";
-
-export default {
-    title: 'Templates/PersonManagement/Admin/FencerAdmin',
-    component: FencerAdmin,
-    tags: ['autodocs'],
-    args: {
-        person: personsMock
-    },
-    argTypes: {
-        person: { control: { type: 'object' } }
-    }
-};
-
-export const Default = {
-    args: {
-        person: personsMock
-    }
-};
-
-export const WithAdminAccess = {
-    args: {
-        person: {
-            ...personsMock,
-            AccessLevel: 'Admin',
-            HemaRatingsId: '12345'
-        }
-    }
-};
-
-export const WithoutHemaRating = {
-    args: {
-        person: {
-            ...personsMock[0],
-            HemaRatingsId: ''
-        }
-    }
-};
-
-export const WithClubAccess = {
-    args: {
-        person: {
-            ...personsMock[0],
-            AccessLevel: 'Club'
-        }
-    }
-};