@dcrackel/hematournamentui 1.0.145 → 1.0.146

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

@@ -1,6 +1,6 @@
 <template>
   <div class="border rounded-lg text-secondary text-sm p-4 w-full" :class="invalid ? 'border-alarm' : 'border-dropdownSelect'">
-    <div data-testid="editor-buttons" class="w-full flex flex-row pl-2">
+    <div data-testid="editor-buttons" class="flex flex-row pl-2">
       <div class="w-1/3 border-r border-dropdownSelect flex flex-row justify-between pr-2">
         <BaseButton iconName="fa-h1" label="" type="editor"
                     :selected="editor && editor.isActive('heading', { level: 1 })"
@@ -27,26 +27,26 @@
         <BaseButton :selected="editor && editor.isActive({ textAlign: 'left' })" iconName="fa-align-left" label="" type="editor"
                     @click="editor.chain().setTextAlign('left').run()"/>
         <BaseButton :selected="editor && editor.isActive({ textAlign: 'center' })" iconName="fa-align-center" label="" type="editor"
-                    @click="editor && editor.chain().setTextAlign('center').run()"/>
+                    @click="editor.chain().setTextAlign('center').run()"/>
         <BaseButton :selected="editor && editor.isActive({ textAlign: 'right' })" iconName="fa-align-right" label="" type="editor"
-                    @click="editor && editor.chain().setTextAlign('right').run()"/>
+                    @click="editor.chain().setTextAlign('right').run()"/>
         <BaseButton :selected="editor && editor.isActive({ textAlign: 'justify' })" iconName="fa-align-justify" label="" type="editor"
-                    @click="editor && editor.chain().setTextAlign('justify').run()"/>
+                    @click="editor.chain().setTextAlign('justify').run()"/>
       </div>
     </div>
 
-    <p class="my-4 my-2 p-4 rounded-xl h-40 bg-tertiary overflow-auto">
+    <p class="my-4 p-4 rounded-xl h-72 bg-tertiary overflow-auto">
       <editor-content :editor="editor" class="focus:shadow-none focus:outline-none"/>
     </p>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
-import {EditorContent, useEditor} from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import Highlight from '@tiptap/extension-highlight'
-import TextAlign from '@tiptap/extension-text-align'
+import { ref, watch } from 'vue';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Highlight from '@tiptap/extension-highlight';
+import TextAlign from '@tiptap/extension-text-align';
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 
 export default {
@@ -58,17 +58,17 @@ export default {
     invalid: {
       type: Boolean,
       default: false
+    },
+    initialContent: {
+      type: String,
+      default: ''
     }
   },
-  data() {
-    return {
-    }
-  },
-  setup(props, {emit}) {
-    const editorContent = ref("");
+  setup(props, { emit }) {
+    const editorContent = ref(props.initialContent);
 
     const editor = useEditor({
-      content: "",
+      content: props.initialContent,
       extensions: [
         StarterKit,
         Highlight,
@@ -85,13 +85,17 @@ export default {
         editorContent.value = editor.getHTML();
         emit('update:editorContent', editorContent.value);
       }
-    })
+    });
+
+    // Watch for changes in initialContent prop to update the editor content accordingly
+    watch(() => props.initialContent, (newContent) => {
+      if (editor.value) {
+        editor.value.commands.setContent(newContent);
+      }
+    });
 
-    return {editor, editorContent}
+    return { editor, editorContent };
   },
-  methods: {
-  }
-}
+  methods: {}
+};
 </script>
-
-

package/src/stories/Templates/TournamentManagement/AddTournament/PageTwo/AddTournamentPageTwo.vue

@@ -1,14 +1,13 @@
 <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"/>
+      <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-full">
         <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?'"
+          <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Do you want MeyerSquared to host your tournament?'"
                     :weight="'normal'" data-testid="text-ferrotas-to-host"/>
         </div>
         <div class="w-full flex flex-col mb-3">
@@ -18,7 +17,7 @@
                    '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 ' +
+          <BaseText :color="'quaternary'" :size="'sm'" :text="'By selecting \'Yes\', you\'ll gain access to our comprehensive MeyerSquared ' +
                      '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"/>
@@ -29,8 +28,7 @@
         </div>
         <section class="flex w-full justify-center">
         <div class="flex flex-row justify-center w-3/4">
-          <BaseButton class="w-1/2 mr-1" color="neutral" label="Yes" selected=selected size="sm" type="square"
-                      @click="handleHosting()"/>
+          <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>

package/src/stories/Templates/TournamentManagement/EditTournament/EditBasic/EditTournamentBasicInfo.stories.js

@@ -3,7 +3,7 @@ import mockLocation from '../../../../../mocks/locationMock.js';
 import mockTournaments from '../../../../../mocks/tournamentMock.js';
 
 export default {
-    title: 'Templates/TournamentManagement/EditTournament/EditBasicInfo',
+    title: 'Templates/TournamentManagement/EditTournament/EditTournamentBasicInfo',
     component: EditTournamentBasicInfo,
     tags: ['autodocs'],
     args: {

package/src/stories/Templates/TournamentManagement/EditTournament/EditBasic/EditTournamentBasicInfo.vue

@@ -2,32 +2,33 @@
   <EditTournamentMenu currentTab="Basic" :tabs="tabs" @tabMenuClick="handleTabMenuClick" />
   <div class="w-full flex flex-row justify-center">
     <section class="w-full">
-      <BaseText :color="'quaternary'" :size="'xs'" :text="'GENERAL INFORMATION'" class="border-b mb-5"/>
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'IMAGE'" class="border-b mb-5"/>
       <div class="w-full flex flex-col mb-3">
         <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Cover Image'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-cover-image"/>
         <div class="w-full flex justify-center">
           <div class="w-3/4">
-            <ImageCropper :personID="1" />
+            <ImageCropper :url="tournamentImage" :imageName="`t-${localTournament.TournamentId}`" @update:url="handleUpdateUrl" />
           </div>
         </div>
       </div>
       <div class="border-b border-dropdownSelect my-10"></div>
-      <div class="mb-3">
+      <div class="mb-3 mt-4">
+        <BaseText :color="'quaternary'" :size="'xs'" :text="'GENERAL INFORMATION'" class="border-b mb-5"/>
         <TitledInput :inputValue="localTournament.Name" :invalid="validation.name" :placeholder="localTournament.Name"
                      :title="'Tournament Name'" @update:value="value => localTournament.Name = value"/>
       </div>
       <div class="mb-3">
         <BaseText :color="'primaryHighlight'" :invalid="validation.address" :size="'sm'" :text="'Address'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-address"/>
-        <FindLocation :invalid="validation.address" :locations="locations" :placeholder="localTournament.address"
+        <FindLocation :invalid="validation.address" :locations="locations" :placeholder="tournamentAddress"
                       :addBorder=true
                       @update:address="handleAddressUpdate"/>
       </div>
       <div class="mb-3">
         <BaseText :color="'primaryHighlight'" :invalid="validation.description" :size="'sm'" :text="'Description'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-description"/>
-        <TextBoxEditor :invalid="validation.description" @update:editorContent="handleEditorUpdate"/>
+        <TextBoxEditor :initialContent="localTournament.Description" :invalid="validation.description" @update:editorContent="handleEditorUpdate"/>
       </div>
       <div class="flex flex-row justify-center mb-3">
         <div class="flex flex-col w-1/2 mr-1">
@@ -43,9 +44,9 @@
         </div>
       </div>
       <div class="flex flex-row justify-center my-10">
+        <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
         <BaseButton class="w-1/2 mr-1" color="neutral" label="Save" selected=selected size="sm" type="primary"
                     @click="handleSubmit"/>
-        <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
       </div>
     </section>
   </div>
@@ -117,7 +118,14 @@ export default {
       const timeDifference = endDate - startDate;
       const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
       return dayDifference >= 0 ? Math.ceil(dayDifference) + 1 : 0;
+    },
+    tournamentImage() {
+      return this.localTournament.Images[0].URL;
+    },
+    tournamentAddress(){
+      return this.localTournament.Address.Name;
     }
+
   },
   methods: {
     handleTabMenuClick(value) {
@@ -138,6 +146,9 @@ export default {
     },
     handleCancel() {
       console.log("save nothing and go back to previous page")
+    },
+    handleUpdateUrl() {
+      console.log('handleUpdateUrl')
     }
   }
 }

package/src/stories/Templates/TournamentManagement/EditTournament/EditDetails/EditTournamentDetails.stories.js

@@ -1,11 +1,13 @@
 import EditTournamentDetails from './EditTournamentDetails.vue';
 import mockPersons from '../../../../../mocks/personsMock.js';
+import mockTournaments from '../../../../../mocks/tournamentMock.js';
 
 export default {
     title: 'Templates/TournamentManagement/EditTournament/EditDetails',
     component: EditTournamentDetails,
     tags: ['autodocs'],
     args: {
+        tournament: mockTournaments[0],
         persons: mockPersons
     },
     argTypes: {}
@@ -14,17 +16,7 @@ export default {
 
 export const Default = {
     args: {
-        tournament: {
-            tournamentId: 345,
-            name: 'Ultimate',
-            imageLink: '',
-            address: '123 Winchester St',
-            coordinates: '',
-            startDate: '',
-            totalDays: 1,
-            description: '',
-            visibility: '',
-            externalLinks: []
-        },
+        tournament: mockTournaments[1],
+        persons: mockPersons
     }
 };

package/src/stories/Templates/TournamentManagement/EditTournament/EditDetails/EditTournamentDetails.vue

@@ -1,45 +1,64 @@
 <template>
-  <EditTournamentMenu currentTab="Details" :tabs="tabs" />
+  <EditTournamentMenu currentTab="Details" :tabs="tabs" @tabMenuClick="handleTabMenuClick" />
   <div class="w-full flex flex-row justify-center my-10">
     <section class="w-3/4">
       <BaseText :color="'quaternary'" :size="'xs'" :text="'DETAIL INFORMATION'" class="border-b mb-5"/>
       <div class="flex flex-col pb-4 mb-10">
         <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"/>
+        <BaseRadioGroup :invalid="validation.visibility" :items="visibilityItems" :value="selectedVisibility" @update:value="handleVisibleChange"/>
       </div>
-      <BaseText :color="'quaternary'" :size="'xs'" :text="'REGISTRATION INFORMATION'" class="border-b mb-2"/>
+
+      <section>
+        <BaseText :color="'quaternary'" :size="'xs'" :text="'MEYERSQUARED - M2'" class="border-b mb-6 "/>
+        <div class="w-full flex flex-col mb-3 ml-1">
+          <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Would you like to run your tournament with MeyerSquared (M2)? If you choose \'No,\' your tournament will be listed on our calendar, and users will be provided with a link to your website.'"
+                    :weight="'normal'" data-testid="text-registration"/>
+        </div>
+        <section class="flex w-full justify-center mb-6">
+          <div class="flex flex-row justify-center w-3/4">
+            <BaseButton class="w-1/2 mr-1" color="neutral" label="Yes" :selected="usingM2" size="sm" type="square" @click="handleUpdateM2(true)"/>
+            <BaseButton class="w-1/2 ml-1" color="neutral" label="No"  :selected="!usingM2" size="sm" type="square" @click="handleUpdateM2(false)"/>
+          </div>
+        </section>
+      </section>
+
+      <section v-if="!usingM2">
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'REGISTRATION INFORMATION'" class="border-b mb-6"/>
       <div class="w-full flex flex-col mb-3 ml-1">
-        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'If you\'re not utilizing Ferrotas for registration, ' +
-         'please proceed by completing the form below. We\'re here to assist you every step of the way.'"
+        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'If you\'re not utilizing MeyerSquared to run your tournament, ' +
+         'please proceed by filling in the registration Link. Your event will still show on the Calendar. We\'re here to assist you every step of the way.'"
                   :weight="'normal'" data-testid="text-registration"/>
       </div>
       <div class="mb-10">
         <TitledInput :inputValue="localTournament.registrationLink" :invalid="validation.registrationLink"
                      :placeholder="localTournament.registrationLink"
-                     :title="'Registration Link'" @update:value="value => localTournament.registrationLink = value"/>
+                     :title="'Registration Link'" @update:value="handleUpdateRegLink"/>
       </div>
-      <BaseText :color="'quaternary'" :size="'xs'" :text="'EXTERNAL LINKS'" class="border-b mb-2"/>
+      </section>
+
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'TOURNAMENT TAGS'" class="border-b mb-6"/>
       <div class="w-full flex flex-col mb-3 ml-1">
-        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Feel free to add as many links to external sites ' +
-         'as you desire to enhance the visibility of your site. We support your efforts in broadening your online presence'"
+        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Tags are used to help users easily find tournaments they are interested in. Each tag acts as a button that users can click to apply a one-click filter on tournaments. Choose tags that accurately represent the key aspects of the tournament, such as the type of weapons used, skill level, or special themes.'"
                   :weight="'normal'" data-testid="text-external-links"/>
       </div>
       <div class="mb-10">
-        <TitledInput :inputValue="localTournament.externalLinks" :invalid="validation.name" :title="'External Link'"
-                     @update:value="value => localTournament.externalLinks = value"/>
+        <TitledInput :inputValue="tournamentTags" :invalid="false" :title="'Tags'" :placeholder="'Longsword,Saber,Rapier'" @update:value="handleTags"/>
       </div>
+
       <BaseText :color="'quaternary'" :size="'xs'" :text="'CONTACT INFORMATION'" class="border-b mb-5"/>
       <div class="mb-10">
         <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-address"/>
-        <FindPerson :addBorder="true" :persons="persons" addNewText="Add New Person"/>
+        <div class="w-full flex flex-col mb-3 ml-1">
+          <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'This is the person to contact for any questions or concerns about the tournament.'"
+                    :weight="'normal'" data-testid="text-registration"/>
+        </div>
+        <FindPerson :addBorder="true" :persons="persons" addNewText="Add New Person" @personSelected="handlePersonChange"/>
       </div>
       <div class="flex flex-row justify-center">
-        <BaseButton class="w-1/2 mr-1" color="neutral" label="Save" selected=selected size="sm" type="primary"
-                    @click="handleSubmit"/>
         <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
+        <BaseButton class="w-1/2 mr-1" color="neutral" label="Save" selected=selected size="sm" type="primary" @click="handleSubmit"/>
       </div>
     </section>
   </div>
@@ -79,10 +98,6 @@ export default {
       type: Object,
       required: true
     },
-    locations: {
-      type: Array,
-      required: true
-    },
     persons: {
       type: Array,
       required: true
@@ -102,25 +117,48 @@ export default {
         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'},
+        {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'},
       ],
       tabs: [
-        { id: 'Basic', label: 'Basic', color: 'primaryHighlight' },
-        { id: 'Details', label: 'Details', color: 'primaryHighlight' },
-        { id: 'Events', label: 'Events', color: 'primaryHighlight' },
-        { id: 'Staff', label: 'Staff', color: 'primaryHighlight' }
-      ]
+        {id: 'Basic', label: 'Basic', color: 'primaryHighlight'},
+        {id: 'Details', label: 'Details', color: 'primaryHighlight'},
+        {id: 'Events', label: 'Events', color: 'primaryHighlight'},
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'}
+      ],
+      usingM2: true,
+      selectedVisibility: 'Open',
+    }
+  },
+  computed: {
+    tournamentTags() {
+      return this.tournament.Tag.map(tag => tag.TagName).join(', ');
     }
   },
   methods: {
+    handleVisibleChange(change){
+      this.selectedVisibility = change;
+    },
+    handlePersonChange(person) {
+      this.localTournament.PrimaryContactId = person.PersonId;
+    },
+    handleTabMenuClick(value) {
+      this.$emit('tab:menu-click', value);
+    },
     handleSubmit() {
-      console.log("submit edits")
+      this.$emit('save:edits', this.localTournament)
     },
     handleCancel() {
       console.log("save nothing and go back to previous page")
-    }
+    },
+    handleUpdateM2(value) {
+      this.usingM2 = value;
+      this.localTournament.usingM2 = value
+    },
+    handleTags(value) {
+      this.localTournament.Tag = value.split(',').map(tag => ({ TagName: tag.trim() }));
+    },
   }
 }