@dcrackel/hematournamentui 1.0.698 → 1.0.701

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

@@ -0,0 +1,113 @@
+import TournamentForm from "./TournamentPageOne.vue";
+import mockLocation from "../../../../mocks/locationMock.js";
+import mockTournaments from "../../../../mocks/tournamentMock.js";
+import mockPersons from "../../../../mocks/personsMock.js";
+
+const validTournamentFields = {
+    Name: { invalid: false, message: '' },
+    Address: { invalid: false, message: '' },
+    StartDate: { invalid: false, message: '' },
+    TotalDays: { invalid: false, message: '' },
+    RegistrationCutOff: { invalid: false, message: '' },
+    Description: { invalid: false, message: '' },
+};
+
+const invalidTournamentFields = {
+    Name: { invalid: true, message: 'Tournament name is required' },
+    Address: { invalid: true, message: 'Location is required' },
+    StartDate: { invalid: true, message: 'Start date is required' },
+    TotalDays: { invalid: true, message: 'Must be at least 1 day' },
+    RegistrationCutOff: { invalid: true, message: 'Registration cut off is required' },
+    Description: { invalid: true, message: 'Description is required' },
+};
+
+const emptyTournament = {
+    Name: '',
+    Address: { Name: '' },
+    StartDate: new Date().toISOString().slice(0, 10),
+    TotalDays: 1,
+    RegistrationCutOff: new Date().toISOString().slice(0, 10),
+    PrimaryContactId: mockPersons?.[0]?.PersonId ?? 0,
+    Images: [{ URL: '' }],
+    Description: '',
+};
+
+export default {
+    title: 'Templates/TournamentManagement/TournamentPageOne',
+    component: TournamentForm,
+    tags: ["autodocs"],
+    args: {
+        tournament: mockTournaments[0],
+        locations: mockLocation,
+        persons: mockPersons,
+        validation: validTournamentFields,
+        isNewTournament: true,
+        userLevel: 'Club',
+    },
+    argTypes: {
+        tournament: {
+            control: { type: "object" },
+        },
+        locations: {
+            control: { type: "object" },
+        },
+        persons: {
+            control: { type: "object" },
+        },
+        validation: {
+            control: { type: "object" },
+        },
+        isNewTournament: {
+            control: { type: "boolean" },
+        },
+        userLevel: {
+            control: { type: "text" },
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        tournament: mockTournaments[0],
+        locations: mockLocation,
+        persons: mockPersons,
+        validation: validTournamentFields,
+    },
+};
+
+export const EmptyTournament = {
+    args: {
+        tournament: emptyTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+        validation: validTournamentFields,
+    },
+};
+
+export const EditMode = {
+    args: {
+        tournament: mockTournaments[0],
+        locations: mockLocation,
+        persons: mockPersons,
+        validation: validTournamentFields,
+        isNewTournament: false,
+    },
+};
+
+export const InvalidFields = {
+    args: {
+        tournament: emptyTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+        validation: invalidTournamentFields,
+    },
+};
+
+export const EmptyOptions = {
+    args: {
+        tournament: emptyTournament,
+        locations: [],
+        persons: [],
+        validation: validTournamentFields,
+    },
+};

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,
+    },
+};