@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Templates/EventManagement/PoolManagement/PoolManagement.stories.js

@@ -4,126 +4,128 @@ import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetP
 import eventPersonGetInitialStaff from '../../../../mocks/eventPersonGetInitialStaff.js';
 
 export default {
-    title: 'Templates/EventManagement/PoolManagement',
-    component: EditEvents,
-    tags: ['autodocs'],
-    args: {
-        event: eventPersonGetPoolAssignmentEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
+  title: 'Templates/EventManagement/PoolManagement',
+  component: EditEvents,
+  tags: ['autodocs'],
+  args: {
+    event: eventPersonGetPoolAssignmentEvent,
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  },
+  argTypes: {
+    event: {
+      control: { type: 'object' },
+      description: 'Event details',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: '{}' }
+      }
     },
-    argTypes: {
-        event: {
-            control: {type: 'object'},
-            description: 'Event details',
-            table: {
-                type: {summary: 'Object'},
-                defaultValue: {summary: '{}'}
-        }
-        },
-        poolAssignments: {
-            control: {type: 'array'},
-            description: 'Pool assignment data'
-        },
-        staff: {
-            control: {type: 'array'},
-            description: 'Assignable event staff'
-        },
-        loading: {
-            control: {type: 'boolean'}
-        },
-        role: {
-            control: {type: 'text'}
-        }
-    }
-};
+    poolAssignments: {
+      control: { type: 'array' },
+      description: 'Pool assignment data'
+    },
+    staff: {
+      control: { type: 'array' },
+      description: 'Assignable event staff'
+    },
+    loading: {
+      control: { type: 'boolean' }
+    },
+    role: {
+      control: { type: 'text' }
+    }
+  }
+};
 
 export const Default = {
-    args: {
-        event:eventPersonGetPoolAssignmentEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
+  args: {
+    event: eventPersonGetPoolAssignmentEvent,
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
 };
 
-export const liveMode = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'live' },
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
-};
-
-export const singleFlightPlanningMode = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
-};
-
-export const NoPoolsYetInPlanning = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
-        poolAssignments: [],
-        staff: [],
-    }
+export const liveMode = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'live' },
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
+};
+
+export const singleFlightPlanningMode = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
 };
 
-const staff = [{
-        Id: 2,
-        TournamentId: 4,
-        EventId: 5,
-        PoolId: 102,
-        PersonId: 23,
-        Role: 'Director',
-        Person: {
-            DisplayName: 'Lucas Garcia',
-            Club: {
-                ClubId: 1,
-                Name: 'Acme Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://randomuser.me/api/portraits/men/77.jpg'
-                }
-            ]
-        },
-        Pool: {
-            PoolId: 102,
-            Name: 'Pool 1',
-            RingName: 'Ring 1'
+export const NoPoolsYetInPlanning = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' },
+    poolAssignments: [],
+    staff: []
+  }
+};
+
+const staff = [
+  {
+    Id: 2,
+    TournamentId: 4,
+    EventId: 5,
+    PoolId: 102,
+    PersonId: 23,
+    Role: 'Director',
+    Person: {
+      DisplayName: 'Lucas Garcia',
+      Club: {
+        ClubId: 1,
+        Name: 'Acme Fencing Club'
+      },
+      Images: [
+        {
+          URL: 'https://randomuser.me/api/portraits/men/77.jpg'
         }
-    }];
+      ]
+    },
+    Pool: {
+      PoolId: 102,
+      Name: 'Pool 1',
+      RingName: 'Ring 1'
+    }
+  }
+];
 
 export const preparationMode = {
-    args: {
-        event:eventPersonGetPoolAssignmentEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: staff
-    }
+  args: {
+    event: eventPersonGetPoolAssignmentEvent,
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: staff
+  }
 };
 
-export const singleFlightResultsMode = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'results' },
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
+export const singleFlightResultsMode = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'results' },
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
 };
 
-export const singleFlightDEMode = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'de' },
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
+export const singleFlightDEMode = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'de' },
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
 };
 
-export const singleFlightCompletedMode = {
-    args: {
-        event: { ...eventPersonGetPoolAssignmentEvent, Status: 'completed' },
-        poolAssignments: eventPersonGetInitialPoolAssignments.pools,
-        staff: eventPersonGetInitialStaff,
-    }
-};
+export const singleFlightCompletedMode = {
+  args: {
+    event: { ...eventPersonGetPoolAssignmentEvent, Status: 'completed' },
+    poolAssignments: eventPersonGetInitialPoolAssignments.pools,
+    staff: eventPersonGetInitialStaff
+  }
+};

package/src/stories/Templates/EventManagement/PoolManagement/PoolManagement.vue

@@ -1,64 +1,119 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs(role,isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <PoolSummary :event="event"
-                 @update:poolSize="handlePoolSizeChange"
-                 @update:numberOfRings="handleNumberOfRings"
-                 @reset:pool="handlePoolReset"
-                 @update:manualEdit="handleManualEdit"
-                 class="hidden md:flex"
+    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <PoolSummary
+      :event="event"
+      @update:poolSize="handlePoolSizeChange"
+      @update:numberOfRings="handleNumberOfRings"
+      @reset:pool="handlePoolReset"
+      @update:manualEdit="handleManualEdit"
+      class="hidden md:flex"
     />
-    <EditEventsTopMenu v-if="event.Flights > 1" :currentTab="selectedFlight" :tabs="flights" @tabMenuClick="handleFlightChange" class="mt-3"/>
-    <div class="w-full flex flex-row flex-wrap justify-center" :class="event.Flights > 1 ? 'mt-0' : 'mt-4'">
-      <div v-for="pool in filteredPools" :key="pool.PoolId">
-        <Pool v-if="pool"
-            :poolId="pool.PoolId"
-            :poolName="pool.Name"
-            :ringName="pool.RingName"
-            :poolInd="pool.poolStrengthInd"
-            :boutsLeft="pool.BoutsLeft ?? 0"
-            :directorName="getDirectorName(pool.Staff)"
-            :pool="pool.participants"
-            :staff="staff"
-            :mode="event.Status || 'planning'"
-            :manualEdit="manualEdit"
-            :loading="loading"
-            @add:fencerToPool="handleAddFencerToPool"
-            @update:swapFencers="swapFencers"
-            @update:setDirector="setDirector"
-            @remove:fencer="handleRemoveFencer"
-            @select:pool="handleSelectPool"
+    <EditEventsTopMenu
+      v-if="event.Flights > 1"
+      :currentTab="selectedFlight"
+      :tabs="flights"
+      @tabMenuClick="handleFlightChange"
+      class="mt-3"
+    />
+    <div class="w-full flex flex-row flex-wrap justify-center" :class="event.Flights > 1 ? 'mt-0' : 'mt-4'">
+      <div v-for="pool in filteredPools" :key="pool.PoolId">
+        <Pool
+          v-if="pool"
+          :poolId="pool.PoolId"
+          :poolName="pool.Name"
+          :ringName="pool.RingName"
+          :poolInd="pool.poolStrengthInd"
+          :boutsLeft="pool.BoutsLeft ?? 0"
+          :directorName="getDirectorName(pool.Staff)"
+          :pool="pool.participants"
+          :staff="staff"
+          :mode="event.Status || 'planning'"
+          :manualEdit="manualEdit"
+          :loading="loading"
+          @add:fencerToPool="handleAddFencerToPool"
+          @update:swapFencers="swapFencers"
+          @update:setDirector="setDirector"
+          @remove:fencer="handleRemoveFencer"
+          @select:pool="handleSelectPool"
         />
       </div>
       <div v-if="filteredPools.length < 1" class="w-full flex justify-center items-center">
         <div class="text-center mb-10">
           <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon" />
           <BaseText text="0 Fencers are Checked in" size="lg" color="primary" weight="normal" class="center" />
-          <BaseText text="Go Back Seeding and Checkin to mark fencers as present." size="sm" color="primary" weight="normal" />
+          <BaseText
+            text="Go Back Seeding and Checkin to mark fencers as present."
+            size="sm"
+            color="primary"
+            weight="normal"
+          />
         </div>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-4 mx-8 mt-8 center">
-      <BaseButton v-if="shouldShowResetButton" label="Reset Pools" size="md" icon-name="fa-rotate-right" icon-style="fa-solid" type="graySecondary" :icon-left="true" class="max-w-96 justify-self-end" @buttonClick="handleReset" />
-      <BaseButton v-if="shouldShowStartCheckinButton" label="Start Checkin" size="md" icon-name="fa-caret-right" icon-style="fa-solid" type="secondary" :icon-left="false" class="max-w-96 justify-self-start" @buttonClick="handleStart" />
-      <BaseButton v-if="shouldShowGoLiveButton" label="Make Pools Live" size="md" icon-name="fa-caret-right" icon-style="fa-solid" type="secondary" :icon-left="false" class="max-w-96 justify-self-start" @buttonClick="handleGoLive" />
+      <BaseButton
+        v-if="shouldShowResetButton"
+        label="Reset Pools"
+        size="md"
+        icon-name="fa-rotate-right"
+        icon-style="fa-solid"
+        type="graySecondary"
+        :icon-left="true"
+        class="max-w-96 justify-self-end"
+        @buttonClick="handleReset"
+      />
+      <BaseButton
+        v-if="shouldShowStartCheckinButton"
+        label="Start Checkin"
+        size="md"
+        icon-name="fa-caret-right"
+        icon-style="fa-solid"
+        type="secondary"
+        :icon-left="false"
+        class="max-w-96 justify-self-start"
+        @buttonClick="handleStart"
+      />
+      <BaseButton
+        v-if="shouldShowGoLiveButton"
+        label="Make Pools Live"
+        size="md"
+        icon-name="fa-caret-right"
+        icon-style="fa-solid"
+        type="secondary"
+        :icon-left="false"
+        class="max-w-96 justify-self-start"
+        @buttonClick="handleGoLive"
+      />
     </div>
   </section>
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import PoolSummary from "../../../Organisms/Headers/PoolSummary/PoolSummary.vue";
-import Pool from "../../../Organisms/Containers/Pool/Pool.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import PoolSummary from '../../../Organisms/Headers/PoolSummary/PoolSummary.vue';
+import Pool from '../../../Organisms/Containers/Pool/Pool.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 import { tabs } from '../../../Util/tabs.js';
 
 export default {
   name: 'PoolManagement',
-  emits: ['fencer:poolChanged', 'goLive:pool', 'remove:fencer', 'reset:pool', 'select:pool', 'start:pool', 'tab:menu-click', 'update:director', 'update:numberOfRings', 'update:poolSize', 'update:swapFencers'],
+  emits: [
+    'fencer:poolChanged',
+    'goLive:pool',
+    'remove:fencer',
+    'reset:pool',
+    'select:pool',
+    'start:pool',
+    'tab:menu-click',
+    'update:director',
+    'update:numberOfRings',
+    'update:poolSize',
+    'update:swapFencers'
+  ],
   components: {
     BaseText,
     BaseButton,
@@ -67,11 +122,11 @@ export default {
     Pool
   },
   props: {
-    event: {
-      type: Object,
-      required: true,
-      default: () => ({})
-    },
+    event: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
     poolAssignments: {
       type: Array,
       default: () => []
@@ -123,16 +178,16 @@ export default {
         id: `Flight${index + 1}`,
         label: `Flight ${index + 1}`,
         color: 'primaryHighlight',
-        icon: `fa-${index +1}`
+        icon: `fa-${index + 1}`
       }));
       return [{ id: 'All', label: 'All', color: 'primaryHighlight', icon: 'fa-plane-up' }, ...flightTabs];
     },
     filteredPools() {
       if (this.loading) {
         return Array.from({ length: 2 }).map((_, index) => ({
-          PoolId: `skeleton-${index}`,
-          Name: 'Loading...',
-          RingName: 'Loading...',
+          PoolId: `skeleton-${index}`,
+          Name: 'Loading...',
+          RingName: 'Loading...',
           poolStrengthInd: 0,
           BoutsLeft: 0,
           Staff: [],
@@ -140,7 +195,12 @@ export default {
         }));
       }
 
-      const pools = this.selectedFlight === 'All' ? this.poolAssignments : this.poolAssignments.filter(pool => pool.Flight === parseInt(this.selectedFlight.replace('Flight', ''), 10));
+      const pools =
+        this.selectedFlight === 'All'
+          ? this.poolAssignments
+          : this.poolAssignments.filter(
+              pool => pool.Flight === parseInt(this.selectedFlight.replace('Flight', ''), 10)
+            );
       return pools.map(pool => ({
         ...pool,
         poolStrengthInd: pool.poolStrengthInd !== undefined ? pool.poolStrengthInd : 0
@@ -181,53 +241,50 @@ export default {
       return director && director.Person ? director.Person.DisplayName : 'Unassigned';
     },
     swapFencers({ draggedPerson }) {
-      this.$emit('update:swapFencers', {draggedPerson});
+      this.$emit('update:swapFencers', { draggedPerson });
     },
     setDirector(personId) {
-      this.$emit('update:director', personId );
+      this.$emit('update:director', personId);
     },
-    handleRemoveFencer(person){
+    handleRemoveFencer(person) {
       this.$emit('remove:fencer', person);
     },
-    handleSelectPool(poolId){
+    handleSelectPool(poolId) {
       this.$emit('select:pool', poolId);
     },
     handleResize() {
       this.windowWidth = window.innerWidth;
-    },
-    handleAddFencerToPool(payload) {
-      const sourcePool = this.poolAssignments.find(pool => {
-        return pool.participants?.some(participant => this.isMatchingFencer(participant, payload));
-      });
-
-      const fencerToMove = sourcePool?.participants.find(participant => this.isMatchingFencer(participant, payload));
-      if (!fencerToMove) {
-        console.error("Fencer not found in any pool:", payload);
-        return;
-      }
-
-      const targetPool = this.poolAssignments.find(pool => pool.PoolId === payload.addToPool);
-      if (!targetPool) {
-        console.error("Target pool not found:", payload.addToPool);
-        return;
-      }
-
-      this.$emit('fencer:poolChanged', {
-        fencer: {
-          ...fencerToMove,
-          PoolId: payload.addToPool,
-          PoolPosition: targetPool.participants.length + 1
-        },
-        fromPoolId: sourcePool.PoolId,
-        toPoolId: payload.addToPool
-      });
-    },
-    isMatchingFencer(participant, payload) {
-      return (
-          participant.Person.DisplayName === payload.name &&
-          participant.Person.Club.Name === payload.club
-      );
-    }
-  }
-}
+    },
+    handleAddFencerToPool(payload) {
+      const sourcePool = this.poolAssignments.find(pool => {
+        return pool.participants?.some(participant => this.isMatchingFencer(participant, payload));
+      });
+
+      const fencerToMove = sourcePool?.participants.find(participant => this.isMatchingFencer(participant, payload));
+      if (!fencerToMove) {
+        console.error('Fencer not found in any pool:', payload);
+        return;
+      }
+
+      const targetPool = this.poolAssignments.find(pool => pool.PoolId === payload.addToPool);
+      if (!targetPool) {
+        console.error('Target pool not found:', payload.addToPool);
+        return;
+      }
+
+      this.$emit('fencer:poolChanged', {
+        fencer: {
+          ...fencerToMove,
+          PoolId: payload.addToPool,
+          PoolPosition: targetPool.participants.length + 1
+        },
+        fromPoolId: sourcePool.PoolId,
+        toPoolId: payload.addToPool
+      });
+    },
+    isMatchingFencer(participant, payload) {
+      return participant.Person.DisplayName === payload.name && participant.Person.Club.Name === payload.club;
+    }
+  }
+};
 </script>

package/src/stories/Templates/EventManagement/PoolResults/PoolResults.stories.js

@@ -1,58 +1,57 @@
-import EditEvents from './PoolResults.vue';
-import getPoolResults from '../../../../mocks/getPoolResults.js';
-
-const makeEventWithStatus = (status) => ({
-    ...getPoolResults.event,
-    Status: status
-});
-
-export default {
-    title: 'Templates/EventManagement/PoolResults',
-    component: EditEvents,
-    tags: ['autodocs'],
-    args: {
-        event: getPoolResults.event,
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    },
-    argTypes: {
-        event: { control: {type: 'object'} },
-        poolResults: {
-            control: {type: 'array'}
-        },
-        role: { control: {type: 'text'} }
-    }
-};
-
-export const Default = {
-    args: {
-        event: makeEventWithStatus("results"),
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-export const EventIsInDE = {
-    args: {
-        event: makeEventWithStatus("de"),
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-
-export const EventIsInPlanning = {
-    args: {
-        event: makeEventWithStatus("planning"),
-        poolResults: getPoolResults.report,
-        role: 'admin'
-    }
-};
-
-export const noResults = {
-    args: {
-        event: makeEventWithStatus("planning"),
-        poolResults: [],
-        role: 'admin'
-    }
+import EditEvents from './PoolResults.vue';
+import getPoolResults from '../../../../mocks/getPoolResults.js';
+
+const makeEventWithStatus = status => ({
+  ...getPoolResults.event,
+  Status: status
+});
+
+export default {
+  title: 'Templates/EventManagement/PoolResults',
+  component: EditEvents,
+  tags: ['autodocs'],
+  args: {
+    event: getPoolResults.event,
+    poolResults: getPoolResults.report,
+    role: 'admin'
+  },
+  argTypes: {
+    event: { control: { type: 'object' } },
+    poolResults: {
+      control: { type: 'array' }
+    },
+    role: { control: { type: 'text' } }
+  }
+};
+
+export const Default = {
+  args: {
+    event: makeEventWithStatus('results'),
+    poolResults: getPoolResults.report,
+    role: 'admin'
+  }
+};
+
+export const EventIsInDE = {
+  args: {
+    event: makeEventWithStatus('de'),
+    poolResults: getPoolResults.report,
+    role: 'admin'
+  }
+};
+
+export const EventIsInPlanning = {
+  args: {
+    event: makeEventWithStatus('planning'),
+    poolResults: getPoolResults.report,
+    role: 'admin'
+  }
+};
+
+export const noResults = {
+  args: {
+    event: makeEventWithStatus('planning'),
+    poolResults: [],
+    role: 'admin'
+  }
 };