@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,67 +1,113 @@
 <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"
+    <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')"
+    <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 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>
+      <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'],
+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,
@@ -92,129 +138,128 @@ export default {
       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();
+    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();
+      return this.isNewTournament ? tournamentTabs().filter(tab => tab.label !== 'Events') : tournamentTabs();
     },
     personsList() {
-      return Array.isArray(this.persons) ? this.persons : (this.persons ? [this.persons] : []);
-    },
+      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: "" });
-    },
+    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 => {
@@ -222,71 +267,71 @@ export default {
       });
       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));
+    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');
+    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'},
+          NEXT: { to: 'Hosting', guard: () => this.validateAllFields() },
+          BACK: { to: 'Hosting' }
         },
         Hosting: {
-          NEXT: {to: 'Basic'},
-          BACK: {to: 'Basic'},
-        },
+          NEXT: { to: 'Basic' },
+          BACK: { to: 'Basic' }
+        }
       };
 
       const state = table[this.currentTab];
@@ -305,11 +350,11 @@ export default {
     handleBack() {
       this.transition('BACK');
     },
-    handleSubmit() {
-      if (this.validateAllFields()) {
-        this.$emit('submit:tournament', this.localTournament);
-      }
-    },
-  },
+    handleSubmit() {
+      if (this.validateAllFields()) {
+        this.$emit('submit:tournament', this.localTournament);
+      }
+    }
+  }
 };
-</script>
+</script>