@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -2,68 +2,68 @@ 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: '{}'}
-            }
-        }
+  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,
-        }
+  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,
-        }
+  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,
-        }
+  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,
-        }
+  args: {
+    event: {
+      EventName: 'Summer Open',
+      RuleSummary: 'Advanced HEMA rules.',
+      Absent: 10,
+      Present: 40,
+      Removed: 5
     }
+  }
 };

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

@@ -1,73 +1,84 @@
 <template>
-  <div class="flex flex-col md:flex-row md:bg-poolSetup py-1 px-2 md:px-4 md:rounded-xl justify-between md:shadow md:border border-dropdownSelect">
+  <div
+    class="flex flex-col md:flex-row md:bg-poolSetup py-1 px-2 md:px-4 md:rounded-xl justify-between md:shadow md:border border-dropdownSelect"
+  >
     <section class="flex flex-col pt-2">
       <BaseText :text="event.EventName" size="" color="quaternary" weight="bold" class="text-sm md:text-lg" />
       <BaseText :text="event.RuleSummary" size="" color="quinary" weight="normal" class="text-xs md:text-md" />
       <span class="hidden md:h-8"></span>
     </section>
-    <section class="hidden md:flex flex-col">
-      <div class="flex justify-center items-center">
-        <BaseText text="Fencer Counts" size="sm" color="quinary"  />
-      </div>
-      <div class="flex flex-row flex-nowrap">
-        <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
-        <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
-        <EventStatusBox v-if="showRosterCounts" :status-count="activeRosterLabel" status-label="ACTIVE" box-color="bg-eventBoxBlueTwo" />
-        <EventStatusBox v-if="showRosterCounts" :status-count="waitlistCount" status-label="WAITLIST" box-color="bg-eventBoxGreenTwo" />
-      </div>
-    </section>
-  </div>
-</template>
+    <section class="hidden md:flex flex-col">
+      <div class="flex justify-center items-center">
+        <BaseText text="Fencer Counts" size="sm" color="quinary" />
+      </div>
+      <div class="flex flex-row flex-nowrap">
+        <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
+        <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
+        <EventStatusBox
+          v-if="showRosterCounts"
+          :status-count="activeRosterLabel"
+          status-label="ACTIVE"
+          box-color="bg-eventBoxBlueTwo"
+        />
+        <EventStatusBox
+          v-if="showRosterCounts"
+          :status-count="waitlistCount"
+          status-label="WAITLIST"
+          box-color="bg-eventBoxGreenTwo"
+        />
+      </div>
+    </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 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: 'AttendanceSummary',
-  components: {BaseText, CounterBox, EventStatusBox },
+  components: { BaseText, CounterBox, EventStatusBox },
   props: {
-    event:
-    {
+    event: {
       type: Object,
       required: true,
       default: () => {}
     },
     absent: {
       type: [Number, String],
-      default: "0",
-      required: true,
+      default: '0',
+      required: true
+    },
+    present: {
+      type: [Number, String],
+      default: '0',
+      required: true
+    },
+    activeCount: {
+      type: [Number, String],
+      default: ''
     },
-    present: {
-      type: [Number, String],
-      default: "0",
-      required: true,
-    },
-    activeCount: {
-      type: [Number, String],
-      default: '',
-    },
-    waitlistCount: {
-      type: [Number, String],
-      default: '',
-    },
-    capacity: {
-      type: [Number, String],
-      default: '',
-    },
-  },
-  computed: {
-    showRosterCounts() {
-      return this.activeCount !== '' || this.waitlistCount !== '';
-    },
-    activeRosterLabel() {
-      if (!this.capacity) {
-        return this.activeCount;
-      }
-
-      return `${this.activeCount}/${this.capacity}`;
-    }
-  },
-};
-</script>
+    waitlistCount: {
+      type: [Number, String],
+      default: ''
+    },
+    capacity: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  computed: {
+    showRosterCounts() {
+      return this.activeCount !== '' || this.waitlistCount !== '';
+    },
+    activeRosterLabel() {
+      if (!this.capacity) {
+        return this.activeCount;
+      }
+
+      return `${this.activeCount}/${this.capacity}`;
+    }
+  }
+};
+</script>

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

@@ -2,40 +2,40 @@ import EventFinalResultsHeader from './EventFinalResultsHeader.vue';
 import eventPersonGetEventById from '../../../../mocks/eventpersonGetEventById.js';
 
 export default {
-    title: 'Organisms/Headers/ResultsHeader',
-    component: EventFinalResultsHeader,
-    tags: ['autodocs'],
-    args: {
-        event: eventPersonGetEventById
-    },
-    argTypes: {
-        event: {
-            control: {type: 'object'},
-            description: 'Event details',
-            table: {
-                type: {summary: 'Object'},
-                defaultValue: {summary: '{}'}
-            }
-        }
+  title: 'Organisms/Headers/ResultsHeader',
+  component: EventFinalResultsHeader,
+  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.',
-            Status: 'completed'
-        }
+  args: {
+    event: {
+      EventName: 'Spring Tournament',
+      RuleSummary: 'Standard HEMA rules apply.',
+      Status: 'completed'
     }
+  }
 };
 
 export const noResultsYet = {
-    args: {
-        event: {
-            EventName: 'Spring Tournament',
-            RuleSummary: 'Standard HEMA rules apply.',
-            Status: 'live'
-        }
+  args: {
+    event: {
+      EventName: 'Spring Tournament',
+      RuleSummary: 'Standard HEMA rules apply.',
+      Status: 'live'
     }
+  }
 };

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

@@ -1,11 +1,13 @@
 <template>
-  <div class="hidden md:flex bg-poolSetup py-1 px-4 rounded-xl justify-between items-center shadow border border-dropdownSelect">
+  <div
+    class="hidden md:flex bg-poolSetup py-1 px-4 rounded-xl justify-between items-center shadow border border-dropdownSelect"
+  >
     <section class="flex flex-col pt-2">
       <BaseText :text="event.EventName" size="lg" color="quaternary" weight="bold" />
       <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-1/3 shadow">
+    <section 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-medal" size="3xl" color="quaternary" class="" />
       </div>
@@ -15,46 +17,60 @@
       </div>
     </section>
     <section class="flex flex-col mb-2 mr-10 w-50">
-        <div v-if="event.Status !== 'completed'" class="w-52"></div>
-        <BaseText v-if="event.Status === 'completed'" text="Final Results"  size="lg" color="quaternary" weight="bold" class="ml-2 mb-1" />
-        <BaseButton v-if="event.Status === 'completed'" label="Export HEMARatings File" size="md" icon-name="" icon-style="fa-solid" type="primary" :icon-left="false" @buttonClick="handleExportToHemaRatings" />
+      <div v-if="event.Status !== 'completed'" class="w-52"></div>
+      <BaseText
+        v-if="event.Status === 'completed'"
+        text="Final Results"
+        size="lg"
+        color="quaternary"
+        weight="bold"
+        class="ml-2 mb-1"
+      />
+      <BaseButton
+        v-if="event.Status === 'completed'"
+        label="Export HEMARatings File"
+        size="md"
+        icon-name=""
+        icon-style="fa-solid"
+        type="primary"
+        :icon-left="false"
+        @buttonClick="handleExportToHemaRatings"
+      />
     </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 BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import EventStatusBox from '../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue';
+import CounterBox from '../../../Molecules/Boxes/CounterBox/CounterBox.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'EventFinalResultsHeader',
   emits: ['export:HemaRatings'],
-  components: {BaseButton, BaseIcon, BaseText, CounterBox, EventStatusBox },
+  components: { BaseButton, BaseIcon, BaseText, CounterBox, EventStatusBox },
   props: {
     event: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     headerText() {
-      return this.event.Status === 'completed'
-          ? 'Results Are In!'
-          : 'Event Still In Progress';
+      return this.event.Status === 'completed' ? 'Results Are In!' : 'Event Still In Progress';
     },
-    headerBodyText(){
+    headerBodyText() {
       return this.event.Status === 'completed'
-          ? `If you wish to export your data to HEMARatings, click the export button and then click this <a href="https://submit.hemaratings.com/" class="text-xs text-bright">Link</a>.`
-          : 'Check back soon! The event isn\'t over yet. Final results will be shown once the event is completed'
+        ? `If you wish to export your data to HEMARatings, click the export button and then click this <a href="https://submit.hemaratings.com/" class="text-xs text-bright">Link</a>.`
+        : "Check back soon! The event isn't over yet. Final results will be shown once the event is completed";
     }
   },
-  methods:{
-    handleExportToHemaRatings(){
+  methods: {
+    handleExportToHemaRatings() {
       this.$emit('export:HemaRatings');
     }
   }
 };
-</script>
+</script>

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

@@ -1,102 +1,102 @@
 import PenaltySummary from './PenaltySummary.vue';
 
 export default {
-    title: 'Organisms/Headers/PenaltySummary',
-    component: PenaltySummary,
-    tags: ['autodocs'],
-    args: {
-        event: {
-            EventName: 'Default Tournament'
-        },
-        yellowCards: 0,
-        redCards: 0,
-        blackCards: 0,
-        medicalCalls: 0
+  title: 'Organisms/Headers/PenaltySummary',
+  component: PenaltySummary,
+  tags: ['autodocs'],
+  args: {
+    event: {
+      EventName: 'Default Tournament'
     },
-    argTypes: {
-        event: {
-            control: {type: 'object'},
-            description: 'Event details',
-            table: {
-                type: {summary: 'Object'},
-                defaultValue: {summary: '{}'}
-            }
-        },
-        yellowCards: {
-            control: {type: 'number'},
-            description: 'Total yellow penalties',
-            table: {
-                type: {summary: 'Number'},
-                defaultValue: {summary: '0'}
-            }
-        },
-        redCards: {
-            control: {type: 'number'},
-            description: 'Total red penalties',
-            table: {
-                type: {summary: 'Number'},
-                defaultValue: {summary: '0'}
-            }
-        },
-        blackCards: {
-            control: {type: 'number'},
-            description: 'Total black penalties',
-            table: {
-                type: {summary: 'Number'},
-                defaultValue: {summary: '0'}
-            }
-        },
-        medicalCalls: {
-            control: {type: 'number'},
-            description: 'Total medical calls',
-            table: {
-                type: {summary: 'Number'},
-                defaultValue: {summary: '0'}
-            }
-        }
+    yellowCards: 0,
+    redCards: 0,
+    blackCards: 0,
+    medicalCalls: 0
+  },
+  argTypes: {
+    event: {
+      control: { type: 'object' },
+      description: 'Event details',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: '{}' }
+      }
+    },
+    yellowCards: {
+      control: { type: 'number' },
+      description: 'Total yellow penalties',
+      table: {
+        type: { summary: 'Number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    redCards: {
+      control: { type: 'number' },
+      description: 'Total red penalties',
+      table: {
+        type: { summary: 'Number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    blackCards: {
+      control: { type: 'number' },
+      description: 'Total black penalties',
+      table: {
+        type: { summary: 'Number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    medicalCalls: {
+      control: { type: 'number' },
+      description: 'Total medical calls',
+      table: {
+        type: { summary: 'Number' },
+        defaultValue: { summary: '0' }
+      }
     }
+  }
 };
 
 // Default View
 export const Default = {
-    args: {
-        event: {EventName: 'Spring Tournament'},
-        yellowCards: 5,
-        redCards: 2,
-        blackCards: 1,
-        medicalCalls: 0
-    }
+  args: {
+    event: { EventName: 'Spring Tournament' },
+    yellowCards: 5,
+    redCards: 2,
+    blackCards: 1,
+    medicalCalls: 0
+  }
 };
 
 // No Penalties Given
 export const NoPenalties = {
-    args: {
-        event: {EventName: 'Autumn Championship'},
-        yellowCards: 0,
-        redCards: 0,
-        blackCards: 0,
-        medicalCalls: 0
-    }
+  args: {
+    event: { EventName: 'Autumn Championship' },
+    yellowCards: 0,
+    redCards: 0,
+    blackCards: 0,
+    medicalCalls: 0
+  }
 };
 
 // Heavy Penalties
 export const HighPenaltyCount = {
-    args: {
-        event: {EventName: 'Winter Cup'},
-        yellowCards: 12,
-        redCards: 5,
-        blackCards: 3,
-        medicalCalls: 2
-    }
+  args: {
+    event: { EventName: 'Winter Cup' },
+    yellowCards: 12,
+    redCards: 5,
+    blackCards: 3,
+    medicalCalls: 2
+  }
 };
 
 // Medical Emergencies
 export const MedicalIncidents = {
-    args: {
-        event: {EventName: 'Summer Open'},
-        yellowCards: 4,
-        redCards: 1,
-        blackCards: 0,
-        medicalCalls: 6
-    }
+  args: {
+    event: { EventName: 'Summer Open' },
+    yellowCards: 4,
+    redCards: 1,
+    blackCards: 0,
+    medicalCalls: 6
+  }
 };

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

@@ -1,8 +1,16 @@
 <template>
-  <div class="flex flex-col md:flex-row md:bg-poolSetup py-1 px-2 md:px-4 md:rounded-xl justify-between md:shadow md:border border-dropdownSelect">
+  <div
+    class="flex flex-col md:flex-row md:bg-poolSetup py-1 px-2 md:px-4 md:rounded-xl justify-between md:shadow md:border border-dropdownSelect"
+  >
     <!-- Event Name Section -->
     <section class="hidden md:flex flex-col pt-2">
-      <BaseText :text="event?.EventName || 'Unknown Event'" size="" color="quaternary" weight="bold" class="text-sm md:text-lg" />
+      <BaseText
+        :text="event?.EventName || 'Unknown Event'"
+        size=""
+        color="quaternary"
+        weight="bold"
+        class="text-sm md:text-lg"
+      />
     </section>
 
     <!-- Penalty Summary Section -->
@@ -16,8 +24,8 @@
 </template>
 
 <script>
-import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import EventStatusBox from '../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'PenaltySummary',
@@ -25,12 +33,12 @@ export default {
   props: {
     event: {
       type: Object,
-      required: false,  // Allow it to be optional
+      required: false, // Allow it to be optional
       default: () => ({})
     },
     yellowCards: {
       type: [Number, String],
-      required: false,  // Allow it to be optional
+      required: false, // Allow it to be optional
       default: null
     },
     redCards: {