@dcrackel/hematournamentui 1.0.699 → 1.0.701

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

@@ -1,28 +1,45 @@
-import EditEvents from './ListEvents.vue';
-import eventMockData from '../../../../mocks/eventMock.js';
-
-export default {
-    title: 'Templates/TournamentManagement/ListEvents',
-    component: EditEvents,
-    tags: ['autodocs'],
-    args: {
-        events: eventMockData,
-    },
-    argTypes: {
-    }
-};
-
-export const Default = {
-    args: {
-        tournamentId: 8,
-        events: eventMockData
-    }
-};
-
-
-export const NoEvents = {
-    args: {
-        tournamentId: 8,
-        events: []
-    }
-};
+import ListEvents from './ListEvents.vue';
+import eventMockData from '../../../../mocks/eventMock.js';
+
+export default {
+    title: 'Templates/TournamentManagement/ListEvents',
+    component: ListEvents,
+    tags: ['autodocs'],
+    args: {
+        tournamentId: 8,
+        events: eventMockData,
+    },
+    argTypes: {
+        tournamentId: { control: { type: 'number' } },
+        events: { control: { type: 'object' } },
+        'tab:menu-click': { action: 'tab:menu-click' },
+        manageEvent: { action: 'manageEvent' },
+        editEvent: { action: 'editEvent' },
+        addEvent: { action: 'addEvent' },
+        'delete:Event': { action: 'delete:Event' }
+    }
+};
+
+export const Default = {
+    args: {
+        tournamentId: 8,
+        events: eventMockData
+    }
+};
+
+export const NoEvents = {
+    args: {
+        tournamentId: 8,
+        events: []
+    }
+};
+
+export const CompletedEvents = {
+    args: {
+        tournamentId: 8,
+        events: eventMockData.map((event) => ({
+            ...event,
+            Status: 'completed'
+        }))
+    }
+};

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

@@ -1,9 +1,9 @@
 <template>
   <section class="mx-2 md:mx-4">
     <EditEventsTopMenu :currentTab="'Events'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
-  <div class="w-full flex flex-row justify-center">
-    <section class="w-full">
-      <div class="w-full flex flex-col justify-center items-center mb-6" style="text-align: center">
+  <div class="w-full flex flex-row justify-center">
+    <section class="w-full">
+      <div class="w-full flex flex-col justify-center items-center mb-6 text-center">
         <div v-if="events.length === 0">
           <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
           <BaseText :color="'primaryHighlight'" size=" " :text="'0 events added yet.'"
@@ -12,7 +12,7 @@
                     :weight="'normal'" data-testid="text-num-events" class="text-sm md:text-md" />
         </div>
 
-        <section v-for="event in events" class="w-full">
+        <section v-for="event in events" :key="event.EventId" class="w-full">
           <EventCard :event="event"
                      @edit="handleEdit(event.EventId)"
                      @manage="handleManageEvent(event.EventId)"
@@ -39,24 +39,30 @@ import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
 import {tournamentTabs} from "../../../Util/tabs.js";
 
-export default {
-  components: {
+export default {
+  name: 'ListEvents',
+  components: {
     EditEventsTopMenu,
     EventCard,
     BaseText,
     BaseButton
-  },
-  props: {
-    tournamentId: Number,
-    events: Array,
-  },
+  },
+  props: {
+    tournamentId: {
+      type: Number,
+      required: true
+    },
+    events: {
+      type: Array,
+      default: () => []
+    },
+  },
   emits: ['tab:menu-click', 'manageEvent', 'editEvent', 'addEvent', 'delete:Event'],
   data() {
     return {
-      emptyDesertIcon,
-      currentTab: 'Events',
-      tabs: tournamentTabs()
-    };
+      emptyDesertIcon,
+      tabs: tournamentTabs()
+    };
   },
   methods: {
     handleAddEvent() {
@@ -76,4 +82,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/stories/Templates/TournamentManagement/{TournamentMangement.stories.js → TournamentManagement.stories.js}

@@ -1,40 +1,60 @@
 import TournamentManagement from "./TournamentManagement.vue";
 import mockLocation from "../../../mocks/locationMock.js";
-import mockPersons from "../../../mocks/personsMock.js";
-import mockTournaments from "../../../mocks/tournamentMock.js";
-
-export default {
-    title: 'Templates/TournamentManagement',
-    component: TournamentManagement,
-    tags: ["autodocs"],
-    args: {
-        tournament: mockTournaments,
-        locations: mockLocation,
-        persons: mockPersons,
-        uploadImageName: 'tournament-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'https://meyersquaredimages.com/uploads/',
-    },
-    argTypes: {
-        tournament: {
-            control: { type: "object" },
+import mockPersons from "../../../mocks/personsMock.js";
+import mockTournaments from "../../../mocks/tournamentMock.js";
+
+const existingTournament = {
+    ...mockTournaments[0],
+    HostedOnM2: true,
+    ResultsEnabled: false,
+    Visibility: 'Open',
+    WaiverScope: 'None',
+};
+
+export default {
+    title: 'Templates/TournamentManagement',
+    component: TournamentManagement,
+    tags: ["autodocs"],
+    args: {
+        tournament: existingTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+        uploadImageName: 'tournament-test',
+        uploadServer: 'http://localhost:3000/api/upload/',
+        imageServer: 'https://meyersquaredimages.com/uploads/',
+        showTab: 'Basic',
+        userLevel: 'Club',
+        submitButtonLabel: 'Save',
+    },
+    argTypes: {
+        tournament: {
+            control: { type: "object" },
         },
         locations: {
             control: { type: "object" },
         },
-        persons: {
-            control: { type: "object" },
-        },
-    },
-};
-
-export const Default = {
-    args: {
-        tournament: mockTournaments[0],
-        locations: mockLocation,
-        persons: mockPersons,
-    },
-};
+        persons: {
+            control: { type: "object" },
+        },
+        showTab: {
+            control: { type: "text" },
+        },
+        userLevel: {
+            control: { type: "text" },
+        },
+        submitButtonLabel: {
+            control: { type: "text" },
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        tournament: existingTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+    },
+};
 
 export const EmptyTournament = {
     args: {
@@ -44,11 +64,20 @@ export const EmptyTournament = {
     },
 };
 
-export const StartOnDetails = {
-    args: {
-        tournament: mockTournaments,
-        locations: mockLocation,
-        persons: mockPersons,
-        showTab: "Hosting",
-    },
-};
+export const StartOnDetails = {
+    args: {
+        tournament: existingTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+        showTab: "Hosting",
+    },
+};
+
+export const Saving = {
+    args: {
+        tournament: existingTournament,
+        locations: mockLocation,
+        persons: mockPersons,
+        submitButtonLabel: "Saving...",
+    },
+};

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>