@dcrackel/hematournamentui 1.0.699 → 1.0.702

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

@@ -11,10 +11,11 @@
                        :uploadServer="uploadServer"
                        :isNewTournament="isNewTournament"
                        :userLevel="userLevel"
-                       @add:newAddress="handleAddNewAddress"
-                       @update:address="handleAddressUpdate"
-                       @update:image="handleNewImageUrl"
-                       @update:tournament="updateTournament"
+                       @add:newAddress="handleAddNewAddress"
+                       @add:newPerson="handleAddNewPerson"
+                       @update:address="handleAddressUpdate"
+                       @update:image="handleNewImageUrl"
+                       @update:tournament="updateTournament"
     />
 
     <TournamentPageTwo v-if="currentTab === 'Hosting'"
@@ -30,43 +31,37 @@
       <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=selected 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="saveButtonLabel" selected=selected 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="saveButtonLabel" selected=selected 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 BaseText from "../../Atoms/Text/BaseText.vue";
-import ImageCropper from "../../Organisms/ComplexInputs/ImageCropper/ImageCropper.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/TouranmentPageTwo.vue";
-import {validateField} from "../../Util/Validations/TournamentFieldsValidations.js";
-import BaseModal from "../../Molecules/Modals/BaseModal/BaseModal.vue";
-
-export default {
-  title: 'TournamentManagement',
-  components: {
-    TournamentPageTwo,
-    EditEventsTopMenu,
-    BaseButton,
-    ImageCropper,
-    BaseText,
-    TournamentPageOne,
-    BaseModal
-  },
-  emits: ['submit:tournament', 'cancel', 'add:newAddress', '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,
@@ -97,34 +92,42 @@ export default {
       type: String,
       default: 'Basic'
     },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  data() {
-    return {
-      currentTab: this.showTab,
-      localTournament: this.tournament,
-      isNewTournament: true,
-      saveButtonLabel: 'Save',
-      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: ""},
-        WaiverScope: "None",
-      },
-    };
-  },
-  watch: {
-    'localTournament.StartDate': 'setEndDate',
-    'localTournament.TotalDays': 'setEndDate',
-  },
-  mounted() {
-    this.checkIfNewTournament();
+    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() {
@@ -137,60 +140,81 @@ export default {
     },
   },
   methods: {
-    tournamentTabs,
-    handleTab(tab) {
-      this.saveButtonLabel = 'Save';
-      this.currentTab = tab;
-      this.$emit('tab:menu-click', tab);
-    },
-    checkIfNewTournament() {
-      if (!this.tournament || Object.keys(this.tournament).length === 0 || !this.tournament.Name) {
-        this.isNewTournament = true;
-        this.localTournament = {
-          TournamentId: 0,
-          Name: "",
-          Address: "",
-          TotalDays: 1,
-          StartDate: new Date().toISOString().slice(0, 10),
-          RegistrationCutOff: new Date().toISOString().slice(0, 10),
-          Description: "",
-          HostedOnM2: false,
-          Visibility: "Open"
-        };
-        return;
-      }
-
-      this.isNewTournament = false;
-
-      const startDate = new Date(this.tournament.StartDate);
-      const endDate = new Date(this.tournament.EndDate);
-      const TotalDays = (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime()))
-          ? Math.max(1, (endDate - startDate) / (1000 * 60 * 60 * 24) + 1)
-          : 1;
-
-      this.localTournament = {...this.tournament, TotalDays, WaiverScope: this.tournament.WaiverScope ?? "None",};
-      console.log(this.localTournament)
-      this.setEndDate();
-    },
-    handleAddNewAddress(newAddress) {
-      this.localTournament.AddressId = 0;
-      this.localTournament.Address = newAddress;
-
-      this.$emit('add:newAddress', newAddress);
-    },
-    handleAddressUpdate(updatedAddress) {
-      if (updatedAddress) {
-        this.localTournament.AddressId = updatedAddress.AddressId
-        this.localTournament.Address = updatedAddress;
-        this.$emit('update:address', updatedAddress);
-        this.validation.Address = validateField('Address', updatedAddress);
-      }
-
-      if (!updatedAddress) {
-        this.localTournament.AddressId = 0;
-        this.localTournament.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 => {
@@ -198,32 +222,60 @@ export default {
       });
       return !Object.values(this.validation).some(field => field.invalid);
     },
-    handleNewImageUrl(url) {
-      this.tournament.imageLink = url;
-      this.$emit('update:image', url);
-    },
-    updateTournament(updatedData) {
-      this.localTournament = {...this.localTournament, ...updatedData};
-      Object.keys(updatedData).forEach(field => {
-        if (this.validation[field]) {
-          this.validation[field] = validateField(field, updatedData[field]);
-        }
-      });
-    },
-    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 days = Math.max(1, Number(this.localTournament.TotalDays) || 1);
-      this.localTournament.EndDate = this.addDaysInclusiveYMD(this.localTournament.StartDate, days);
-    },
-    handleCancel() {
-      this.$emit('edit: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 = {
@@ -253,17 +305,11 @@ export default {
     handleBack() {
       this.transition('BACK');
     },
-    handleSubmit() {
-      console.log(this.tournament)
-      if (this.validateAllFields()) {
-        this.saveButtonLabel = 'Saving...';
-        setTimeout(() => {
-          this.saveButtonLabel = 'Saved!';
-        }, 2000);
-
-        this.$emit('submit:tournament', this.localTournament);
-      }
-    },
+    handleSubmit() {
+      if (this.validateAllFields()) {
+        this.$emit('submit:tournament', this.localTournament);
+      }
+    },
   },
 };
-</script>
+</script>

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