@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -2,87 +2,103 @@
   <div class="mt-0">
     <div class="flex flex-col w-full relative">
       <section v-if="!localDisplays.length">
-        <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon"/>
+        <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon" />
         <div class="w-full flex justify-center">
           <div class="w-96">
-            <BaseText text="No Displays Currently!" size="lg" color="quinary" weight="bold" class="text-center"/>
+            <BaseText text="No Displays Currently!" size="lg" color="quinary" weight="bold" class="text-center" />
             <BaseText
-                text="No Displays are added, click the add button to add a scoreboard or flight board!"
-                size="sm" color="quinary" class="text-center"/>
+              text="No Displays are added, click the add button to add a scoreboard or flight board!"
+              size="sm"
+              color="quinary"
+              class="text-center"
+            />
           </div>
         </div>
       </section>
       <section v-if="localDisplays.length > 0" class="flex flex-col">
-        <div v-if="scoreboards.length > 0">
-          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect mb-4"/>
-          <div v-for="scoreboard in scoreboards" :key="scoreboard.DisplayId + '-' + scoreboard.Type"
-               class="flex flex-col py-2">
-            <KioskCard :displayObject="scoreboard"
-                       :assignedTo="transformAssignedTo(scoreboard)"
-                       :eventDropDown="eventDropDown"
-                       :staffDropDown="staffDropDown"
-                       :userRole="userRole"
-                       @update:staffChange="handleAssignmentStaff"
-                       @update:eventChange="handleAssignmentEvent"
-                       @update:ringChange="handeRingChange"
-                       @remove:kiosk="handleRemove"
-                       @update:assignToMe="handleAssignToMe"
-                       @update:selectedType="handleChangeType"
-                       @update:editKiosk="handleEditKiosk"
-                       @test:scoreboard="handleScoreboardTest"
-            />
+        <div v-if="scoreboards.length > 0">
+          <BaseText text="Scoreboards" size="lg" color="quinary" weight="bold" class="w-full text-left" />
+          <div class="border-b border-dropdownSelect mb-4" />
+          <div
+            v-for="scoreboard in scoreboards"
+            :key="scoreboard.DisplayId + '-' + scoreboard.Type"
+            class="flex flex-col py-2"
+          >
+            <KioskCard
+              :displayObject="scoreboard"
+              :assignedTo="transformAssignedTo(scoreboard)"
+              :eventDropDown="eventDropDown"
+              :staffDropDown="staffDropDown"
+              :userRole="userRole"
+              @update:staffChange="handleAssignmentStaff"
+              @update:eventChange="handleAssignmentEvent"
+              @update:ringChange="handeRingChange"
+              @remove:kiosk="handleRemove"
+              @update:assignToMe="handleAssignToMe"
+              @update:selectedType="handleChangeType"
+              @update:editKiosk="handleEditKiosk"
+              @test:scoreboard="handleScoreboardTest"
+            />
           </div>
         </div>
 
         <div v-if="flightBoards.length > 0 && userRole !== 'Director'" class="mt-10">
-          <BaseText text="Flight Boards" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect mb-4"/>
-          <div v-for="flightBoard in flightBoards" :key="flightBoard.DisplayId + '-' + flightBoard.Type"
-               class="flex flex-col py-2">
-            <KioskCard :displayObject="flightBoard"
-                       :assignedToEvent="transformAssignedTo(flightBoard)"
-                       :eventDropDown="eventDropDown"
-                       :staffDropDown="staffDropDown"
-                       :userRole="userRole"
-                       @update:staffChange="handleAssignmentStaff"
-                       @update:eventChange="handleAssignmentEvent"
-                       @update:ringChange="handeRingChange"
-                       @remove:kiosk="handleRemove"
-                       @update:assignToMe="handleAssignToMe"
-                       @update:selectedType="handleChangeType"
-                       @update:editKiosk="handleEditKiosk"
+          <BaseText text="Flight Boards" size="lg" color="quinary" weight="bold" class="w-full text-left" />
+          <div class="border-b border-dropdownSelect mb-4" />
+          <div
+            v-for="flightBoard in flightBoards"
+            :key="flightBoard.DisplayId + '-' + flightBoard.Type"
+            class="flex flex-col py-2"
+          >
+            <KioskCard
+              :displayObject="flightBoard"
+              :assignedToEvent="transformAssignedTo(flightBoard)"
+              :eventDropDown="eventDropDown"
+              :staffDropDown="staffDropDown"
+              :userRole="userRole"
+              @update:staffChange="handleAssignmentStaff"
+              @update:eventChange="handleAssignmentEvent"
+              @update:ringChange="handeRingChange"
+              @remove:kiosk="handleRemove"
+              @update:assignToMe="handleAssignToMe"
+              @update:selectedType="handleChangeType"
+              @update:editKiosk="handleEditKiosk"
             />
           </div>
         </div>
         <div v-if="unassignedBoards.length > 0 && userRole !== 'Director'" class="mt-10">
-          <BaseText text="Unassigned" size="lg" color="quinary" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect mb-4"/>
-          <div v-for="unassigned in unassignedBoards" :key="unassigned.DisplayId + '-' + unassigned.Type"
-               class="flex flex-col py-2">
-            <KioskCard :displayObject="unassigned"
-                       :assignedToEvent="transformAssignedTo(unassigned)"
-                       :eventDropDown="eventDropDownList"
-                       :staffDropDown="staffDropDownList"
-                       :userRole="userRole"
-                       @update:staffChange="handleAssignmentStaff"
-                       @update:eventChange="handleAssignmentEvent"
-                       @update:ringChange="handeRingChange"
-                       @remove:kiosk="handleRemove"
-                       @update:assignToMe="handleAssignToMe"
-                       @update:selectedType="handleChangeType"
-                       @update:editKiosk="handleEditKiosk"
+          <BaseText text="Unassigned" size="lg" color="quinary" weight="bold" class="w-full text-left" />
+          <div class="border-b border-dropdownSelect mb-4" />
+          <div
+            v-for="unassigned in unassignedBoards"
+            :key="unassigned.DisplayId + '-' + unassigned.Type"
+            class="flex flex-col py-2"
+          >
+            <KioskCard
+              :displayObject="unassigned"
+              :assignedToEvent="transformAssignedTo(unassigned)"
+              :eventDropDown="eventDropDownList"
+              :staffDropDown="staffDropDownList"
+              :userRole="userRole"
+              @update:staffChange="handleAssignmentStaff"
+              @update:eventChange="handleAssignmentEvent"
+              @update:ringChange="handeRingChange"
+              @remove:kiosk="handleRemove"
+              @update:assignToMe="handleAssignToMe"
+              @update:selectedType="handleChangeType"
+              @update:editKiosk="handleEditKiosk"
             />
           </div>
         </div>
       </section>
-      <AddDisplayModal v-if="showModal"
-                       :kiosk="kiosk"
-                       :events="eventDropDownList"
-                       :staff="staffDropDownList"
-                       :show="showModal"
-                       @submit:kiosk="handleKioskSubmit"
-                       @close:closeModal="showModal = false"
+      <AddDisplayModal
+        v-if="showModal"
+        :kiosk="kiosk"
+        :events="eventDropDownList"
+        :staff="staffDropDownList"
+        :show="showModal"
+        @submit:kiosk="handleKioskSubmit"
+        @close:closeModal="showModal = false"
       />
     </div>
   </div>
@@ -90,13 +106,13 @@
 
 <script>
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import KioskCard from "../../Cards/KioskCard/KioskCard.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import AddDisplayModal from "../../../Molecules/Modals/AddDisplayModal/AddDisplayModal.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import KioskCard from '../../Cards/KioskCard/KioskCard.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import AddDisplayModal from '../../../Molecules/Modals/AddDisplayModal/AddDisplayModal.vue';
 
 export default {
-  name: "KioskContainer",
+  name: 'KioskContainer',
   components: {
     AddDisplayModal,
     BaseButton,
@@ -104,17 +120,26 @@ export default {
     BaseText,
     emptyDesertIcon
   },
-  emits: ['remove:kiosk', 'test:scoreboard', 'update:selectedStaff', 'update:selectedEvent', 'update:ringChange','update:selectedType', 'submit:kiosk', 'update:assignToMe'],
+  emits: [
+    'remove:kiosk',
+    'test:scoreboard',
+    'update:selectedStaff',
+    'update:selectedEvent',
+    'update:ringChange',
+    'update:selectedType',
+    'submit:kiosk',
+    'update:assignToMe'
+  ],
   props: {
     displays: {
       type: Array,
       required: true
     },
     eventDropDown: {
-      type: Array,
+      type: Array
     },
     staffDropDown: {
-      type: Array,
+      type: Array
     },
     userRole: {
       type: String,
@@ -127,7 +152,7 @@ export default {
       showModal: false,
       kiosk: {},
       emptyDesertIcon
-    }
+    };
   },
   watch: {
     displays: {
@@ -150,32 +175,32 @@ export default {
     },
     staffDropDownList() {
       return this.staffDropDown.map(staff => {
-        return {text: staff.Person.DisplayName, link: staff.PersonId};
+        return { text: staff.Person.DisplayName, link: staff.PersonId };
       });
     },
-    eventDropDownList(){
+    eventDropDownList() {
       return this.eventDropDown.map(event => {
-        return {text: event.EventName, link: event.EventId};
+        return { text: event.EventName, link: event.EventId };
       });
     }
   },
-  methods: {
-    handleScoreboardTest(display) {
-      this.$emit('test:scoreboard', display);
-    },
-    transformAssignedTo(display) {
+  methods: {
+    handleScoreboardTest(display) {
+      this.$emit('test:scoreboard', display);
+    },
+    transformAssignedTo(display) {
       if (display.Person) {
         if (display.Person.DisplayName === 'BYE') {
-          return {text: 'Unassigned', link: 'Unassigned'};
+          return { text: 'Unassigned', link: 'Unassigned' };
         }
-        return {text: display.Person.DisplayName, link: display.Person.DisplayName};
+        return { text: display.Person.DisplayName, link: display.Person.DisplayName };
       }
 
       if (display.Event) {
-        return {text: display.Event.EventName, link: display.Event.EventName};
+        return { text: display.Event.EventName, link: display.Event.EventName };
       }
 
-      return {text: '', link: ''}
+      return { text: '', link: '' };
     },
     handeRingChange(item) {
       this.$emit('update:ringChange', item);
@@ -184,7 +209,7 @@ export default {
       this.localDisplays = this.localDisplays.filter(display => display.DisplayId !== item.DisplayId);
       this.$emit('remove:kiosk', item);
     },
-    handleAssignToMe(item){
+    handleAssignToMe(item) {
       this.$emit('update:assignToMe', item);
     },
     handleAssignmentStaff(item) {
@@ -201,10 +226,10 @@ export default {
       this.$emit('update:selectedType', display);
     },
     handleEditKiosk(item) {
-      this.kiosk = item
+      this.kiosk = item;
       this.showModal = true;
     },
-    handleClose(){
+    handleClose() {
       this.showModal = false;
     },
     handleKioskSubmit(item) {
@@ -212,5 +237,5 @@ export default {
       this.$emit('submit:kiosk', item);
     }
   }
-}
+};
 </script>

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: []
+  }
 };