@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,88 +1,133 @@
 <template>
   <div class="flex flex-col h-full pb-4">
     <div class="w-full flex justify-center grow">
-      <StepIndicator :steps="steps" :selected="currentStep"/>
+      <StepIndicator :steps="steps" :selected="currentStep" />
     </div>
     <div class="w-full flex flex-row justify-center my-4 grow">
-      <BaseText :color="'primaryHighlight'" :size="'2xl'" text="DIRECT ELIMINATION PROMOTION" :weight="'normal'"
-                data-testid="text-add-tournament"/>
+      <BaseText
+        :color="'primaryHighlight'"
+        :size="'2xl'"
+        text="DIRECT ELIMINATION PROMOTION"
+        :weight="'normal'"
+        data-testid="text-add-tournament"
+      />
     </div>
 
     <div class="w-full flex mb-3 ml-1 grow">
-      <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="mt-8">
-        <BaseText :color="'quaternary'" :size="'sm'" :text="'DIRECT ELIMINATION PROMOTION CRITERIA'"
-                  class="border-b mt-5"/>
+        <BaseText
+          :color="'quaternary'"
+          :size="'sm'"
+          :text="'DIRECT ELIMINATION PROMOTION CRITERIA'"
+          class="border-b mt-5"
+        />
       </div>
 
       <div class="mt-1 mb-4 grow">
-        <BaseText :color="'quinary'" :size="'sm'"
-                  text="Choose how people are promoted from pools into the elimination bracket."
-                  :weight="'normal'" data-testid="text-registration" class="mb-5"/>
+        <BaseText
+          :color="'quinary'"
+          :size="'sm'"
+          text="Choose how people are promoted from pools into the elimination bracket."
+          :weight="'normal'"
+          data-testid="text-registration"
+          class="mb-5"
+        />
 
         {{ eventConfig.DEPromoteBy }}
-        <DropDownMenu label="" :items="DEPromotionTypes" :selectedItem="selectedItem" :alignEnd="false"
-                      :width="'w-full'" @update:selectedItem="handleDEPromotionTypeChange"/>
+        <DropDownMenu
+          label=""
+          :items="DEPromotionTypes"
+          :selectedItem="selectedItem"
+          :alignEnd="false"
+          :width="'w-full'"
+          @update:selectedItem="handleDEPromotionTypeChange"
+        />
       </div>
 
       <div class="mb-2 flex flex-col">
-        <BaseText :color="'quinary'" :size="'sm'" :text="DEPromotionDescription"
-                  :weight="'normal'" data-testid="text-registration" class="mb-4"/>
-        <TitledInput :inputValue="eventConfig.DEPromotionAmount" :invalid="validation.DEPromotionAmount"
-                     :allowPercent="true" placeholder="Enter Number or Percent.."
-                     title="" @update:value="handleDEPromotionAmountChange"/>
+        <BaseText
+          :color="'quinary'"
+          :size="'sm'"
+          :text="DEPromotionDescription"
+          :weight="'normal'"
+          data-testid="text-registration"
+          class="mb-4"
+        />
+        <TitledInput
+          :inputValue="eventConfig.DEPromotionAmount"
+          :invalid="validation.DEPromotionAmount"
+          :allowPercent="true"
+          placeholder="Enter Number or Percent.."
+          title=""
+          @update:value="handleDEPromotionAmountChange"
+        />
       </div>
     </div>
 
     <div class="grow">
       <div class="mt-8">
-        <BaseText :color="'quaternary'" :size="'sm'" :text="'ORDER OF STATS TO DECIDE PROMOTION'"
-                  class="border-b mt-5"/>
+        <BaseText
+          :color="'quaternary'"
+          :size="'sm'"
+          :text="'ORDER OF STATS TO DECIDE PROMOTION'"
+          class="border-b mt-5"
+        />
       </div>
       <div class="pb-4 -mt-3">
         <MultiSelect
-            label="Select and arrange the statistical criteria that will be used to promote participants to the Direct Elimination (DE) stage. The order of these criteria is crucial as it determines the priority for promotion. Choose up to three stats from the available options."
-            :initialSelectedTags="eventConfig.DEPromotionOrder"
-            :availableTags="['Win Percent', 'Win Count', 'Indicator', 'Points Scored']"
-            @update:selectedTags="handleMultiSelect"
+          label="Select and arrange the statistical criteria that will be used to promote participants to the Direct Elimination (DE) stage. The order of these criteria is crucial as it determines the priority for promotion. Choose up to three stats from the available options."
+          :initialSelectedTags="eventConfig.DEPromotionOrder"
+          :availableTags="['Win Percent', 'Win Count', 'Indicator', 'Points Scored']"
+          @update:selectedTags="handleMultiSelect"
         />
       </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="Next"
-                  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="Next"
+        selected="selected"
+        size="sm"
+        type="primary"
+        @buttonClick="handleNext"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import MultiSelect from "../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue";
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import StepIndicator from "../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue";
-import DropDownMenu from "../../../ComplexInputs/DropDown/DropDownMenu.vue";
-import Toggle from "../../../../Molecules/Inputs/Toggle/Toggle.vue";
-
-const promotionTypeDefaults = {
-  'Top Percent': { typeCode: 'Percent', defaultAmount: '100%' },
-  'Top Count': { typeCode: 'Count', defaultAmount: '16' },
-  'Top Count of Each Pool': { typeCode: 'Top', defaultAmount: '2' }
-};
-
-const defaultPromotionType = { typeCode: 'Percent', defaultAmount: '100%' };
-
-export default {
+import TitledInput from '../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import MultiSelect from '../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue';
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
+import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
+
+const promotionTypeDefaults = {
+  'Top Percent': { typeCode: 'Percent', defaultAmount: '100%' },
+  'Top Count': { typeCode: 'Count', defaultAmount: '16' },
+  'Top Count of Each Pool': { typeCode: 'Top', defaultAmount: '2' }
+};
+
+const defaultPromotionType = { typeCode: 'Percent', defaultAmount: '100%' };
+
+export default {
   name: 'DirectEliminationPromotion',
   emits: ['update', 'update:back', 'update:DEPromotionType', 'update:next'],
-  components: {Toggle, DropDownMenu, StepIndicator, BaseButton, BaseText, TitledInput, MultiSelect},
+  components: { Toggle, DropDownMenu, StepIndicator, BaseButton, BaseText, TitledInput, MultiSelect },
   props: {
     eventConfig: Object,
     validation: Object,
@@ -91,7 +136,7 @@ export default {
   },
   data() {
     return {
-      selectedItem: null,
+      selectedItem: null
     };
   },
   watch: {
@@ -114,9 +159,9 @@ export default {
     },
     DEPromotionTypes() {
       return [
-        {text: 'Top Percent', link: 'Top Percent'},
-        {text: 'Top Count', link: 'Top Count'},
-        {text: 'Top Count of Each Pool', link: 'Top Count of Each Pool'},
+        { text: 'Top Percent', link: 'Top Percent' },
+        { text: 'Top Count', link: 'Top Count' },
+        { text: 'Top Count of Each Pool', link: 'Top Count of Each Pool' }
       ];
     },
     DEPromotionDescription() {
@@ -133,10 +178,10 @@ export default {
   },
   methods: {
     handleDEPromotionAmountChange(value) {
-      this.$emit('update', {DEPromotionAmount: value});
+      this.$emit('update', { DEPromotionAmount: value });
     },
     handleMultiSelect(value) {
-      this.$emit('update', {DEPromotionOrder: value});
+      this.$emit('update', { DEPromotionOrder: value });
     },
     handleBack() {
       this.$emit('update:back');
@@ -144,16 +189,16 @@ export default {
     handleNext() {
       this.$emit('update:next', this.eventConfig);
     },
-    handleDEPromotionTypeChange(item) {
-      this.selectedItem = item;
-
-      const { typeCode, defaultAmount } = promotionTypeDefaults[item.text] || defaultPromotionType;
-
-      this.eventConfig.DEPromotionTypes  = typeCode;
-      this.eventConfig.DEPromotionAmount = defaultAmount;
+    handleDEPromotionTypeChange(item) {
+      this.selectedItem = item;
+
+      const { typeCode, defaultAmount } = promotionTypeDefaults[item.text] || defaultPromotionType;
+
+      this.eventConfig.DEPromotionTypes = typeCode;
+      this.eventConfig.DEPromotionAmount = defaultAmount;
 
       this.$emit('update:DEPromotionType', typeCode);
-    },
+    }
   }
 };
 </script>

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

@@ -1,91 +1,91 @@
 import EditEvent from './EditEventWizard.vue';
-import singleEventMock from "../../../../mocks/singleEventMock.js";
+import singleEventMock from '../../../../mocks/singleEventMock.js';
 
 export default {
-    title: 'Organisms/Wizards/EditEventWizard/EditEventWizard',
-    component: EditEvent,
-    args: {
-        event: singleEventMock,
-        weapons: [
-            {text: 'Longsword', link: 1},
-            {text: 'Saber', link: 2},
-            {text: 'Rapier', link: 3}
-        ],
-        DEFormats: [
-            {text: 'Single Elimination', link: 1},
-            {text: 'Double Elimination', link: 2},
-            {text: 'Single Elimination with Round Robin Semi-Final', link: 3}
-        ],
-        userLevel: 'Admin'
-    },
-    argTypes: {
-        event: {control: 'object'},
-        weapons: {control: 'object'},
-        DEFormats: {control: 'object'},
-        userLevel: {control: 'string'}
-    },
+  title: 'Organisms/Wizards/EditEventWizard/EditEventWizard',
+  component: EditEvent,
+  args: {
+    event: singleEventMock,
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    userLevel: 'Admin'
+  },
+  argTypes: {
+    event: { control: 'object' },
+    weapons: { control: 'object' },
+    DEFormats: { control: 'object' },
+    userLevel: { control: 'string' }
+  }
 };
 
 export const Default = {
-    args: {
-        event: singleEventMock,
-        weapons: [
-            {text: 'Longsword', link: 1},
-            {text: 'Saber', link: 2},
-            {text: 'Rapier', link: 3}
-        ],
-        DEFormats: [
-            {text: 'Single Elimination', link: 1},
-            {text: 'Double Elimination', link: 2},
-            {text: 'Single Elimination with Round Robin Semi-Final', link: 3}
-        ],
-        userLevel: 'Admin'
-    }
+  args: {
+    event: singleEventMock,
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    userLevel: 'Admin'
+  }
 };
 // new Date().toISOString().split('T')[0],
 export const newEventAsClub = {
-    args: {
-        event: {
-            EventId: 0,
-            CountDoubles: false,
-            CountHandshots: false,
-            CutOffNumber: 64,
-            DEBoutCount: 7,
-            DEBoutCounter: false,
-            DEMax: false,
-            DEMaxPoints: 12,
-            DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool'],
-            DEPromotionAmount: "100%",
-            DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-            DETime: 180,
-            DETimer: false,
-            DEType: "single",
-            Date: new Date().toISOString().split('T')[0],
-            EventName: "",
-            NumberOfRings: 2,
-            PenaltiesReset: true,
-            PoolScoreDirection: true,
-            StartTime: "12:00:00",
-            WeaponId: 1,
-            boutCount: 5,
-            boutCounter: false,
-            poolMax: false,
-            poolMaxPoints: 7,
-            poolTime: 180,
-            poolTimer: false,
-            seedWith: "M2 - MeyerSquared",
-            thirdPlaceBout: false
-        },
-        weapons: [
-            {text: 'Longsword', link: 1},
-            {text: 'Saber', link: 2},
-            {text: 'Rapier', link: 3}
-        ],
-        DEFormats: [
-            {text: 'Single Elimination', link: 1},
-            {text: 'Double Elimination', link: 2},
-            {text: 'Single Elimination with Round Robin Semi-Final', link: 3}
-        ],
-        userLevel: 'Club'
-    }
-};
+  args: {
+    event: {
+      EventId: 0,
+      CountDoubles: false,
+      CountHandshots: false,
+      CutOffNumber: 64,
+      DEBoutCount: 7,
+      DEBoutCounter: false,
+      DEMax: false,
+      DEMaxPoints: 12,
+      DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool'],
+      DEPromotionAmount: '100%',
+      DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+      DETime: 180,
+      DETimer: false,
+      DEType: 'single',
+      Date: new Date().toISOString().split('T')[0],
+      EventName: '',
+      NumberOfRings: 2,
+      PenaltiesReset: true,
+      PoolScoreDirection: true,
+      StartTime: '12:00:00',
+      WeaponId: 1,
+      boutCount: 5,
+      boutCounter: false,
+      poolMax: false,
+      poolMaxPoints: 7,
+      poolTime: 180,
+      poolTimer: false,
+      seedWith: 'M2 - MeyerSquared',
+      thirdPlaceBout: false
+    },
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    userLevel: 'Club'
+  }
+};