@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.stories.js

@@ -1,17 +1,13 @@
 import TextBoxEditor from './TextBoxEditor.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/TextBoxEditor',
-    tags: ['autodocs'],
-    component: TextBoxEditor,
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/TextBoxEditor',
+  tags: ['autodocs'],
+  component: TextBoxEditor,
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    args: {
-    }
+  args: {}
 };
-
-
-

package/src/stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue

@@ -1,52 +1,113 @@
 <template>
-  <div class="border rounded-lg text-secondary text-sm p-4 w-full" :class="invalid ? 'border-alarm' : 'border-dropdownSelect'" @click="editor && editor.commands.focus()">
+  <div
+    class="border rounded-lg text-secondary text-sm p-4 w-full"
+    :class="invalid ? 'border-alarm' : 'border-dropdownSelect'"
+    @click="editor && editor.commands.focus()"
+  >
     <div data-testid="editor-buttons" class="flex flex-row pl-2">
       <div class="w-1/2 md:w-1/3 border-r border-dropdownSelect flex flex-row justify-between pr-2">
-        <BaseButton iconName="fa-h1" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 1 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 1 }).run()" />
-        <BaseButton iconName="fa-h2" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 2 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 2 }).run()"/>
-        <BaseButton iconName="fa-h3" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 3 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 3 }).run()"/>
-        <BaseButton iconName="fa-paragraph" label="" type="editor"
-                    :selected="editor && editor.isActive('paragraph')"
-                    @buttonClick="editor.chain().setParagraph().run()"/>
+        <BaseButton
+          iconName="fa-h1"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 1 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 1 }).run()"
+        />
+        <BaseButton
+          iconName="fa-h2"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 2 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 2 }).run()"
+        />
+        <BaseButton
+          iconName="fa-h3"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 3 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 3 }).run()"
+        />
+        <BaseButton
+          iconName="fa-paragraph"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('paragraph')"
+          @buttonClick="editor.chain().setParagraph().run()"
+        />
       </div>
       <div class="hidden md:flex w-1/3 border-r border-dropdownSelect flex-row justify-around">
-        <BaseButton :selected="editor && editor.isActive('bold')" iconName="fa-bold" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleBold().run()"/>
-        <BaseButton :selected="editor && editor.isActive('italic')" iconName="fa-italic" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleItalic().run()"/>
-        <BaseButton :selected="editor && editor.isActive('strike')" iconName="fa-strikethrough" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleStrike().run()"/>
+        <BaseButton
+          :selected="editor && editor.isActive('bold')"
+          iconName="fa-bold"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleBold().run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('italic')"
+          iconName="fa-italic"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleItalic().run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('strike')"
+          iconName="fa-strikethrough"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleStrike().run()"
+        />
       </div>
       <div class="hidden md:flex w-1/3 flex-row justify-between pl-2">
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'left' })" iconName="fa-align-left" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('left').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'center' })" iconName="fa-align-center" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('center').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'right' })" iconName="fa-align-right" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('right').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'justify' })" iconName="fa-align-justify" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('justify').run()"/>
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'left' })"
+          iconName="fa-align-left"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('left').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'center' })"
+          iconName="fa-align-center"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('center').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'right' })"
+          iconName="fa-align-right"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('right').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'justify' })"
+          iconName="fa-align-justify"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('justify').run()"
+        />
       </div>
       <div class="w-36 flex flex-row justify-around ml-4 border-l">
-        <BaseButton :selected="editor && editor.isActive('bulletList')"
-                    iconName="fa-list-ul"
-                    type="editor"
-                    @buttonClick="editor.chain().toggleBulletList().run()"  label=""/>
-        <BaseButton :selected="editor && editor.isActive('orderedList')"
-                    iconName="fa-list-ol"
-                    type="editor"
-                    @buttonClick="editor.chain().toggleOrderedList().run()"  label=""/>
+        <BaseButton
+          :selected="editor && editor.isActive('bulletList')"
+          iconName="fa-list-ul"
+          type="editor"
+          @buttonClick="editor.chain().toggleBulletList().run()"
+          label=""
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('orderedList')"
+          iconName="fa-list-ol"
+          type="editor"
+          @buttonClick="editor.chain().toggleOrderedList().run()"
+          label=""
+        />
       </div>
     </div>
 
     <div class="my-4 p-4 rounded-xl h-72 bg-tertiary overflow-auto">
-      <editor-content :editor="editor" class="focus:shadow-none focus:outline-none"/>
+      <editor-content :editor="editor" class="focus:shadow-none focus:outline-none" />
     </div>
   </div>
 </template>
@@ -57,7 +118,7 @@ import { EditorContent, useEditor } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
 import Highlight from '@tiptap/extension-highlight';
 import TextAlign from '@tiptap/extension-text-align';
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   components: {
@@ -83,13 +144,13 @@ export default {
         StarterKit,
         Highlight,
         TextAlign.configure({
-          types: ['heading', 'paragraph'],
-        }),
+          types: ['heading', 'paragraph']
+        })
       ],
       editorProps: {
         attributes: {
-          class: 'focus:outline-none',
-        },
+          class: 'focus:outline-none'
+        }
       },
       onUpdate({ editor }) {
         editorContent.value = editor.getHTML();
@@ -97,14 +158,17 @@ export default {
       }
     });
 
-    watch(() => props.initialContent, (newContent) => {
-      if (editor.value) {
-        const currentContent = editor.value.getHTML();
-        if (newContent !== currentContent) {
-          editor.value.commands.setContent(newContent);
+    watch(
+      () => props.initialContent,
+      newContent => {
+        if (editor.value) {
+          const currentContent = editor.value.getHTML();
+          if (newContent !== currentContent) {
+            editor.value.commands.setContent(newContent);
+          }
         }
       }
-    });
+    );
 
     return { editor, editorContent };
   },
@@ -126,4 +190,4 @@ export default {
   padding: 0 1rem;
   list-style: disc !important;
 }
-</style>
+</style>

package/src/stories/Organisms/Containers/BoutsSection/BoutsSection.stories.js

@@ -5,65 +5,64 @@ import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPool
 const baseBouts = getPoolsWithBoutsByPoolId.pools[0]?.Bouts || [];
 
 // Helpers to clone with a different Status
-const withStatus = (bouts, status) =>
-    bouts.map((b, i) => ({ ...b, Status: status, OrderIndex: i }));
+const withStatus = (bouts, status) => bouts.map((b, i) => ({ ...b, Status: status, OrderIndex: i }));
 
 export default {
-    title: 'Organisms/Containers/BoutsSection',
-    component: BoutsSection,
-    tags: ['autodocs'],
-    args: {
-        title: 'Upcoming',
-        bouts: withStatus(baseBouts.slice(0, 4), 'Scheduled'),
-        draggable: false,
-        reorderMode: false,
-        showPlaceholder: false,
-        cardProps: {
-            hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
-            editMode: false,
-            isCountingBackwardsMaxScore: null
-        }
-    },
-    argTypes: {
-        title: { control: 'text' },
-        bouts: { control: 'object' },
-        draggable: { control: 'boolean' },
-        reorderMode: { control: 'boolean' },
-        showPlaceholder: { control: 'boolean' },
-        cardProps: { control: 'object' }
+  title: 'Organisms/Containers/BoutsSection',
+  component: BoutsSection,
+  tags: ['autodocs'],
+  args: {
+    title: 'Upcoming',
+    bouts: withStatus(baseBouts.slice(0, 4), 'Scheduled'),
+    draggable: false,
+    reorderMode: false,
+    showPlaceholder: false,
+    cardProps: {
+      hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
+      editMode: false,
+      isCountingBackwardsMaxScore: null
     }
+  },
+  argTypes: {
+    title: { control: 'text' },
+    bouts: { control: 'object' },
+    draggable: { control: 'boolean' },
+    reorderMode: { control: 'boolean' },
+    showPlaceholder: { control: 'boolean' },
+    cardProps: { control: 'object' }
+  }
 };
 
 export const Upcoming = {};
 
 export const UpcomingDraggable = {
-    args: {
-        title: 'Upcoming (Draggable)',
-        draggable: true,
-        reorderMode: true
-    }
+  args: {
+    title: 'Upcoming (Draggable)',
+    draggable: true,
+    reorderMode: true
+  }
 };
 
 export const Active = {
-    args: {
-        title: 'Active',
-        bouts: withStatus(baseBouts.slice(0, 2), 'Active'),
-        draggable: false
-    }
+  args: {
+    title: 'Active',
+    bouts: withStatus(baseBouts.slice(0, 2), 'Active'),
+    draggable: false
+  }
 };
 
 export const ActiveEmptyWithPlaceholder = {
-    args: {
-        title: 'Active',
-        bouts: [],
-        showPlaceholder: true
-    }
+  args: {
+    title: 'Active',
+    bouts: [],
+    showPlaceholder: true
+  }
 };
 
 export const Completed = {
-    args: {
-        title: 'Completed',
-        bouts: withStatus(baseBouts.slice(0, 3), 'Completed'),
-        draggable: false
-    }
+  args: {
+    title: 'Completed',
+    bouts: withStatus(baseBouts.slice(0, 3), 'Completed'),
+    draggable: false
+  }
 };

package/src/stories/Organisms/Containers/BoutsSection/BoutsSection.vue

@@ -13,42 +13,42 @@
     <div class="w-full flex flex-col items-center">
       <!-- Placeholder (e.g., for Active when none) -->
       <div v-if="showPlaceholder && (!bouts || bouts.length === 0)" class="w-full md:w-3/4 my-4">
-        <BoutCard :bout="{}" v-bind="cardProps" :isWaiting="true" :editMode="false"  hostingClubColors=""/>
+        <BoutCard :bout="{}" v-bind="cardProps" :isWaiting="true" :editMode="false" hostingClubColors="" />
       </div>
 
       <!-- Non-draggable list -->
       <template v-if="!draggable">
         <div v-for="bout in bouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4">
           <BoutCard
-              :bout="bout"
-              v-bind="cardProps"
-              :reorderMode="reorderMode"
-              @action:startBout="$emit('start', bout)"
-              @action:resumeBout="$emit('resume', bout)"
-              @action:editBout="$emit('edit', bout)"
+            :bout="bout"
+            v-bind="cardProps"
+            :reorderMode="reorderMode"
+            @action:startBout="$emit('start', bout)"
+            @action:resumeBout="$emit('resume', bout)"
+            @action:editBout="$emit('edit', bout)"
           />
         </div>
       </template>
 
       <!-- Draggable list -->
       <draggable
-          v-else
-          v-model="internalList"
-          item-key="BoutId"
-          :disabled="!reorderMode"
-          handle=".drag-handle"
-          :animation="150"
-          ghost-class="drag-ghost"
-          class="w-full flex flex-col items-center"
-          @end="emitOrder"
+        v-else
+        v-model="internalList"
+        item-key="BoutId"
+        :disabled="!reorderMode"
+        handle=".drag-handle"
+        :animation="150"
+        ghost-class="drag-ghost"
+        class="w-full flex flex-col items-center"
+        @end="emitOrder"
       >
         <template #item="{ element }">
           <div class="w-full md:w-3/4 my-4">
             <BoutCard
-                :bout="element"
-                v-bind="cardProps"
-                :reorderMode="reorderMode"
-                @action:startBout="$emit('start', element)"
+              :bout="element"
+              v-bind="cardProps"
+              :reorderMode="reorderMode"
+              @action:startBout="$emit('start', element)"
             />
           </div>
         </template>
@@ -72,14 +72,19 @@ export default {
     draggable: { type: Boolean, default: false },
     reorderMode: { type: Boolean, default: false },
     showPlaceholder: { type: Boolean, default: false },
-    hostingClubColors: { type: Object, required: true}
+    hostingClubColors: { type: Object, required: true }
   },
   emits: ['start', 'resume', 'edit', 'reorder'],
   data() {
     return { internalList: this.bouts };
   },
   watch: {
-    bouts: { handler(v){ this.internalList = v; }, deep: true }
+    bouts: {
+      handler(v) {
+        this.internalList = v;
+      },
+      deep: true
+    }
   },
   methods: {
     emitOrder() {
@@ -91,5 +96,7 @@ export default {
 
 <style scoped>
 /* optional helpers for drag visuals */
-.drag-ghost { opacity: 0.6; }
+.drag-ghost {
+  opacity: 0.6;
+}
 </style>

package/src/stories/Organisms/Containers/FinalResults/FinalResultsTable.stories.js

@@ -1,27 +1,27 @@
-import FinalResults from './FinalResultsTable.vue'
-import getFinalEventResults from "../../../../mocks/getFinalEventResult.js";
+import FinalResults from './FinalResultsTable.vue';
+import getFinalEventResults from '../../../../mocks/getFinalEventResult.js';
 
 export default {
-    title: 'Organisms/Containers/FinalResultsTable',
-    component: FinalResults,
-    tags: ['autodocs'],
-    args: {
-        finalResults: getFinalEventResults.FinalResults,
-    },
-    argTypes: {
-        finalResults: { control: 'object' },
-    },
-}
+  title: 'Organisms/Containers/FinalResultsTable',
+  component: FinalResults,
+  tags: ['autodocs'],
+  args: {
+    finalResults: getFinalEventResults.FinalResults
+  },
+  argTypes: {
+    finalResults: { control: 'object' }
+  }
+};
 
 //let modifiedEvent = {...generateFinalResults, Status: "results"}
 export const Default = {
-    args: {
-        finalResults: getFinalEventResults.FinalResults,
-    }
-}
+  args: {
+    finalResults: getFinalEventResults.FinalResults
+  }
+};
 
 export const NoResultsYet = {
-    args: {
-        finalResults: [],
-    }
-}
+  args: {
+    finalResults: []
+  }
+};

package/src/stories/Organisms/Containers/FinalResults/FinalResultsTable.vue

@@ -6,23 +6,27 @@
         <div class="w-full flex justify-center">
           <div class="w-96">
             <BaseText text="No Results Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
-            <BaseText text="Pool results will be displayed here once all bouts have completed and the 'Generate Pool Results' button has been clicked on the Pools Tab." size="sm" color="quinary" class="text-center" />
+            <BaseText
+              text="Pool results will be displayed here once all bouts have completed and the 'Generate Pool Results' button has been clicked on the Pools Tab."
+              size="sm"
+              color="quinary"
+              class="text-center"
+            />
           </div>
         </div>
       </section>
       <div v-else v-for="person in finalResults" :key="person.personId" class="flex flex-col py-1">
         <FencerFinalResultCard :result="person" />
       </div>
-
     </div>
   </div>
 </template>
 
 <script>
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import FencerPoolResultsCard from "../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue";
-import FencerFinalResultCard from "../../Cards/FencerFinalResultCard/FencerFinalResultCard.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import FencerPoolResultsCard from '../../Cards/FencerPoolResultsCard/FencerPoolResultsCard.vue';
+import FencerFinalResultCard from '../../Cards/FencerFinalResultCard/FencerFinalResultCard.vue';
 
 export default {
   components: {
@@ -40,11 +44,7 @@ export default {
   data() {
     return {
       emptyDesertIcon
-    }
-  },
-}
+    };
+  }
+};
 </script>
-
-
-
-

package/src/stories/Organisms/Containers/KioskContainer/KioskContainer.stories.js

@@ -1,29 +1,28 @@
-import KioskContainer from './KioskContainer.vue'
-import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
-import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
-import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+import KioskContainer from './KioskContainer.vue';
+import getCLubDisplayByClubId from '../../../../mocks/getClubDisplayByClubId.js';
+import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournamentId.js';
+import getEventByTournamentId from '../../../../mocks/getEventByTournamentId.js';
 
 export default {
-    title: 'Organisms/Containers/KioskContainer',
-    component: KioskContainer,
-    tags: ['autodocs'],
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId
-    },
-    argTypes: {
-        displays: { control: 'object' },
-        staffDropDown: { control: 'object' },
-        eventDropDown: { control: 'object' },
-    },
-}
+  title: 'Organisms/Containers/KioskContainer',
+  component: KioskContainer,
+  tags: ['autodocs'],
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId
+  },
+  argTypes: {
+    displays: { control: 'object' },
+    staffDropDown: { control: 'object' },
+    eventDropDown: { control: 'object' }
+  }
+};
 
 export const Default = {
-    args: {
-        displays: getCLubDisplayByClubId,
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId
-    }
-}
-
+  args: {
+    displays: getCLubDisplayByClubId,
+    staffDropDown: getAllStaffByTournamentId,
+    eventDropDown: getEventByTournamentId
+  }
+};