@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,36 +1,53 @@
 <!-- TableauFencerCard.vue -->
 <template>
-<section class="bg-poolSetup flex rounded-md border" @mouseover="handleHighLight(true)" @mouseout="handleHighLight(false)" :class="[width, highLighted, opacity]">
+  <section
+    class="bg-poolSetup flex rounded-md border"
+    @mouseover="handleHighLight(true)"
+    @mouseout="handleHighLight(false)"
+    :class="[width, highLighted, opacity]"
+  >
     <!-- Left position -->
     <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="[`bg-${color}`]">
-      <BaseText :text="position" size="xs" color="neutral"/>
+      <BaseText :text="position" size="xs" color="neutral" />
     </div>
 
-  <div class="flex w-full items-center">
-    <!-- Portrait and Name/Club -->
-    <div class="flex w-full">
-      <div v-if="large" class="">
-        <div v-if="!portraitURL" class="w-9 h-9 rounded-r-md bg-dropdownSelect flex items-center justify-center">
-          <BaseText text="" size="sm" color="neutral" weight="bold"/>
+    <div class="flex w-full items-center">
+      <!-- Portrait and Name/Club -->
+      <div class="flex w-full">
+        <div v-if="large" class="">
+          <div v-if="!portraitURL" class="w-9 h-9 rounded-r-md bg-dropdownSelect flex items-center justify-center">
+            <BaseText text="" size="sm" color="neutral" weight="bold" />
+          </div>
+          <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md" />
+        </div>
+        <div class="flex flex-col justify-center ml-2">
+          <BaseText
+            :text="name"
+            :size="large ? 'sm' : 'xs'"
+            :weight="large ? 'bold' : 'normal'"
+            color="quaternary"
+            class="truncate text-nowrap overflow-hidden"
+          />
+          <BaseText
+            v-if="club.length > 1 && large"
+            color="quinary"
+            :text="club.substring(0, 28)"
+            size="xs"
+            class="truncate text-nowrap overflow-hidden"
+          />
         </div>
-        <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md">
-      </div>
-      <div class="flex flex-col justify-center ml-2">
-        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'" color="quaternary" class="truncate  text-nowrap overflow-hidden"/>
-        <BaseText v-if="club.length > 1 && large" color="quinary" :text="club.substring(0,28)" size="xs" class="truncate text-nowrap overflow-hidden"/>
       </div>
     </div>
-  </div>
 
-  <!-- Right position (Score) -->
-  <div class="text-center px-1 w-5 flex items-center justify-center rounded-r-md" :class="scoreColor">
-    <BaseText :text="fencerScore" size="xs" color="neutral"/>
-  </div>
-</section>
+    <!-- Right position (Score) -->
+    <div class="text-center px-1 w-5 flex items-center justify-center rounded-r-md" :class="scoreColor">
+      <BaseText :text="fencerScore" size="xs" color="neutral" />
+    </div>
+  </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'TableauFencerCard',
@@ -89,7 +106,7 @@ export default {
       return this.fencer.DisplayName;
     },
     club() {
-      if (this.fencer.DisplayName === "BYE" || this.fencer.DisplayName === "") return "";
+      if (this.fencer.DisplayName === 'BYE' || this.fencer.DisplayName === '') return '';
       return this.fencer.Club.Name;
     },
     width() {
@@ -104,7 +121,7 @@ export default {
   },
   methods: {
     handleHighLight(value) {
-      this.$emit('action:highLight', value)
+      this.$emit('action:highLight', value);
     }
   }
 };

package/src/stories/Organisms/Cards/TournamentAdminCard/TournamentAdmin.stories.js

@@ -2,32 +2,32 @@ import TournamentAdminCard from './TournamentAdminCard.vue';
 import mockTournaments from '../../../../mocks/tournamentMock.js';
 
 export default {
-    title: 'Organisms/Cards/TournamentAdminCard',
-    component: TournamentAdminCard,
-    tags: ['autodocs'],
-    args: {
-        detail: mockTournaments[0],
-    },
-    argTypes: {
-        detail: { control: 'object' },
-    },
+  title: 'Organisms/Cards/TournamentAdminCard',
+  component: TournamentAdminCard,
+  tags: ['autodocs'],
+  args: {
+    detail: mockTournaments[0]
+  },
+  argTypes: {
+    detail: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        detail: mockTournaments[0],
-    }
+  args: {
+    detail: mockTournaments[0]
+  }
 };
 
 export const WithoutImage = {
-    args: {
-        detail: mockTournaments[2],
-    }
+  args: {
+    detail: mockTournaments[2]
+  }
 };
 
 export const canRemove = {
-    args: {
-        detail: mockTournaments[4],
-        canRemove: 'Admin'
-    }
-};
+  args: {
+    detail: mockTournaments[4],
+    canRemove: 'Admin'
+  }
+};

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

@@ -1,46 +1,75 @@
 <template>
-  <div class="flex items-center justify-between border bg-neutral border-dropdownSelect rounded-lg shadow hover:border-bright mt-4"
-       @click="listEvents">
+  <div
+    class="flex items-center justify-between border bg-neutral border-dropdownSelect rounded-lg shadow hover:border-bright mt-4"
+    @click="listEvents"
+  >
     <div class="w-10 md:w-28 flex flex-row">
-      <img v-if="image" :src="image" alt="Tournament Image" class="h-8 md:h-12 m-2 shadow-lg rounded-md md:rounded-lg object-cover"/>
+      <img
+        v-if="image"
+        :src="image"
+        alt="Tournament Image"
+        class="h-8 md:h-12 m-2 shadow-lg rounded-md md:rounded-lg object-cover"
+      />
     </div>
     <div class="flex-grow ml-2 md:-mt-1 md:-ml-4">
-      <BaseText :text="detail.Name" size="" weight="bold" color="quaternary" class="pl-2 md:pl-0 text-sm md:text-xl"/>
-      <BaseText :text="formattedDateRange" size="" weight="normal" color="quaternary" class="pl-2 md:pl-0 text-xs md:text-sm"/>
+      <BaseText :text="detail.Name" size="" weight="bold" color="quaternary" class="pl-2 md:pl-0 text-sm md:text-xl" />
+      <BaseText
+        :text="formattedDateRange"
+        size=""
+        weight="normal"
+        color="quaternary"
+        class="pl-2 md:pl-0 text-xs md:text-sm"
+      />
     </div>
     <div class="flex flex-row justify-end align-top h-8 md:w-20 mr-4">
-      <base-icon v-if="detail.HostedOnM2" iconName="fa-m2logo" iconStyle="fa-kit" size="" color="quaternary" class="text-xs md:text-xl block mr-4 -mt-1"/>
-      <base-icon :iconName="getIconName" size="" color="quaternary" class="text-xs md:text-sm block"/>
+      <base-icon
+        v-if="detail.HostedOnM2"
+        iconName="fa-m2logo"
+        iconStyle="fa-kit"
+        size=""
+        color="quaternary"
+        class="text-xs md:text-xl block mr-4 -mt-1"
+      />
+      <base-icon :iconName="getIconName" size="" color="quaternary" class="text-xs md:text-sm block" />
     </div>
     <div class="flex flex-row justify-end space-x-4">
       <div class="md:mt-1" :class="detail.CanRemove ? '' : 'mr-2'">
-        <BaseButton label="Edit" size="sm" type="primary" @buttonClick.stop="handleEditClick" class="hidden md:block"/>
-        <BaseButton label="Edit" size="xs" type="primary" @buttonClick.stop="handleEditClick" class="block md:hidden"/>
+        <BaseButton label="Edit" size="sm" type="primary" @buttonClick.stop="handleEditClick" class="hidden md:block" />
+        <BaseButton label="Edit" size="xs" type="primary" @buttonClick.stop="handleEditClick" class="block md:hidden" />
       </div>
-      <div v-if="detail.CanRemove"
-           class="border-l border-dropdownSelect h-12 w-12 items-center text-center rounded-tr-lg rounded-br-lg">
-        <BaseIcon icon-name="fa-circle-xmark" size="2xl" color="quinary" class="md:p-2" hover="alarm" @buttonClick.stop="deleteTournament"/>
+      <div
+        v-if="detail.CanRemove"
+        class="border-l border-dropdownSelect h-12 w-12 items-center text-center rounded-tr-lg rounded-br-lg"
+      >
+        <BaseIcon
+          icon-name="fa-circle-xmark"
+          size="2xl"
+          color="quinary"
+          class="md:p-2"
+          hover="alarm"
+          @buttonClick.stop="deleteTournament"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import defaultTournamentImage from "../../../../assets/default-tournament.png";
-
-const visibilityIcons = {
-  Open: 'fa-globe',
-  Private: 'fa-lock',
-  Club: 'fa-house'
-};
-
-export default {
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import defaultTournamentImage from '../../../../assets/default-tournament.png';
+
+const visibilityIcons = {
+  Open: 'fa-globe',
+  Private: 'fa-lock',
+  Club: 'fa-house'
+};
+
+export default {
   name: 'TournamentAdminCard',
   emits: ['delete', 'edit', 'listEvents'],
-  components: {BaseText, BaseButton, BaseIcon},
+  components: { BaseText, BaseButton, BaseIcon },
   props: {
     detail: {
       type: Object,
@@ -50,7 +79,7 @@ export default {
   data() {
     return {
       defaultImage: defaultTournamentImage
-    }
+    };
   },
   computed: {
     image() {
@@ -61,20 +90,20 @@ export default {
       return this.defaultImage;
     },
     formattedDateRange() {
-      const formatDate = (dateStr) => {
+      const formatDate = dateStr => {
         const date = new Date(`${dateStr}T00:00:00Z`);
         return date.toISOString().split('T')[0];
       };
 
       return `${formatDate(this.detail.StartDate)} - ${formatDate(this.detail.EndDate)}`;
     },
-    getM2Icon(){
+    getM2Icon() {
       !!this.detail.HostedOnM2;
-    },
-    getIconName() {
-      return visibilityIcons[this.detail.Visibility] || 'fa-question-circle';
-    }
-  },
+    },
+    getIconName() {
+      return visibilityIcons[this.detail.Visibility] || 'fa-question-circle';
+    }
+  },
   methods: {
     deleteTournament() {
       this.$emit('delete', this.detail.TournamentId);

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

@@ -1,81 +1,95 @@
 <template>
-  <div v-if="person"
-       class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright">
+  <div
+    v-if="person"
+    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox hover:border-bright"
+  >
     <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center pt-7">
-      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold"/>
+      <BaseText :text="queueLabel" size="md" color="quaternary" weight="bold" />
     </div>
     <div class="block md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center pt-5">
-      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold"/>
+      <BaseText :text="queueLabel" size="sm" color="quaternary" weight="bold" />
     </div>
 
     <div class="hidden md:block mr-4">
       <div v-if="!portraitURL" class="w-14 h-14 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="w-14 h-14 rounded-xl">
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl" />
     </div>
 
     <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
       <button class="flex justify-start overflow-hidden text-left" type="button" @click="handleForwardToProfile">
-        <BaseText :text="displayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-xl truncate"/>
+        <BaseText :text="displayName" size="md" color="quaternary" weight="bold" class="text-sm md:text-xl truncate" />
       </button>
       <span class="w-full flex justify-start">
-        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block"/>
-        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden"/>
+        <BaseText :text="clubName" size="md" color="quinary" weight="normal" class="hidden md:block" />
+        <BaseText :text="clubShortName" size="xs" color="quinary" weight="normal" class="block md:hidden" />
       </span>
 
       <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
         <div class="flex">
-          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
-          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+          <BaseText text="M2: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1" />
         </div>
         <div class="flex">
-          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
-          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1" />
         </div>
       </div>
     </div>
 
     <div class="hidden md:grid grid-cols-1 gap-x-4 mr-4 w-36">
       <div class="flex">
-        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
-        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5"/>
+        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5" />
       </div>
       <div class="flex">
-        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
-        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold"/>
+        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold" />
       </div>
     </div>
 
     <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
       <div class="flex justify-center w-20">
         <div class="hidden md:flex border border-dropdownSelect shadow-md rounded-lg bg-natural h-9 px-3 items-center">
-          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold"/>
+          <BaseText text="Unpaid" size="xs" color="quinary" weight="bold" />
         </div>
       </div>
       <div class="w-44 flex justify-end">
-        <BaseButton label="Move to Active" size="xs" type="primary" icon-name="fa-arrow-up-from-bracket"
-                    class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
-                    @buttonClick="handleMoveToActive"/>
+        <BaseButton
+          label="Move to Active"
+          size="xs"
+          type="primary"
+          icon-name="fa-arrow-up-from-bracket"
+          class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
+          @buttonClick="handleMoveToActive"
+        />
       </div>
     </div>
 
     <div
-        class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6">
-      <BaseIcon icon-name="fa-circle-xmark" size="" color="quinary" hover="alarm"
-                @click="handleRemoveFencer" class="text-md md:text-2xl"/>
+      class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6"
+    >
+      <BaseIcon
+        icon-name="fa-circle-xmark"
+        size=""
+        color="quinary"
+        hover="alarm"
+        @click="handleRemoveFencer"
+        class="text-md md:text-2xl"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'WaitlistFencerCard',
-  components: {BaseButton, BaseIcon, BaseText},
+  components: { BaseButton, BaseIcon, BaseText },
   emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
   props: {
     person: {
@@ -116,10 +130,10 @@ export default {
   },
   methods: {
     handleMoveToActive() {
-      this.$emit('move:active', {...this.person});
+      this.$emit('move:active', { ...this.person });
     },
     handleRemoveFencer() {
-      this.$emit('remove:fencer', {...this.person});
+      this.$emit('remove:fencer', { ...this.person });
     },
     handleForwardToProfile() {
       this.$emit('forward:toProfile', this.person.PersonId);

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

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

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import VueGoogleAutocomplete from "vue-google-autocomplete";
+import VueGoogleAutocomplete from 'vue-google-autocomplete';
 
 export default {
   emits: ['add-new-address', 'update:address'],
@@ -25,13 +25,13 @@ export default {
   },
   data() {
     return {
-      address: "",
-      coordinates: ""
+      address: '',
+      coordinates: ''
     };
   },
   methods: {
     addNewAddress(addressData) {
-      this.$emit("add-new-address",addressData);
+      this.$emit('add-new-address', addressData);
     },
     getAddressData(addressData) {
       const street = `${addressData.street_number} ${addressData.route}`;
@@ -39,15 +39,14 @@ export default {
       const state = addressData.administrative_area_level_1;
 
       this.address = `${street}, ${city}, ${state}`;
-      this.coordinates = `${addressData.latitude},${addressData.longitude}`
+      this.coordinates = `${addressData.latitude},${addressData.longitude}`;
 
       const updatedAddress = {
         address: this.address,
         coordinates: this.coordinates
-      }
-
-      this.$emit("update:address", updatedAddress);
+      };
 
+      this.$emit('update:address', updatedAddress);
     }
   }
 };

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

@@ -1,44 +1,44 @@
 import ClubColorPicker from './ClubColorPicker.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/ClubColorPicker',
-    component: ClubColorPicker,
-    tags: ['autodocs'],
-    args: {
-        club: {
-            Color1: 'red',
-            Color2: 'blue',
-        },
-    },
-    argTypes: {
-        club: { control: { type: 'object' } },
-        'update:club': { action: 'update:club' },
-    },
+  title: 'Organisms/ComplexInputs/ClubColorPicker',
+  component: ClubColorPicker,
+  tags: ['autodocs'],
+  args: {
+    club: {
+      Color1: 'red',
+      Color2: 'blue'
+    }
+  },
+  argTypes: {
+    club: { control: { type: 'object' } },
+    'update:club': { action: 'update:club' }
+  }
 };
 
 export const Default = {
-    args: {
-        club: {
-            Color1: 'red',
-            Color2: 'blue',
-        },
-    },
+  args: {
+    club: {
+      Color1: 'red',
+      Color2: 'blue'
+    }
+  }
 };
 
 export const WithDifferentColors = {
-    args: {
-        club: {
-            Color1: 'green',
-            Color2: 'gold',
-        },
-    },
+  args: {
+    club: {
+      Color1: 'green',
+      Color2: 'gold'
+    }
+  }
 };
 
 export const NoInitialColors = {
-    args: {
-        club: {
-            Color1: '',
-            Color2: '',
-        },
-    },
+  args: {
+    club: {
+      Color1: '',
+      Color2: ''
+    }
+  }
 };