@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,227 +1,256 @@
-<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>
+<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="weaponOptions"
+        :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="mb-4 grow">
+      <Toggle
+        :checked="isWaitlistEnabled"
+        label="Enable Waitlist"
+        :labelLeft="false"
+        @update:checked="handleWaitlistChange"
+      />
+      <BaseText
+        text="Allow fencers to join a waitlist when this event reaches capacity."
+        size="sm"
+        color="quinary"
+        class="mt-1"
+      />
+    </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';
+import Toggle from '../../../../Molecules/Inputs/Toggle/Toggle.vue';
+
+export default {
+  name: 'BasicEventInfoForm',
+  emits: ['update', 'update:back', 'update:next'],
+  components: { Toggle, 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: {
+    isWaitlistEnabled() {
+      return this.eventConfig.WaitlistEnabled ?? true;
+    },
+    priceValidation() {
+      return this.validation.EventPrice ?? { invalid: false, message: '' };
+    },
+    priceValidationLabel() {
+      if (!this.priceValidation.invalid) return 'Event Price';
+      return `Event Price - ${this.priceValidation.message}`;
+    },
+    weaponOptions() {
+      return this.weapons.map(weapon => ({
+        ...weapon,
+        text: weapon.text ?? weapon.Name,
+        link: weapon.link ?? weapon.Id
+      }));
+    },
+    selectedWeapon() {
+      const weapon = this.weaponOptions.find(option => String(option.link) === String(this.eventConfig.WeaponId));
+      return weapon ?? { text: 'Select a weapon', link: null };
+    }
+  },
+  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 });
+    },
+    handleWaitlistChange(value) {
+      this.$emit('update', { WaitlistEnabled: value });
+    },
+    handleNext() {
+      this.$emit('update:next');
+    },
+    handleBack() {
+      this.$emit('update:back');
+    }
+  }
+};
+</script>