@dcrackel/hematournamentui 1.0.709 → 1.0.710

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

@@ -1,171 +1,172 @@
-<template>
-  <div class="flex flex-col h-full pb-4">
-    <div class="w-full flex justify-center grow">
-      <StepIndicator :steps="steps" :selected="currentStep" />
-    </div>
-    <div class="w-full flex flex-row justify-center my-4 grow">
-      <BaseText
-        :color="'primaryHighlight'"
-        :size="'2xl'"
-        :text="'Event Customization'"
-        :weight="'normal'"
-        data-testid="text-add-tournament"
-      />
-    </div>
-    <div class="w-full flex flex-row justify-center my-4 grow">
-      <BaseText
-        :color="'quinary'"
-        :size="'sm'"
-        :text="'This section is for event specific customizations. These settings are optional and vary from tournament to tournament.'"
-        :weight="'normal'"
-        data-testid="text-registration"
-      />
-    </div>
-    <div class="mb-4 grow">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'INCLUDE IN RATINGS'" class="border-b my-5" />
-      <Toggle
-        :checked="localEventConfig.IncludeInRatings === true"
-        :label="includeInRatingsUpLabel"
-        :labelLeft="false"
-        @update:checked="handleToggleChange('IncludeInRatings', localEventConfig.IncludeInRatings)"
-      />
-    </div>
-    <div class="mb-4 grow">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'SCORING DIRECTION'" class="border-b my-5" />
-      <Toggle
-        :checked="localEventConfig.PoolScoreDirection === true"
-        :label="countedUpLabel"
-        :labelLeft="false"
-        @update:checked="handleToggleChange('PoolScoreDirection', localEventConfig.PoolScoreDirection)"
-      />
-    </div>
-    <div class="mb-4 grow">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'PENALTIES'" class="border-b mt-5" />
-      <BaseText
-        text="Regardless of this setting, Directors can add a note to any fencer that will stick for the entire event."
-        size="sm"
-        color="quaternary"
-        class="mt-1 mb-5"
-      />
-      <Toggle
-        :checked="localEventConfig.PenaltiesReset === true"
-        :label="penaltyCardsLabel"
-        :labelLeft="false"
-        @update:checked="handleToggleChange('PenaltiesReset', localEventConfig.PenaltiesReset)"
-      />
-    </div>
-    <div class="mb-4 grow">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'EXTRA TRACKING DATA'" class="border-b mt-5" />
-      <BaseText
-        :color="'quaternary'"
-        :size="'sm'"
-        :text="'This will add extra modules to the Director screen. It\'s recommended to enable only this feature if truly necessary.'"
-        :weight="'normal'"
-        class="mt-1 mb-5"
-      />
-      <Toggle
-        :checked="isCountHandshotsEnabled"
-        :label="countingHandshotsLabel"
-        :labelLeft="false"
-        @update:checked="handleToggleChange('CountHandshots')"
-      />
-      <Toggle
-        :checked="localEventConfig.CountDoubles === 'true'"
-        :label="countDoublesLabel"
-        :labelLeft="false"
-        @update:checked="handleToggleChange('CountDoubles', localEventConfig.CountDoubles)"
-      />
-    </div>
-  </div>
-  <div class="flex flex-row justify-center h-12 mt-4">
-    <BaseButton
-      class="w-1/2 ml-1 h-12"
-      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>
-</template>
-
-<script>
-import BaseText from '../../../../Atoms/Text/BaseText.vue';
-import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
-import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
-import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-
-export default {
-  name: 'EventCustomization',
-  components: { BaseButton, StepIndicator, BaseText, Toggle },
-  emits: ['update', 'update:back', 'update:next'],
-  props: {
-    eventConfig: {
-      type: Object,
-      required: true
-    },
-    steps: {
-      type: Array,
-      required: true
-    },
-    currentStep: {
-      type: Number,
-      required: true
-    }
-  },
-  data() {
-    return {
-      localEventConfig: { ...this.eventConfig }
-    };
-  },
-  computed: {
-    includeInRatingsUpLabel() {
-      return this.localEventConfig.IncludeInRatings
-        ? 'Include in M² Ratings - Other Criteria may still need to meet to be included'
-        : 'Exclude from Ratings';
-    },
-    countedUpLabel() {
-      return this.localEventConfig.PoolScoreDirection
-        ? 'Score Counts Up From Zero to Max'
-        : 'Score Starts at Max and Counts Down to Zero';
-    },
-    isCountHandshotsEnabled() {
-      return this.localEventConfig.CountHandshots === true;
-    },
-    countingHandshotsLabel() {
-      return this.localEventConfig.CountHandshots
-        ? 'Handshots Counter Added & Will Be Tracked'
-        : 'Handshots Are Not Counted';
-    },
-    countDoublesLabel() {
-      return this.localEventConfig.CountDoubles ? 'Double Counter Added & Will Be Tracked' : 'Doubles Are Not Counted';
-    },
-    penaltyCardsLabel() {
-      return this.localEventConfig.PenaltiesReset
-        ? 'Penalty Cards Reset After Each Bout'
-        : 'Penalty Cards Stick for the Entire Event';
-    }
-  },
-  methods: {
-    handleBack() {
-      this.$emit('update:back');
-    },
-    handleNext() {
-      this.$emit('update:next', this.eventConfig);
-    },
-    handleToggleChange(key) {
-      this.localEventConfig[key] = this.localEventConfig[key] !== true;
-      this.$emit('update', { [key]: this.localEventConfig[key] });
-    }
-  }
-};
-</script>
+<template>
+  <div class="flex flex-col h-full pb-4">
+    <div class="w-full flex justify-center grow">
+      <StepIndicator :steps="steps" :selected="currentStep" />
+    </div>
+    <div class="w-full flex flex-row justify-center my-4 grow">
+      <BaseText
+        :color="'primaryHighlight'"
+        :size="'2xl'"
+        :text="'Event Customization'"
+        :weight="'normal'"
+        data-testid="text-add-tournament"
+      />
+    </div>
+    <div class="w-full flex flex-row justify-center my-4 grow">
+      <BaseText
+        :color="'quinary'"
+        :size="'sm'"
+        :text="'This section is for event specific customizations. These settings are optional and vary from tournament to tournament.'"
+        :weight="'normal'"
+        data-testid="text-registration"
+      />
+    </div>
+    <div class="mb-4 grow">
+      <BaseText :color="'quaternary'" :size="'sm'" :text="'INCLUDE IN RATINGS'" class="border-b my-5" />
+      <Toggle
+        :checked="localEventConfig.IncludeInRatings === true"
+        :label="includeInRatingsUpLabel"
+        :labelLeft="false"
+        @update:checked="handleToggleChange('IncludeInRatings', localEventConfig.IncludeInRatings)"
+      />
+    </div>
+    <div class="mb-4 grow">
+      <BaseText :color="'quaternary'" :size="'sm'" :text="'SCORING DIRECTION'" class="border-b my-5" />
+      <Toggle
+        :checked="localEventConfig.PoolScoreDirection === true"
+        :label="countedUpLabel"
+        :labelLeft="false"
+        @update:checked="handleToggleChange('PoolScoreDirection', localEventConfig.PoolScoreDirection)"
+      />
+    </div>
+    <div class="mb-4 grow">
+      <BaseText :color="'quaternary'" :size="'sm'" :text="'PENALTIES'" class="border-b mt-5" />
+      <BaseText
+        text="Regardless of this setting, Directors can add a note to any fencer that will stick for the entire event."
+        size="sm"
+        color="quaternary"
+        class="mt-1 mb-5"
+      />
+      <Toggle
+        :checked="localEventConfig.PenaltiesReset === true"
+        :label="penaltyCardsLabel"
+        :labelLeft="false"
+        @update:checked="handleToggleChange('PenaltiesReset', localEventConfig.PenaltiesReset)"
+      />
+    </div>
+    <div class="mb-4 grow">
+      <BaseText :color="'quaternary'" :size="'sm'" :text="'EXTRA TRACKING DATA'" class="border-b mt-5" />
+      <BaseText
+        :color="'quaternary'"
+        :size="'sm'"
+        :text="'This will add extra modules to the Director screen. It\'s recommended to enable only this feature if truly necessary.'"
+        :weight="'normal'"
+        class="mt-1 mb-5"
+      />
+      <Toggle
+        :checked="isCountHandshotsEnabled"
+        :label="countingHandshotsLabel"
+        :labelLeft="false"
+        @update:checked="handleToggleChange('CountHandshots')"
+      />
+      <Toggle
+        :checked="localEventConfig.CountDoubles === true"
+        :label="countDoublesLabel"
+        :labelLeft="false"
+        @update:checked="handleToggleChange('CountDoubles', localEventConfig.CountDoubles)"
+      />
+    </div>
+  </div>
+  <div class="flex flex-row justify-center h-12 mt-4">
+    <BaseButton
+      class="w-1/2 ml-1 h-12"
+      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>
+</template>
+
+<script>
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
+import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+
+export default {
+  name: 'EventCustomization',
+  components: { BaseButton, StepIndicator, BaseText, Toggle },
+  emits: ['update', 'update:back', 'update:next'],
+  props: {
+    nextButtonLabel: { type: String, default: 'Next' },
+    eventConfig: {
+      type: Object,
+      required: true
+    },
+    steps: {
+      type: Array,
+      required: true
+    },
+    currentStep: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      localEventConfig: { ...this.eventConfig }
+    };
+  },
+  computed: {
+    includeInRatingsUpLabel() {
+      return this.localEventConfig.IncludeInRatings
+        ? 'Include in M² Ratings - Other Criteria may still need to meet to be included'
+        : 'Exclude from Ratings';
+    },
+    countedUpLabel() {
+      return this.localEventConfig.PoolScoreDirection
+        ? 'Score Counts Up From Zero to Max'
+        : 'Score Starts at Max and Counts Down to Zero';
+    },
+    isCountHandshotsEnabled() {
+      return this.localEventConfig.CountHandshots === true;
+    },
+    countingHandshotsLabel() {
+      return this.localEventConfig.CountHandshots
+        ? 'Handshots Counter Added & Will Be Tracked'
+        : 'Handshots Are Not Counted';
+    },
+    countDoublesLabel() {
+      return this.localEventConfig.CountDoubles ? 'Double Counter Added & Will Be Tracked' : 'Doubles Are Not Counted';
+    },
+    penaltyCardsLabel() {
+      return this.localEventConfig.PenaltiesReset
+        ? 'Penalty Cards Reset After Each Bout'
+        : 'Penalty Cards Stick for the Entire Event';
+    }
+  },
+  methods: {
+    handleBack() {
+      this.$emit('update:back');
+    },
+    handleNext() {
+      this.$emit('update:next', this.eventConfig);
+    },
+    handleToggleChange(key) {
+      this.localEventConfig[key] = this.localEventConfig[key] !== true;
+      this.$emit('update', { [key]: this.localEventConfig[key] });
+    }
+  }
+};
+</script>