@dcrackel/hematournamentui 1.0.709 → 1.0.711

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

@@ -1,225 +1,226 @@
-<template>
-  <div class="flex flex-col h-full pb-4">
-    <div class="w-full flex justify-center">
-      <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"
-        />
-      </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"
-        />
-      </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" />
-        </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"
-          />
-        </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"
-        />
-      </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"
-          />
-        </div>
-        <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"
-          />
-        </div>
-        <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="mt-1 h-10 w-52">
-          <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"
-        />
-      </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"
-        />
-      </div>
-      <div class="mt-8 h-10 w-52">
-        <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"
-      />
-    </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';
-
-export default {
-  name: 'DirectElimination',
-  components: { DropDownMenu, BaseButton, StepIndicator, BaseText, TitledInput, Toggle, MultiSelect },
-  props: {
-    eventConfig: Object,
-    validation: Object,
-    currentStep: Number,
-    steps: Array,
-    DEFormats: Array
-  },
-  emits: ['update', 'update:back', 'update:submit'],
-  data() {
-    return {
-      localEventConfig: { ...this.eventConfig },
-      selectedFormat: { link: 1, text: 'Single Elimination' }
-    };
-  },
-  computed: {
-    thirdPlaceLabel() {
-      return this.eventConfig.thirdPlaceBout ? '3rd Place Fence Off' : 'Tie for 3rd Place';
-    }
-  },
-  methods: {
-    handleDETimerToggle(value) {
-      this.localEventConfig.DETimer = value;
-      this.$emit('update', { DETimer: value });
-    },
-    handleDETimeChange(value) {
-      this.$emit('update', { DETime: value });
-    },
-    handleDEBoutCountToggle(value) {
-      this.localEventConfig.DEBoutCounter = value;
-      this.$emit('update', { DEBoutCounter: value });
-    },
-    handleDEBoutCountChange(value) {
-      this.$emit('update', { DEBoutCount: value });
-    },
-    handleDEMax(value) {
-      this.localEventConfig.DEMax = value;
-      this.$emit('update', { DEMax: value });
-    },
-    handleDEMaxPointsChange(value) {
-      this.$emit('update', { DEMaxPoints: value });
-    },
-    handleThirdPlaceToggle(value) {
-      this.$emit('update', { thirdPlaceBout: value });
-    },
-    handleBack() {
-      this.$emit('update:back');
-    },
-    handleNext() {
-      this.$emit('update:submit');
-    },
-    handleDEFormatChange(value) {
-      this.selectedFormat = value;
-      this.localEventConfig.DEType = value.text === 'Single Elimination' ? 'single' : 'double';
-      this.$emit('update', { DEType: this.localEventConfig.DEType });
-    }
-  }
-};
-</script>
+<template>
+  <div class="flex flex-col h-full pb-4">
+    <div class="w-full flex justify-center">
+      <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"
+        />
+      </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"
+        />
+      </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" />
+        </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"
+          />
+        </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"
+        />
+      </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"
+          />
+        </div>
+        <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"
+          />
+        </div>
+        <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="mt-1 h-10 w-52">
+          <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"
+        />
+      </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"
+        />
+      </div>
+      <div class="mt-8 h-10 w-52">
+        <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="nextButtonLabel"
+        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';
+
+export default {
+  name: 'DirectElimination',
+  components: { DropDownMenu, BaseButton, StepIndicator, BaseText, TitledInput, Toggle, MultiSelect },
+  props: {
+    nextButtonLabel: { type: String, default: 'Submit' },
+    eventConfig: Object,
+    validation: Object,
+    currentStep: Number,
+    steps: Array,
+    DEFormats: Array
+  },
+  emits: ['update', 'update:back', 'update:submit'],
+  data() {
+    return {
+      localEventConfig: { ...this.eventConfig },
+      selectedFormat: { link: 1, text: 'Single Elimination' }
+    };
+  },
+  computed: {
+    thirdPlaceLabel() {
+      return this.eventConfig.thirdPlaceBout ? '3rd Place Fence Off' : 'Tie for 3rd Place';
+    }
+  },
+  methods: {
+    handleDETimerToggle(value) {
+      this.localEventConfig.DETimer = value;
+      this.$emit('update', { DETimer: value });
+    },
+    handleDETimeChange(value) {
+      this.$emit('update', { DETime: value });
+    },
+    handleDEBoutCountToggle(value) {
+      this.localEventConfig.DEBoutCounter = value;
+      this.$emit('update', { DEBoutCounter: value });
+    },
+    handleDEBoutCountChange(value) {
+      this.$emit('update', { DEBoutCount: value });
+    },
+    handleDEMax(value) {
+      this.localEventConfig.DEMax = value;
+      this.$emit('update', { DEMax: value });
+    },
+    handleDEMaxPointsChange(value) {
+      this.$emit('update', { DEMaxPoints: value });
+    },
+    handleThirdPlaceToggle(value) {
+      this.$emit('update', { thirdPlaceBout: value });
+    },
+    handleBack() {
+      this.$emit('update:back');
+    },
+    handleNext() {
+      this.$emit('update:submit');
+    },
+    handleDEFormatChange(value) {
+      this.selectedFormat = value;
+      this.localEventConfig.DEType = value.text === 'Single Elimination' ? 'single' : 'double';
+      this.$emit('update', { DEType: this.localEventConfig.DEType });
+    }
+  }
+};
+</script>