@dcrackel/hematournamentui 1.0.39 → 1.0.41

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

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

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

@@ -0,0 +1,113 @@
+<template>
+  <section>
+    <div v-if="!showNewPerson" class="relative">
+      <BaseInput
+          :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-gray-100 cursor-pointer">
+            {{ person.DisplayName }}
+          </li>
+        </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"
+          />
+        </div>
+      </div>
+    </div>
+    <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"/>
+        </template>
+      </BaseModal>
+    </div>
+  </section>
+</template>
+
+<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";
+
+export default {
+  name: 'FindPerson',
+  components: {BaseModal, BaseText, BaseButton, BaseInput},
+  props: {
+    persons: {
+      type: Array,
+      required: true
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    addNewText: {
+      type: String,
+      default: 'Add New'
+    }
+  },
+  data() {
+    return {
+      personEmail: '',
+      personName: '',
+      personPronouns: '',
+      showNewPerson: false,
+      filteredPersons: this.persons,
+      inputValue: '',
+      showDropdown: false,
+      debouncedTimeout: null
+    };
+  },
+  watch: {
+    inputValue(newValue) {
+      this.showDropdown = newValue.length > 0;
+      this.showAddNew = newValue.length > 0 && this.filteredPersons.length === 0;
+      this.debounceSearch();
+    }
+  },
+  methods: {
+    updateInput(event) {
+      this.inputValue = event.target.value;
+    },
+    selectPerson(person) {
+      this.showDropdown = false;
+      this.inputValue = person.Name;
+      this.$emit('person-selected', person);
+      this.$nextTick(() => {
+        this.showDropdown = false;
+      });
+    },
+    addNewPerson() {
+      this.$emit('add-new-person', this.inputValue);
+      this.showDropdown = false;
+    },
+    onInputChanged(value) {
+      if (!this.showDropdown) return;
+      this.filteredPersons = this.persons.filter(person => person.DisplayName.toLowerCase().includes(value.toLowerCase()));
+    },
+    debounceSearch() {
+      clearTimeout(this.debouncedTimeout);
+      this.debouncedTimeout = setTimeout(() => {
+        this.onInputChanged(this.inputValue)
+      }, 500);
+    },
+    handleSubmit() {
+      console.log('submitting person')
+    }
+  }
+};
+</script>

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

@@ -0,0 +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'
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        personID: 1,
+    }
+};

package/src/stories/Organisms/{Inputs → ComplexInputs}/ImageCropper/ImageCropper.vue

@@ -13,7 +13,7 @@
         @completed="handleCompleted"
         @error="handlerError"
         v-model="showCropper"
-        :upload-url="`./uploads/${personID}`"
+        :upload-url="`http://localhost/api/upload/${personID}`"
         :cropper-options="{
           aspectRatio: 8/3,
           autoCropArea: 1,
@@ -51,26 +51,24 @@ export default {
   watch: {
     personID: {
       immediate: true,
-      handler(newVal, oldVal) {
+      handler(newVal) {
         this.getImgUrl(newVal)
       }
     }
   },
   methods: {
-    getImgUrl(id) {
-      //this.userPicUrl = `${ferrotasNodeServer}/uploads/${id}.png?${Date.now()}`
+    getImgUrl() {
       this.userPicUrl = '../../../../src/assets/select-tournament.png'
     },
     setShowCropper() {
       this.showCropper = true
     },
     handleUploading() {
-      this.userPicUrl = `./uploads/default.jpeg`
       this.message = 'uploading...'
     },
     handleUploaded(response) {
       if (response.response.status === 200) {
-        this.getImgUrl(this.personID)
+        this.userPicUrl = `http://localhost/uploads/${this.personID}.png`
       }
     },
     handleCompleted() {

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

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

package/src/stories/Organisms/Containers/Container.stories.js

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

package/src/stories/Organisms/Containers/Container.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex flex-row justify-center">
+  </div>
+</template>
+
+<script></script>

package/src/stories/Organisms/Forms/EditTournamentForm1.stories.js

@@ -0,0 +1,26 @@
+import EditTournamentForm from './EditTournamentForm1.vue';
+
+export default {
+    title: 'Organisms/Forms/EditTournamentForm',
+    component: EditTournamentForm,
+    tags: ['autodocs'],
+    args: {},
+    argTypes: {}
+};
+
+
+export const Default = {
+    args: {
+        tournament: {
+            name: 'Ultimate',
+            imageLink: '',
+            address: '123 Winchester St',
+            coordinates: '',
+            startDate: '',
+            totalDays: 1,
+            description: '',
+            visibility: '',
+            externalLinks: []
+        },
+    }
+};

package/src/stories/Organisms/Forms/EditTournamentForm1.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="w-full flex flex-col justify-center">
+    <div class="mb-3">
+      <BaseText :size="'sm'" :text="'Cover Image'" :weight="'normal'" class="mb-1" color="primary"/>
+      <ImageCropper>Picture</ImageCropper>
+    </div>
+    <div class="mb-3">
+      <TitledInput :inputValue="localTournament.name" :invalid="validation.name" :placeholder="localTournament.name"
+                   :title="'Tournament Name'" @update:value="value => localTournament.name = value"/>
+      <BaseText :color="'primary'" :invalid="validation.address" :size="'sm'" :text="'Address'"
+                :weight="'normal'" class="mb-1 ml-1" data-testid="text-address"/>
+      <AddressAutocomplete :address="localTournament.address" :invalid="validation.address"
+                           :placeholder="localTournament.address"
+                           @update:address="handleAddressUpdate"/>
+    </div>
+    <div class="mt-3"/>
+    <BaseText :color="'quaternary'" :size="'sm'" :text="'SOCIAL MEDIA AND CONTACT'" :weight="'normal'"
+              class="mb-2 border-b border-quaternary"/>
+    <!-- This titled input needs to be worked like the external links of add tournament page two
+        <TitledInput :inputValue="localTournament.SocialMedia" :invalid="validation.name"-->
+    <!--                 :title="'Instagram'" @update:value="value => localTournament.SocialMedia = value"/>-->
+  </div>
+</template>
+
+<script>
+import ImageCropper from "../ComplexInputs/ImageCropper/ImageCropper.vue";
+import BaseInput from "../../Atoms/Input/BaseInput.vue";
+import BaseText from "../../Atoms/Text/BaseText.vue";
+import AddressAutocomplete from "../ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
+import BaseButton from "../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import TitledInput from "../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+
+export default {
+  components: {
+    TitledInput,
+    AddressAutocomplete,
+    ImageCropper,
+    BaseInput,
+    BaseText,
+    BaseButton
+  },
+  props: {tournament: Object},
+  data() {
+    return {
+      localTournament: JSON.parse(JSON.stringify(this.tournament)),
+      validation: {
+        name: false,
+        imageLink: false,
+        address: false,
+        coordinates: false,
+        startDate: false,
+        totalDays: false,
+        description: false,
+        visibility: false
+      },
+    }
+  },
+  methods: {
+    handleAddressUpdate(updatedAddress) {
+      this.localTournament.address = updatedAddress.address;
+      this.localTournament.coordinates = updatedAddress.coordinates;
+    },
+  }
+}
+
+</script>

package/src/stories/Organisms/Grids/GridContainer.stories.js

@@ -4,7 +4,34 @@ export default {
     title: 'Organisms/Grids/GridContainer',
     component: GridContainer,
     tags: ['autodocs'],
-    argTypes: {}
+    args: {},
+    argTypes: {
+        items: {
+            control: {
+                type: 'object'
+            }
+        },
+        component: {
+            control: {
+                type: 'text'
+            }
+        },
+        label: {
+            control: {
+                type: 'text'
+            }
+        },
+        dropdownItems: {
+            control: {
+                type: 'object'
+            }
+        },
+        selectedItem: {
+            control: {
+                type: 'object'
+            }
+        }
+    }
 };
 export const Default = {
     args: {

package/src/stories/Organisms/Grids/GridContainer.vue

@@ -81,13 +81,13 @@ export default {
 
       switch(this.sortCriteria) {
         case 'Date':
-          result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
+          result = [...result].sort((a, b) => new Date(a.StartDate) - new Date(b.StartDate));
           break;
         case 'Name':
-          result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+          result = [...result].sort((a, b) => a.Name.localeCompare(b.Name));
           break;
         case 'Location':
-          result = [...result].sort((a, b) => a.location.localeCompare(b.location));
+          result = [...result].sort((a, b) => a.Address[0].Name.localeCompare(b.Address[0].Name));
           break;
       }
       return result;

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.stories.js

@@ -1,22 +1,26 @@
 import AddTournamentPageOne from './AddTournamentPageOne.vue';
-
+import mockLocation from '../../../../../mocks/locationMock.js';
+import mockPersons from '../../../../../mocks/personsMock.js';
 export default {
     title: 'Templates/TournamentManagement/AddTournament/PageOne',
     component: AddTournamentPageOne,
     tags: ['autodocs'],
-    argTypes: {}
-};
-
-const Template = args => ({
-    components: {AddTournamentPageOne},
-    setup() {
-        return {
-            args: {}
-        };
+    args: {
+        locations: mockLocation,
+        persons: mockPersons
     },
-    methods: {}
-});
+    argTypes: {
+        locations: {
+            control: {
+                type: 'object'
+            }
+        }
+    }
+};
 
 export const Default = {
-    args: {}
+    args: {
+        locations: mockLocation,
+        addNewText: "Add New Location"
+    }
 };

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.vue

@@ -4,7 +4,7 @@
       <BaseText :color="'quaternary'" :size="'sm'" :text="'Step 1 out of 2'" :weight="'normal'"
                 data-testid="text-step"/>
     </div>
-    <div class="w-full flex flex-row justify-center my-4">
+    <div class="w-full my-4">
       <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Add Tournament'" :weight="'normal'"
                 data-testid="text-add-tournament"/>
     </div>
@@ -12,19 +12,13 @@
       <ImageCropper :personID="1"/>
     </div>
 
-    <div class="w-full flex flex-row justify-center">
+    <div class="w-fu--*ll flex flex-row justify-center">
       <section class="w-96">
+        <TitledInput :invalid="validation.name" title="Tournament Name" :inputValue="tournament.name"  placeholder="Enter Tournament Name" @update:value="value => tournament.name = value"></TitledInput>
         <div class="flex flex-col mb-3">
-          <BaseText :invalid="validation.name" :size="'sm'" :text="'Tournament Name'" :weight="'normal'"
-                    class="mb-1" color="primary" data-testid="text-tournament-name"/>
-          <BaseInput :addBorder="true" :invalid="validation.name" :value="tournament.name" placeholder="Enter Tournament Name"
-                     type="formInput" @update:value="value => tournament.name = value"/>
-        </div>
-        <div class="flex flex-col mb-3">
-          <BaseText :color="'primaryHighlight'" :invalid="validation.address" :size="'sm'" :text="'Address'"
+          <BaseText :color="'primaryHighlight'" :invalid="validation.address" :size="'sm'" :text="'Location'"
                     :weight="'normal'" class="mb-1" data-testid="text-address"/>
-          <AddressAutocomplete :address="tournament.address" :invalid="validation.address"
-                               @update:address="handleAddressUpdate"/>
+          <FindLocation :addBorder="true" :locations="locations" addNewText="Add New" />
         </div>
         <div class="flex flex-row mb-3">
           <div class="w-3/4 mr-1">
@@ -33,10 +27,8 @@
             <DatePicker :invalid="validation.startDate" :setDate="tournament.startDate"
                         @update:selectedDate="handleDateUpdate"/>
           </div>
-          <div class="w-1/4 ml-1">
-            <BaseText :color="'primaryHighlight'" :invalid="validation.totalDays" :size="'sm'" :text="'Total Days'"
-                      :weight="'normal'" class="mb-1" data-testid="text-total-days"/>
-            <BaseInput :addBorder="true" :invalid="validation.totalDays" :placeholder="`${1}`" :value="`${tournament.totalDays}`"/>
+          <div>
+            <TitledInput :invalid="validation.totalDays" title="Number of Days" :inputValue="tournament.totalDays"  placeholder="1" @update:value="value => tournament.totalDays = value"></TitledInput>
           </div>
         </div>
         <div class="flex flex-col mb-3">
@@ -44,6 +36,11 @@
                     :weight="'normal'" class="mb-1" data-testid="text-description"/>
           <TextBoxEditor :invalid="validation.description" @update:editorContent="handleEditorUpdate"/>
         </div>
+        <div class="flex flex-col pb-4">
+          <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
+                    :weight="'normal'" class="mb-1" data-testid="text-address"/>
+          <FindPerson :addBorder="true" :persons="persons" addNewText="Add New Person" />
+        </div>
         <div class="flex flex-col pb-4">
           <BaseText :color="'primaryHighlight'" :invalid="validation.visibility" :size="'sm'"
                     :text="'Tournament Visibility'" :weight="'normal'" class="mb-2" data-testid="text-visibility"/>
@@ -52,7 +49,7 @@
         </div>
         <div>
           <BaseButton class="w-full" color="neutral" label="Continue" size="sm" type="secondary"
-                      @click="handleSubmit()"/>
+                     @click="handleSubmit()"/>
         </div>
       </section>
     </div>
@@ -61,17 +58,23 @@
 
 <script>
 import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import ImageCropper from "../../../../Organisms/Inputs/ImageCropper/ImageCropper.vue";
+import ImageCropper from "../../../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
 import BaseInput from "../../../../Atoms/Input/BaseInput.vue";
-import AddressAutocomplete from "../../../../Organisms/Inputs/AddressAutocomplete/AddressAutocomplete.vue";
-import DatePicker from "../../../../Organisms/Inputs/DatePicker/DatePicker.vue";
-import TextBoxEditor from "../../../../Organisms/Inputs/TextBoxEditor/TextBoxEditor.vue";
+import AddressAutocomplete from "../../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
+import DatePicker from "../../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue";
+import TextBoxEditor from "../../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
 import BaseRadioGroup from "../../../../Atoms/RadioGroup/BaseRadioGroup.vue";
 import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import FindLocation from "../../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
+import FindPerson from "../../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
+import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
 
 export default {
   name: 'AddTournamentPageOne',
   components: {
+    TitledInput,
+    FindPerson,
+    FindLocation,
     BaseText,
     BaseInput,
     ImageCropper,
@@ -81,7 +84,10 @@ export default {
     BaseRadioGroup,
     BaseButton
   },
-  props: {},
+  props: {
+    locations: [],
+    persons: []
+  },
   data() {
     return {
       tournament: {

package/tailwind.config.js

@@ -6,7 +6,8 @@ export default {
   ],
   safelist: [
     'text-accepted',
-    'bg-acceptedHighlight'
+    'bg-acceptedHighlight',
+    'hover:text-alarm'
   ],
   theme: {
     extend: {

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

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

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

@@ -1,34 +0,0 @@
-import DropDownMenu from './DropDownMenu.vue';
-export default {
-    title: 'Organisms/Inputs/DropDownMenu',
-    component: DropDownMenu,
-    tags: ['autodocs']
-};
-const Template = args => ({
-    components: { DropDownMenu },
-    setup() {
-        return {
-            args: {
-                label: 'default',
-                items: []
-            }
-        };
-    },
-    methods: {
-        onMenuClick(index) {
-            alert(`Button ${index + 1} clicked!`);
-        }
-    }
-});
-
-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'}
-    }
-};

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

@@ -1,28 +0,0 @@
-import AvatarUploader from './ImageCropper.vue';
-
-export default {
-    title: 'Organisms/Inputs/ImageCropper',
-    tags: ['autodocs'],
-    component: AvatarUploader,
-    argTypes: {}
-};
-
-const Template = args => ({
-    components: { AddTournamentPageOne },
-    setup() {
-        return {
-            args: {
-            }
-        };
-    },
-    methods: {
-    }
-});
-
-export const Default = {
-    args: {
-    }
-};
-
-
-

package/src/stories/Organisms/Inputs/TextBoxEditor/TextBoxEditor.stories.js

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