@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,182 +1,231 @@
 <template>
   <div class="w-full md:p-4">
     <div class="w-full flex justify-between">
-      <BaseText text="Assignments" color="primary" size="xl" type="h1" weight="bold" class="pt-2"/>
+      <BaseText text="Assignments" color="primary" size="xl" type="h1" weight="bold" class="pt-2" />
       <div class="flex">
-        <BaseButton iconName="fa-arrow-rotate-right" :iconLeft="true" label="" size="sm" type="primary" @buttonClick="refreshAssignments" class="w-8 pl-4 md:w-12"/>
-        <BaseButton label="Current" size="sm" :selected="showCurrent" type="primary" @buttonClick="showCurrent = true" />
-        <BaseButton label="Past" size="sm" :selected="!showCurrent" type="primary" @buttonClick="showCurrent = false" class="w-16"/>
+        <BaseButton
+          iconName="fa-arrow-rotate-right"
+          :iconLeft="true"
+          label=""
+          size="sm"
+          type="primary"
+          @buttonClick="refreshAssignments"
+          class="w-8 pl-4 md:w-12"
+        />
+        <BaseButton
+          label="Current"
+          size="sm"
+          :selected="showCurrent"
+          type="primary"
+          @buttonClick="showCurrent = true"
+        />
+        <BaseButton
+          label="Past"
+          size="sm"
+          :selected="!showCurrent"
+          type="primary"
+          @buttonClick="showCurrent = false"
+          class="w-16"
+        />
       </div>
     </div>
 
-    <div v-if="filteredAssignments.length === 0" class="text-center mt-10">
-      <BaseText :text="emptyAssignmentsText" 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">
-    <div v-for="tournament in filteredAssignments" :key="tournament.TournamentId" class="mb-6">
-      <div class="flex mr-4 md:mr-0">
-        <div class="hidden md:flex w-14 h-20 flex-col pt-5">
-          <img :src="getTournamentArtworkURL(tournament)" alt="Tournament Artwork" class="w-14 h-14 rounded-lg object-cover"/>
-        </div>
-        <div class="w-full flex flex-col h-14 justify-end md:ml-2">
-          <div class="w-full flex ml-2 justify-between border-b">
-            <BaseText :text="tournament.Name" color="primary" size="lg" weight="bold"/>
-            <BaseText :text="formatTournamentDates(tournament.StartDate, tournament.EndDate)" color="primary" size="sm" weight="normal" class="pt-1.5" />
+      <div v-for="tournament in filteredAssignments" :key="tournament.TournamentId" class="mb-6">
+        <div class="flex mr-4 md:mr-0">
+          <div class="hidden md:flex w-14 h-20 flex-col pt-5">
+            <img
+              :src="getTournamentArtworkURL(tournament)"
+              alt="Tournament Artwork"
+              class="w-14 h-14 rounded-lg object-cover"
+            />
           </div>
-        </div>
-      </div>
-      <div class="md:ml-14 md:-mt-2 w-full mt-2">
-        <section v-for="event in tournament.Events" :key="event.EventId" class="md:pl-4 mb-2 flex md:w-11/12">
-          <div class="flex-grow flex justify-between items-center bg-poolSetup px-4 py-2 rounded-lg">
-            <div class="flex items-center space-x-4">
-              <BaseIcon :iconName="getRoleIcon(event)" :iconStyle="getIconStyle(event)" size="md" color="quinary" />
-              <BaseText :text="event.EventName" color="primary" size="" weight="semi-bold" class="text-xs md:text-sm"/>
+          <div class="w-full flex flex-col h-14 justify-end md:ml-2">
+            <div class="w-full flex ml-2 justify-between border-b">
+              <BaseText :text="tournament.Name" color="primary" size="lg" weight="bold" />
+              <BaseText
+                :text="formatTournamentDates(tournament.StartDate, tournament.EndDate)"
+                color="primary"
+                size="sm"
+                weight="normal"
+                class="pt-1.5"
+              />
             </div>
-            <span class="hidden md:flex">
-            <BaseText :text="formatEventDate(event.Date, event.StartTime)" color="primary" size="" weight="normal" class="text-xs md:text-sm"/>
-          </span>
           </div>
-          <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="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 class="md:ml-14 md:-mt-2 w-full mt-2">
+          <section v-for="event in tournament.Events" :key="event.EventId" class="md:pl-4 mb-2 flex md:w-11/12">
+            <div class="flex-grow flex justify-between items-center bg-poolSetup px-4 py-2 rounded-lg">
+              <div class="flex items-center space-x-4">
+                <BaseIcon :iconName="getRoleIcon(event)" :iconStyle="getIconStyle(event)" size="md" color="quinary" />
+                <BaseText
+                  :text="event.EventName"
+                  color="primary"
+                  size=""
+                  weight="semi-bold"
+                  class="text-xs md:text-sm"
+                />
+              </div>
+              <span class="hidden md:flex">
+                <BaseText
+                  :text="formatEventDate(event.Date, event.StartTime)"
+                  color="primary"
+                  size=""
+                  weight="normal"
+                  class="text-xs md:text-sm"
+                />
+              </span>
+            </div>
+            <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="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>
-    </div>
     </section>
   </div>
 </template>
 
 <script>
-import BaseButton from "../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../Atoms/Text/BaseText.vue";
-import defaultImage from "../../../assets/default-tournament_old.png"
-import BaseIcon from "../../Atoms/Icon/BaseIcon.vue";
-
-const roleIcons = {
-  Director: 'fa-referee',
-  'List Table': 'fa-laptop',
-  'Line Judge': 'fa-flag-pennant'
-};
-
-const roleIconStyles = {
-  Director: 'fa-kit'
-};
-
-const daySuffixes = {
-  1: 'st',
-  2: 'nd',
-  3: 'rd'
-};
-
-const statusIcons = {
-  planning: 'fa-hourglass',
-  preparation: 'fa-hourglass-start',
-  live: 'fa-play',
-  results: 'fa-pause',
-  de: 'fa-circle-play',
-  completed: 'fa-trophy'
-};
-
-const statusIconClasses = {
-  planning: 'mt-1 pl-1',
-  preparation: 'mt-1 pl-1',
-  live: 'mt-1 pl-0',
-  results: 'mt-1 pl-1',
-  de: 'mt-1 pl-0',
-  completed: 'mt-0.5'
-};
-
-const actionableStatuses = ['live', 'results', 'de'];
-
-export default {
-  name: "Assignment",
+import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import defaultImage from '../../../assets/default-tournament_old.png';
+import BaseIcon from '../../Atoms/Icon/BaseIcon.vue';
+
+const roleIcons = {
+  Director: 'fa-referee',
+  'List Table': 'fa-laptop',
+  'Line Judge': 'fa-flag-pennant'
+};
+
+const roleIconStyles = {
+  Director: 'fa-kit'
+};
+
+const daySuffixes = {
+  1: 'st',
+  2: 'nd',
+  3: 'rd'
+};
+
+const statusIcons = {
+  planning: 'fa-hourglass',
+  preparation: 'fa-hourglass-start',
+  live: 'fa-play',
+  results: 'fa-pause',
+  de: 'fa-circle-play',
+  completed: 'fa-trophy'
+};
+
+const statusIconClasses = {
+  planning: 'mt-1 pl-1',
+  preparation: 'mt-1 pl-1',
+  live: 'mt-1 pl-0',
+  results: 'mt-1 pl-1',
+  de: 'mt-1 pl-0',
+  completed: 'mt-0.5'
+};
+
+const actionableStatuses = ['live', 'results', 'de'];
+
+export default {
+  name: 'Assignment',
   emits: ['forwardToEvent', 'refreshAssignments'],
-  components: {BaseIcon, BaseText, BaseButton},
+  components: { BaseIcon, BaseText, BaseButton },
   props: {
     assignments: {
       type: Array,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
-      showCurrent: true,
+      showCurrent: true
     };
   },
-  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};
+  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);
-    },
-    getRoleIcon(event) {
-      return roleIcons[event.Role] || 'fa-circle-question';
-    },
-    getIconStyle(event) {
-      return roleIconStyles[event.Role] || 'fa-solid';
-    },
-    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);
+    },
+    getRoleIcon(event) {
+      return roleIcons[event.Role] || 'fa-circle-question';
+    },
+    getIconStyle(event) {
+      return roleIconStyles[event.Role] || 'fa-solid';
+    },
+    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 = this.getEndOfDay(endDate) < today;
+        return `${month} ${day}${suffix}${year}`;
+      };
+
+      const includeYear = this.getEndOfDay(endDate) < today;
 
       if (startDate === endDate) {
         return formatDate(startDate, includeYear);
@@ -184,25 +233,25 @@ export default {
 
       return `${formatDate(startDate, includeYear)} to ${formatDate(endDate, includeYear)}`;
     },
-    getDaySuffix(day) {
-      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[this.getNormalizedStatus(event)] || 'fa-circle-question';
-    },
-    getIconClass(event) {
-      return statusIconClasses[this.getNormalizedStatus(event)] || '';
-    },
+    getDaySuffix(day) {
+      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[this.getNormalizedStatus(event)] || 'fa-circle-question';
+    },
+    getIconClass(event) {
+      return statusIconClasses[this.getNormalizedStatus(event)] || '';
+    },
     forwardToEvent(event) {
       this.$emit('forwardToEvent', event);
     },
     refreshAssignments() {
       this.$emit('refreshAssignments');
-    },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,96 +1,96 @@
-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: {
-            Name: "Columbus United Fencing Club",
-            ShortName: "CUFC",
-            TagLine: "A premier fencing club",
-            Description: "The best place to train for historical fencing.",
-            Address: {
-                Name: "123 Fencing St, Columbus, OH"
-            },
-            Color1: "blue",
-            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' },
-    }
-};
+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: {
+      Name: 'Columbus United Fencing Club',
+      ShortName: 'CUFC',
+      TagLine: 'A premier fencing club',
+      Description: 'The best place to train for historical fencing.',
+      Address: {
+        Name: '123 Fencing St, Columbus, OH'
+      },
+      Color1: 'blue',
+      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: {
-        club: {
-            Name: "Columbus United Fencing Club",
-            ShortName: "CUFC",
-            TagLine: "A premier fencing club",
-            Description: "The best place to train for historical fencing.",
-            Address: {
-                Name: "123 Fencing St, Columbus, OH"
-            },
-            Color1: "blue",
-            Color2: "gold"
-        },
-        locations: mockLocations,
-        validation: validValidation
-    }
-};
+  args: {
+    club: {
+      Name: 'Columbus United Fencing Club',
+      ShortName: 'CUFC',
+      TagLine: 'A premier fencing club',
+      Description: 'The best place to train for historical fencing.',
+      Address: {
+        Name: '123 Fencing St, Columbus, OH'
+      },
+      Color1: 'blue',
+      Color2: 'gold'
+    },
+    locations: mockLocations,
+    validation: validValidation
+  }
+};
 
 export const EmptyClub = {
-    args: {
-        club: {
-            Name: "",
-            ShortName: "",
-            TagLine: "",
-            Description: "",
-            Address: {
-                Name: ""
-            },
-            Color1: "",
-            Color2: ""
-        },
-        locations: mockLocations,
-        validation: invalidValidation
-    }
-};
+  args: {
+    club: {
+      Name: '',
+      ShortName: '',
+      TagLine: '',
+      Description: '',
+      Address: {
+        Name: ''
+      },
+      Color1: '',
+      Color2: ''
+    },
+    locations: mockLocations,
+    validation: invalidValidation
+  }
+};
 
 export const CustomColors = {
-    args: {
-        club: {
-            Name: "Steel City HEMA",
-            ShortName: "SCH",
-            TagLine: "Forging fencers one bout at a time",
-            Description: "A club dedicated to steel weapon combat training.",
-            Address: {
-                Name: "456 Forge Ln, Pittsburgh, PA"
-            },
-            Color1: "red",
-            Color2: "silver"
-        },
-        locations: mockLocations,
-        validation: validValidation
-    }
-};
+  args: {
+    club: {
+      Name: 'Steel City HEMA',
+      ShortName: 'SCH',
+      TagLine: 'Forging fencers one bout at a time',
+      Description: 'A club dedicated to steel weapon combat training.',
+      Address: {
+        Name: '456 Forge Ln, Pittsburgh, PA'
+      },
+      Color1: 'red',
+      Color2: 'silver'
+    },
+    locations: mockLocations,
+    validation: validValidation
+  }
+};