@dcrackel/hematournamentui 1.0.39 → 1.0.42

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.stories.js

@@ -0,0 +1,75 @@
+import TitledInput from './TitledInput.vue';
+
+export default {
+    title: 'Molecules/CombinationInputs/TitledInput',
+    component: TitledInput,
+    tags: ['autodocs'],
+    args: {
+        title: 'Your Title',
+        invalid: false,
+        inputValue: '',
+        placeholder: 'Enter text'
+    },
+    argTypes: {
+        title: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: 'Your Title'
+        },
+        invalid: {
+            control: {
+                type: 'boolean'
+            },
+            defaultValue: false
+        },
+        inputValue: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: ''
+        },
+        placeholder: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: 'Enter text'
+        }
+    }
+};
+
+export const DefaultTitledInput = {
+    args: {
+        title: 'Default Title',
+        invalid: false,
+        inputValue: '',
+        placeholder: 'Enter text'
+    }
+};
+
+export const TitledInputWithError = {
+    args: {
+        title: 'Error Title',
+        invalid: true,
+        inputValue: '',
+        placeholder: 'Enter text'
+    }
+};
+
+export const TitledInputWithInitialValue = {
+    args: {
+        title: 'Initial Value Title',
+        invalid: false,
+        inputValue: 'Initial Value',
+        placeholder: 'Enter text'
+    }
+};
+
+export const TitledInputCustomPlaceholder = {
+    args: {
+        title: 'Custom Placeholder Title',
+        invalid: false,
+        inputValue: '',
+        placeholder: 'Custom Placeholder'
+    }
+};

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.test.js

@@ -0,0 +1,81 @@
+import {mount} from '@vue/test-utils';
+import TitledInput from './TitledInput.vue';
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import {describe, expect, it} from "vitest";
+
+describe('TitledInput', () => {
+    it('renders correctly with all props', () => {
+        const wrapper = mount(TitledInput, {
+            props: {
+                title: 'Test Title',
+                invalid: false,
+                inputValue: 'Test Input',
+                placeholder: 'Enter something'
+            }
+        });
+
+        expect(wrapper.text()).toContain('Test Title');
+        const input = wrapper.find('input');
+        expect(input.element.placeholder).toBe('Enter something');
+        expect(input.element.value).toBe('Test Input');
+    });
+
+    it('shows invalid state', async () => {
+        const wrapper = mount(TitledInput, {
+            props: {
+                title: 'Test Title',
+                invalid: true,
+                inputValue: 'Test Input',
+                placeholder: 'Enter something'
+            }
+        });
+
+        // Wait for the next DOM update cycle
+        await wrapper.vm.$nextTick();
+
+        // Find the BaseText component and check if it has the 'text-alarm' class
+        const baseTextComponent = wrapper.findComponent({name: 'BaseText'});
+        expect(baseTextComponent.classes()).toContain('text-alarm');
+    });
+
+    it('BaseInput emits update:value correctly', async () => {
+        const wrapper = mount(BaseInput, {
+            props: {
+                value: 'Initial Value'
+            }
+        });
+
+        // Simulate input
+        const inputElement = wrapper.find('input');
+        await inputElement.setValue('New Value');
+
+        // Wait for debounce timeout
+        await new Promise(resolve => setTimeout(resolve, 350)); // Slightly more than 300ms for safety
+        
+        // Assertions
+        expect(wrapper.emitted()).toHaveProperty('update:value');
+        expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+    });
+
+    it('emits update event when input value changes', async () => {
+        const wrapper = mount(TitledInput, {
+            props: {
+                title: 'Test Title',
+                invalid: false,
+                inputValue: 'Test Input',
+                placeholder: 'Enter something'
+            }
+        });
+
+        // Find the input element within BaseInput
+        const inputElement = wrapper.find('input');
+        await inputElement.setValue('New Value');
+
+        // Wait for the debounce timeout (300 ms) in BaseInput
+        await new Promise(resolve => setTimeout(resolve, 300));
+
+        // Check if the update:value event was emitted
+        expect(wrapper.emitted()).toHaveProperty('update:value');
+        expect(wrapper.emitted()['update:value'][0]).toEqual(['New Value']);
+    });
+});

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col mb-3">
+    <BaseText :invalid=invalid :text=title class="mb-1 ml-1" color="primary"
+              size="sm" weight="normal"/>
+    <BaseInput :addBorder="true" :invalid=invalid :placeholder=placeholder :value=inputValue
+               @update:value="handleUpdateValue"/>
+  </div>
+</template>
+
+<script>
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'TitledInput',
+  components: {BaseIcon, BaseInput, BaseText},
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    inputValue: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+  },
+  methods: {
+    handleUpdateValue(value) {
+      this.$emit('update:value', value);
+    }
+  }
+}
+</script>

package/src/stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue

@@ -12,7 +12,7 @@
 
 <script>
 import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import DropDownMenu from "../../../Organisms/Inputs/DropDown/DropDownMenu.vue";
+import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
 
 export default {
   name: 'FilterAndSortBar',

package/src/stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue

@@ -13,7 +13,7 @@
 
 <script>
 import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import DropDownMenu from "../../../Organisms/Inputs/DropDown/DropDownMenu.vue";
+import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 

package/src/stories/Molecules/Menus/EditTournamentMenu/EditTournamentMenu.stories.js

@@ -1,4 +1,5 @@
 import EditTournamentMenu from './EditTournamentMenu.vue';
+import {action} from "@storybook/addon-actions";
 
 export default {
     title: 'Molecules/Menus/EditTournamentMenu/EditTournamentMenu',
@@ -12,7 +13,18 @@ export default {
 
 export const Primary = {
     args: {
-        label: 'Menu 1',
+        items: [
+            {text: 'Details', link: ''},
+            {text: 'Events', link: ''},
+            {text: 'Payments', link: ''},
+            {text: 'Staff', link: ''}
+        ],
+        selectedItem: {text: 'Details', link: ''},
+        props: {
+            onLinkClick: {
+                default: () => action('link-clicked')
+            }
+        },
         selected: true
     }
 };

package/src/stories/Molecules/Menus/EditTournamentMenu/EditTournamentMenu.vue

@@ -1,6 +1,8 @@
 <template>
   <nav class="flex flex-row w-full">
-    <BaseText :text="label" class="mx-3" color="secondary"/>
+    <div v-for="(item, index) in items" :key="index" class="flex flex-row">
+      <BaseText :text="item.text" class="mx-3" color="secondary"/>
+    </div>
   </nav>
 </template>
 
@@ -11,9 +13,9 @@ export default {
   name: 'edit-tournament-menu',
   components: {BaseText},
   props: {
-    label: {
-      type: String,
-      default: ''
+    items: {
+      type: Array,
+      default: () => []
     },
     selected: {
       type: Boolean,

package/src/stories/Molecules/Modals/BaseModal/BaseModal.stories.js

@@ -1,9 +1,16 @@
+import { ref } from 'vue';
 import BaseModal from './BaseModal.vue';
+import AddressAutocomplete from "../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../Buttons/BaseButton/BaseButton.vue";
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
 
 export default {
+    components: {AddressAutocomplete, BaseText},
     title: 'Molecules/Modals/BaseModal',
     component: BaseModal,
     tags: ['autodocs'],
+    args: {},
     argTypes: {
         show: {
             control: 'boolean',
@@ -40,24 +47,38 @@ export default {
     }
 };
 
-const Template = (args) => ({
-    components: { BaseModal },
+export const Default = {
+    args: {
+        show: true,
+        iconName: 'fa-check-circle',
+        iconColor: 'accepted',
+        iconBackgroundColor: 'acceptedHighlight',
+        iconBorderColor: 'acceptedBorder',
+        headerText: 'Congratulations!',
+        bodyText: "Your tournament's been created. Now you can start editing events, setup up staff and start inviting members.",
+        buttonText: "Get Started!"
+    }
+};
+export const WithCustomForm = () => ({
+    components: {
+        BaseModal,
+        BaseText,
+        BaseInput,
+        AddressAutocomplete,
+        BaseButton
+    },
     setup() {
-        return { args };
+        const show = ref(true);
+        return { show };
     },
-    template: '<BaseModal v-bind="args" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    show: true,
-    iconName: 'fa-check-circle',
-    iconColor: 'accepted',
-    iconBackgroundColor: 'acceptedHighlight',
-    iconBorderColor: 'acceptedBorder',
-    headerText: 'Congratulations!',
-    bodyText: "Your tournament's been created. Now you can start editing events, setup up staff and start inviting members.",
-    buttonText: "Get Started!"
-};
-
+    template: `
+      <BaseModal :show="show">
+        <template #modal-content>
+          <p>This is custom content</p>
+          <BaseInput :addBorder="true" :invalid="false" :value="locationName" class="pb-2" placeholder="Enter Location Name" type="formInput" @update:value="value => locationName = value"/>
+          <AddressAutocomplete :address="address" :invalid="validAddress" @update:address="handleAddressUpdate" class="text-lg" />
 
+        </template>
+      </BaseModal>
+    `,
+});

package/src/stories/Molecules/Modals/BaseModal/BaseModal.vue

@@ -1,23 +1,32 @@
 <template>
-  <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-50 overflow-y-auto h-full w-full" @click="close">
-    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-neutral">
+  <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-50 overflow-y-auto h-full w-full z-20" @click="close">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-neutral" @click.stop>
+
+      <!-- Close icon wrapper with absolute positioning -->
+      <div class="absolute top-3 right-3">
+        <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
+      </div>
+
       <div class="mt-3 text-center w-full">
-        <div class="w-full flex flex-row justify-center">
+        <div class="w-full flex flex-row justify-center mb-8">
           <p :class="['bg-' + iconBackgroundColor, 'flex flex-row justify-center h-20 w-20 rounded-full', 'border border-' + iconBorderColor]">
             <BaseIcon :icon-name="iconName" iconStyle="fa-solid" size="4xl" :color="iconColor" class="mb-3 mt-5" data-testid="base-icon" />
           </p>
         </div>
-        <BaseText :text="headerText" size="2xl" weight="bold" color="secondary" class="m-3" data-testid="text-title"/>
-        <BaseText :text="bodyText" size="sm" weight="normal" color="primaryHighlight" class="mb-3" data-testid="text-title"/>
+
+        <slot name="modal-content">
+          <BaseText :text="headerText" size="2xl" weight="bold" color="secondary" class="m-3" data-testid="text-title"/>
+          <BaseText :text="bodyText" size="sm" weight="normal" color="primaryHighlight" class="mb-3" data-testid="text-title"/>
+        </slot>
+
         <div class="mt-4">
-          <BaseButton :label="buttonText" size="sm" type="secondary" :selected="true" @click="close" color="neutral" class="w-full" data-testid="base-button"/>
+          <BaseButton :label="buttonText" size="sm" type="secondary" :selected="true" @click="submit" color="neutral" class="w-full" data-testid="base-button"/>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
@@ -60,11 +69,15 @@ export default {
       default: 'Button Text'
     }
   },
-  emits: ['update:show'],
+  emits: ['update:show', 'submit-modal'],
   methods: {
     close() {
       this.$emit('update:show', false)
-    }
+    },
+    submit() {
+      this.$emit('submit-modal');
+      this.close();
+    },
   }
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="rounded-xl w-72 shadow">
-    <TournamentHeader :artwork="detail.artwork" :tags="detail.tags" />
+    <TournamentHeader :artwork="detail.images && detail.images.length > 0 ? detail.images[0].URL : ''" :tags="detail.tags" />
     <TournamentDetail :detail="detail" />
   </div>
 </template>
@@ -20,13 +20,25 @@ export default {
       type: Object,
       required: true,
       default: () => ({
-        artwork: '',
-        tags: [],
-        name: '',
-        description: '',
-        date: '',
-        closes: '',
-        location: ''
+        TournamentId: null,
+        Name: '',
+        StartDate: '',
+        EndDate: '',
+        Description: '',
+        ClubId: null,
+        AddressId: null,
+        'Club.Name': '',
+        Address: [{
+          Name: '',
+          Address1: '',
+          City: '',
+          State: '',
+          Zip: null,
+          Coordinates: ''
+        }],
+        SocialMedia: [],
+        images: [],
+        tags: []
       })
     }
   },

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

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

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

@@ -1,15 +1,13 @@
 <template>
-
-    <vue-google-autocomplete
-        class="border rounded-lg text-secondary text-xs p-2 w-full appearance-none focus:outline-none"
-        :class="invalid ? 'border-alarm' : 'border-dropdownSelect'"
-        id="map"
-        ref="address"
-        v-model="address"
-        placeholder="Venue Address"
-        @placechanged="getAddressData"
-    />
-
+  <vue-google-autocomplete
+    class="border rounded-lg text-secondary text-sm p-2 w-full appearance-none focus:outline-none"
+    :class="invalid ? 'border-alarm' : 'border-dropdownSelect'"
+    id="map"
+    ref="address"
+    v-model="address"
+    placeholder="Venue Address"
+    @placechanged="getAddressData"
+  />
 </template>
 
 <script>

package/src/stories/Organisms/{Inputs → ComplexInputs}/DatePicker/DatePicker.stories.js

@@ -1,7 +1,7 @@
 import DatePicker from './DatePicker.vue';
 
 export default {
-    title: 'Organisms/Inputs/DatePicker',
+    title: 'Organisms/ComplexInputs/DatePicker',
     component: DatePicker,
     tags: ['autodocs'],
     argTypes: {}

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

@@ -0,0 +1,20 @@
+import DropDownMenu from './DropDownMenu.vue';
+export default {
+    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'}
+    }
+};

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

@@ -0,0 +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"
+    },
+    argTypes: {
+        locations: {
+            control: {
+                type: 'object'
+            }
+        },
+        addNewText: {
+            control: {
+                type: 'text'
+            }
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        locations: mockLocation,
+        addNewText: "Add New Location"
+    }
+};

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

@@ -0,0 +1,125 @@
+<template>
+  <section>
+  <div v-if="!showNewLocation" class="relative">
+    <BaseInput
+        :addBorder="addBorder"
+        :value="inputValue"
+        @input="updateInput"
+        placeholder="Enter Location Name"
+    />
+    <div v-if="showDropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1">
+      <ul>
+        <li v-for="(item, index) in filteredLocations" :key="index" @click="selectItem(item)" class="p-2 hover:bg-gray-100 cursor-pointer">
+          {{ item.Name }}
+        </li>
+      </ul>
+      <div @click="addNewItem" class="p-2 hover:bg-gray-100 cursor-pointer">
+        <base-button
+            type="secondary"
+            label="Add New Location"
+            iconName="fa-location-dot"
+            v-on:click="showNewLocation = true"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-if="showNewLocation" >
+    <BaseModal :show="showNewLocation" iconName="fa-location-plus" buttonText="Add Location" @submit-modal="handleSubmit" @update:show="showNewLocation = false">
+      <template #modal-content>
+      <BaseInput :addBorder="true" :value="locationName" :invalid="false" @update:value="handleLocationName"  class="pb-2" placeholder="Enter Location Name" type="formInput" />
+      <AddressAutocomplete v-model="formData.address" :invalid="validAddress" @update:address="handleAddressUpdate" class="text-lg" />
+      </template>
+    </BaseModal>
+  </div>
+  </section>
+</template>
+
+<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";
+
+export default {
+  name: 'FindLocation',
+  components: {BaseText, BaseModal, AddressAutocomplete, BaseButton, BaseIcon, BaseInput },
+  props: {
+    locations: {
+      type: Array,
+      required: true
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    addNewText: {
+      type: String,
+      default: 'Add New'
+    }
+  },
+  data() {
+    return {
+      formData: {
+        locationName: '',
+        address: '',
+        coordinates: ''
+      },
+      locationName: '',
+      validAddress: false,
+      showNewLocation: false,
+      filteredLocations: this.locations,
+      inputValue: '',
+      showDropdown: false,
+      showAddNew: false,
+      debouncedTimeout: null
+    };
+  },
+  watch: {
+    inputValue(newValue) {
+      this.showDropdown = newValue.length > 0;
+      this.showAddNew = newValue.length > 0 && this.filteredLocations.length === 0;
+      this.debounceSearch();
+    }
+  },
+  methods: {
+    updateInput(event) {
+      this.inputValue = event.target.value;
+    },
+    selectItem(item) {
+      this.showDropdown = false;
+      this.inputValue = item.Name;
+      this.$emit('update-location', item);
+      this.$nextTick(() => {
+        this.showDropdown = false;
+      });
+    },
+    addNewItem() {
+      this.$emit('add-new', this.inputValue);
+      this.showDropdown = false;
+    },
+    onInputChanged(value) {
+      if (!this.showDropdown) return;
+      this.filteredLocations = this.locations.filter(item => item.Name.toLowerCase().includes(value.toLowerCase()));
+    },
+    debounceSearch() {
+      clearTimeout(this.debouncedTimeout);
+      this.debouncedTimeout = setTimeout(() => {
+        this.onInputChanged(this.inputValue)
+      }, 500);
+    },
+    handleLocationName(newName) {
+      this.formData.locationName = newName
+    },
+    handleAddressUpdate(newAddress) {
+      this.formData.address = newAddress.address
+      this.formData.coordinates = newAddress.coordinates
+    },
+    handleSubmit(formData) {
+      this.$emit('update-location', formData);
+      this.showNewLocation = false;
+    }
+  }
+};
+</script>