@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,58 +1,58 @@
 <template>
   <div class="p-4 max-h-screen overflow-y-auto">
     <BasicEventInfo
-        v-if="currentStep === 1"
-        :eventConfig="eventConfig"
-        :weapons="weapons"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep - 1"
-        :userLevel="userLevel"
-        @update="handleValueChange"
-        @update:back="handleCancel"
-        @update:next="handleUpdate"
+      v-if="currentStep === 1"
+      :eventConfig="eventConfig"
+      :weapons="weapons"
+      :validation="validation"
+      :steps="steps"
+      :currentStep="currentStep - 1"
+      :userLevel="userLevel"
+      @update="handleValueChange"
+      @update:back="handleCancel"
+      @update:next="handleUpdate"
     />
     <EventCustomization
-        v-if="currentStep === 2"
-        :eventConfig="eventConfig"
-        :steps="steps"
-        :currentStep="currentStep-1"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
+      v-if="currentStep === 2"
+      :eventConfig="eventConfig"
+      :steps="steps"
+      :currentStep="currentStep - 1"
+      @update="handleValueChange"
+      @update:back="handleBack"
+      @update:next="handleUpdate"
     />
     <PoolConfiguration
-        v-if="currentStep === 3"
-        :eventConfig="eventConfig"
-        :seedWithOptions="seedWithOptions"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep-1"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
+      v-if="currentStep === 3"
+      :eventConfig="eventConfig"
+      :seedWithOptions="seedWithOptions"
+      :validation="validation"
+      :steps="steps"
+      :currentStep="currentStep - 1"
+      @update="handleValueChange"
+      @update:back="handleBack"
+      @update:next="handleUpdate"
     />
     <DirectEliminationPromotion
-        v-if="currentStep === 4"
-        :eventConfig="eventConfig"
-        :validation="validation"
-        :steps="steps"
-        :currentStep="currentStep -1"
-        @update="handleValueChange"
-        @update:DEPromotionType="handleDEPromotionType"
-        @update:back="handleBack"
-        @update:next="handleUpdate"
+      v-if="currentStep === 4"
+      :eventConfig="eventConfig"
+      :validation="validation"
+      :steps="steps"
+      :currentStep="currentStep - 1"
+      @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"
-        :DEFormats="DEFormats"
-        @update="handleValueChange"
-        @update:back="handleBack"
-        @update:submit="handleSubmit"
+      v-if="currentStep === 5"
+      :eventConfig="eventConfig"
+      :validation="validation"
+      :steps="steps"
+      :currentStep="currentStep - 1"
+      :DEFormats="DEFormats"
+      @update="handleValueChange"
+      @update:back="handleBack"
+      @update:submit="handleSubmit"
     />
   </div>
 </template>
@@ -61,87 +61,60 @@
 import BasicEventInfo from './BasicEventInfo/BasicEventInfo.vue';
 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 ruleAppliers = {
-  1: (eventConfig, rule) => {
-    eventConfig.poolTime = rule.RuleValue;
-    eventConfig.poolTimer = true;
-  },
-  2: (eventConfig, rule) => {
-    eventConfig.poolMaxPoints = rule.RuleValue;
-    eventConfig.poolMax = true;
-  },
-  3: (eventConfig, rule) => {
-    eventConfig.DETime = rule.RuleValue;
-    eventConfig.DETimer = true;
-  },
-  4: (eventConfig, rule) => {
-    eventConfig.DEMaxPoints = rule.RuleValue;
-    eventConfig.DEMax = true;
-  },
-  5: (eventConfig, rule) => {
-    eventConfig.thirdPlaceBout = ruleValueIsTrue(rule, 'thirdPlaceBout');
-  },
-  6: (eventConfig, rule) => {
-    eventConfig.boutCount = rule.RuleValue;
-    eventConfig.boutCounter = true;
-  },
-  7: (eventConfig, rule) => {
-    eventConfig.DEBoutCount = rule.RuleValue;
-    eventConfig.DEBoutCounter = true;
-  },
-  9: (eventConfig, rule) => {
-    eventConfig.DEPromotionOrder = rule.RuleValue.split(',');
-  },
-  10: (eventConfig, rule) => {
-    eventConfig.DEPromotionAmount = rule.RuleValue;
-  },
-  11: (eventConfig, rule) => {
-    eventConfig.seedWith = rule.RuleValue;
-  },
-  14: (eventConfig, rule) => {
-    eventConfig.CutOffNumber = rule.RuleValue;
-  },
-  15: (eventConfig, rule) => {
-    eventConfig.DEType = rule.RuleValue;
-  },
-  16: (eventConfig, rule) => {
-    eventConfig.PoolScoreDirection = ruleValueIsTrue(rule, 'PoolScoreDirection');
-  },
-  17: (eventConfig, rule) => {
-    eventConfig.DEPromoteBy = rule.RuleValue;
-  },
-  19: (eventConfig, rule) => {
-    eventConfig.CountHandshots = ruleValueIsTrue(rule, 'CountHandshots');
-  },
-  20: (eventConfig, rule) => {
-    eventConfig.CountDoubles = ruleValueIsTrue(rule, 'CountDoubles');
-  },
-  21: (eventConfig, rule) => {
-    eventConfig.PenaltiesReset = ruleValueIsTrue(rule, 'PenaltiesReset');
-  },
-  22: (eventConfig, rule) => {
-    eventConfig.IncludeInRatings = ruleValueIsTrue(rule, 'IncludeInRatings');
-  }
-};
-
-export default {
+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 })) : []
+});
+
+export default {
   name: 'EditEventWizard',
   components: {
     EventCustomization,
     DirectEliminationPromotion,
-    StepIndicator, BasicEventInfo, PoolConfiguration, DirectElimination, BaseButton
+    StepIndicator,
+    BasicEventInfo,
+    PoolConfiguration,
+    DirectElimination,
+    BaseButton
   },
-  emits: ['update:submit','update:cancel'],
+  emits: ['update:submit', 'update:cancel'],
   props: {
     event: {
-      type: Object,
+      type: Object
     },
     weapons: {
       type: Array,
@@ -149,13 +122,13 @@ export default {
     },
     saveButtonLabel: {
       type: String,
-      default: 'Save',
+      default: 'Save'
     },
     DEFormats: {
       type: Array,
       default: () => [
-        {link: 1, text: 'Single Elimination'},
-        {link: 2, text: 'Double Elimination'},
+        { link: 1, text: 'Single Elimination' },
+        { link: 2, text: 'Double Elimination' }
       ]
     },
     userLevel: {
@@ -166,10 +139,10 @@ export default {
   data() {
     return {
       currentStep: 1,
-      localEvent: this.event,
+      localEvent: cloneEvent(this.event),
       hasClickedNext: false,
       validation: {
-        EventName: { invalid: false, message: '' },
+        EventName: { invalid: false, message: '' }
       },
       eventConfig: {
         EventName: this.event.EventName,
@@ -177,7 +150,7 @@ export default {
         StartTime: this.event.startTime,
         NumberOfRings: this.event.NumberOfRings,
         WeaponId: this.event.WeaponId,
-        seedWith: {text: 'M2 - MeyerSquared', link: 'M2'},
+        seedWith: { text: 'M2 - MeyerSquared', link: 'M2' },
         CutOffNumber: undefined,
         boutCounter: false,
         boutCount: 5,
@@ -195,7 +168,7 @@ export default {
         DEMaxPoints: 12,
         DEPromotionAmount: '100%',
         DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-        DEPromoteBy: ['Top Percent','Top Count','Top Count of Each Pool'],
+        DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool'],
         DEType: 'single',
         CountHandshots: false,
         CountDoubles: false,
@@ -203,16 +176,16 @@ export default {
         IncludeInRatings: true
       },
       seedWithOptions: [
-        {text: 'M2 - MeyerSquared', link: 'M2'},
-        {text: 'HR - Hema Rating', link: 'HR'},
-        {text: 'Manual', link: 'MN'}
+        { 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"}
+        { 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' }
       ]
     };
   },
@@ -222,17 +195,14 @@ export default {
   },
   watch: {
     event(newEvent) {
-      this.localEvent = newEvent;
+      this.localEvent = cloneEvent(newEvent);
     }
   },
   methods: {
-    setInitialValues() {
-      if (!this.event.rules) return;
-      this.event.rules.forEach(rule => {
-        const applyRule = ruleAppliers[rule.RuleId];
-        if (applyRule) applyRule(this.eventConfig, rule);
-      });
-    },
+    setInitialValues() {
+      if (!this.event.rules) return;
+      this.eventConfig = applyRulesToEventConfig(this.eventConfig, this.event.rules);
+    },
     handleValueChange(change) {
       const [key, value] = Object.entries(change)[0];
 
@@ -243,7 +213,7 @@ export default {
       this.localEvent[key] = value;
 
       if (this.hasClickedNext) {
-        this.validateAll()
+        this.validateAll();
       }
     },
     handleDEPromotionType(change) {
@@ -257,7 +227,7 @@ export default {
       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."
+          message: 'Event Name must be at least 3 characters long.'
         };
         isValid = false;
         return isValid;
@@ -266,13 +236,13 @@ export default {
       if (forbiddenChars.test(this.eventConfig.EventName)) {
         this.validation.EventName = {
           invalid: true,
-          message: "Event Name contains invalid characters."
+          message: 'Event Name contains invalid characters.'
         };
         isValid = false;
         return isValid;
       }
 
-      this.validation.EventName = { invalid: false, message: "" };
+      this.validation.EventName = { invalid: false, message: '' };
       return isValid;
     },
     handleUpdate(eventConfig) {
@@ -284,7 +254,7 @@ export default {
         }
       }
 
-      this.eventConfig = {...this.eventConfig, ...eventConfig};
+      this.eventConfig = { ...this.eventConfig, ...eventConfig };
       this.currentStep += 1;
     },
     handleBack() {
@@ -292,45 +262,48 @@ export default {
     },
     convertEventConfigToRules(eventConfig) {
       const mapping = {
-        poolTime: { RuleId: 1, RuleName: "PoolTime", Context: "pool", dependsOn: "poolTimer" },
-        poolMaxPoints: { RuleId: 2, RuleName: "PoolMaxPoints", Context: "pool" },
-        DETime: { RuleId: 3, RuleName: "DETime", Context: "de", dependsOn: "DETimer" },
-        DEMaxPoints: { RuleId: 4, RuleName: "DEMaxPoints", Context: "de" },
-        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"}
+        poolTime: { RuleId: 1, RuleName: 'PoolTime', Context: 'pool', dependsOn: 'poolTimer' },
+        poolMaxPoints: { RuleId: 2, RuleName: 'PoolMaxPoints', Context: 'pool' },
+        DETime: { RuleId: 3, RuleName: 'DETime', Context: 'de', dependsOn: 'DETimer' },
+        DEMaxPoints: { RuleId: 4, RuleName: 'DEMaxPoints', Context: 'de' },
+        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' }
       };
 
       return Object.entries(eventConfig)
-          .filter(([key]) => mapping[key])
-          .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),
-            Context: mapping[key].Context
-          }));
+        .filter(([key]) => mapping[key])
+        .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),
+          Context: mapping[key].Context
+        }));
     },
     handleSubmit() {
-      this.localEvent.rules = this.convertEventConfigToRules(this.eventConfig);
-      this.$emit('update:submit', this.localEvent);
+      this.localEvent = {
+        ...this.localEvent,
+        rules: this.convertEventConfigToRules(this.eventConfig)
+      };
+      this.$emit('update:submit', { ...this.localEvent });
     },
     handleCancel() {
       this.$emit('update:cancel');
-    },
+    }
   }
 };
 </script>

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

@@ -1,35 +1,35 @@
 import CustomEventRules from './EventCustomization.vue';
-import singleEventMock from "../../../../../mocks/singleEventMock.js";
+import singleEventMock from '../../../../../mocks/singleEventMock.js';
 
 export default {
-    title: 'Organisms/Wizards/EditEventWizard/EventCustomization/EventCustomization',
-    component: CustomEventRules,
-    args: {
-        event: singleEventMock,
-        currentStep: 1,
-        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 = {
+  title: 'Organisms/Wizards/EditEventWizard/EventCustomization/EventCustomization',
+  component: CustomEventRules,
+  args: {
     event: singleEventMock,
-    currentStep: 2,
+    currentStep: 1,
     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"}
+      { 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 = {
+  event: singleEventMock,
+  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' }
+  ]
 };