@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,41 +1,41 @@
 import EventFinalResults from './EventFinalResults.vue';
 import eventMock from '../../../../mocks/eventMock.js';
-import getFinalEventResults from "../../../../mocks/getFinalEventResult.js";
+import getFinalEventResults from '../../../../mocks/getFinalEventResult.js';
 
 export default {
-    title: 'Templates/EventManagement/EventFinalResults',
-    component: EventFinalResults,
-    tags: ['autodocs'],
-    args: {
-        event: eventMock[0],
-        finalResults: getFinalEventResults.FinalResults,
-        role: 'admin'
+  title: 'Templates/EventManagement/EventFinalResults',
+  component: EventFinalResults,
+  tags: ['autodocs'],
+  args: {
+    event: eventMock[0],
+    finalResults: getFinalEventResults.FinalResults,
+    role: 'admin'
+  },
+  argTypes: {
+    event: {
+      control: { type: 'object' }
     },
-    argTypes: {
-        event: {
-            control: {type: 'object'}
-        },
-        finalResults: {
-            control: {type: 'array'}
-        },
-        role: {
-            control: {type: 'text'}
-        }
+    finalResults: {
+      control: { type: 'array' }
+    },
+    role: {
+      control: { type: 'text' }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        event: eventMock[0],
-        finalResults: getFinalEventResults.FinalResults,
-        role: 'admin'
-    }
+  args: {
+    event: eventMock[0],
+    finalResults: getFinalEventResults.FinalResults,
+    role: 'admin'
+  }
 };
 
-export const NoResultsYet = {
-    args: {
-        event: eventMock[0],
-        finalResults: [],
-        role: 'director'
-    }
-}
+export const NoResultsYet = {
+  args: {
+    event: eventMock[0],
+    finalResults: [],
+    role: 'director'
+  }
+};

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

@@ -1,15 +1,20 @@
 <template>
   <section class="">
-    <EditEventsTopMenu :currentTab="'Final'"  :tabs="tabs(role,isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <EventFinalResultsHeader :event="event" @export:HemaRatings="handleExportToHemaRatings"/>
+    <EditEventsTopMenu :currentTab="'Final'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <EventFinalResultsHeader :event="event" @export:HemaRatings="handleExportToHemaRatings" />
     <div class="md:mt-4">
-      <FinalResultsTable :finalResults="finalResults"/>
+      <FinalResultsTable :finalResults="finalResults" />
       <div v-if="finalResults.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="Nothing to Show Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
           <BaseText text="Check back after the Bracket is Complete!" size="sm" color="quinary" weight="normal" />
-          <BaseText text="The generate final results button will appear on the bottom of the bracket screen when all bouts are complete." size="sm" color="quinary" weight="normal" />
+          <BaseText
+            text="The generate final results button will appear on the bottom of the bracket screen when all bouts are complete."
+            size="sm"
+            color="quinary"
+            weight="normal"
+          />
         </div>
       </div>
     </div>
@@ -17,26 +22,26 @@
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import FinalResultsTable from "../../../Organisms/Containers/FinalResults/FinalResultsTable.vue";
-import EventFinalResultsHeader from "../../../Organisms/Headers/EventFinalResultsHeader/EventFinalResultsHeader.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import FinalResultsTable from '../../../Organisms/Containers/FinalResults/FinalResultsTable.vue';
+import EventFinalResultsHeader from '../../../Organisms/Headers/EventFinalResultsHeader/EventFinalResultsHeader.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import { tabs } from '../../../Util/tabs.js';
 
-export default {
-  name: 'EventFinalResults',
+export default {
+  name: 'EventFinalResults',
   emits: ['export:HemaRatings', 'tab:menu-click'],
-  components: {BaseText, EventFinalResultsHeader, FinalResultsTable, EditEventsTopMenu},
+  components: { BaseText, EventFinalResultsHeader, FinalResultsTable, EditEventsTopMenu },
   props: {
     event: {
       type: Object,
       required: true
-    },
-    finalResults: {
-      type: Array,
-      required: true
-    },
+    },
+    finalResults: {
+      type: Array,
+      required: true
+    },
     role: {
       type: String,
       default: 'Admin'
@@ -46,8 +51,8 @@ export default {
     return {
       emptyDesertIcon,
       tabs,
-      windowWidth: window.innerWidth,
-    }
+      windowWidth: window.innerWidth
+    };
   },
   mounted() {
     window.addEventListener('resize', this.handleResize);
@@ -58,13 +63,13 @@ export default {
   computed: {
     isMobile() {
       return this.windowWidth <= 748;
-    },
+    }
   },
   methods: {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    handleExportToHemaRatings(){
+    handleExportToHemaRatings() {
       this.$emit('export:HemaRatings');
     },
     handleResize() {
@@ -72,4 +77,4 @@ export default {
     }
   }
 };
-</script>
+</script>

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

@@ -1,59 +1,58 @@
 import KioskDisplay from './KioskDisplay.vue';
-import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
-import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
-import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+import getCLubDisplayByClubId from '../../../../mocks/getClubDisplayByClubId.js';
+import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournamentId.js';
+import getEventByTournamentId from '../../../../mocks/getEventByTournamentId.js';
 
 export default {
-    title: 'Templates/EventManagement/KioskDisplay',
-    component: KioskDisplay,
-    tags: ['autodocs'],
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        role: 'Admin'
-    },
-    argTypes: {
-        displays: { control: 'array' },
-        staffDropDown: { control: 'array' },
-        eventDropDown: { control: 'array' },
-        role: { control: 'text' }
-    },
+  title: 'Templates/EventManagement/KioskDisplay',
+  component: KioskDisplay,
+  tags: ['autodocs'],
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId,
+    role: 'Admin'
+  },
+  argTypes: {
+    displays: { control: 'array' },
+    staffDropDown: { control: 'array' },
+    eventDropDown: { control: 'array' },
+    role: { control: 'text' }
+  }
 };
 
-
 export const Default = {
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        role: 'Admin'
-    }
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId,
+    role: 'Admin'
+  }
 };
 
 export const isAdmin = {
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        role: 'Admin'
-    }
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId,
+    role: 'Admin'
+  }
 };
 
-export const isDirector = {
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        role: 'Director'
-    }
+export const isDirector = {
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId,
+    role: 'Director'
+  }
 };
 
 export const isClub = {
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId,
-        role: 'Club'
-    }
-};
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId,
+    role: 'Club'
+  }
+};

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

@@ -1,26 +1,26 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Displays'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
+    <EditEventsTopMenu :currentTab="'Displays'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
     <KioskContainer
-        :displays="localDisplays"
-        :eventDropDown="eventDropDown"
-        :staffDropDown="staffDropDown"
-        :userRole="role"
-        @remove:kiosk="handleRemove"
-        @test:scoreboard="handleScoreboardTest"
-        @update:ringChange="handleRingChange"
-        @update:selectedStaff="handleAssignmentStaff"
-        @update:selectedEvent="handleAssignmentEvent"
-        @update:selectedType="handleSelectedType"
-        @update:assignToMe="handleAssignToMe"
-        @submit:kiosk="handleSubmit"
+      :displays="localDisplays"
+      :eventDropDown="eventDropDown"
+      :staffDropDown="staffDropDown"
+      :userRole="role"
+      @remove:kiosk="handleRemove"
+      @test:scoreboard="handleScoreboardTest"
+      @update:ringChange="handleRingChange"
+      @update:selectedStaff="handleAssignmentStaff"
+      @update:selectedEvent="handleAssignmentEvent"
+      @update:selectedType="handleSelectedType"
+      @update:assignToMe="handleAssignToMe"
+      @submit:kiosk="handleSubmit"
     />
-  </section>
-</template>
-
-<script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import KioskContainer from "../../../Organisms/Containers/KioskContainer/KioskContainer.vue"
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import KioskContainer from '../../../Organisms/Containers/KioskContainer/KioskContainer.vue';
 
 import { tabs } from '../../../Util/tabs.js';
 
@@ -29,9 +29,18 @@ export default {
   components: {
     KioskContainer,
     EditEventsTopMenu
-
   },
-  emits: ['remove:kiosk', 'test:scoreboard', 'update:selectedStaff', 'update:selectedEvent', 'update:selectedType', 'update:ringChange', 'submit:kiosk', 'update:assignToMe','tab:menu-click'],
+  emits: [
+    'remove:kiosk',
+    'test:scoreboard',
+    'update:selectedStaff',
+    'update:selectedEvent',
+    'update:selectedType',
+    'update:ringChange',
+    'submit:kiosk',
+    'update:assignToMe',
+    'tab:menu-click'
+  ],
   props: {
     displays: {
       type: Array,
@@ -50,18 +59,18 @@ export default {
       default: 'Director'
     }
   },
-  data() {
-    return {
-      tabs,
-      localDisplays: [...this.displays],
-      windowWidth: window.innerWidth,
-    }
+  data() {
+    return {
+      tabs,
+      localDisplays: [...this.displays],
+      windowWidth: window.innerWidth
+    };
   },
   watch: {
-    displays: {
-      handler(newDisplays) {
-        this.localDisplays = [...newDisplays]
-      },
+    displays: {
+      handler(newDisplays) {
+        this.localDisplays = [...newDisplays];
+      },
       deep: true
     }
   },
@@ -74,20 +83,20 @@ export default {
   computed: {
     isMobile() {
       return this.windowWidth <= 748;
-    },
+    }
   },
-  methods: {
-    handleScoreboardTest(display) {
-      this.$emit('test:scoreboard', display);
-    },
-    handleTabMenuClick(value) {
+  methods: {
+    handleScoreboardTest(display) {
+      this.$emit('test:scoreboard', display);
+    },
+    handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    handleRingChange(item){
-      this.$emit('update:ringChange', item)
+    handleRingChange(item) {
+      this.$emit('update:ringChange', item);
     },
     handleRemove(item) {
-      this.$emit('remove:kiosk',item);
+      this.$emit('remove:kiosk', item);
     },
     handleAssignmentStaff(item) {
       this.$emit('update:selectedStaff', item);
@@ -95,10 +104,10 @@ export default {
     handleAssignmentEvent(item) {
       this.$emit('update:selectedEvent', item);
     },
-    handleSelectedType(item){
+    handleSelectedType(item) {
       this.$emit('update:selectedType', item);
     },
-    handleAssignToMe(item){
+    handleAssignToMe(item) {
       this.$emit('update:assignToMe', item);
     },
     handleResize() {
@@ -113,5 +122,5 @@ export default {
       this.$emit('submit:kiosk', item);
     }
   }
-}
+};
 </script>

package/src/stories/Templates/EventManagement/Penalties/PenaltyReport.stories.js

@@ -1,34 +1,33 @@
-import PenaltyReport from './PenaltyReport.vue';
-import getPenaltiesByEvent from '../../../../mocks/getPenaltiesByEvent.js';
-
-export default {
-    title: 'Templates/EventManagement/PenaltyReport',
-    component: PenaltyReport,
-    args: {
-        event: getPenaltiesByEvent.Event,
-        penalties: getPenaltiesByEvent.Penalties,
-    },
-    argTypes: {
-        event: {
-            control: { type: 'object' },
-        },
-        penalties: {
-            control: { type: 'array' },
-        },
-    },
-};
+import PenaltyReport from './PenaltyReport.vue';
+import getPenaltiesByEvent from '../../../../mocks/getPenaltiesByEvent.js';
 
-export const Default = {
-    args: {
-        event: getPenaltiesByEvent.Event,
-        penalties: getPenaltiesByEvent.Penalties,
+export default {
+  title: 'Templates/EventManagement/PenaltyReport',
+  component: PenaltyReport,
+  args: {
+    event: getPenaltiesByEvent.Event,
+    penalties: getPenaltiesByEvent.Penalties
+  },
+  argTypes: {
+    event: {
+      control: { type: 'object' }
     },
+    penalties: {
+      control: { type: 'array' }
+    }
+  }
 };
 
+export const Default = {
+  args: {
+    event: getPenaltiesByEvent.Event,
+    penalties: getPenaltiesByEvent.Penalties
+  }
+};
 
-export const NoPenalties = {
-    args: {
-        event: getPenaltiesByEvent.Event,
-        penalties: [],
-    },
-};
+export const NoPenalties = {
+  args: {
+    event: getPenaltiesByEvent.Event,
+    penalties: []
+  }
+};

package/src/stories/Templates/EventManagement/Penalties/PenaltyReport.vue

@@ -1,35 +1,50 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Penalties'"  :tabs="tabs(role,isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <PenaltySummary :event="event" :yellowCards="totalYellowCards" :redCards="totalRedCards" :blackCards="totalBlackCards" :medicalCalls="totalMedicalCalls"/>
+    <EditEventsTopMenu :currentTab="'Penalties'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <PenaltySummary
+      :event="event"
+      :yellowCards="totalYellowCards"
+      :redCards="totalRedCards"
+      :blackCards="totalBlackCards"
+      :medicalCalls="totalMedicalCalls"
+    />
     <div class="md:p-4"></div>
 
     <div v-if="penalties.length > 0" class="mb-10">
-      <div v-for="penaltiesSummary in penalties" :key="penaltiesSummary.PersonId">
-        <PenaltyFencerCard :eventName="event.EventName" :personPenalties="penaltiesSummary" @penalty:removal="penaltyRemoval" />
+      <div v-for="penaltiesSummary in penalties" :key="penaltiesSummary.PersonId">
+        <PenaltyFencerCard
+          :eventName="event.EventName"
+          :personPenalties="penaltiesSummary"
+          @penalty:removal="penaltyRemoval"
+        />
       </div>
     </div>
     <div v-if="!Array.isArray(penalties) || penalties.length === 0" class="mb-10">
-      <img alt="Small desert scene with wind blowing." class="w-60 mt-8 mx-auto" :src="emptyDesertIcon"/>
+      <img alt="Small desert scene with wind blowing." class="w-60 mt-8 mx-auto" :src="emptyDesertIcon" />
       <div class="flex justify-center">
-      <BaseText :color="'primaryHighlight'" size="lg" :text="'No Penalties to report!'" :weight="'normal'" data-testid="text-num-events"/>
+        <BaseText
+          :color="'primaryHighlight'"
+          size="lg"
+          :text="'No Penalties to report!'"
+          :weight="'normal'"
+          data-testid="text-num-events"
+        />
       </div>
     </div>
-
   </section>
 </template>
 
 <script>
-import PenaltyFencerCard from "../../../Organisms/Cards/PenaltyFencerCard/PenaltyFencerCard.vue";
-import EditEventsTopMenu from "../../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import PenaltyFencerCard from '../../../Organisms/Cards/PenaltyFencerCard/PenaltyFencerCard.vue';
+import EditEventsTopMenu from '../../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
 import { tabs } from '../../../Util/tabs.js';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import PenaltySummary from "../../../Organisms/Headers/PenaltySummary/PenaltySummary.vue";
+import PenaltySummary from '../../../Organisms/Headers/PenaltySummary/PenaltySummary.vue';
 
 export default {
-  components: {PenaltySummary, BaseText, EditEventsTopMenu, PenaltyFencerCard},
-  emits: ['tab:menu-click','penalty:removal'],
+  components: { PenaltySummary, BaseText, EditEventsTopMenu, PenaltyFencerCard },
+  emits: ['tab:menu-click', 'penalty:removal'],
   props: {
     event: {
       type: Object,
@@ -47,42 +62,42 @@ export default {
   },
   data() {
     return {
-      emptyDesertIcon,
-      windowWidth: window.innerWidth,
-      tabs,
+      emptyDesertIcon,
+      windowWidth: window.innerWidth,
+      tabs
     };
   },
   computed: {
     isMobile() {
       return this.windowWidth <= 748;
     },
-    totalYellowCards() {
-      return this.countPenaltiesByType("Yellow");
-    },
-    totalRedCards() {
-      return this.countPenaltiesByType("Red");
-    },
-    totalBlackCards() {
-      return this.countPenaltiesByType("Black");
-    },
-    totalMedicalCalls() {
-      return this.countPenaltiesByType("Medical");
+    totalYellowCards() {
+      return this.countPenaltiesByType('Yellow');
+    },
+    totalRedCards() {
+      return this.countPenaltiesByType('Red');
+    },
+    totalBlackCards() {
+      return this.countPenaltiesByType('Black');
+    },
+    totalMedicalCalls() {
+      return this.countPenaltiesByType('Medical');
     }
   },
   methods: {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    penaltyRemoval(penalty) {
-      this.$emit('penalty:removal', penalty)
-    },
-    countPenaltiesByType(type) {
-      if (!Array.isArray(this.penalties)) return 0;
-      return this.penalties.reduce((acc, person) => {
-        if (!Array.isArray(person?.Penalties)) return acc;
-        return acc + person.Penalties.filter(penalty => penalty?.PenaltyType === type).length;
-      }, 0);
-    }
-  }
-};
+    penaltyRemoval(penalty) {
+      this.$emit('penalty:removal', penalty);
+    },
+    countPenaltiesByType(type) {
+      if (!Array.isArray(this.penalties)) return 0;
+      return this.penalties.reduce((acc, person) => {
+        if (!Array.isArray(person?.Penalties)) return acc;
+        return acc + person.Penalties.filter(penalty => penalty?.PenaltyType === type).length;
+      }, 0);
+    }
+  }
+};
 </script>