@dcrackel/hematournamentui 1.0.31 → 1.0.35

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
+    <div class="w-full flex flex-row justify-center">
+      <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">
+      <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Add Tournament'" :weight="'normal'"
+                data-testid="text-add-tournament"/>
+    </div>
+    <div class="w-full flex flex-row justify-center my-4">
+      <ImageCropper :personID="1"/>
+    </div>
+
+    <div class="w-full flex flex-row justify-center">
+      <section class="w-96">
+        <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 :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'"
+                    :weight="'normal'" class="mb-1" data-testid="text-address"/>
+          <AddressAutocomplete :address="tournament.address" :invalid="validation.address"
+                               @update:address="handleAddressUpdate"/>
+        </div>
+        <div class="flex flex-row mb-3">
+          <div class="w-3/4 mr-1">
+            <BaseText :color="'primaryHighlight'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
+                      :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
+            <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>
+        </div>
+        <div class="flex flex-col mb-3">
+          <BaseText :color="'primaryHighlight'" :invalid="validation.description" :size="'sm'" :text="'Description'"
+                    :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="validation.visibility" :size="'sm'"
+                    :text="'Tournament Visibility'" :weight="'normal'" class="mb-2" data-testid="text-visibility"/>
+          <BaseRadioGroup :invalid="validation.visibility" :items="visibilityItems"
+                          @update:value="value => tournament.visibility = value"/>
+        </div>
+        <div>
+          <BaseButton class="w-full" color="neutral" label="Continue" size="sm" type="secondary"
+                      @click="handleSubmit()"/>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import ImageCropper from "../../../../Organisms/Inputs/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 BaseRadioGroup from "../../../../Atoms/RadioGroup/BaseRadioGroup.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: 'AddTournamentPageOne',
+  components: {
+    BaseText,
+    BaseInput,
+    ImageCropper,
+    AddressAutocomplete,
+    DatePicker,
+    TextBoxEditor,
+    BaseRadioGroup,
+    BaseButton
+  },
+  props: {},
+  data() {
+    return {
+      tournament: {
+        name: '',
+        imageLink: '',
+        address: '',
+        coordinates: '',
+        startDate: '',
+        totalDays: 1,
+        description: '',
+        visibility: '',
+        externalLinks: Array
+      },
+      validation: {
+        name: false,
+        imageLink: false,
+        address: false,
+        coordinates: false,
+        startDate: false,
+        totalDays: false,
+        description: false,
+        visibility: false
+      },
+      visibilityItems: [
+        {label: 'Open', value: 'open', description: 'Viewable To Everyone'},
+        {label: 'Club', value: 'club', description: 'Viewable Only to Members of Your Club'},
+        {label: 'Private', value: 'private', description: 'Only Viewable by you'},
+      ],
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.setAllValidationStates(false);
+
+      if (this.tournament.name === '') this.validation.name = true;
+      if (this.tournament.coordinates === '') this.validation.address = true;
+      if (this.tournament.startDate === '') this.validation.startDate = true;
+      if (this.tournament.totalDays === '') this.validation.totalDays = true;
+      if (this.tournament.description === '') this.validation.description = true;
+      if (this.tournament.visibility === '') this.validation.visibility = true;
+
+      if (!this.areAnyFieldsAreLeftInvalid) {
+        this.$emit('update:tournament', this.tournament);
+        this.$emit('update:step', 2);
+      }
+    },
+    setAllValidationStates(state) {
+      Object.keys(this.validation).forEach(key => {
+        this.validation[key] = state;
+      });
+    },
+    handleAddressUpdate(updatedAddress) {
+      this.tournament.address = updatedAddress.address;
+      this.tournament.coordinates = updatedAddress.coordinates;
+    },
+    handleDateUpdate(newDate) {
+      this.tournament.startDate = newDate;
+      console.log("New Date")
+      console.log(newDate)
+      console.log(DatePicker.props.invalid)
+    },
+    handleEditorUpdate(newContent) {
+      this.tournament.description = newContent;
+    }
+  },
+  computed: {
+    areAnyFieldsAreLeftInvalid() {
+      return Object.values(this.validation).every(v => v);
+    }
+  }
+}
+</script>

package/src/stories/Templates/{Forms/AddTournamentPageTwo → TournamentManagement/AddTournament/PageTwo}/AddTournamentPageTwo.stories.js

@@ -1,21 +1,21 @@
 import AddTournamentPageTwo from './AddTournamentPageTwo.vue';
+
 export default {
-    title: 'Templates/Forms/AddTournamentForm/PageTwo',
+    title: 'Templates/TournamentManagement/AddTournament/PageTwo',
     component: AddTournamentPageTwo,
     tags: ['autodocs'],
     argTypes: {}
 };
 
 const Template = args => ({
-    components: { AddTournamentPageTwo },
+    components: {AddTournamentPageTwo},
     setup() {
         return {
-            args: {
-            }
+            args: {}
         };
     },
-    methods: {
-    }
+    methods: {}
+
 });
 
 export const Default = {

package/src/stories/Templates/{Forms/AddTournamentPageTwo → TournamentManagement/AddTournament/PageTwo}/AddTournamentPageTwo.vue

@@ -28,7 +28,6 @@
                     :weight="'normal'" data-testid="text-need-help"/>
         </div>
         <div class="flex flex-row justify-center">
-          <!-- Yes needs to lead to another page that asks "Do you want Ferrotas to handle registration?" -->
           <BaseButton class="w-1/2 mr-1" color="neutral" label="Yes" selected=selected size="sm" type="square"
                       @click="handleHosting()"/>
           <BaseButton class="w-1/2 ml-1" color="neutral" label="No" size="sm" type="square" @click="toggleLinkInput()"/>
@@ -37,10 +36,12 @@
           <BaseText :color="'quaternary'" :size="'sm'" :text="'Add links to external sites such as Facebook events'"
                     :weight="'normal'" class="mb-1" data-testid="text-need-help"/>
           <div v-for="(newLink, index) in localTournament.externalLinks" :key="index" class="flex flex-row w-full">
-            <BaseInput :value="newLink.url" @input="updateLink(index, $event)" :invalid="!newLink.valid" class="pb-2 w-full"
-                       icon-name="fa-dash" placeholder="https://link1.com/yourevent"
-                       @update:iconClick="removeLink(newLink.url)" />
-            <BaseIcon color="primary" icon-name="fa-circle-xmark" size="xl" iconStyle="fa-solid" data-testid="base-icon" class="mt-1.5 -ml-7 hover:text-primaryHighlight"/>
+            <BaseInput :invalid="!newLink.valid" :value="newLink.url" class="pb-2 w-full"
+                       icon-name="fa-dash"
+                       placeholder="https://link1.com/yourevent" @input="updateLink(index, $event)"/>
+            <BaseIcon class="mt-1.5 -ml-7 hover:text-primaryHighlight" color="primary" data-testid="base-icon"
+                      icon-name="fa-circle-xmark" iconStyle="fa-solid"
+                      size="xl" @click="removeLink(newLink.url)"/>
           </div>
           <BaseButton class="w-full mt-3" color="neutral" label="Add New Link" size="sm" type="primary"
                       @click="addExternalLink()"/>
@@ -56,10 +57,10 @@
 
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Button/BaseButton.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseInput from "../../../../Atoms/Input/BaseInput.vue";
+import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
 
 export default {
   name: 'AddTournamentPageTwo',
@@ -84,7 +85,7 @@ export default {
     }
 
     if (this.localTournament.externalLinks.length === 0) {
-      this.localTournament.externalLinks.push({ url: "", valid: true });
+      this.localTournament.externalLinks.push({url: "", valid: true});
     }
   },
   methods: {
@@ -100,7 +101,7 @@ export default {
       this.linkInputVisible = !this.linkInputVisible;
     },
     addExternalLink() {
-      this.localTournament.externalLinks.push({ url: '', valid: true });
+      this.localTournament.externalLinks.push({url: '', valid: true});
     },
     removeLink(urlToRemove) {
       this.localTournament.externalLinks = this.localTournament.externalLinks.filter(link => link.url !== urlToRemove);
@@ -113,10 +114,11 @@ export default {
       }
     },
     isValidUrl(url) {
-      const regex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;
+      const regex = /^(https?:\/\/)?([\da-z.-]+)\.([\da-z.]+)\.([\/\w\W]+)\/?$/;
       return regex.test(url);
     },
     areAllLinksValid() {
+      this.localTournament.externalLinks.forEach(item => item.valid = this.isValidUrl(item.url))
       return this.localTournament.externalLinks.every(link => link.valid);
     },
   },

package/src/stories/Templates/Forms/AddTournamentPageOne/AddTournamentPageOne.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
-    <div class="w-full flex flex-row justify-center">
-      <BaseText data-testid="text-step" :color="'quaternary'" :size="'sm'" :text="'Step 1 out of 2'" :weight="'normal'" />
-    </div>
-    <div class="w-full flex flex-row justify-center my-4">
-      <BaseText data-testid="text-add-tournamnet" :color="'primaryHighlight'" :size="'2xl'" :text="'Add Tournament'" :weight="'normal'" />
-    </div>
-    <div class="w-full flex flex-row justify-center my-4">
-      <ImageCropper :personID="1" />
-    </div>
-
-    <div class="w-full flex flex-row justify-center">
-    <section class="w-96">
-    <div class="flex flex-col mb-3">
-      <BaseText data-testid="text-tournament-name" color="primary" :size="'sm'" :text="'Tournament Name'" :weight="'normal'" class="mb-1" :invalid="validation.name"  />
-      <BaseInput placeholder="Enter Tournament Name" type="formInput" :value="tournament.name" :invalid="validation.name"  @update:value="value => tournament.name = value"/>
-    </div>
-    <div class="flex flex-col mb-3">
-      <BaseText data-testid="text-address" :color="'primaryHighlight'" :size="'sm'" :text="'Address'" :weight="'normal'" class="mb-1" :invalid="validation.address" />
-      <AddressAutocomplete :address="tournament.address" :invalid="validation.address" @update:address="handleAddressUpdate" />
-    </div>
-    <div class="flex flex-row mb-3">
-      <div class="w-3/4 mr-1">
-      <BaseText data-testid="text-start-date" :color="'primaryHighlight'" :size="'sm'" :text="'Start Date'" :weight="'normal'" class="mb-1" :invalid="validation.startDate"  />
-      <DatePicker :setDate="tournament.startDate" @update:selectedDate="handleDateUpdate" />
-      </div>
-      <div class="w-1/4 ml-1">
-        <BaseText data-testid="text-total-days" :color="'primaryHighlight'" :size="'sm'" :text="'Total Days'" :weight="'normal'" class="mb-1" :invalid="validation.totalDays" />
-        <BaseInput :placeholder="`${1}`" type="formInput" :value="`${tournament.totalDays}`" :invalid="validation.totalDays" />
-      </div>
-    </div>
-    <div class="flex flex-col mb-3">
-      <BaseText data-testid="text-description" :color="'primaryHighlight'" :size="'sm'" :text="'Description'" :weight="'normal'" class="mb-1" :invalid="validation.description" />
-      <TextBoxEditor :invalid="validation.description" @update:editorContent="handleEditorUpdate" />
-    </div>
-    <div class="flex flex-col pb-4">
-      <BaseText data-testid="text-visibility" :color="'primaryHighlight'" :size="'sm'" :text="'Tournament Visibility'" :weight="'normal'" class="mb-2" :invalid="validation.visibility" />
-      <BaseRadioGroup :items="visibilityItems" :invalid="validation.visibility" @update:value="value => tournament.visibility = value" />
-    </div>
-    <div>
-      <BaseButton label="Continue" type="secondary" color="neutral" size="sm" @click="handleSubmit()" class="w-full" />
-    </div>
-    </section>
-    </div>
-  </div>
-</template>
-
-<script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ImageCropper from "../../../Organisms/ImageCropper/ImageCropper.vue";
-import BaseInput from "../../../Atoms/Input/BaseInput.vue";
-import AddressAutocomplete from "../../../Organisms/AddressAutocomplete/AddressAutocomplete.vue";
-import DatePicker from "../../../Organisms/DatePicker/DatePicker.vue";
-import TextBoxEditor from "../../../Organisms/TextBoxEditor/TextBoxEditor.vue";
-import BaseRadioGroup from "../../../Atoms/RadioGroup/BaseRadioGroup.vue";
-import BaseButton from "../../../Molecules/Button/BaseButton.vue";
-
-export default {
-  name: 'AddTournamentPageOne',
-  components: {
-    BaseText,
-    BaseInput,
-    ImageCropper,
-    AddressAutocomplete,
-    DatePicker,
-    TextBoxEditor,
-    BaseRadioGroup,
-    BaseButton
-  },
-  props: {},
-  data() {
-    return {
-      tournament: {
-        name: '',
-        imageLink: '',
-        address: '',
-        coordinates: '',
-        startDate: '',
-        totalDays: 1,
-        description: '',
-        visibility: '',
-        externalLinks: Array
-      },
-      validation: {
-        name: false,
-        imageLink: false,
-        address: false,
-        coordinates: false,
-        startDate: false,
-        totalDays: false,
-        description: false,
-        visibility: false
-      },
-      visibilityItems: [
-        { label: 'Open', value: 'open', description: 'Viewable To Everyone' },
-        { label: 'Club', value: 'club', description: 'Viewable Only to Members of Your Club'},
-        { label: 'Private', value: 'private', description: 'Only Viewable by you' },
-      ],
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.setAllValidationStates(false);
-
-      if (this.tournament.name === '') this.validation.name = true;
-      if (this.tournament.coordinates === '') this.validation.address = true;
-      if (this.tournament.startDate === '') this.validation.startDate = true;
-      if (this.tournament.totalDays === '') this.validation.totalDays = true;
-      if (this.tournament.description === '') this.validation.description = true;
-      if (this.tournament.visibility === '') this.validation.visibility = true;
-
-      if (!this.areAnyFieldsAreLeftInvalid) {
-        this.$emit('update:tournament', this.tournament);
-        this.$emit('update:step', 2);
-      }
-    },
-    setAllValidationStates(state) {
-      Object.keys(this.validation).forEach(key => {
-        this.validation[key] = state;
-      });
-    },
-    handleAddressUpdate(updatedAddress) {
-      this.tournament.address = updatedAddress.address;
-      this.tournament.coordinates = updatedAddress.coordinates;
-    },
-    handleDateUpdate(newDate) {
-      this.tournament.startDate = newDate;
-    },
-    handleEditorUpdate(newContent) {
-      this.tournament.description = newContent;
-    }
-  },
-  computed: {
-    areAnyFieldsAreLeftInvalid() {
-      return Object.values(this.validation).every(v => v);
-    }
-  }
-}
-</script>