@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/Cards/PoolFencerCard/PoolFencerCard.stories.js

@@ -1,34 +1,31 @@
 import PoolFencerCard from './PoolFencerCard.vue';
 
 export default {
-    title: 'Organisms/Cards/PoolFencerCard',
-    component: PoolFencerCard,
-    tags: ['autodocs'],
-    args: {
-        position: 1,
-        poolPosition: 1,
-        portrait: 'https://randomuser.me/api/portraits/men/31.jpg',
-        name: 'John Doe',
-        club: 'Test Club',
-        background: 'bg-poolSetup'
-    },
-    argTypes: {
-        position: { control: 'number' },
-        portrait: { control: 'text' },
-        name: { control: 'text' },
-        club: { control: 'text' },
-        background: { control: 'text' },
-    },
+  title: 'Organisms/Cards/PoolFencerCard',
+  component: PoolFencerCard,
+  tags: ['autodocs'],
+  args: {
+    position: 1,
+    poolPosition: 1,
+    portrait: 'https://randomuser.me/api/portraits/men/31.jpg',
+    name: 'John Doe',
+    club: 'Test Club',
+    background: 'bg-poolSetup'
+  },
+  argTypes: {
+    position: { control: 'number' },
+    portrait: { control: 'text' },
+    name: { control: 'text' },
+    club: { control: 'text' },
+    background: { control: 'text' }
+  }
 };
 
-
 export const Default = {
-    args: {
-        position: 1,
-        portrait: 'https://randomuser.me/api/portraits/men/24.jpg',
-        name: 'John Doe',
-        club: 'Test Club',
-    }
-}
-
-
+  args: {
+    position: 1,
+    portrait: 'https://randomuser.me/api/portraits/men/24.jpg',
+    name: 'John Doe',
+    club: 'Test Club'
+  }
+};

package/src/stories/Organisms/Cards/PoolFencerCard/PoolFencerCard.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-      :class="computedClasses"
-      :draggable="computedDraggable"
-      @dragstart="onDragStart"
-      @dragover.prevent
-      @dragenter.prevent
-      @drop="onDrop"
-      @click="handleClick"
+    :class="computedClasses"
+    :draggable="computedDraggable"
+    @dragstart="onDragStart"
+    @dragover.prevent
+    @dragenter.prevent
+    @drop="onDrop"
+    @click="handleClick"
   >
     <div v-if="mode !== 'person'" class="text-center mr-2 w-4">
-      <BaseText :text="poolPosition" size="md" color="quaternary"/>
+      <BaseText :text="poolPosition" size="md" color="quaternary" />
     </div>
     <div class="w-9 h-9 rounded-md overflow-hidden">
       <div v-if="!portrait" class="w-14 h-14 bg-dropdownSelect flex items-center justify-center">
@@ -29,8 +29,8 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
   components: { BaseIcon, BaseText },
@@ -48,19 +48,20 @@ export default {
       required: true
     },
     club: {
-      type: String,
+      type: String
     },
     seed: {
       type: Number,
       required: true
     },
     portrait: {
-      type: String,
+      type: String
     },
     mode: {
       type: String,
       required: true,
-      validator: value => ['planning','preparation','live','custompool','results','de','completed','person'].includes(value)
+      validator: value =>
+        ['planning', 'preparation', 'live', 'custompool', 'results', 'de', 'completed', 'person'].includes(value)
     },
     background: {
       type: String,
@@ -81,7 +82,9 @@ export default {
     },
     computedClasses() {
       const baseClasses = `flex items-center p-2 shadow rounded-lg ${this.customClass}`;
-      return this.canEdit ? `${baseClasses} hover:bg-dropdownSelect ${this.background}` : `${baseClasses} ${this.background}`;
+      return this.canEdit
+        ? `${baseClasses} hover:bg-dropdownSelect ${this.background}`
+        : `${baseClasses} ${this.background}`;
     },
     computedDraggable() {
       if (this.customDraggable !== null) return this.customDraggable;
@@ -91,13 +94,16 @@ export default {
   methods: {
     onDragStart(event) {
       if (this.canEdit) {
-        event.dataTransfer.setData('text/plain', JSON.stringify({
-          fromPosition: this.poolPosition,
-          name: this.name,
-  emits: ['swap-fencers', 'update:click'],
-          club: this.club,
-          seed: this.seed
-        }));
+        event.dataTransfer.setData(
+          'text/plain',
+          JSON.stringify({
+            fromPosition: this.poolPosition,
+            name: this.name,
+            emits: ['swap-fencers', 'update:click'],
+            club: this.club,
+            seed: this.seed
+          })
+        );
       }
     },
     onDrop(event) {
@@ -111,5 +117,5 @@ export default {
       this.$emit('update:click');
     }
   }
-}
+};
 </script>

package/src/stories/Organisms/Cards/StaffCard/StaffCard.stories.js

@@ -2,72 +2,72 @@ import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournament
 import StaffCard from './StaffCard.vue';
 
 export default {
-    title: 'Organisms/Cards/StaffCard',
-    component: StaffCard,
-    tags: ['autodocs'],
-    args: {
-        staff: {
-            "Id": 2,
-            "TournamentId": 4,
-            "EventId": 5,
-            "PoolId": 102,
-            "PersonId": 23,
-            "Role": "Director",
-            "Person": {
-                "DisplayName": "Lucas Garcia",
-                "Club": {
-                    "ClubId": 1,
-                    "Name": "Acme Fencing Club"
-                },
-                "Images": [
-                    {
-                        "URL": "https://randomuser.me/api/portraits/men/77.jpg"
-                    }
-                ]
-            },
-            "Pool": {
-                "PoolId": 102,
-                "Name": "Pool 1",
-                "RingName": "Ring 1"
-            }
-        }
-    },
-    argTypes: {
-        staff: {
-            control: 'object'
+  title: 'Organisms/Cards/StaffCard',
+  component: StaffCard,
+  tags: ['autodocs'],
+  args: {
+    staff: {
+      Id: 2,
+      TournamentId: 4,
+      EventId: 5,
+      PoolId: 102,
+      PersonId: 23,
+      Role: 'Director',
+      Person: {
+        DisplayName: 'Lucas Garcia',
+        Club: {
+          ClubId: 1,
+          Name: 'Acme Fencing Club'
         },
-        'update:assignment': {
-            action: 'update:assignment'
-        }
+        Images: [
+          {
+            URL: 'https://randomuser.me/api/portraits/men/77.jpg'
+          }
+        ]
+      },
+      Pool: {
+        PoolId: 102,
+        Name: 'Pool 1',
+        RingName: 'Ring 1'
+      }
+    }
+  },
+  argTypes: {
+    staff: {
+      control: 'object'
+    },
+    'update:assignment': {
+      action: 'update:assignment'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        staff: {
-            "Id": 2,
-            "TournamentId": 4,
-            "EventId": 5,
-            "PoolId": 102,
-            "PersonId": 23,
-            "Role": "Director",
-            "Person": {
-                "DisplayName": "Lucas Garcia",
-                "Club": {
-                    "ClubId": 1,
-                    "Name": "Acme Fencing Club"
-                },
-                "Images": [
-                    {
-                        "URL": "https://randomuser.me/api/portraits/men/77.jpg"
-                    }
-                ]
-            },
-            "Pool": {
-                "PoolId": 102,
-                "Name": "Pool 1",
-                "RingName": "Ring 1"
-            }
-        }
+  args: {
+    staff: {
+      Id: 2,
+      TournamentId: 4,
+      EventId: 5,
+      PoolId: 102,
+      PersonId: 23,
+      Role: 'Director',
+      Person: {
+        DisplayName: 'Lucas Garcia',
+        Club: {
+          ClubId: 1,
+          Name: 'Acme Fencing Club'
+        },
+        Images: [
+          {
+            URL: 'https://randomuser.me/api/portraits/men/77.jpg'
+          }
+        ]
+      },
+      Pool: {
+        PoolId: 102,
+        Name: 'Pool 1',
+        RingName: 'Ring 1'
+      }
     }
+  }
 };

package/src/stories/Organisms/Cards/StaffCard/StaffCard.vue

@@ -2,54 +2,59 @@
   <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-white hover:border-bright">
     <div class="hidden md:flex mr-4 h-20 pl-4 pt-2.5">
       <div v-if="!portraitURL" class="w-10 h-10 mt-2 rounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="mt-2 w-12 h-12 rounded-xl">
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="mt-2 w-12 h-12 rounded-xl" />
     </div>
 
     <section class="flex flex-col md:flex-row w-full ml-4 md:ml-0">
       <div class="flex flex-col md:w-4/12 justify-star">
         <span class="w-full flex justify-start pb-1 md:pb-0">
-          <BaseText :text="fullName" size="" color="quaternary" weight="bold" class="text-sm md:text-xl"/>
+          <BaseText :text="fullName" size="" color="quaternary" weight="bold" class="text-sm md:text-xl" />
         </span>
         <span class="hidden md:flex w-full justify-start">
-          <BaseText :text="staff.Person.Club.Name" size="xs" color="quinary" weight="normal"/>
+          <BaseText :text="staff.Person.Club.Name" size="xs" color="quinary" weight="normal" />
         </span>
       </div>
 
       <div class="mr-4 md:ml-auto">
-        <ButtonBar
-            :buttons="buttons"
-            :selected="computedSelected"
-            @update:selected="handleAssignment"
-        />
+        <ButtonBar :buttons="buttons" :selected="computedSelected" @update:selected="handleAssignment" />
       </div>
     </section>
 
-    <div class="ml-4 border-l border-dropdownSelect h-20 w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg">
-      <BaseIcon icon-name="fa-circle-xmark" size="" color="quinary" class="pt-6 text-lg md:text-2xl" hover="alarm" @click="handlerRemoveFencer" />
+    <div
+      class="ml-4 border-l border-dropdownSelect h-20 w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg"
+    >
+      <BaseIcon
+        icon-name="fa-circle-xmark"
+        size=""
+        color="quinary"
+        class="pt-6 text-lg md:text-2xl"
+        hover="alarm"
+        @click="handlerRemoveFencer"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
   name: 'StaffCard',
   emits: ['remove:staff', 'update:assignment'],
-  components: {BaseIcon, ButtonBar, BaseText },
+  components: { BaseIcon, ButtonBar, BaseText },
   props: {
     staff: {
       type: Object,
       required: true
-    },
+    }
   },
   data() {
     return {
-      view: "Staff List"
+      view: 'Staff List'
     };
   },
   computed: {
@@ -63,7 +68,7 @@ export default {
     },
     buttons() {
       return [
-        { id: 'Director',  label: 'Director', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+        { id: 'Director', label: 'Director', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
         { id: 'Line Judge', label: 'Line Judge', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
         { id: 'List Table', label: 'List Table', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' }
       ];
@@ -73,10 +78,10 @@ export default {
     }
   },
   methods: {
-    handleAssignment(selected) {
-      const staff = { ...this.staff, Role: selected };
-      this.$emit('update:assignment', staff);
-    },
+    handleAssignment(selected) {
+      const staff = { ...this.staff, Role: selected };
+      this.$emit('update:assignment', staff);
+    },
     handlerRemoveFencer() {
       this.$emit('remove:staff', this.staff);
     }

package/src/stories/Organisms/Cards/TableauBoutCard/TableauBoutCard.stories.js

@@ -1,98 +1,60 @@
-import TableauBoutCard from './TableauBoutCard.vue';
-import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
-
-export default {
-    title: 'Organisms/Cards/TableauBoutCard',
-    component: TableauBoutCard,
-    tags: ['autodocs'],
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[0],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    },
-    argTypes: {
-        bout: {
-            control: 'object',
-            description: 'Bout object containing fencers and scores'
-        },
-        hostingClubColors: {
-            control: 'object',
-            description: 'Colors for hosting club'
-        },
-        large: {
-            control: 'boolean',
-            description: 'Size of the card'
-        },
-        roundName: {
-            control: 'text',
-            description: 'Name of the round'
-        },
-        bracketSize: {
-            control: 'text',
-            description: 'Size of the bracket'
-        },
-        highLight: {
-            control: 'boolean',
-            description: 'Card is highlighed'
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[2],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-let modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Active' };
-export const ActiveBout = {
-    args: {
-        bout: modifiedBout,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-export const smallCardBout = {
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[1],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: false,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Completed' };
-export const CompletedBout = {
-    args: {
-        bout: modifiedBout,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        highLight: false
-    }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[0], Status: 'Completed' };
-export const ByeBout = {
-    args: {
-        bout: modifiedBout,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: false,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+import TableauBoutCard from './TableauBoutCard.vue';
+
+const baseBout = getDEWithBouts.pools[0].Bouts[2];
+
+export default {
+  title: 'Organisms/Cards/TableauBoutCard',
+  component: TableauBoutCard,
+  tags: ['autodocs'],
+  args: {
+    bout: baseBout,
+    hostingClubColors: getDEWithBouts.hostingClubColors,
+    roundName: baseBout.RoundLabel,
+    bracketSize: 'Table of 8'
+  },
+  argTypes: {
+    bout: {
+      control: 'object',
+      description: 'Bout containing both fencers, scores, status, and bracket links'
+    },
+    hostingClubColors: {
+      control: 'object',
+      description: 'Hosting-club colors used for the seed strips'
+    },
+    roundName: {
+      control: 'text',
+      description: 'Name of the displayed round'
+    },
+    bracketSize: {
+      control: 'text',
+      description: 'Name of the opening bracket round'
+    }
+  }
+};
+
+export const Default = {};
+
+export const Active = {
+  args: {
+    bout: {
+      ...baseBout,
+      Status: 'Active',
+      RingName: 'Ring 3',
+      TimeLeft: 95,
+      TimerStatus: 'running'
+    }
+  }
+};
+
+export const Completed = {
+  args: {
+    bout: { ...baseBout, Status: 'Completed' }
+  }
+};
+
+export const Bye = {
+  args: {
+    bout: getDEWithBouts.pools[0].Bouts[0]
+  }
+};