@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,307 +1,307 @@
-<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"
-      />
-    </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>
-    <div class="w-full flex flex-row justify-center my-4">
-      <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="basePrice"
-      :invalid="isFieldInvalid('BasePrice')"
-      :title="getValidationLabel('BasePrice', 'Base Price')"
-      placeholder="0.00"
-      @update:value="handleBasePriceUpdate"
-      @focusout="handleBasePriceBlur"
-      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"
-      />
-      <FindLocation
-        :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)"
-        />
-      </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)"
-        />
-      </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)"
-      />
-    </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)"
-      />
-    </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"
-      />
-    </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';
-
-export default {
-  name: 'TournamentPageOne',
-  emits: ['update:tournament', 'update:image', 'update:address', 'add:newAddress', 'add:newPerson'],
-  props: {
-    tournament: {
-      type: Object,
-      required: true
-    },
-    locations: {
-      type: Array,
-      required: true
-    },
-    persons: {
-      type: Array,
-      required: true
-    },
-    validation: {
-      type: Object,
-      required: true
-    },
-    uploadImageName: {
-      type: String,
-      default: 't-default-image'
-    },
-    uploadServer: {
-      type: String,
-      default: ''
-    },
-    imageServer: {
-      type: String,
-      default: ''
-    },
-    isNewTournament: {
-      type: Boolean,
-      default: true
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  components: {
-    FindPerson,
-    ImageCropper,
-    BaseText,
-    DatePicker,
-    FindLocation,
-    TitledInput,
-    TextBoxEditor
-  },
-  data() {
-    return { basePriceDraft: null };
-  },
-  computed: {
-    tournamentImage() {
-      if (this.tournament.Images && this.tournament.Images.length > 0) {
-        return this.tournament.Images[0].URL;
-      }
-      return '';
-    },
-    tournamentName() {
-      return this.tournament?.Name || '';
-    },
-    basePrice() {
-      const price = this.tournament?.BasePrice ?? '';
-      if (price === '' || price === this.basePriceDraft) return price;
-      const amount = Number(price);
-      if (!Number.isFinite(amount)) return price;
-      return amount.toFixed(2);
-    },
-    addressName() {
-      return this.tournament?.Address?.Name || '';
-    },
-    startDate() {
-      return this.tournament?.StartDate || new Date();
-    },
-    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: {
-    handleBasePriceUpdate(value) {
-      this.basePriceDraft = value;
-      this.emitUpdate('BasePrice', value);
-    },
-    handleBasePriceBlur() {
-      this.basePriceDraft = null;
-    },
-    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}`;
-    }
-  }
-};
-</script>
+<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"
+      />
+    </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>
+    <div class="w-full flex flex-row justify-center my-4">
+      <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="basePrice"
+      :invalid="isFieldInvalid('BasePrice')"
+      :title="getValidationLabel('BasePrice', 'Base Price')"
+      placeholder="0.00"
+      @update:value="handleBasePriceUpdate"
+      @focusout="handleBasePriceBlur"
+      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"
+      />
+      <FindLocation
+        :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)"
+        />
+      </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)"
+        />
+      </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)"
+      />
+    </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)"
+      />
+    </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"
+      />
+    </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';
+
+export default {
+  name: 'TournamentPageOne',
+  emits: ['update:tournament', 'update:image', 'update:address', 'add:newAddress', 'add:newPerson'],
+  props: {
+    tournament: {
+      type: Object,
+      required: true
+    },
+    locations: {
+      type: Array,
+      required: true
+    },
+    persons: {
+      type: Array,
+      required: true
+    },
+    validation: {
+      type: Object,
+      required: true
+    },
+    uploadImageName: {
+      type: String,
+      default: 't-default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: ''
+    },
+    imageServer: {
+      type: String,
+      default: ''
+    },
+    isNewTournament: {
+      type: Boolean,
+      default: true
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    }
+  },
+  components: {
+    FindPerson,
+    ImageCropper,
+    BaseText,
+    DatePicker,
+    FindLocation,
+    TitledInput,
+    TextBoxEditor
+  },
+  data() {
+    return { basePriceDraft: null };
+  },
+  computed: {
+    tournamentImage() {
+      if (this.tournament.Images && this.tournament.Images.length > 0) {
+        return this.tournament.Images[0].URL;
+      }
+      return '';
+    },
+    tournamentName() {
+      return this.tournament?.Name || '';
+    },
+    basePrice() {
+      const price = this.tournament?.BasePrice ?? '';
+      if (price === '' || price === this.basePriceDraft) return price;
+      const amount = Number(price);
+      if (!Number.isFinite(amount)) return price;
+      return amount.toFixed(2);
+    },
+    addressName() {
+      return this.tournament?.Address?.Name || '';
+    },
+    startDate() {
+      return this.tournament?.StartDate || new Date();
+    },
+    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: {
+    handleBasePriceUpdate(value) {
+      this.basePriceDraft = value;
+      this.emitUpdate('BasePrice', value);
+    },
+    handleBasePriceBlur() {
+      this.basePriceDraft = null;
+    },
+    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}`;
+    }
+  }
+};
+</script>