@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.stories.js

@@ -1,44 +1,42 @@
 import DropDownMenu from './DropDownMenu.vue';
 
-
 export default {
-    title: 'Organisms/ComplexInputs/DropDownMenu',
-    component: DropDownMenu,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/DropDownMenu',
+  component: DropDownMenu,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    args: {
-        label: 'Sort By',
-        items: [
-            {text: 'Text1', link: '/link1'},
-            {text: 'Text2', link: '/link2'},
-            {text: 'Text3', link: '/link3'}
-        ],
-        selectedItem: {text: 'Text1', link: '/link1'}
-    }
+  args: {
+    label: 'Sort By',
+    items: [
+      { text: 'Text1', link: '/link1' },
+      { text: 'Text2', link: '/link2' },
+      { text: 'Text3', link: '/link3' }
+    ],
+    selectedItem: { text: 'Text1', link: '/link1' }
+  }
 };
 
 export const DropDownAlso = {
-    args: {
-        label: '',
-        items: [
-            { text: 'Purrfect Warriors', link: '/purrfect-warriors' },
-            { text: 'Whisker Tactics', link: '/whisker-tactics' },
-            { text: 'Meowtains of Fury', link: '/meowtains-of-fury' },
-            { text: 'Feline Fury', link: '/feline-fury' },
-            { text: 'Claws of Destiny', link: '/claws-of-destiny' },
-            { text: 'Kitty Knights', link: '/kitty-knights' },
-            { text: 'Paws of Valor', link: '/paws-of-valor' },
-            { text: 'Mew-sketters', link: '/mew-sketters' },
-            { text: 'Purr-suit of Power', link: '/purr-suit-of-power' },
-            { text: 'Cat-astrophic Force', link: '/cat-astrophic-force' }
-        ],
-        selectedItem: {text: '', link: ''},
-        width:"w-full",
-        dropDownWidth:"w-[342px]"
-    }
+  args: {
+    label: '',
+    items: [
+      { text: 'Purrfect Warriors', link: '/purrfect-warriors' },
+      { text: 'Whisker Tactics', link: '/whisker-tactics' },
+      { text: 'Meowtains of Fury', link: '/meowtains-of-fury' },
+      { text: 'Feline Fury', link: '/feline-fury' },
+      { text: 'Claws of Destiny', link: '/claws-of-destiny' },
+      { text: 'Kitty Knights', link: '/kitty-knights' },
+      { text: 'Paws of Valor', link: '/paws-of-valor' },
+      { text: 'Mew-sketters', link: '/mew-sketters' },
+      { text: 'Purr-suit of Power', link: '/purr-suit-of-power' },
+      { text: 'Cat-astrophic Force', link: '/cat-astrophic-force' }
+    ],
+    selectedItem: { text: '', link: '' },
+    width: 'w-full',
+    dropDownWidth: 'w-[342px]'
+  }
 };
-

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -1,13 +1,36 @@
 <template>
   <div :class="computedClass" ref="dropdownContainer">
-    <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white" :class="width" @click="handleDropDown">
-      <BaseInput :placeholder="label" :value="getSelectedText" class="w-full text-xs md:text-sm" @click="clearInput" @keyup="filterDropDown" />
+    <div
+      class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white"
+      :class="width"
+      @click="handleDropDown"
+    >
+      <BaseInput
+        :placeholder="label"
+        :value="getSelectedText"
+        class="w-full text-xs md:text-sm"
+        @click="clearInput"
+        @keyup="filterDropDown"
+      />
       <i class="fa-solid pt-1 fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">
-      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-10 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
-        <a v-for="item in localItems" :key="item.link" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect flex items-center space-x-2">
-          <span v-if="item.color" :style="{ backgroundColor: item.color }" class="w-4 h-4 rounded-full border border-gray-300"></span>
+      <div
+        v-if="isDropDownOpen"
+        class="flex flex-col shadow-lg mt-10 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44"
+        :class="dropDownWidth"
+      >
+        <a
+          v-for="item in localItems"
+          :key="item.link"
+          @click="handleClick(item)"
+          class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect flex items-center space-x-2"
+        >
+          <span
+            v-if="item.color"
+            :style="{ backgroundColor: item.color }"
+            class="w-4 h-4 rounded-full border border-gray-300"
+          ></span>
           <BaseText :text="item.text" color="quinary" size=" " weight="normal" class="py-0.5 text-xs md:text-sm" />
         </a>
       </div>
@@ -16,8 +39,8 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
 
 export default {
   name: 'DropDownMenu',
@@ -25,39 +48,39 @@ export default {
   components: { BaseInput, BaseText },
   props: {
     label: {
-      type: String,
+      type: String
     },
     items: {
       type: Array,
-      required: true,
+      required: true
     },
     selectedItem: {
       type: [Object, String],
-      required: true,
+      required: true
     },
     width: {
       type: String,
-      default: 'w-44',
+      default: 'w-44'
     },
     dropDownWidth: {
       type: String,
-      default: 'w-44',
+      default: 'w-44'
     },
     alignEnd: {
       type: Boolean,
-      default: true,
+      default: true
     },
     invalid: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       localItems: this.items,
       isDropDownOpen: false,
       localSelectedItem: this.selectedItem,
-      backupSelectedItem: { ...this.selectedItem },
+      backupSelectedItem: { ...this.selectedItem }
     };
   },
   mounted() {
@@ -69,24 +92,24 @@ export default {
   watch: {
     items(newItems) {
       this.localItems = newItems;
-    },
+    }
   },
   computed: {
     computedClass() {
       return [
-        "flex flex-row w-full relative rounded-lg",
-        this.invalid ? "border border-alarm" : "",
-        this.alignEnd ? "justify-end" : "",
+        'flex flex-row w-full relative rounded-lg',
+        this.invalid ? 'border border-alarm' : '',
+        this.alignEnd ? 'justify-end' : ''
       ];
     },
     getSelectedText() {
-      return this.localSelectedItem.text || "";
-    },
+      return this.localSelectedItem.text || '';
+    }
   },
   methods: {
     clearInput() {
       this.backupSelectedItem = { ...this.localSelectedItem };
-      this.localSelectedItem = { text: '', Link: null};
+      this.localSelectedItem = { text: '', Link: null };
     },
     restorePreviousValue() {
       if (!this.localSelectedItem?.text?.trim?.()) {
@@ -110,7 +133,7 @@ export default {
     filterDropDown(event) {
       const filter = event?.target?.value?.toLowerCase();
       this.localItems = this.items.filter(item => item?.text?.toLowerCase().includes(filter));
-    },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,30 +1,30 @@
 import FindLocation from './FindLocation.vue';
 import mockLocation from '../../../../mocks/locationMock.js';
 export default {
-    title: 'Organisms/ComplexInputs/FindLocation',
-    component: FindLocation,
-    tags: ['autodocs'],
-    args: {
-        locations: mockLocation,
-        addNewText: "Add New Location"
+  title: 'Organisms/ComplexInputs/FindLocation',
+  component: FindLocation,
+  tags: ['autodocs'],
+  args: {
+    locations: mockLocation,
+    addNewText: 'Add New Location'
+  },
+  argTypes: {
+    locations: {
+      control: {
+        type: 'object'
+      }
     },
-    argTypes: {
-        locations: {
-            control: {
-                type: 'object'
-            }
-        },
-        addNewText: {
-            control: {
-                type: 'text'
-            }
-        }
+    addNewText: {
+      control: {
+        type: 'text'
+      }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        locations: mockLocation,
-        addNewText: "Add New Location"
-    }
+  args: {
+    locations: mockLocation,
+    addNewText: 'Add New Location'
+  }
 };

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

@@ -2,35 +2,62 @@
   <section>
     <div v-if="!showNewLocation" class="relative" ref="showNewLocation">
       <BaseInput
-          :addBorder="addBorder"
-          :value="inputValue"
-          :invalid="invalid"
-          placeholder="Enter Location Name"
-          @click="clearInput"
-          @input="updateInput"
+        :addBorder="addBorder"
+        :value="inputValue"
+        :invalid="invalid"
+        placeholder="Enter Location Name"
+        @click="clearInput"
+        @input="updateInput"
       />
-      <div v-if="showDropdown && showAddNew" class="absolute z-10 w-full bg-white border rounded-md mt-1 max-h-60 overflow-y-auto">
+      <div
+        v-if="showDropdown && showAddNew"
+        class="absolute z-10 w-full bg-white border rounded-md mt-1 max-h-60 overflow-y-auto"
+      >
         <ul>
-          <li v-for="(item, index) in filteredLocations" :key="index" class="p-2 hover:bg-gray-100 cursor-pointer" @click="selectItem(item)">{{ item.Name }}</li>
+          <li
+            v-for="(item, index) in filteredLocations"
+            :key="index"
+            class="p-2 hover:bg-gray-100 cursor-pointer"
+            @click="selectItem(item)"
+          >
+            {{ item.Name }}
+          </li>
         </ul>
         <div class="p-2 hover:bg-gray-100 cursor-pointer" @click="addNewItem">
           <base-button
-              iconName="fa-location-dot"
-              label="Add New Location"
-              type="secondary"
-              v-on:click="showNewLocation = true"
+            iconName="fa-location-dot"
+            label="Add New Location"
+            type="secondary"
+            v-on:click="showNewLocation = true"
           />
         </div>
       </div>
     </div>
     <div v-if="showNewLocation">
-      <BaseModal :show="showNewLocation" buttonText="Add Location" iconName="fa-location-plus"
-                 @submit-modal="handleSubmit" @update:show="showNewLocation = false">
+      <BaseModal
+        :show="showNewLocation"
+        buttonText="Add Location"
+        iconName="fa-location-plus"
+        @submit-modal="handleSubmit"
+        @update:show="showNewLocation = false"
+      >
         <template #modal-content>
-          <BaseInput :addBorder="true" :invalid="false" :value="locationName" class="pb-2"
-                     placeholder="Enter Location Name" type="formInput" @focus="clearInput" @update:value="handleLocationName"/>
-          <AddressAutocomplete v-model="formData.Address1" :invalid="validAddress" class="text-lg"
-                               @update:address="handleNewAddress"/>
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="locationName"
+            class="pb-2"
+            placeholder="Enter Location Name"
+            type="formInput"
+            @focus="clearInput"
+            @update:value="handleLocationName"
+          />
+          <AddressAutocomplete
+            v-model="formData.Address1"
+            :invalid="validAddress"
+            class="text-lg"
+            @update:address="handleNewAddress"
+          />
         </template>
       </BaseModal>
     </div>
@@ -39,15 +66,15 @@
 
 <script>
 import BaseInput from '../../../Atoms/Input/BaseInput.vue';
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import AddressAutocomplete from "../AddressAutocomplete/AddressAutocomplete.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import AddressAutocomplete from '../AddressAutocomplete/AddressAutocomplete.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'FindLocation',
-  components: {BaseText, BaseModal, AddressAutocomplete, BaseButton, BaseIcon, BaseInput},
+  components: { BaseText, BaseModal, AddressAutocomplete, BaseButton, BaseIcon, BaseInput },
   emits: ['update:location', 'add-new', 'submit:addNewAddress', 'submit:location'],
   props: {
     placeholder: {
@@ -74,9 +101,9 @@ export default {
   data() {
     return {
       formData: {
-        Name: "",
-        Address1: "",
-        Coordinates: ""
+        Name: '',
+        Address1: '',
+        Coordinates: ''
       },
       locationName: '',
       validAddress: false,
@@ -117,7 +144,7 @@ export default {
       this.showAddNew = true;
       this.inputValue = event.target.value;
 
-      if (this.inputValue.trim() === "") {
+      if (this.inputValue.trim() === '') {
         this.$emit('update:location', null);
       } else {
         this.debounceSearch();
@@ -139,13 +166,13 @@ export default {
       if (!this.showDropdown) return;
       const searchValue = (value || '').toLowerCase();
       this.filteredLocations = this.locations.filter(item => {
-        return ((item.Name || '').toLowerCase().includes(searchValue));
+        return (item.Name || '').toLowerCase().includes(searchValue);
       });
     },
     debounceSearch() {
       clearTimeout(this.debouncedTimeout);
       this.debouncedTimeout = setTimeout(() => {
-        this.onInputChanged(this.inputValue)
+        this.onInputChanged(this.inputValue);
       }, 500);
     },
     handleLocationName(newName) {
@@ -158,12 +185,12 @@ export default {
     },
     handleNewAddress(newAddress) {
       const parts = newAddress.address.split(',');
-      this.formData.Name = this.locationName
-      this.formData.Address1 = parts[0].trim()
-      this.formData.City = parts[1].trim()
-      this.formData.State = parts[2].trim()
-      this.formData.Coordinates = newAddress.coordinates
-      this.inputValue = this.locationName
+      this.formData.Name = this.locationName;
+      this.formData.Address1 = parts[0].trim();
+      this.formData.City = parts[1].trim();
+      this.formData.State = parts[2].trim();
+      this.formData.Coordinates = newAddress.coordinates;
+      this.inputValue = this.locationName;
       this.$emit('submit:addNewAddress', this.formData);
     },
     handleSubmit() {
@@ -176,7 +203,7 @@ export default {
       if (this.$refs.showNewLocation && !this.$refs.showNewLocation.contains(event.target)) {
         this.restorePreviousValue();
       }
-    },
+    }
   }
 };
-</script>
+</script>

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

@@ -1,27 +1,26 @@
 import FindOrAddPerson from './FindOrAddPerson.vue';
 import mockPersons from '../../../../mocks/personGetAllMock.js';
-import clubGetAllMock  from "../../../../mocks/clubGetAllMock.js";
+import clubGetAllMock from '../../../../mocks/clubGetAllMock.js';
 
 export default {
-    title: 'Organisms/ComplexInputs/FindOrAddPerson',
-    component: FindOrAddPerson,
-    tags: ['autodocs'],
-    args: {
-        persons: mockPersons,
-        addBorder: true,
-    },
-    argTypes: {
-        persons: { control: 'array' },
-        addBorder: { control: 'boolean' },
-        clubs: { control: 'array'}
-    },
+  title: 'Organisms/ComplexInputs/FindOrAddPerson',
+  component: FindOrAddPerson,
+  tags: ['autodocs'],
+  args: {
+    persons: mockPersons,
+    addBorder: true
+  },
+  argTypes: {
+    persons: { control: 'array' },
+    addBorder: { control: 'boolean' },
+    clubs: { control: 'array' }
+  }
 };
 
-
 export const Default = {
-    args: {
-        addBorder:true,
-        persons: mockPersons,
-        clubs:  clubGetAllMock
-    }
-};
+  args: {
+    addBorder: true,
+    persons: mockPersons,
+    clubs: clubGetAllMock
+  }
+};

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

@@ -1,21 +1,44 @@
 <template>
   <section>
-    <BaseButton type="primary" :label="addNewText" size=" " class="text-xs md:text-md" iconName="fa-user-plus" @buttonClick="openSearchModal" />
+    <BaseButton
+      type="primary"
+      :label="addNewText"
+      size=" "
+      class="text-xs md:text-md"
+      iconName="fa-user-plus"
+      @buttonClick="openSearchModal"
+    />
 
-    <BaseModal :show="showModal" :iconName="modalIcon" :buttonText="modalButtonText" :disableButton="!isSearchMode" @submit-modal="handleSubmit" @update:show="closeModal">
+    <BaseModal
+      :show="showModal"
+      :iconName="modalIcon"
+      :buttonText="modalButtonText"
+      :disableButton="!isSearchMode"
+      @submit-modal="handleSubmit"
+      @update:show="closeModal"
+    >
       <template #modal-content>
         <div v-if="isSearchMode">
           <BaseInput
-              ref="searchInput"
-              :addBorder="true"
-              :value="inputValue"
-              @input="updateInput"
-              placeholder="Type to search person..."
-              tabindex="0"
+            ref="searchInput"
+            :addBorder="true"
+            :value="inputValue"
+            @input="updateInput"
+            placeholder="Type to search person..."
+            tabindex="0"
           />
-          <div v-if="showDropdown" class="absolute z-10 w-11/12 bg-eventBoxBlue rounded-md" :class="[filteredPersons.length > 0 ? 'border border-dropdownSelect mt-2 p-2' : 'mt-4']">
+          <div
+            v-if="showDropdown"
+            class="absolute z-10 w-11/12 bg-eventBoxBlue rounded-md"
+            :class="[filteredPersons.length > 0 ? 'border border-dropdownSelect mt-2 p-2' : 'mt-4']"
+          >
             <ul>
-              <li v-for="(person, index) in filteredPersons" :key="index" @click="selectPerson(person)" class="p-2 my-2 hover:bg-dropdownSelect rounded-lg cursor-pointer">
+              <li
+                v-for="(person, index) in filteredPersons"
+                :key="index"
+                @click="selectPerson(person)"
+                class="p-2 my-2 hover:bg-dropdownSelect rounded-lg cursor-pointer"
+              >
                 <p class="grid grid-cols-2 w-full">
                   <BaseText :text="person.DisplayName" size="" class="text-xs md:text-md" />
                   <BaseText :text="person.Club.ShortName" size=" " class="ml-4 text-xs md:text-md" />
@@ -37,16 +60,16 @@
 
 <script>
 import BaseInput from '../../../Atoms/Input/BaseInput.vue';
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
-import DropDownMenu from "../DropDown/DropDownMenu.vue";
-import AddNewPerson from "../../../Organisms/Form/AddNewPerson/AddNewPerson.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
+import DropDownMenu from '../DropDown/DropDownMenu.vue';
+import AddNewPerson from '../../../Organisms/Form/AddNewPerson/AddNewPerson.vue';
 
 export default {
   name: 'FindOrAddPerson',
   emits: ['new-person-submitted', 'person-selected'],
-  components: {AddNewPerson, DropDownMenu, BaseModal, BaseText, BaseButton, BaseInput },
+  components: { AddNewPerson, DropDownMenu, BaseModal, BaseText, BaseButton, BaseInput },
   props: {
     persons: {
       type: Array,
@@ -138,7 +161,9 @@ export default {
     },
     onInputChanged(value) {
       if (!this.showDropdown) return;
-      this.filteredPersons = this.persons.filter(person => person.DisplayName.toLowerCase().includes(value.toLowerCase()));
+      this.filteredPersons = this.persons.filter(person =>
+        person.DisplayName.toLowerCase().includes(value.toLowerCase())
+      );
     },
     debounceSearch() {
       clearTimeout(this.debouncedTimeout);
@@ -149,20 +174,20 @@ export default {
     },
     closeModal(value) {
       this.showModal = value;
-      this.inputValue = "";
+      this.inputValue = '';
     },
-    clearFields(){
+    clearFields() {
       this.personName = '';
       this.personLegalName = '';
       this.personEmail = '';
       this.selectedPronouns = { text: '', link: '' };
-      this.selectedClub =  { text: '', link: '' };
+      this.selectedClub = { text: '', link: '' };
     },
     handleSubmit(newPerson) {
       this.$emit('new-person-submitted', newPerson);
       this.showModal = false;
       this.clearFields();
-    },
+    }
   }
 };
 </script>

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

@@ -2,31 +2,31 @@ import FindPerson from './FindPerson.vue';
 import mockPersons from '../../../../mocks/personGetAllMock.js';
 
 export default {
-    title: 'Organisms/ComplexInputs/FindPerson',
-    component: FindPerson,
-    tags: ['autodocs'],
-    args: {
-        persons: mockPersons,
-        addNewText: "Add New Person"
+  title: 'Organisms/ComplexInputs/FindPerson',
+  component: FindPerson,
+  tags: ['autodocs'],
+  args: {
+    persons: mockPersons,
+    addNewText: 'Add New Person'
+  },
+  argTypes: {
+    locations: {
+      control: {
+        type: 'object'
+      }
     },
-    argTypes: {
-        locations: {
-            control: {
-                type: 'object'
-            }
-        },
-        addNewText: {
-            control: {
-                type: 'text'
-            }
-        }
+    addNewText: {
+      control: {
+        type: 'text'
+      }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        addBorder:true,
-        locations: mockPersons,
-        addNewText: "Add New Location"
-    }
+  args: {
+    addBorder: true,
+    locations: mockPersons,
+    addNewText: 'Add New Location'
+  }
 };