@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,102 +1,150 @@
 <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="'POOL CONFIGURATION'" :weight="'normal'"
-                data-testid="text-add-tournament"/>
+      <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"/>
+      <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"/>
+        <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"/>
+        <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"/>
+        <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"/>
+          <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"/>
+        <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"/>
+          <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"/>
+        <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"/>
+          <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"/>
+        <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"/>
+      <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";
+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},
+  components: { BaseButton, StepIndicator, BaseText, DropDownMenu, TitledInput, Toggle },
   props: {
     eventConfig: {
       type: Object,
@@ -112,49 +160,49 @@ export default {
   },
   data() {
     return {
-      localEventConfig: {...this.eventConfig},
-      selectedItem: {text: 'M2 - MeyerSquared', link: 'M2'}
+      localEventConfig: { ...this.eventConfig },
+      selectedItem: { text: 'M2 - MeyerSquared', link: 'M2' }
     };
   },
   mounted() {
-    this.localEventConfig = {...this.eventConfig};
+    this.localEventConfig = { ...this.eventConfig };
   },
   watch: {
     eventConfig: {
       deep: true,
       handler(newConfig) {
-        this.localEventConfig = {...newConfig};
+        this.localEventConfig = { ...newConfig };
       }
     }
   },
   methods: {
     handleSeedWithChange(value) {
       this.localEventConfig.seedWith = value.text;
-      this.$emit('update', {seedWith: value.text});
+      this.$emit('update', { seedWith: value.text });
     },
     handlePoolTimerToggle(value) {
       this.localEventConfig.poolTimer = value;
-      this.$emit('update', {poolTimer: value});
+      this.$emit('update', { poolTimer: value });
     },
     handlePoolTimeChange(value) {
       this.localEventConfig.poolTime = value;
-      this.$emit('update', {poolTime: value});
+      this.$emit('update', { poolTime: value });
     },
     handleBoutCounterToggle(value) {
       this.localEventConfig.boutCounter = value;
-      this.$emit('update', {boutCounter: value});
+      this.$emit('update', { boutCounter: value });
     },
     handleBoutCountChange(value) {
       this.localEventConfig.boutCount = value;
-      this.$emit('update', {boutCount: value});
+      this.$emit('update', { boutCount: value });
     },
     handlePoolMaxToggle(value) {
       this.localEventConfig.poolMax = value;
-      this.$emit('update', {poolMax: value});
+      this.$emit('update', { poolMax: value });
     },
     handlePoolMaxPointsChange(value) {
       this.localEventConfig.poolMaxPoints = value;
-      this.$emit('update', {poolMaxPoints: value});
+      this.$emit('update', { poolMaxPoints: value });
     },
     handleNext() {
       this.$emit('update:next', this.localEventConfig);

package/src/stories/Templates/Assignment/Assignment.stories.js

@@ -1,29 +1,28 @@
-import Assignment from './Assignment.vue';
-import assignmentMock from "../../../mocks/assignments.js";
-
-export default {
-    title: 'Templates/Assignments/Assignments',
-    component: Assignment,
-    tags: ['autodocs'],
-    args: {
-        assignments: assignmentMock
-    },
-    argTypes: {
-        assignments: { control: { type: 'array' } },
-        forwardToEvent: { action: 'forwardToEvent' },
-        refreshAssignments: { action: 'refreshAssignments' },
-    }
-};
+import Assignment from './Assignment.vue';
+import assignmentMock from '../../../mocks/assignments.js';
 
+export default {
+  title: 'Templates/Assignments/Assignments',
+  component: Assignment,
+  tags: ['autodocs'],
+  args: {
+    assignments: assignmentMock
+  },
+  argTypes: {
+    assignments: { control: { type: 'array' } },
+    forwardToEvent: { action: 'forwardToEvent' },
+    refreshAssignments: { action: 'refreshAssignments' }
+  }
+};
 
 export const Default = {
-    args: {
-        assignments: assignmentMock
-    }
+  args: {
+    assignments: assignmentMock
+  }
 };
 
 export const NoResults = {
-    args: {
-        assignments: []
-    }
-};
+  args: {
+    assignments: []
+  }
+};