@dcrackel/hematournamentui 1.0.75 → 1.0.77

package/src/stories/Organisms/Containers/Pool/Pool.vue

@@ -1,27 +1,28 @@
 <template>
-  <div class="p-4 bg-neutral rounded-lg shadow-md border border-dropdownSelect">
-
-    <div class="flex flex-row justify-between">
+  <div class="p-4 mr-4 mt-3 bg-neutral rounded-lg shadow-md border border-dropdownSelect min-w-[22rem]">
+    <div class="flex flex-row justify-between mb-2">
       <h2 class="text-xl font-bold mb-2 flex">
         <BaseText :text="`${poolName} - ${ringName}`" size="lg" color="primary" weight="bold" class="p-2"/>
       </h2>
-      <div class="bg-eventBoxBlue w-40 h-10 rounded-lg flex flex-row border border-dropdownSelect">
-        <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-3 pl-3"/>
-        <BaseText :text="strInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-1 pl-2"/>
-        <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-1 pl-3"/>
+      <div class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 flex flex-row justify-between border border-dropdownSelect">
+        <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-2.5 pl-3"/>
+        <BaseText :text="poolInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-0.5"/>
+        <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-0.5 pr-2"/>
       </div>
     </div>
 
-    <div class="text-md mb-4 ml-2 w-full ">
-       <BaseText text="Director" size="md" color="primary" weight=""/>
-       <DropDownMenu :label="'label'" :items="[]" :selectedItem="{}" width="w-full" class="mt-1 pr-1" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
+    <div class="text-md mb-4 w-full">
+       <DropDownMenu :label="'Director'" :items="directors" :selectedItem="selectedDirector" width="w-full" dropDownWidth="w-full" class="" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
     </div>
     <div class="grid grid-cols-1 gap-4">
       <PoolFencerCard v-for="(person, index) in pool" :key="person.id"
                       :position="index+1"
+                      :poolPosition="person.PoolPosition"
                       :name="person.Person.FirstName + ' ' + person.Person.LastName"
                       :club="person.Person.Club.Name"
-                      :portrait="portraitURL(person)"
+                      :seed="person.Seed"
+                      :portrait="clubLogoURL(person)"
+                      @swap-fencers="handleSwap"
       />
     </div>
   </div>
@@ -54,6 +55,10 @@ export default {
       type: String,
       required: true
     },
+    poolInd: {
+      type: String,
+      required: true
+    },
     pool: {
       type: Array,
       required: true
@@ -61,15 +66,26 @@ export default {
   },
   data() {
     return {
-      strInd: '-2'
+      selectedDirector: { text: this.directorName,link: this.directorName },
+      directors: [
+        { text: 'Lucas Garcia', link: 'he-him' },
+        { text: 'Mia Rodriguez', link: 'she-her' },
+        { text: 'Isabella Hernandez', link: 'they-them' }
+      ],
     };
   },
   methods: {
-    portraitURL(person) {
-      const images = person.Person.Images || [];
-      const portrait = images.find(image => image.Type === 'Portrait');
-      return portrait ? portrait.URL : '';
+    handleSwap({ droppedData, toPosition }) {
+      this.$emit('swap-fencers', {
+        draggedPerson: droppedData,
+        toPosition
+      });
     },
+    clubLogoURL(person) {
+      const socialMediaLinks = person.Person.Club.SocialMedia || [];
+      const portrait = socialMediaLinks.find(link => link.Type === 'Web');
+      return portrait ? portrait.Link : '';
+    }
   }
 };
 </script>

package/src/stories/Organisms/Headers/AttendanceSummary/AttendanceSummary.stories.js

@@ -0,0 +1,69 @@
+import AttendanceSummary from './AttendanceSummary.vue';
+import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
+
+export default {
+    title: 'Organisms/Headers/AttendanceSummary',
+    component: AttendanceSummary,
+    tags: ['autodocs'],
+    args: {
+        event: eventPersonGetEventById
+    },
+    argTypes: {
+        event: {
+            control: {type: 'object'},
+            description: 'Event details',
+            table: {
+                type: {summary: 'Object'},
+                defaultValue: {summary: '{}'}
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        event: {
+            EventName: 'Spring Tournament',
+            RuleSummary: 'Standard HEMA rules apply.',
+            Absent: 5,
+            Present: 45,
+            Removed: 3,
+        }
+    }
+};
+
+export const NoAbsences = {
+    args: {
+        event: {
+            EventName: 'Autumn Championship',
+            RuleSummary: 'Modified HEMA rules.',
+            Absent: 0,
+            Present: 50,
+            Removed: 2,
+        }
+    }
+};
+
+export const AllPresent = {
+    args: {
+        event: {
+            EventName: 'Winter Cup',
+            RuleSummary: 'No special rules.',
+            Absent: 0,
+            Present: 60,
+            Removed: 0,
+        }
+    }
+};
+
+export const SomeRemoved = {
+    args: {
+        event: {
+            EventName: 'Summer Open',
+            RuleSummary: 'Advanced HEMA rules.',
+            Absent: 10,
+            Present: 40,
+            Removed: 5,
+        }
+    }
+};

package/src/stories/Organisms/{Containers/PoolSummary/PoolSummary.vue → Headers/AttendanceSummary/AttendanceSummary.vue}

@@ -1,15 +1,10 @@
 <template>
-  <div class="bg-poolSetup py-1 px-4 rounded-xl flex justify-between items-center">
+  <div class="bg-poolSetup py-1 px-4 rounded-xl flex justify-between items-center shadow border border-dropdownSelect">
     <section class="flex flex-col pt-2">
       <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" />
       <BaseText :text="event.RuleSummary" size="md" color="quinary" weight="normal" />
       <span class="h-8"></span>
     </section>
-    <section class="flex space-x-4">
-      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" />
-      <CounterBox :recommended="2" :count="numberOfPools" label="Num Pools" />
-      <CounterBox :recommended="0" :count="numberOfFlights" label="Flights" />
-    </section>
     <section class="flex flex-col">
       <div class="flex justify-center items-center">
         <BaseText text="Fencer Counts" size="sm" color="quinary"  />
@@ -30,7 +25,7 @@ import CounterBox from "../../../Molecules/Boxes/CounterBox/CounterBox.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 
 export default {
-  name: 'PoolSummary',
+  name: 'AttendanceSummary',
   components: {BaseText, CounterBox, EventStatusBox },
   props: {
     event: {
@@ -55,15 +50,6 @@ export default {
     },
   },
   computed: {
-    poolSize() {
-      return this.event.PoolSize || 0;
-    },
-    numberOfPools() {
-      return this.event.NumberOfPools || 0;
-    },
-    numberOfFlights() {
-      return this.event.NumberOfFlights || 0;
-    },
     absent() {
       return this.event.Absent || "0";
     },

package/src/stories/Organisms/{Containers → Headers}/PoolSummary/PoolSummary.stories.js

@@ -1,7 +1,7 @@
 import PoolSummary from './PoolSummary.vue';
 
 export default {
-    title: 'Organisms/Containers/PoolSummary',
+    title: 'Organisms/Headers/PoolSummary',
     component: PoolSummary,
     tags: ['autodocs'],
     args: {},

package/src/stories/Organisms/Headers/PoolSummary/PoolSummary.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="bg-poolSetup py-1 px-4 rounded-xl flex justify-between items-center shadow border border-dropdownSelect">
+    <section class="flex flex-col pt-2">
+      <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" />
+      <BaseText :text="event.RuleSummary" size="md" color="quinary" weight="normal" />
+      <span class="h-8"></span>
+    </section>
+    <section class="flex space-x-4">
+      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" />
+      <CounterBox :recommended="2" :count="numberOfRings" label="Num Rings" />
+    </section>
+  </div>
+</template>
+
+<script>
+import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
+import CounterBox from "../../../Molecules/Boxes/CounterBox/CounterBox.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'PoolSummary',
+  components: {BaseText, CounterBox, EventStatusBox },
+  props: {
+    event: {
+      type: Object,
+      required: true,
+      validator(event) {
+        const requiredFields = [
+          'EventName',
+          'RuleSummary',
+          'Absent',
+          'Present',
+          'Removed',
+        ];
+
+        const missingFields = requiredFields.filter(field => !(field in event));
+        if (missingFields.length) {
+          console.warn(`Invalid event object: Missing fields: ${missingFields.join(', ')}`);
+          return false;
+        }
+        return true;
+      },
+    },
+  },
+  computed: {
+    poolSize() {
+      return this.event.PoolSize || 0;
+    },
+    numberOfRings() {
+      return this.event.NumberOfRings || 0;
+    },
+  },
+};
+</script>

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

@@ -5,7 +5,7 @@ import eventMock from '../../../../mocks/eventMock.js';
 import clubsMock from '../../../../mocks/clubGetAllMock.js';
 
 export default {
-    title: 'Templates/EventManagement/EditTournament/EventAttendance',
+    title: 'Templates/EventManagement/EventAttendance',
     component: EditEvents,
     tags: ['autodocs'],
     args: {

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

@@ -1,12 +1,12 @@
 <template>
   <section>
     <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs"/>
-    <PoolSummary :event="event"/>
+    <AttendanceSummary :event="event"/>
 
     <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 mb-3">
+          <section class="grid grid-cols-2 w-full mb-3 py-2">
             <div class="col-start-1 col-end-2 flex justify-start">
               <FindOrAddPerson
                   :persons="personsAll"
@@ -50,15 +50,15 @@ 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 PoolSummary from "../../../Organisms/Containers/PoolSummary/PoolSummary.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";
 
 export default {
   components: {
+    AttendanceSummary,
     FindOrAddPerson,
     DropDownMenu,
-    PoolSummary,
     EditEventsTopMenu,
     FencerCard,
     EventCard,

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

@@ -2,7 +2,7 @@ import EditEvents from './ListEvents.vue';
 import eventMockData from '../../../../mocks/eventMock.js';
 
 export default {
-    title: 'Templates/EventManagement/EditTournament/ListEvents',
+    title: 'Templates/EventManagement/ListEvents',
     component: EditEvents,
     tags: ['autodocs'],
     args: {

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

@@ -0,0 +1,31 @@
+import EditEvents from './PoolManagement.vue';
+import eventPersonGetInitialPoolAssignments from '../../../../mocks/eventPersonGetInitialPoolAssignments.js';
+import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
+
+export default {
+    title: 'Templates/EventManagement/PoolManagement',
+    component: EditEvents,
+    tags: ['autodocs'],
+    args: {
+        event: eventPersonGetPoolAssignmentEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments
+    },
+    argTypes: {
+        event: {
+            control: {type: 'object'},
+            description: 'Event details',
+            table: {
+                type: {summary: 'Object'},
+                defaultValue: {summary: '{}'}
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        event: eventPersonGetPoolAssignmentEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments
+    }
+};
+

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

@@ -0,0 +1,75 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs"/>
+    <PoolSummary :event="event"/>
+
+    <div class="w-full flex flex-row flex-wrap justify-start mt-3">
+      <div v-for="pool in poolAssignments" :key="pool.Name" >
+        <Pool
+            :poolName="pool.Name"
+            :ringName="pool.RingName"
+            :poolInd="pool.poolStrengthInd"
+            :directorName="pool.Person.DisplayName"
+            :pool="pool.participants"
+            @swap-fencers="swapFencers"
+        />
+      </div>
+
+    </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";
+
+export default {
+  components: {
+    Pool,
+    PoolSummary,
+    AttendanceSummary,
+    FindOrAddPerson,
+    DropDownMenu,
+    EditEventsTopMenu,
+    FencerCard,
+    EventCard,
+    EditTournamentMenu,
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    event: Object,
+    poolAssignments: Object
+  },
+  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'}
+      ]
+    };
+  },
+  computed: {},
+  methods: {
+    swapFencers({ draggedPerson }) {
+      console.log('swapFencers', draggedPerson);
+      this.$emit('swap-fencers', {draggedPerson});
+    }
+  }
+}
+</script>