@dcrackel/hematournamentui 1.0.87 → 1.0.89

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

@@ -1,55 +1,68 @@
 <template>
   <section>
     <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
-    <PoolSummary :event="event" @update:poolSize="handlePoolSizeChange" @update:numberOfRings="handleNumberOfRinigs" @reset:pool="handlePoolRest" />
+    <PoolSummary :event="event" @update:poolSize="handlePoolSizeChange" @update:numberOfRings="handleNumberOfRings" @reset:pool="handlePoolReset" :mode="mode"/>
+    <EditEventsTopMenu v-if="this.event.Flights > 1" :currentTab="selectedFlight" :tabs="flights" @tabMenuClick="handleFlightChange" class="mt-3"/>
 
-    <div class="w-full flex flex-row flex-wrap justify-start mt-3">
-      <div v-for="pool in poolAssignments" :key="pool.Name" >
+
+    <div class="w-full flex flex-row flex-wrap justify-center" :class="this.event.Flights > 1 ? 'mt-0' : 'mt-4'">
+      <div v-for="pool in filteredPools" :key="pool.Name">
         <Pool
             :poolName="pool.Name"
             :ringName="pool.RingName"
             :poolInd="pool.poolStrengthInd"
-            :directorName="pool.Person?.DisplayName || 'Unassigned'"
+            :directorName="getDirectorName(pool.Staff)"
             :pool="pool.participants"
+            :staff="staff"
             @swap-fencers="swapFencers"
+            @update:setDirector="setDirector"
         />
       </div>
+      <div v-if="filteredPools.length < 1" class="w-full flex justify-center items-center">
+        <div class="text-center">
+          <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" />
+        </div>
+      </div>
+
+    </div>
 
+    <div v-if="filteredPools.length > 1" class="grid grid-cols-2 gap-4 mx-8 mt-8">
+      <BaseButton 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" @click="handleReset" />
+      <BaseButton label="Start Pools" size="md" icon-name="fa-caret-right" icon-style="fa-solid" type="secondary" :icon-left="false" class="max-w-96 justify-self-start" @click="handleStart" />
     </div>
   </section>
 </template>
 
 <script>
-import EditTournamentMenu from "../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import EventCard from "../../../Organisms/Cards/EventCard/EventCard.vue";
-import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
-import AttendanceSummary from "../../../Organisms/Headers/AttendanceSummary/AttendanceSummary.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";
 
 export default {
   components: {
-    Pool,
-    PoolSummary,
-    AttendanceSummary,
-    FindOrAddPerson,
-    DropDownMenu,
-    EditEventsTopMenu,
-    FencerCard,
-    EventCard,
-    EditTournamentMenu,
     BaseText,
     BaseButton,
+    EditEventsTopMenu,
+    PoolSummary,
+    Pool
   },
   props: {
     event: Object,
-    poolAssignments: Object
+    poolAssignments: Object,
+    mode: {
+      type: String,
+      required: true,
+      validator: value => ['Planning', 'Preparation', 'Live', 'Complete'].includes(value)
+    },
+    staff: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
@@ -61,26 +74,63 @@ export default {
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
         {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
         {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
-      ]
+      ],
+      selectedFlight: 'Flight1'
     };
   },
-  computed: {},
-  methods: {
-    swapFencers({ draggedPerson }) {
-      this.$emit('swap-fencers', {draggedPerson});
+  computed: {
+    flights() {
+      const numberOfFlights = this.event.Flights || 0;
+      const flightTabs = Array.from({ length: numberOfFlights }, (_, index) => ({
+        id: `Flight${index + 1}`,
+        label: `Flight ${index + 1}`,
+        color: 'primaryHighlight'
+      }));
+      return [{ id: 'All', label: 'All', color: 'primaryHighlight' }, ...flightTabs];
     },
+    filteredPools() {
+      if (this.selectedFlight === 'All') {
+        return this.poolAssignments;
+      }
+      const flightNumber = parseInt(this.selectedFlight.replace('Flight', ''), 10);
+      return this.poolAssignments.filter(pool => pool.Flight === flightNumber);
+    }
+  },
+  methods: {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
     handlePoolSizeChange(poolSize) {
       this.$emit('update:poolSize', poolSize);
     },
-    handleNumberOfRinigs(numberOfRings) {
+    handleNumberOfRings(numberOfRings) {
       this.$emit('update:numberOfRings', numberOfRings);
     },
-    handlePoolRest(){
+    handlePoolReset() {
+
       this.$emit('reset:pool');
-    }
+    },
+    handleFlightChange(value) {
+      this.selectedFlight = value;
+    },
+    handleReset() {
+      this.$emit('reset:pool');
+    },
+    handleStart() {
+      this.$emit('start:pool');
+    },
+    getDirectorName(staffArray) {
+      const director = staffArray.find(staff => staff.Role === 'Director');
+      return director ? director.Person.DisplayName : 'Unassigned';
+    },
+    swapFencers({ draggedPerson }) {
+      console.log('swapFencers', draggedPerson);
+      this.$emit('update:swapFencers', {draggedPerson});
+    },
+    setDirector(personId) {
+      console.log('setDirector', personId);
+      this.$emit('update:director', personId );
+    },
   }
 }
 </script>

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

@@ -0,0 +1,58 @@
+import StaffList from './StaffList.vue';
+import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournamentId.js';
+
+export default {
+    title: 'Templates/EventManagement/StaffList',
+    component: StaffList,
+    tags: ['autodocs'],
+    args: {
+        personsAll: [
+            { id: 1, firstName: 'John', lastName: 'Doe' },
+            { id: 2, firstName: 'Jane', lastName: 'Smith' },
+        ],
+        event: {
+            EventId: 1,
+            EventName: 'Sample Event'
+        },
+        fencingClubs: [
+            { ClubId: 1, Name: 'Acme Fencing Club' },
+            { ClubId: 2, Name: 'Global Fencing Academy' }
+        ],
+        staffMembers: getAllStaffByTournamentId,
+    },
+    argTypes: {
+        personsAll: {
+            control: 'object',
+        },
+        event: {
+            control: 'object',
+        },
+        fencingClubs: {
+            control: 'object',
+        },
+        staffMembers: {
+            control: 'object',
+        },
+        'tab:menu-click': { action: 'tab:menu-click' },
+        'update:assignment': { action: 'update:assignment' },
+        'add:person': { action: 'add:person' },
+        'add:existing-person': { action: 'add:existing-person' },
+    },
+};
+
+
+export const Default = {
+    personsAll: [
+        { id: 1, firstName: 'John', lastName: 'Doe' },
+        { id: 2, firstName: 'Jane', lastName: 'Smith' },
+    ],
+    event: {
+        EventId: 1,
+        EventName: 'Sample Event'
+    },
+    fencingClubs: [
+        { ClubId: 1, Name: 'Acme Fencing Club' },
+        { ClubId: 2, Name: 'Global Fencing Academy' }
+    ],
+    staffMembers: getAllStaffByTournamentId,
+};

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

@@ -0,0 +1,135 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Staff'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
+    <StaffSummary :currentSelection="viewName" @update:selection="handleStaffView"/>
+
+    <div class="w-full flex flex-row justify-center mt-3">
+      <section class="w-full">
+        <div class="w-full flex flex-col justify-center items-center" style="text-align: center">
+          <section class="grid grid-cols-2 w-full py-2">
+            <div class="col-start-1 col-end-2 flex justify-start">
+              <FindOrAddPerson
+                  :persons="personsAll"
+                  :fencingClubs="fencingClubs"
+                  :addBorder="false"
+                  :addNewText="'Add Staff'"
+                  @new-person-submitted="handleNewPerson"
+                  @person-selected="handleAddExistingPerson" />
+            </div>
+            <div class="col-start-2 col-end-3 flex justify-end mt-4 mr-2">
+              <BaseText :text="staffCountText" size="sm" color="quaternary" weight="normal"/>
+            </div>
+          </section>
+
+          <div v-if="staffMembers.length === 0" class="mb-10">
+            <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon"/>
+            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 staff members added yet.'"
+                      :weight="'normal'" data-testid="text-num-staff"/>
+            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'Click below to add the first staff member'"
+                      :weight="'normal'" data-testid="text-num-staff"/>
+          </div>
+
+          <div v-if="viewName === 'Staff List'" class="mt-4 w-full">
+            <div v-for="staff in staffMembers" :key="staff.Id">
+              <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" />
+            </div>
+          </div>
+
+          <div v-if="viewName === 'Staff Assignments'" class="mt-4 w-full">
+            <div v-for="(pool, poolId) in groupedStaffByPool" :key="poolId">
+              <BaseText :text="`${pool.poolName} - ${pool.ringName}`" size="lg" color="quaternary" weight="bold" class="py-2 " />
+              <div v-for="staff in pool.staff" :key="staff.Id">
+                <StaffCard :staff="staff"  class="mb-4" />
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
+import StaffCard from "../../../Organisms/Cards/StaffCard/StaffCard.vue";
+import StaffSummary from "../../../Organisms/Headers/StaffSummary/StaffSummary.vue";
+
+export default {
+  components: {
+    StaffSummary,
+    FindOrAddPerson,
+    EditEventsTopMenu,
+    StaffCard,
+    BaseText,
+  },
+  props: {
+    personsAll: Array,
+    event: Object,
+    fencingClubs: {
+      type: Array,
+      default: () => []
+    },
+    staffMembers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      emptyDesertIcon,
+      tabs: [
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
+        {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
+        {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
+        {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
+        {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
+      ],
+      viewName: "Staff List"
+    };
+  },
+  computed: {
+    staffCountText() {
+      return `${this.staffMembers.length} staff members`;
+    },
+    groupedStaffByPool() {
+      return this.groupStaffByPool(this.staffMembers);
+    }
+  },
+  methods: {
+    groupStaffByPool(staff) {
+      return staff.reduce((acc, item) => {
+        const poolId = item.Pool ? item.Pool.PoolId : 'Unassigned';
+        if (!acc[poolId]) {
+          acc[poolId] = {
+            poolName: item.Pool ? item.Pool.Name : 'Unassigned',
+            ringName: item.Pool ? item.Pool.RingName : '',
+            staff: []
+          };
+        }
+        acc[poolId].staff.push(item);
+        return acc;
+      }, {})
+    },
+    handleTabMenuClick(value) {
+      this.$emit('tab:menu-click', value);
+    },
+    handleAssignment(staff) {
+      this.$emit('update:assignment', staff);
+    },
+    handleNewPerson(value) {
+      this.$emit('add:person', value);
+    },
+    handleAddExistingPerson(value) {
+      this.$emit('add:existing-person', value);
+    },
+    handleStaffView(value){
+      this.viewName = value;
+    }
+  }
+}
+</script>

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue

@@ -38,10 +38,15 @@ export default {
       default: () => []
     }
   },
+  watch: {
+    currentTab(newVal) {
+      console.log('currentTab changed to:', newVal);
+    }
+  },
   methods: {
     handleButtonClick(buttonId) {
       this.$emit('tabMenuClick', buttonId);
     }
   }
 }
-</script>
+</script>

package/tailwind.config.js

@@ -34,11 +34,13 @@ module.exports = {
                 quaternary: '#8991AC',
                 quinary: '#989daa',
                 secondary: '#2B324B',
+                graySecondary: '#C0C5CA',
                 tertiary: '#F6FAFD',
                 eventBoxBlue: '#eff4f7',
                 eventBoxGreen: '#f3f7ef',
                 eventBoxRed: '#f7efef',
                 poolSetup: '#F6FAFD',
+                poolBox: '#f7f8fb'
             },
             boxShadow: {
                 custom: 'var(--tw-shadow)',