@dcrackel/hematournamentui 1.0.708 → 1.0.710

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

@@ -1,360 +1,363 @@
-<template>
-  <div class="bg-neutral w-full">
-    <EditEventsTopMenu :tabs="filteredTabs" :currentTab="currentTab" @tabMenuClick="handleTab" />
-    <TournamentPageOne
-      v-if="currentTab === 'Basic'"
-      :tournament="localTournament"
-      :locations="locations"
-      :persons="personsList"
-      :validation="validation"
-      :imageServer="imageServer"
-      :uploadImageName="uploadImageName"
-      :uploadServer="uploadServer"
-      :isNewTournament="isNewTournament"
-      :userLevel="userLevel"
-      @add:newAddress="handleAddNewAddress"
-      @add:newPerson="handleAddNewPerson"
-      @update:address="handleAddressUpdate"
-      @update:image="handleNewImageUrl"
-      @update:tournament="updateTournament"
-    />
-
-    <TournamentPageTwo
-      v-if="currentTab === 'Hosting'"
-      :tournament="localTournament"
-      :isNewTournament="isNewTournament"
-      @update:tournament="updateTournament"
-      @go:results-import="handleTab('ResultsImport')"
-    />
-
-    <div v-if="isNewTournament" class="flex flex-row justify-center h-12 mt-4">
-      <BaseButton
-        v-if="currentTab === 'Basic'"
-        class="w-1/2 ml-1 h-12"
-        color="neutral"
-        label="Cancel"
-        size="sm"
-        type="primary"
-        @buttonClick="handleCancel"
-      />
-      <BaseButton
-        v-if="currentTab === 'Hosting'"
-        class="w-1/2 ml-1 h-12"
-        color="neutral"
-        label="Back"
-        size="sm"
-        type="primary"
-        @buttonClick="handleBack"
-      />
-
-      <BaseButton
-        v-if="currentTab === 'Basic'"
-        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
-        color="neutral"
-        label="Next"
-        :selected="true"
-        size="sm"
-        type="primary"
-        @buttonClick="handleNext"
-      />
-      <BaseButton
-        v-if="currentTab === 'Hosting'"
-        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
-        color="neutral"
-        :label="submitButtonLabel"
-        :selected="true"
-        size="sm"
-        type="primary"
-        @buttonClick="handleSubmit"
-      />
-    </div>
-
-    <div v-if="!isNewTournament" class="flex flex-row justify-center h-12 mt-4">
-      <BaseButton
-        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
-        color="neutral"
-        :label="submitButtonLabel"
-        :selected="true"
-        size="sm"
-        type="primary"
-        @buttonClick="handleSubmit"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import TournamentPageOne from './TournamentPageOne/TournamentPageOne.vue';
-import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import EditEventsTopMenu from '../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
-import { tournamentTabs } from '../../Util/tabs.js';
-import TournamentPageTwo from './TournamentPageTwo/TournamentPageTwo.vue';
-import { validateField } from '../../Util/Validations/TournamentFieldsValidations.js';
-
-export default {
-  title: 'TournamentManagement',
-  components: {
-    TournamentPageTwo,
-    EditEventsTopMenu,
-    BaseButton,
-    TournamentPageOne
-  },
-  emits: [
-    'submit:tournament',
-    'cancel',
-    'add:newAddress',
-    'add:newPerson',
-    'update:address',
-    'update:image',
-    'tab:menu-click'
-  ],
-  props: {
-    tournament: {
-      type: Object,
-      required: false
-    },
-    locations: {
-      type: Array,
-      required: true
-    },
-    persons: {
-      type: [Array, Object],
-      required: false,
-      default: () => []
-    },
-    uploadImageName: {
-      type: String,
-      default: 'default-image'
-    },
-    uploadServer: {
-      type: String,
-      default: ''
-    },
-    imageServer: {
-      type: String,
-      default: ''
-    },
-    showTab: {
-      type: String,
-      default: 'Basic'
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    },
-    submitButtonLabel: {
-      type: String,
-      default: 'Save'
-    }
-  },
-  data() {
-    return {
-      currentTab: this.showTab,
-      localTournament: this.createNewTournamentDraft(),
-      isNewTournament: true,
-      validation: {
-        Name: { invalid: false, message: '' },
-        Address: { invalid: false, message: '' },
-        StartDate: { invalid: false, message: '' },
-        TotalDays: { invalid: false, message: '' },
-        RegistrationCutOff: { invalid: false, message: '' },
-        Description: { invalid: false, message: '' }
-      }
-    };
-  },
-  watch: {
-    tournament: {
-      handler: 'initializeTournamentDraft'
-    },
-    showTab(tab) {
-      this.currentTab = tab;
-    },
-    'localTournament.StartDate': 'setEndDate',
-    'localTournament.TotalDays': 'setEndDate'
-  },
-  mounted() {
-    this.initializeTournamentDraft();
-  },
-  computed: {
-    filteredTabs() {
-      return this.isNewTournament ? tournamentTabs().filter(tab => tab.label !== 'Events') : tournamentTabs();
-    },
-    personsList() {
-      return Array.isArray(this.persons) ? this.persons : this.persons ? [this.persons] : [];
-    }
-  },
-  methods: {
-    tournamentTabs,
-    handleTab(tab) {
-      this.currentTab = tab;
-      this.$emit('tab:menu-click', tab);
-    },
-    initializeTournamentDraft() {
-      if (!this.tournament || Object.keys(this.tournament).length === 0 || !this.tournament.Name) {
-        this.isNewTournament = true;
-        this.localTournament = this.createNewTournamentDraft();
-        return;
-      }
-
-      this.isNewTournament = false;
-      this.localTournament = this.createExistingTournamentDraft(this.tournament);
-      this.setEndDate();
-    },
-    createNewTournamentDraft() {
-      const today = new Date().toISOString().slice(0, 10);
-
-      return {
-        TournamentId: 0,
-        Name: '',
-        Address: '',
-        TotalDays: 1,
-        StartDate: today,
-        RegistrationCutOff: today,
-        Description: '',
-        HostedOnM2: false,
-        ResultsEnabled: false,
-        Visibility: 'Open',
-        WaiverScope: 'None'
-      };
-    },
-    createExistingTournamentDraft(tournament) {
-      const tournamentDraft = this.cloneTournamentData(tournament);
-      const startDate = new Date(tournamentDraft.StartDate);
-      const endDate = new Date(tournamentDraft.EndDate);
-      const TotalDays =
-        !isNaN(startDate.getTime()) && !isNaN(endDate.getTime())
-          ? Math.max(1, (endDate - startDate) / (1000 * 60 * 60 * 24) + 1)
-          : 1;
-
-      return {
-        ...tournamentDraft,
-        TotalDays,
-        StartDate: this.formatDateOnly(tournamentDraft.StartDate),
-        EndDate: this.formatDateOnly(tournamentDraft.EndDate),
-        RegistrationCutOff: this.formatDateOnly(tournamentDraft.RegistrationCutOff),
-        Visibility: tournamentDraft.Visibility ?? 'Open',
-        WaiverScope: tournamentDraft.WaiverScope ?? 'None',
-        ResultsEnabled: tournamentDraft.ResultsEnabled ?? false
-      };
-    },
-    cloneTournamentData(tournament) {
-      return JSON.parse(JSON.stringify(tournament));
-    },
-    handleAddNewAddress(newAddress) {
-      this.updateTournament({ AddressId: 0, Address: newAddress });
-      this.$emit('add:newAddress', newAddress);
-    },
-    handleAddNewPerson(personName) {
-      this.$emit('add:newPerson', personName);
-    },
-    handleAddressUpdate(updatedAddress) {
-      if (updatedAddress) {
-        this.updateTournament({
-          AddressId: updatedAddress.AddressId,
-          Address: updatedAddress
-        });
-        this.$emit('update:address', updatedAddress);
-        this.validation.Address = validateField('Address', updatedAddress);
-        return;
-      }
-
-      this.updateTournament({ AddressId: 0, Address: '' });
-    },
-    validateAllFields() {
-      const fieldsToValidate = ['Name', 'TotalDays', 'Address'];
-      fieldsToValidate.forEach(field => {
-        this.validation[field] = validateField(field, this.localTournament[field]);
-      });
-      return !Object.values(this.validation).some(field => field.invalid);
-    },
-    handleNewImageUrl(imageUpdate) {
-      this.updateTournament(imageUpdate);
-      this.$emit('update:image', imageUpdate);
-    },
-    updateTournament(updatedData) {
-      const normalizedData = this.normalizeTournamentUpdate(updatedData);
-      this.localTournament = { ...this.localTournament, ...normalizedData };
-      Object.keys(normalizedData).forEach(field => {
-        if (this.validation[field]) {
-          this.validation[field] = validateField(field, normalizedData[field]);
-        }
-      });
-    },
-    normalizeTournamentUpdate(updatedData) {
-      const normalizedData = { ...updatedData };
-      const dateFields = ['StartDate', 'EndDate', 'RegistrationCutOff'];
-
-      dateFields.forEach(field => {
-        if (field in normalizedData) {
-          normalizedData[field] = this.formatDateOnly(normalizedData[field]);
-        }
-      });
-
-      return normalizedData;
-    },
-    formatDateOnly(dateValue) {
-      if (!dateValue) return '';
-      if (typeof dateValue === 'string') return dateValue.slice(0, 10);
-
-      const date = new Date(dateValue);
-      if (isNaN(date.getTime())) return '';
-
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      return `${year}-${month}-${day}`;
-    },
-    addDaysInclusiveYMD(startYmd, totalDays) {
-      const [y, m, d] = startYmd.split('-').map(Number);
-      const start = new Date(Date.UTC(y, m - 1, d));
-      const end = new Date(start);
-      end.setUTCDate(end.getUTCDate() + Math.max(1, Number(totalDays) || 1) - 1);
-      return end.toISOString().slice(0, 10); // 'YYYY-MM-DD'
-    },
-    setEndDate() {
-      if (!this.localTournament?.StartDate) return;
-      const startDate = this.formatDateOnly(this.localTournament.StartDate);
-      if (!startDate) return;
-
-      const days = Math.max(1, Number(this.localTournament.TotalDays) || 1);
-      this.localTournament.EndDate = this.addDaysInclusiveYMD(startDate, days);
-    },
-    handleCancel() {
-      this.$emit('cancel');
-    },
-    transition(action) {
-      const table = {
-        Basic: {
-          NEXT: { to: 'Hosting', guard: () => this.validateAllFields() },
-          BACK: { to: 'Hosting' }
-        },
-        Hosting: {
-          NEXT: { to: 'Basic' },
-          BACK: { to: 'Basic' }
-        }
-      };
-
-      const state = table[this.currentTab];
-      if (!state) return;
-
-      const rule = state[action];
-      if (!rule) return;
-
-      if (rule.guard && !rule.guard()) return;
-
-      this.currentTab = typeof rule.to === 'function' ? rule.to(this.currentTab) : rule.to;
-    },
-    handleNext() {
-      this.transition('NEXT');
-    },
-    handleBack() {
-      this.transition('BACK');
-    },
-    handleSubmit() {
-      if (this.validateAllFields()) {
-        this.$emit('submit:tournament', this.localTournament);
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div class="bg-neutral w-full">
+    <EditEventsTopMenu :tabs="filteredTabs" :currentTab="currentTab" @tabMenuClick="handleTab" />
+    <TournamentPageOne
+      v-if="currentTab === 'Basic'"
+      :tournament="localTournament"
+      :locations="locations"
+      :persons="personsList"
+      :validation="validation"
+      :imageServer="imageServer"
+      :uploadImageName="uploadImageName"
+      :uploadServer="uploadServer"
+      :isNewTournament="isNewTournament"
+      :userLevel="userLevel"
+      @add:newAddress="handleAddNewAddress"
+      @add:newPerson="handleAddNewPerson"
+      @update:address="handleAddressUpdate"
+      @update:image="handleNewImageUrl"
+      @update:tournament="updateTournament"
+    />
+
+    <TournamentPageTwo
+      v-if="currentTab === 'Hosting'"
+      :tournament="localTournament"
+      :isNewTournament="isNewTournament"
+      @update:tournament="updateTournament"
+      @go:results-import="handleTab('ResultsImport')"
+    />
+
+    <div v-if="isNewTournament" class="flex flex-row justify-center h-12 mt-4">
+      <BaseButton
+        v-if="currentTab === 'Basic'"
+        class="w-1/2 ml-1 h-12"
+        color="neutral"
+        label="Cancel"
+        size="sm"
+        type="primary"
+        @buttonClick="handleCancel"
+      />
+      <BaseButton
+        v-if="currentTab === 'Hosting'"
+        class="w-1/2 ml-1 h-12"
+        color="neutral"
+        label="Back"
+        size="sm"
+        type="primary"
+        @buttonClick="handleBack"
+      />
+
+      <BaseButton
+        v-if="currentTab === 'Basic'"
+        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
+        color="neutral"
+        label="Next"
+        :selected="true"
+        size="sm"
+        type="primary"
+        @buttonClick="handleNext"
+      />
+      <BaseButton
+        v-if="currentTab === 'Hosting'"
+        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
+        color="neutral"
+        :label="submitButtonLabel"
+        :selected="true"
+        size="sm"
+        type="primary"
+        @buttonClick="handleSubmit"
+      />
+    </div>
+
+    <div v-if="!isNewTournament" class="flex flex-row justify-center h-12 mt-4">
+      <BaseButton
+        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
+        color="neutral"
+        :label="submitButtonLabel"
+        :selected="true"
+        size="sm"
+        type="primary"
+        @buttonClick="handleSubmit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TournamentPageOne from './TournamentPageOne/TournamentPageOne.vue';
+import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import EditEventsTopMenu from '../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import { tournamentTabs } from '../../Util/tabs.js';
+import TournamentPageTwo from './TournamentPageTwo/TournamentPageTwo.vue';
+import { validateField } from '../../Util/Validations/TournamentFieldsValidations.js';
+
+export default {
+  title: 'TournamentManagement',
+  components: {
+    TournamentPageTwo,
+    EditEventsTopMenu,
+    BaseButton,
+    TournamentPageOne
+  },
+  emits: [
+    'submit:tournament',
+    'cancel',
+    'add:newAddress',
+    'add:newPerson',
+    'update:address',
+    'update:image',
+    'tab:menu-click'
+  ],
+  props: {
+    tournament: {
+      type: Object,
+      required: false
+    },
+    locations: {
+      type: Array,
+      required: true
+    },
+    persons: {
+      type: [Array, Object],
+      required: false,
+      default: () => []
+    },
+    uploadImageName: {
+      type: String,
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: ''
+    },
+    imageServer: {
+      type: String,
+      default: ''
+    },
+    showTab: {
+      type: String,
+      default: 'Basic'
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    },
+    submitButtonLabel: {
+      type: String,
+      default: 'Save'
+    }
+  },
+  data() {
+    return {
+      currentTab: this.showTab,
+      localTournament: this.createNewTournamentDraft(),
+      isNewTournament: true,
+      validation: {
+        Name: { invalid: false, message: '' },
+        BasePrice: { invalid: false, message: '' },
+        Address: { invalid: false, message: '' },
+        StartDate: { invalid: false, message: '' },
+        TotalDays: { invalid: false, message: '' },
+        RegistrationCutOff: { invalid: false, message: '' },
+        Description: { invalid: false, message: '' }
+      }
+    };
+  },
+  watch: {
+    tournament: {
+      handler: 'initializeTournamentDraft'
+    },
+    showTab(tab) {
+      this.currentTab = tab;
+    },
+    'localTournament.StartDate': 'setEndDate',
+    'localTournament.TotalDays': 'setEndDate'
+  },
+  mounted() {
+    this.initializeTournamentDraft();
+  },
+  computed: {
+    filteredTabs() {
+      return this.isNewTournament ? tournamentTabs().filter(tab => tab.label !== 'Events') : tournamentTabs();
+    },
+    personsList() {
+      return Array.isArray(this.persons) ? this.persons : this.persons ? [this.persons] : [];
+    }
+  },
+  methods: {
+    tournamentTabs,
+    handleTab(tab) {
+      this.currentTab = tab;
+      this.$emit('tab:menu-click', tab);
+    },
+    initializeTournamentDraft() {
+      if (!this.tournament || Object.keys(this.tournament).length === 0 || !this.tournament.Name) {
+        this.isNewTournament = true;
+        this.localTournament = this.createNewTournamentDraft();
+        return;
+      }
+
+      this.isNewTournament = false;
+      this.localTournament = this.createExistingTournamentDraft(this.tournament);
+      this.setEndDate();
+    },
+    createNewTournamentDraft() {
+      const today = new Date().toISOString().slice(0, 10);
+
+      return {
+        TournamentId: 0,
+        Name: '',
+        BasePrice: '',
+        Address: '',
+        TotalDays: 1,
+        StartDate: today,
+        RegistrationCutOff: today,
+        Description: '',
+        HostedOnM2: false,
+        ResultsEnabled: false,
+        Visibility: 'Open',
+        WaiverScope: 'None'
+      };
+    },
+    createExistingTournamentDraft(tournament) {
+      const tournamentDraft = this.cloneTournamentData(tournament);
+      const startDate = new Date(tournamentDraft.StartDate);
+      const endDate = new Date(tournamentDraft.EndDate);
+      const TotalDays =
+        !isNaN(startDate.getTime()) && !isNaN(endDate.getTime())
+          ? Math.max(1, (endDate - startDate) / (1000 * 60 * 60 * 24) + 1)
+          : 1;
+
+      return {
+        ...tournamentDraft,
+        BasePrice: tournamentDraft.BasePrice ?? '',
+        TotalDays,
+        StartDate: this.formatDateOnly(tournamentDraft.StartDate),
+        EndDate: this.formatDateOnly(tournamentDraft.EndDate),
+        RegistrationCutOff: this.formatDateOnly(tournamentDraft.RegistrationCutOff),
+        Visibility: tournamentDraft.Visibility ?? 'Open',
+        WaiverScope: tournamentDraft.WaiverScope ?? 'None',
+        ResultsEnabled: tournamentDraft.ResultsEnabled ?? false
+      };
+    },
+    cloneTournamentData(tournament) {
+      return JSON.parse(JSON.stringify(tournament));
+    },
+    handleAddNewAddress(newAddress) {
+      this.updateTournament({ AddressId: 0, Address: newAddress });
+      this.$emit('add:newAddress', newAddress);
+    },
+    handleAddNewPerson(personName) {
+      this.$emit('add:newPerson', personName);
+    },
+    handleAddressUpdate(updatedAddress) {
+      if (updatedAddress) {
+        this.updateTournament({
+          AddressId: updatedAddress.AddressId,
+          Address: updatedAddress
+        });
+        this.$emit('update:address', updatedAddress);
+        this.validation.Address = validateField('Address', updatedAddress);
+        return;
+      }
+
+      this.updateTournament({ AddressId: 0, Address: '' });
+    },
+    validateAllFields() {
+      const fieldsToValidate = ['Name', 'BasePrice', 'TotalDays', 'Address'];
+      fieldsToValidate.forEach(field => {
+        this.validation[field] = validateField(field, this.localTournament[field]);
+      });
+      return !Object.values(this.validation).some(field => field.invalid);
+    },
+    handleNewImageUrl(imageUpdate) {
+      this.updateTournament(imageUpdate);
+      this.$emit('update:image', imageUpdate);
+    },
+    updateTournament(updatedData) {
+      const normalizedData = this.normalizeTournamentUpdate(updatedData);
+      this.localTournament = { ...this.localTournament, ...normalizedData };
+      Object.keys(normalizedData).forEach(field => {
+        if (this.validation[field]) {
+          this.validation[field] = validateField(field, normalizedData[field]);
+        }
+      });
+    },
+    normalizeTournamentUpdate(updatedData) {
+      const normalizedData = { ...updatedData };
+      const dateFields = ['StartDate', 'EndDate', 'RegistrationCutOff'];
+
+      dateFields.forEach(field => {
+        if (field in normalizedData) {
+          normalizedData[field] = this.formatDateOnly(normalizedData[field]);
+        }
+      });
+
+      return normalizedData;
+    },
+    formatDateOnly(dateValue) {
+      if (!dateValue) return '';
+      if (typeof dateValue === 'string') return dateValue.slice(0, 10);
+
+      const date = new Date(dateValue);
+      if (isNaN(date.getTime())) return '';
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    addDaysInclusiveYMD(startYmd, totalDays) {
+      const [y, m, d] = startYmd.split('-').map(Number);
+      const start = new Date(Date.UTC(y, m - 1, d));
+      const end = new Date(start);
+      end.setUTCDate(end.getUTCDate() + Math.max(1, Number(totalDays) || 1) - 1);
+      return end.toISOString().slice(0, 10); // 'YYYY-MM-DD'
+    },
+    setEndDate() {
+      if (!this.localTournament?.StartDate) return;
+      const startDate = this.formatDateOnly(this.localTournament.StartDate);
+      if (!startDate) return;
+
+      const days = Math.max(1, Number(this.localTournament.TotalDays) || 1);
+      this.localTournament.EndDate = this.addDaysInclusiveYMD(startDate, days);
+    },
+    handleCancel() {
+      this.$emit('cancel');
+    },
+    transition(action) {
+      const table = {
+        Basic: {
+          NEXT: { to: 'Hosting', guard: () => this.validateAllFields() },
+          BACK: { to: 'Hosting' }
+        },
+        Hosting: {
+          NEXT: { to: 'Basic' },
+          BACK: { to: 'Basic' }
+        }
+      };
+
+      const state = table[this.currentTab];
+      if (!state) return;
+
+      const rule = state[action];
+      if (!rule) return;
+
+      if (rule.guard && !rule.guard()) return;
+
+      this.currentTab = typeof rule.to === 'function' ? rule.to(this.currentTab) : rule.to;
+    },
+    handleNext() {
+      this.transition('NEXT');
+    },
+    handleBack() {
+      this.transition('BACK');
+    },
+    handleSubmit() {
+      if (this.validateAllFields()) {
+        this.$emit('submit:tournament', { ...this.localTournament, BasePrice: Number(this.localTournament.BasePrice) });
+      }
+    }
+  }
+};
+</script>