@dcrackel/hematournamentui 1.0.119 → 1.0.121

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="bg-poolSetup px-4 rounded-xl flex justify-between items-center shadow border border-dropdownSelect">
+    <section class="flex flex-col w-1/3 mt-2">
+      <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" class="pt-4" />
+      <BaseText :text="event.RuleSummary" size="md" color="quinary" weight="normal" />
+      <span class="h-8"></span>
+    </section>
+
+    <section  class="flex rounded-xl border border-dropdownSelect my-2 px-4 pt-2 pb-4 bg-neutral w-2/3 shadow">
+      <div class="mt-1 w-10 mr-3">
+        <BaseIcon icon-name="fa-chart-simple-horizontal" size="3xl" color="quaternary" class="" />
+      </div>
+      <div class="w-full">
+        <BaseText text="Pool Standings and Results" size="lg" color="quaternary" weight="bold" class="" />
+        <div class="grid grid-cols-3">
+          <div class="flex">
+            <BaseText text="W%" size="xs" color="primaryHighlight" weight="bold" />
+            <BaseText text="win percent" size="xs" color="primaryHighlight" class="ml-1"/>
+          </div>
+          <div class="flex">
+            <BaseText text="W/L" size="xs" color="primaryHighlight" weight="bold" />
+            <BaseText text="win # / loss #" size="xs" color="primaryHighlight" class="ml-1"/>
+          </div>
+          <div class="flex">
+            <BaseText text="PS" size="xs" color="primaryHighlight" weight="bold" />
+            <BaseText text="Points Scored" size="xs" color="primaryHighlight" class="ml-1"/>
+          </div>
+          <div class="flex">
+            <BaseText text="PG" size="xs" color="primaryHighlight" weight="bold" />
+            <BaseText text="Points Given" size="xs" color="primaryHighlight" class="ml-1"/>
+          </div>
+          <div class="flex">
+            <BaseText text="Ind" size="xs" color="primaryHighlight" weight="bold" />
+            <BaseText text="Indicator (PS-PG)" size="xs" color="primaryHighlight" class="ml-1"/>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="flex flex-row w-1/3 justify-end">
+      <CounterBox :recommended="101" :count="promoted" label="Promoted" :textColor="'quaternary'" :centerInput="true" :directInput="true"
+                  @update:increaseCount="handleIncreaseCount"
+                  @update:decreaseCount="handleDecreaseCount"
+      />
+    </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";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  name: 'PoolResultsHeader',
+  components: {BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
+  props: {
+    event: {
+      type: Object,
+      required: true,
+      validator(event) {
+        const requiredFields = [
+          'EventName',
+          'RuleSummary'
+        ];
+        const missingFields = requiredFields.filter(field => !(field in event));
+        if (missingFields.length) {
+          console.warn(`Invalid event object: Missing fields: ${missingFields.join(', ')}`);
+          return false;
+        }
+        return true;
+      },
+    },
+    numPromoted: {
+      type: [Number, String],
+      required: true,
+    }
+  },
+  computed: {
+    mode(){
+      return this.event.Status
+    },
+    promoted() {
+      return this.numPromoted.includes('%') ? parseInt(this.numPromoted.replace('%', '')) : parseInt(this.numPromoted);
+    }
+  },
+  methods: {
+    handleIncreaseCount(numPromoted) {
+      this.$emit('update:handleIncreaseCount', numPromoted);
+    },
+    handleDecreaseCount(numPromoted) {
+      this.$emit('update:handleDecreaseCount', numPromoted);
+    }
+  },
+};
+</script>

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

@@ -1,4 +1,5 @@
 import PoolSummary from './PoolSummary.vue';
+import eventPersonGetPoolAssignmentEvent from "../../../../mocks/eventPersonGetPoolAssignmentEvent.js";
 
 export default {
     title: 'Organisms/Headers/PoolSummary',
@@ -8,62 +9,26 @@ export default {
     argTypes: {}
 };
 
+let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' };
 export const Default = {
     args: {
-        event: {
-            EventId: 1,
-            TournamentId: 8,
-            EventName: "Longsword Event For Everyone",
-            Date: "2024-05-03",
-            StartTime: "12:00:16",
-            NumberOfRings: 3,
-            WeaponId: 1,
-            Status: "Active",
-            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
-            Present: "0",
-            Absent: "20",
-            Removed: "1",
-        },
+        event:modifiedEvent,
         mode: 'planning'
     }
 }
 
+modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'preparation' };
 export const preparingMode = {
     args: {
-        event: {
-            EventId: 1,
-            TournamentId: 8,
-            EventName: "Longsword Event For Everyone",
-            Date: "2024-05-03",
-            StartTime: "12:00:16",
-            NumberOfRings: 3,
-            WeaponId: 1,
-            Status: "Active",
-            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
-            Present: "0",
-            Absent: "20",
-            Removed: "1",
-        },
+        event:modifiedEvent,
         mode: 'preparation'
     }
 }
 
+modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'live' };
 export const liveMode = {
     args: {
-        event: {
-            EventId: 1,
-            TournamentId: 8,
-            EventName: "Longsword Event For Everyone",
-            Date: "2024-05-03",
-            StartTime: "12:00:16",
-            NumberOfRings: 3,
-            WeaponId: 1,
-            Status: "Active",
-            RuleSummary: "Pools -> DE -> 3rd Place Faceoff",
-            Present: "0",
-            Absent: "20",
-            Removed: "1",
-        },
+        event:modifiedEvent,
         mode: 'live'
     }
 }

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

@@ -16,7 +16,7 @@
       </span>
 
     </section>
-    <section v-if="mode === 'preparation'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
+    <section v-if="mode === 'preparation'"  class="flex rounded-xl border border-dropdownSelect my-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
       <div class="mt-1 w-10 mr-3">
         <BaseIcon icon-name="fa-ballot-check" size="3xl" color="quaternary" class="" />
       </div>
@@ -36,11 +36,11 @@
       <div class="w-1/3 flex flex-col">
         <div class="flex justify-between items-center w-full">
           <BaseText text="Bouts Left:" size="sm" color="quaternary" class="text-right mr-2 w-2/3" />
-          <BaseText text="20/20" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
+          <BaseText :text="boutsLeft" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
         </div>
         <div class="flex justify-between items-center w-full mt-0.5">
-          <BaseText text="Est. End Time:" size="sm" color="quaternary" class="text-right mr-2 w-2/3" />
-          <BaseText text="12:45" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
+          <BaseText text="Est. End Time:" size="sm" color="quaternary" class="text-right mr-2 min-w-40 w-2/3" />
+          <BaseText text="tbd" size="sm" color="primaryHighlight" class="text-left mr-2 w-1/3" />
         </div>
       </div>
     </section>
@@ -91,6 +91,11 @@ export default {
     numberOfRings() {
       return this.event.NumberOfRings || 0;
     },
+    boutsLeft() {
+      const boutsLeft = this.event.BoutsLeft || 0;
+      const totalBouts = this.event.TotalBouts || 0;
+      return `${boutsLeft}/${totalBouts}`;
+    }
   },
   methods: {
     handlePoolSizeChange(poolSize) {

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

@@ -68,7 +68,6 @@ export default {
       this.$emit('editEvent', eventId);
     },
     handleManageEvent(eventId) {
-      console.log(`handleManageEvent: ${eventId}`);
       this.$emit('manageEvent', eventId);
     },
     handleTabMenuClick(value) {

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

@@ -189,7 +189,6 @@ export default {
       const updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId);
 
       if (!updatedBout) {
-        console.log('Bout not found in active bouts:', bout.BoutId);
         return;
       }
 

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

@@ -3,7 +3,6 @@
     <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
     <PoolSummary :event="event" @update:poolSize="handlePoolSizeChange" @update:numberOfRings="handleNumberOfRings" @reset:pool="handlePoolReset" />
     <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-center" :class="this.event.Flights > 1 ? 'mt-0' : 'mt-4'">
       <div v-for="pool in filteredPools" :key="pool.Name">
         <Pool
@@ -80,9 +79,6 @@ export default {
       selectedFlight: 'Flight1'
     };
   },
-  created() {
-    console.log(`Pool Management mode: ${this.mode}`);
-  },
   computed: {
     //TODO: will want a "complete" button that says "forward to results" or something.
     shouldShowButtons() {
@@ -157,7 +153,6 @@ export default {
       this.$emit('remove:fencer', person);
     },
     handleSelectPool(poolId){
-      console.log('handleSelectPool: ', poolId)
       this.$emit('select:pool', poolId);
     }
   }

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

@@ -0,0 +1,31 @@
+import EditEvents from './PoolResults.vue';
+import getPoolResults from '../../../../mocks/getPoolResults.js';
+import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
+
+export default {
+    title: 'Templates/EventManagement/PoolResults',
+    component: EditEvents,
+    tags: ['autodocs'],
+    args: {
+        event: eventPersonGetPoolAssignmentEvent,
+        poolResults: getPoolResults.report,
+        numPromoted: getPoolResults.numPromoted
+    },
+    argTypes: {
+        event: {type: 'object'},
+        poolResults: {
+            control: {type: 'object'}
+        },
+        numPromoted: { type: Number }
+    }
+};
+
+
+export const Default = {
+    args: {
+        event: eventPersonGetPoolAssignmentEvent,
+        poolResults: getPoolResults.report,
+        numPromoted: getPoolResults.numPromoted
+    }
+};
+

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

@@ -0,0 +1,134 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Pool Results'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
+    <PoolResultsHeader :event="event" :numPromoted="promoted"
+                       @update:handleIncreaseCount="handleIncreaseCount"
+                       @update:handleDecreaseCount="handleDecreaseCount"
+    />
+
+    <PoolResultsTable :poolResults="poolResults"
+                      :initialCutoffIndex="initialCutoffIndex"
+                      :numPromoted="promoted"
+                      @update:withdraw="handleWithdraw"
+                      @update:handleIncreaseCount="handleIncreaseCount"
+                      @update:handleDecreaseCount="handleDecreaseCount"
+    />
+
+    <BaseModal
+        :show="showRemoveModal"
+        icon-name="fa-user-slash"
+        icon-color="alarm"
+        icon-background-color="alarmHighlight"
+        icon-border-color="red"
+        :header-text="`Withdraw ${withdrawPerson.DisplayName}`"
+        :body-text="`Confirm that you wish to withdraw ${withdrawPerson.DisplayName} from the event. This action cannot be undone.`"
+        button-text="Withdraw Fencer"
+        @update:show="closeModal"
+        @submit-modal="submitWithDraw"
+        class="bg-alarmHighlight"
+    />
+
+  </section>
+</template>
+
+<script>
+
+import PoolSummary from "../../../Organisms/Headers/PoolSummary/PoolSummary.vue";
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import PoolResultsHeader from "../../../Organisms/Headers/PoolResultsHeader/PoolResultsHeader.vue";
+import PoolGrid from "../../../Organisms/Containers/PoolGrid/PoolGrid.vue";
+import PoolResultsTable from "../../../Organisms/Containers/PoolResults/PoolResultsTable.vue";
+import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
+
+export default {
+  name: 'PoolResults',
+  components: {BaseModal, PoolResultsTable, PoolGrid, PoolResultsHeader, EditEventsTopMenu, PoolSummary},
+  props: {
+    event: {
+      type: Object,
+      required: true
+    },
+    poolResults: {
+      type: Array,
+      required: true
+    },
+    numPromoted: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      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'}
+      ],
+      promoted: this.numPromoted,
+      initialCutoffIndex: 0,
+      showRemoveModal: false,
+      withdrawPerson: Object
+    }
+  },
+  mounted() {
+    this.calculateInitialCutoffIndex(this.getNumericValue(this.promoted))
+  },
+  methods: {
+    handleTabMenuClick(){
+      this.$emit('tab:menu-click', value);
+    },
+    handleIncreaseCount(value){
+      let numPercent = this.getNumericValue(value)
+
+      if (numPercent === 100) {
+        this.initialCutoffIndex = 500;
+        return
+      }
+
+      this.calculateInitialCutoffIndex(numPercent+10)
+    },
+    handleDecreaseCount(value){
+      let numPercent = this.getNumericValue(value)
+
+      if (this.poolResults.filter(p => p.Promoted).length < 5) {
+        return;
+      }
+
+      this.calculateInitialCutoffIndex(numPercent-10)
+    },
+    getNumericValue(percent) {
+      let numPercent;
+
+      if (typeof percent === 'string') {
+        numPercent = parseInt(percent.replace('%', ''));
+      }
+
+      if (typeof percent === 'number') {
+        numPercent = percent;
+      }
+
+      return numPercent
+    },
+    calculateInitialCutoffIndex(numPercent) {
+      const totalFencers = this.poolResults.length;
+      const promotionRate =  numPercent / 100;
+      this.promoted = `${numPercent}%`
+      this.initialCutoffIndex = Math.ceil(totalFencers * promotionRate);
+    },
+    closeModal(){
+      this.showRemoveModal = false
+      this.withdrawPerson = {}
+    },
+    handleWithdraw(person){
+      this.showRemoveModal = true
+      this.withdrawPerson = person
+    },
+    submitWithDraw(){
+      this.showRemoveModal = false
+    }
+  }
+};
+</script>

package/tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
                 winGreen: '#68e269',
                 acceptedHighlight: '#E5F6F1',
                 alarm: '#FD546F',
+                alarmHighlight: '#FED5D6',
                 lossRed: '#ff7477',
                 alarmText: '#F90229',
                 alert: '#FFD255',