@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,41 +1,41 @@
 import BasicEventInfo from './BasicEventInfo.vue';
-import singleEventMock from "../../../../../mocks/singleEventMock.js";
-import getAllWeapons from "../../../../../mocks/getAllWeapons.js";
+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' },
-    },
+  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"}
-        ]
-    }
+  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' }
+    ]
+  }
 };

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

@@ -1,91 +1,141 @@
 <template>
   <div class="flex flex-col h-full pb-4">
     <div class="w-full flex justify-center grow">
-      <StepIndicator :steps="steps" :selected="currentStep"/>
+      <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"/>
+      <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"/>
+      <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"
+      <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"/>
+        <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"
+          :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"/>
+      <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"/>
+      <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"/>
+      <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"/>
+      <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"/>
+      <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";
+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},
+  components: { StepIndicator, BaseText, DropDownMenu, DatePicker, TitledInput, BaseButton },
   props: {
     eventConfig: {
       type: Object,
@@ -117,39 +167,39 @@ export default {
       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};
+      return weapon ? weapon.Name : { text: 'Longsword', link: 1 };
     }
   },
   methods: {
     handleEventNameChange(value) {
-      this.$emit("update", {EventName: value});
+      this.$emit('update', { EventName: value });
     },
     handleDateUpdate(value) {
-      this.$emit("update", {Date: value});
+      this.$emit('update', { Date: value });
     },
     handleTimeUpdate(value) {
-      this.$emit("update", {StartTime: value});
+      this.$emit('update', { StartTime: value });
     },
     handleNumberOfRingsChange(value) {
-      this.$emit("update", {NumberOfRings: value});
+      this.$emit('update', { NumberOfRings: value });
     },
     handleWeaponChange(value) {
-      this.$emit("update", {WeaponId: value.link});
+      this.$emit('update', { WeaponId: value.link });
     },
     handleCutOffNumber(value) {
-      this.$emit("update", {CutOffNumber: value});
+      this.$emit('update', { CutOffNumber: value });
     },
     handleNext() {
-      this.$emit("update:next");
+      this.$emit('update:next');
     },
     handleBack() {
-      this.$emit("update:back");
+      this.$emit('update:back');
     }
   }
 };

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

@@ -1,104 +1,104 @@
 import directElimination from './DirectElimination.vue';
 
 export default {
-    title: 'Organisms/Wizards/EditEventWizard/DirectElimination/DirectElimination',
-    component: directElimination,
-    args: {
-        eventConfig: {
-            seedWith: 'M2 - MeyerSquared',
-            maxFencers: false,
-            maxFencerCount: 64,
-            boutCounter: false,
-            boutCount: 5,
-            poolTimer: false,
-            poolMax: true,
-            DEMax: true,
-            ThirdPlaceBout: true,
-            poolTime: 120,
-            poolMaxPoints: 7,
-            DETimer: false,
-            DETime: 120,
-            DEBoutCounter: false,
-            DEBoutCount: 7,
-            DEMaxPoints: 7,
-            DEPromotionAmount: '100%',
-            DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored']
-        },
-        validation: {
-            name: false,
-            imageLink: false,
-            address: false,
-            coordinates: false,
-            startDate: false,
-            totalDays: false,
-            description: false,
-            visibility: false
-        },
-        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"}
-        ],
-        DEFormats: [
-            { link: 1, text: 'Single Elimination'},
-            { link: 2, text: 'Double Elimination'},
-        ]
+  title: 'Organisms/Wizards/EditEventWizard/DirectElimination/DirectElimination',
+  component: directElimination,
+  args: {
+    eventConfig: {
+      seedWith: 'M2 - MeyerSquared',
+      maxFencers: false,
+      maxFencerCount: 64,
+      boutCounter: false,
+      boutCount: 5,
+      poolTimer: false,
+      poolMax: true,
+      DEMax: true,
+      ThirdPlaceBout: true,
+      poolTime: 120,
+      poolMaxPoints: 7,
+      DETimer: false,
+      DETime: 120,
+      DEBoutCounter: false,
+      DEBoutCount: 7,
+      DEMaxPoints: 7,
+      DEPromotionAmount: '100%',
+      DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored']
     },
-    argTypes: {
-        event: { control: 'object' },
-        seedWithOptions: { control: 'Array' },
-        validation: { control: 'object' },
-        DEFormats: { control: 'Array'}
+    validation: {
+      name: false,
+      imageLink: false,
+      address: false,
+      coordinates: false,
+      startDate: false,
+      totalDays: false,
+      description: false,
+      visibility: false
     },
+    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' }
+    ],
+    DEFormats: [
+      { link: 1, text: 'Single Elimination' },
+      { link: 2, text: 'Double Elimination' }
+    ]
+  },
+  argTypes: {
+    event: { control: 'object' },
+    seedWithOptions: { control: 'Array' },
+    validation: { control: 'object' },
+    DEFormats: { control: 'Array' }
+  }
 };
 
 export const Default = {
-    args: {
-        eventConfig: {
-            seedWith: 'M2 - MeyerSquared',
-            maxFencers: false,
-            maxFencerCount: 64,
-            boutCounter: false,
-            boutCount: 5,
-            poolTimer: false,
-            poolMax: true,
-            DEMax: true,
-            ThirdPlaceBout: true,
-            poolTime: 120,
-            poolMaxPoints: 7,
-            DETimer: false,
-            DETime: 120,
-            DEBoutCounter: false,
-            DEBoutCount: 7,
-            DEMaxPoints: 7,
-            DEPromotionAmount: '100%',
-            DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
-            DEType: 'single'
-        },
-        validation: {
-            name: false,
-            imageLink: false,
-            address: false,
-            coordinates: false,
-            startDate: false,
-            totalDays: false,
-            description: false,
-            visibility: false
-        },
-        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"}
-        ],
-        DEFormats: [
-            { link: 1, text: 'Single Elimination'},
-            { link: 2, text: 'Double Elimination'},
-        ]
-    }
+  args: {
+    eventConfig: {
+      seedWith: 'M2 - MeyerSquared',
+      maxFencers: false,
+      maxFencerCount: 64,
+      boutCounter: false,
+      boutCount: 5,
+      poolTimer: false,
+      poolMax: true,
+      DEMax: true,
+      ThirdPlaceBout: true,
+      poolTime: 120,
+      poolMaxPoints: 7,
+      DETimer: false,
+      DETime: 120,
+      DEBoutCounter: false,
+      DEBoutCount: 7,
+      DEMaxPoints: 7,
+      DEPromotionAmount: '100%',
+      DEPromotionOrder: ['Win Percent', 'Indicator', 'Points Scored'],
+      DEType: 'single'
+    },
+    validation: {
+      name: false,
+      imageLink: false,
+      address: false,
+      coordinates: false,
+      startDate: false,
+      totalDays: false,
+      description: false,
+      visibility: false
+    },
+    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' }
+    ],
+    DEFormats: [
+      { link: 1, text: 'Single Elimination' },
+      { link: 2, text: 'Double Elimination' }
+    ]
+  }
 };