@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

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

@@ -1,143 +1,172 @@
 <template>
   <section class="w-full">
     <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"/>
+      <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 Information'" :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">
-
-      <ImageCropper :urlToImage="tournamentImage"
-                    :uploadImageName="uploadImageName"
-                    :uploadServer="uploadServer"
-                    :imageServer="imageServer"
-                    @update:url="handleNewImageUrl"/>
+      <ImageCropper
+        :urlToImage="tournamentImage"
+        :uploadImageName="uploadImageName"
+        :uploadServer="uploadServer"
+        :imageServer="imageServer"
+        @update:url="handleNewImageUrl"
+      />
     </div>
 
-    <TitledInput
-        :inputValue="tournamentName"
-        :invalid="isFieldInvalid('Name')"
-        :title="getValidationLabel('Name', '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="isFieldInvalid('Address')"
-          :text="getValidationLabel('Address', 'Location')"
-          :size="'sm'"
-          :weight="'normal'"
-          class="mb-1"
-          data-testid="text-address"
+      <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="isFieldInvalid('Address')"
-          addNewText="Add New"
-          @update:location="handleAddressUpdate"
-          @submit:location="handleAddressUpdate"
-          @submit:addNewAddress="handleAddNewAddress"
+        :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="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)"
+        <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="isFieldInvalid('TotalDays')"
-            :placeholder="'Number of Days'"
-            :inputType="'number'"
-            :title="getValidationLabel('TotalDays', '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="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)"
+      <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="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)"
-      />
+      <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"
-                  @add-new-person="handleAddNewPerson"
-                  @person-selected="handlePrimaryContactUpdate"/>
+      <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"
+        @add-new-person="handleAddNewPerson"
+        @person-selected="handlePrimaryContactUpdate"
+      />
     </div>
-
   </section>
 </template>
 
 <script>
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import FindLocation from "../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
-import DatePicker from "../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import TextBoxEditor from "../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
-import ImageCropper from "../../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
-import FindPerson from "../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import FindLocation from '../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue';
+import DatePicker from '../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import TextBoxEditor from '../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
+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', 'add:newPerson'],
+export default {
+  name: 'TournamentPageOne',
+  emits: ['update:tournament', 'update:image', 'update:address', 'add:newAddress', 'add:newPerson'],
   props: {
     tournament: {
       type: Object,
@@ -186,17 +215,17 @@ export default {
     TextBoxEditor
   },
   computed: {
-    tournamentImage(){
+    tournamentImage() {
       if (this.tournament.Images && this.tournament.Images.length > 0) {
         return this.tournament.Images[0].URL;
       }
       return '';
     },
     tournamentName() {
-      return this.tournament?.Name || "";
+      return this.tournament?.Name || '';
     },
     addressName() {
-      return this.tournament?.Address?.Name || "";
+      return this.tournament?.Address?.Name || '';
     },
     startDate() {
       return this.tournament?.StartDate || new Date();
@@ -204,48 +233,48 @@ export default {
     totalDays() {
       return this.tournament?.TotalDays || 1;
     },
-    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 });
-    },
+    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);
-    },
-    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}`;
-    }
-  }
-};
+    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>