@dcrackel/hematournamentui 1.0.699 → 1.0.702

package/src/stories/Templates/PersonManagement/Attendance/Attendance.vue

@@ -9,7 +9,7 @@
       <div v-for="tournament in attendance" :key="tournament.TournamentId" class="mb-6">
         <div class="flex mr-4 md:mr-0">
           <div class="w-full flex flex-col justify-end md:ml-2">
-            <div class="w-full flex ml-2 justify-between border-b">
+            <div class="w-full flex ml-2 justify-between border-b border-dropdownSelect">
               <BaseText :text="tournament.Name" color="primary" size="" weight="text-sm md:text-md simi-bold"/>
               <BaseText :text="formatTournamentDates(tournament.StartDate, tournament.EndDate)" color="primary" size="" weight="normal" class="text-xs md:text-md pt-1.5" />
             </div>
@@ -34,26 +34,26 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../..//Atoms/Icon/BaseIcon.vue";
-
-const weaponIcons = {
-  Longsword: 'fa-longsword',
-  'Military Saber': 'fa-saber',
-  'Rapier & Dagger': 'fa-rapier',
-  'Single Rapier': 'fa-rapier',
-  Messer: 'fa-messer',
-  'Sword & Buckler': 'fa-swordandbuckler',
-  Sidesword: 'fa-sidesword'
-};
-
-const daySuffixes = {
-  1: 'st',
-  2: 'nd',
-  3: 'rd'
-};
-
-export default {
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../..//Atoms/Icon/BaseIcon.vue";
+
+const weaponIcons = {
+  Longsword: 'fa-longsword',
+  'Military Saber': 'fa-saber',
+  'Rapier & Dagger': 'fa-rapier',
+  'Single Rapier': 'fa-rapier',
+  Messer: 'fa-messer',
+  'Sword & Buckler': 'fa-swordandbuckler',
+  Sidesword: 'fa-sidesword'
+};
+
+const daySuffixes = {
+  1: 'st',
+  2: 'nd',
+  3: 'rd'
+};
+
+export default {
   name: "Attendance",
   components: {BaseIcon, BaseText },
   props: {
@@ -69,9 +69,9 @@ export default {
   },
   computed: {
   },
-  methods: {
-    getWeaponIcon(weapon){
-      return weaponIcons[weapon] || 'fa-longsword';
+  methods: {
+    getWeaponIcon(weapon){
+      return weaponIcons[weapon] || 'fa-longsword';
     },
     formatEventDate(date, time) {
       const eventDate = new Date(`${date}T${time}`);
@@ -98,10 +98,10 @@ export default {
 
       return `${formatDate(startDate, includeYear)} to ${formatDate(endDate, includeYear)}`;
     },
-    getDaySuffix(day) {
-      if (day > 3 && day < 21) return 'th';
-      return daySuffixes[day % 10] || 'th';
-    },
+    getDaySuffix(day) {
+      if (day > 3 && day < 21) return 'th';
+      return daySuffixes[day % 10] || 'th';
+    },
   }
 };
 </script>

package/src/stories/Templates/PersonManagement/PersonManagement.vue

@@ -54,7 +54,7 @@ import BaseText from "../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import BasicEdit from "./Basic/BasicEdit.vue";
 import Attendance from "../../Templates/PersonManagement/Attendance/Attendance.vue";
-import FencerAdmin from "../../Templates/PersonManagement/Admin/FencerAdmin.vue";
+import FencerAdmin from "../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue";
 import { validateField } from "../../Util/Validations/PersonManagementValidations.js";
 
 export default {

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