@dcrackel/hematournamentui 1.0.711 → 1.0.712

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

@@ -1,366 +1,372 @@
-<template>
-  <div class="p-4" :class="{ 'max-h-screen overflow-y-auto': !editMode }">
-    <fieldset :key="draftVersion" :disabled="saving" :inert="saving" :aria-busy="saving" class="min-w-0 border-0 p-0">
-      <BasicEventInfo
-        v-if="currentStep === 1"
-        :eventConfig="eventConfig"
-        :weapons="weapons"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :nextButtonLabel="nextButtonLabel"
-        :userLevel="userLevel"
-        @update="handleValueChange"
-        @update:back="handleCancel"
-        @update:next="handleUpdate"
-      />
-      <EventCustomization
-        v-if="currentStep === 2"
-        :eventConfig="eventConfig"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :nextButtonLabel="nextButtonLabel"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
-      />
-      <PoolConfiguration
-        v-if="currentStep === 3"
-        :eventConfig="eventConfig"
-        :seedWithOptions="seedWithOptions"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :nextButtonLabel="nextButtonLabel"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
-      />
-      <DirectEliminationPromotion
-        v-if="currentStep === 4"
-        :eventConfig="eventConfig"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :nextButtonLabel="nextButtonLabel"
-        @update="handleValueChange"
-        @update:DEPromotionType="handleDEPromotionType"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
-      />
-      <DirectElimination
-        v-if="currentStep === 5"
-        :eventConfig="eventConfig"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :nextButtonLabel="nextButtonLabel"
-        :DEFormats="DEFormats"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:submit="handleSubmit"
-      />
-    </fieldset>
-    <p role="status" aria-live="polite" aria-atomic="true" class="mt-3 min-h-5 text-sm text-primaryHighlight">
-      {{ saving ? 'Saving changes…' : saveNotice }}
-    </p>
-    <p v-if="saveError" role="alert" class="mt-2 text-sm text-alarm">{{ saveError }}</p>
-  </div>
-</template>
-
-<script>
-import BasicEventInfo from './BasicEventInfo/BasicEventInfo.vue';
-import { validatePrice } from '../../../Util/Validations/PriceValidation.js';
-import PoolConfiguration from './PoolConfiguration/PoolConfiguration.vue';
-import DirectElimination from './DirectElimination/DirectElimination.vue';
-import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import StepIndicator from '../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
-import DirectEliminationPromotion from './DirectEliminationPromotion/DirectEliminationPromotion.vue';
-import EventCustomization from '../../..//Organisms/Wizards/EditEventWizard/EventCustomization/EventCustomization.vue';
-
-const ruleValueIsTrue = (rule, fallbackField) =>
-  rule.RuleValue === 'true' || rule.RuleValue === true || rule[fallbackField] === true;
-
-const rulePatchCreators = {
-  1: rule => ({ poolTime: rule.RuleValue, poolTimer: true }),
-  2: rule => ({ poolMaxPoints: rule.RuleValue, poolMax: true }),
-  3: rule => ({ DETime: rule.RuleValue, DETimer: true }),
-  4: rule => ({ DEMaxPoints: rule.RuleValue, DEMax: true }),
-  5: rule => ({ thirdPlaceBout: ruleValueIsTrue(rule, 'thirdPlaceBout') }),
-  6: rule => ({ boutCount: rule.RuleValue, boutCounter: true }),
-  7: rule => ({ DEBoutCount: rule.RuleValue, DEBoutCounter: true }),
-  9: rule => ({ DEPromotionOrder: rule.RuleValue.split(',') }),
-  10: rule => ({ DEPromotionAmount: rule.RuleValue }),
-  11: rule => ({ seedWith: rule.RuleValue }),
-  14: rule => ({ CutOffNumber: rule.RuleValue }),
-  15: rule => ({ DEType: rule.RuleValue }),
-  16: rule => ({ PoolScoreDirection: ruleValueIsTrue(rule, 'PoolScoreDirection') }),
-  17: rule => ({ DEPromoteBy: rule.RuleValue }),
-  19: rule => ({ CountHandshots: ruleValueIsTrue(rule, 'CountHandshots') }),
-  20: rule => ({ CountDoubles: ruleValueIsTrue(rule, 'CountDoubles') }),
-  21: rule => ({ PenaltiesReset: ruleValueIsTrue(rule, 'PenaltiesReset') }),
-  22: rule => ({ IncludeInRatings: ruleValueIsTrue(rule, 'IncludeInRatings') })
-};
-
-const createRulePatch = rule => (rulePatchCreators[rule.RuleId] || (() => ({})))(rule);
-
-const applyRulesToEventConfig = (eventConfig, rules) =>
-  rules.reduce((currentConfig, rule) => ({ ...currentConfig, ...createRulePatch(rule) }), { ...eventConfig });
-
-const cloneEvent = event => ({
-  ...(event || {}),
-  rules: Array.isArray(event?.rules) ? event.rules.map(rule => ({ ...rule })) : []
-});
-
-const createEventConfig = event => ({
-  EventName: event.EventName,
-  EventPrice: event.EventPrice ?? '',
-  Date: event.startDate ?? event.Date,
-  StartTime: event.startTime ?? event.StartTime,
-  NumberOfRings: event.NumberOfRings,
-  WeaponId: event.WeaponId,
-  seedWith: 'M2 - MeyerSquared',
-  CutOffNumber: undefined,
-  boutCounter: false,
-  boutCount: 5,
-  poolTimer: false,
-  poolMax: false,
-  DEMax: false,
-  thirdPlaceBout: false,
-  poolTime: 180,
-  poolMaxPoints: 7,
-  PoolScoreDirection: true,
-  DETimer: false,
-  DETime: 180,
-  DEBoutCounter: false,
-  DEBoutCount: 7,
-  DEMaxPoints: 12,
-  DEPromotionAmount: '100%',
-  DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-  DEPromoteBy: 'Percent',
-  DEType: 'single',
-  CountHandshots: false,
-  CountDoubles: false,
-  PenaltiesReset: true,
-  IncludeInRatings: event.IncludeInRatings ?? true
-});
-
-export default {
-  name: 'EditEventWizard',
-  components: {
-    EventCustomization,
-    DirectEliminationPromotion,
-    StepIndicator,
-    BasicEventInfo,
-    PoolConfiguration,
-    DirectElimination,
-    BaseButton
-  },
-  emits: ['update:submit', 'update:cancel', 'save:step', 'navigate:step', 'update:dirty'],
-  props: {
-    editMode: { type: Boolean, default: false },
-    step: { type: Number, default: 1 },
-    saving: { type: Boolean, default: false },
-    saveError: { type: String, default: '' },
-    saveNotice: { type: String, default: '' },
-
-    event: {
-      type: Object
-    },
-    weapons: {
-      type: Array,
-      required: true
-    },
-    saveButtonLabel: {
-      type: String,
-      default: 'Save'
-    },
-    DEFormats: {
-      type: Array,
-      default: () => [
-        { link: 1, text: 'Single Elimination' },
-        { link: 2, text: 'Double Elimination' }
-      ]
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  data() {
-    return {
-      currentStep: this.step,
-      localEvent: cloneEvent(this.event),
-      hasClickedNext: false,
-      validation: {
-        EventName: { invalid: false, message: '' },
-        EventPrice: { invalid: false, message: '' }
-      },
-      eventConfig: createEventConfig(this.event),
-      savedDraft: '',
-      draftVersion: 0,
-      seedWithOptions: [
-        { text: 'M2 - MeyerSquared', link: 'M2' },
-        { text: 'HR - Hema Rating', link: 'HR' },
-        { text: 'Manual', link: 'MN' }
-      ],
-      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' }
-      ]
-    };
-  },
-  computed: {
-    nextButtonLabel() {
-      if (!this.editMode) return this.currentStep === 5 ? 'Submit' : 'Next';
-      return this.currentStep === 5 ? 'Save' : 'Save and Continue';
-    }
-  },
-  mounted() {
-    this.resetDraft();
-  },
-  watch: {
-    event() {
-      this.resetDraft();
-    },
-    step(value) {
-      if (Number.isInteger(value) && value >= 1 && value <= this.steps.length) this.currentStep = value;
-    }
-  },
-  methods: {
-    resetDraft() {
-      this.localEvent = cloneEvent(this.event);
-      this.eventConfig = applyRulesToEventConfig(createEventConfig(this.event), this.localEvent.rules);
-      if (typeof this.event.IncludeInRatings === 'boolean')
-        this.eventConfig.IncludeInRatings = this.event.IncludeInRatings;
-      this.savedDraft = JSON.stringify(this.eventConfig);
-      this.draftVersion += 1;
-      this.publishDirtyState();
-    },
-    publishDirtyState() {
-      if (this.editMode) this.$emit('update:dirty', JSON.stringify(this.eventConfig) !== this.savedDraft);
-    },
-    handleValueChange(change) {
-      if (this.saving) return;
-      this.eventConfig = { ...this.eventConfig, ...change };
-      this.localEvent = { ...this.localEvent, ...change };
-      this.publishDirtyState();
-      if (this.hasClickedNext) this.validateAll();
-    },
-    handleDEPromotionType(value) {
-      this.handleValueChange({ DEPromoteBy: value });
-    },
-    validateAll() {
-      let isValid = true;
-      this.validation.EventPrice = validatePrice(this.eventConfig.EventPrice);
-      const forbiddenChars = /[\/\\'"=:*<>|?&!@#$%^(){}[\]]/g;
-
-      if (!this.eventConfig.EventName || this.eventConfig.EventName.trim().length < 4) {
-        this.validation.EventName = {
-          invalid: true,
-          message: 'Event Name must be at least 3 characters long.'
-        };
-        isValid = false;
-        return isValid;
-      }
-
-      if (forbiddenChars.test(this.eventConfig.EventName)) {
-        this.validation.EventName = {
-          invalid: true,
-          message: 'Event Name contains invalid characters.'
-        };
-        isValid = false;
-        return isValid;
-      }
-
-      this.validation.EventName = { invalid: false, message: '' };
-      return !this.validation.EventPrice.invalid;
-    },
-    handleUpdate(eventConfig = {}) {
-      if (this.saving) return;
-      this.hasClickedNext = true;
-      if (!this.editMode) this.eventConfig = { ...this.eventConfig, ...eventConfig };
-      if (!this.validateAll()) return;
-      if (this.editMode) {
-        this.requestStepSave();
-        return;
-      }
-      this.currentStep += 1;
-    },
-    handleBack() {
-      if (this.saving) return;
-      if (this.editMode) {
-        this.$emit('navigate:step', this.currentStep - 1);
-        return;
-      }
-      this.currentStep -= 1;
-    },
-    convertEventConfigToRules(eventConfig) {
-      const mapping = {
-        poolTime: { RuleId: 1, RuleName: 'PoolTime', Context: 'pool', dependsOn: 'poolTimer' },
-        poolMaxPoints: { RuleId: 2, RuleName: 'PoolMaxPoints', Context: 'pool', dependsOn: 'poolMax' },
-        DETime: { RuleId: 3, RuleName: 'DETime', Context: 'de', dependsOn: 'DETimer' },
-        DEMaxPoints: { RuleId: 4, RuleName: 'DEMaxPoints', Context: 'de', dependsOn: 'DEMax' },
-        thirdPlaceBout: { RuleId: 5, RuleName: 'DE3rdFenceOff', Context: 'de' },
-        boutCount: { RuleId: 6, RuleName: 'PoolNumOfPasses', Context: 'pool', dependsOn: 'boutCounter' },
-        DEBoutCount: { RuleId: 7, RuleName: 'DENumOfPasses', Context: 'de', dependsOn: 'DEBoutCounter' },
-        DEPromotionAmount: { RuleId: 10, RuleName: 'DENumOfPromotion', Context: 'de' },
-        DEPromotionOrder: { RuleId: 9, RuleName: 'DEPromotionOrder', Context: 'de' },
-        seedWith: { RuleId: 11, RuleName: 'PoolSeeding', Context: 'pool' },
-        CutOffNumber: { RuleId: 14, RuleName: 'CutOffNumber', Context: 'event' },
-        DEType: { RuleId: 15, RuleName: 'DEType', Context: 'de' },
-        PoolScoreDirection: { RuleId: 16, RuleName: 'PoolScoreDirection', Context: 'de' },
-        DEPromoteBy: { RuleId: 17, RuleName: 'DEPromoteBy', Context: 'de' },
-        CountHandshots: { RuleId: 19, RuleName: 'CountHandshots', Context: 'event' },
-        CountDoubles: { RuleId: 20, RuleName: 'CountDoubles', Context: 'event' },
-        PenaltiesReset: { RuleId: 21, RuleName: 'PenaltiesReset', Context: 'event' },
-        IncludeInRatings: { RuleId: 22, RuleName: 'IncludeInRatings', Context: 'event', onlyWhenExisting: true }
-      };
-
-      return Object.entries(eventConfig)
-        .filter(([key, value]) => mapping[key] && value !== undefined)
-        .filter(
-          ([key]) =>
-            !mapping[key].onlyWhenExisting ||
-            this.localEvent.rules.some(rule => Number(rule.RuleId) === mapping[key].RuleId)
-        )
-        .filter(([key]) => {
-          const dependency = mapping[key].dependsOn;
-          return !dependency || eventConfig[dependency];
-        })
-        .map(([key, value]) => ({
-          RuleId: mapping[key].RuleId,
-          RuleName: mapping[key].RuleName,
-          RuleValue: Array.isArray(value) ? value.join(',') : String(value?.link ?? value),
-          Context: mapping[key].Context
-        }));
-    },
-    buildEventPayload() {
-      return {
-        ...cloneEvent(this.localEvent),
-        ...this.eventConfig,
-        EventPrice: Number(this.eventConfig.EventPrice),
-        rules: this.convertEventConfigToRules(this.eventConfig)
-      };
-    },
-    requestStepSave() {
-      this.$emit('save:step', { event: this.buildEventPayload(), step: this.currentStep });
-    },
-    handleSubmit() {
-      if (this.saving || !this.validateAll()) return;
-      if (this.editMode) {
-        this.requestStepSave();
-        return;
-      }
-      this.$emit('update:submit', this.buildEventPayload());
-    },
-    handleCancel() {
-      if (this.saving) return;
-      this.$emit('update:cancel');
-    }
-  }
-};
-</script>
+<template>
+  <div class="p-4" :class="{ 'max-h-screen overflow-y-auto': !editMode }">
+    <fieldset :key="draftVersion" :disabled="saving" :inert="saving" :aria-busy="saving" class="min-w-0 border-0 p-0">
+      <BasicEventInfo
+        v-if="currentStep === 1"
+        :eventConfig="eventConfig"
+        :weapons="weapons"
+        :validation="validation"
+        :steps="steps"
+        :currentStep="currentStep - 1"
+        :nextButtonLabel="nextButtonLabel"
+        :userLevel="userLevel"
+        @update="handleValueChange"
+        @update:back="handleCancel"
+        @update:next="handleUpdate"
+      />
+      <EventCustomization
+        v-if="currentStep === 2"
+        :eventConfig="eventConfig"
+        :steps="steps"
+        :currentStep="currentStep - 1"
+        :nextButtonLabel="nextButtonLabel"
+        @update="handleValueChange"
+        @update:back="handleBack"
+        @update:next="handleUpdate"
+      />
+      <PoolConfiguration
+        v-if="currentStep === 3"
+        :eventConfig="eventConfig"
+        :seedWithOptions="seedWithOptions"
+        :validation="validation"
+        :steps="steps"
+        :currentStep="currentStep - 1"
+        :nextButtonLabel="nextButtonLabel"
+        @update="handleValueChange"
+        @update:back="handleBack"
+        @update:next="handleUpdate"
+      />
+      <DirectEliminationPromotion
+        v-if="currentStep === 4"
+        :eventConfig="eventConfig"
+        :validation="validation"
+        :steps="steps"
+        :currentStep="currentStep - 1"
+        :nextButtonLabel="nextButtonLabel"
+        @update="handleValueChange"
+        @update:DEPromotionType="handleDEPromotionType"
+        @update:back="handleBack"
+        @update:next="handleUpdate"
+      />
+      <DirectElimination
+        v-if="currentStep === 5"
+        :eventConfig="eventConfig"
+        :validation="validation"
+        :steps="steps"
+        :currentStep="currentStep - 1"
+        :nextButtonLabel="nextButtonLabel"
+        :DEFormats="DEFormats"
+        @update="handleValueChange"
+        @update:back="handleBack"
+        @update:submit="handleSubmit"
+      />
+    </fieldset>
+    <p role="status" aria-live="polite" aria-atomic="true" class="mt-3 min-h-5 text-sm text-primaryHighlight">
+      {{ saving ? 'Saving changes…' : saveNotice }}
+    </p>
+    <p v-if="saveError" role="alert" class="mt-2 text-sm text-alarm">{{ saveError }}</p>
+  </div>
+</template>
+
+<script>
+import BasicEventInfo from './BasicEventInfo/BasicEventInfo.vue';
+import { validatePrice } from '../../../Util/Validations/PriceValidation.js';
+import PoolConfiguration from './PoolConfiguration/PoolConfiguration.vue';
+import DirectElimination from './DirectElimination/DirectElimination.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import StepIndicator from '../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+import DirectEliminationPromotion from './DirectEliminationPromotion/DirectEliminationPromotion.vue';
+import EventCustomization from '../../..//Organisms/Wizards/EditEventWizard/EventCustomization/EventCustomization.vue';
+
+const ruleValueIsTrue = (rule, fallbackField) =>
+  rule.RuleValue === 'true' || rule.RuleValue === true || rule[fallbackField] === true;
+
+const rulePatchCreators = {
+  1: rule => ({ poolTime: rule.RuleValue, poolTimer: true }),
+  2: rule => ({ poolMaxPoints: rule.RuleValue, poolMax: true }),
+  3: rule => ({ DETime: rule.RuleValue, DETimer: true }),
+  4: rule => ({ DEMaxPoints: rule.RuleValue, DEMax: true }),
+  5: rule => ({ thirdPlaceBout: ruleValueIsTrue(rule, 'thirdPlaceBout') }),
+  6: rule => ({ boutCount: rule.RuleValue, boutCounter: true }),
+  7: rule => ({ DEBoutCount: rule.RuleValue, DEBoutCounter: true }),
+  9: rule => ({ DEPromotionOrder: rule.RuleValue.split(',') }),
+  10: rule => ({ DEPromotionAmount: rule.RuleValue }),
+  11: rule => ({ seedWith: rule.RuleValue }),
+  14: rule => ({ CutOffNumber: rule.RuleValue }),
+  15: rule => ({ DEType: rule.RuleValue }),
+  16: rule => ({ PoolScoreDirection: ruleValueIsTrue(rule, 'PoolScoreDirection') }),
+  17: rule => ({ DEPromoteBy: rule.RuleValue }),
+  19: rule => ({ CountHandshots: ruleValueIsTrue(rule, 'CountHandshots') }),
+  20: rule => ({ CountDoubles: ruleValueIsTrue(rule, 'CountDoubles') }),
+  21: rule => ({ PenaltiesReset: ruleValueIsTrue(rule, 'PenaltiesReset') }),
+  22: rule => ({ IncludeInRatings: ruleValueIsTrue(rule, 'IncludeInRatings') })
+};
+
+const createRulePatch = rule => (rulePatchCreators[rule.RuleId] || (() => ({})))(rule);
+
+const applyRulesToEventConfig = (eventConfig, rules) =>
+  rules.reduce((currentConfig, rule) => ({ ...currentConfig, ...createRulePatch(rule) }), { ...eventConfig });
+
+const cloneEvent = event => ({
+  ...(event || {}),
+  rules: Array.isArray(event?.rules) ? event.rules.map(rule => ({ ...rule })) : []
+});
+
+const createEventConfig = event => ({
+  EventName: event.EventName,
+  EventPrice: event.EventPrice ?? '',
+  Date: event.startDate ?? event.Date,
+  StartTime: event.startTime ?? event.StartTime,
+  NumberOfRings: event.NumberOfRings,
+  WeaponId: event.WeaponId,
+  seedWith: 'M2 - MeyerSquared',
+  CutOffNumber: undefined,
+  WaitlistEnabled: event.WaitlistEnabled ?? true,
+  boutCounter: false,
+  boutCount: 5,
+  poolTimer: false,
+  poolMax: false,
+  DEMax: false,
+  thirdPlaceBout: false,
+  poolTime: 180,
+  poolMaxPoints: 7,
+  PoolScoreDirection: true,
+  DETimer: false,
+  DETime: 180,
+  DEBoutCounter: false,
+  DEBoutCount: 7,
+  DEMaxPoints: 12,
+  DEPromotionAmount: '100%',
+  DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+  DEPromoteBy: 'Percent',
+  DEType: 'single',
+  CountHandshots: false,
+  CountDoubles: false,
+  PenaltiesReset: true,
+  IncludeInRatings: event.IncludeInRatings ?? true
+});
+
+export default {
+  name: 'EditEventWizard',
+  components: {
+    EventCustomization,
+    DirectEliminationPromotion,
+    StepIndicator,
+    BasicEventInfo,
+    PoolConfiguration,
+    DirectElimination,
+    BaseButton
+  },
+  emits: ['update:submit', 'update:cancel', 'save:step', 'navigate:step', 'update:dirty'],
+  props: {
+    editMode: { type: Boolean, default: false },
+    step: { type: Number, default: 1 },
+    saving: { type: Boolean, default: false },
+    saveError: { type: String, default: '' },
+    saveNotice: { type: String, default: '' },
+
+    event: {
+      type: Object
+    },
+    weapons: {
+      type: Array,
+      required: true
+    },
+    saveButtonLabel: {
+      type: String,
+      default: 'Save'
+    },
+    DEFormats: {
+      type: Array,
+      default: () => [
+        { link: 1, text: 'Single Elimination' },
+        { link: 2, text: 'Double Elimination' }
+      ]
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    }
+  },
+  data() {
+    return {
+      currentStep: this.step,
+      localEvent: cloneEvent(this.event),
+      hasClickedNext: false,
+      validation: {
+        EventName: { invalid: false, message: '' },
+        EventPrice: { invalid: false, message: '' }
+      },
+      eventConfig: createEventConfig(this.event),
+      savedDraft: '',
+      draftVersion: 0,
+      seedWithOptions: [
+        { text: 'M2 - MeyerSquared', link: 'M2' },
+        { text: 'HR - Hema Rating', link: 'HR' },
+        { text: 'Manual', link: 'MN' }
+      ],
+      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' }
+      ]
+    };
+  },
+  computed: {
+    nextButtonLabel() {
+      if (!this.editMode) return this.currentStep === 5 ? 'Submit' : 'Next';
+      return this.currentStep === 5 ? 'Save' : 'Save and Continue';
+    }
+  },
+  mounted() {
+    this.resetDraft();
+  },
+  watch: {
+    event() {
+      this.resetDraft();
+    },
+    step(value) {
+      if (Number.isInteger(value) && value >= 1 && value <= this.steps.length) this.currentStep = value;
+    }
+  },
+  methods: {
+    resetDraft() {
+      this.localEvent = cloneEvent(this.event);
+      this.eventConfig = applyRulesToEventConfig(createEventConfig(this.event), this.localEvent.rules);
+      if (typeof this.event.IncludeInRatings === 'boolean')
+        this.eventConfig.IncludeInRatings = this.event.IncludeInRatings;
+      this.savedDraft = JSON.stringify(this.eventConfig);
+      this.draftVersion += 1;
+      this.publishDirtyState();
+    },
+    publishDirtyState() {
+      if (this.editMode) this.$emit('update:dirty', JSON.stringify(this.eventConfig) !== this.savedDraft);
+    },
+    handleValueChange(change) {
+      if (this.saving) return;
+      this.eventConfig = { ...this.eventConfig, ...change };
+      this.localEvent = { ...this.localEvent, ...change };
+      this.publishDirtyState();
+      if (this.hasClickedNext) this.validateAll();
+    },
+    handleDEPromotionType(value) {
+      this.handleValueChange({ DEPromoteBy: value });
+    },
+    validateAll() {
+      let isValid = true;
+      this.validation.EventPrice = validatePrice(this.eventConfig.EventPrice);
+      const forbiddenChars = /[\/\\'"=:*<>|?&!@#$%^(){}[\]]/g;
+
+      if (!this.eventConfig.EventName || this.eventConfig.EventName.trim().length < 4) {
+        this.validation.EventName = {
+          invalid: true,
+          message: 'Event Name must be at least 3 characters long.'
+        };
+        isValid = false;
+        return isValid;
+      }
+
+      if (forbiddenChars.test(this.eventConfig.EventName)) {
+        this.validation.EventName = {
+          invalid: true,
+          message: 'Event Name contains invalid characters.'
+        };
+        isValid = false;
+        return isValid;
+      }
+
+      this.validation.EventName = { invalid: false, message: '' };
+      return !this.validation.EventPrice.invalid;
+    },
+    handleUpdate(eventConfig = {}) {
+      if (this.saving) return;
+      this.hasClickedNext = true;
+      if (!this.editMode) this.eventConfig = { ...this.eventConfig, ...eventConfig };
+      if (!this.validateAll()) return;
+      if (this.editMode) {
+        this.requestStepSave();
+        return;
+      }
+      this.currentStep += 1;
+    },
+    handleBack() {
+      if (this.saving) return;
+      if (this.editMode) {
+        this.$emit('navigate:step', this.currentStep - 1);
+        return;
+      }
+      this.currentStep -= 1;
+    },
+    convertEventConfigToRules(eventConfig) {
+      const mapping = {
+        poolTime: { RuleId: 1, RuleName: 'PoolTime', Context: 'pool', dependsOn: 'poolTimer' },
+        poolMaxPoints: { RuleId: 2, RuleName: 'PoolMaxPoints', Context: 'pool', dependsOn: 'poolMax' },
+        DETime: { RuleId: 3, RuleName: 'DETime', Context: 'de', dependsOn: 'DETimer' },
+        DEMaxPoints: { RuleId: 4, RuleName: 'DEMaxPoints', Context: 'de', dependsOn: 'DEMax' },
+        thirdPlaceBout: { RuleId: 5, RuleName: 'DE3rdFenceOff', Context: 'de' },
+        boutCount: { RuleId: 6, RuleName: 'PoolNumOfPasses', Context: 'pool', dependsOn: 'boutCounter' },
+        DEBoutCount: { RuleId: 7, RuleName: 'DENumOfPasses', Context: 'de', dependsOn: 'DEBoutCounter' },
+        DEPromotionAmount: { RuleId: 10, RuleName: 'DENumOfPromotion', Context: 'de' },
+        DEPromotionOrder: { RuleId: 9, RuleName: 'DEPromotionOrder', Context: 'de' },
+        seedWith: { RuleId: 11, RuleName: 'PoolSeeding', Context: 'pool' },
+        CutOffNumber: { RuleId: 14, RuleName: 'CutOffNumber', Context: 'event' },
+        DEType: { RuleId: 15, RuleName: 'DEType', Context: 'de' },
+        PoolScoreDirection: { RuleId: 16, RuleName: 'PoolScoreDirection', Context: 'de' },
+        DEPromoteBy: { RuleId: 17, RuleName: 'DEPromoteBy', Context: 'de' },
+        CountHandshots: { RuleId: 19, RuleName: 'CountHandshots', Context: 'event' },
+        CountDoubles: { RuleId: 20, RuleName: 'CountDoubles', Context: 'event' },
+        PenaltiesReset: { RuleId: 21, RuleName: 'PenaltiesReset', Context: 'event' },
+        IncludeInRatings: { RuleId: 22, RuleName: 'IncludeInRatings', Context: 'event', onlyWhenExisting: true }
+      };
+
+      return Object.entries(eventConfig)
+        .filter(([key, value]) => mapping[key] && value !== undefined)
+        .filter(
+          ([key]) =>
+            !mapping[key].onlyWhenExisting ||
+            this.localEvent.rules.some(rule => Number(rule.RuleId) === mapping[key].RuleId)
+        )
+        .filter(([key]) => {
+          const dependency = mapping[key].dependsOn;
+          return !dependency || eventConfig[dependency];
+        })
+        .map(([key, value]) => ({
+          RuleId: mapping[key].RuleId,
+          RuleName: mapping[key].RuleName,
+          RuleValue: this.serializeRuleValue(value),
+          Context: mapping[key].Context
+        }));
+    },
+    serializeRuleValue(value) {
+      if (Array.isArray(value)) return value.join(',');
+      const isDropdownOption = value !== null && typeof value === 'object';
+      return String(isDropdownOption ? (value.link ?? value.text ?? '') : value);
+    },
+    buildEventPayload() {
+      return {
+        ...cloneEvent(this.localEvent),
+        ...this.eventConfig,
+        EventPrice: Number(this.eventConfig.EventPrice),
+        rules: this.convertEventConfigToRules(this.eventConfig)
+      };
+    },
+    requestStepSave() {
+      this.$emit('save:step', { event: this.buildEventPayload(), step: this.currentStep });
+    },
+    handleSubmit() {
+      if (this.saving || !this.validateAll()) return;
+      if (this.editMode) {
+        this.requestStepSave();
+        return;
+      }
+      this.$emit('update:submit', this.buildEventPayload());
+    },
+    handleCancel() {
+      if (this.saving) return;
+      this.$emit('update:cancel');
+    }
+  }
+};
+</script>