@dcrackel/hematournamentui 1.0.22 → 1.0.23

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

@@ -1,137 +1,138 @@
-<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-tournament" :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 Tournemnt 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" :invalid="validation.startDate" />
-      </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="continue" 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: ''
-      },
-      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() {
-      console.log('submitting form');
-      this.setAllValidationStates(false);
-      console.log(this.tournament);
-
-      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;
-
-    },
-    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: {
-    isFormValid() {
-      return Object.values(this.validation).every(v => v);
-    }
-  }
-}
-</script>
+<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" :invalid="validation.startDate" />
+      </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() {
+      console.log('submitting form');
+      this.setAllValidationStates(false);
+      console.log(this.tournament);
+
+      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;
+
+    },
+    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: {
+    isFormValid() {
+      return Object.values(this.validation).every(v => v);
+    }
+  }
+}
+</script>

package/src/stories/Templates/Forms/AddTournamentPageTwo/AddTournamentPageTwo.stories.js

@@ -0,0 +1,35 @@
+import AddTournamentPageTwo from './AddTournamentPageTwo.vue';
+export default {
+    title: 'Templates/Forms/AddTournamentForm/PageTwo',
+    component: AddTournamentPageTwo,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { AddTournamentPageTwo },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+        tournament: {
+            name: 'Ultimate',
+            imageLink: '',
+            address: '123 Winchester St',
+            coordinates: '',
+            startDate: '',
+            totalDays: 1,
+            description: '',
+            visibility: '',
+            externalLinks: []
+        },
+    }
+};

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

@@ -0,0 +1,121 @@
+<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 2 out of 4'" :weight="'normal'"
+                data-testid="text-step"/>
+    </div>
+
+    <div class="w-full flex flex-row justify-center">
+      <section class="w-96">
+        <div class="w-full flex flex-row justify-center text-center my-4">
+          <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Do you want Ferrotas to host your tournament?'"
+                    :weight="'normal'" data-testid="text-ferrotas-to-host"/>
+        </div>
+        <div class="w-full flex flex-col mb-3">
+          <BaseText :color="'quaternary'" :size="'sm'" :text="'If you select \'No\', your tournament will be featured on our main ' +
+                 'calendar. This will include a direct link to your tournament\'s webpage, ' +
+                  'making it easy for participants to find all the relevant information on ' +
+                   'your own site.'"
+                    :weight="'normal'" data-testid="text-select-no"/>
+          <br>
+          <BaseText :color="'quaternary'" :size="'sm'" :text="'By selecting \'Yes\', you\'ll gain access to our comprehensive Ferrotas ' +
+                     'platform. This allows you to manage and conduct your tournament directly ' +
+                      'through our system, offering a seamless and integrated experience.'"
+                    :weight="'normal'" data-testid="text-select-yes"/>
+          <br>
+          <BaseText :color="'quaternary'" :size="'sm'" :text="'Need Assistance? Our support team is always ready to help. Contact us ' +
+                       'for any queries or guidance you need.'"
+                    :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()"/>
+        </div>
+        <section v-if="linkInputVisible" class="flex flex-col mb-3">
+          <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"/>
+          </div>
+          <BaseButton class="w-full mt-3" color="neutral" label="Add New Link" size="sm" type="primary"
+                      @click="addExternalLink()"/>
+        </section>
+        <div>
+          <BaseButton color="neutral" label="Continue" size="sm" type="secondary" @click="handleSubmit()"/>
+        </div>
+
+      </section>
+    </div>
+  </div>
+</template>
+
+
+<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";
+
+export default {
+  name: 'AddTournamentPageTwo',
+  components: {
+    BaseIcon,
+    BaseText,
+    BaseButton,
+    BaseInput
+  },
+  props: {tournament: Object},
+  data() {
+    return {
+      ferrotasToHost: false,
+      linkInputVisible: false,
+      localTournament: JSON.parse(JSON.stringify(this.tournament))
+    }
+  },
+  created() {
+    if (this.localTournament.externalLinks.length === 0) {
+      this.localTournament.externalLinks = [{url: '', valid: true}]
+    }
+  },
+  methods: {
+    updateLink(index, event) {
+      const newUrl = event.target.value;
+      this.localTournament.externalLinks[index].url = newUrl;
+      this.localTournament.externalLinks[index].valid = this.isValidUrl(newUrl);
+    },
+    handleHosting() {
+      this.ferrotasToHost = !this.ferrotasToHost;
+    },
+    toggleLinkInput() {
+      this.linkInputVisible = !this.linkInputVisible;
+    },
+    addExternalLink() {
+      this.localTournament.externalLinks.push({ url: '', valid: true });
+    },
+    removeLink(urlToRemove) {
+      this.localTournament.externalLinks = this.localTournament.externalLinks.filter(link => link.url !== urlToRemove);
+    },
+    handleSubmit() {
+      console.log('submitting ferrotas hosting');
+      if (this.areAllLinksValid()) {
+        console.log(this.localTournament)
+        this.$emit('submit', this.localTournament);
+      }
+    },
+    isValidUrl(url) {
+      const regex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;
+      return regex.test(url);
+    },
+    areAllLinksValid() {
+      return this.localTournament.externalLinks.every(link => link.valid);
+    },
+  },
+
+}
+
+</script>

package/src/stories/Templates/Menu/Admin/AdminLeftMenu.stories.js

@@ -1,28 +1,28 @@
-import AdminLeftMenu from './AdminLeftMenu.vue';
-
-export default {
-    title: 'Templates/Admin/AdminLeftMenu',
-    component: AdminLeftMenu,
-    tags: ['autodocs']
-};
-const Template = args => ({
-    components: { AdminLeftMenu },
-    setup() {
-        return { args };
-    },
-    methods: {
-        onMenuClick(index) {
-            alert(`Button ${index + 1} clicked!`);
-        }
-    }
-});
-
-export const Default = {
-    args: {
-        items: [
-            { text: 'Home', link: '/' },
-            { text: 'Category', link: '/category' },
-            { text: 'Product', link: '' }
-        ]
-    }
-};
+import AdminLeftMenu from './AdminLeftMenu.vue';
+
+export default {
+    title: 'Templates/Admin/AdminLeftMenu',
+    component: AdminLeftMenu,
+    tags: ['autodocs']
+};
+const Template = args => ({
+    components: { AdminLeftMenu },
+    setup() {
+        return { args };
+    },
+    methods: {
+        onMenuClick(index) {
+            alert(`Button ${index + 1} clicked!`);
+        }
+    }
+});
+
+export const Default = {
+    args: {
+        items: [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' },
+            { text: 'Product', link: '' }
+        ]
+    }
+};

package/src/stories/Templates/Menu/Admin/AdminLeftMenu.vue

@@ -1,57 +1,57 @@
-<template>
-  <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
-    <section class="h-28 border-b border-neutral">
-      <div class="flex flex-col justify-center h-28">
-        <div class="ml-8">
-          <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png"  alt="logo"/>
-        </div>
-      </div>
-    </section>
-    <section class="flex flex-col p-2 h-full">
-      <BaseButton
-          v-for="button in buttons"
-          :label="button.label"
-          iconClass="fa-solid fa-trophy text-white"
-          type="admin"
-          hover="admin"
-          @click="handleButtonClick(button)"
-      />
-    </section>
-    <section class="flex flex-col justify-end p-2 flex-grow">
-      <div class="border-t border-neutral pt-2">
-        <BaseButton
-            iconClass="fa-solid fa-circle-user text-textSecondary"
-            label="Account"
-            type="adminSecondary"
-            @click="handleButtonClick(button)"
-        />
-        <BaseButton
-            iconClass="fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary"
-            label="Log Out"
-            type="adminSecondary"
-            @click="handleButtonClick(button)"
-        />
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import BaseButton from "../../../Molecules/Button/BaseButton.vue";
-
-export default {
-  name: 'AdminLeftMenu',
-  components: { BaseButton },
-  props: {
-    buttons: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    handleButtonClick(button) {
-      this.$emit('button-click', button);
-    }
-  }
-};
-</script>
+<template>
+  <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
+    <section class="h-28 border-b border-neutral">
+      <div class="flex flex-col justify-center h-28">
+        <div class="ml-8">
+          <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png"  alt="logo"/>
+        </div>
+      </div>
+    </section>
+    <section class="flex flex-col p-2 h-full">
+      <BaseButton
+          v-for="button in buttons"
+          :label="button.label"
+          iconClass="fa-solid fa-trophy text-white"
+          type="admin"
+          hover="admin"
+          @click="handleButtonClick(button)"
+      />
+    </section>
+    <section class="flex flex-col justify-end p-2 flex-grow">
+      <div class="border-t border-neutral pt-2">
+        <BaseButton
+            iconClass="fa-solid fa-circle-user text-textSecondary"
+            label="Account"
+            type="adminSecondary"
+            @click="handleButtonClick(button)"
+        />
+        <BaseButton
+            iconClass="fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary"
+            label="Log Out"
+            type="adminSecondary"
+            @click="handleButtonClick(button)"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import BaseButton from "../../../Molecules/Button/BaseButton.vue";
+
+export default {
+  name: 'AdminLeftMenu',
+  components: { BaseButton },
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleButtonClick(button) {
+      this.$emit('button-click', button);
+    }
+  }
+};
+</script>