@dcrackel/hematournamentui 1.0.706 → 1.0.707

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'
+  }
 };

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

@@ -2,15 +2,20 @@
   <section>
     <div v-if="!showNewPerson" class="relative">
       <BaseInput
-          :addBorder="addBorder"
-          :value="inputValue"
-          @input="updateInput"
-          placeholder="Type to search person..."
+        :addBorder="addBorder"
+        :value="inputValue"
+        @input="updateInput"
+        placeholder="Type to search person..."
       />
       <div v-if="showDropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1">
         <ul>
-          <li v-for="(person, index) in filteredPersons" :key="index" @click="selectPerson(person)" class="p-2 hover:bg-gridBoxHeader cursor-pointer even:bg-eventBoxBlue">
-            <div class="grid w-full" style="grid-template-columns: 1fr 2fr;">
+          <li
+            v-for="(person, index) in filteredPersons"
+            :key="index"
+            @click="selectPerson(person)"
+            class="p-2 hover:bg-gridBoxHeader cursor-pointer even:bg-eventBoxBlue"
+          >
+            <div class="grid w-full" style="grid-template-columns: 1fr 2fr">
               <BaseText :text="person.DisplayName" size="md" />
               <BaseText :text="person.Club.Name" size="md" class="ml-4" />
             </div>
@@ -18,22 +23,60 @@
         </ul>
         <div @click="addNewPerson" class="p-2 hover:bg-gray-100 cursor-pointer">
           <base-button
-              type="secondary"
-              label="Add New Person"
-              iconName="fa-user-plus"
-              v-on:click="showNewPerson = true"
+            type="secondary"
+            label="Add New Person"
+            iconName="fa-user-plus"
+            v-on:click="showNewPerson = true"
           />
         </div>
       </div>
     </div>
-    <div v-if="showNewPerson" >
-      <BaseModal :show="showNewPerson" iconName="fa-user" buttonText="Add Person" @submit-modal="handleSubmit" @update:show="showNewPerson = false">
+    <div v-if="showNewPerson">
+      <BaseModal
+        :show="showNewPerson"
+        iconName="fa-user"
+        buttonText="Add Person"
+        @submit-modal="handleSubmit"
+        @update:show="showNewPerson = false"
+      >
         <template #modal-content>
           <BaseText class="pb-2" text="Enter Primary Contacts Information" />
-          <BaseInput :addBorder="true" :invalid="false" :value="personName" class="pb-2" placeholder="Display Name" type="formInput" @update:value="value => personName = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personName" class="pb-2" placeholder="Legal Name" type="formInput" @update:value="value => personName = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personEmail" class="pb-2" placeholder="Email" type="formInput" @update:value="value => personEmail = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personPronouns" class="pb-2" placeholder="Pronouns" type="formInput" @update:value="value => personPronouns = value"/>
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personName"
+            class="pb-2"
+            placeholder="Display Name"
+            type="formInput"
+            @update:value="value => (personName = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personName"
+            class="pb-2"
+            placeholder="Legal Name"
+            type="formInput"
+            @update:value="value => (personName = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personEmail"
+            class="pb-2"
+            placeholder="Email"
+            type="formInput"
+            @update:value="value => (personEmail = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personPronouns"
+            class="pb-2"
+            placeholder="Pronouns"
+            type="formInput"
+            @update:value="value => (personPronouns = value)"
+          />
         </template>
       </BaseModal>
     </div>
@@ -42,14 +85,14 @@
 
 <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 BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
 
 export default {
   name: 'FindPerson',
   emits: ['add-new-person', 'person-selected'],
-  components: {BaseModal, BaseText, BaseButton, BaseInput},
+  components: { BaseModal, BaseText, BaseButton, BaseInput },
   props: {
     persons: {
       type: Array,
@@ -110,16 +153,18 @@ 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);
       this.debouncedTimeout = setTimeout(() => {
-        this.onInputChanged(this.inputValue)
+        this.onInputChanged(this.inputValue);
       }, 500);
     },
     handleSubmit() {
-      console.log('submitting person')
+      console.log('submitting person');
     }
   }
 };

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

@@ -1,20 +1,20 @@
 import GenericImageCropper from './ImageCropper.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/ImageCropper',
-    component: GenericImageCropper,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {
-        personID: {
-            control: 'number',
-            description: 'The ID of the person for the image cropper'
-        },
-    },
+  title: 'Organisms/ComplexInputs/ImageCropper',
+  component: GenericImageCropper,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    personID: {
+      control: 'number',
+      description: 'The ID of the person for the image cropper'
+    }
+  }
 };
 
 export const Default = {
-    args: {
-        personID: 1,
-    }
+  args: {
+    personID: 1
+  }
 };

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

@@ -1,26 +1,23 @@
 <template>
   <section class="flex w-full justify-center">
-    <img v-if="!uploading"
-        :src="displayedUrl"
-        :class="getClasses"
-        :style="customStyle"
-        :alt="displayedUrl"
-        @error="onImageError"
-        @click="setShowCropper()"
-    />
-    <div v-if="uploading"
-         :class="getSkeletonClass"
-         @error="onImageError"
-         @click="setShowCropper()"
+    <img
+      v-if="!uploading"
+      :src="displayedUrl"
+      :class="getClasses"
+      :style="customStyle"
+      :alt="displayedUrl"
+      @error="onImageError"
+      @click="setShowCropper()"
     />
+    <div v-if="uploading" :class="getSkeletonClass" @error="onImageError" @click="setShowCropper()" />
     <avatar-cropper
-        v-model="showCropper"
-        :upload-url="`${uploadServer}${uploadImageName}`"
-        :cropper-options="cropperOptions"
-        @uploading="handleUploading"
-        @uploaded="handleUploaded"
-        @completed="handleCompleted"
-        @error="handlerError"
+      v-model="showCropper"
+      :upload-url="`${uploadServer}${uploadImageName}`"
+      :cropper-options="cropperOptions"
+      @uploading="handleUploading"
+      @uploaded="handleUploaded"
+      @completed="handleCompleted"
+      @error="handlerError"
     />
   </section>
 </template>
@@ -29,7 +26,7 @@
 import AvatarCropper from 'vue-avatar-cropper';
 import SelectAnProfile from '../../../../assets/select-profile.png';
 import SelectAnImage from '../../../../assets/select-tournament.png';
-import loading from '../../../../assets/loading-spinner.gif'
+import loading from '../../../../assets/loading-spinner.gif';
 
 export default {
   name: 'GenericImageCropper',
@@ -94,10 +91,14 @@ export default {
       return this.localImageUrl || (this.isProfile ? SelectAnProfile : SelectAnImage);
     },
     getClasses() {
-      return this.customClass ? this.customClass : "h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat"
+      return this.customClass
+        ? this.customClass
+        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
     },
     getSkeletonClass() {
-      return this.customSkeletonClass ? this.customSkeletonClass : "border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse"
+      return this.customSkeletonClass
+        ? this.customSkeletonClass
+        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
     }
   },
   methods: {
@@ -105,10 +106,10 @@ export default {
       this.showCropper = true;
     },
     handleUploading() {
-      this.uploading = true
+      this.uploading = true;
     },
     handleUploaded(response) {
-      this.uploading = false
+      this.uploading = false;
       if (response.response.status === 200) {
         this.localImageUrl = `${this.imageServer}${this.uploadImageName}.png`;
         this.$emit('update:url', `${this.imageServer}${this.uploadImageName}.png`);