@dcrackel/hematournamentui 1.0.708 → 1.0.710

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

@@ -1,215 +1,216 @@
-<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="'POOL CONFIGURATION'"
-        :weight="'normal'"
-        data-testid="text-add-tournament"
-      />
-    </div>
-    <div class="w-full flex flex-col mb-3 ml-1 grow">
-      <BaseText
-        :color="'quinary'"
-        :size="'sm'"
-        :text="'Configure the pool stage settings for your event. These options determine the elements displayed on the director\'s screen and influence how fencers advance to the Direct Elimination (DE) stage. You can choose to use a Timer, Pass Counter, or both.'"
-        :weight="'normal'"
-        data-testid="text-registration"
-      />
-    </div>
-
-    <div class="grow">
-      <div class="mb-4 mt-8">
-        <BaseText :color="'quaternary'" :size="'sm'" :text="'POOL SEEDING'" class="border-b mb-5" />
-      </div>
-      <div class="mb-4">
-        <BaseText
-          :color="'quinary'"
-          :invalid="validation.StartDate"
-          :size="'sm'"
-          :text="'Seed Pools Using Which Method?'"
-          :weight="'normal'"
-          class="mb-1"
-          data-testid="text-start-date"
-        />
-        <DropDownMenu
-          :label="localEventConfig.seedWith || 'Select Method'"
-          :items="seedWithOptions"
-          :selected-item="localEventConfig.seedWith"
-          :alignEnd="false"
-          :width="'w-full'"
-          @update:selectedItem="handleSeedWithChange"
-        />
-      </div>
-    </div>
-
-    <div class="grow">
-      <div class="mb-4 mt-8">
-        <BaseText :color="'quaternary'" :size="'sm'" :text="'POOL CONFIGURATION'" class="border-b mt-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.poolTimer"
-            label="Using a Timer"
-            :labelLeft="false"
-            @update:checked="handlePoolTimerToggle"
-          />
-        </div>
-        <TitledInput
-          v-if="localEventConfig.poolTimer"
-          :inputValue="localEventConfig.poolTime"
-          :invalid="validation.poolTime"
-          inputType="number"
-          placeholder="Enter Time in Seconds"
-          title=""
-          @update:value="handlePoolTimeChange"
-        />
-      </div>
-      <div class="mb-2 flex">
-        <div class="mt-1 h-10 w-52">
-          <Toggle
-            :checked="localEventConfig.boutCounter"
-            label="Using Pass Counter"
-            :labelLeft="false"
-            inputType="number"
-            @update:checked="handleBoutCounterToggle"
-          />
-        </div>
-        <TitledInput
-          v-if="localEventConfig.boutCounter"
-          :inputValue="localEventConfig.boutCount"
-          :invalid="validation.boutCount"
-          inputType="number"
-          placeholder="Enter Number of Passes"
-          title=""
-          @update:value="handleBoutCountChange"
-        />
-      </div>
-      <div class="mb-2 flex">
-        <div class="mt-1 h-10 w-52">
-          <Toggle
-            :checked="localEventConfig.poolMax"
-            label="Max Points"
-            :labelLeft="false"
-            @update:checked="handlePoolMaxToggle"
-          />
-        </div>
-        <TitledInput
-          v-if="localEventConfig.poolMax"
-          :inputValue="localEventConfig.poolMaxPoints"
-          :invalid="validation.poolMaxPoints"
-          inputType="number"
-          placeholder="Enter Pool Max Points"
-          title=""
-          @update:value="handlePoolMaxPointsChange"
-        />
-      </div>
-    </div>
-
-    <div class="flex flex-row justify-center h-12 mt-10">
-      <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 BaseText from '../../../../Atoms/Text/BaseText.vue';
-import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.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: 'PoolConfiguration',
-  emits: ['update', 'update:back', 'update:next'],
-  components: { BaseButton, StepIndicator, BaseText, DropDownMenu, TitledInput, Toggle },
-  props: {
-    eventConfig: {
-      type: Object,
-      required: true
-    },
-    seedWithOptions: {
-      type: Array,
-      required: true
-    },
-    validation: Object,
-    currentStep: Number,
-    steps: Array
-  },
-  data() {
-    return {
-      localEventConfig: { ...this.eventConfig },
-      selectedItem: { text: 'M2 - MeyerSquared', link: 'M2' }
-    };
-  },
-  mounted() {
-    this.localEventConfig = { ...this.eventConfig };
-  },
-  watch: {
-    eventConfig: {
-      deep: true,
-      handler(newConfig) {
-        this.localEventConfig = { ...newConfig };
-      }
-    }
-  },
-  methods: {
-    handleSeedWithChange(value) {
-      this.localEventConfig.seedWith = value.text;
-      this.$emit('update', { seedWith: value.text });
-    },
-    handlePoolTimerToggle(value) {
-      this.localEventConfig.poolTimer = value;
-      this.$emit('update', { poolTimer: value });
-    },
-    handlePoolTimeChange(value) {
-      this.localEventConfig.poolTime = value;
-      this.$emit('update', { poolTime: value });
-    },
-    handleBoutCounterToggle(value) {
-      this.localEventConfig.boutCounter = value;
-      this.$emit('update', { boutCounter: value });
-    },
-    handleBoutCountChange(value) {
-      this.localEventConfig.boutCount = value;
-      this.$emit('update', { boutCount: value });
-    },
-    handlePoolMaxToggle(value) {
-      this.localEventConfig.poolMax = value;
-      this.$emit('update', { poolMax: value });
-    },
-    handlePoolMaxPointsChange(value) {
-      this.localEventConfig.poolMaxPoints = value;
-      this.$emit('update', { poolMaxPoints: value });
-    },
-    handleNext() {
-      this.$emit('update:next', this.localEventConfig);
-    },
-    handleBack() {
-      this.$emit('update:back');
-    }
-  }
-};
-</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="'POOL CONFIGURATION'"
+        :weight="'normal'"
+        data-testid="text-add-tournament"
+      />
+    </div>
+    <div class="w-full flex flex-col mb-3 ml-1 grow">
+      <BaseText
+        :color="'quinary'"
+        :size="'sm'"
+        :text="'Configure the pool stage settings for your event. These options determine the elements displayed on the director\'s screen and influence how fencers advance to the Direct Elimination (DE) stage. You can choose to use a Timer, Pass Counter, or both.'"
+        :weight="'normal'"
+        data-testid="text-registration"
+      />
+    </div>
+
+    <div class="grow">
+      <div class="mb-4 mt-8">
+        <BaseText :color="'quaternary'" :size="'sm'" :text="'POOL SEEDING'" class="border-b mb-5" />
+      </div>
+      <div class="mb-4">
+        <BaseText
+          :color="'quinary'"
+          :invalid="validation.StartDate"
+          :size="'sm'"
+          :text="'Seed Pools Using Which Method?'"
+          :weight="'normal'"
+          class="mb-1"
+          data-testid="text-start-date"
+        />
+        <DropDownMenu
+          :label="localEventConfig.seedWith || 'Select Method'"
+          :items="seedWithOptions"
+          :selected-item="localEventConfig.seedWith"
+          :alignEnd="false"
+          :width="'w-full'"
+          @update:selectedItem="handleSeedWithChange"
+        />
+      </div>
+    </div>
+
+    <div class="grow">
+      <div class="mb-4 mt-8">
+        <BaseText :color="'quaternary'" :size="'sm'" :text="'POOL CONFIGURATION'" class="border-b mt-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.poolTimer"
+            label="Using a Timer"
+            :labelLeft="false"
+            @update:checked="handlePoolTimerToggle"
+          />
+        </div>
+        <TitledInput
+          v-if="localEventConfig.poolTimer"
+          :inputValue="localEventConfig.poolTime"
+          :invalid="validation.poolTime"
+          inputType="number"
+          placeholder="Enter Time in Seconds"
+          title=""
+          @update:value="handlePoolTimeChange"
+        />
+      </div>
+      <div class="mb-2 flex">
+        <div class="mt-1 h-10 w-52">
+          <Toggle
+            :checked="localEventConfig.boutCounter"
+            label="Using Pass Counter"
+            :labelLeft="false"
+            inputType="number"
+            @update:checked="handleBoutCounterToggle"
+          />
+        </div>
+        <TitledInput
+          v-if="localEventConfig.boutCounter"
+          :inputValue="localEventConfig.boutCount"
+          :invalid="validation.boutCount"
+          inputType="number"
+          placeholder="Enter Number of Passes"
+          title=""
+          @update:value="handleBoutCountChange"
+        />
+      </div>
+      <div class="mb-2 flex">
+        <div class="mt-1 h-10 w-52">
+          <Toggle
+            :checked="localEventConfig.poolMax"
+            label="Max Points"
+            :labelLeft="false"
+            @update:checked="handlePoolMaxToggle"
+          />
+        </div>
+        <TitledInput
+          v-if="localEventConfig.poolMax"
+          :inputValue="localEventConfig.poolMaxPoints"
+          :invalid="validation.poolMaxPoints"
+          inputType="number"
+          placeholder="Enter Pool Max Points"
+          title=""
+          @update:value="handlePoolMaxPointsChange"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-center h-12 mt-10">
+      <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 DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.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: 'PoolConfiguration',
+  emits: ['update', 'update:back', 'update:next'],
+  components: { BaseButton, StepIndicator, BaseText, DropDownMenu, TitledInput, Toggle },
+  props: {
+    nextButtonLabel: { type: String, default: 'Next' },
+    eventConfig: {
+      type: Object,
+      required: true
+    },
+    seedWithOptions: {
+      type: Array,
+      required: true
+    },
+    validation: Object,
+    currentStep: Number,
+    steps: Array
+  },
+  data() {
+    return {
+      localEventConfig: { ...this.eventConfig },
+      selectedItem: { text: 'M2 - MeyerSquared', link: 'M2' }
+    };
+  },
+  mounted() {
+    this.localEventConfig = { ...this.eventConfig };
+  },
+  watch: {
+    eventConfig: {
+      deep: true,
+      handler(newConfig) {
+        this.localEventConfig = { ...newConfig };
+      }
+    }
+  },
+  methods: {
+    handleSeedWithChange(value) {
+      this.localEventConfig.seedWith = value.text;
+      this.$emit('update', { seedWith: value.text });
+    },
+    handlePoolTimerToggle(value) {
+      this.localEventConfig.poolTimer = value;
+      this.$emit('update', { poolTimer: value });
+    },
+    handlePoolTimeChange(value) {
+      this.localEventConfig.poolTime = value;
+      this.$emit('update', { poolTime: value });
+    },
+    handleBoutCounterToggle(value) {
+      this.localEventConfig.boutCounter = value;
+      this.$emit('update', { boutCounter: value });
+    },
+    handleBoutCountChange(value) {
+      this.localEventConfig.boutCount = value;
+      this.$emit('update', { boutCount: value });
+    },
+    handlePoolMaxToggle(value) {
+      this.localEventConfig.poolMax = value;
+      this.$emit('update', { poolMax: value });
+    },
+    handlePoolMaxPointsChange(value) {
+      this.localEventConfig.poolMaxPoints = value;
+      this.$emit('update', { poolMaxPoints: value });
+    },
+    handleNext() {
+      this.$emit('update:next', this.localEventConfig);
+    },
+    handleBack() {
+      this.$emit('update:back');
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import EditEventWizard from './EditEventWizard.vue';
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+
+const wrappers = [];
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+function mountWizard(props = {}) {
+  const wrapper = mount(EditEventWizard, {
+    props: { event: { EventName: 'Test Event', EventPrice: 25.5 }, weapons: [], ...props },
+    global: { stubs: { DatePicker: true, DropDownMenu: true, StepIndicator: true } }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+function priceField(wrapper) {
+  return wrapper.findAllComponents(TitledInput).find(field => field.props('title').startsWith('Event Price'));
+}
+
+function savedEvent(wrapper, editMode) {
+  if (editMode) return wrapper.emitted('save:step')[0][0].event;
+  return wrapper.emitted('update:submit')[0][0];
+}
+
+describe('event price', () => {
+  it.each([false, true])('includes decimal prices in save payloads with editMode %s', async editMode => {
+    const event = { EventName: 'Test Event', EventPrice: 25.5 };
+    const wrapper = mountWizard({ event, editMode });
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe('25.5');
+    await priceField(wrapper).find('input').setValue('30.');
+    expect(priceField(wrapper).find('input').element.value).toBe('30.');
+    await priceField(wrapper).find('input').setValue('30.75');
+    await wrapper
+      .findAll('button')
+      .find(button => button.text() === (editMode ? 'Save and Continue' : 'Next'))
+      .trigger('click');
+    if (!editMode) {
+      await wrapper.setProps({ step: 5 });
+      await wrapper
+        .findAll('button')
+        .find(button => button.text() === 'Submit')
+        .trigger('click');
+    }
+    const payload = savedEvent(wrapper, editMode);
+    expect(payload.EventPrice).toBe(30.75);
+    expect(payload.rules.some(rule => rule.RuleName === 'EventPrice')).toBe(false);
+    expect(event.EventPrice).toBe(25.5);
+    await wrapper.setProps({ event: { ...event, EventPrice: 0 }, step: 1 });
+    expect(priceField(wrapper).find('input').element.value).toBe('0');
+  });
+
+  it.each([undefined, null, 0])('allows a free event with an initial price of %s', async value => {
+    const wrapper = mountWizard({ event: { EventName: 'Free Event', EventPrice: value } });
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe(value == null ? '' : '0');
+    expect(priceField(wrapper).find('input').attributes('placeholder')).toBe('0.00');
+    await priceField(wrapper).find('input').setValue('');
+    wrapper.vm.handleSubmit();
+    expect(savedEvent(wrapper, false).EventPrice).toBe(0);
+  });
+
+  it.each(['-5', 'invalid', 'Infinity'])('blocks Next and save for invalid price %s', async value => {
+    const wrapper = mountWizard();
+    await wrapper.vm.$nextTick();
+    await priceField(wrapper).find('input').setValue(value);
+    wrapper.vm.handleUpdate();
+    wrapper.vm.handleSubmit();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.currentStep).toBe(1);
+    expect(wrapper.emitted('update:submit')).toBeUndefined();
+    expect(priceField(wrapper).props('invalid')).toBe(true);
+    await priceField(wrapper).find('input').setValue('0');
+    wrapper.vm.handleSubmit();
+    expect(savedEvent(wrapper, false).EventPrice).toBe(0);
+  });
+});

package/src/stories/Templates/EventManagement/EditEventInfo/EditEventInfo.stories.js

@@ -1,52 +1,93 @@
-import editConfig from './EditEventInfo.vue';
-import singleEventMock from '../../../../mocks/singleEventMock.js';
-import eventRules from '../../../../mocks/eventRules.js';
-import getAllWeapons from '../../../../mocks/getAllWeapons.js';
-
-export default {
-  title: 'Templates/EventManagement/EditEventInfo',
-  component: editConfig,
-  tags: ['autodocs'],
-  args: {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    rules: eventRules,
-    userLevel: 'admin'
-  },
-  argTypes: {
-    event: { control: 'object' },
-    weapons: { control: 'object' },
-    rules: { control: 'object' },
-    userLevel: { control: 'text' }
-  }
-};
-
-export const Default = {
-  args: {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    rules: eventRules,
-    userLevel: 'admin'
-  }
-};
-
-export const NewEvent = {
-  args: {
-    event: {
-      Absent: 0,
-      Date: new Date().toISOString().split('T')[0],
-      EventName: '',
-      Flights: 1,
-      NumberOfPools: 2,
-      NumberOfRings: 2,
-      PoolSize: 0,
-      Present: 0,
-      StartTime: '12:00:00',
-      Status: 'planning',
-      TournamentId: 10
-    },
-    weapons: getAllWeapons,
-    rules: [],
-    userLevel: 'admin'
-  }
-};
+import { ref } from 'vue';
+import editConfig from './EditEventInfo.vue';
+import singleEventMock from '../../../../mocks/singleEventMock.js';
+import eventRules from '../../../../mocks/eventRules.js';
+import getAllWeapons from '../../../../mocks/getAllWeapons.js';
+
+export default {
+  title: 'Templates/EventManagement/EditEventInfo',
+  component: editConfig,
+  tags: ['autodocs'],
+  args: {
+    event: singleEventMock,
+    weapons: getAllWeapons,
+    rules: eventRules,
+    userLevel: 'admin'
+  },
+  argTypes: {
+    editMode: { control: 'boolean' },
+    step: { control: { type: 'number', min: 1, max: 5 } },
+    saving: { control: 'boolean' },
+    saveError: { control: 'text' },
+    saveNotice: { control: 'text' },
+    event: { control: 'object' },
+    weapons: { control: 'object' },
+    rules: { control: 'object' },
+    userLevel: { control: 'text' }
+  }
+};
+
+export const Default = {
+  args: {
+    event: singleEventMock,
+    weapons: getAllWeapons,
+    rules: eventRules,
+    userLevel: 'admin'
+  }
+};
+
+export const NewEvent = {
+  args: {
+    event: {
+      Absent: 0,
+      Date: new Date().toISOString().split('T')[0],
+      EventName: '',
+      Flights: 1,
+      NumberOfPools: 2,
+      NumberOfRings: 2,
+      PoolSize: 0,
+      Present: 0,
+      StartTime: '12:00:00',
+      Status: 'planning',
+      TournamentId: 10
+    },
+    weapons: getAllWeapons,
+    rules: [],
+    userLevel: 'admin'
+  }
+};
+
+export const EditWithStepSaves = {
+  args: { ...Default.args, editMode: true, step: 1 },
+  render: args => ({
+    components: { Editor: editConfig },
+    setup() {
+      const event = ref(JSON.parse(JSON.stringify(args.event)));
+      const step = ref(args.step);
+      const saving = ref(false);
+      const notice = ref('');
+      const saveStep = async request => {
+        saving.value = true;
+        await new Promise(resolve => setTimeout(resolve, 500));
+        event.value = request.event;
+        step.value = Math.min(request.step + 1, 5);
+        notice.value = 'Changes saved.';
+        saving.value = false;
+      };
+      const clearNotice = dirty => {
+        if (dirty) notice.value = '';
+      };
+      return { args, event, step, saving, notice, saveStep, clearNotice };
+    },
+    template:
+      '<Editor v-bind="args" :rules="args.rules" :weapons="args.weapons" :event="event" :step="step" :saving="saving" :saveNotice="notice" @save:step="saveStep" @navigate:step="step = $event" @update:dirty="clearNotice" />'
+  })
+};
+
+export const SavingStep = {
+  args: { ...Default.args, editMode: true, step: 2, saving: true }
+};
+
+export const StepSaveFailed = {
+  args: { ...Default.args, editMode: true, step: 2, saveError: 'Changes could not be saved. Please try again.' }
+};