@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -2,65 +2,65 @@ import Pool from './Pool.vue';
 import personsMock from '../../../../mocks/personsMock.js';
 
 export default {
-    title: 'Organisms/Containers/Pool',
-    component: Pool,
-    tags: ['autodocs'],
-    args: {
-        poolName: 'Pool 1',
-        ringName: 'Blue Ring',
-        directorName: 'Joe Smith',
-        pool: personsMock // Assuming personsMock contains an array of fencers
+  title: 'Organisms/Containers/Pool',
+  component: Pool,
+  tags: ['autodocs'],
+  args: {
+    poolName: 'Pool 1',
+    ringName: 'Blue Ring',
+    directorName: 'Joe Smith',
+    pool: personsMock // Assuming personsMock contains an array of fencers
+  },
+  argTypes: {
+    poolName: {
+      control: { type: 'text' },
+      description: 'Name of the pool',
+      table: {
+        type: { summary: 'String' },
+        defaultValue: { summary: '' }
+      }
     },
-    argTypes: {
-        poolName: {
-            control: { type: 'text' },
-            description: 'Name of the pool',
-            table: {
-                type: { summary: 'String' },
-                defaultValue: { summary: '' }
-            }
-        },
-        ringName: {
-            control: { type: 'text' },
-            description: 'Name of the ring',
-            table: {
-                type: { summary: 'String' },
-                defaultValue: { summary: '' }
-            }
-        },
-        directorName: {
-            control: { type: 'text' },
-            description: 'Name of the director',
-            table: {
-                type: { summary: 'String' },
-                defaultValue: { summary: '' }
-            }
-        },
-        pool: {
-            control: { type: 'array' },
-            description: 'List of persons in the pool',
-            table: {
-                type: { summary: 'Array' },
-                defaultValue: { summary: '[]' }
-            }
-        }
+    ringName: {
+      control: { type: 'text' },
+      description: 'Name of the ring',
+      table: {
+        type: { summary: 'String' },
+        defaultValue: { summary: '' }
+      }
+    },
+    directorName: {
+      control: { type: 'text' },
+      description: 'Name of the director',
+      table: {
+        type: { summary: 'String' },
+        defaultValue: { summary: '' }
+      }
+    },
+    pool: {
+      control: { type: 'array' },
+      description: 'List of persons in the pool',
+      table: {
+        type: { summary: 'Array' },
+        defaultValue: { summary: '[]' }
+      }
     }
-}
+  }
+};
 
 export const Default = {
-    args: {
-        poolName: 'Pool 1',
-        ringName: 'Blue Ring',
-        directorName: 'Joe Smith',
-        pool: personsMock
-    }
+  args: {
+    poolName: 'Pool 1',
+    ringName: 'Blue Ring',
+    directorName: 'Joe Smith',
+    pool: personsMock
+  }
 };
 
 export const EmptyPool = {
-    args: {
-        poolName: 'Pool 1',
-        ringName: 'Blue Ring',
-        directorName: 'Joe Smith',
-        pool: []
-    }
+  args: {
+    poolName: 'Pool 1',
+    ringName: 'Blue Ring',
+    directorName: 'Joe Smith',
+    pool: []
+  }
 };

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

@@ -2,46 +2,69 @@
   <div v-if="loading">
     <PoolSkeleton />
   </div>
-  <div v-if="!loading" class="mb-4 p-4 md:mr-4 md:mt-3 bg-neutral rounded-lg md:shadow-md border border-dropdownSelect min-w-[22rem]" :class="shouldBeSelectable ? 'hover:border-bright' : ''" @click="handleSelectPool">
+  <div
+    v-if="!loading"
+    class="mb-4 p-4 md:mr-4 md:mt-3 bg-neutral rounded-lg md:shadow-md border border-dropdownSelect min-w-[22rem]"
+    :class="shouldBeSelectable ? 'hover:border-bright' : ''"
+    @click="handleSelectPool"
+  >
     <div class="flex flex-row justify-between mb-2">
       <h2 class="text-xl font-bold mb-2 flex">
-        <BaseText :text="`${poolName} - ${ringName}`" size="lg" color="primary" weight="bold" class="p-2"/>
+        <BaseText :text="`${poolName} - ${ringName}`" size="lg" color="primary" weight="bold" class="p-2" />
       </h2>
-      <div v-if="mode === 'preparation' || mode === 'planning'" class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 flex flex-row justify-between border border-dropdownSelect">
-        <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-2.5 pl-3"/>
-        <BaseText :text="poolInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-0.5"/>
-        <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-0.5 pr-2"/>
+      <div
+        v-if="mode === 'preparation' || mode === 'planning'"
+        class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 flex flex-row justify-between border border-dropdownSelect"
+      >
+        <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-2.5 pl-3" />
+        <BaseText :text="poolInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-0.5" />
+        <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-0.5 pr-2" />
       </div>
-      <div v-if="mode === 'live' || mode === 'de' || mode === 'completed' " class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 pt-1.5 flex flex-row justify-between border border-dropdownSelect">
-        <BaseText text="BOUTS LEFT" size="sm" color="quinary" weight="bold" class="w-2/3 text-right"/>
-        <BaseText :text="boutsLeft" size="sm" color="primaryHighlight" weight="bold" class="w-1/3 text-left pl-2"/>
+      <div
+        v-if="mode === 'live' || mode === 'de' || mode === 'completed'"
+        class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 pt-1.5 flex flex-row justify-between border border-dropdownSelect"
+      >
+        <BaseText text="BOUTS LEFT" size="sm" color="quinary" weight="bold" class="w-2/3 text-right" />
+        <BaseText :text="boutsLeft" size="sm" color="primaryHighlight" weight="bold" class="w-1/3 text-left pl-2" />
       </div>
     </div>
     <div v-if="mode === 'preparation' || mode === 'planning'" class="hidden md:flex text-md mb-4 w-full">
-       <DropDownMenu :label="'Director'" :items="directors" :selectedItem="selectedDirector" width="w-full" dropDownWidth="w-full" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
+      <DropDownMenu
+        :label="'Director'"
+        :items="directors"
+        :selectedItem="selectedDirector"
+        width="w-full"
+        dropDownWidth="w-full"
+        :alignEnd="false"
+        @update:selectedItem="handleSelectedItem"
+      />
     </div>
-    <div class="text-md mb-4 w-full flex ">
+    <div class="text-md mb-4 w-full flex">
       <BaseText text="Director: " size="sm" color="quinary" weight="bold" />
       <BaseText :text="selectedDirector.text" size="sm" color="primaryHighlight" weight="bold" class="ml-2" />
     </div>
     <div class="grid grid-cols-1 gap-4">
-      <PoolFencerCard v-for="(person, index) in pool" :key="person.id"
-                      :position="index+1"
-                      :poolPosition="person.PoolPosition"
-                      :name="person.Person.DisplayName"
-                      :club="person.Person.Club.Name"
-                      :seed="person.Seed"
-                      :portrait="clubLogoURL(person)"
-                      :mode="mode"
-                      @swapFencers="handleSwap"
-                      @remove:fencer="handleRemoveFencer"
+      <PoolFencerCard
+        v-for="(person, index) in pool"
+        :key="person.id"
+        :position="index + 1"
+        :poolPosition="person.PoolPosition"
+        :name="person.Person.DisplayName"
+        :club="person.Person.Club.Name"
+        :seed="person.Seed"
+        :portrait="clubLogoURL(person)"
+        :mode="mode"
+        @swapFencers="handleSwap"
+        @remove:fencer="handleRemoveFencer"
       />
     </div>
     <div v-if="manualEdit">
-      <div v-if="manualEdit"
-           class="flex mt-4 justify-center items-center p-2 shadow rounded-lg hover:bg-dropdownSelect bg-poolSetup"
-           @dragover.prevent="handleDragOver"
-           @drop="handleDrop($event, pool)">
+      <div
+        v-if="manualEdit"
+        class="flex mt-4 justify-center items-center p-2 shadow rounded-lg hover:bg-dropdownSelect bg-poolSetup"
+        @dragover.prevent="handleDragOver"
+        @drop="handleDrop($event, pool)"
+      >
         <BaseText text="Drop to Add Fencer" size="sm" weight="bold" color="quinary" />
       </div>
     </div>
@@ -50,10 +73,10 @@
 
 <script>
 import PoolFencerCard from '../../Cards/PoolFencerCard/PoolFencerCard.vue';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
-import PoolSkeleton from "../../Skeletons/PoolSkeleton/PoolSkeleton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import DropDownMenu from '../../ComplexInputs/DropDown/DropDownMenu.vue';
+import PoolSkeleton from '../../Skeletons/PoolSkeleton/PoolSkeleton.vue';
 
 export default {
   name: 'Pool',
@@ -64,7 +87,7 @@ export default {
     BaseText,
     PoolFencerCard
   },
-  emits: ['add:fencerToPool', 'remove:fencer', 'select:pool', 'update:setDirector', 'update:swapFencers'],
+  emits: ['add:fencerToPool', 'remove:fencer', 'select:pool', 'update:setDirector', 'update:swapFencers'],
   props: {
     poolId: {
       type: [String, Number],
@@ -105,7 +128,8 @@ export default {
     mode: {
       type: String,
       required: true,
-      validator: value => ['planning','preparation','live','custompool','results','de','completed'].includes(value)
+      validator: value =>
+        ['planning', 'preparation', 'live', 'custompool', 'results', 'de', 'completed'].includes(value)
     },
     loading: {
       type: Boolean,
@@ -119,14 +143,13 @@ export default {
   },
   computed: {
     directors() {
-      return this.staff
-          .map(staffMember => ({
-            text: staffMember.Person.DisplayName,
-            link: { personId: staffMember.PersonId, eventId: staffMember.EventId, poolId: this.poolId }
-          }));
+      return this.staff.map(staffMember => ({
+        text: staffMember.Person.DisplayName,
+        link: { personId: staffMember.PersonId, eventId: staffMember.EventId, poolId: this.poolId }
+      }));
     },
     shouldBeSelectable() {
-      return this.mode === 'live' || this.mode === 'results' || this.mode === 'de' || this.mode === 'completed'
+      return this.mode === 'live' || this.mode === 'results' || this.mode === 'de' || this.mode === 'completed';
     }
   },
   methods: {
@@ -140,14 +163,14 @@ export default {
       const portrait = person?.Person?.Club?.Images?.[0] || null;
       return portrait ? portrait.url : '';
     },
-    handleSelectedItem(event){
-      this.selectedDirector = { text: event.text, link: { directorId: event.link, poolId: this.poolId } }
-      this.$emit('update:setDirector', event)
+    handleSelectedItem(event) {
+      this.selectedDirector = { text: event.text, link: { directorId: event.link, poolId: this.poolId } };
+      this.$emit('update:setDirector', event);
     },
     handleRemoveFencer(person) {
       this.$emit('remove:fencer', person);
     },
-    handleSelectPool(){
+    handleSelectPool() {
       if (this.shouldBeSelectable) {
         this.$emit('select:pool', this.poolId);
       }

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

@@ -1,30 +1,28 @@
 import PoolGrid from './PoolGrid.vue';
-import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
 
 export default {
-    title: 'Organisms/Containers/PoolGrid',
-    component: PoolGrid,
-    tags: ['autodocs'],
-    args: {
-        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
-    },
-    argTypes: {
-        bouts: {
-            control: 'object'
-        }
-
+  title: 'Organisms/Containers/PoolGrid',
+  component: PoolGrid,
+  tags: ['autodocs'],
+  args: {
+    bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
+  },
+  argTypes: {
+    bouts: {
+      control: 'object'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
-    }
+  args: {
+    bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
+  }
 };
 
-
 export const EmptyPool = {
-    args: {
-        bouts: []
-    }
+  args: {
+    bouts: []
+  }
 };