@dcrackel/hematournamentui 1.0.708 → 1.0.710

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

@@ -1,204 +1,204 @@
-<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="DIRECT ELIMINATION PROMOTION"
-        :weight="'normal'"
-        data-testid="text-add-tournament"
-      />
-    </div>
-
-    <div class="w-full flex mb-3 ml-1 grow">
-      <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="mt-8">
-        <BaseText
-          :color="'quaternary'"
-          :size="'sm'"
-          :text="'DIRECT ELIMINATION PROMOTION CRITERIA'"
-          class="border-b mt-5"
-        />
-      </div>
-
-      <div class="mt-1 mb-4 grow">
-        <BaseText
-          :color="'quinary'"
-          :size="'sm'"
-          text="Choose how people are promoted from pools into the elimination bracket."
-          :weight="'normal'"
-          data-testid="text-registration"
-          class="mb-5"
-        />
-
-        {{ eventConfig.DEPromoteBy }}
-        <DropDownMenu
-          label=""
-          :items="DEPromotionTypes"
-          :selectedItem="selectedItem"
-          :alignEnd="false"
-          :width="'w-full'"
-          @update:selectedItem="handleDEPromotionTypeChange"
-        />
-      </div>
-
-      <div class="mb-2 flex flex-col">
-        <BaseText
-          :color="'quinary'"
-          :size="'sm'"
-          :text="DEPromotionDescription"
-          :weight="'normal'"
-          data-testid="text-registration"
-          class="mb-4"
-        />
-        <TitledInput
-          :inputValue="eventConfig.DEPromotionAmount"
-          :invalid="validation.DEPromotionAmount"
-          :allowPercent="true"
-          placeholder="Enter Number or Percent.."
-          title=""
-          @update:value="handleDEPromotionAmountChange"
-        />
-      </div>
-    </div>
-
-    <div class="grow">
-      <div class="mt-8">
-        <BaseText
-          :color="'quaternary'"
-          :size="'sm'"
-          :text="'ORDER OF STATS TO DECIDE PROMOTION'"
-          class="border-b mt-5"
-        />
-      </div>
-      <div class="pb-4 -mt-3">
-        <MultiSelect
-          label="Select and arrange the statistical criteria that will be used to promote participants to the Direct Elimination (DE) stage. The order of these criteria is crucial as it determines the priority for promotion. Choose up to three stats from the available options."
-          :initialSelectedTags="eventConfig.DEPromotionOrder"
-          :availableTags="['Win Percent', 'Win Count', 'Indicator', 'Points Scored']"
-          @update:selectedTags="handleMultiSelect"
-        />
-      </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="Next"
-        selected="selected"
-        size="sm"
-        type="primary"
-        @buttonClick="handleNext"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import TitledInput from '../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
-import MultiSelect from '../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue';
-import BaseText from '../../../../Atoms/Text/BaseText.vue';
-import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
-import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
-import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
-
-const promotionTypeDefaults = {
-  'Top Percent': { typeCode: 'Percent', defaultAmount: '100%' },
-  'Top Count': { typeCode: 'Count', defaultAmount: '16' },
-  'Top Count of Each Pool': { typeCode: 'Top', defaultAmount: '2' }
-};
-
-const defaultPromotionType = { typeCode: 'Percent', defaultAmount: '100%' };
-
-export default {
-  name: 'DirectEliminationPromotion',
-  emits: ['update', 'update:back', 'update:DEPromotionType', 'update:next'],
-  components: { Toggle, DropDownMenu, StepIndicator, BaseButton, BaseText, TitledInput, MultiSelect },
-  props: {
-    eventConfig: Object,
-    validation: Object,
-    currentStep: Number,
-    steps: Array
-  },
-  data() {
-    return {
-      selectedItem: null
-    };
-  },
-  watch: {
-    'eventConfig.DEPromoteBy': {
-      immediate: true,
-      handler(value) {
-        const map = {
-          Percent: 'Top Percent',
-          Count: 'Top Count',
-          Top: 'Top Count of Each Pool'
-        };
-        const display = map[value] || 'Top Percent';
-        this.selectedItem = this.DEPromotionTypes.find(item => item.text === display);
-      }
-    }
-  },
-  computed: {
-    selectedFormat() {
-      return this.selectedFormat.Name;
-    },
-    DEPromotionTypes() {
-      return [
-        { text: 'Top Percent', link: 'Top Percent' },
-        { text: 'Top Count', link: 'Top Count' },
-        { text: 'Top Count of Each Pool', link: 'Top Count of Each Pool' }
-      ];
-    },
-    DEPromotionDescription() {
-      if (this.selectedItem.text === 'Top Percent') {
-        return 'Use this option to promote a percentage of participants to the Direct Elimination (DE) stage. Enter a percentage value (e.g., 100% to promote all participants or 50% to promote the top half).';
-      }
-      if (this.selectedItem.text === 'Top Count') {
-        return 'Use this option to promote a specific number of participants to the Direct Elimination (DE) stage. Enter a whole number (e.g., 16 to promote the top 16 participants).';
-      }
-      if (this.selectedItem.text === 'Top Count of Each Pool') {
-        return 'Use this option to promote a set number of participants from each pool to the Direct Elimination (DE) stage. Enter a whole number (e.g., 2 to promote the top 2 participants from each pool).';
-      }
-    }
-  },
-  methods: {
-    handleDEPromotionAmountChange(value) {
-      this.$emit('update', { DEPromotionAmount: value });
-    },
-    handleMultiSelect(value) {
-      this.$emit('update', { DEPromotionOrder: value });
-    },
-    handleBack() {
-      this.$emit('update:back');
-    },
-    handleNext() {
-      this.$emit('update:next', this.eventConfig);
-    },
-    handleDEPromotionTypeChange(item) {
-      this.selectedItem = item;
-
-      const { typeCode, defaultAmount } = promotionTypeDefaults[item.text] || defaultPromotionType;
-
-      this.eventConfig.DEPromotionTypes = typeCode;
-      this.eventConfig.DEPromotionAmount = defaultAmount;
-
-      this.$emit('update:DEPromotionType', typeCode);
-    }
-  }
-};
-</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="DIRECT ELIMINATION PROMOTION"
+        :weight="'normal'"
+        data-testid="text-add-tournament"
+      />
+    </div>
+
+    <div class="w-full flex mb-3 ml-1 grow">
+      <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="mt-8">
+        <BaseText
+          :color="'quaternary'"
+          :size="'sm'"
+          :text="'DIRECT ELIMINATION PROMOTION CRITERIA'"
+          class="border-b mt-5"
+        />
+      </div>
+
+      <div class="mt-1 mb-4 grow">
+        <BaseText
+          :color="'quinary'"
+          :size="'sm'"
+          text="Choose how people are promoted from pools into the elimination bracket."
+          :weight="'normal'"
+          data-testid="text-registration"
+          class="mb-5"
+        />
+
+        {{ eventConfig.DEPromoteBy }}
+        <DropDownMenu
+          label=""
+          :items="DEPromotionTypes"
+          :selectedItem="selectedItem"
+          :alignEnd="false"
+          :width="'w-full'"
+          @update:selectedItem="handleDEPromotionTypeChange"
+        />
+      </div>
+
+      <div class="mb-2 flex flex-col">
+        <BaseText
+          :color="'quinary'"
+          :size="'sm'"
+          :text="DEPromotionDescription"
+          :weight="'normal'"
+          data-testid="text-registration"
+          class="mb-4"
+        />
+        <TitledInput
+          :inputValue="eventConfig.DEPromotionAmount"
+          :invalid="validation.DEPromotionAmount"
+          :allowPercent="true"
+          placeholder="Enter Number or Percent.."
+          title=""
+          @update:value="handleDEPromotionAmountChange"
+        />
+      </div>
+    </div>
+
+    <div class="grow">
+      <div class="mt-8">
+        <BaseText
+          :color="'quaternary'"
+          :size="'sm'"
+          :text="'ORDER OF STATS TO DECIDE PROMOTION'"
+          class="border-b mt-5"
+        />
+      </div>
+      <div class="pb-4 -mt-3">
+        <MultiSelect
+          label="Select and arrange the statistical criteria that will be used to promote participants to the Direct Elimination (DE) stage. The order of these criteria is crucial as it determines the priority for promotion. Choose up to three stats from the available options."
+          :initialSelectedTags="eventConfig.DEPromotionOrder"
+          :availableTags="['Win Percent', 'Win Count', 'Indicator', 'Points Scored']"
+          @update:selectedTags="handleMultiSelect"
+        />
+      </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 MultiSelect from '../../../../Molecules/Inputs/MultiSelect/MultiSelect.vue';
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
+import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
+
+const promotionTypeDefaults = {
+  'Top Percent': { typeCode: 'Percent', defaultAmount: '100%' },
+  'Top Count': { typeCode: 'Count', defaultAmount: '16' },
+  'Top Count of Each Pool': { typeCode: 'Top', defaultAmount: '2' }
+};
+
+const defaultPromotionType = { typeCode: 'Percent', defaultAmount: '100%' };
+
+export default {
+  name: 'DirectEliminationPromotion',
+  emits: ['update', 'update:back', 'update:DEPromotionType', 'update:next'],
+  components: { Toggle, DropDownMenu, StepIndicator, BaseButton, BaseText, TitledInput, MultiSelect },
+  props: {
+    nextButtonLabel: { type: String, default: 'Next' },
+    eventConfig: Object,
+    validation: Object,
+    currentStep: Number,
+    steps: Array
+  },
+  data() {
+    return {
+      selectedItem: null
+    };
+  },
+  watch: {
+    'eventConfig.DEPromoteBy': {
+      immediate: true,
+      handler(value) {
+        const map = {
+          Percent: 'Top Percent',
+          Count: 'Top Count',
+          Top: 'Top Count of Each Pool'
+        };
+        const display = map[value] || 'Top Percent';
+        this.selectedItem = this.DEPromotionTypes.find(item => item.text === display);
+      }
+    }
+  },
+  computed: {
+    selectedFormat() {
+      return this.selectedFormat.Name;
+    },
+    DEPromotionTypes() {
+      return [
+        { text: 'Top Percent', link: 'Top Percent' },
+        { text: 'Top Count', link: 'Top Count' },
+        { text: 'Top Count of Each Pool', link: 'Top Count of Each Pool' }
+      ];
+    },
+    DEPromotionDescription() {
+      if (this.selectedItem.text === 'Top Percent') {
+        return 'Use this option to promote a percentage of participants to the Direct Elimination (DE) stage. Enter a percentage value (e.g., 100% to promote all participants or 50% to promote the top half).';
+      }
+      if (this.selectedItem.text === 'Top Count') {
+        return 'Use this option to promote a specific number of participants to the Direct Elimination (DE) stage. Enter a whole number (e.g., 16 to promote the top 16 participants).';
+      }
+      if (this.selectedItem.text === 'Top Count of Each Pool') {
+        return 'Use this option to promote a set number of participants from each pool to the Direct Elimination (DE) stage. Enter a whole number (e.g., 2 to promote the top 2 participants from each pool).';
+      }
+    }
+  },
+  methods: {
+    handleDEPromotionAmountChange(value) {
+      this.$emit('update', { DEPromotionAmount: value });
+    },
+    handleMultiSelect(value) {
+      this.$emit('update', { DEPromotionOrder: value });
+    },
+    handleBack() {
+      this.$emit('update:back');
+    },
+    handleNext() {
+      this.$emit('update:next', this.eventConfig);
+    },
+    handleDEPromotionTypeChange(item) {
+      this.selectedItem = item;
+
+      const { typeCode, defaultAmount } = promotionTypeDefaults[item.text] || defaultPromotionType;
+
+      this.$emit('update', { DEPromoteBy: typeCode, DEPromotionAmount: defaultAmount });
+
+      this.$emit('update:DEPromotionType', typeCode);
+    }
+  }
+};
+</script>

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

@@ -1,91 +1,133 @@
-import EditEvent from './EditEventWizard.vue';
-import singleEventMock from '../../../../mocks/singleEventMock.js';
-
-export default {
-  title: 'Organisms/Wizards/EditEventWizard/EditEventWizard',
-  component: EditEvent,
-  args: {
-    event: singleEventMock,
-    weapons: [
-      { text: 'Longsword', link: 1 },
-      { text: 'Saber', link: 2 },
-      { text: 'Rapier', link: 3 }
-    ],
-    DEFormats: [
-      { text: 'Single Elimination', link: 1 },
-      { text: 'Double Elimination', link: 2 },
-      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
-    ],
-    userLevel: 'Admin'
-  },
-  argTypes: {
-    event: { control: 'object' },
-    weapons: { control: 'object' },
-    DEFormats: { control: 'object' },
-    userLevel: { control: 'string' }
-  }
-};
-
-export const Default = {
-  args: {
-    event: singleEventMock,
-    weapons: [
-      { text: 'Longsword', link: 1 },
-      { text: 'Saber', link: 2 },
-      { text: 'Rapier', link: 3 }
-    ],
-    DEFormats: [
-      { text: 'Single Elimination', link: 1 },
-      { text: 'Double Elimination', link: 2 },
-      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
-    ],
-    userLevel: 'Admin'
-  }
-};
-// new Date().toISOString().split('T')[0],
-export const newEventAsClub = {
-  args: {
-    event: {
-      EventId: 0,
-      CountDoubles: false,
-      CountHandshots: false,
-      CutOffNumber: 64,
-      DEBoutCount: 7,
-      DEBoutCounter: false,
-      DEMax: false,
-      DEMaxPoints: 12,
-      DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool'],
-      DEPromotionAmount: '100%',
-      DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
-      DETime: 180,
-      DETimer: false,
-      DEType: 'single',
-      Date: new Date().toISOString().split('T')[0],
-      EventName: '',
-      NumberOfRings: 2,
-      PenaltiesReset: true,
-      PoolScoreDirection: true,
-      StartTime: '12:00:00',
-      WeaponId: 1,
-      boutCount: 5,
-      boutCounter: false,
-      poolMax: false,
-      poolMaxPoints: 7,
-      poolTime: 180,
-      poolTimer: false,
-      seedWith: 'M2 - MeyerSquared',
-      thirdPlaceBout: false
-    },
-    weapons: [
-      { text: 'Longsword', link: 1 },
-      { text: 'Saber', link: 2 },
-      { text: 'Rapier', link: 3 }
-    ],
-    DEFormats: [
-      { text: 'Single Elimination', link: 1 },
-      { text: 'Double Elimination', link: 2 },
-      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
-    ],
-    userLevel: 'Club'
-  }
-};
+import { ref } from 'vue';
+import EditEvent from './EditEventWizard.vue';
+import singleEventMock from '../../../../mocks/singleEventMock.js';
+
+export default {
+  title: 'Organisms/Wizards/EditEventWizard/EditEventWizard',
+  component: EditEvent,
+  args: {
+    event: { ...singleEventMock, EventPrice: 25.5 },
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    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' },
+    DEFormats: { control: 'object' },
+    userLevel: { control: 'string' }
+  }
+};
+
+export const Default = {
+  args: {
+    event: { ...singleEventMock, EventPrice: 25.5 },
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    userLevel: 'Admin'
+  }
+};
+// new Date().toISOString().split('T')[0],
+export const newEventAsClub = {
+  args: {
+    event: {
+      EventId: 0,
+      CountDoubles: false,
+      CountHandshots: false,
+      CutOffNumber: 64,
+      DEBoutCount: 7,
+      DEBoutCounter: false,
+      DEMax: false,
+      DEMaxPoints: 12,
+      DEPromoteBy: ['Top Percent', 'Top Count', 'Top Count of Each Pool'],
+      DEPromotionAmount: '100%',
+      DEPromotionOrder: ['Win Percent', 'Win Count', 'Indicator', 'Points Scored'],
+      DETime: 180,
+      DETimer: false,
+      DEType: 'single',
+      Date: new Date().toISOString().split('T')[0],
+      EventName: '',
+      EventPrice: '',
+      NumberOfRings: 2,
+      PenaltiesReset: true,
+      PoolScoreDirection: true,
+      StartTime: '12:00:00',
+      WeaponId: 1,
+      boutCount: 5,
+      boutCounter: false,
+      poolMax: false,
+      poolMaxPoints: 7,
+      poolTime: 180,
+      poolTimer: false,
+      seedWith: 'M2 - MeyerSquared',
+      thirdPlaceBout: false
+    },
+    weapons: [
+      { text: 'Longsword', link: 1 },
+      { text: 'Saber', link: 2 },
+      { text: 'Rapier', link: 3 }
+    ],
+    DEFormats: [
+      { text: 'Single Elimination', link: 1 },
+      { text: 'Double Elimination', link: 2 },
+      { text: 'Single Elimination with Round Robin Semi-Final', link: 3 }
+    ],
+    userLevel: 'Club'
+  }
+};
+
+export const EditWithStepSaves = {
+  args: { ...Default.args, editMode: true, step: 1 },
+  render: args => ({
+    components: { Editor: EditEvent },
+    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" :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.' }
+};