@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,81 +1,105 @@
 <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"/>
-      </button>
+      <div class="flex items-center justify-start gap-2 min-w-0">
+        <button class="min-w-0 text-left" type="button" @click="handleForwardToProfile">
+          <BaseText
+            :text="displayName"
+            size="md"
+            color="quaternary"
+            weight="bold"
+            class="text-sm md:text-xl truncate"
+          />
+        </button>
+        <MissingHemaRatingsId :person="person.Person" />
+      </div>
       <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';
+import MissingHemaRatingsId from '../../../Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue';
 
 export default {
   name: 'WaitlistFencerCard',
-  components: {BaseButton, BaseIcon, BaseText},
+  components: { BaseButton, BaseIcon, BaseText, MissingHemaRatingsId },
   emits: ['forward:toProfile', 'move:active', 'remove:fencer'],
   props: {
     person: {
@@ -116,10 +140,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: ''
+    }
+  }
 };

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

@@ -1,54 +1,49 @@
 <template>
   <div class="flex flex-col mb-4">
-    <BaseText
-        :text="getColor"
-        size="sm"
-        color="quaternary"
-        class="mb-1"
-    />
+    <BaseText :text="getColor" size="sm" color="quaternary" class="mb-1" />
 
     <DropDownMenu
-        :items="colorOptions"
-        :selectedItem="getSelectedColor(selectedColor)"
-        @update:selectedItem="handleColorSelection"
-        width="w-full"
-        dropDownWidth="w-full"
+      :items="colorOptions"
+      :selectedItem="getSelectedColor(selectedColor)"
+      @update:selectedItem="handleColorSelection"
+      width="w-full"
+      dropDownWidth="w-full"
     />
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
 
 export default {
-  name: "ClubColorPicker",
+  name: 'ClubColorPicker',
   emits: ['update:value'],
   components: { BaseText, DropDownMenu },
   props: {
     club: {
       type: Object,
-      required: true,
+      required: true
     },
     isPrimary: {
       type: Boolean,
-      default: true,
+      default: true
     }
   },
   data() {
     return {
       colors: {
-        pink: "#D88DB7",
-        red: "#C74444",
-        blue: "#375085",
-        orange: "#C78544",
-        purple: "#4B3A89",
-        gold: "#ECE672",
-        green: "#427958",
-        silver: "#a0a0a0",
-        navy: "#182a3a",
-        rose: "#904f69",
-      },
+        pink: '#D88DB7',
+        red: '#C74444',
+        blue: '#375085',
+        orange: '#C78544',
+        purple: '#4B3A89',
+        gold: '#ECE672',
+        green: '#427958',
+        silver: '#a0a0a0',
+        navy: '#182a3a',
+        rose: '#904f69'
+      }
     };
   },
   computed: {
@@ -62,19 +57,19 @@ export default {
       return Object.entries(this.colors).map(([name, hex]) => ({
         text: name.charAt(0).toUpperCase() + name.slice(1),
         link: name,
-        icon: "fa-circle",
-        color: hex,
+        icon: 'fa-circle',
+        color: hex
       }));
-    },
+    }
   },
   methods: {
     handleColorSelection(selected) {
-      const field = this.isPrimary ? "Color1" : "Color2";
-      this.$emit("update:value", { field, value: selected.link });
+      const field = this.isPrimary ? 'Color1' : 'Color2';
+      this.$emit('update:value', { field, value: selected.link });
     },
     getSelectedColor(colorName) {
-      return this.colorOptions.find(option => option.link === colorName) || { text: "Select a color", link: "" };
-    },
-  },
+      return this.colorOptions.find(option => option.link === colorName) || { text: 'Select a color', link: '' };
+    }
+  }
 };
 </script>

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

@@ -1,26 +1,23 @@
 import DatePicker from './DatePicker.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/DatePicker',
-    component: DatePicker,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 const Template = args => ({
-    components: { DatePicker },
-    setup() {
-        return {
-            args: {
-            }
-        };
-    },
-    methods: {
-    }
+  components: { DatePicker },
+  setup() {
+    return {
+      args: {}
+    };
+  },
+  methods: {}
 });
 
 export const Default = {
-    args: {
-    }
+  args: {}
 };

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

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <VueDatePicker
-        v-model="selectedDate"
-        :formats="datePickerFormats"
-        :min-date="minDate"
-        :enable-time-picker="usesTimePicker"
-        :time-picker="pickerMode === 'time'"
-        placeholder="Select Date or Time"
-        :class="{'dp__input_invalid': invalid}"
-    />
+    <VueDatePicker
+      v-model="selectedDate"
+      :formats="datePickerFormats"
+      :min-date="minDate"
+      :enable-time-picker="usesTimePicker"
+      :time-picker="pickerMode === 'time'"
+      placeholder="Select Date or Time"
+      :class="{ dp__input_invalid: invalid }"
+    />
   </div>
 </template>
 
 <script>
-import { VueDatePicker } from '@vuepic/vue-datepicker';
+import { VueDatePicker } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
 export default {
@@ -41,71 +41,69 @@ export default {
   },
   data() {
     return {
-      selectedDate: this.parseDate(this.setDate),
+      selectedDate: this.parseDate(this.setDate)
     };
   },
   computed: {
     minDate() {
-      return this.userLevel === 'Admin'
-          ? new Date('2018-01-01')
-          : this.getThreeMonthsAgo();
+      return this.userLevel === 'Admin' ? new Date('2018-01-01') : this.getThreeMonthsAgo();
     },
-    usesTimePicker() {
-      return this.pickerMode !== 'date';
-    },
-    datePickerFormats() {
-      const formatsByMode = {
-        date: { input: 'MM/dd/yyyy' },
-        datetime: { input: 'MM/dd/yyyy HH:mm' },
-        time: { input: 'HH:mm' },
-      };
-
-      return formatsByMode[this.pickerMode];
-    },
-  },
+    usesTimePicker() {
+      return this.pickerMode !== 'date';
+    },
+    datePickerFormats() {
+      const formatsByMode = {
+        date: { input: 'MM/dd/yyyy' },
+        datetime: { input: 'MM/dd/yyyy HH:mm' },
+        time: { input: 'HH:mm' }
+      };
+
+      return formatsByMode[this.pickerMode];
+    }
+  },
   watch: {
-    selectedDate(newDate) {
-      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
-        const hours = String(newDate.hours).padStart(2, '0');
-        const minutes = String(newDate.minutes).padStart(2, '0');
-        this.$emit("update:selectedDate", `${hours}:${minutes}`);
-        return;
-      }
-
-      if (this.pickerMode === 'date') {
-        this.$emit("update:selectedDate", this.formatDateOnly(newDate));
-        return;
-      }
-
-      this.$emit("update:selectedDate", newDate);
-    }
-  },
-  methods: {
-    getThreeMonthsAgo() {
-      return new Date(new Date().setMonth(new Date().getMonth() - 3));
-    },
-    parseDate(date) {
-      if (typeof date === 'string') {
-        if (this.pickerMode === 'time') {
-          const [hours, minutes] = date.split(':').map(Number);
-          return { hours, minutes };
-        }
-        const [year, month, day] = date.slice(0, 10).split('-').map(Number);
-        return new Date(year, month - 1, day);
-      }
-      return date;
-    },
-    formatDateOnly(date) {
-      if (!date) return '';
-      if (typeof date === 'string') return date.slice(0, 10);
-
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      return `${year}-${month}-${day}`;
-    }
-  }
-}
+    selectedDate(newDate) {
+      if (this.pickerMode === 'time' && newDate && typeof newDate === 'object') {
+        const hours = String(newDate.hours).padStart(2, '0');
+        const minutes = String(newDate.minutes).padStart(2, '0');
+        this.$emit('update:selectedDate', `${hours}:${minutes}`);
+        return;
+      }
+
+      if (this.pickerMode === 'date') {
+        this.$emit('update:selectedDate', this.formatDateOnly(newDate));
+        return;
+      }
+
+      this.$emit('update:selectedDate', newDate);
+    }
+  },
+  methods: {
+    getThreeMonthsAgo() {
+      return new Date(new Date().setMonth(new Date().getMonth() - 3));
+    },
+    parseDate(date) {
+      if (typeof date === 'string') {
+        if (this.pickerMode === 'time') {
+          const [hours, minutes] = date.split(':').map(Number);
+          return { hours, minutes };
+        }
+        const [year, month, day] = date.slice(0, 10).split('-').map(Number);
+        return new Date(year, month - 1, day);
+      }
+      return date;
+    },
+    formatDateOnly(date) {
+      if (!date) return '';
+      if (typeof date === 'string') return date.slice(0, 10);
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+  }
+};
 </script>
 
 <style scoped>
@@ -131,7 +129,7 @@ export default {
   color: rgb(178, 177, 183);
   font-size: 14px;
   border-radius: 8px;
-  border: 1px solid #D5E4EE;
+  border: 1px solid #d5e4ee;
 }
 
 :deep(.dp__input_invalid) {