@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/Wizards/EditEventWizard/DirectElimination/DirectElimination.vue

@@ -1,153 +1,213 @@
 <template>
   <div class="flex flex-col h-full pb-4">
     <div class="w-full flex justify-center">
-      <StepIndicator :steps="steps" :selected="currentStep"/>
+      <StepIndicator :steps="steps" :selected="currentStep" />
     </div>
 
     <div class="grow">
       <div class="w-full flex flex-row justify-center my-4">
-        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'DIRECT ELIMINATION'" :weight="'normal'"
-                  data-testid="text-add-tournament"/>
+        <BaseText
+          :color="'primaryHighlight'"
+          :size="'2xl'"
+          :text="'DIRECT ELIMINATION'"
+          :weight="'normal'"
+          data-testid="text-add-tournament"
+        />
       </div>
       <div class="w-full flex flex-col mb-3 ml-1">
-        <BaseText :color="'quinary'" :size="'sm'"
-                  :text="'Define the criteria for promoting fencers to the Direct Elimination (DE) stage. These options specify how fencers advance based on their performance metrics. Ensure the correct order of criteria to reflect their importance in the promotion process.'"
-                  :weight="'normal'" data-testid="text-registration"/>
+        <BaseText
+          :color="'quinary'"
+          :size="'sm'"
+          :text="'Define the criteria for promoting fencers to the Direct Elimination (DE) stage. These options specify how fencers advance based on their performance metrics. Ensure the correct order of criteria to reflect their importance in the promotion process.'"
+          :weight="'normal'"
+          data-testid="text-registration"
+        />
       </div>
 
       <div class="grow">
         <div class="mb-4 mt-8">
-          <BaseText :color="'quaternary'" :size="'xs'" :text="'TYPE OF DIRECT ELIMINATION'" class="border-b mb-5"/>
+          <BaseText :color="'quaternary'" :size="'xs'" :text="'TYPE OF DIRECT ELIMINATION'" class="border-b mb-5" />
         </div>
         <div class="mb-2 flex flex-col">
-          <BaseText :color="'quinary'" :size="'sm'"
-                    :text="'Please select the format type for the direct elimination bracket of your event.'"
-                    :weight="'normal'" data-testid="text-registration" class="mb-4"/>
-          <DropDownMenu label="Select Format" :items="DEFormats" :selected-item="selectedFormat" :alignEnd="false"
-                        :width="'w-full'" :dropDownWidth="'w-full'" @update:selectedItem="handleDEFormatChange"/>
+          <BaseText
+            :color="'quinary'"
+            :size="'sm'"
+            :text="'Please select the format type for the direct elimination bracket of your event.'"
+            :weight="'normal'"
+            data-testid="text-registration"
+            class="mb-4"
+          />
+          <DropDownMenu
+            label="Select Format"
+            :items="DEFormats"
+            :selected-item="selectedFormat"
+            :alignEnd="false"
+            :width="'w-full'"
+            :dropDownWidth="'w-full'"
+            @update:selectedItem="handleDEFormatChange"
+          />
         </div>
       </div>
 
       <div class="mb-4 mt-8">
-        <BaseText :color="'quaternary'" :size="'xs'" :text="'DIRECT ELIMINATION CONFIGURATION'" class="border-b mb-5"/>
-        <BaseText :color="'quaternary'" :size="'sm'"
-                  :text="'Timer duration is in seconds.'"
-                  :weight="'normal'" class="mt-1"/>
+        <BaseText :color="'quaternary'" :size="'xs'" :text="'DIRECT ELIMINATION CONFIGURATION'" class="border-b mb-5" />
+        <BaseText
+          :color="'quaternary'"
+          :size="'sm'"
+          :text="'Timer duration is in seconds.'"
+          :weight="'normal'"
+          class="mt-1"
+        />
       </div>
       <div class="mb-2 flex">
         <div class="mt-1 h-10 w-52">
-          <Toggle :checked="localEventConfig.DETimer" label="DE Timer" :labelLeft="false"
-                  @update:checked="handleDETimerToggle"/>
+          <Toggle
+            :checked="localEventConfig.DETimer"
+            label="DE Timer"
+            :labelLeft="false"
+            @update:checked="handleDETimerToggle"
+          />
         </div>
-        <TitledInput v-if="localEventConfig.DETimer"
-                     :inputValue="localEventConfig.DETime"
-                     :invalid="validation.DETime"
-                     inputType="number"
-                     placeholder="Enter Time in Seconds"
-                     title="" @update:value="handleDETimeChange"/>
+        <TitledInput
+          v-if="localEventConfig.DETimer"
+          :inputValue="localEventConfig.DETime"
+          :invalid="validation.DETime"
+          inputType="number"
+          placeholder="Enter Time in Seconds"
+          title=""
+          @update:value="handleDETimeChange"
+        />
       </div>
       <div class="mb-2 flex">
         <div class="mt-1 h-10 w-52">
-          <Toggle :checked="localEventConfig.DEBoutCounter"
-                  label="DE Pass Counter"
-                  :labelLeft="false"
-                  inputType="number"
-                  @update:checked="handleDEBoutCountToggle"/>
+          <Toggle
+            :checked="localEventConfig.DEBoutCounter"
+            label="DE Pass Counter"
+            :labelLeft="false"
+            inputType="number"
+            @update:checked="handleDEBoutCountToggle"
+          />
         </div>
-        <TitledInput v-if="localEventConfig.DEBoutCounter" :inputValue="localEventConfig.DEBoutCount"
-                     inputType="number"
-                     :invalid="validation.DEBoutCount"
-                     placeholder="Enter Number of Passes"
-                     title="" @update:value="handleDEBoutCountChange"/>
+        <TitledInput
+          v-if="localEventConfig.DEBoutCounter"
+          :inputValue="localEventConfig.DEBoutCount"
+          inputType="number"
+          :invalid="validation.DEBoutCount"
+          placeholder="Enter Number of Passes"
+          title=""
+          @update:value="handleDEBoutCountChange"
+        />
       </div>
-      <div class="mb-2 flex ">
+      <div class="mb-2 flex">
         <div class="mt-1 h-10 w-52">
-          <Toggle :checked="localEventConfig.DEMax" label="DE Max Points" :labelLeft="false" @update:checked="handleDEMax"/>
+          <Toggle
+            :checked="localEventConfig.DEMax"
+            label="DE Max Points"
+            :labelLeft="false"
+            @update:checked="handleDEMax"
+          />
         </div>
-        <TitledInput v-if="localEventConfig.DEMax"
-                     :inputValue="localEventConfig.DEMaxPoints"
-                     :invalid="validation.DEMaxPoints"
-                     placeholder="Enter DE Max Points"
-                     inputType="number"
-                     title="" @update:value="handleDEMaxPointsChange"/>
+        <TitledInput
+          v-if="localEventConfig.DEMax"
+          :inputValue="localEventConfig.DEMaxPoints"
+          :invalid="validation.DEMaxPoints"
+          placeholder="Enter DE Max Points"
+          inputType="number"
+          title=""
+          @update:value="handleDEMaxPointsChange"
+        />
       </div>
     </div>
 
     <div v-if="localEventConfig.DEType === 'single'" class="grow">
       <div class="mb-4 mt-8">
-        <BaseText :color="'quaternary'" :size="'xs'" :text="'TIE FOR THIRD PLACE OR FENCE OFF FOR THIRD'"
-                  class="border-b mb-5"/>
+        <BaseText
+          :color="'quaternary'"
+          :size="'xs'"
+          :text="'TIE FOR THIRD PLACE OR FENCE OFF FOR THIRD'"
+          class="border-b mb-5"
+        />
       </div>
       <div class="mt-8 h-10 w-52">
-        <Toggle :checked="localEventConfig.thirdPlaceBout" :label="thirdPlaceLabel" :labelLeft="false"
-                @update:checked="handleThirdPlaceToggle"/>
+        <Toggle
+          :checked="localEventConfig.thirdPlaceBout"
+          :label="thirdPlaceLabel"
+          :labelLeft="false"
+          @update:checked="handleThirdPlaceToggle"
+        />
       </div>
     </div>
 
     <div class="flex flex-row justify-center h-12 mt-4">
-      <BaseButton class="w-1/2 ml-1" color="neutral" label="Back" size="sm" type="primary" @buttonClick="handleBack"/>
-      <BaseButton class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12" color="neutral" label="Submit"
-                  selected=selected size="sm" type="primary"
-                  @buttonClick="handleNext"/>
+      <BaseButton class="w-1/2 ml-1" color="neutral" label="Back" size="sm" type="primary" @buttonClick="handleBack" />
+      <BaseButton
+        class="w-1/2 mr-1 transition-all duration-300 ease-in-out h-12"
+        color="neutral"
+        label="Submit"
+        selected="selected"
+        size="sm"
+        type="primary"
+        @buttonClick="handleNext"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import Toggle from "../../../../Molecules/Inputs/Toggle/Toggle.vue";
-import MultiSelect from "../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue";
-import StepIndicator from "../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue";
-import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import DropDownMenu from "../../../ComplexInputs/DropDown/DropDownMenu.vue";
+import TitledInput from '../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
+import MultiSelect from '../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue';
+import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
 
 export default {
   name: 'DirectElimination',
-  components: {DropDownMenu, BaseButton, StepIndicator, BaseText, TitledInput, Toggle, MultiSelect},
+  components: { DropDownMenu, BaseButton, StepIndicator, BaseText, TitledInput, Toggle, MultiSelect },
   props: {
     eventConfig: Object,
     validation: Object,
     currentStep: Number,
     steps: Array,
-    DEFormats: Array,
+    DEFormats: Array
   },
   emits: ['update', 'update:back', 'update:submit'],
   data() {
     return {
       localEventConfig: { ...this.eventConfig },
-      selectedFormat: {link: 1, text: 'Single Elimination'}
+      selectedFormat: { link: 1, text: 'Single Elimination' }
     };
   },
   computed: {
     thirdPlaceLabel() {
-      return this.eventConfig.thirdPlaceBout ? '3rd Place Fence Off' : 'Tie for 3rd Place'
+      return this.eventConfig.thirdPlaceBout ? '3rd Place Fence Off' : 'Tie for 3rd Place';
     }
   },
   methods: {
     handleDETimerToggle(value) {
       this.localEventConfig.DETimer = value;
-      this.$emit('update', {DETimer: value});
+      this.$emit('update', { DETimer: value });
     },
     handleDETimeChange(value) {
-      this.$emit('update', {DETime: value});
+      this.$emit('update', { DETime: value });
     },
     handleDEBoutCountToggle(value) {
       this.localEventConfig.DEBoutCounter = value;
-      this.$emit('update', {DEBoutCounter: value});
+      this.$emit('update', { DEBoutCounter: value });
     },
     handleDEBoutCountChange(value) {
-      this.$emit('update', {DEBoutCount: value});
+      this.$emit('update', { DEBoutCount: value });
     },
     handleDEMax(value) {
       this.localEventConfig.DEMax = value;
-      this.$emit('update', {DEMax: value});
+      this.$emit('update', { DEMax: value });
     },
     handleDEMaxPointsChange(value) {
-      this.$emit('update', {DEMaxPoints: value});
+      this.$emit('update', { DEMaxPoints: value });
     },
     handleThirdPlaceToggle(value) {
-      this.$emit('update', {thirdPlaceBout: value});
+      this.$emit('update', { thirdPlaceBout: value });
     },
     handleBack() {
       this.$emit('update:back');
@@ -158,7 +218,7 @@ export default {
     handleDEFormatChange(value) {
       this.selectedFormat = value;
       this.localEventConfig.DEType = value.text === 'Single Elimination' ? 'single' : 'double';
-      this.$emit('update', {DEType: this.localEventConfig.DEType});
+      this.$emit('update', { DEType: this.localEventConfig.DEType });
     }
   }
 };

package/src/stories/Organisms/Wizards/EditEventWizard/DirectEliminationPromotion/DirectEliminationPromotion.stories.js

@@ -1,97 +1,96 @@
 import directEliminationPromotion from './DirectEliminationPromotion.vue';
 
 export default {
-    title: 'Organisms/Wizards/EditEventWizard/Promotion/DirectEliminationPromotion',
-    component: directEliminationPromotion,
-    args: {
-        eventConfig: {
-            seedWith: 'M2 - MeyerSquared',
-            maxFencers: false,
-            maxFencerCount: 64,
-            boutCounter: false,
-            boutCount: 5,
-            poolTimer: false,
-            poolMax: true,
-            DEMax: true,
-            ThirdPlaceBout: true,
-            poolTime: 120,
-            poolMaxPoints: 7,
-            DETimer: false,
-            DETime: 120,
-            DEBoutCounter: false,
-            DEBoutCount: 7,
-            DEMaxPoints: 7,
-            DENumOfPromotion: '100%',
-            DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
-            DEPromoteBy: ['Top Percent','Top Count','Top Count of Each Pool']
-        },
-        validation: {
-            name: false,
-            imageLink: false,
-            address: false,
-            coordinates: false,
-            startDate: false,
-            totalDays: false,
-            description: false,
-            visibility: false
-        },
-        currentStep: Number,
-        steps: [
-            {name: "Basic Info", icon: "fa-circle-info"},
-            {name: "Customization", icon: "fa-star"},
-            {name: "Pool Setup", icon: "fa-table-columns"},
-            {name: "DE Promotion", icon: "fa-list"},
-            {name: "Direct Elimination", icon: "fa-diagram-sankey"}
-        ]
+  title: 'Organisms/Wizards/EditEventWizard/Promotion/DirectEliminationPromotion',
+  component: directEliminationPromotion,
+  args: {
+    eventConfig: {
+      seedWith: 'M2 - MeyerSquared',
+      maxFencers: false,
+      maxFencerCount: 64,
+      boutCounter: false,
+      boutCount: 5,
+      poolTimer: false,
+      poolMax: true,
+      DEMax: true,
+      ThirdPlaceBout: true,
+      poolTime: 120,
+      poolMaxPoints: 7,
+      DETimer: false,
+      DETime: 120,
+      DEBoutCounter: false,
+      DEBoutCount: 7,
+      DEMaxPoints: 7,
+      DENumOfPromotion: '100%',
+      DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
+      DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool']
     },
-    argTypes: {
-        event: { control: 'object' },
-        seedWithOptions: { control: 'Array' },
-        validation: { control: 'object' }
+    validation: {
+      name: false,
+      imageLink: false,
+      address: false,
+      coordinates: false,
+      startDate: false,
+      totalDays: false,
+      description: false,
+      visibility: false
     },
+    currentStep: Number,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Customization', icon: 'fa-star' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'DE Promotion', icon: 'fa-list' },
+      { name: 'Direct Elimination', icon: 'fa-diagram-sankey' }
+    ]
+  },
+  argTypes: {
+    event: { control: 'object' },
+    seedWithOptions: { control: 'Array' },
+    validation: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        eventConfig: {
-            seedWith: 'M2 - MeyerSquared',
-            maxFencers: false,
-            maxFencerCount: 64,
-            boutCounter: false,
-            boutCount: 5,
-            poolTimer: false,
-            poolMax: true,
-            DEMax: true,
-            ThirdPlaceBout: true,
-            poolTime: 120,
-            poolMaxPoints: 7,
-            DETimer: false,
-            DETime: 120,
-            DEBoutCounter: false,
-            DEBoutCount: 7,
-            DEMaxPoints: 7,
-            DEPromotionAmount: '100%',
-            DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
-            DEPromoteBy: ['Top Percent','Top Count','Top Count of Each Pool']
-
-        },
-        validation: {
-            name: false,
-            imageLink: false,
-            address: false,
-            coordinates: false,
-            startDate: false,
-            totalDays: false,
-            description: false,
-            visibility: false
-        },
-        currentStep: 2,
-        steps: [
-            {name: "Basic Info", icon: "fa-circle-info"},
-            {name: "Customization", icon: "fa-star"},
-            {name: "Pool Setup", icon: "fa-table-columns"},
-            {name: "DE Promotion", icon: "fa-list"},
-            {name: "Direct Elimination", icon: "fa-diagram-sankey"}
-        ]
-    }
+  args: {
+    eventConfig: {
+      seedWith: 'M2 - MeyerSquared',
+      maxFencers: false,
+      maxFencerCount: 64,
+      boutCounter: false,
+      boutCount: 5,
+      poolTimer: false,
+      poolMax: true,
+      DEMax: true,
+      ThirdPlaceBout: true,
+      poolTime: 120,
+      poolMaxPoints: 7,
+      DETimer: false,
+      DETime: 120,
+      DEBoutCounter: false,
+      DEBoutCount: 7,
+      DEMaxPoints: 7,
+      DEPromotionAmount: '100%',
+      DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
+      DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool']
+    },
+    validation: {
+      name: false,
+      imageLink: false,
+      address: false,
+      coordinates: false,
+      startDate: false,
+      totalDays: false,
+      description: false,
+      visibility: false
+    },
+    currentStep: 2,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Customization', icon: 'fa-star' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'DE Promotion', icon: 'fa-list' },
+      { name: 'Direct Elimination', icon: 'fa-diagram-sankey' }
+    ]
+  }
 };