@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,45 +1,45 @@
 import PoolResultsHeader from './PoolResultsHeader.vue';
-import eventPersonGetPoolAssignmentEvent from "../../../../mocks/eventPersonGetPoolAssignmentEvent.js";
+import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
 import getPoolResults from '../../../../mocks/getPoolResults.js';
 
 export default {
-    title: 'Organisms/Headers/PoolResultsHeader',
-    component: PoolResultsHeader,
-    tags: ['autodocs'],
-    args: {
-        eventName: eventPersonGetPoolAssignmentEvent.EventName,
-        ruleSummary: "Pools -> DE -> 3rd Place Faceoff",
-        status: eventPersonGetPoolAssignmentEvent.Status,
-        promotedBy: "Percent",
-        numPromoted: "100%",
-    },
-    argTypes: {
-        eventName: { control: 'text' },
-        ruleSummary: { control: 'text' },
-        status: { control: { type: 'select', options: ['planning', 'preparation', 'live', 'results', 'de', 'completed'] } },
-        promotedBy: { control: { type: 'select', options: ['Percent', 'Count', 'Top'] } },
-        numPromoted: { control: 'text' },
-    }
+  title: 'Organisms/Headers/PoolResultsHeader',
+  component: PoolResultsHeader,
+  tags: ['autodocs'],
+  args: {
+    eventName: eventPersonGetPoolAssignmentEvent.EventName,
+    ruleSummary: 'Pools -> DE -> 3rd Place Faceoff',
+    status: eventPersonGetPoolAssignmentEvent.Status,
+    promotedBy: 'Percent',
+    numPromoted: '100%'
+  },
+  argTypes: {
+    eventName: { control: 'text' },
+    ruleSummary: { control: 'text' },
+    status: { control: { type: 'select', options: ['planning', 'preparation', 'live', 'results', 'de', 'completed'] } },
+    promotedBy: { control: { type: 'select', options: ['Percent', 'Count', 'Top'] } },
+    numPromoted: { control: 'text' }
+  }
 };
 
-let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: "results" };
+let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'results' };
 export const Default = {
-    args: {
-        eventName: modifiedEvent.EventName,
-        ruleSummary: "Pools -> DE -> 3rd Place Faceoff",
-        status: modifiedEvent.Status,
-        promotedBy: "Percent",
-        numPromoted: getPoolResults.numPromoted,
-    }
+  args: {
+    eventName: modifiedEvent.EventName,
+    ruleSummary: 'Pools -> DE -> 3rd Place Faceoff',
+    status: modifiedEvent.Status,
+    promotedBy: 'Percent',
+    numPromoted: getPoolResults.numPromoted
+  }
 };
 
-modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: "live" };
+modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'live' };
 export const notInResultsMode = {
-    args: {
-        eventName: modifiedEvent.EventName,
-        ruleSummary: "Pools -> DE -> 3rd Place Faceoff",
-        status: modifiedEvent.Status,
-        promotedBy: "Percent",
-        numPromoted: getPoolResults.numPromoted,
-    }
+  args: {
+    eventName: modifiedEvent.EventName,
+    ruleSummary: 'Pools -> DE -> 3rd Place Faceoff',
+    status: modifiedEvent.Status,
+    promotedBy: 'Percent',
+    numPromoted: getPoolResults.numPromoted
+  }
 };

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

@@ -6,7 +6,7 @@
       <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">
+    <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>
@@ -15,90 +15,90 @@
         <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"/>
+            <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"/>
+            <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"/>
+            <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"/>
+            <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"/>
+            <BaseText text="Indicator (PS-PG)" size="xs" color="primaryHighlight" class="ml-1" />
           </div>
         </div>
       </div>
       <div v-if="status === 'planning' || status === 'preparation' || status === 'live'" class="w-full">
-          <BaseText text="Pool Results Pending" size="md" color="quaternary" weight="bold" class="mt-2" />
+        <BaseText text="Pool Results Pending" size="md" color="quaternary" weight="bold" class="mt-2" />
       </div>
     </section>
 
     <section class="flex flex-row w-1/3 justify-end">
-      <CounterBox :recommended="101"
-                  :count="promoted"
-                  :label="promotedLabel"
-                  :textColor="'quaternary'"
-                  :centerInput="true"
-                  :directInput="true"
-                  :disable="mode !== 'results'"
-                  :isPercent="isPercent"
-                  @update:change="handleChange"
-                  @update:increaseCount="handleIncreaseCount"
-                  @update:decreaseCount="handleDecreaseCount"
+      <CounterBox
+        :recommended="101"
+        :count="promoted"
+        :label="promotedLabel"
+        :textColor="'quaternary'"
+        :centerInput="true"
+        :directInput="true"
+        :disable="mode !== 'results'"
+        :isPercent="isPercent"
+        @update:change="handleChange"
+        @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";
+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',
   emits: ['update:handleChange', 'update:handleDecreaseCount', 'update:handleIncreaseCount'],
-  components: {BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
+  components: { BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
   props: {
     eventName: {
       type: String,
-      required: true,
+      required: true
     },
     ruleSummary: {
       type: String,
-      required: true,
+      required: true
     },
     status: {
       type: String,
-      required: true,
+      required: true
     },
     promotedBy: {
       type: String,
-      required: true,
+      required: true
     },
     numPromoted: {
       type: [Number, String],
-      required: true,
+      required: true
     }
   },
   data() {
     return {
-      isPercent: true,
+      isPercent: true
     };
   },
   computed: {
-    mode(){
-      return this.status
+    mode() {
+      return this.status;
     },
     promotedLabel() {
       return this.promotedBy === 'Top' ? 'Promoting Top in Each Pool' : 'Promoted';
@@ -106,10 +106,10 @@ export default {
     promoted() {
       if (this.promotedBy === 'Percent') {
         this.isPercent = true;
-        return parseInt(String(this.numPromoted).replace("%", ""), 10);
+        return parseInt(String(this.numPromoted).replace('%', ''), 10);
       }
 
-      if (this.promotedBy === "Count" || this.promotedBy === "Top") {
+      if (this.promotedBy === 'Count' || this.promotedBy === 'Top') {
         this.isPercent = false;
         return parseInt(this.numPromoted, 10);
       }
@@ -131,6 +131,6 @@ export default {
         this.$emit('update:handleChange', numPromoted);
       }
     }
-  },
+  }
 };
 </script>

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

@@ -1,34 +1,34 @@
 import PoolSummary from './PoolSummary.vue';
-import eventPersonGetPoolAssignmentEvent from "../../../../mocks/eventPersonGetPoolAssignmentEvent.js";
+import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
 
 export default {
-    title: 'Organisms/Headers/PoolSummary',
-    component: PoolSummary,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
+  title: 'Organisms/Headers/PoolSummary',
+  component: PoolSummary,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'planning' };
 export const Default = {
-    args: {
-        event:modifiedEvent,
-        mode: 'planning'
-    }
-}
+  args: {
+    event: modifiedEvent,
+    mode: 'planning'
+  }
+};
 
 modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'preparation' };
 export const preparingMode = {
-    args: {
-        event:modifiedEvent,
-        mode: 'preparation'
-    }
-}
+  args: {
+    event: modifiedEvent,
+    mode: 'preparation'
+  }
+};
 
 modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'live' };
 export const liveMode = {
-    args: {
-        event:modifiedEvent,
-        mode: 'live'
-    }
-}
+  args: {
+    event: modifiedEvent,
+    mode: 'live'
+  }
+};

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

@@ -6,26 +6,42 @@
       <span class="h-8"></span>
     </section>
 
-    <section v-if="mode === 'planning'" 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 === 'planning'"
+      class="flex rounded-xl border border-dropdownSelect mt-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-lightbulb-on" size="3xl" color="quaternary" class="" />
       </div>
       <span class="w-full">
         <BaseText text="Pools are in Planning Mode" size="lg" color="quaternary" weight="bold" class="" />
-        <BaseText text="click 'start checkin' to begin fencer checkin and pool finalization" size="xs" color="primaryHighlight" />
+        <BaseText
+          text="click 'start checkin' to begin fencer checkin and pool finalization"
+          size="xs"
+          color="primaryHighlight"
+        />
       </span>
-
     </section>
-    <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">
+    <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>
       <span class="w-full">
         <BaseText text="Pools are Preparation Mode" size="lg" color="quaternary" weight="bold" class="" />
-        <BaseText text="Only present fencers will show. Make any/all final changes. Click 'Go Live' to start pools." size="xs" color="primaryHighlight" />
+        <BaseText
+          text="Only present fencers will show. Make any/all final changes. Click 'Go Live' to start pools."
+          size="xs"
+          color="primaryHighlight"
+        />
       </span>
     </section>
-    <section v-if="mode === 'live'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-2/3 shadow">
+    <section
+      v-if="mode === 'live'"
+      class="flex rounded-xl border border-dropdownSelect mt-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-play" size="3xl" color="quaternary" class="" />
       </div>
@@ -46,55 +62,66 @@
     </section>
 
     <section v-if="mode === 'planning' || mode === 'preparation'" class="flex flex-row w-1/3 justify-end">
-      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" :textColor="'quaternary'" @update:count="handlePoolSizeChange" />
-      <CounterBox :recommended="2" :count="numberOfRings" label="Num Rings" :textColor="'quaternary'" @update:count="handleNumOfRingsChange" />
+      <CounterBox
+        :recommended="7"
+        :count="poolSize"
+        label="Pool Size"
+        :textColor="'quaternary'"
+        @update:count="handlePoolSizeChange"
+      />
+      <CounterBox
+        :recommended="2"
+        :count="numberOfRings"
+        label="Num Rings"
+        :textColor="'quaternary'"
+        @update:count="handleNumOfRingsChange"
+      />
     </section>
 
-    <section v-if="ifManualSeedByRule && (mode === 'preparation' || mode === 'custompool')" class="flex flex-row w-1/3 justify-end">
+    <section
+      v-if="ifManualSeedByRule && (mode === 'preparation' || mode === 'custompool')"
+      class="flex flex-row w-1/3 justify-end"
+    >
       <ToggleSwitch :checked="manualEdit" label="Prevent Sorting" @change="changeManualEdit" />
     </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";
-import ToggleSwitch from "../../../Molecules/Inputs/Toggle/Toggle.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 BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import ToggleSwitch from '../../../Molecules/Inputs/Toggle/Toggle.vue';
 
 export default {
   name: 'PoolSummary',
   emits: ['update:manualEdit', 'update:numberOfRings', 'update:poolSize'],
-  components: {ToggleSwitch, BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
+  components: { ToggleSwitch, BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
   props: {
     event: {
       type: Object,
       required: true,
       validator(event) {
-        const requiredFields = [
-          'EventName',
-          'RuleSummary'
-        ];
+        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;
-      },
+      }
     }
   },
   data() {
     return {
       manualEdit: false
-    }
+    };
   },
   computed: {
-    mode(){
-      return this.event.Status
+    mode() {
+      return this.event.Status;
     },
     poolSize() {
       return this.event.PoolSize || 0;
@@ -109,8 +136,8 @@ export default {
     },
     ifManualSeedByRule() {
       const poolSeedingRule = Array.isArray(this.event.EventRules)
-          ? this.event.EventRules.find(rule => rule.Rules.RuleName === "PoolSeeding")
-          : null;
+        ? this.event.EventRules.find(rule => rule.Rules.RuleName === 'PoolSeeding')
+        : null;
       return poolSeedingRule && poolSeedingRule.RuleValue === 'Manual';
     }
   },
@@ -121,10 +148,10 @@ export default {
     handleNumOfRingsChange(numberOfRings) {
       this.$emit('update:numberOfRings', numberOfRings);
     },
-    changeManualEdit(){
+    changeManualEdit() {
       this.manualEdit = !this.manualEdit;
       this.$emit('update:manualEdit', this.manualEdit);
     }
-  },
+  }
 };
 </script>

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

@@ -1,52 +1,52 @@
 import ToggleHeader from './ToggleHeader.vue';
 
 export default {
-    title: 'Organisms/Headers/ToggleHeader',
-    component: ToggleHeader,
-    tags: ['autodocs'],
-    args: {
-        firstButtonLabel: 'Staff List',
-        secondButtonLabel: 'Staff Assignments',
-        currentSelection: 'Staff List'
+  title: 'Organisms/Headers/ToggleHeader',
+  component: ToggleHeader,
+  tags: ['autodocs'],
+  args: {
+    firstButtonLabel: 'Staff List',
+    secondButtonLabel: 'Staff Assignments',
+    currentSelection: 'Staff List'
+  },
+  argTypes: {
+    firstButtonLabel: {
+      control: 'text',
+      description: 'Label for the first button'
     },
-    argTypes: {
-        firstButtonLabel: {
-            control: 'text',
-            description: 'Label for the first button'
-        },
-        secondButtonLabel: {
-            control: 'text',
-            description: 'Label for the second button'
-        },
-        currentSelection: {
-            control: 'radio',
-            options: ['Staff List', 'Staff Assignments', 'Pool Grid', 'List View'],
-            description: 'Currently selected view'
-        },
-        'update:selection': { action: 'update:selection' }
-    }
+    secondButtonLabel: {
+      control: 'text',
+      description: 'Label for the second button'
+    },
+    currentSelection: {
+      control: 'radio',
+      options: ['Staff List', 'Staff Assignments', 'Pool Grid', 'List View'],
+      description: 'Currently selected view'
+    },
+    'update:selection': { action: 'update:selection' }
+  }
 };
 
 export const Default = {
-    args: {
-        firstButtonLabel: 'Staff List',
-        secondButtonLabel: 'Staff Assignments',
-        currentSelection: 'Staff List'
-    }
+  args: {
+    firstButtonLabel: 'Staff List',
+    secondButtonLabel: 'Staff Assignments',
+    currentSelection: 'Staff List'
+  }
 };
 
 export const StaffAssignmentsSelected = {
-    args: {
-        firstButtonLabel: 'Staff List',
-        secondButtonLabel: 'Staff Assignments',
-        currentSelection: 'Staff Assignments'
-    }
+  args: {
+    firstButtonLabel: 'Staff List',
+    secondButtonLabel: 'Staff Assignments',
+    currentSelection: 'Staff Assignments'
+  }
 };
 
 export const CustomLabels = {
-    args: {
-        firstButtonLabel: 'Pool Grid',
-        secondButtonLabel: 'List View',
-        currentSelection: 'Pool Grid'
-    }
+  args: {
+    firstButtonLabel: 'Pool Grid',
+    secondButtonLabel: 'List View',
+    currentSelection: 'Pool Grid'
+  }
 };

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

@@ -1,41 +1,41 @@
 <template>
   <section class="hidden md:flex flex-col">
-  <div class="bg-bannerBackground px-4 py-4 rounded-xl flex justify-center border border-dropdownSelect">
-    <section class="flex flex-row w-3/4 justify-center bg-poolBox rounded-lg p-0.5 border border-dropdownSelect">
-      <BaseButton
+    <div class="bg-bannerBackground px-4 py-4 rounded-xl flex justify-center border border-dropdownSelect">
+      <section class="flex flex-row w-3/4 justify-center bg-poolBox rounded-lg p-0.5 border border-dropdownSelect">
+        <BaseButton
           :label="firstButtonLabel"
           :selected="view === firstButtonLabel"
           size="md"
           type="whiteSecondary"
           class="mx-2 w-1/2"
           @buttonClick="handleSelection(firstButtonLabel)"
-      />
-      <BaseButton
+        />
+        <BaseButton
           :label="secondButtonLabel"
           :selected="view === secondButtonLabel"
           size="md"
           type="liteGraySecondary"
           class="mx-2 w-1/2"
           @buttonClick="handleSelection(secondButtonLabel)"
-      />
-    </section>
-  </div>
-  <div class="flex w-full justify-between">
-    <ServerConnected v-if="showConnected"  :connectedToServer="connectedToServer" class="mb-2"/>
-    <Toggle v-if="showToggle" :checked="largeCards" label="Bracket Size" @update:checked="handleCardSizeToggle" />
-  </div>
+        />
+      </section>
+    </div>
+    <div class="flex w-full justify-between">
+      <ServerConnected v-if="showConnected" :connectedToServer="connectedToServer" class="mb-2" />
+      <Toggle v-if="showToggle" :checked="largeCards" label="Bracket Size" @update:checked="handleCardSizeToggle" />
+    </div>
   </section>
 </template>
 
 <script>
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
-import Toggle from "../../../Molecules/Inputs/Toggle/Toggle.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import ServerConnected from '../../../Molecules/Indicators/ServerConnected/ServerConnected.vue';
+import Toggle from '../../../Molecules/Inputs/Toggle/Toggle.vue';
 
 export default {
   name: 'ToggleHeader',
   emits: ['update:cardSize', 'update:selection'],
-  components: {Toggle, ServerConnected, BaseButton },
+  components: { Toggle, ServerConnected, BaseButton },
   props: {
     firstButtonLabel: {
       type: String,
@@ -47,7 +47,7 @@ export default {
     },
     currentSelection: {
       type: String,
-      required: true,
+      required: true
     },
     connectedToServer: {
       type: Boolean,
@@ -65,7 +65,6 @@ export default {
       type: Boolean,
       default: true
     }
-
   },
   data() {
     return {
@@ -85,8 +84,8 @@ export default {
     },
     handleCardSizeToggle(value) {
       this.largeCards = !this.largeCards;
-      this.$emit('update:cardSize', value)
+      this.$emit('update:cardSize', value);
     }
   }
 };
-</script>
+</script>