@dcrackel/hematournamentui 1.0.709 → 1.0.710

package/dist/hematournamentui-tailwind.css

@@ -659,6 +659,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-5 {
+    min-height: calc(var(--spacing) * 5);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.709",
+  "version": "1.0.710",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

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

@@ -1,41 +1,48 @@
-import BasicEventInfo from './BasicEventInfo.vue';
-import singleEventMock from '../../../../../mocks/singleEventMock.js';
-import getAllWeapons from '../../../../../mocks/getAllWeapons.js';
-
-export default {
-  title: 'Organisms/Wizards/EditEventWizard/BasicEventInfo/BasicEventInfo',
-  component: BasicEventInfo,
-  args: {
-    event: singleEventMock,
-    currentStep: Number,
-    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' }
-    ],
-    weapons: getAllWeapons
-  },
-  argTypes: {
-    event: { control: 'object' },
-    seedWithOptions: { control: 'Array' },
-    validation: { control: 'object' },
-    weapons: { control: 'object' }
-  }
-};
-
-export const Default = {
-  args: {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    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' }
-    ]
-  }
-};
+import BasicEventInfo from './BasicEventInfo.vue';
+import singleEventMock from '../../../../../mocks/singleEventMock.js';
+import getAllWeapons from '../../../../../mocks/getAllWeapons.js';
+
+const eventConfig = { ...singleEventMock, EventPrice: 25.5 };
+const validation = {
+  EventName: { invalid: false, message: '' },
+  EventPrice: { invalid: false, message: '' }
+};
+const 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' }
+];
+
+export default {
+  title: 'Organisms/Wizards/EditEventWizard/BasicEventInfo/BasicEventInfo',
+  component: BasicEventInfo,
+  args: { eventConfig, validation, currentStep: 0, steps, weapons: getAllWeapons },
+  argTypes: {
+    eventConfig: { control: 'object' },
+    validation: { control: 'object' },
+    weapons: { control: 'object' },
+    steps: { control: 'object' },
+    currentStep: { control: 'number' }
+  }
+};
+
+export const Default = {
+  args: { eventConfig, validation, currentStep: 0, steps, weapons: getAllWeapons }
+};
+
+export const FreeEvent = {
+  args: { ...Default.args, eventConfig: { ...eventConfig, EventPrice: 0 } }
+};
+
+export const InvalidPrice = {
+  args: {
+    ...Default.args,
+    eventConfig: { ...eventConfig, EventPrice: -5 },
+    validation: {
+      ...validation,
+      EventPrice: { invalid: true, message: 'Price must be a non-negative number.' }
+    }
+  }
+};

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

@@ -1,206 +1,227 @@
-<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="Basic Event Information" weight="normal" />
-    </div>
-    <div class="w-full flex flex-row justify-center my-4 grow">
-      <BaseText
-        color="quinary"
-        size="sm"
-        text="Please fill in the basic information required for your event, including the event name, start date, start time, number of rings, and weapon form."
-        weight="normal"
-      />
-    </div>
-
-    <div class="mb-4 grow">
-      <BaseText color="quaternary" size="sm" text="BASIC INFORMATION" class="border-b mb-5" />
-      <TitledInput
-        :inputValue="eventConfig.EventName || ''"
-        :invalid="validation.EventName.invalid"
-        placeholder="Enter Event Name"
-        :title="validation.EventName.invalid ? `Event Name - ${validation.EventName.message}` : 'Event Name'"
-        @update:value="handleEventNameChange"
-      />
-    </div>
-
-    <div class="flex flex-row mb-3 grow">
-      <div class="mr-1 w-full">
-        <BaseText
-          color="quinary"
-          :invalid="validation.startDate"
-          size="sm"
-          text="Start Date"
-          weight="normal"
-          class="mb-1"
-        />
-        <DatePicker
-          :invalid="validation.Date"
-          :setDate="eventConfig.Date"
-          :userLevel="userLevel"
-          @update:selectedDate="handleDateUpdate"
-        />
-      </div>
-    </div>
-
-    <div class="mb-4 grow">
-      <BaseText
-        color="quinary"
-        :invalid="validation.StartTime"
-        size="sm"
-        text="Start Time"
-        weight="normal"
-        class="mb-1"
-      />
-      <DatePicker
-        :invalid="validation.StartTime"
-        :setDate="eventConfig.StartTime"
-        pickerMode="time"
-        @update:selectedDate="handleTimeUpdate"
-      />
-    </div>
-
-    <div class="mb-4 grow">
-      <BaseText
-        color="quinary"
-        :invalid="validation.WeaponId"
-        size="sm"
-        text="Weapon Form"
-        weight="normal"
-        class="mb-1"
-      />
-      <DropDownMenu
-        :label="''"
-        :items="weapons"
-        :selected-item="selectedWeapon"
-        :alignEnd="false"
-        width="w-full"
-        @update:selectedItem="handleWeaponChange"
-      />
-    </div>
-
-    <div class="mb-4 grow">
-      <TitledInput
-        :inputValue="eventConfig.NumberOfRings || 2"
-        :invalid="validation.NumberOfRings"
-        placeholder="Enter Number of Rings"
-        inputType="number"
-        title="Number of Rings"
-        @update:value="handleNumberOfRingsChange"
-      />
-    </div>
-
-    <div class="mb-4 grow">
-      <TitledInput
-        :inputValue="eventConfig.CutOffNumber || ''"
-        placeholder="Unlimited"
-        inputType="number"
-        title="Max Fencers Allowed In (blank is unlimited)"
-        @update:value="handleCutOffNumber"
-      />
-    </div>
-
-    <div class="flex flex-row justify-center h-12 mt-4">
-      <BaseButton
-        class="w-1/2 ml-1 h-12"
-        color="neutral"
-        label="Cancel"
-        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
-        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 DatePicker from '../../../ComplexInputs/DatePicker/DatePicker.vue';
-import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
-import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
-
-export default {
-  name: 'BasicEventInfoForm',
-  emits: ['update', 'update:back', 'update:next'],
-  components: { StepIndicator, BaseText, DropDownMenu, DatePicker, TitledInput, BaseButton },
-  props: {
-    eventConfig: {
-      type: Object,
-      required: true
-    },
-    weapons: {
-      type: Array,
-      required: true
-    },
-    validation: {
-      type: Object,
-      required: true
-    },
-    steps: {
-      type: Array,
-      required: true
-    },
-    currentStep: {
-      type: Number,
-      required: true
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  data() {
-    return {
-      validationState: {
-        invalid: false,
-        message: ''
-      }
-    };
-  },
-  computed: {
-    selectedWeapon() {
-      const weapon = this.weapons.find(w => w.Id === this.eventConfig.WeaponId);
-      return weapon ? weapon.Name : { text: 'Longsword', link: 1 };
-    }
-  },
-  methods: {
-    handleEventNameChange(value) {
-      this.$emit('update', { EventName: value });
-    },
-    handleDateUpdate(value) {
-      this.$emit('update', { Date: value });
-    },
-    handleTimeUpdate(value) {
-      this.$emit('update', { StartTime: value });
-    },
-    handleNumberOfRingsChange(value) {
-      this.$emit('update', { NumberOfRings: value });
-    },
-    handleWeaponChange(value) {
-      this.$emit('update', { WeaponId: value.link });
-    },
-    handleCutOffNumber(value) {
-      this.$emit('update', { CutOffNumber: value });
-    },
-    handleNext() {
-      this.$emit('update:next');
-    },
-    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="Basic Event Information" weight="normal" />
+    </div>
+    <div class="w-full flex flex-row justify-center my-4 grow">
+      <BaseText
+        color="quinary"
+        size="sm"
+        text="Please fill in the basic information required for your event, including the event name, start date, start time, number of rings, and weapon form."
+        weight="normal"
+      />
+    </div>
+
+    <div class="mb-4 grow">
+      <BaseText color="quaternary" size="sm" text="BASIC INFORMATION" class="border-b mb-5" />
+      <TitledInput
+        :inputValue="eventConfig.EventName || ''"
+        :invalid="validation.EventName.invalid"
+        placeholder="Enter Event Name"
+        :title="validation.EventName.invalid ? `Event Name - ${validation.EventName.message}` : 'Event Name'"
+        @update:value="handleEventNameChange"
+      />
+    </div>
+
+    <div class="mb-4 grow">
+      <TitledInput
+        :inputValue="eventConfig.EventPrice ?? ''"
+        :invalid="priceValidation.invalid"
+        placeholder="0.00"
+        :title="priceValidationLabel"
+        @update:value="handleEventPriceChange"
+      />
+    </div>
+
+    <div class="flex flex-row mb-3 grow">
+      <div class="mr-1 w-full">
+        <BaseText
+          color="quinary"
+          :invalid="validation.startDate"
+          size="sm"
+          text="Start Date"
+          weight="normal"
+          class="mb-1"
+        />
+        <DatePicker
+          :invalid="validation.Date"
+          :setDate="eventConfig.Date"
+          :userLevel="userLevel"
+          @update:selectedDate="handleDateUpdate"
+        />
+      </div>
+    </div>
+
+    <div class="mb-4 grow">
+      <BaseText
+        color="quinary"
+        :invalid="validation.StartTime"
+        size="sm"
+        text="Start Time"
+        weight="normal"
+        class="mb-1"
+      />
+      <DatePicker
+        :invalid="validation.StartTime"
+        :setDate="eventConfig.StartTime"
+        pickerMode="time"
+        @update:selectedDate="handleTimeUpdate"
+      />
+    </div>
+
+    <div class="mb-4 grow">
+      <BaseText
+        color="quinary"
+        :invalid="validation.WeaponId"
+        size="sm"
+        text="Weapon Form"
+        weight="normal"
+        class="mb-1"
+      />
+      <DropDownMenu
+        :label="''"
+        :items="weapons"
+        :selected-item="selectedWeapon"
+        :alignEnd="false"
+        width="w-full"
+        @update:selectedItem="handleWeaponChange"
+      />
+    </div>
+
+    <div class="mb-4 grow">
+      <TitledInput
+        :inputValue="eventConfig.NumberOfRings || 2"
+        :invalid="validation.NumberOfRings"
+        placeholder="Enter Number of Rings"
+        inputType="number"
+        title="Number of Rings"
+        @update:value="handleNumberOfRingsChange"
+      />
+    </div>
+
+    <div class="mb-4 grow">
+      <TitledInput
+        :inputValue="eventConfig.CutOffNumber || ''"
+        placeholder="Unlimited"
+        inputType="number"
+        title="Max Fencers Allowed In (blank is unlimited)"
+        @update:value="handleCutOffNumber"
+      />
+    </div>
+
+    <div class="flex flex-row justify-center h-12 mt-4">
+      <BaseButton
+        class="w-1/2 ml-1 h-12"
+        color="neutral"
+        label="Cancel"
+        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
+        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 DatePicker from '../../../ComplexInputs/DatePicker/DatePicker.vue';
+import DropDownMenu from '../../../ComplexInputs/DropDown/DropDownMenu.vue';
+import BaseButton from '../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import StepIndicator from '../../../../Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue';
+
+export default {
+  name: 'BasicEventInfoForm',
+  emits: ['update', 'update:back', 'update:next'],
+  components: { StepIndicator, BaseText, DropDownMenu, DatePicker, TitledInput, BaseButton },
+  props: {
+    nextButtonLabel: { type: String, default: 'Next' },
+    eventConfig: {
+      type: Object,
+      required: true
+    },
+    weapons: {
+      type: Array,
+      required: true
+    },
+    validation: {
+      type: Object,
+      required: true
+    },
+    steps: {
+      type: Array,
+      required: true
+    },
+    currentStep: {
+      type: Number,
+      required: true
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    }
+  },
+  data() {
+    return {
+      validationState: {
+        invalid: false,
+        message: ''
+      }
+    };
+  },
+  computed: {
+    priceValidation() {
+      return this.validation.EventPrice ?? { invalid: false, message: '' };
+    },
+    priceValidationLabel() {
+      if (!this.priceValidation.invalid) return 'Event Price';
+      return `Event Price - ${this.priceValidation.message}`;
+    },
+    selectedWeapon() {
+      const weapon = this.weapons.find(w => w.Id === this.eventConfig.WeaponId);
+      return weapon ? weapon.Name : { text: 'Longsword', link: 1 };
+    }
+  },
+  methods: {
+    handleEventNameChange(value) {
+      this.$emit('update', { EventName: value });
+    },
+    handleEventPriceChange(value) {
+      this.$emit('update', { EventPrice: value });
+    },
+    handleDateUpdate(value) {
+      this.$emit('update', { Date: value });
+    },
+    handleTimeUpdate(value) {
+      this.$emit('update', { StartTime: value });
+    },
+    handleNumberOfRingsChange(value) {
+      this.$emit('update', { NumberOfRings: value });
+    },
+    handleWeaponChange(value) {
+      this.$emit('update', { WeaponId: value.link });
+    },
+    handleCutOffNumber(value) {
+      this.$emit('update', { CutOffNumber: value });
+    },
+    handleNext() {
+      this.$emit('update:next');
+    },
+    handleBack() {
+      this.$emit('update:back');
+    }
+  }
+};
+</script>