@dcrackel/hematournamentui 1.0.699 → 1.0.701

package/src/stories/Templates/Assignment/Assignment.vue

@@ -9,8 +9,8 @@
       </div>
     </div>
 
-    <div v-if="filteredAssignments.length === 0" class="text-center mt-10">
-      <BaseText text="No Current Assignments" color="secondary" size="lg" weight="normal"/>
+    <div v-if="filteredAssignments.length === 0" class="text-center mt-10">
+      <BaseText :text="emptyAssignmentsText" color="secondary" size="lg" weight="normal"/>
     </div>
 
     <section v-if="filteredAssignments.length > 0">
@@ -40,10 +40,10 @@
           <div class="w-12 md:flex bg-poolSetup ml-2 px-4 py-2 rounded-lg">
             <BaseIcon :iconName="getStatusIcon(event)" size="md" color="quinary" :class="getIconClass(event)" />
           </div>
-          <div v-if="shouldShowButton(event) && showCurrent" class="w-12 ml-1">
-            <BaseButton v-if="shouldShowButton(event)" iconName="fa-right-from-line" :iconLeft="false" label="" size="md" type="primary" @buttonClick="forwardToEvent(event)" class="h-10 w-10 pr-4"/>
-          </div>
-          <span v-if="!shouldShowButton(event) && showCurrent" class="w-12 ml-1" />
+          <div v-if="canForwardToEvent(event)" class="w-12 ml-1">
+            <BaseButton iconName="fa-right-from-line" :iconLeft="false" label="" size="md" type="primary" @buttonClick="forwardToEvent(event)" class="h-10 w-10 pr-4"/>
+          </div>
+          <span v-if="shouldReserveForwardActionSpace(event)" class="w-12 ml-1" />
         </section>
       </div>
     </div>
@@ -91,8 +91,10 @@ const statusIconClasses = {
   completed: 'mt-0.5'
 };
 
+const actionableStatuses = ['live', 'results', 'de'];
+
 export default {
-  name: "TournamentAssignments",
+  name: "Assignment",
   emits: ['forwardToEvent', 'refreshAssignments'],
   components: {BaseIcon, BaseText, BaseButton},
   props: {
@@ -106,23 +108,44 @@ export default {
       showCurrent: true,
     };
   },
-  computed: {
-    filteredAssignments() {
-      const today = new Date();
-      return this.assignments.filter((tournament) => {
-        const tournamentEndDate = new Date(tournament.EndDate);
-        return this.showCurrent
-            ? tournamentEndDate >= today
-            : tournamentEndDate < today;
-      });
-    },
-  },
-  methods: {
-    getTournamentArtworkURL(tournament) {
-      return tournament.Images?.URL || defaultImage;
-    },
-    formatEventDate(date, time) {
-      const eventDate = new Date(`${date}T${time}`);
+  computed: {
+    filteredAssignments() {
+      const today = this.getStartOfDay(new Date());
+      return this.assignments.filter((tournament) => {
+        const tournamentEndDate = this.getEndOfDay(tournament.EndDate);
+        return this.showCurrent
+            ? tournamentEndDate >= today
+            : tournamentEndDate < today;
+      });
+    },
+    emptyAssignmentsText() {
+      return this.showCurrent ? 'No Current Assignments' : 'No Past Assignments';
+    },
+  },
+  methods: {
+    getTournamentArtworkURL(tournament) {
+      if (Array.isArray(tournament.Images)) {
+        const image = tournament.Images.find((item) => this.getImageUrl(item));
+        return this.getImageUrl(image) || defaultImage;
+      }
+
+      return this.getImageUrl(tournament.Images) || defaultImage;
+    },
+    getImageUrl(image) {
+      return image?.URL || image?.Url || image?.url;
+    },
+    getStartOfDay(date) {
+      const normalizedDate = new Date(date);
+      normalizedDate.setHours(0, 0, 0, 0);
+      return normalizedDate;
+    },
+    getEndOfDay(date) {
+      const normalizedDate = new Date(date);
+      normalizedDate.setHours(23, 59, 59, 999);
+      return normalizedDate;
+    },
+    formatEventDate(date, time) {
+      const eventDate = new Date(`${date}T${time}`);
       const options = {weekday: 'long', hour: 'numeric', minute: '2-digit', hour12: true};
       return eventDate.toLocaleDateString('en-US', options);
     },
@@ -131,24 +154,29 @@ export default {
     },
     getIconStyle(event) {
       return roleIconStyles[event.Role] || 'fa-solid';
-    },
-    shouldShowButton(event) {
-      const eventStatus = event.Status.toLowerCase();
-      return eventStatus === "live" || eventStatus === "results" || eventStatus === "de";
-    },
-    formatTournamentDates(startDate, endDate) {
-      const today = new Date();
-
-      const formatDate = (date, includeYear) => {
-        const d = new Date(date);
+    },
+    shouldShowButton(event) {
+      return actionableStatuses.includes(this.getNormalizedStatus(event));
+    },
+    canForwardToEvent(event) {
+      return this.showCurrent && this.shouldShowButton(event);
+    },
+    shouldReserveForwardActionSpace(event) {
+      return this.showCurrent && !this.shouldShowButton(event);
+    },
+    formatTournamentDates(startDate, endDate) {
+      const today = this.getStartOfDay(new Date());
+
+      const formatDate = (date, includeYear) => {
+        const d = new Date(date);
         const day = d.getDate();
         const month = d.toLocaleString('default', { month: 'short' });
         const suffix = this.getDaySuffix(day);
         const year = includeYear ? ` ${d.getFullYear()}` : '';
-        return `${month} ${day}${suffix}${year}`;
-      };
-
-      const includeYear = new Date(endDate) < today;
+        return `${month} ${day}${suffix}${year}`;
+      };
+
+      const includeYear = this.getEndOfDay(endDate) < today;
 
       if (startDate === endDate) {
         return formatDate(startDate, includeYear);
@@ -160,11 +188,14 @@ export default {
       if (day > 3 && day < 21) return 'th'; // General rule
       return daySuffixes[day % 10] || 'th';
     },
+    getNormalizedStatus(event) {
+      return String(event?.Status || '').toLowerCase();
+    },
     getStatusIcon(event) {
-      return statusIcons[event.Status] || 'fa-circle-question';
+      return statusIcons[this.getNormalizedStatus(event)] || 'fa-circle-question';
     },
     getIconClass(event) {
-      return statusIconClasses[event.Status] || '';
+      return statusIconClasses[this.getNormalizedStatus(event)] || '';
     },
     forwardToEvent(event) {
       this.$emit('forwardToEvent', event);

package/src/stories/Templates/ClubManagement/ClubBasic/ClubBasic.stories.js

@@ -1,9 +1,21 @@
-import ClubBasic from './ClubBasic.vue';
-import mockLocations from '../../../../mocks/locationMock.js';
-
-export default {
-    title: 'Templates/ClubManagement/ClubBasic',
-    component: ClubBasic,
+import ClubBasic from './ClubBasic.vue';
+import mockLocations from '../../../../mocks/locationMock.js';
+
+const validValidation = {
+    Name: { invalid: false, message: '' },
+    ShortName: { invalid: false, message: '' },
+    Address: { invalid: false, message: '' },
+};
+
+const invalidValidation = {
+    Name: { invalid: true, message: 'Required' },
+    ShortName: { invalid: true, message: 'Required' },
+    Address: { invalid: true, message: 'Required' },
+};
+
+export default {
+    title: 'Templates/ClubManagement/ClubBasic',
+    component: ClubBasic,
     tags: ['autodocs'],
     args: {
         club: {
@@ -15,15 +27,19 @@ export default {
                 Name: "123 Fencing St, Columbus, OH"
             },
             Color1: "blue",
-            Color2: "gold"
-        },
-        locations: mockLocations
-    },
-    argTypes: {
-        club: { control: { type: 'object' } },
-        locations: { control: { type: 'array' } }
-    }
-};
+            Color2: "gold"
+        },
+        locations: mockLocations,
+        validation: validValidation
+    },
+    argTypes: {
+        club: { control: { type: 'object' } },
+        locations: { control: { type: 'array' } },
+        validation: { control: { type: 'object' } },
+        'add:newAddress': { action: 'add:newAddress' },
+        'update:club': { action: 'update:club' },
+    }
+};
 
 export const Default = {
     args: {
@@ -36,11 +52,12 @@ export const Default = {
                 Name: "123 Fencing St, Columbus, OH"
             },
             Color1: "blue",
-            Color2: "gold"
-        },
-        locations: mockLocations
-    }
-};
+            Color2: "gold"
+        },
+        locations: mockLocations,
+        validation: validValidation
+    }
+};
 
 export const EmptyClub = {
     args: {
@@ -53,11 +70,12 @@ export const EmptyClub = {
                 Name: ""
             },
             Color1: "",
-            Color2: ""
-        },
-        locations: mockLocations
-    }
-};
+            Color2: ""
+        },
+        locations: mockLocations,
+        validation: invalidValidation
+    }
+};
 
 export const CustomColors = {
     args: {
@@ -70,8 +88,9 @@ export const CustomColors = {
                 Name: "456 Forge Ln, Pittsburgh, PA"
             },
             Color1: "red",
-            Color2: "silver"
-        },
-        locations: mockLocations
-    }
-};
+            Color2: "silver"
+        },
+        locations: mockLocations,
+        validation: validValidation
+    }
+};

package/src/stories/Templates/ClubManagement/ClubBasic/ClubBasic.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="flex flex-col mb-4">
-    <TitledInput :inputValue="club.Name || ''"
-                 :invalid="validation.Name.invalid"
-                 :title="validation.Name.invalid ? `Club Name - ${validation.Name.message}` : 'Club Name'"
-                 placeholder="Enter Club Name"
-                 title="Club Name"
-                 @update:value="emitUpdate('Name', $event)"/>
+    <TitledInput :inputValue="club.Name || ''"
+                 :invalid="validation.Name.invalid"
+                 :title="validation.Name.invalid ? `Club Name - ${validation.Name.message}` : 'Club Name'"
+                 placeholder="Enter Club Name"
+                 @update:value="emitUpdate('Name', $event)"/>
   </div>
   <div class="flex flex-col mb-4">
-    <TitledInput :inputValue="club.ShortName || ''"
-                 :invalid="validation.ShortName.invalid"
-                 :title="validation.ShortName.invalid ? `Club Short Name - ${validation.ShortName.message}` : 'Club Short Name'"
-                 placeholder="Enter Short Name"
-                 title="Short Name"
-                 @update:value="emitUpdate('ShortName', $event)"/>
+    <TitledInput :inputValue="club.ShortName || ''"
+                 :invalid="validation.ShortName.invalid"
+                 :title="validation.ShortName.invalid ? `Club Short Name - ${validation.ShortName.message}` : 'Club Short Name'"
+                 placeholder="Enter Short Name"
+                 @update:value="emitUpdate('ShortName', $event)"/>
   </div>
   <div class="flex flex-col mb-4">
     <TitledInput :inputValue="club.TagLine || ''"
@@ -42,9 +40,9 @@
               :weight="'normal'" class="mb-1" data-testid="text-description"/>
     <TextBoxEditor :initialContent="club.Description" @update:editorContent="emitUpdate('Description', $event)"/>
   </div>
-  <div class="flex flex-col mb-4">
-    <ClubColorPicker :club="club" :isPrimary="true" @update:value="emitUpdate('Color1', $event)" />
-    <ClubColorPicker :club="club" :isPrimary="false" @update:value="emitUpdate('Color1', $event)" />
+  <div class="flex flex-col mb-4">
+    <ClubColorPicker :club="club" :isPrimary="true" @update:value="emitColorUpdate" />
+    <ClubColorPicker :club="club" :isPrimary="false" @update:value="emitColorUpdate" />
   </div>
 </template>
 
@@ -73,18 +71,21 @@ export default {
       required: true
     }
   },
-  computed: {
-    getSelectedAddress() {
-      return this.club.Address ? this.club.Address.Name : '';
-    }
-  },
-  methods: {
-    emitAddNewAddress(address) {
-      this.$emit('add:newAddress', address);
-    },
-    emitUpdate(field, value) {
-      this.$emit('update:club', { field, value });
-    },
+  computed: {
+    getSelectedAddress() {
+      return this.club?.Address?.Name || '';
+    }
+  },
+  methods: {
+    emitAddNewAddress(address) {
+      this.$emit('add:newAddress', address);
+    },
+    emitColorUpdate(payload) {
+      this.$emit('update:club', { ...payload });
+    },
+    emitUpdate(field, value) {
+      this.$emit('update:club', { field, value });
+    },
   }
 }
-</script>
+</script>

package/src/stories/Templates/ClubManagement/{ClubMangement.stories.js → ClubManagement.stories.js}

@@ -2,75 +2,90 @@ import ClubManagement from './ClubManagement.vue';
 import addressesMock from "../../../mocks/locationMock.js";
 import clubMock from "../../../mocks/getClub.js";
 
-export default {
-    title: 'Templates/ClubManagement',
-    component: ClubManagement,
+export default {
+    title: 'Templates/ClubManagement',
+    component: ClubManagement,
     tags: ['autodocs'],
     args: {
         uploadImageName: 'club-profile-test',
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock,
-        userLevel: 'user'
-    },
-    argTypes: {
-        uploadImageName: { control: { type: 'text' } },
-        uploadServer: { control: { type: 'text' } },
-        imageServer: { control: { type: 'text' } },
-        locations:  { control: { type: 'array'} },
-        clubProfile: { control: { type: 'object' } },
-        userLevel: { control: { type: 'text' } }
-    }
-};
+        locations: addressesMock,
+        clubProfile: clubMock,
+        userLevel: 'user',
+        loading: false,
+        saveButtonLabel: 'Save'
+    },
+    argTypes: {
+        uploadImageName: { control: { type: 'text' } },
+        uploadServer: { control: { type: 'text' } },
+        imageServer: { control: { type: 'text' } },
+        locations:  { control: { type: 'array'} },
+        clubProfile: { control: { type: 'object' } },
+        userLevel: { control: { type: 'text' } },
+        loading: { control: { type: 'boolean' } },
+        saveButtonLabel: { control: { type: 'text' } },
+        'add:newAddress': { action: 'add:newAddress' },
+        'delete:club': { action: 'delete:club' },
+        'submit:club': { action: 'submit:club' },
+        'update:image': { action: 'update:image' },
+    }
+};
 
 export const Default = {
     args: {
         uploadImageName: 'ctest1',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock[0],
-        userLevel: 'user'
-    }
-};
-
-export const asAdmin = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        clubProfile: clubMock,
-        locations: addressesMock,
-        userLevel: 'Admin'
-    }
-};
-
-export const asAdminAndLoading = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock,
-        userLevel: 'Admin',
-        loading: true
-    }
-};
-
-export const emptyClub = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
+        uploadServer: 'http://localhost:3000/api/upload/',
+        imageServer: 'http://localhost:3000/uploads/',
+        locations: addressesMock,
+        clubProfile: clubMock,
+        userLevel: 'user',
+        loading: false,
+        saveButtonLabel: 'Save'
+    }
+};
+
+export const AsAdmin = {
+    args: {
+        uploadImageName: 'ctest2',
+        uploadServer: 'http://localhost:3000/api/upload/',
+        imageServer: 'http://localhost:3000/uploads/',
+        clubProfile: clubMock,
+        locations: addressesMock,
+        userLevel: 'Admin',
+        loading: false,
+        saveButtonLabel: 'Save'
+    }
+};
+
+export const AsAdminAndLoading = {
+    args: {
+        uploadImageName: 'ctest2',
+        uploadServer: 'http://localhost:3000/api/upload/',
+        imageServer: 'http://localhost:3000/uploads/',
+        locations: addressesMock,
+        clubProfile: clubMock,
+        userLevel: 'Admin',
+        loading: true,
+        saveButtonLabel: 'Save'
+    }
+};
+
+export const EmptyClub = {
+    args: {
+        uploadImageName: 'ctest2',
+        uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
         locations: addressesMock,
         clubProfile: {
             Name: '',
-            ClubId: 0,
-            Color1: 'red',
-            Color2: 'blue',
-        },
-        userLevel: 'Admin',
-        loading: false
-    }
-};
+            ClubId: 0,
+            Color1: 'red',
+            Color2: 'blue',
+            Images: [],
+        },
+        userLevel: 'Admin',
+        loading: false,
+        saveButtonLabel: 'Create'
+    }
+};