@dcrackel/hematournamentui 1.0.43 → 1.0.45

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

@@ -1,36 +1,40 @@
 <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 v-if="!showNewLocation" class="relative">
+      <BaseInput
+          :addBorder="addBorder"
+          :value="inputValue"
+          placeholder="Enter Location Name"
+          @input="updateInput"
+      />
+      <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" class="p-2 hover:bg-gray-100 cursor-pointer"
+              @click="selectItem(item)">
+            {{ item.Name }}
+          </li>
+        </ul>
+        <div class="p-2 hover:bg-gray-100 cursor-pointer" @click="addNewItem">
+          <base-button
+              iconName="fa-location-dot"
+              label="Add New Location"
+              type="secondary"
+              v-on:click="showNewLocation = true"
+          />
+        </div>
       </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>
+    <div v-if="showNewLocation">
+      <BaseModal :show="showNewLocation" buttonText="Add Location" iconName="fa-location-plus"
+                 @submit-modal="handleSubmit" @update:show="showNewLocation = false">
+        <template #modal-content>
+          <BaseInput :addBorder="true" :invalid="false" :value="locationName" class="pb-2"
+                     placeholder="Enter Location Name" type="formInput" @update:value="handleLocationName"/>
+          <AddressAutocomplete v-model="formData.address" :invalid="validAddress" class="text-lg"
+                               @update:address="handleAddressUpdate"/>
+        </template>
+      </BaseModal>
+    </div>
   </section>
 </template>
 
@@ -44,7 +48,7 @@ import BaseText from "../../../Atoms/Text/BaseText.vue";
 
 export default {
   name: 'FindLocation',
-  components: {BaseText, BaseModal, AddressAutocomplete, BaseButton, BaseIcon, BaseInput },
+  components: {BaseText, BaseModal, AddressAutocomplete, BaseButton, BaseIcon, BaseInput},
   props: {
     locations: {
       type: Array,
@@ -113,11 +117,13 @@ export default {
       this.formData.locationName = newName
     },
     handleAddressUpdate(newAddress) {
+      console.log("handle address update:")
+      console.log(newAddress)
       this.formData.address = newAddress.address
       this.formData.coordinates = newAddress.coordinates
     },
-    handleSubmit(formData) {
-      this.$emit('update-location', formData);
+    handleSubmit() {
+      this.$emit('update-location', this.formData);
       this.showNewLocation = false;
     }
   }

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

@@ -8,7 +8,7 @@
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full">
       <div v-for="item in filteredItems" :key="item.id">
-        <component :is="component" :detail="item" />
+        <component :is="component" :detail="item" @click="onClick(item)" />
       </div>
     </div>
   </div>
@@ -102,6 +102,9 @@ export default {
     },
     handleTimeFrameChange(timeFrame) {
       this.selectedTimeFrame = timeFrame;
+    },
+    onClick(item){
+      this.$emit('edit', item.TournamentId);
     }
   }
 };

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

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

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

@@ -0,0 +1,11 @@
+import EditTournamentMenu from "./EditTournamentMenu.vue";
+
+export default {
+    title: 'Templates/Menus/EditTournamentMenu/EditTournamentMenu',
+    component: EditTournamentMenu,
+    tags: ['autodocs']
+};
+
+export const Default = {
+    args: {}
+}

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

@@ -0,0 +1,68 @@
+<template>
+  <TabBar class="border-b mb-5">
+    <BaseButton
+        :selected="currentTab === 'Basic'"
+        class="flex flex-row mx-3"
+        color="primaryHighlight"
+        label="Basic"
+        type="tabBar"
+        @click="handleButtonClick('Basic')"
+    ></BaseButton>
+    <BaseButton
+        :selected="currentTab === 'Details'"
+        class="flex flex-row mx-3"
+        color="primaryHighlight"
+        label="Details"
+        type="tabBar"
+        @click="handleButtonClick('Details')"
+    ></BaseButton>
+    <BaseButton
+        :selected="currentTab === 'Events'"
+        class="flex flex-row mx-3"
+        color="primaryHighlight"
+        label="Events"
+        type="tabBar"
+        @click="handleButtonClick('Events')"
+    ></BaseButton>
+    <BaseButton
+        :selected="currentTab === 'Payments'"
+        class="flex flex-row mx-3"
+        color="primaryHighlight"
+        label="Payments"
+        type="tabBar"
+        @click="handleButtonClick('Payments')"
+    ></BaseButton>
+    <BaseButton
+        :selected="currentTab === 'Staff'"
+        class="flex flex-row mx-3"
+        color="primaryHighlight"
+        label="Staff"
+        type="tabBar"
+        @click="handleButtonClick('Staff')"
+    ></BaseButton>
+  </TabBar>
+</template>
+
+<script>
+import TabBar from "../../../Molecules/Menus/TabBar/TabBar.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  components: {
+    TabBar,
+    BaseButton
+  },
+  props: {
+    currentTab: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  methods: {
+    handleButtonClick(button) {
+      this.$emit('button-click', button);
+    }
+  }
+}
+</script>

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 my-4">
+    <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>
@@ -12,13 +12,15 @@
       <ImageCropper :personID="1"/>
     </div>
 
-    <div class="w-fu--*ll flex flex-row justify-center">
+    <div class="w-full 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>
+        <TitledInput :inputValue="tournament.name" :invalid="validation.name" placeholder="Enter Tournament Name"
+                     title="Tournament Name" @update:value="value => tournament.name = value"></TitledInput>
         <div class="flex flex-col mb-3">
-          <BaseText :color="'primaryHighlight'" :invalid="validation.addressName" :size="'sm'" :text="'Location'"
+          <BaseText :color="'primaryHighlight'" :invalid="validation.address" :size="'sm'" :text="'Location'"
                     :weight="'normal'" class="mb-1" data-testid="text-address"/>
-          <FindLocation :addBorder="true" :locations="locations" addNewText="Add New" @update-location="handleAddressUpdate" />
+          <FindLocation :addBorder="true" :locations="locations" addNewText="Add New"
+                        @update-location="handleAddressUpdate"/>
         </div>
         <div class="flex flex-row mb-3">
           <div class="w-3/4 mr-1">
@@ -28,7 +30,8 @@
                         @update:selectedDate="handleDateUpdate"/>
           </div>
           <div>
-            <TitledInput :invalid="validation.totalDays" title="Number of Days" :inputValue="tournament.totalDays"  placeholder="1" @update:value="value => tournament.totalDays = value"></TitledInput>
+            <TitledInput :inputValue="tournament.totalDays" :invalid="validation.totalDays" placeholder="1"
+                         title="Number of Days" @update:value="value => tournament.totalDays = value"></TitledInput>
           </div>
         </div>
         <div class="flex flex-col mb-3">
@@ -38,8 +41,8 @@
         </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" />
+                    :weight="'normal'" class="mb-1" data-testid="text-primary-contact"/>
+          <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'"
@@ -49,7 +52,7 @@
         </div>
         <div>
           <BaseButton class="w-full" color="neutral" label="Continue" size="sm" type="secondary"
-                     @click="handleSubmit()"/>
+                      @click="handleSubmit()"/>
         </div>
       </section>
     </div>
@@ -93,7 +96,7 @@ export default {
       tournament: {
         name: '',
         imageLink: '',
-        "address": [
+        address: [
           {
             "Name": "",
             "Address1": "",

package/src/stories/Templates/TournamentManagement/EditTournament/EditEvents/EditEvents.stories.js

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

package/src/stories/Templates/TournamentManagement/EditTournament/EditEvents/EditEvents.vue

@@ -0,0 +1,39 @@
+<template>
+  <EditTournamentMenu currentTab="Events"></EditTournamentMenu>
+  <div class="w-full flex flex-row justify-center">
+    <section class="w-96">
+      <div class="w-full flex flex-col justify-center items-center mb-5" style="text-align: center">
+        <img alt="Small desert scene with wind blowing." height="74"
+             src="/src/assets/empty_desert_icon.png"
+             width="132">
+        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'0 events added yet.'"
+                  :weight="'normal'" data-testid="text-num-events"/>
+        <BaseText :color="'primaryHighlight'" :size="'sm'" :text="'Click below to add first event.'"
+                  :weight="'normal'" data-testid="text-num-events"/>
+      </div>
+      <div>
+        <BaseButton color="neutral" label="Add Event" size="sm" type="secondary" @click="handleAddEvent()"/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  components: {
+    EditTournamentMenu,
+    BaseText,
+    BaseButton,
+  },
+  props: {},
+  methods: {
+    handleAddEvent() {
+      console.log("open modal")
+    }
+  }
+}
+</script>

package/src/stories/{Organisms/Forms/EditTournamentForm1.stories.js → Templates/TournamentManagement/EditTournament/EditPageOne/EditTournamentPageOne.stories.js}

@@ -1,8 +1,8 @@
-import EditTournamentForm from './EditTournamentForm1.vue';
+import EditTournamentPageOne from './EditTournamentPageOne.vue';
 
 export default {
-    title: 'Organisms/Forms/EditTournamentForm',
-    component: EditTournamentForm,
+    title: 'Templates/TournamentManagement/EditTournament/EditPageOne',
+    component: EditTournamentPageOne,
     tags: ['autodocs'],
     args: {},
     argTypes: {}
@@ -12,6 +12,7 @@ export default {
 export const Default = {
     args: {
         tournament: {
+            tournamentId: 1234,
             name: 'Ultimate',
             imageLink: '',
             address: '123 Winchester St',

package/src/stories/Templates/TournamentManagement/EditTournament/EditPageOne/EditTournamentPageOne.vue

@@ -0,0 +1,116 @@
+<template>
+  <EditTournamentMenu currentTab="Basic"></EditTournamentMenu>
+  <div class="w-full flex flex-row justify-center">
+    <section class="w-96">
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'GENERAL INFORMATION'" 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"/>
+        <ImageCropper :personID="1"/>
+      </div>
+      <div class="mb-3">
+        <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"
+                      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"/>
+      </div>
+      <div class="flex flex-row justify-center mb-3">
+        <div class="flex flex-col w-1/2 mr-1">
+          <BaseText :color="'primaryHighlight'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
+                    :weight="'normal'"
+                    class="mb-1 ml-1" data-testid="text-start-date"/>
+          <DatePicker :invalid="validation.startDate" :setDate="tournament.startDate"
+                      @update:selectedDate="handleDateUpdate"/>
+        </div>
+        <div class="flex flex-col w-1/2 ml-1">
+          <BaseText :color="'primaryHighlight'" class="mb-1 ml-1" text="Total Days"/>
+          <BaseInput :addBorder="true" :placeholder="localTournament.totalDays"/>
+        </div>
+      </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"/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import ImageCropper from "../../../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
+import BaseInput from "../../../../Atoms/Input/BaseInput.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import AddressAutocomplete from "../../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import TextBoxEditor from "../../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
+import FindLocation from "../../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
+import DatePicker from "../../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue";
+import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
+
+export default {
+  components: {
+    EditTournamentMenu,
+    DatePicker,
+    FindLocation,
+    TextBoxEditor,
+    TitledInput,
+    AddressAutocomplete,
+    ImageCropper,
+    BaseInput,
+    BaseText,
+    BaseButton
+  },
+  props: {
+    tournament: Object,
+    locations: []
+  },
+  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;
+    },
+    handleDateUpdate(newDate) {
+      this.tournament.startDate = newDate;
+      console.log("New Date")
+      console.log(newDate)
+      console.log(DatePicker.props.invalid)
+    },
+    handleEditorUpdate(newContent) {
+      this.tournament.description = newContent;
+    },
+    handleSubmit() {
+      console.log("submit edits")
+    },
+    handleCancel() {
+      console.log("save nothing and go back to previous page")
+    }
+  }
+}
+
+</script>

package/src/stories/Templates/TournamentManagement/EditTournament/EditPageTwo/EditTournamentPageTwo.stories.js

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

package/src/stories/Templates/TournamentManagement/EditTournament/EditPageTwo/EditTournamentPageTwo.vue

@@ -0,0 +1,112 @@
+<template>
+  <EditTournamentMenu currentTab="Details"></EditTournamentMenu>
+  <div class="w-full flex flex-row justify-center">
+    <section class="w-96">
+      <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"/>
+      </div>
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'REGISTRATION INFORMATION'" class="border-b mb-1"/>
+      <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.'"
+                  :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"/>
+      </div>
+      <BaseText :color="'quaternary'" :size="'xs'" :text="'EXTERNAL LINKS'" class="border-b mb-1"/>
+      <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'"
+                  :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"/>
+      </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>
+      <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"/>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import ImageCropper from "../../../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
+import BaseInput from "../../../../Atoms/Input/BaseInput.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import AddressAutocomplete from "../../../../Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import TextBoxEditor from "../../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
+import FindLocation from "../../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
+import DatePicker from "../../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue";
+import BaseRadioGroup from "../../../../Atoms/RadioGroup/BaseRadioGroup.vue";
+import FindPerson from "../../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
+import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
+
+export default {
+  components: {
+    EditTournamentMenu,
+    FindPerson,
+    BaseRadioGroup,
+    DatePicker,
+    FindLocation,
+    TextBoxEditor,
+    TitledInput,
+    AddressAutocomplete,
+    ImageCropper,
+    BaseInput,
+    BaseText,
+    BaseButton
+  },
+  props: {
+    tournament: Object,
+    locations: [],
+    persons: []
+  },
+  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
+      },
+      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("submit edits")
+    },
+    handleCancel() {
+      console.log("save nothing and go back to previous page")
+    }
+  }
+}
+
+</script>